2020-01-10 03:02:46 +01:00
|
|
|
<div class="controls">
|
2020-02-16 23:39:41 +01:00
|
|
|
<div class="controls__volume">
|
2020-02-16 22:28:17 +01:00
|
|
|
<Volume></Volume>
|
2020-01-10 03:02:46 +01:00
|
|
|
</div>
|
|
|
|
|
2020-02-16 23:39:41 +01:00
|
|
|
<div class="controls__controls">
|
|
|
|
<button
|
|
|
|
class="controls__prevnext"
|
2020-02-17 21:31:35 +01:00
|
|
|
class:disabled={!$canPrevious}
|
|
|
|
disabled={!$canPrevious}
|
|
|
|
on:click={() => selectPrevious()}
|
2020-02-16 23:39:41 +01:00
|
|
|
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>
|
2020-01-10 03:02:46 +01:00
|
|
|
</div>
|
|
|
|
|
2020-02-16 23:39:41 +01:00
|
|
|
<div class="controls__menu">
|
|
|
|
<button class="controls__menuBtn" aria-label="track menu"><IconMenu></IconMenu></button>
|
2020-01-10 03:02:46 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
2020-01-16 20:10:40 +01:00
|
|
|
import {
|
|
|
|
paused,
|
|
|
|
canPrevious,
|
|
|
|
canNext,
|
|
|
|
selectPrevious,
|
|
|
|
selectNext,
|
|
|
|
loading
|
|
|
|
} from '/store.js'
|
2020-02-16 22:28:17 +01:00
|
|
|
import Volume from '/components/Volume'
|
2020-02-16 23:39:41 +01:00
|
|
|
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'
|
2020-01-10 03:02:46 +01:00
|
|
|
</script>
|