[ui] add zoom to audioviewer
This commit is contained in:
parent
544b79d274
commit
9bbeeec75c
1 changed files with 34 additions and 0 deletions
|
@ -1,6 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { throttle } from "lodash";
|
||||
import { onMount } from "svelte";
|
||||
import type WaveSurfer from "wavesurfer.js";
|
||||
import Icon from "../../utils/Icon.svelte";
|
||||
import Spinner from "../../utils/Spinner.svelte";
|
||||
|
||||
export let address: string;
|
||||
|
@ -13,6 +15,12 @@
|
|||
let wavesurfer: WaveSurfer;
|
||||
$: if (wavesurfer) wavesurfer.drawBuffer() && detail;
|
||||
|
||||
let zoom: number = 1;
|
||||
const setZoom = throttle((level: number) => {
|
||||
wavesurfer.zoom(level);
|
||||
}, 250);
|
||||
$: if (zoom && wavesurfer) setZoom(zoom);
|
||||
|
||||
onMount(async () => {
|
||||
const WaveSurfer = await import("wavesurfer.js");
|
||||
const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
|
||||
|
@ -49,6 +57,15 @@
|
|||
{#if !loaded}
|
||||
<Spinner centered />
|
||||
{/if}
|
||||
{#if loaded}
|
||||
<header>
|
||||
<div class="zoom">
|
||||
<Icon name="zoom-out" />
|
||||
<input type="range" min="1" max="50" bind:value={zoom} />
|
||||
<Icon name="zoom-in" />
|
||||
</div>
|
||||
</header>
|
||||
{/if}
|
||||
<div class="wavesurfer-timeline" bind:this={timelineEl} />
|
||||
<div class="wavesurfer" bind:this={containerEl} />
|
||||
</div>
|
||||
|
@ -57,4 +74,21 @@
|
|||
.audio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 1em;
|
||||
& > * {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.zoom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input {
|
||||
flex-grow: 1;
|
||||
margin: 0 .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue