heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

enhance (frontend): hide module player pattern display

This commit is contained in:
Vavency 2023-12-30 16:09:46 +02:00
parent 1cf52ca894
commit 4856b019ce
1 changed files with 56 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/frontend/src/components/MkModPlayer.vue
View File

@ -7,7 +7,11 @@
</div> </div>
<div v-else class="mod-player-enabled"> <div v-else class="mod-player-enabled">
<div class="pattern-display"> <div class="pattern-display" @click="togglePattern()">
<div class="pattern-hide" v-if="patternHide">
<b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b>
<span>{{ i18n.ts.clickToShow }}</span>
</div>
<canvas ref="displayCanvas" class="pattern-canvas"></canvas> <canvas ref="displayCanvas" class="pattern-canvas"></canvas>
</div> </div>
<div class="controls"> <div class="controls">
@ -74,6 +78,8 @@ const props = defineProps<{
const isSensitive = computed(() => { return props.module.isSensitive; }); const isSensitive = computed(() => { return props.module.isSensitive; });
const url = computed(() => { return props.module.url; }); const url = computed(() => { return props.module.url; });
let hide = ref((defaultStore.state.nsfw === 'force') ? true : isSensitive.value && (defaultStore.state.nsfw !== 'ignore')); let hide = ref((defaultStore.state.nsfw === 'force') ? true : isSensitive.value && (defaultStore.state.nsfw !== 'ignore'));
let patternHide = ref(false);
let firstFrame = ref(true);
let playing = ref(false); let playing = ref(false);
let displayCanvas = ref<HTMLCanvasElement>(); let displayCanvas = ref<HTMLCanvasElement>();
let progress = ref<HTMLProgressElement>(); let progress = ref<HTMLProgressElement>();
@ -156,15 +162,42 @@ function performSeek() {
function toggleVisible() { function toggleVisible() {
hide.value = !hide.value; hide.value = !hide.value;
nextTick(() => { stop(hide.value); }); if (!hide.value && patternHide.value) {
firstFrame.value = true;
patternHide.value = false;
}
nextTick(() => {
stop(hide.value);
});
} }
function togglePattern() {
patternHide.value = !patternHide.value;
if (!patternHide.value) {
if (player.value.getRow() == 0) {
try {
player.value.play(buffer);
display();
} catch (e) {
console.warn(e);
}
player.value.stop();
}
}
}
function display() { function display() {
if (!displayCanvas.value) { if (!displayCanvas.value) {
stop(); stop();
return; return;
} }
if (patternHide.value) { return; }
if (firstFrame.value) {
firstFrame.value = false;
patternHide.value = true;
}
const canvas = displayCanvas.value; const canvas = displayCanvas.value;
const pattern = player.value.getPattern(); const pattern = player.value.getPattern();
@ -211,7 +244,7 @@ function display() {
const instr = part.substring(4, 6); const instr = part.substring(4, 6);
ctx.fillStyle = colours.instr[active]; ctx.fillStyle = colours.instr[active];
ctx.fillText(instr, baseOffset + CHAR_WIDTH * 5, baseRowOffset); ctx.fillText(instr, baseOffset + CHAR_WIDTH * 5, baseRowOffset);
const volume = part.substring(6, 9); const volume = part.substring(6, 9);
ctx.fillStyle = colours.volume[active]; ctx.fillStyle = colours.volume[active];
ctx.fillText(volume, baseOffset + CHAR_WIDTH * 7, baseRowOffset); ctx.fillText(volume, baseOffset + CHAR_WIDTH * 7, baseRowOffset);
@ -271,12 +304,32 @@ function display() {
background-color: black; background-color: black;
height: 100%; height: 100%;
} }
.pattern-hide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(64, 64, 64, 0.3);
backdrop-filter: blur(2em);
color: #fff;
font-size: 12px;
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
> span {
display: block;
}
}
} }
> .controls { > .controls {
display: flex; display: flex;
width: 100%; width: 100%;
background-color: var(--bg); background-color: var(--bg);
z-index: 1;
> * { > * {
padding: 4px 8px; padding: 4px 8px;