From 33d7855229f45d73a767566f1dbcb87709211ebf Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 3 Apr 2018 15:11:46 +0200 Subject: [PATCH] Improve first play --- .../+video-watch/video-watch.component.html | 2 +- .../+video-watch/video-watch.component.ts | 8 +--- client/src/assets/player/peertube-player.ts | 4 +- .../assets/player/peertube-videojs-plugin.ts | 1 + client/src/sass/video-js-custom.scss | 40 +++++++++++++++---- client/src/standalone/videos/embed.scss | 1 + client/src/standalone/videos/embed.ts | 5 +-- 7 files changed, 42 insertions(+), 19 deletions(-) diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index ec5bd30dc..9c6038a5e 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -1,7 +1,7 @@
- +
Video not found :'(
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index c7e26fad2..0f7c76d0b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -337,11 +337,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (this.videoPlayerLoaded !== true) { this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') - // If autoplay is true, we don't really need a poster - if (this.isAutoplay() === false) { - this.playerElement.poster = this.video.previewUrl - } - const videojsOptions = getVideojsOptions({ autoplay: this.isAutoplay(), inactivityTimeout: 4000, @@ -350,7 +345,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), videoDuration: this.video.duration, enableHotkeys: true, - peertubeLink: false + peertubeLink: false, + poster: this.video.previewUrl }) this.videoPlayerLoaded = true diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts index 4ae3e71bd..58a8aa26c 100644 --- a/client/src/assets/player/peertube-player.ts +++ b/client/src/assets/player/peertube-player.ts @@ -20,10 +20,12 @@ function getVideojsOptions (options: { videoFiles: VideoFile[], enableHotkeys: boolean, inactivityTimeout: number, - peertubeLink: boolean + peertubeLink: boolean, + poster: string }) { const videojsOptions = { controls: true, + poster: options.poster, autoplay: options.autoplay, inactivityTimeout: options.inactivityTimeout, playbackRates: [ 0.5, 1, 1.5, 2 ], diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index c35ce12cb..425c8c7a0 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -212,6 +212,7 @@ class PeerTubePlugin extends Plugin { this.alterInactivity() if (this.autoplay === true) { + this.player.posterImage.hide() this.updateVideoFile(undefined, () => this.player.play()) } else { // Proxify first play diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss index 2c589553c..c533bd116 100644 --- a/client/src/sass/video-js-custom.scss +++ b/client/src/sass/video-js-custom.scss @@ -56,11 +56,11 @@ $setting-transition-easing: ease-out; outline: 0; font-size: 6em; - $big-play-width: 1.5em; - $big-play-height: 1em; + $big-play-width: 1.2em; + $big-play-height: 1.2em; border: 0; - border-radius: 0.3em; + border-radius: 100%; left: 50%; top: 50%; @@ -77,14 +77,14 @@ $setting-transition-easing: ease-out; } .vjs-icon-placeholder::before { - transition: text-shadow 0.3s; + transition: font-size 0.5s, opacity 0.5s; } &:hover { - opacity: 0.9; + opacity: 0.8; .vjs-icon-placeholder::before { - text-shadow: 0 0 1px rgba(255, 255, 255, 0.8); + font-size: 110%; } } } @@ -92,8 +92,28 @@ $setting-transition-easing: ease-out; &.vjs-has-started .vjs-big-play-button { display: block; visibility: hidden; - opacity: 0; - transition: visibility 0.3s, opacity 0.3s; + + &, &::before { + opacity: 0; + transition: visibility 0.1s, opacity 0.1s; + } + } + + &.vjs-has-started video { + background-color: #000; + animation: fade-black-on-play 0.5s linear; + + @keyframes fade-black-on-play { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } + } } .vjs-control-bar, @@ -651,6 +671,10 @@ $setting-transition-easing: ease-out; .vjs-menu-item { + &:hover { + background-color: rgba(255, 255, 255, 0.2); + } + &:first-child { margin-top: 5px; } diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index b015c6736..fc7135d64 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -12,6 +12,7 @@ video { html, body { height: 100%; margin: 0; + background-color: #000; } .video-js.vjs-peertube-skin { diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index f2ac5dca6..1efecd3f3 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -22,8 +22,6 @@ loadVideoInfo(videoId) const videoContainerId = 'video-container' const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement - videoElement.poster = window.location.origin + videoInfo.previewPath - let autoplay = false try { @@ -41,7 +39,8 @@ loadVideoInfo(videoId) videoFiles: videoInfo.files, videoDuration: videoInfo.duration, enableHotkeys: true, - peertubeLink: true + peertubeLink: true, + poster: window.location.origin + videoInfo.previewPath }) videojs(videoContainerId, videojsOptions, function () { const player = this -- 2.25.1