diff options
Diffstat (limited to 'client/src/standalone/videos')
-rw-r--r-- | client/src/standalone/videos/embed.scss | 18 | ||||
-rw-r--r-- | client/src/standalone/videos/embed.ts | 60 |
2 files changed, 16 insertions, 62 deletions
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index 9fa868c9b..b015c6736 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss | |||
@@ -14,8 +14,6 @@ html, body { | |||
14 | margin: 0; | 14 | margin: 0; |
15 | } | 15 | } |
16 | 16 | ||
17 | |||
18 | |||
19 | .video-js.vjs-peertube-skin { | 17 | .video-js.vjs-peertube-skin { |
20 | width: 100%; | 18 | width: 100%; |
21 | height: 100%; | 19 | height: 100%; |
@@ -25,22 +23,6 @@ html, body { | |||
25 | background-size: 100% auto; | 23 | background-size: 100% auto; |
26 | } | 24 | } |
27 | 25 | ||
28 | .vjs-peertube-link { | ||
29 | @include disable-outline; | ||
30 | |||
31 | color: #fff; | ||
32 | text-decoration: none; | ||
33 | font-size: $font-size; | ||
34 | line-height: $control-bar-height; | ||
35 | transition: all .4s; | ||
36 | font-weight: $font-semibold; | ||
37 | padding-right: 5px; | ||
38 | } | ||
39 | |||
40 | .vjs-peertube-link:hover { | ||
41 | text-shadow: 0 0 1em #fff; | ||
42 | } | ||
43 | |||
44 | @media screen and (max-width: 350px) { | 26 | @media screen and (max-width: 350px) { |
45 | .vjs-play-control { | 27 | .vjs-play-control { |
46 | padding: 0 5px !important; | 28 | padding: 0 5px !important; |
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 08f2955cf..f2ac5dca6 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts | |||
@@ -1,10 +1,9 @@ | |||
1 | import './embed.scss' | 1 | import './embed.scss' |
2 | 2 | ||
3 | import * as videojs from 'video.js' | 3 | import * as videojs from 'video.js' |
4 | import 'videojs-hotkeys' | 4 | |
5 | import '../../assets/player/peertube-videojs-plugin' | ||
6 | import 'videojs-dock/dist/videojs-dock.es.js' | ||
7 | import { VideoDetails } from '../../../../shared' | 5 | import { VideoDetails } from '../../../../shared' |
6 | import { getVideojsOptions } from '../../assets/player/peertube-player' | ||
8 | 7 | ||
9 | function getVideoUrl (id: string) { | 8 | function getVideoUrl (id: string) { |
10 | return window.location.origin + '/api/v1/videos/' + id | 9 | return window.location.origin + '/api/v1/videos/' + id |
@@ -20,9 +19,10 @@ const videoId = urlParts[urlParts.length - 1] | |||
20 | 19 | ||
21 | loadVideoInfo(videoId) | 20 | loadVideoInfo(videoId) |
22 | .then(videoInfo => { | 21 | .then(videoInfo => { |
23 | const videoElement = document.getElementById('video-container') as HTMLVideoElement | 22 | const videoContainerId = 'video-container' |
24 | const previewUrl = window.location.origin + videoInfo.previewPath | 23 | |
25 | videoElement.poster = previewUrl | 24 | const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement |
25 | videoElement.poster = window.location.origin + videoInfo.previewPath | ||
26 | 26 | ||
27 | let autoplay = false | 27 | let autoplay = false |
28 | 28 | ||
@@ -33,45 +33,17 @@ loadVideoInfo(videoId) | |||
33 | console.error('Cannot get params from URL.', err) | 33 | console.error('Cannot get params from URL.', err) |
34 | } | 34 | } |
35 | 35 | ||
36 | const videojsOptions = { | 36 | const videojsOptions = getVideojsOptions({ |
37 | controls: true, | ||
38 | autoplay, | 37 | autoplay, |
39 | inactivityTimeout: 500, | 38 | inactivityTimeout: 1500, |
40 | plugins: { | 39 | videoViewUrl: getVideoUrl(videoId) + '/views', |
41 | peertube: { | 40 | playerElement: videoElement, |
42 | videoFiles: videoInfo.files, | 41 | videoFiles: videoInfo.files, |
43 | playerElement: videoElement, | 42 | videoDuration: videoInfo.duration, |
44 | videoViewUrl: getVideoUrl(videoId) + '/views', | 43 | enableHotkeys: true, |
45 | videoDuration: videoInfo.duration | 44 | peertubeLink: true |
46 | }, | 45 | }) |
47 | hotkeys: { | 46 | videojs(videoContainerId, videojsOptions, function () { |
48 | enableVolumeScroll: false | ||
49 | } | ||
50 | }, | ||
51 | controlBar: { | ||
52 | children: [ | ||
53 | 'playToggle', | ||
54 | 'currentTimeDisplay', | ||
55 | 'timeDivider', | ||
56 | 'durationDisplay', | ||
57 | 'liveDisplay', | ||
58 | |||
59 | 'flexibleWidthSpacer', | ||
60 | 'progressControl', | ||
61 | |||
62 | 'webTorrentButton', | ||
63 | |||
64 | 'muteToggle', | ||
65 | 'volumeControl', | ||
66 | |||
67 | 'resolutionMenuButton', | ||
68 | 'peerTubeLinkButton', | ||
69 | |||
70 | 'fullscreenToggle' | ||
71 | ] | ||
72 | } | ||
73 | } | ||
74 | videojs('video-container', videojsOptions, function () { | ||
75 | const player = this | 47 | const player = this |
76 | 48 | ||
77 | player.dock({ | 49 | player.dock({ |