offer menu options to download media

also always show status (before sendStatus), not just when isPending
as we are recycling it to show download status as well
This commit is contained in:
Bruno Windels 2022-06-25 20:14:55 +02:00
parent 7430aa7aab
commit 3369bda2f0
2 changed files with 25 additions and 9 deletions

View file

@ -233,7 +233,7 @@ only loads when the top comes into view*/
align-self: stretch;
}
.Timeline_messageBody .media > .sendStatus {
.Timeline_messageBody .media > .status {
align-self: end;
justify-self: start;
font-size: 0.8em;
@ -251,7 +251,7 @@ only loads when the top comes into view*/
}
.Timeline_messageBody .media > time,
.Timeline_messageBody .media > .sendStatus {
.Timeline_messageBody .media > .status {
color: var(--text-color);
display: block;
padding: 2px;

View file

@ -15,6 +15,7 @@ limitations under the License.
*/
import {BaseMessageView} from "./BaseMessageView.js";
import {Menu} from "../../../general/Menu.js";
export class BaseMediaView extends BaseMessageView {
renderMessageBody(t, vm) {
@ -35,24 +36,39 @@ export class BaseMediaView extends BaseMessageView {
this.renderMedia(t, vm),
t.time(vm.date + " " + vm.time),
];
const status = t.div({
className: {
status: true,
hidden: vm => !vm.status
},
}, vm => vm.status);
children.push(status);
if (vm.isPending) {
const sendStatus = t.div({
className: {
sendStatus: true,
hidden: vm => !vm.sendStatus
},
}, vm => vm.sendStatus);
const progress = t.progress({
min: 0,
max: 100,
value: vm => vm.uploadPercentage,
className: {hidden: vm => !vm.isUploading}
});
children.push(sendStatus, progress);
children.push(progress);
}
return t.div({className: "Timeline_messageBody"}, [
t.div({className: "media", style: `max-width: ${vm.width}px`}, children),
t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
]);
}
createMenuOptions(vm) {
const options = super.createMenuOptions(vm);
if (!vm.isPending) {
let label;
switch (vm.shape) {
case "image": label = vm.i18n`Download image`; break;
case "video": label = vm.i18n`Download video`; break;
default: label = vm.i18n`Download media`; break;
}
options.push(Menu.option(label, () => vm.downloadMedia()));
}
return options;
}
}