aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-03-30 17:40:00 +0200
committerChocobozzz <me@florianbigard.com>2018-04-03 14:02:10 +0200
commitc6352f2c64f3c1ad54f8500f493587cdce3d33c9 (patch)
tree642a5b29b4d68ed8915e5e800232eab069303f79 /client/src/standalone/videos
parent6b9af1293621a81564296ead6f12f5e70eafbca2 (diff)
downloadPeerTube-c6352f2c64f3c1ad54f8500f493587cdce3d33c9.tar.gz
PeerTube-c6352f2c64f3c1ad54f8500f493587cdce3d33c9.tar.zst
PeerTube-c6352f2c64f3c1ad54f8500f493587cdce3d33c9.zip
Improve player
Add a settings dialog based on the work of Yanko Shterev (@yshterev): https://github.com/yshterev/videojs-settings-menu. Thanks!
Diffstat (limited to 'client/src/standalone/videos')
-rw-r--r--client/src/standalone/videos/embed.scss18
-rw-r--r--client/src/standalone/videos/embed.ts60
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 @@
1import './embed.scss' 1import './embed.scss'
2 2
3import * as videojs from 'video.js' 3import * as videojs from 'video.js'
4import 'videojs-hotkeys' 4
5import '../../assets/player/peertube-videojs-plugin'
6import 'videojs-dock/dist/videojs-dock.es.js'
7import { VideoDetails } from '../../../../shared' 5import { VideoDetails } from '../../../../shared'
6import { getVideojsOptions } from '../../assets/player/peertube-player'
8 7
9function getVideoUrl (id: string) { 8function 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
21loadVideoInfo(videoId) 20loadVideoInfo(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({