102 lines
3.0 KiB
JavaScript
102 lines
3.0 KiB
JavaScript
/*
|
|
Copyright 2020 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
import {ViewModel} from "../../ViewModel";
|
|
|
|
export class LightboxViewModel extends ViewModel {
|
|
constructor(options) {
|
|
super(options);
|
|
this._eventEntry = options.eventEntry;
|
|
this._eventId = options.eventId || options.eventEntry.id;
|
|
this._unencryptedImageUrl = null;
|
|
this._decryptedImage = null;
|
|
this._closeUrl = this.urlCreator.urlUntilSegment("room");
|
|
this._date = null;
|
|
this._subscribeToEvent(options.room, options.eventId);
|
|
}
|
|
|
|
_subscribeToEvent(room, eventId) {
|
|
let event = this._eventEntry;
|
|
if (!this._eventEntry) {
|
|
const eventObservable = room.observeEvent(eventId);
|
|
this.track(eventObservable.subscribe(eventEntry => {
|
|
this._loadEvent(room, eventEntry);
|
|
}));
|
|
event = eventObservable.get();
|
|
}
|
|
this._loadEvent(room, event);
|
|
}
|
|
|
|
async _loadEvent(room, eventEntry) {
|
|
if (!eventEntry) {
|
|
return;
|
|
}
|
|
const {mediaRepository} = room;
|
|
this._eventEntry = eventEntry;
|
|
const {content} = this._eventEntry;
|
|
this._date = this._eventEntry.timestamp ? new Date(this._eventEntry.timestamp) : null;
|
|
if (content.url) {
|
|
this._unencryptedImageUrl = mediaRepository.mxcUrl(content.url);
|
|
this.emitChange("imageUrl");
|
|
} else if (content.file) {
|
|
this._decryptedImage = this.track(await mediaRepository.downloadEncryptedFile(content.file));
|
|
this.emitChange("imageUrl");
|
|
}
|
|
}
|
|
|
|
get imageWidth() {
|
|
return this._eventEntry?.content?.info?.w;
|
|
}
|
|
|
|
get imageHeight() {
|
|
return this._eventEntry?.content?.info?.h;
|
|
}
|
|
|
|
get name() {
|
|
return this._eventEntry?.content?.body;
|
|
}
|
|
|
|
get sender() {
|
|
return this._eventEntry?.displayName;
|
|
}
|
|
|
|
get imageUrl() {
|
|
if (this._decryptedImage) {
|
|
return this._decryptedImage.url;
|
|
} else if (this._unencryptedImageUrl) {
|
|
return this._unencryptedImageUrl;
|
|
} else {
|
|
return "";
|
|
}
|
|
}
|
|
|
|
get date() {
|
|
return this._date && this._date.toLocaleDateString({}, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
|
|
}
|
|
|
|
get time() {
|
|
return this._date && this._date.toLocaleTimeString({}, {hour: "numeric", minute: "2-digit"});
|
|
}
|
|
|
|
get closeUrl() {
|
|
return this._closeUrl;
|
|
}
|
|
|
|
close() {
|
|
this.history.pushUrl(this.closeUrl);
|
|
}
|
|
}
|