From 8fa5653ad8bebed9a1b2a649e8ea160184d52408 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 20 Dec 2017 11:05:10 +0100 Subject: Add transition on play/loading player --- .../src/assets/player/peertube-videojs-plugin.ts | 2 +- client/src/sass/video-js-custom.scss | 31 ++++++++++++++++++++++ server/lib/cache/videos-preview-cache.ts | 11 +++++--- server/models/video/video.ts | 12 +++++++++ 4 files changed, 52 insertions(+), 4 deletions(-) diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 8c131c9e9..ca2b9a724 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -263,7 +263,7 @@ const peertubePlugin = function (options: PeertubePluginOptions) { const isPaused = player.paused() // Hide bigPlayButton - if (!isPaused && this.player_.options_.bigPlayButton) { + if (!isPaused) { this.player_.bigPlayButton.hide() } diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss index b093bbdec..724874995 100644 --- a/client/src/sass/video-js-custom.scss +++ b/client/src/sass/video-js-custom.scss @@ -39,6 +39,25 @@ $control-bar-height: 34px; background-color: transparent !important; } + &.vjs-has-started .vjs-big-play-button { + display: block; + visibility: hidden; + opacity: 0; + transition: visibility 0.5s, opacity 0.5s; + } + + .vjs-loading-spinner { + display: block; + visibility: hidden; + opacity: 0; + } + + &.vjs-waiting .vjs-loading-spinner { + visibility: visible; + opacity: 1; + transition: visibility 0.5s, opacity 0.5s; + } + .vjs-control-bar, .vjs-big-play-button, .vjs-menu-button .vjs-menu-content { @@ -308,6 +327,10 @@ $control-bar-height: 34px; } @media screen and (max-width: 550px) { + .vjs-big-play-button { + font-size: 6.5em; + } + .vjs-webtorrent { padding: 0 !important; @@ -318,6 +341,14 @@ $control-bar-height: 34px; } @media screen and (max-width: 300px) { + .vjs-dock-text { + font-size: 1.5em; + } + + .vjs-big-play-button { + font-size: 5em; + } + .vjs-volume-control { display: none !important; } diff --git a/server/lib/cache/videos-preview-cache.ts b/server/lib/cache/videos-preview-cache.ts index c5bda8dd8..28908b186 100644 --- a/server/lib/cache/videos-preview-cache.ts +++ b/server/lib/cache/videos-preview-cache.ts @@ -33,7 +33,12 @@ class VideosPreviewCache { }) } - getPreviewPath (key: string) { + async getPreviewPath (key: string) { + const video = await VideoModel.loadByUUID(key) + if (!video) return undefined + + if (video.isOwned()) return join(CONFIG.STORAGE.PREVIEWS_DIR, video.getPreviewName()) + return new Promise((res, rej) => { this.lru.get(key, (err, value) => { err ? rej(err) : res(value) @@ -42,10 +47,10 @@ class VideosPreviewCache { } private async loadPreviews (key: string) { - const video = await VideoModel.loadByUUIDAndPopulateAccountAndServerAndTags(key) + const video = await VideoModel.loadByUUID(key) if (!video) return undefined - if (video.isOwned()) return join(CONFIG.STORAGE.PREVIEWS_DIR, video.getPreviewName()) + if (video.isOwned()) throw new Error('Cannot load preview of owned video.') const res = await this.saveRemotePreviewAndReturnPath(video) diff --git a/server/models/video/video.ts b/server/models/video/video.ts index 97fdbc8ef..8c49bc3af 100644 --- a/server/models/video/video.ts +++ b/server/models/video/video.ts @@ -528,6 +528,18 @@ export class VideoModel extends Model { .findById(id, options) } + static loadByUUID (uuid: string) { + const options = { + where: { + uuid + } + } + + return VideoModel + .scope([ ScopeNames.WITH_FILES ]) + .findOne(options) + } + static loadByUUIDAndPopulateAccountAndServerAndTags (uuid: string) { const options = { order: [ [ 'Tags', 'name', 'ASC' ] ], -- cgit v1.2.3