MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Kasper Seweryn 2023-03-07 10:31:48 +01:00 committed by Marge
parent 6c4e4cb5f6
commit b8a65b193f
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/composables/audio/tracks.ts
View File

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

21
front/src/style/components/_play_indicator.scss
View File

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