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

add custom volume control

This commit is contained in:
Tixie 2020-02-16 22:28:17 +01:00
parent 48862b7083
commit 48a77ca043
5 changed files with 91 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/img/volume-triangle.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="17" viewBox="0 0 40 17">
<path fill="#C4C4C4" d="M40,15.201328 L40,1.80052901 C40,0.518480567 38.6821237,-0.351956175 37.4843106,0.138924799 L0.562431379,15.2698574 C-0.356904919,15.6466792 -0.0844775345,17 0.910700368,17 L38.1808595,17 C39.1855708,17 40,16.1947345 40,15.201328 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

66
src/assets/scss/5-modules/volume.scss Normal file
View File

@ -0,0 +1,66 @@
/* ----------------------------------------------------------- */
/* == volume control volume */
/* ----------------------------------------------------------- */
.volume {
position: relative;
margin: 1rem 0;
}
.volume__bg,
.volume__progress {
position: absolute;
top: 0;
left: 0;
margin: .2rem .1rem;
width: calc(100% - .2rem);
height: calc(100% - .4rem);
clip-path: url(#volume);
}
.volume__bg {
background: rgba(99, 87, 118, .4);
}
.volume__progress {
background-color: $color-primary;
}
.volume__input {
position: relative;
z-index: 1;
appearance: none;
padding: 0;
width: 4rem;
border: none;
border-radius: .1rem;
background: none;
box-shadow: none;
}
.volume__input::range-track {
width: 100%;
height: 17px;
border-radius: 0;
background: transparent;
box-shadow: 0px 0px 0px #000, 0px 0px 0px #0d0d0d;
cursor: pointer;
animate: .2s;
clip-path: url(#volume);
}
.volume__input::range-thumb {
position: relative;
appearance: none;
width: 20px;
width: 6px;
height: 19px;
border: 0px solid #000;
border-radius: 2px;
background: #fff;
box-shadow: -1px 2px 4px rgba(99, 87, 118, .6);
cursor: pointer;
transform: translateY(-.1rem);
}

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

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

16
src/components/Controls.svelte
View File

@ -1,18 +1,6 @@
<div class="controls">
<div class="controls-group">
<button on:click={() => $muted = !$muted}>
{#if $muted}
🔇
{:else if $volume < 20}
🔈
{:else if $volume < 80}
🔉
{:else }
🔊
{/if}
</button>
<input type="range" min="0" max="100" bind:value={$volume}>
<Volume></Volume>
</div>
<div class="controls-group">
@ -43,7 +31,6 @@
import {
paused,
muted,
volume,
current,
queue,
canPrevious,
@ -52,6 +39,7 @@
selectNext,
loading
} from '/store.js'
import Volume from '/components/Volume'
</script>
<style>

19
src/components/Volume.svelte Normal file
View File

@ -0,0 +1,19 @@
<div class="volume">
<div class="volume__bg"></div>
<div class="volume__progress" style="width: {volumePercent}%;"></div>
<input class="volume__input" type="range" min="0" max="100" step="20" bind:value={$volume}>
</div>
<!-- for mask -->
<svg width="0" height="0">
<clipPath id="volume">
<path fill="#C4C4C4" d="M40,15.201328 L40,1.80052901 C40,0.518480567 38.6821237,-0.351956175 37.4843106,0.138924799 L0.562431379,15.2698574 C-0.356904919,15.6466792 -0.0844775345,17 0.910700368,17 L38.1808595,17 C39.1855708,17 40,16.1947345 40,15.201328 Z"/>
</clipPath>
</svg>
<script>
import { volume } from '/store.js'
// to fix visual glitch
$: volumePercent = $volume ? $volume -2 : 0
</script>