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
.swp
# vimlocal
.vimlocal
# Node.js
node_modules
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))">
<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"/>
<XModPlayer v-else-if="isModule(media)" :key="media.id" :module="media"/>
<XModPlayer v-else-if="isModule(media)" :key="media.id" :module="media"/>
</template>
</div>
</div>
@ -125,14 +125,14 @@ onMounted(() => {
const previewable = (file: foundkey.entities.DriveFile): boolean => {
if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
// 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);
};
const isModule = (file: foundkey.entities.DriveFile): boolean => {
return FILE_EXT_TRACKER_MODULES.filter((ext) => {
return file.name.toLowerCase().endsWith("." + ext);
}).length > 0;
return FILE_EXT_TRACKER_MODULES.filter((ext) => {
return file.name.toLowerCase().endsWith("." + ext);
}).length > 0;
};
</script>

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

@ -1,30 +1,30 @@
<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>
<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 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>
@ -35,7 +35,7 @@ import { defaultStore } from '@/store';
import { ChiptuneJsPlayer, ChiptuneJsConfig } from '@/scripts/chiptune2';
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'));
@ -47,269 +47,269 @@ 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();
buffer = result;
try {
player.value.play(buffer);
display();
} catch (e) {
console.warn(e);
console.warn(e);
}
player.value.stop();
player.value.stop();
}).catch((error) => {
console.error(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();
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;
}
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 = [];
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;
}
if (!displayCanvas.value) {
stop();
return;
}
const canvas = displayCanvas.value;
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);
}
}
}
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;
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;
}
> 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%;
}
}
> .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);
> .controls {
display: flex;
width: 100%;
background-color: var(--bg);
> * {
padding: 4px 8px;
}
> * {
padding: 4px 8px;
}
> button, a {
border: none;
background-color: transparent;
color: var(--accent);
&:hover {
background-color: var(--fg);
}
}
> button, a {
border: none;
background-color: transparent;
color: var(--accent);
> input[type=range] {
height: 21px;
-webkit-appearance: none;
width: 90px;
padding: 0;
margin: 4px 8px;
&:hover {
background-color: var(--fg);
}
}
&:focus {
outline: none;
&::-webkit-slider-runnable-track {
background: var(--bg);
}
> input[type=range] {
height: 21px;
-webkit-appearance: none;
width: 90px;
padding: 0;
margin: 4px 8px;
&::-ms-fill-lower, &::-ms-fill-upper {
background: var(--bg);
}
}
&:focus {
outline: none;
&::-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-runnable-track {
background: var(--bg);
}
&::-webkit-slider-thumb {
border: none;
height: 100%;
width: 14px;
border-radius: 0;
background: var(--accent);
cursor: pointer;
-webkit-appearance: none;
margin-top: -0.5px;
}
&::-ms-fill-lower, &::-ms-fill-upper {
background: var(--bg);
}
}
&::-moz-range-track {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 0;
animate: 0.2s;
background: var(--bg);
border: 1px solid var(--fg);
}
&::-webkit-slider-runnable-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;
}
&::-webkit-slider-thumb {
border: none;
height: 100%;
width: 14px;
border-radius: 0;
background: var(--accent);
cursor: pointer;
-webkit-appearance: none;
margin-top: -0.5px;
}
&::-ms-track {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 0;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
&::-moz-range-track {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 0;
animate: 0.2s;
background: var(--bg);
border: 1px solid var(--fg);
}
&::-ms-fill-lower, &::-ms-fill-upper {
background: var(--bg);
border: 1px solid var(--fg);
border-radius: 0;
}
&::-moz-range-thumb {
border: none;
height: 100%;
border-radius: 0;
width: 14px;
background: var(--accent);
cursor: pointer;
}
&::-ms-thumb {
margin-top: 1px;
border: none;
height: 100%;
width: 14px;
border-radius: 0;
background: var(--accent);
cursor: pointer;
}
}
&::-ms-track {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 0;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
> progress {
padding: unset;
margin: 4px 8px;
flex-grow: 1;
background-color: var(--bg);
&::-ms-fill-lower, &::-ms-fill-upper {
background: var(--bg);
border: 1px solid var(--fg);
border-radius: 0;
}
&::-moz-progress-bar, &::-webkit-progress-value {
background-color: var(--accent);
}
}
}
&::-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;
display: flex;
justify-content: center;
align-items: center;
background: #111;
color: #fff;
> div {
display: table-cell;
text-align: center;
font-size: 12px;
> div {
display: table-cell;
text-align: center;
font-size: 12px;
> b {
display: block;
}
}
> b {
display: block;
}
}
}
</style>

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

@ -48,41 +48,41 @@ export const FILE_TYPE_BROWSERSAFE = [
];
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'
'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

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

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