diff --git a/src/assets/img/playbar.svg b/src/assets/img/playbar.svg new file mode 100644 index 0000000..2a9fb57 --- /dev/null +++ b/src/assets/img/playbar.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/scss/5-modules/queue.scss b/src/assets/scss/5-modules/queue.scss new file mode 100644 index 0000000..1edba81 --- /dev/null +++ b/src/assets/scss/5-modules/queue.scss @@ -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; +} diff --git a/src/assets/scss/5-modules/track.scss b/src/assets/scss/5-modules/track.scss new file mode 100644 index 0000000..641da36 --- /dev/null +++ b/src/assets/scss/5-modules/track.scss @@ -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; +} diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 43cd932..0f8d2bd 100755 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -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"; // -------------------------------------------------------------- diff --git a/src/components/Queue.svelte b/src/components/Queue.svelte index de34f03..b67a9e1 100644 --- a/src/components/Queue.svelte +++ b/src/components/Queue.svelte @@ -1,35 +1,55 @@
-
PLAY NEXT
- - {#if $next} -
select($next)}> -
{$next.title}
-
shared by {$next.referer.username}
+
+
Next song
+
select($next)}> +
+
+ {#if $next}{$next.title}{/if} +
+
+ {#if $next} + shared by {$next.referer.username} • + + {/if} +
+
+ {#if $next} + + {/if}
- {:else} - NO NEXT TRACK - {/if} +
+
+
History
+ {#each history as track} +
select(track)}> +
+
{track.title}
+
+ shared by {track.referer.username} • + +
+
+ +
+ {/each} + {#if history.length === 0} +
+
+
+
+
+
+ {/if} - {#if $enqueueing} - ENQUEING - {/if} - - -
HISTORY
- - {#each history as track} -
select(track)}> -
{track.title}
-
shared by {track.referer.username}
-
- {/each} +