include libopenmpt tracker to foundkey

This commit is contained in:
Puniko 2022-12-26 15:19:28 +01:00
parent c2437c696a
commit 0cc1ea8c3e
6 changed files with 368 additions and 1 deletions

View file

@ -36,6 +36,7 @@ html
link(rel='prefetch' href=config.images.error) link(rel='prefetch' href=config.images.error)
link(rel='stylesheet' href='/assets/fontawesome/css/all.css') link(rel='stylesheet' href='/assets/fontawesome/css/all.css')
link(rel='modulepreload' href=`/assets/${clientEntry.file}`) link(rel='modulepreload' href=`/assets/${clientEntry.file}`)
script(src='/client-assets/libopenmpt.js')
each href in clientEntry.css each href in clientEntry.css
link(rel='preload' href=`/assets/${href}` as='style') link(rel='preload' href=`/assets/${href}` as='style')
@ -63,6 +64,7 @@ html
script. script.
var VERSION = "#{version}"; var VERSION = "#{version}";
var CLIENT_ENTRY = "#{clientEntry.file}"; var CLIENT_ENTRY = "#{clientEntry.file}";
window.libopenmpt = window.Module;
body body
noscript: p noscript: p

File diff suppressed because one or more lines are too long

View file

@ -6,6 +6,7 @@
<template v-for="media in mediaList.filter(media => previewable(media))"> <template v-for="media in mediaList.filter(media => previewable(media))">
<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/> <XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/> <XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
<XModPlayer v-else-if="isModule(media)" :key="media.id" :module="media"/>
</template> </template>
</div> </div>
</div> </div>
@ -21,7 +22,8 @@ import 'photoswipe/style.css';
import XBanner from './media-banner.vue'; import XBanner from './media-banner.vue';
import XImage from './media-image.vue'; import XImage from './media-image.vue';
import XVideo from './media-video.vue'; import XVideo from './media-video.vue';
import { FILE_TYPE_BROWSERSAFE } from '@/const'; import XModPlayer from './mod-player.vue';
import { FILE_TYPE_BROWSERSAFE, FILE_EXT_TRACKER_MODULES } from '@/const';
const props = defineProps<{ const props = defineProps<{
mediaList: foundkey.entities.DriveFile[]; mediaList: foundkey.entities.DriveFile[];
@ -123,8 +125,16 @@ onMounted(() => {
const previewable = (file: foundkey.entities.DriveFile): boolean => { const previewable = (file: foundkey.entities.DriveFile): boolean => {
if (file.type === 'image/svg+xml') return true; // svgwebpublic/thumbnailpngtrue if (file.type === 'image/svg+xml') return true; // svgwebpublic/thumbnailpngtrue
// FILE_TYPE_BROWSERSAFE // FILE_TYPE_BROWSERSAFE
if (isModule(file)) return true;
return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type); return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
}; };
const isModule = (file: foundkey.entities.DriveFile): boolean => {
return FILE_EXT_TRACKER_MODULES.filter((ext) => {
return file.name.toLowerCase().endsWith("." + ext);
}).length > 0;
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View file

@ -0,0 +1,315 @@
<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>

View file

@ -46,6 +46,44 @@ export const FILE_TYPE_BROWSERSAFE = [
'audio/x-flac', 'audio/x-flac',
'audio/vnd.wave', 'audio/vnd.wave',
]; ];
export const FILE_EXT_TRACKER_MODULES = [
'mod',
's3m',
'xm',
'it',
'mptm',
'stm',
'nst',
'm15',
'stk',
'wow',
'ult',
'669',
'mtm',
'med',
'far',
'mdl',
'ams',
'dsm',
'amf',
'okt',
'dmf',
'ptm',
'psm',
'mt2',
'dbm',
'digi',
'imf',
'j2b',
'gdm',
'umx',
'plm',
'mo3',
'xpk',
'ppm',
'mmcmp'
];
/* /*
https://github.com/sindresorhus/file-type/blob/main/supported.js https://github.com/sindresorhus/file-type/blob/main/supported.js
https://github.com/sindresorhus/file-type/blob/main/core.js https://github.com/sindresorhus/file-type/blob/main/core.js

View file

@ -109,6 +109,7 @@ ChiptuneJsPlayer.prototype.load = function (input) {
}; };
ChiptuneJsPlayer.prototype.play = function (buffer: ArrayBuffer) { ChiptuneJsPlayer.prototype.play = function (buffer: ArrayBuffer) {
this.unlock();
this.stop(); this.stop();
const processNode = this.createLibopenmptNode(buffer, this.buffer); const processNode = this.createLibopenmptNode(buffer, this.buffer);
if (processNode === null) { if (processNode === null) {