Skip to content

Commit 516e4a6

Browse files
author
Victor Balbo
committed
feat(loading video): Add loading animation to video
1 parent 8827256 commit 516e4a6

File tree

2 files changed

+156
-1
lines changed

2 files changed

+156
-1
lines changed

‎src/components/MediaLink/Video.vue‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
<template>
22
<div class="video-player-wrapper" ref="blipVideoPlayerWrapper">
33
<div class="video-player">
4+
<div class="sk-circle" ref="animation">
5+
<div class="sk-circle1 sk-child"></div>
6+
<div class="sk-circle2 sk-child"></div>
7+
<div class="sk-circle3 sk-child"></div>
8+
<div class="sk-circle4 sk-child"></div>
9+
<div class="sk-circle5 sk-child"></div>
10+
<div class="sk-circle6 sk-child"></div>
11+
<div class="sk-circle7 sk-child"></div>
12+
<div class="sk-circle8 sk-child"></div>
13+
<div class="sk-circle9 sk-child"></div>
14+
<div class="sk-circle10 sk-child"></div>
15+
<div class="sk-circle11 sk-child"></div>
16+
<div class="sk-circle12 sk-child"></div>
17+
</div>
418
<video :src="this.document.uri" ref="blipVideo"></video>
519
</div>
620
<div class="video-player-controls" ref="videoPlayerControls">
@@ -82,14 +96,19 @@ export default {
8296
volumeProgress: null,
8397
volumeSliderWrapper: null,
8498
videoPlayerWrapper: null,
85-
inactivityTimeout: null
99+
inactivityTimeout: null,
100+
animation: null
86101
}
87102
},
88103
mounted: function () {
104+
this.animation = this.$refs.animation
89105
this.videoPlayerWrapper = this.$refs.blipVideoPlayerWrapper
90106
this.video = this.$refs.blipVideo
91107
this.video.addEventListener('timeupdate', this.videoTimeUpdated)
92108
this.video.addEventListener('loadedmetadata', this.videoLoaded)
109+
this.video.addEventListener('seeking', this.readyToPlay)
110+
this.video.addEventListener('waiting', this.readyToPlay)
111+
this.video.addEventListener('seeked', this.readyToPlay)
93112
this.video.addEventListener('canplay', this.readyToPlay)
94113
this.video.addEventListener('ended', this.resetPlay)
95114
@@ -119,6 +138,14 @@ export default {
119138
this.video.currentTime = 0
120139
}
121140
},
141+
readyToPlay: function (event) {
142+
console.log(event)
143+
if (event.type === 'seeked' || event.type === 'canplay') {
144+
this.animation.classList.add('hide')
145+
} else {
146+
this.animation.classList.remove('hide')
147+
}
148+
},
122149
videoTimeUpdated: function () {
123150
var current = this.video.currentTime
124151
var percent = (current / this.totalTime) * 100
@@ -202,6 +229,7 @@ export default {
202229

203230
<style lang="scss">
204231
@import '../../styles/variables.scss';
232+
@import '../../styles/loading.scss';
205233
206234
.media-link {
207235
@@ -244,9 +272,17 @@ export default {
244272
display: flex;
245273
justify-content: center;
246274
flex-direction: column;
275+
276+
.sk-circle{
277+
position: absolute;
278+
color: white;
279+
}
280+
247281
.video-player {
248282
display: flex;
249283
align-self: top;
284+
align-items: center;
285+
justify-content: center;
250286
}
251287
252288
video {

‎src/styles/loading.scss‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
.sk-circle {
2+
width: 40px;
3+
height: 40px;
4+
}
5+
.sk-circle .sk-child {
6+
width: 100%;
7+
height: 100%;
8+
position: absolute;
9+
left: 0;
10+
top: 0;
11+
}
12+
.sk-circle .sk-child:before {
13+
content: '';
14+
display: block;
15+
margin: 0 auto;
16+
width: 15%;
17+
height: 15%;
18+
background-color: #fff;
19+
border-radius: 100%;
20+
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
21+
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
22+
}
23+
.sk-circle .sk-circle2 {
24+
-webkit-transform: rotate(30deg);
25+
-ms-transform: rotate(30deg);
26+
transform: rotate(30deg); }
27+
.sk-circle .sk-circle3 {
28+
-webkit-transform: rotate(60deg);
29+
-ms-transform: rotate(60deg);
30+
transform: rotate(60deg); }
31+
.sk-circle .sk-circle4 {
32+
-webkit-transform: rotate(90deg);
33+
-ms-transform: rotate(90deg);
34+
transform: rotate(90deg); }
35+
.sk-circle .sk-circle5 {
36+
-webkit-transform: rotate(120deg);
37+
-ms-transform: rotate(120deg);
38+
transform: rotate(120deg); }
39+
.sk-circle .sk-circle6 {
40+
-webkit-transform: rotate(150deg);
41+
-ms-transform: rotate(150deg);
42+
transform: rotate(150deg); }
43+
.sk-circle .sk-circle7 {
44+
-webkit-transform: rotate(180deg);
45+
-ms-transform: rotate(180deg);
46+
transform: rotate(180deg); }
47+
.sk-circle .sk-circle8 {
48+
-webkit-transform: rotate(210deg);
49+
-ms-transform: rotate(210deg);
50+
transform: rotate(210deg); }
51+
.sk-circle .sk-circle9 {
52+
-webkit-transform: rotate(240deg);
53+
-ms-transform: rotate(240deg);
54+
transform: rotate(240deg); }
55+
.sk-circle .sk-circle10 {
56+
-webkit-transform: rotate(270deg);
57+
-ms-transform: rotate(270deg);
58+
transform: rotate(270deg); }
59+
.sk-circle .sk-circle11 {
60+
-webkit-transform: rotate(300deg);
61+
-ms-transform: rotate(300deg);
62+
transform: rotate(300deg); }
63+
.sk-circle .sk-circle12 {
64+
-webkit-transform: rotate(330deg);
65+
-ms-transform: rotate(330deg);
66+
transform: rotate(330deg); }
67+
.sk-circle .sk-circle2:before {
68+
-webkit-animation-delay: -1.1s;
69+
animation-delay: -1.1s; }
70+
.sk-circle .sk-circle3:before {
71+
-webkit-animation-delay: -1s;
72+
animation-delay: -1s; }
73+
.sk-circle .sk-circle4:before {
74+
-webkit-animation-delay: -0.9s;
75+
animation-delay: -0.9s; }
76+
.sk-circle .sk-circle5:before {
77+
-webkit-animation-delay: -0.8s;
78+
animation-delay: -0.8s; }
79+
.sk-circle .sk-circle6:before {
80+
-webkit-animation-delay: -0.7s;
81+
animation-delay: -0.7s; }
82+
.sk-circle .sk-circle7:before {
83+
-webkit-animation-delay: -0.6s;
84+
animation-delay: -0.6s; }
85+
.sk-circle .sk-circle8:before {
86+
-webkit-animation-delay: -0.5s;
87+
animation-delay: -0.5s; }
88+
.sk-circle .sk-circle9:before {
89+
-webkit-animation-delay: -0.4s;
90+
animation-delay: -0.4s; }
91+
.sk-circle .sk-circle10:before {
92+
-webkit-animation-delay: -0.3s;
93+
animation-delay: -0.3s; }
94+
.sk-circle .sk-circle11:before {
95+
-webkit-animation-delay: -0.2s;
96+
animation-delay: -0.2s; }
97+
.sk-circle .sk-circle12:before {
98+
-webkit-animation-delay: -0.1s;
99+
animation-delay: -0.1s; }
100+
101+
@-webkit-keyframes sk-circleBounceDelay {
102+
0%, 80%, 100% {
103+
-webkit-transform: scale(0);
104+
transform: scale(0);
105+
} 40% {
106+
-webkit-transform: scale(1);
107+
transform: scale(1);
108+
}
109+
}
110+
111+
@keyframes sk-circleBounceDelay {
112+
0%, 80%, 100% {
113+
-webkit-transform: scale(0);
114+
transform: scale(0);
115+
} 40% {
116+
-webkit-transform: scale(1);
117+
transform: scale(1);
118+
}
119+
}

0 commit comments

Comments
 (0)