Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-24 21:23:06 +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

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

@ -1,41 +1,49 @@
<template> <template>
<div id="app" :class="{ 'standalone' : inStandAloneMode }"> <div id="app" :class="{ 'standalone' : inStandAloneMode }">
<div class="translucent" v-if="song" :style="{ backgroundImage: 'url('+song.album.cover+')' }"> <template v-if="authenticated">
</div> <div class="translucent" v-if="song" :style="{ backgroundImage: 'url('+song.album.cover+')' }">
<div id="main" v-if="authenticated"> </div>
<p class="collapse"> <div id="main">
<i class="fa fa-angle-down"></i> <p class="collapse">
</p> <i class="fa fa-angle-down"></i>
<div class="details" v-if="song"> </p>
<div class="cover" :style="{ backgroundImage: 'url('+song.album.cover+')' }"></div> <template v-if="connected">
<div class="info"> <div class="details" v-if="song">
<div class="wrap"> <div class="cover" :style="{ backgroundImage: 'url('+song.album.cover+')' }"></div>
<p class="title text">{{ song.title }}</p> <div class="info">
<p class="artist text">{{ song.artist.name }}</p> <div class="wrap">
<p class="album text">{{ song.album.name }}</p> <p class="title text">{{ song.title }}</p>
<p class="artist text">{{ song.artist.name }}</p>
<p class="album text">{{ song.album.name }}</p>
</div>
</div>
</div> </div>
<footer>
<a class="favorite" @click.prevent="toggleFavorite">
<i class="fa fa-heart yep" v-if="song && song.liked"></i>
<i class="fa fa-heart-o" v-else></i>
</a>
<a class="prev" @click="playPrev">
<i class="fa fa-step-backward"></i>
</a>
<a class="play-pause" @click.prevent="togglePlayback">
<i class="fa fa-pause" v-if="playing"></i>
<i class="fa fa-play" v-else></i>
</a>
<a class="next" @click="playNext">
<i class="fa fa-step-forward"></i>
</a>
<a class="volume">
<i class="fa fa-volume-up"></i>
</a>
</footer>
</template>
<div v-else class="loader">
<p><span>Searching for Koel…</span></p>
<div class="signal"></div>
</div> </div>
</div> </div>
<footer> </template>
<a class="favorite" @click.prevent="toggleFavorite">
<i class="fa fa-heart yep" v-if="song && song.liked"></i>
<i class="fa fa-heart-o" v-else></i>
</a>
<a class="prev" @click="playPrev">
<i class="fa fa-step-backward"></i>
</a>
<a class="play-pause" @click.prevent="togglePlayback">
<i class="fa fa-pause" v-if="playing"></i>
<i class="fa fa-play" v-else></i>
</a>
<a class="next" @click="playNext">
<i class="fa fa-step-forward"></i>
</a>
<a class="volume">
<i class="fa fa-volume-up"></i>
</a>
</footer>
</div>
<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 {