aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts8
-rw-r--r--client/src/assets/player/peertube-player.ts4
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts1
-rw-r--r--client/src/sass/video-js-custom.scss40
-rw-r--r--client/src/standalone/videos/embed.scss1
-rw-r--r--client/src/standalone/videos/embed.ts5
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 @@
1<div class="row"> 1<div class="row">
2 <!-- We need the video container for videojs so we just hide it --> 2 <!-- We need the video container for videojs so we just hide it -->
3 <div [hidden]="videoNotFound" id="video-container"> 3 <div [hidden]="videoNotFound" id="video-container">
4 <video [poster]="getVideoPoster()" id="video-element" class="video-js vjs-peertube-skin"></video> 4 <video id="video-element" class="video-js vjs-peertube-skin"></video>
5 </div> 5 </div>
6 6
7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> 7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
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 {
337 if (this.videoPlayerLoaded !== true) { 337 if (this.videoPlayerLoaded !== true) {
338 this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') 338 this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
339 339
340 // If autoplay is true, we don't really need a poster
341 if (this.isAutoplay() === false) {
342 this.playerElement.poster = this.video.previewUrl
343 }
344
345 const videojsOptions = getVideojsOptions({ 340 const videojsOptions = getVideojsOptions({
346 autoplay: this.isAutoplay(), 341 autoplay: this.isAutoplay(),
347 inactivityTimeout: 4000, 342 inactivityTimeout: 4000,
@@ -350,7 +345,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
350 videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), 345 videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
351 videoDuration: this.video.duration, 346 videoDuration: this.video.duration,
352 enableHotkeys: true, 347 enableHotkeys: true,
353 peertubeLink: false 348 peertubeLink: false,
349 poster: this.video.previewUrl
354 }) 350 })
355 351
356 this.videoPlayerLoaded = true 352 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: {
20 videoFiles: VideoFile[], 20 videoFiles: VideoFile[],
21 enableHotkeys: boolean, 21 enableHotkeys: boolean,
22 inactivityTimeout: number, 22 inactivityTimeout: number,
23 peertubeLink: boolean 23 peertubeLink: boolean,
24 poster: string
24}) { 25}) {
25 const videojsOptions = { 26 const videojsOptions = {
26 controls: true, 27 controls: true,
28 poster: options.poster,
27 autoplay: options.autoplay, 29 autoplay: options.autoplay,
28 inactivityTimeout: options.inactivityTimeout, 30 inactivityTimeout: options.inactivityTimeout,
29 playbackRates: [ 0.5, 1, 1.5, 2 ], 31 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 {
212 this.alterInactivity() 212 this.alterInactivity()
213 213
214 if (this.autoplay === true) { 214 if (this.autoplay === true) {
215 this.player.posterImage.hide()
215 this.updateVideoFile(undefined, () => this.player.play()) 216 this.updateVideoFile(undefined, () => this.player.play())
216 } else { 217 } else {
217 // Proxify first play 218 // 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;
56 outline: 0; 56 outline: 0;
57 font-size: 6em; 57 font-size: 6em;
58 58
59 $big-play-width: 1.5em; 59 $big-play-width: 1.2em;
60 $big-play-height: 1em; 60 $big-play-height: 1.2em;
61 61
62 border: 0; 62 border: 0;
63 border-radius: 0.3em; 63 border-radius: 100%;
64 64
65 left: 50%; 65 left: 50%;
66 top: 50%; 66 top: 50%;
@@ -77,14 +77,14 @@ $setting-transition-easing: ease-out;
77 } 77 }
78 78
79 .vjs-icon-placeholder::before { 79 .vjs-icon-placeholder::before {
80 transition: text-shadow 0.3s; 80 transition: font-size 0.5s, opacity 0.5s;
81 } 81 }
82 82
83 &:hover { 83 &:hover {
84 opacity: 0.9; 84 opacity: 0.8;
85 85
86 .vjs-icon-placeholder::before { 86 .vjs-icon-placeholder::before {
87 text-shadow: 0 0 1px rgba(255, 255, 255, 0.8); 87 font-size: 110%;
88 } 88 }
89 } 89 }
90 } 90 }
@@ -92,8 +92,28 @@ $setting-transition-easing: ease-out;
92 &.vjs-has-started .vjs-big-play-button { 92 &.vjs-has-started .vjs-big-play-button {
93 display: block; 93 display: block;
94 visibility: hidden; 94 visibility: hidden;
95 opacity: 0; 95
96 transition: visibility 0.3s, opacity 0.3s; 96 &, &::before {
97 opacity: 0;
98 transition: visibility 0.1s, opacity 0.1s;
99 }
100 }
101
102 &.vjs-has-started video {
103 background-color: #000;
104 animation: fade-black-on-play 0.5s linear;
105
106 @keyframes fade-black-on-play {
107 0% {
108 opacity: 1;
109 }
110 50% {
111 opacity: 0;
112 }
113 100% {
114 opacity: 1;
115 }
116 }
97 } 117 }
98 118
99 .vjs-control-bar, 119 .vjs-control-bar,
@@ -651,6 +671,10 @@ $setting-transition-easing: ease-out;
651 671
652 .vjs-menu-item { 672 .vjs-menu-item {
653 673
674 &:hover {
675 background-color: rgba(255, 255, 255, 0.2);
676 }
677
654 &:first-child { 678 &:first-child {
655 margin-top: 5px; 679 margin-top: 5px;
656 } 680 }
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 {
12html, body { 12html, body {
13 height: 100%; 13 height: 100%;
14 margin: 0; 14 margin: 0;
15 background-color: #000;
15} 16}
16 17
17.video-js.vjs-peertube-skin { 18.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)
22 const videoContainerId = 'video-container' 22 const videoContainerId = 'video-container'
23 23
24 const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement 24 const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
25 videoElement.poster = window.location.origin + videoInfo.previewPath
26
27 let autoplay = false 25 let autoplay = false
28 26
29 try { 27 try {
@@ -41,7 +39,8 @@ loadVideoInfo(videoId)
41 videoFiles: videoInfo.files, 39 videoFiles: videoInfo.files,
42 videoDuration: videoInfo.duration, 40 videoDuration: videoInfo.duration,
43 enableHotkeys: true, 41 enableHotkeys: true,
44 peertubeLink: true 42 peertubeLink: true,
43 poster: window.location.origin + videoInfo.previewPath
45 }) 44 })
46 videojs(videoContainerId, videojsOptions, function () { 45 videojs(videoContainerId, videojsOptions, function () {
47 const player = this 46 const player = this