[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">
|
<script lang="ts">
|
||||||
|
import { throttle } from "lodash";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import type WaveSurfer from "wavesurfer.js";
|
import type WaveSurfer from "wavesurfer.js";
|
||||||
|
import Icon from "../../utils/Icon.svelte";
|
||||||
import Spinner from "../../utils/Spinner.svelte";
|
import Spinner from "../../utils/Spinner.svelte";
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
|
@ -13,6 +15,12 @@
|
||||||
let wavesurfer: WaveSurfer;
|
let wavesurfer: WaveSurfer;
|
||||||
$: if (wavesurfer) wavesurfer.drawBuffer() && detail;
|
$: 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 () => {
|
onMount(async () => {
|
||||||
const WaveSurfer = await import("wavesurfer.js");
|
const WaveSurfer = await import("wavesurfer.js");
|
||||||
const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
|
const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
|
||||||
|
@ -49,6 +57,15 @@
|
||||||
{#if !loaded}
|
{#if !loaded}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
{/if}
|
{/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-timeline" bind:this={timelineEl} />
|
||||||
<div class="wavesurfer" bind:this={containerEl} />
|
<div class="wavesurfer" bind:this={containerEl} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -57,4 +74,21 @@
|
||||||
.audio {
|
.audio {
|
||||||
width: 100%;
|
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>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue