aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-05 10:44:11 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-05 11:04:15 +0100
commitbe6a4802326b1748e85c0d6fdadf06e70e6ecbb0 (patch)
treec096a9e3476b7dbeb0f197c25165557f1c51c70f /client
parent62e23e40dad8fbd6148a9201fba2e73ced3f1877 (diff)
downloadPeerTube-be6a4802326b1748e85c0d6fdadf06e70e6ecbb0.tar.gz
PeerTube-be6a4802326b1748e85c0d6fdadf06e70e6ecbb0.tar.zst
PeerTube-be6a4802326b1748e85c0d6fdadf06e70e6ecbb0.zip
Design video player
Diffstat (limited to 'client')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html11
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss18
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts11
-rw-r--r--client/src/assets/player/images/arrow-down.svg14
-rw-r--r--client/src/assets/player/images/arrow-up.svg14
-rw-r--r--client/src/assets/player/images/fullscreen.svg18
-rw-r--r--client/src/assets/player/images/volume-mute.svg16
-rw-r--r--client/src/assets/player/images/volume.svg13
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts98
-rw-r--r--client/src/sass/video-js-custom.scss559
10 files changed, 445 insertions, 327 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 f528d73c3..aa1f2f77e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -15,20 +15,13 @@
15 15
16<div class="row"> 16<div class="row">
17 <!-- We need the video container for videojs so we just hide it --> 17 <!-- We need the video container for videojs so we just hide it -->
18 <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9"> 18 <div [hidden]="videoNotFound" id="video-container">
19 <video id="video-container" class="video-js vjs-sublime-skin"></video> 19 <video id="video-element" class="video-js vjs-peertube-skin"></video>
20 </div> 20 </div>
21 21
22 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> 22 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
23</div> 23</div>
24 24
25<!-- P2P information -->
26<div id="torrent-info" class="row">
27 <div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div>
28 <div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div>
29 <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div>
30</div>
31
32<!-- Video information --> 25<!-- Video information -->
33<div *ngIf="video !== null" id="video-info"> 26<div *ngIf="video !== null" id="video-info">
34 <div class="row video-name-views"> 27 <div class="row video-name-views">
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index cad21dd18..06c2de7c6 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -1,6 +1,12 @@
1#video-container { 1#video-container {
2 width: 100%; 2 background-color: #000;
3 height: 100%; 3 display: flex;
4 justify-content: center;
5
6 #video-element {
7 width: 888px;
8 height: 500px;
9 }
4} 10}
5 11
6#video-not-found { 12#video-not-found {
@@ -11,14 +17,6 @@
11 font-weight: bold; 17 font-weight: bold;
12} 18}
13 19
14.embed-responsive {
15 height: 500px;
16
17 @media screen and (max-width: 600px) {
18 height: 300px;
19 }
20}
21
22#torrent-info { 20#torrent-info {
23 font-size: 10px; 21 font-size: 10px;
24 margin-top: 10px; 22 margin-top: 10px;
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 eac676be8..48842602e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -26,13 +26,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
26 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent 26 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
27 @ViewChild('videoReportModal') videoReportModal: VideoReportComponent 27 @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
28 28
29 downloadSpeed: number
30 error = false 29 error = false
31 loading = false 30 loading = false
32 numPeers: number
33 player: videojs.Player 31 player: videojs.Player
34 playerElement: HTMLMediaElement 32 playerElement: HTMLMediaElement
35 uploadSpeed: number
36 userRating: UserVideoRateType = null 33 userRating: UserVideoRateType = null
37 video: VideoDetails = null 34 video: VideoDetails = null
38 videoPlayerLoaded = false 35 videoPlayerLoaded = false
@@ -283,7 +280,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
283 return this.router.navigate([ '/videos/list' ]) 280 return this.router.navigate([ '/videos/list' ])
284 } 281 }
285 282
286 this.playerElement = this.elementRef.nativeElement.querySelector('#video-container') 283 this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
287 284
288 const videojsOptions = { 285 const videojsOptions = {
289 controls: true, 286 controls: true,
@@ -306,12 +303,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
306 this.on('customError', (event, data) => { 303 this.on('customError', (event, data) => {
307 self.handleError(data.err) 304 self.handleError(data.err)
308 }) 305 })
309
310 this.on('torrentInfo', (event, data) => {
311 self.downloadSpeed = data.downloadSpeed
312 self.numPeers = data.numPeers
313 self.uploadSpeed = data.uploadSpeed
314 })
315 }) 306 })
316 307
317 this.setVideoDescriptionHTML() 308 this.setVideoDescriptionHTML()
diff --git a/client/src/assets/player/images/arrow-down.svg b/client/src/assets/player/images/arrow-down.svg
new file mode 100644
index 000000000..3377cdab2
--- /dev/null
+++ b/client/src/assets/player/images/arrow-down.svg
@@ -0,0 +1,14 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
5 <g id="Artboard-4" transform="translate(-532.000000, -1046.000000)" stroke="#fff" stroke-width="2">
6 <g id="Extras" transform="translate(48.000000, 1046.000000)">
7 <g id="down" transform="translate(484.000000, 0.000000)">
8 <path d="M12,3 L12,20" id="Path-58"></path>
9 <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 17.000000) scale(-1, -1) translate(-12.000000, -17.000000) " points="4 21 12 13 20 21"></polyline>
10 </g>
11 </g>
12 </g>
13 </g>
14</svg>
diff --git a/client/src/assets/player/images/arrow-up.svg b/client/src/assets/player/images/arrow-up.svg
new file mode 100644
index 000000000..b1a7890a8
--- /dev/null
+++ b/client/src/assets/player/images/arrow-up.svg
@@ -0,0 +1,14 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
5 <g id="Artboard-4" transform="translate(-488.000000, -1046.000000)" stroke="#fff" stroke-width="2">
6 <g id="Extras" transform="translate(48.000000, 1046.000000)">
7 <g id="up" transform="translate(440.000000, 0.000000)">
8 <path d="M12,4 L12,21" id="Path-58"></path>
9 <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 7.000000) scale(-1, 1) translate(-12.000000, -7.000000) " points="4 11 12 3 20 11"></polyline>
10 </g>
11 </g>
12 </g>
13 </g>
14</svg>
diff --git a/client/src/assets/player/images/fullscreen.svg b/client/src/assets/player/images/fullscreen.svg
new file mode 100644
index 000000000..44e0041a4
--- /dev/null
+++ b/client/src/assets/player/images/fullscreen.svg
@@ -0,0 +1,18 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>fullscreen</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8 <g id="Artboard-4" transform="translate(-576.000000, -159.000000)" stroke="#fff" stroke-width="2">
9 <g id="33" transform="translate(576.000000, 159.000000)">
10 <rect id="Rectangle-433" x="1" y="4" width="22" height="16" rx="1"></rect>
11 <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" points="20 10 20 7 17 7"></polyline>
12 <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" points="7 17 4 17 4 14"></polyline>
13 <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" transform="translate(18.500000, 15.500000) scale(1, -1) translate(-18.500000, -15.500000) " points="20 17 20 14 17 14"></polyline>
14 <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.500000, 8.500000) scale(1, -1) translate(-5.500000, -8.500000) " points="7 10 4 10 4 7"></polyline>
15 </g>
16 </g>
17 </g>
18</svg>
diff --git a/client/src/assets/player/images/volume-mute.svg b/client/src/assets/player/images/volume-mute.svg
new file mode 100644
index 000000000..0c7c296bc
--- /dev/null
+++ b/client/src/assets/player/images/volume-mute.svg
@@ -0,0 +1,16 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>volume-mute</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
8 <g id="Artboard-4" transform="translate(-92.000000, -159.000000)" stroke="#fff" stroke-width="2">
9 <g id="22" transform="translate(92.000000, 159.000000)">
10 <path d="M2,8.99703014 C2,8.4463856 2.44335318,8 3.0093689,8 L6,8 L12,4 L12,20 L6,16 L3.0093689,16 C2.45190985,16 2,15.5469637 2,15.0029699 L2,8.99703014 Z" id="Rectangle-415" stroke-linejoin="round"></path>
11 <path d="M16,15 L22,9" id="Path-28"></path>
12 <path d="M16.0000002,15 L22.0249378,9" id="Path-28" transform="translate(19.012469, 12.000000) scale(-1, 1) translate(-19.012469, -12.000000) "></path>
13 </g>
14 </g>
15 </g>
16</svg>
diff --git a/client/src/assets/player/images/volume.svg b/client/src/assets/player/images/volume.svg
new file mode 100644
index 000000000..590913add
--- /dev/null
+++ b/client/src/assets/player/images/volume.svg
@@ -0,0 +1,13 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
5 <g id="Artboard-4" transform="translate(-884.000000, -115.000000)" stroke="#fff" stroke-width="2">
6 <g id="20" transform="translate(884.000000, 115.000000)">
7 <path d="M2,8.99703014 C2,8.4463856 2.44335318,8 3.0093689,8 L6,8 L12,4 L12,20 L6,16 L3.0093689,16 C2.45190985,16 2,15.5469637 2,15.0029699 L2,8.99703014 Z" id="Rectangle-415" stroke-linejoin="round"></path>
8 <path d="M16,8 C16,8 18,9.5 18,12 C18,14.5 16,16 16,16" id="Path-26"></path>
9 <path d="M16.0734116,20 C19.3093571,18.9698098 22.0000001,15.5773201 22.0000001,12 C22.0000001,8.43619491 19.2903975,5.04132966 16.0734116,4" id="Oval-33"></path>
10 </g>
11 </g>
12 </g>
13</svg>
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index c54d8b5ea..977455bff 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -2,9 +2,24 @@
2 2
3import videojs, { Player } from 'video.js' 3import videojs, { Player } from 'video.js'
4import * as WebTorrent from 'webtorrent' 4import * as WebTorrent from 'webtorrent'
5import { VideoFile } from '../../../../shared'
5 6
6import { renderVideo } from './video-renderer' 7import { renderVideo } from './video-renderer'
7import { VideoFile } from '../../../../shared' 8
9// https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
10// Don't import all Angular stuff, just copy the code with shame
11const dictionaryBytes: Array<{max: number, type: string}> = [
12 { max: 1024, type: 'B' },
13 { max: 1048576, type: 'KB' },
14 { max: 1073741824, type: 'MB' },
15 { max: 1.0995116e12, type: 'GB' }
16]
17function bytes (value) {
18 const format = dictionaryBytes.find(d => value < d.max) || dictionaryBytes[dictionaryBytes.length - 1]
19 const calc = Math.floor(value / (format.max / 1024)).toString()
20
21 return [ calc, format.type ]
22}
8 23
9// videojs typings don't have some method we need 24// videojs typings don't have some method we need
10const videojsUntyped = videojs as any 25const videojsUntyped = videojs as any
@@ -62,6 +77,7 @@ const ResolutionMenuButton = videojsUntyped.extend(MenuButton, {
62 77
63 update: function () { 78 update: function () {
64 this.label.innerHTML = this.player_.getCurrentResolutionLabel() 79 this.label.innerHTML = this.player_.getCurrentResolutionLabel()
80 this.hide()
65 return MenuButton.prototype.update.call(this) 81 return MenuButton.prototype.update.call(this)
66 }, 82 },
67 83
@@ -74,8 +90,7 @@ MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
74const Button = videojsUntyped.getComponent('Button') 90const Button = videojsUntyped.getComponent('Button')
75const PeertubeLinkButton = videojsUntyped.extend(Button, { 91const PeertubeLinkButton = videojsUntyped.extend(Button, {
76 constructor: function (player) { 92 constructor: function (player) {
77 Button.apply(this, arguments) 93 Button.call(this, player)
78 this.player = player
79 }, 94 },
80 95
81 createEl: function () { 96 createEl: function () {
@@ -90,11 +105,78 @@ const PeertubeLinkButton = videojsUntyped.extend(Button, {
90 }, 105 },
91 106
92 handleClick: function () { 107 handleClick: function () {
93 this.player.pause() 108 this.player_.pause()
94 } 109 }
95}) 110})
96Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton) 111Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton)
97 112
113const WebTorrentButton = videojsUntyped.extend(Button, {
114 constructor: function (player) {
115 Button.call(this, player)
116 },
117
118 createEl: function () {
119 const div = document.createElement('div')
120
121 const downloadIcon = document.createElement('span')
122 downloadIcon.classList.add('icon', 'icon-download')
123 div.appendChild(downloadIcon)
124
125 const downloadSpeedText = document.createElement('span')
126 downloadSpeedText.classList.add('download-speed-text')
127 const downloadSpeedNumber = document.createElement('span')
128 downloadSpeedNumber.classList.add('download-speed-number')
129 const downloadSpeedUnit = document.createElement('span')
130 downloadSpeedText.appendChild(downloadSpeedNumber)
131 downloadSpeedText.appendChild(downloadSpeedUnit)
132 div.appendChild(downloadSpeedText)
133
134 const uploadIcon = document.createElement('span')
135 uploadIcon.classList.add('icon', 'icon-upload')
136 div.appendChild(uploadIcon)
137
138 const uploadSpeedText = document.createElement('span')
139 uploadSpeedText.classList.add('upload-speed-text')
140 const uploadSpeedNumber = document.createElement('span')
141 uploadSpeedNumber.classList.add('upload-speed-number')
142 const uploadSpeedUnit = document.createElement('span')
143 uploadSpeedText.appendChild(uploadSpeedNumber)
144 uploadSpeedText.appendChild(uploadSpeedUnit)
145 div.appendChild(uploadSpeedText)
146
147 const peersText = document.createElement('span')
148 peersText.textContent = ' peers'
149 peersText.classList.add('peers-text')
150 const peersNumber = document.createElement('span')
151 peersNumber.classList.add('peers-number')
152 div.appendChild(peersNumber)
153 div.appendChild(peersText)
154
155 div.className = 'vjs-webtorrent'
156 // Hide the stats before we get the info
157 div.style.display = 'none'
158
159 this.player_.on('torrentInfo', (event, data) => {
160 const downloadSpeed = bytes(data.downloadSpeed)
161 const uploadSpeed = bytes(data.uploadSpeed)
162 const numPeers = data.numPeers
163
164 downloadSpeedNumber.textContent = downloadSpeed[0]
165 downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
166
167 uploadSpeedNumber.textContent = uploadSpeed[0]
168 uploadSpeedUnit.textContent = ' ' + uploadSpeed[1]
169
170 peersNumber.textContent = numPeers
171
172 div.style.display = 'block'
173 })
174
175 return div
176 }
177})
178Button.registerComponent('WebTorrentButton', WebTorrentButton)
179
98type PeertubePluginOptions = { 180type PeertubePluginOptions = {
99 videoFiles: VideoFile[] 181 videoFiles: VideoFile[]
100 playerElement: HTMLVideoElement 182 playerElement: HTMLVideoElement
@@ -223,6 +305,12 @@ const peertubePlugin = function (options: PeertubePluginOptions) {
223 } 305 }
224 } 306 }
225 307
308 const webTorrentButton = new WebTorrentButton(player)
309 controlBar.webTorrent = controlBar.el().insertBefore(webTorrentButton.el(), controlBar.progressControl.el())
310 controlBar.webTorrent.dispose = function () {
311 this.parentNode.removeChild(this)
312 }
313
226 if (options.autoplay === true) { 314 if (options.autoplay === true) {
227 player.updateVideoFile() 315 player.updateVideoFile()
228 } else { 316 } else {
@@ -245,7 +333,7 @@ const peertubePlugin = function (options: PeertubePluginOptions) {
245 }, 1000) 333 }, 1000)
246 }) 334 })
247 335
248 function handleError (err: Error|string) { 336 function handleError (err: Error | string) {
249 return player.trigger('customError', { err }) 337 return player.trigger('customError', { err })
250 } 338 }
251} 339}
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 34a958764..1200c07a5 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,341 +1,314 @@
1// Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files 1// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
2.vjs-resolution-button-label { 2$primary-foreground-color: #fff;
3 font-size: 1em; 3$primary-background-color: #000;
4 line-height: 3em; 4$font-size: 13px;
5 position: absolute; 5$control-bar-height: 34px;
6 top: 0;
7 left: -1px;
8 width: 100%;
9 height: 100%;
10 text-align: center;
11 box-sizing: inherit;
12}
13
14.vjs-resolution-button {
15 outline: 0 !important;
16 6
17 .vjs-menu { 7.video-js.vjs-peertube-skin {
18 .vjs-menu-content { 8 font-size: $font-size;
19 width: 4em; 9 color: $primary-foreground-color;
20 left: 50%; /* Center the menu, in it's parent */
21 margin-left: -2em; /* half of width, to center */
22 }
23 10
24 li { 11 .vjs-button > .vjs-icon-placeholder::before {
25 text-transform: none; 12 line-height: $control-bar-height;
26 font-size: 1em;
27 }
28 } 13 }
29}
30
31// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
32 14
33// Video JS Sublime Skin 15 .vjs-mouse-display:before,
34// The following are SCSS variables to automate some of the values. 16 .vjs-play-progress:before,
35// But don't feel limited by them. Change/replace whatever you want. 17 .vjs-volume-level:before {
18 content: ''; /* Remove Circle From Progress Bar */
19 }
36 20
37// The color of icons, text, and the big play button border. 21 .vjs-audio-button {
38// Try changing to #0f0 22 display: none;
39$primary-foreground-color: #fff; // #fff default 23 }
40 24
41// The default color of control backgrounds is mostly black but with a little 25 .vjs-big-play-button {
42// bit of blue so it can still be seen on all-black video frames, which are common. 26 font-size: 8em;
43// Try changing to #900
44$primary-background-color: #2B333F; // #2B333F default
45 27
46// Try changing to true 28 $big-play-width: 3em;
47$center-big-play-button: true; // true default 29 $big-play-height: 1.5em;
48 30
49.video-js { 31 line-height: $big-play-height;
50 /* The base font size controls the size of everything, not just text. 32 height: $big-play-height;
51 All dimensions use em-based sizes so that the scale along with the font size. 33 width: $big-play-width;
52 Try increasing it to 15px and see what happens. */
53 font-size: 10px;
54 34
55 /* The main font color changes the ICON COLORS as well as the text */ 35 border: 0;
56 color: $primary-foreground-color; 36 border-radius: 0.3em;
57}
58 37
59/* The "Big Play Button" is the play button that shows before the video plays.
60 To center it set the align values to center and middle. The typical location
61 of the button is the center, but there is trend towards moving it to a corner
62 where it gets out of the way of valuable content in the poster image.*/
63.vjs-sublime-skin .vjs-big-play-button {
64 /* The font size is what makes the big play button...big.
65 All width/height values use ems, which are a multiple of the font size.
66 If the .video-js font-size is 10px, then 3em equals 30px.*/
67 font-size: 8em;
68
69 /* We're using SCSS vars here because the values are used in multiple places.
70 Now that font size is set, the following em values will be a multiple of the
71 new font size. If the font-size is 3em (30px), then setting any of
72 the following values to 3em would equal 30px. 3 * font-size. */
73 $big-play-width: 3em;
74 /* 1.5em = 45px default */
75 $big-play-height: 1.5em;
76
77 line-height: $big-play-height;
78 height: $big-play-height;
79 width: $big-play-width;
80
81 /* 0.06666em = 2px default */
82 border: 0;
83 /* 0.3em = 9px default */
84 border-radius: 0.3em;
85
86 @if $center-big-play-button {
87 /* Align center */
88 left: 50%; 38 left: 50%;
89 top: 50%; 39 top: 50%;
90 margin-left: -($big-play-width / 2); 40 margin-left: -($big-play-width / 2);
91 margin-top: -($big-play-height / 2); 41 margin-top: -($big-play-height / 2);
92 } @else {
93 /* Align top left. 0.5em = 15px default */
94 left: 0.5em;
95 top: 0.5em;
96 } 42 }
97}
98
99/* The default color of control backgrounds is mostly black but with a little
100 bit of blue so it can still be seen on all-black video frames, which are common. */
101.video-js .vjs-control-bar,
102.video-js .vjs-big-play-button,
103.video-js .vjs-menu-button .vjs-menu-content {
104 /* IE8 - has no alpha support */
105 background-color: $primary-background-color;
106 /* Opacity: 1.0 = 100%, 0.0 = 0% */
107 background-color: rgba($primary-background-color, 0.7);
108 background-color: transparent;
109}
110
111// Make a slightly lighter version of the main background
112// for the slider background.
113$slider-bg-color: lighten($primary-background-color, 33%);
114
115/* Slider - used for Volume bar and Progress bar */
116.video-js .vjs-slider {
117 background-color: $slider-bg-color;
118 background-color: rgba($slider-bg-color, 0.5);
119 background-color: rgba(255,255,255,.3);
120 border-radius: 2px;
121 height: 6.5px;
122}
123
124/* The slider bar color is used for the progress bar and the volume bar
125 (the first two can be removed after a fix that's coming) */
126.video-js .vjs-volume-level,
127.video-js .vjs-play-progress,
128.video-js .vjs-slider-bar {
129 background: $primary-foreground-color;
130}
131
132/* Enlarged Slider to enable easier tracking. Adjust all the height:6.5px to preferred height for the slider if necessary. */
133.video-js .vjs-progress-holder .vjs-load-progress,
134.video-js .vjs-progress-holder .vjs-load-progress div,
135.video-js .vjs-progress-holder .vjs-play-progress,
136.video-js .vjs-progress-holder .vjs-tooltip-progress-bar {
137 height: 6.5px;
138}
139
140/* The main progress bar also has a bar that shows how much has been loaded. */
141.video-js .vjs-load-progress {
142 /* For IE8 we'll lighten the color */
143 background: ligthen($slider-bg-color, 25%);
144 /* Otherwise we'll rely on stacked opacities */
145 background: rgba($slider-bg-color, 0.5);
146}
147
148/* The load progress bar also has internal divs that represent
149 smaller disconnected loaded time ranges */
150.video-js .vjs-load-progress div {
151 /* For IE8 we'll lighten the color */
152 background: ligthen($slider-bg-color, 50%);
153 /* Otherwise we'll rely on stacked opacities */
154 background: rgba($slider-bg-color, 0.75);
155}
156
157//Skin Style Starts
158.vjs-sublime-skin .vjs-poster {
159 outline: none; /* Remove Blue Outline on Click*/
160 outline: 0;
161}
162 43
163.vjs-sublime-skin:hover .vjs-big-play-button { 44 &:hover .vjs-big-play-button {
164 background-color: transparent; 45 background-color: transparent;
165} 46 }
166
167.vjs-sublime-skin .vjs-fullscreen-control:before,
168.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:before {
169 content: ''; /* Remove Fullscreen Exit Icon */
170}
171
172.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control {
173 background: #fff;
174}
175
176.vjs-sublime-skin .vjs-fullscreen-control {
177 border: 3px solid #fff;
178 box-sizing: border-box;
179 cursor: pointer;
180 margin-top: -7px;
181 top: 50%;
182 height: 14px;
183 width: 22px;
184 margin-right: 10px;
185}
186 47
187.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after { 48 .vjs-control-bar,
188 background: #000; 49 .vjs-big-play-button,
189 content: ""; 50 .vjs-menu-button .vjs-menu-content {
190 display: block; 51 background-color: rgba($primary-background-color, 0.5);
191 position: absolute; 52 }
192 bottom: 0;
193 left: 0;
194 height: 5px;
195 width: 5px;
196}
197 53
198.vjs-sublime-skin .vjs-progress-holder { 54 $slider-bg-color: lighten($primary-background-color, 33%);
199 margin: 0;
200}
201 55
202.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after { 56 .vjs-slider {
57 background-color: rgba(255, 255, 255, .3);
203 border-radius: 2px; 58 border-radius: 2px;
204 display: block; 59 height: 5px;
205 height: 6.5px; 60 }
206}
207
208.vjs-sublime-skin .vjs-progress-control .vjs-load-progres,
209.vjs-sublime-skin .vjs-progress-control .vjs-play-progress {
210 border-radius: 2px;
211 height: 6.5px;
212}
213 61
214.vjs-sublime-skin .vjs-playback-rate { 62 /* The slider bar color is used for the progress bar and the volume bar
215 display: none; /* Remove Playback Rate */ 63 (the first two can be removed after a fix that's coming) */
216} 64 .vjs-volume-level,
65 .vjs-play-progress,
66 .vjs-slider-bar {
67 background: $primary-foreground-color;
68 }
217 69
218.vjs-sublime-skin .vjs-progress-control { 70 .vjs-load-progress {
219 margin-right: 50px; 71 background: rgba($slider-bg-color, 0.5);
220} 72 }
221 73
222.vjs-sublime-skin .vjs-time-control { 74 .vjs-load-progress div {
223 right: 55px; 75 background: rgba($slider-bg-color, 0.75);
224} 76 }
225 77
226.vjs-sublime-skin .vjs-volume-menu-button:before { 78 .vjs-poster {
227 width: 1.2em; 79 outline: none; /* Remove Blue Outline on Click*/
228 z-index: 1; 80 outline: 0;
229} 81 }
230 82
231.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu, 83 .vjs-control-bar {
232.vjs-sublime-skin .vjs-volume-menu-button:focus .vjs-menu, 84 height: $control-bar-height;
233.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active .vjs-menu {
234 display: block;
235 opacity: 1;
236}
237 85
238.vjs-sublime-skin .vjs-volume-menu-button, 86 .vjs-progress-control {
239.vjs-sublime-skin .vjs-volume-panel { 87 bottom: 34px;
240 width: 6em; 88 width: 100%;
241 position: absolute; 89 position: absolute;
242 right: 0; 90 height: 5px;
243 margin-right: 65px;
244}
245 91
246.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu-content, 92 .vjs-progress-holder {
247.vjs-sublime-skin .vjs-volume-menu-button:hover, 93 margin: 0;
248.vjs-sublime-skin .vjs-volume-menu-button:focus, 94 border-radius: 0;
249.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active, 95 }
250.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control, 96 }
251.vjs-sublime-skin .vjs-volume-panel:hover,
252.vjs-sublime-skin .vjs-volume-panel:focus,
253.vjs-sublime-skin .vjs-volume-panel.vjs-slider-active {
254 width: 6em;
255}
256 97
257.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu { 98 .vjs-play-control {
258 left: 23px; 99 font-size: $font-size;
259} 100 padding: 0 17px;
101 margin-right: 5px;
102 }
260 103
261.vjs-sublime-skin .vjs-mouse-display:before, 104 .vjs-time-control {
262.vjs-sublime-skin .vjs-play-progress:before, 105 &.vjs-current-time {
263.vjs-sublime-skin .vjs-volume-level:before { 106 font-size: $font-size;
264 content: ''; /* Remove Circle From Progress Bar */ 107 display: inline-block;
265} 108 padding: 0;
109
110 .vjs-current-time-display {
111 line-height: $control-bar-height;
112
113 &::after {
114 content: "/";
115 margin: 0 1px 0 2px;
116 }
117 }
118 }
119
120 &.vjs-duration {
121 font-size: $font-size;
122 display: inline-block;
123 padding: 0;
124
125 .vjs-duration-display {
126 line-height: $control-bar-height;
127 }
128 }
129
130 &.vjs-remaining-time {
131 display: none;
132 }
133 }
266 134
267.vjs-sublime-skin .vjs-mouse-display:after, 135 .vjs-webtorrent {
268.vjs-sublime-skin .vjs-play-progress:after, 136 width: 100%;
269.vjs-sublime-skin .vjs-time-tooltip { 137 line-height: $control-bar-height;
270 width: 5.5em; 138 text-align: right;
271} 139 padding-right: 60px;
140
141 .download-speed-number, .upload-speed-number, .peers-number {
142 font-weight: $font-semibold;
143 }
144
145 .download-speed-text, .upload-speed-text, .peers-text {
146 margin-right: 15px;
147 }
148
149 .icon {
150 display: inline-block;
151 width: 15px;
152 height: 15px;
153 background-size: contain;
154 vertical-align: middle;
155 background-repeat: no-repeat;
156 margin-right: 6px;
157 position: relative;
158 top: -1px;
159
160 &.icon-download {
161 background-image: url('../assets/player/images/arrow-down.svg');
162 }
163
164 &.icon-upload {
165 background-image: url('../assets/player/images/arrow-up.svg');
166 }
167 }
168 }
272 169
273.vjs-sublime-skin .vjs-audio-button { 170 .vjs-mute-control {
274 display: none; 171 .vjs-icon-placeholder {
275} 172 display: inline-block;
173 width: 22px;
174 height: 22px;
175 vertical-align: middle;
176 background: url('../assets/player/images/volume.svg') no-repeat;
177 background-size: contain;
178
179 &::before {
180 content: '';
181 }
182 }
183
184 &.vjs-vol-0 .vjs-icon-placeholder {
185 background: url('../assets/player/images/volume-mute.svg') no-repeat;
186 background-size: contain;
187 }
188 }
276 189
277.vjs-sublime-skin .vjs-volume-bar { 190 .vjs-volume-menu-button,
278 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC); 191 .vjs-volume-panel {
279 background-size: 22px 14px; 192 width: 6em;
280 background-repeat: no-repeat; 193 position: absolute;
281 height: 100%; 194 right: 0;
282 width: 100%; 195 margin-right: 65px;
283 max-width: 22px; 196 }
284 max-height: 14px;
285 margin: 7px 4px;
286 border-radius: 0;
287}
288 197
289.vjs-sublime-skin .vjs-volume-level { 198 .vjs-volume-bar {
290 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC); 199 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
291 background-size: 22px 14px; 200 background-size: 22px 14px;
292 background-repeat: no-repeat; 201 height: 100%;
293 max-width: 22px; 202 width: 100%;
294 max-height: 14px; 203 max-width: 22px;
295 height: 100%; 204 max-height: 14px;
296} 205 margin: 7px 4px;
206 border-radius: 0;
207 top: 3px;
208
209 .vjs-volume-level {
210 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
211 background-size: 22px 14px;
212 max-width: 22px;
213 max-height: 14px;
214 height: 100%;
215 }
216 }
297 217
298/* New for VideoJS v6 */ 218 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
299.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, 219 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
300.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:active, 220 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
301.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:focus, 221 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
302.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover { 222 width: 6em;
303 width: 6em; 223 transition-property: none;
304 transition-property: none; 224 }
305}
306 225
307.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal { 226 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
308 width: 3em; 227 width: 3em;
309 height: auto; 228 height: auto;
310} 229 }
311 230
312.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control { 231 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
313 transition-property: none; 232 transition-property: none;
314} 233 }
315 234
316.vjs-sublime-skin .vjs-fullscreen-control .vjs-icon-placeholder { 235 .vjs-volume-panel {
317 display: none; /* Remove Duplicate Fullscreen Icon */ 236 .vjs-mute-control {
318} 237 width: 2em;
238 z-index: 1;
239 padding: 0;
240 }
241
242 .vjs-volume-control {
243 display: inline-block;
244 position: relative;
245 left: 5px;
246 opacity: 1;
247 width: 3em;
248 height: auto;
249 }
250 }
319 251
320.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control { 252 .vjs-fullscreen-control {
321 width: 2em; 253 width: 37px;
322 z-index: 1; 254
323 padding: 0; 255 .vjs-icon-placeholder {
324} 256 display: inline-block;
257 width: 22px;
258 height: 22px;
259 vertical-align: middle;
260 background: url('../assets/player/images/fullscreen.svg') no-repeat;
261 background-size: contain;
262
263 &::before {
264 content: '';
265 }
266 }
267 }
325 268
326.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control { 269 .vjs-menu-button-popup {
327 display: inline-block; 270 font-size: 13px;
328 position: relative; 271 font-weight: $font-semibold;
329 left: 5px; 272 width: 42px;
330 opacity: 1; 273
331 width: 3em; 274 // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
332 height: auto; 275 .vjs-resolution-button-label {
276 line-height: $control-bar-height;
277 position: absolute;
278 top: 0;
279 left: -1px;
280 width: 100%;
281 height: 100%;
282 text-align: center;
283 box-sizing: inherit;
284 }
285
286 .vjs-resolution-button {
287 outline: 0 !important;
288 }
289
290 .vjs-menu {
291 top: 20px;
292
293 .vjs-menu-content {
294 width: 4em;
295 left: 50%; /* Center the menu, in it's parent */
296 margin-left: -2em; /* half of width, to center */
297 }
298
299 li {
300 text-transform: none;
301 font-size: 13px;
302 }
303 }
304 }
305 }
333} 306}
334 307
335// Thanks: https://projects.lukehaas.me/css-loaders/ 308// Thanks: https://projects.lukehaas.me/css-loaders/
336.vjs-loading-spinner { 309.vjs-loading-spinner {
337 margin: 0 !important; 310 margin: 0 !important;
338 position: absolute; 311 //position: absolute;
339 // 15px is the nav bar height 312 // 15px is the nav bar height
340 top: calc(50% - 15px); 313 top: calc(50% - 15px);
341 left: 50%; 314 left: 50%;