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

retab
Some checks failed
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

Browse source
This commit is contained in:
Puniko 2022-12-26 15:47:10 +01:00
parent 0cc1ea8c3e
commit 4234dfbdbc
5 changed files with 287 additions and 284 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -11,6 +11,9 @@
# nano # nano
.swp .swp
# vimlocal
.vimlocal
# Node.js # Node.js
node_modules node_modules
report.*.json report.*.json

10
packages/client/src/components/media-list.vue
View file

@ -6,7 +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"/> <XModPlayer v-else-if="isModule(media)" :key="media.id" :module="media"/>
</template> </template>
</div> </div>
</div> </div>
@ -125,14 +125,14 @@ onMounted(() => {
const previewable = (file: foundkey.entities.DriveFile): boolean => { const previewable = (file: foundkey.entities.DriveFile): boolean => {
if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切 // FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
if (isModule(file)) return true; 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 => { const isModule = (file: foundkey.entities.DriveFile): boolean => {
return FILE_EXT_TRACKER_MODULES.filter((ext) => { return FILE_EXT_TRACKER_MODULES.filter((ext) => {
return file.name.toLowerCase().endsWith("." + ext); return file.name.toLowerCase().endsWith("." + ext);
}).length > 0; }).length > 0;
}; };
</script> </script>

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

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

70
packages/client/src/const.ts
View file

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

2
packages/client/src/scripts/chiptune2.ts
View file

@ -109,7 +109,7 @@ ChiptuneJsPlayer.prototype.load = function (input) {
}; };
ChiptuneJsPlayer.prototype.play = function (buffer: ArrayBuffer) { ChiptuneJsPlayer.prototype.play = function (buffer: ArrayBuffer) {
this.unlock(); 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) {