monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

merge: enhance module player hide pattern when not needed (#282)

Browse source
This commit is contained in:
Marie 2023-12-31 06:42:13 +01:00
commit 97dea59e49
1 changed files with 54 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
packages/frontend/src/components/MkModPlayer.vue
View file

@ -7,7 +7,11 @@
</div>
<div v-else class="mod-player-enabled">
<div class="pattern-display">
<div class="pattern-display" @click="togglePattern()">
<div v-if="patternHide" class="pattern-hide">
<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>
</div>
<div class="controls">
@ -74,6 +78,8 @@ const props = defineProps<{
const isSensitive = computed(() => { return props.module.isSensitive; });
const url = computed(() => { return props.module.url; });
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 displayCanvas = ref<HTMLCanvasElement>();
let progress = ref<HTMLProgressElement>();
@ -156,15 +162,41 @@ function performSeek() {
function toggleVisible() {
hide.value = !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 (err) {
console.warn(err);
}
player.value.stop();
}
}
}
function display() {
if (!displayCanvas.value) {
stop();
return;
}
if (patternHide.value) return;
if (firstFrame.value) {
firstFrame.value = false;
patternHide.value = true;
}
const canvas = displayCanvas.value;
const pattern = player.value.getPattern();
@ -211,7 +243,7 @@ function display() {
const instr = part.substring(4, 6);
ctx.fillStyle = colours.instr[active];
ctx.fillText(instr, baseOffset + CHAR_WIDTH * 5, baseRowOffset);
const volume = part.substring(6, 9);
ctx.fillStyle = colours.volume[active];
ctx.fillText(volume, baseOffset + CHAR_WIDTH * 7, baseRowOffset);
@ -271,12 +303,32 @@ function display() {
background-color: black;
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 {
display: flex;
width: 100%;
background-color: var(--bg);
z-index: 1;
> * {
padding: 4px 8px;