mirror
/
funkwhale
kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

perf(play-indicator): delegate play indicator to the GPU instead of CPU 

This reduces the CSS paints by animating `scaleY` instead of element `height`

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>
environments/review-docs-nginx-aqlin2/deployments/17397
Kasper Seweryn 2023-03-07 10:31:48 +01:00 zatwierdzone przez Marge
rodzic 6c4e4cb5f6
commit b8a65b193f
2 zmienionych plików z 12 dodań i 10 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
front/src/composables/audio/tracks.ts
Wyświetl plik

@ -93,6 +93,7 @@ export const useTracks = createGlobalState(() => {
const SoundImplementation = soundImplementation.value
const sound = new SoundImplementation(sources)
sound.track = track.title
sound.onSoundEnd(() => {
console.log('TRACK ENDED, PLAYING NEXT')

21
front/src/style/components/_play_indicator.scss
Wyświetl plik

@ -1,29 +1,30 @@
#audio-bars {
height: 1em;
position: relative;
display: flex;
width: 12px;
}
.audio-bar {
background: var(--main-color);
bottom: 0;
height: .1em;
position: absolute;
width: 3px;
height: 1em;
animation: sound 1s cubic-bezier(.17,.37,.43,.67) infinite alternate;
will-change: opacity, transform;
transform-origin: bottom;
}
@keyframes sound {
0% {
opacity: .35;
height: .1em;
transform: scaleY(0.1) translateZ(0);
}
100% {
opacity: 1;
height: 1em;
transform: scaleY(1) translateZ(0);
}
}
.audio-bar:nth-child(1) { left: 0em; animation-duration: 0.4s; }
.audio-bar:nth-child(2) { left: .25em; animation-duration: 0.2s; }
.audio-bar:nth-child(3) { left: .50em; animation-duration: 1.0s; }
.audio-bar:nth-child(4) { left: .75em; animation-duration: 0.3s; }
.audio-bar:nth-child(1) { animation-duration: 0.4s; }
.audio-bar:nth-child(2) { animation-duration: 0.2s; }
.audio-bar:nth-child(3) { animation-duration: 1.0s; }
.audio-bar:nth-child(4) { animation-duration: 0.3s; }