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 controls

This commit is contained in:
Tixie 2020-02-16 23:39:41 +01:00
parent 48a77ca043
commit 471ae66374
11 changed files with 170 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/assets/scss/5-modules/controls.scss Normal file
View File

@ -0,0 +1,106 @@
/* ----------------------------------------------------------- */
/* == control module */
/* ----------------------------------------------------------- */
.controls {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Volume
-------------------------------------------------------------- */
.controls__volume {
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 1rem;
padding-top: .1rem;
}
/* Controls
-------------------------------------------------------------- */
.controls__controls {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.controls__prevnext {
padding: 1rem;
border: none;
border-radius: .2rem;
background: none;
color: $color-primary;
font-size: 0;
}
.controls__prevnext.disabled {
color: rgba($color-primary, .4);
}
.controls__prevnext svg {
width: 1.8rem;
height: 2rem;
}
.playerBig .controls__prevnext svg {
width: 2.1rem;
height: 2.2rem;
}
.controls__playpause {
margin: 0 2rem;
padding: 0;
border: none;
border-radius: 4.2rem;
background: none;
color: $color-primary;
font-size: 0;
}
.controls__playpause svg {
width: 4.6rem;
height: 4.6rem;
}
.playerBig .controls__playpause {
margin: 0 3rem;
}
.playerBig .controls__playpause svg {
width: 5.6rem;
height: 5.6rem;
}
.controls__playpause.disabled {
color: rgba($color-primary, .4);
}
/* Menu
-------------------------------------------------------------- */
.controls__menu {
margin-right: -1rem;
}
.controls__menuBtn {
padding: 1rem;
border: none;
background: none;
color: $color-primary;
font-size: 0;
}
.controls__menuBtn svg {
width: 2.5rem;
height: .5rem;
}
.playerBig .controls__menuBtn svg {
width: 3.2rem;
height: .6rem;
}

4
src/assets/scss/5-modules/player-big.scss
View File

@ -2,6 +2,10 @@
/* == Big player */
/* ----------------------------------------------------------- */
.playerBig {
margin-bottom: 6rem;
}
.playerBig__player {
position: relative;
overflow: hidden;

7
src/assets/scss/5-modules/volume.scss
View File

@ -4,7 +4,12 @@
.volume {
position: relative;
margin: 1rem 0;
margin: 0;
}
.playerBig .volume {
transform: scale(1.11);
transform-origin: left center;
}
.volume__bg,

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

@ -66,6 +66,7 @@
@import "5-modules/player-progress";
@import "5-modules/player-track";
@import "5-modules/volume";
@import "5-modules/controls";
// --------------------------------------------------------------

55
src/components/Controls.svelte
View File

@ -1,29 +1,29 @@
<div class="controls">
<div class="controls-group">
<div class="controls__volume">
<Volume></Volume>
</div>
<div class="controls-group">
<button class:cant={!$canPrevious} on:click={() => selectPrevious()}>⏮️</button>
<button on:click={() => $paused = !$paused}>
{#if $current === null}
▶️
{:else if $loading}
🕒
{:else if $paused}
▶️
{:else }
⏸️
{/if}
</button>
<button class:cant={!$canNext} on:click={() => selectNext()}>⏭️</button>
<div class="controls__controls">
<button
class="controls__prevnext"
class:disabled={!$canPrevious} on:click={() => selectPrevious()}
disabled={!$canPrevious} on:click={() => selectPrevious()}
aria-label="Prev"
title="Previous song"
><Prev></Prev></button>
<PlayPause on:click={() => $paused = !$paused}></PlayPause>
<button
class="controls__prevnext"
class:disabled={!$canNext}
disabled={!$canNext}
on:click={() => selectNext()}
aria-label="Next"
title="Next Song"
><Next></Next></button>
</div>
<div class="controls-group">
<button>⭐</button>
<button>🔁</button>
<div class="controls__menu">
<button class="controls__menuBtn" aria-label="track menu"><IconMenu></IconMenu></button>
</div>
</div>
@ -40,20 +40,13 @@
loading
} from '/store.js'
import Volume from '/components/Volume'
import PlayPause from '/components/icons/controls/PlayPause'
import Prev from '/components/icons/controls/Prev'
import Next from '/components/icons/controls/Next'
import IconMenu from '/components/icons/Menu'
</script>
<style>
.controls {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.controls-group {
margin: 0 1rem;
}
.cant {
background-color: red;
}

2
src/components/Radio.svelte
View File

@ -7,7 +7,6 @@
<section class="viewer">
<Viewer></Viewer>
<Controls></Controls>
</section>
<section class="queue">
@ -23,7 +22,6 @@
import Header from '/components/layout/Header.svelte'
import Footer from '/components/layout/Footer.svelte'
import Controls from '/components/Controls.svelte'
import Queue from '/components/Queue.svelte'
import Viewer from '/components/Viewer.svelte'
import { radioIterator, radioShareIterator } from '/services/radio.js'

3
src/components/Viewer.svelte
View File

@ -36,12 +36,15 @@
</div>
<button class="playerTrack__fav" class:hidden={!$current} aria-label="Fav"><IconHeart></IconHeart></button>
</div>
<Controls></Controls>
</div>
<script>
import { get } from 'svelte/store'
import Controls from '/components/Controls.svelte'
import IconReduce from '/components/icons/player/Reduce.svelte'
import IconHeart from '/components/icons/Heart.svelte'
import YoutubePlayer from '/components/YoutubePlayer'

3
src/components/icons/Menu.svelte Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="5" viewBox="0 0 25 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M2.5 5C3.88071 5 5 3.88071 5 2.5C5 1.11929 3.88071 0 2.5 0C1.11929 0 0 1.11929 0 2.5C0 3.88071 1.11929 5 2.5 5ZM12.5 5C13.8807 5 15 3.88071 15 2.5C15 1.11929 13.8807 0 12.5 0C11.1193 0 10 1.11929 10 2.5C10 3.88071 11.1193 5 12.5 5ZM25 2.5C25 3.88071 23.8807 5 22.5 5C21.1193 5 20 3.88071 20 2.5C20 1.11929 21.1193 0 22.5 0C23.8807 0 25 1.11929 25 2.5Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 525 B

3
src/components/icons/controls/Next.svelte Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M15.8707 0.964233C14.7661 0.964233 13.8707 1.85966 13.8707 2.96423V8.02854L3.68216 1.94812C2.34904 1.15252 0.657227 2.11305 0.657227 3.66553V16.3345C0.657227 17.887 2.34904 18.8475 3.68217 18.0519L13.8707 11.9715V17.0357C13.8707 18.1402 14.7661 19.0357 15.8707 19.0357H15.9999C17.1044 19.0357 17.9999 18.1402 17.9999 17.0357V2.96423C17.9999 1.85966 17.1044 0.964233 15.9999 0.964233H15.8707Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 571 B

17
src/components/icons/controls/PlayPause.svelte Normal file
View File

@ -0,0 +1,17 @@
<button class="controls__playpause" class:disabled={ $current === null || $loading} on:click>
<svg width="47" height="46" viewBox="0 0 47 46" fill="none" xmlns="http://www.w3.org/2000/svg">
{#if !$paused}
<path class="pause" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M23.503 46C36.2738 46 46.6266 35.7025 46.6266 23C46.6266 10.2975 36.2738 0 23.503 0C10.7322 0 0.379395 10.2975 0.379395 23C0.379395 35.7025 10.7322 46 23.503 46ZM17 16C17 14.8954 17.8954 14 19 14C20.1046 14 21 14.8954 21 16V30C21 31.1046 20.1046 32 19 32C17.8954 32 17 31.1046 17 30V16ZM29 14C27.8954 14 27 14.8954 27 16V30C27 31.1046 27.8954 32 29 32C30.1046 32 31 31.1046 31 30V16C31 14.8954 30.1046 14 29 14Z"/>
{:else }
<path class="play" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M46.6232 23C46.6232 35.7025 36.2704 46 23.4996 46C10.7288 46 0.375977 35.7025 0.375977 23C0.375977 10.2975 10.7288 0 23.4996 0C36.2704 0 46.6232 10.2975 46.6232 23ZM32.4949 23.844C33.1131 23.4512 33.1131 22.5489 32.4949 22.156L20.4942 14.5299C19.8285 14.1068 18.9579 14.5851 18.9579 15.3739V30.6261C18.9579 31.4149 19.8285 31.8932 20.4942 31.4701L32.4949 23.844Z"/>
{/if}
</svg>
</button>
<script>
import {
paused,
current,
loading
} from '/store.js'
</script>

3
src/components/icons/controls/Prev.svelte Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M2.12852 0.964233C3.23308 0.964233 4.12852 1.85966 4.12852 2.96423V8.02874L14.3173 1.94812C15.6505 1.15252 17.3423 2.11305 17.3423 3.66553V16.3345C17.3423 17.887 15.6505 18.8475 14.3173 18.0519L4.12852 11.9713V17.0357C4.12852 18.1402 3.23308 19.0357 2.12851 19.0357H1.9993C0.894732 19.0357 -0.00069809 18.1402 -0.00069809 17.0357V2.96423C-0.00069809 1.85966 0.894733 0.964233 1.9993 0.964233H2.12852Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 580 B