aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/assets/player/peertube-load-progress-bar.ts36
-rw-r--r--client/src/assets/player/peertube-player.ts12
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts4
-rw-r--r--client/src/sass/video-js-custom.scss64
4 files changed, 82 insertions, 34 deletions
diff --git a/client/src/assets/player/peertube-load-progress-bar.ts b/client/src/assets/player/peertube-load-progress-bar.ts
new file mode 100644
index 000000000..cc861c451
--- /dev/null
+++ b/client/src/assets/player/peertube-load-progress-bar.ts
@@ -0,0 +1,36 @@
1import * as Bitfield from 'bitfield'
2import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
3
4const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
5
6class PeerTubeLoadProgressBar extends Component {
7
8 constructor (player, options) {
9 super(player, options)
10 this.partEls_ = []
11 this.on(player, 'progress', this.update)
12 }
13
14 createEl () {
15 return super.createEl('div', {
16 className: 'vjs-load-progress',
17 innerHTML: `<span class="vjs-control-text"><span>${this.localize('Loaded')}</span>: 0%</span>`
18 })
19 }
20
21 dispose () {
22 this.partEls_ = null
23
24 super.dispose()
25 }
26
27 update () {
28 const torrent = this.player().peertube().getTorrent()
29 if (!torrent) return
30
31 this.el_.style.width = (torrent.progress * 100) + '%'
32 }
33
34}
35
36Component.registerComponent('PeerTubeLoadProgressBar', PeerTubeLoadProgressBar)
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index 9fe5af569..d204b9703 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -9,6 +9,7 @@ import './resolution-menu-button'
9import './settings-menu-button' 9import './settings-menu-button'
10import './webtorrent-info-button' 10import './webtorrent-info-button'
11import './peertube-videojs-plugin' 11import './peertube-videojs-plugin'
12import './peertube-load-progress-bar'
12import { videojsUntyped } from './peertube-videojs-typings' 13import { videojsUntyped } from './peertube-videojs-typings'
13import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils' 14import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
14 15
@@ -94,7 +95,16 @@ function getControlBarChildren (options: {
94 'liveDisplay': {}, 95 'liveDisplay': {},
95 96
96 'flexibleWidthSpacer': {}, 97 'flexibleWidthSpacer': {},
97 'progressControl': {}, 98 'progressControl': {
99 children: {
100 'seekBar': {
101 children: {
102 'peerTubeLoadProgressBar': {},
103 'playProgressBar': {}
104 }
105 }
106 }
107 },
98 108
99 'webTorrentButton': {}, 109 'webTorrentButton': {},
100 110
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 65103f3ab..79df42a53 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -272,6 +272,10 @@ class PeerTubePlugin extends Plugin {
272 return this.currentVideoFile 272 return this.currentVideoFile
273 } 273 }
274 274
275 getTorrent () {
276 return this.torrent
277 }
278
275 private tryToPlay (done?: Function) { 279 private tryToPlay (done?: Function) {
276 if (!done) done = function () { /* empty */ } 280 if (!done) done = function () { /* empty */ }
277 281
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 350e7cdd5..64805a3a1 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -130,39 +130,6 @@ $context-menu-width: 350px;
130 background-color: rgba($primary-background-color, 0.5); 130 background-color: rgba($primary-background-color, 0.5);
131 } 131 }
132 132
133 .vjs-slider {
134 background-color: rgba(255, 255, 255, .3);
135 border-radius: 2px;
136 height: 5px;
137
138 .vjs-slider-bar {
139 background: $primary-foreground-color;
140 }
141 }
142
143 .vjs-play-progress {
144
145 &::before {
146 top: -0.3em;
147
148 &:hover {
149 top: -0.372em;
150 }
151 }
152
153 .vjs-time-tooltip {
154 display: none;
155 }
156 }
157
158 .vjs-load-progress {
159 background: rgba($slider-bg-color, 0.5);
160
161 div {
162 background: rgba($slider-bg-color, 0.75);
163 }
164 }
165
166 .vjs-poster { 133 .vjs-poster {
167 outline: none; /* Remove Blue Outline on Click*/ 134 outline: none; /* Remove Blue Outline on Click*/
168 outline: 0; 135 outline: 0;
@@ -197,6 +164,37 @@ $context-menu-width: 350px;
197 opacity: $primary-foreground-opacity; 164 opacity: $primary-foreground-opacity;
198 } 165 }
199 166
167 .vjs-slider {
168 background-color: rgba(255, 255, 255, .2);
169 border-radius: 2px;
170 height: 5px;
171
172 .vjs-slider-bar {
173 background: $primary-foreground-color;
174 }
175 }
176
177 .vjs-play-progress {
178
179 &::before {
180 top: -0.3em;
181
182 &:hover {
183 top: -0.372em;
184 }
185 }
186
187 .vjs-time-tooltip {
188 display: none;
189 }
190 }
191
192 .vjs-load-progress {
193 &, & div {
194 background: rgba(255, 255, 255, .2);
195 }
196 }
197
200 .vjs-progress-control { 198 .vjs-progress-control {
201 bottom: 34px; 199 bottom: 34px;
202 width: 100%; 200 width: 100%;