octo/mastoradio-fork
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add custom volume control

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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>