merge: enhance module player hide pattern when not needed (#282)
This commit is contained in:
commit
97dea59e49
1 changed files with 54 additions and 2 deletions
|
@ -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 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>
|
<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,41 @@ function performSeek() {
|
||||||
|
|
||||||
function toggleVisible() {
|
function toggleVisible() {
|
||||||
hide.value = !hide.value;
|
hide.value = !hide.value;
|
||||||
|
if (!hide.value && patternHide.value) {
|
||||||
|
firstFrame.value = true;
|
||||||
|
patternHide.value = false;
|
||||||
|
}
|
||||||
nextTick(() => { stop(hide.value); });
|
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() {
|
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 +243,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 +303,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;
|
||||||
|
|
Loading…
Reference in a new issue