From ee6f3e5457a1018c7f0b62502374afdf4a295874 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 9 Mar 2021 19:35:10 +0100 Subject: [PATCH] render video messages --- .../session/room/timeline/tiles/VideoTile.js | 43 +++++++++++++++++++ .../session/room/timeline/tilesCreator.js | 3 ++ .../web/ui/css/themes/element/theme.css | 25 +++++------ src/platform/web/ui/css/timeline.css | 5 ++- src/platform/web/ui/general/html.js | 2 +- .../web/ui/session/room/TimelineList.js | 2 + .../web/ui/session/room/timeline/VideoView.js | 38 ++++++++++++++++ 7 files changed, 103 insertions(+), 15 deletions(-) create mode 100644 src/domain/session/room/timeline/tiles/VideoTile.js create mode 100644 src/platform/web/ui/session/room/timeline/VideoView.js diff --git a/src/domain/session/room/timeline/tiles/VideoTile.js b/src/domain/session/room/timeline/tiles/VideoTile.js new file mode 100644 index 00000000..13ed68f9 --- /dev/null +++ b/src/domain/session/room/timeline/tiles/VideoTile.js @@ -0,0 +1,43 @@ +/* +Copyright 2020 Bruno Windels +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 {BaseMediaTile} from "./BaseMediaTile.js"; + +export class VideoTile extends BaseMediaTile { + async loadVideo() { + const file = this._getContent().file; + if (file && !this._decryptedFile) { + this._decryptedFile = await this._loadEncryptedFile(file); + this.emitChange("videoUrl"); + } + } + + get videoUrl() { + if (this._decryptedFile) { + return this._decryptedFile.url; + } + const mxcUrl = this._getContent()?.url; + if (typeof mxcUrl === "string") { + return this._mediaRepository.mxcUrl(mxcUrl); + } + return ""; + } + + get shape() { + return "video"; + } +} diff --git a/src/domain/session/room/timeline/tilesCreator.js b/src/domain/session/room/timeline/tilesCreator.js index 1901efe2..ed43cd3a 100644 --- a/src/domain/session/room/timeline/tilesCreator.js +++ b/src/domain/session/room/timeline/tilesCreator.js @@ -17,6 +17,7 @@ limitations under the License. import {GapTile} from "./tiles/GapTile.js"; import {TextTile} from "./tiles/TextTile.js"; import {ImageTile} from "./tiles/ImageTile.js"; +import {VideoTile} from "./tiles/VideoTile.js"; import {FileTile} from "./tiles/FileTile.js"; import {LocationTile} from "./tiles/LocationTile.js"; import {RoomNameTile} from "./tiles/RoomNameTile.js"; @@ -44,6 +45,8 @@ export function tilesCreator(baseOptions) { return new TextTile(options); case "m.image": return new ImageTile(options); + case "m.video": + return new VideoTile(options); case "m.file": return new FileTile(options); case "m.location": diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 4c6e1dbf..4c41ad97 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -509,7 +509,7 @@ ul.Timeline > li.messageStatus .message-container > p { .message-container { padding: 1px 10px 0px 10px; margin: 5px 10px 0 10px; - /* so the .picture can grow horizontally and its spacer can grow vertically */ + /* so the .media can grow horizontally and its spacer can grow vertically */ width: 100%; } @@ -555,14 +555,14 @@ ul.Timeline > li.messageStatus .message-container > p { } -.message-container .picture { +.message-container .media { display: grid; margin-top: 4px; width: 100%; } -.message-container .picture > a { +.message-container .media > a { text-decoration: none; width: 100%; display: block; @@ -570,12 +570,12 @@ ul.Timeline > li.messageStatus .message-container > p { /* .spacer grows with an inline padding-top to the size of the image, so the timeline doesn't jump when the image loads */ -.message-container .picture > * { +.message-container .media > * { grid-row: 1; grid-column: 1; } -.message-container .picture img { +.message-container .media img, .message-container .media video { width: 100%; height: auto; /* for IE11 to still scale even though the spacer is too tall */ @@ -587,29 +587,30 @@ so the timeline doesn't jump when the image loads */ where we can trust the spacer to always have the correct height, otherwise the image starts with height 0 and with loading=lazy only loads when the top comes into view*/ -.hydrogen:not(.legacy) .message-container .picture img { +.hydrogen:not(.legacy) .message-container .media img, +.hydrogen:not(.legacy) .message-container .media video { align-self: stretch; } -.message-container .picture > .sendStatus { +.message-container .media > .sendStatus { align-self: end; justify-self: start; font-size: 0.8em; } -.message-container .picture > progress { +.message-container .media > progress { align-self: center; justify-self: center; width: 75%; } -.message-container .picture > time { +.message-container .media > time { align-self: end; justify-self: end; } -.message-container .picture > time, -.message-container .picture > .sendStatus { +.message-container .media > time, +.message-container .media > .sendStatus { color: #2e2f32; display: block; padding: 2px; @@ -617,7 +618,7 @@ only loads when the top comes into view*/ background-color: rgba(255, 255, 255, 0.75); border-radius: 4px; } -.message-container .picture > .spacer { +.message-container .media > .spacer { /* TODO: can we implement this with a pseudo element? or perhaps they are not grid items? */ width: 100%; /* don't stretch height as it is a spacer, just in case it doesn't match with image height */ diff --git a/src/platform/web/ui/css/timeline.css b/src/platform/web/ui/css/timeline.css index ee9ffdbb..8a766a54 100644 --- a/src/platform/web/ui/css/timeline.css +++ b/src/platform/web/ui/css/timeline.css @@ -37,11 +37,12 @@ limitations under the License. margin: 5px 0; } -.message-container .picture { +.message-container .media { display: block; } -.message-container .picture > img { +.message-container .media > img, +.message-container .media > video { display: block; } diff --git a/src/platform/web/ui/general/html.js b/src/platform/web/ui/general/html.js index a965a6ee..19b670d7 100644 --- a/src/platform/web/ui/general/html.js +++ b/src/platform/web/ui/general/html.js @@ -94,7 +94,7 @@ export const TAG_NAMES = { [HTML_NS]: [ "br", "a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6", "p", "strong", "em", "span", "img", "section", "main", "article", "aside", - "pre", "button", "time", "input", "textarea", "label", "form", "progress", "output"], + "pre", "button", "time", "input", "textarea", "label", "form", "progress", "output", "video"], [SVG_NS]: ["svg", "circle"] }; diff --git a/src/platform/web/ui/session/room/TimelineList.js b/src/platform/web/ui/session/room/TimelineList.js index 9d946fce..414649be 100644 --- a/src/platform/web/ui/session/room/TimelineList.js +++ b/src/platform/web/ui/session/room/TimelineList.js @@ -18,6 +18,7 @@ import {ListView} from "../../general/ListView.js"; import {GapView} from "./timeline/GapView.js"; import {TextMessageView} from "./timeline/TextMessageView.js"; import {ImageView} from "./timeline/ImageView.js"; +import {VideoView} from "./timeline/VideoView.js"; import {FileView} from "./timeline/FileView.js"; import {MissingAttachmentView} from "./timeline/MissingAttachmentView.js"; import {AnnouncementView} from "./timeline/AnnouncementView.js"; @@ -30,6 +31,7 @@ function viewClassForEntry(entry) { case "message-status": return TextMessageView; case "image": return ImageView; + case "video": return VideoView; case "file": return FileView; case "missing-attachment": return MissingAttachmentView; } diff --git a/src/platform/web/ui/session/room/timeline/VideoView.js b/src/platform/web/ui/session/room/timeline/VideoView.js new file mode 100644 index 00000000..37a6af1d --- /dev/null +++ b/src/platform/web/ui/session/room/timeline/VideoView.js @@ -0,0 +1,38 @@ +/* +Copyright 2020 Bruno Windels + +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 {BaseMediaView} from "./BaseMediaView.js"; + +export class VideoView extends BaseMediaView { + renderMedia(t, vm) { + return t.video({ + // provide empty data url if video is not decrypted yet. + // Chrome/Electron need this to enable the play button. + src: vm => vm.videoUrl || `data:${vm.mimeType},`, + title: vm => vm.label, + controls: true, + preload: "none", + poster: vm => vm.thumbnailUrl, + onPlay: async evt => { + if (!vm.videoUrl) { + await vm.loadVideo(); + evt.target.play(); + } + }, + style: `max-width: ${vm.width}px; max-height: ${vm.height}px;` + }); + } +}