aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-01-11 15:14:40 +0100
committerChocobozzz <me@florianbigard.com>2018-01-11 15:14:40 +0100
commitdfbd250da118f7c528c3573f32600f375e8547cd (patch)
treee125ee65e5797e298dace0ebca4d90101c3d39ad /client/src
parent6120941f599c1234c9974a7d33ff12faa88aaed0 (diff)
downloadPeerTube-dfbd250da118f7c528c3573f32600f375e8547cd.tar.gz
PeerTube-dfbd250da118f7c528c3573f32600f375e8547cd.tar.zst
PeerTube-dfbd250da118f7c528c3573f32600f375e8547cd.zip
Fix spinner
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts1
-rw-r--r--client/src/sass/video-js-custom.scss36
2 files changed, 21 insertions, 16 deletions
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 f6f043b9c..1c2317c52 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -32,7 +32,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
32 otherVideosDisplayed: Video[] = [] 32 otherVideosDisplayed: Video[] = []
33 33
34 error = false 34 error = false
35 loading = false
36 player: videojs.Player 35 player: videojs.Player
37 playerElement: HTMLVideoElement 36 playerElement: HTMLVideoElement
38 userRating: UserVideoRateType = null 37 userRating: UserVideoRateType = null
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index bc1496d70..d08bf5ed3 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -46,20 +46,6 @@ $control-bar-height: 34px;
46 transition: visibility 0.5s, opacity 0.5s; 46 transition: visibility 0.5s, opacity 0.5s;
47 } 47 }
48 48
49 .vjs-loading-spinner {
50 display: block;
51 visibility: hidden;
52 opacity: 0;
53 transition-delay: 0.5s;
54 transition: visibility 0.5s, opacity 0.5s;
55 }
56
57 &.vjs-waiting .vjs-loading-spinner {
58 visibility: visible;
59 opacity: 1;
60
61 }
62
63 .vjs-control-bar, 49 .vjs-control-bar,
64 .vjs-big-play-button, 50 .vjs-big-play-button,
65 .vjs-menu-button .vjs-menu-content { 51 .vjs-menu-button .vjs-menu-content {
@@ -374,8 +360,9 @@ $control-bar-height: 34px;
374 border: 0.7em solid rgba(255, 255, 255, 0.2); 360 border: 0.7em solid rgba(255, 255, 255, 0.2);
375 border-left-color: #ffffff; 361 border-left-color: #ffffff;
376 transform: translateZ(0); 362 transform: translateZ(0);
377 animation: spinner 1.4s infinite linear; 363 animation: 0.3s ease-out 0.3s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
378 overflow: hidden; 364 overflow: hidden;
365 visibility: hidden;
379 366
380 &:before { 367 &:before {
381 animation: none !important; 368 animation: none !important;
@@ -396,5 +383,24 @@ $control-bar-height: 34px;
396 transform: rotate(360deg); 383 transform: rotate(360deg);
397 } 384 }
398 } 385 }
386
387 @keyframes vjs-spinner-show {
388 0% {
389 display: none;
390 opacity: 0;
391 }
392
393 1% {
394 display: block;
395 visibility: visible;
396 opacity: 0;
397 }
398
399 100% {
400 display: block;
401 visibility: visible;
402 opacity: 1;
403 }
404 }
399} 405}
400 406