Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-28 15:00:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add a loader

Browse source
This commit is contained in:
Phan An 2017-08-28 11:58:09 +01:00
parent f0d86ac68b
commit 64ba873313
1 changed files with 89 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
resources/assets/js/remote/app.vue
View file

@ -1,11 +1,13 @@
<template> <template>
<div id="app" :class="{ 'standalone' : inStandAloneMode }"> <div id="app" :class="{ 'standalone' : inStandAloneMode }">
<template v-if="authenticated">
<div class="translucent" v-if="song" :style="{ backgroundImage: 'url('+song.album.cover+')' }"> <div class="translucent" v-if="song" :style="{ backgroundImage: 'url('+song.album.cover+')' }">
</div> </div>
<div id="main" v-if="authenticated"> <div id="main">
<p class="collapse"> <p class="collapse">
<i class="fa fa-angle-down"></i> <i class="fa fa-angle-down"></i>
</p> </p>
<template v-if="connected">
<div class="details" v-if="song"> <div class="details" v-if="song">
<div class="cover" :style="{ backgroundImage: 'url('+song.album.cover+')' }"></div> <div class="cover" :style="{ backgroundImage: 'url('+song.album.cover+')' }"></div>
<div class="info"> <div class="info">
@ -35,7 +37,13 @@
<i class="fa fa-volume-up"></i> <i class="fa fa-volume-up"></i>
</a> </a>
</footer> </footer>
</template>
<div v-else class="loader">
<p><span>Searching for Koel…</span></p>
<div class="signal"></div>
</div> </div>
</div>
</template>
<div class="login-wrapper" v-else> <div class="login-wrapper" v-else>
<login-form @loggedin="onUserLoggedIn"/> <login-form @loggedin="onUserLoggedIn"/>
@ -56,7 +64,8 @@
authenticated: false, authenticated: false,
song: null, song: null,
lastActiveTime: new Date().getTime(), lastActiveTime: new Date().getTime(),
inStandAloneMode: false inStandAloneMode: false,
connected: false
} }
}, },
@ -74,6 +83,7 @@
await socket.init() await socket.init()
socket.listen('song', ({ song }) => { socket.listen('song', ({ song }) => {
this.connected = true
this.song = song this.song = song
}).listen('playback:stopped', () => { }).listen('playback:stopped', () => {
if (this.song) { if (this.song) {
@ -186,6 +196,51 @@
perspective: 1000; perspective: 1000;
pointer-events: none; pointer-events: none;
} }
.loader {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
position: relative;
p {
position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
padding-bottom: 40px;
}
.signal {
border: 1px solid $colorOrange;
border-radius: 50%;
height: 0;
opacity: 0;
width: 50vw;
animation: pulsate 1.5s ease-out;
animation-iteration-count: infinite;
transform: translate(-50%, -50%);
}
@keyframes pulsate {
0% {
transform:scale(.1);
opacity: 0.0;
}
50% {
opacity:1;
}
100% {
transform:scale(1.2);
opacity:0;
}
}
}
} }
#main { #main {