okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add loadbar sound when playing a song

Browse source
This commit is contained in:
Jason Chen 2022-01-22 23:12:29 -08:00
parent ee1da31a94
commit 2b8b0ce6d8
2 changed files with 55 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/renderer/style.less
View file

@ -3633,6 +3633,52 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
background-repeat: no-repeat;
}
/* CSS.gg
*/
@keyframes load-bar {
10% {box-shadow: inset 0 -4px 0}
20% {box-shadow: inset 0 -10px 0}
30% {box-shadow: inset 0 -12px 0}
40% {box-shadow: inset 0 -8px 0}
50% {box-shadow: inset 0 -4px 0}
60% {box-shadow: inset 0 -6px 0}
80% {box-shadow: inset 0 -12px 0}
90% {box-shadow: inset 0 -6px 0}
to {box-shadow: inset 0 -2px 0}
}
.loadbar-sound,
.loadbar-sound::after,
.loadbar-sound::before {
animation: load-bar 1.3s ease infinite alternate;
box-sizing: border-box;
width: 3px;
height: 28px;
box-shadow: inset 0 -12px 0;
}
.loadbar-sound {
margin-left: 22px;
margin-top: -16px;
position: relative;
transform: scale(var(--load-bar,1));
color: var(--keyColor);
display: block;
}
.loadbar-sound::after,
.loadbar-sound::before {
content: "";
position: absolute;
bottom: 0
}
.loadbar-sound::before {
left: -4.5px;
animation-delay: -2.4s
}
.loadbar-sound::after {
right: -4.2px;
animation-delay: -3.7s
}
.isLibrary {
flex: 0 0 auto;
width: 40px;

11
src/renderer/views/components/mediaitem-list-item.ejs
View file

@ -14,12 +14,15 @@
@mouseleave="showInLibrary = false"
:class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
<template v-if="isVisible">
<div class="isLibrary" :style="{opacity: (showInLibrary ? 1 : 0)}" v-if="showLibraryStatus == true">
<button @click="addToLibrary()"
v-if="!addedToLibrary">
<div class="isLibrary"" v-if="showLibraryStatus == true">
<div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">
<button @click="addToLibrary()" v-if="!addedToLibrary">
<div class="svg-icon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
</button>
<button v-else style="opacity:0;">❤️</button>
</div>
<div v-if="app.mk.isPlaying && app.mk.nowPlayingItem._songId == item.attributes.playParams.id" :style="{display: (showInLibrary ? 'none' : 'block')}">
<div class="loadbar-sound"></div>
</div>
</div>
<div class="artwork" v-if="showArtwork == true">
<mediaitem-artwork