artie/artie.moe
1
0
Fork 0
mirror of https://github.com/artiemis/artie.moe.git synced 2026-02-14 09:01:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

mobile player placement

Browse Source
This commit is contained in:
artie 2024-11-21 22:01:41 +01:00
parent 333e226ba4
commit aa2ad05dfd
1 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Model.svelte
View File

@ -77,7 +77,6 @@
} }
function handlePressDown() { function handlePressDown() {
console.log("handlePressDown");
model.motion("Tap"); model.motion("Tap");
holdTimeout = window.setTimeout(() => { holdTimeout = window.setTimeout(() => {
@ -88,7 +87,6 @@
} }
function handlePressUp() { function handlePressUp() {
console.log("handlePressUp");
clearTimeout(holdTimeout); clearTimeout(holdTimeout);
holdTimeout = undefined; holdTimeout = undefined;
} }
@ -168,24 +166,40 @@
}); });
</script> </script>
{#snippet player(mobile = false)}
{#snippet label()}
{#if volumeLabel}
<div transition:fade={{ duration: 100 }} class="text-purple-300">
{volumeLabel}
</div>
{/if}
{/snippet}
{#if audio}
{#if !mobile}
{@render label()}
{/if}
<input
bind:value={volume}
oninput={showVolumeLabel}
transition:fade={{ duration: 100 }}
type="range"
class="lg:w-48 lg:h-2 w-32 h-2 rounded-xl appearance-none bg-purple-300 accent-purple-400 cursor-pointer"
/>
{#if mobile}
{@render label()}
{/if}
{/if}
{/snippet}
<svelte:window onkeydown={handleKeyDown} /> <svelte:window onkeydown={handleKeyDown} />
<div class="lg:hidden fixed top-4 right-6 z-10">
{@render player(true)}
</div>
<div class="grid fixed left-0 bottom-0 z-10 {gap}"> <div class="grid fixed left-0 bottom-0 z-10 {gap}">
<div class="mx-auto"> <div class="mx-auto hidden lg:block">
{#if audio} {@render player()}
{#if volumeLabel}
<div transition:fade={{ duration: 100 }} class="text-purple-300">
{volumeLabel}
</div>
{/if}
<input
bind:value={volume}
oninput={showVolumeLabel}
transition:fade={{ duration: 100 }}
type="range"
class="lg:w-48 lg:h-2 w-32 h-2 rounded-xl appearance-none bg-purple-300 accent-purple-400 cursor-pointer"
/>
{/if}
</div> </div>
<canvas <canvas
bind:this={canvas} bind:this={canvas}