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