FoundKey/packages/client/src/components/mod-player.vue

316 lines
7.7 KiB
Vue

<template>
<div class="mod-player-disabled" v-if="hide" @click="hide = false">
<div>
<b><i class="fas fa-exlamation-triangle"></i> {{ $ts.sensitive }}</b>
<span>{{ $ts.clickToShow }}</span>
</div>
</div>
<div class="mod-player-enabled" v-else>
<div class="pattern-display">
<canvas class="pattern-canvas" ref="displayCanvas"></canvas>
</div>
<div class="controls">
<button class="play" title="play" accesskey="P" @click="playPause()">
<i class="fas fa-play" v-if="!playing"></i>
<i class="fas fa-pause" v-if="playing"></i>
</button>
<button class="stop" title="stop" accesskey="X" @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"/>
<a class="download" title="download" :href="module.url">
<i class="fas fa-download"></i>
</a>
</div>
<i class="fas fa-eye-slash" @click="hide = true"></i>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import * as foundkey from 'foundkey-js';
import { defaultStore } from '@/store';
import { ChiptuneJsPlayer, ChiptuneJsConfig } from '@/scripts/chiptune2';
const props = defineProps<{
module: foundkey.entities.DriveFile
}>();
let hide = ref((defaultStore.state.nsfw === 'force') ? true : props.module.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
let playing = ref(false);
let displayCanvas = ref<HTMLCanvasElement>(null);
let progress = ref<HTMLProgressElement>(null);
const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig(1)));
const rowBuffer = 24;
let buffer = null;
player.value.load(props.module.url).then((result) => {
buffer = result;
try {
player.value.play(buffer);
display();
} catch (e) {
console.warn(e);
}
player.value.stop();
}).catch((error) => {
console.error(error);
});
function playPause() {
player.value.addHandler('onRowChange', () => {
progress.value.max = player.value.duration();
progress.value.value = player.value.position() % player.value.duration();
display();
});
if (player.value.currentPlayingNode === null) {
player.value.play(buffer);
playing.value = true;
} else {
player.value.togglePause();
playing.value = !player.value.currentPlayingNode.paused;
}
}
function stop() {
player.value.stop();
playing.value = false;
try {
player.value.play(buffer);
display();
} catch (e) {
console.warn(e);
}
player.value.stop();
progress.value.value = 0;
player.value.handlers = [];
}
function display() {
if (!displayCanvas.value) {
stop();
return;
}
const canvas = displayCanvas.value;
const pattern = player.value.getPattern();
const row = player.value.getRow();
let nbChannels = 0;
if (player.value.currentPlayingNode) {
nbChannels = player.value.currentPlayingNode.nbChannels;
}
if (canvas.width !== 12 + 84 * nbChannels + 2) {
canvas.width = 12 + 84 * nbChannels + 2;
canvas.height = 12 * rowBuffer;
}
const nbRows = player.value.getPatternNumRows(pattern);
const ctx = canvas.getContext('2d');
ctx.font = '10px monospace';
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'gray';
for (let rowOffset = 0; rowOffset < rowBuffer; rowOffset++) {
const rowToDraw = row - rowBuffer / 2 + rowOffset;
if (rowToDraw >= 0 && rowToDraw < nbRows) {
let rowText = parseInt(rowToDraw).toString(16);
if (rowText.length === 1) {
rowText = '0' + rowText;
}
ctx.fillStyle = 'gray';
if (rowToDraw % 4 === 0) {
ctx.fillStyle = 'yellow';
}
if (rowToDraw === row) {
ctx.fillStyle = 'white';
}
ctx.fillText(rowText, 0, 10 + rowOffset * 12);
ctx.fillStyle = 'gray';
if (rowToDraw === row) {
ctx.fillStyle = 'white';
}
for (let channel = 0; channel < nbChannels; channel++) {
const part = player.value.getPatternRowChannel(pattern, rowToDraw, channel);
ctx.fillText("|" + part, 12 + 84 * channel, 10 + rowOffset * 12);
}
}
}
}
</script>
<style lang="scss" scoped>
.mod-player-enabled {
position: relative;
display: flex;
flex-direction: column;
> i {
display: block;
position: absolute;
border-radius: 6px;
background-color: var(--fg);
color: var(--accentLighten);
font-size: 14px;
opacity: .5;
padding: 3px 6px;
text-align: center;
cursor: pointer;
top: 12px;
right: 12px;
}
> .pattern-display {
width: 100%;
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
background-color: black;
text-align: center;
.pattern-canvas {
background-color: black;
height: 100%;
}
}
> .controls {
display: flex;
width: 100%;
background-color: var(--bg);
> * {
padding: 4px 8px;
}
> button, a {
border: none;
background-color: transparent;
color: var(--accent);
&:hover {
background-color: var(--fg);
}
}
> input[type=range] {
height: 21px;
-webkit-appearance: none;
width: 90px;
padding: 0;
margin: 4px 8px;
&:focus {
outline: none;
&::-webkit-slider-runnable-track {
background: var(--bg);
}
&::-ms-fill-lower, &::-ms-fill-upper {
background: var(--bg);
}
}
&::-webkit-slider-runnable-track {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 0;
animate: 0.2s;
background: var(--bg);
border: 1px solid var(--fg);
}
&::-webkit-slider-thumb {
border: none;
height: 100%;
width: 14px;
border-radius: 0;
background: var(--accent);
cursor: pointer;
-webkit-appearance: none;
margin-top: -0.5px;
}
&::-moz-range-track {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 0;
animate: 0.2s;
background: var(--bg);
border: 1px solid var(--fg);
}
&::-moz-range-thumb {
border: none;
height: 100%;
border-radius: 0;
width: 14px;
background: var(--accent);
cursoer: pointer;
}
&::-ms-track {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 0;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
&::-ms-fill-lower, &::-ms-fill-upper {
background: var(--bg);
border: 1px solid var(--fg);
border-radius: 0;
}
&::-ms-thumb {
margin-top: 1px;
border: none;
height: 100%;
width: 14px;
border-radius: 0;
background: var(--accent);
cursor: pointer;
}
}
> progress {
padding: unset;
margin: 4px 8px;
flex-grow: 1;
background-color: var(--bg);
&::-moz-progress-bar, &::-webkit-progress-value {
background-color: var(--accent);
}
}
}
}
.mod-player-disabled {
display: flex;
justify-content: center;
align-items: center;
background: #111;
color: #fff;
> div {
display: table-cell;
text-align: center;
font-size: 12px;
> b {
display: block;
}
}
}
</style>