FoundKeyGang/FoundKey
FoundKeyGang
/
FoundKey
7
19
Fork 22
Code Issues 37 Pull Requests 4 Releases Activity

make module seekable
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details

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