Mastodon
/
mastoradio-la-radio-di-mastodon
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

animated track playbars only when paying

This commit is contained in:
Tixie 2020-02-22 00:13:04 +01:00
parent c82a8a2fa4
commit 98fe8a405d
4 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/img/playbar-animate.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 -1 0 80)" fill="#635776">
<rect width="10" height="20" rx="3">
<animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"/>
</rect>
<rect x="15" width="10" height="80" rx="3">
<animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"/>
</rect>
<rect x="30" width="10" height="50" rx="3">
<animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"/>
</rect>
<rect x="45" width="10" height="30" rx="3">
<animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"/>
</rect>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1007 B

18
src/assets/img/playbar.svg
View File

@ -1,16 +1,8 @@
<svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#222"> <svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 -1 0 80)" fill="#635776"> <g transform="matrix(1 0 0 -1 0 80)" fill="#635776">
<rect width="10" height="20" rx="3"> <rect width="10" height="30" rx="3"/>
<animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"/> <rect x="15" width="10" height="20" rx="3"/>
</rect> <rect x="30" width="10" height="70" rx="3"/>
<rect x="15" width="10" height="80" rx="3"> <rect x="45" width="10" height="50" rx="3"/>
<animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"/>
</rect>
<rect x="30" width="10" height="50" rx="3">
<animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"/>
</rect>
<rect x="45" width="10" height="30" rx="3">
<animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"/>
</rect>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1019 B

After

Width:  |  Height:  |  Size: 341 B

4
src/assets/scss/5-modules/track.scss
View File

@ -21,6 +21,10 @@
content: ""; content: "";
} }
.track--playing::before {
background-image: url("/assets/img/playbar-animate.svg");
}
.track__main { .track__main {
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;

4
src/components/Queue.svelte
View File

@ -23,7 +23,7 @@
<div class="queue__section"> <div class="queue__section">
<div class="queue__sectionTitle">History</div> <div class="queue__sectionTitle">History</div>
{#each history as track} {#each history as track}
<div class="track" class:track--active={track === $current} on:click={() => select(track)}> <div class="track" class:track--active={track === $current} class:track--playing={!$paused} on:click={() => select(track)}>
<div class="track__main"> <div class="track__main">
<div class="track__title">{track.title}</div> <div class="track__title">{track.title}</div>
<div class="track__subtitle"> <div class="track__subtitle">
@ -42,7 +42,6 @@
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
@ -56,6 +55,7 @@
const next = getContext('next') const next = getContext('next')
const queue = getContext('queue') const queue = getContext('queue')
const select = getContext('select') const select = getContext('select')
const paused = getContext('paused')
$: history = $queue.filter(x => x !== $next).reverse() $: history = $queue.filter(x => x !== $next).reverse()
</script> </script>