aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-20 11:05:10 +0100
committerChocobozzz <me@florianbigard.com>2017-12-20 11:05:10 +0100
commit8fa5653ad8bebed9a1b2a649e8ea160184d52408 (patch)
treeeb71b80545a89d73e9b0ef09c695b509360da85c
parent15ca2e871aa069e596baf9da22b3d2a1ab1a0b1a (diff)
downloadPeerTube-8fa5653ad8bebed9a1b2a649e8ea160184d52408.tar.gz
PeerTube-8fa5653ad8bebed9a1b2a649e8ea160184d52408.tar.zst
PeerTube-8fa5653ad8bebed9a1b2a649e8ea160184d52408.zip
Add transition on play/loading player
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts2
-rw-r--r--client/src/sass/video-js-custom.scss31
-rw-r--r--server/lib/cache/videos-preview-cache.ts11
-rw-r--r--server/models/video/video.ts12
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) {
263 const isPaused = player.paused() 263 const isPaused = player.paused()
264 264
265 // Hide bigPlayButton 265 // Hide bigPlayButton
266 if (!isPaused && this.player_.options_.bigPlayButton) { 266 if (!isPaused) {
267 this.player_.bigPlayButton.hide() 267 this.player_.bigPlayButton.hide()
268 } 268 }
269 269
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;
39 background-color: transparent !important; 39 background-color: transparent !important;
40 } 40 }
41 41
42 &.vjs-has-started .vjs-big-play-button {
43 display: block;
44 visibility: hidden;
45 opacity: 0;
46 transition: visibility 0.5s, opacity 0.5s;
47 }
48
49 .vjs-loading-spinner {
50 display: block;
51 visibility: hidden;
52 opacity: 0;
53 }
54
55 &.vjs-waiting .vjs-loading-spinner {
56 visibility: visible;
57 opacity: 1;
58 transition: visibility 0.5s, opacity 0.5s;
59 }
60
42 .vjs-control-bar, 61 .vjs-control-bar,
43 .vjs-big-play-button, 62 .vjs-big-play-button,
44 .vjs-menu-button .vjs-menu-content { 63 .vjs-menu-button .vjs-menu-content {
@@ -308,6 +327,10 @@ $control-bar-height: 34px;
308 } 327 }
309 328
310 @media screen and (max-width: 550px) { 329 @media screen and (max-width: 550px) {
330 .vjs-big-play-button {
331 font-size: 6.5em;
332 }
333
311 .vjs-webtorrent { 334 .vjs-webtorrent {
312 padding: 0 !important; 335 padding: 0 !important;
313 336
@@ -318,6 +341,14 @@ $control-bar-height: 34px;
318 } 341 }
319 342
320 @media screen and (max-width: 300px) { 343 @media screen and (max-width: 300px) {
344 .vjs-dock-text {
345 font-size: 1.5em;
346 }
347
348 .vjs-big-play-button {
349 font-size: 5em;
350 }
351
321 .vjs-volume-control { 352 .vjs-volume-control {
322 display: none !important; 353 display: none !important;
323 } 354 }
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 {
33 }) 33 })
34 } 34 }
35 35
36 getPreviewPath (key: string) { 36 async getPreviewPath (key: string) {
37 const video = await VideoModel.loadByUUID(key)
38 if (!video) return undefined
39
40 if (video.isOwned()) return join(CONFIG.STORAGE.PREVIEWS_DIR, video.getPreviewName())
41
37 return new Promise<string>((res, rej) => { 42 return new Promise<string>((res, rej) => {
38 this.lru.get(key, (err, value) => { 43 this.lru.get(key, (err, value) => {
39 err ? rej(err) : res(value) 44 err ? rej(err) : res(value)
@@ -42,10 +47,10 @@ class VideosPreviewCache {
42 } 47 }
43 48
44 private async loadPreviews (key: string) { 49 private async loadPreviews (key: string) {
45 const video = await VideoModel.loadByUUIDAndPopulateAccountAndServerAndTags(key) 50 const video = await VideoModel.loadByUUID(key)
46 if (!video) return undefined 51 if (!video) return undefined
47 52
48 if (video.isOwned()) return join(CONFIG.STORAGE.PREVIEWS_DIR, video.getPreviewName()) 53 if (video.isOwned()) throw new Error('Cannot load preview of owned video.')
49 54
50 const res = await this.saveRemotePreviewAndReturnPath(video) 55 const res = await this.saveRemotePreviewAndReturnPath(video)
51 56
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<VideoModel> {
528 .findById(id, options) 528 .findById(id, options)
529 } 529 }
530 530
531 static loadByUUID (uuid: string) {
532 const options = {
533 where: {
534 uuid
535 }
536 }
537
538 return VideoModel
539 .scope([ ScopeNames.WITH_FILES ])
540 .findOne(options)
541 }
542
531 static loadByUUIDAndPopulateAccountAndServerAndTags (uuid: string) { 543 static loadByUUIDAndPopulateAccountAndServerAndTags (uuid: string) {
532 const options = { 544 const options = {
533 order: [ [ 'Tags', 'name', 'ASC' ] ], 545 order: [ [ 'Tags', 'name', 'ASC' ] ],