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

add design to queue

This commit is contained in:
Tixie 2020-02-21 23:56:26 +01:00
parent 647044a2b8
commit c82a8a2fa4
5 changed files with 141 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/img/playbar.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" fill="#222">
<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: 1019 B

17
src/assets/scss/5-modules/queue.scss Normal file
View File

@ -0,0 +1,17 @@
/* ----------------------------------------------------------- */
/* == track queue module */
/* ----------------------------------------------------------- */
.queue__section {
margin-bottom: 2rem;
}
.queue__sectionTitle {
margin: 0;
margin-bottom: 1rem;
color: rgba($color-primary, .8);
text-transform: uppercase;
letter-spacing: .03rem;
font-size: 1rem;
line-height: 1.2em;
}

63
src/assets/scss/5-modules/track.scss Normal file
View File

@ -0,0 +1,63 @@
/* ----------------------------------------------------------- */
/* == track module */
/* ----------------------------------------------------------- */
.track {
position: relative;
display: flex;
padding: 1rem 0;
}
.track--active::before {
position: absolute;
top: 0;
top: calc(50% - .5rem);
left: -2.1rem;
width: 1rem;
height: 1rem;
background: no-repeat url("/assets/img/playbar.svg");
background-position: left center;
background-size: 1rem 1rem;
content: "";
}
.track__main {
flex-grow: 1;
min-width: 0;
}
.track__title {
overflow: hidden;
color: $color-secondary;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 1.14em;
}
.track--active .track__title {
font-weight: bold;
}
.track__subtitle {
margin-top: .2rem;
color: $color-grey-1;
font-size: 1.2rem;
}
.track__menu {
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: -1rem;
margin-left: 1rem;
padding: 1rem;
border: none;
background: none;
color: $color-primary;
font-size: 0;
}
.track__menu svg {
width: 2rem;
}

2
src/assets/scss/style.scss
View File

@ -67,6 +67,8 @@
@import "5-modules/player-track";
@import "5-modules/volume";
@import "5-modules/controls";
@import "5-modules/queue";
@import "5-modules/track";
// --------------------------------------------------------------

66
src/components/Queue.svelte
View File

@ -1,35 +1,55 @@
<div>
<h6>PLAY NEXT</h6>
{#if $next}
<div class="entry" on:click={() => select($next)}>
<div class="title">{$next.title}</div>
<div class="user">shared by {$next.referer.username} <DistanceDate date={$next.date} /></div>
<div class="queue__section">
<div class="queue__sectionTitle">Next song</div>
<div class="track" on:click={() => select($next)}>
<div class="track__main">
<div class="track__title" class:placeholder={!$next}>
{#if $next}{$next.title}{/if}
</div>
<div class="track__subtitle" class:placeholder={!$next}>
{#if $next}
shared by {$next.referer.username} •
<DistanceDate date={$next.date} />
{/if}
</div>
</div>
{#if $next}
<button class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button>
{/if}
</div>
{:else}
NO NEXT TRACK
{/if}
</div>
<div class="queue__section">
<div class="queue__sectionTitle">History</div>
{#each history as track}
<div class="track" class:track--active={track === $current} on:click={() => select(track)}>
<div class="track__main">
<div class="track__title">{track.title}</div>
<div class="track__subtitle">
shared by {track.referer.username} •
<DistanceDate date={track.date} />
</div>
</div>
<button class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button>
</div>
{/each}
{#if history.length === 0}
<div class="track">
<div class="track__main">
<div class="track__title placeholder"></div>
<div class="track__subtitle placeholder"></div>
</div>
</div>
{/if}
{#if $enqueueing}
ENQUEING
{/if}
<h6>HISTORY</h6>
{#each history as track}
<div class="entry" class:active={track === $current} on:click={() => select(track)}>
<div class>{track.title}</div>
<div class>shared by {track.referer.username} <DistanceDate date={track.date} /></div>
</div>
{/each}
</div>
</div>
<script>
import { getContext } from 'svelte'
import DistanceDate from '/components/DistanceDate.svelte'
import DistanceDate from '/components/DistanceDate'
import IconMenu from '/components/icons/Menu'
const current = getContext('current')
const enqueueing = getContext('enqueueing')