puniko/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

make module seekable

Browse source
This commit is contained in:
Puniko 2022-12-29 00:57:47 +01:00
parent c1762f27ae
commit c39e1671b2
1 changed files with 30 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
packages/client/src/components/mod-player.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mod-player-disabled" v-if="hide" @click="hide = false"> <div class="mod-player-disabled" v-if="hide" @click="toggleVisible()">
<div> <div>
<b><i class="fas fa-exlamation-triangle"></i> {{ i18n.ts.sensitive }}</b> <b><i class="fas fa-exlamation-triangle"></i> {{ i18n.ts.sensitive }}</b>
<span>{{ i18n.ts.clickToShow }}</span> <span>{{ i18n.ts.clickToShow }}</span>
@ -18,13 +18,13 @@
<button class="stop" @click="stop()"> <button class="stop" @click="stop()">
<i class="fas fa-stop"></i> <i class="fas fa-stop"></i>
</button> </button>
<progress min="0" max="100" value="0" ref="progress"></progress> <input class="progress" type="range" min="0" max="1" v-model="position" step="0.1" ref="progress" @mousedown="initSeek()" @mouseup="performSeek()"/>
<input type="range" min="0" max="1" v-model="player.context.gain.value" step="0.1" ref="volume" title="volume"/> <input type="range" min="0" max="1" v-model="player.context.gain.value" step="0.1"/>
<a class="download" :title="i18n.ts.download" :href="module.url" target="_blank"> <a class="download" :title="i18n.ts.download" :href="module.url" target="_blank">
<i class="fas fa-download"></i> <i class="fas fa-download"></i>
</a> </a>
</div> </div>
<i class="fas fa-eye-slash" @click="hide = true"></i> <i class="fas fa-eye-slash" @click="toggleVisible()"></i>
</div> </div>
</template> </template>
@ -75,18 +75,20 @@ let hide = ref((defaultStore.state.nsfw === 'force') ? true : props.module.isSen
let playing = ref(false); let playing = ref(false);
let displayCanvas = ref<HTMLCanvasElement>(null); let displayCanvas = ref<HTMLCanvasElement>(null);
let progress = ref<HTMLProgressElement>(null); let progress = ref<HTMLProgressElement>(null);
let position = ref(0);
const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig())); const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
const rowBuffer = 24; const rowBuffer = 24;
let buffer = null; let buffer = null;
let isSeeking = false;
player.value.load(props.module.url).then((result) => { player.value.load(props.module.url).then((result) => {
buffer = result; buffer = result;
try { try {
player.value.play(buffer); player.value.play(buffer);
display(); display();
} catch (e) { } catch (e) {
console.warn(e); console.warn(e);
} }
player.value.stop(); player.value.stop();
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
@ -95,7 +97,9 @@ player.value.load(props.module.url).then((result) => {
function playPause() { function playPause() {
player.value.addHandler('onRowChange', () => { player.value.addHandler('onRowChange', () => {
progress.value.max = player.value.duration(); progress.value.max = player.value.duration();
progress.value.value = player.value.position() % player.value.duration(); if (!isSeeking) {
position.value = player.value.position() % player.value.duration();
}
display(); display();
}); });
@ -105,6 +109,7 @@ function playPause() {
if (player.value.currentPlayingNode === null) { if (player.value.currentPlayingNode === null) {
player.value.play(buffer); player.value.play(buffer);
player.value.seek(position.value);
playing.value = true; playing.value = true;
} else { } else {
player.value.togglePause(); player.value.togglePause();
@ -122,10 +127,24 @@ function stop() {
console.warn(e); console.warn(e);
} }
player.value.stop(); player.value.stop();
progress.value.value = 0; position.value = 0;
player.value.handlers = []; player.value.handlers = [];
} }
function initSeek() {
isSeeking = true;
}
function performSeek() {
player.value.seek(position.value);
display();
isSeeking = false;
}
function toggleVisible() {
hide.value = !hide.value;
}
function display() { function display() {
if (!displayCanvas.value) { if (!displayCanvas.value) {
stop(); stop();
@ -336,17 +355,10 @@ function display() {
background: var(--accent); background: var(--accent);
cursor: pointer; cursor: pointer;
} }
}
> progress { &.progress {
padding: unset; flex-grow: 1;
margin: 4px 8px; min-width: 0;
flex-grow: 1;
min-width: 0;
background-color: var(--bg);
&::-moz-progress-bar, &::-webkit-progress-value {
background-color: var(--accent);
} }
} }
} }