Attempt to make requested changes
This commit is contained in:
parent
ec60a4a4ff
commit
1013db2c99
3 changed files with 69 additions and 151 deletions
|
@ -132,6 +132,7 @@ rememberNoteVisibility: "Remember post visibility settings"
|
||||||
attachCancel: "Remove attachment"
|
attachCancel: "Remove attachment"
|
||||||
markAsSensitive: "Mark as NSFW"
|
markAsSensitive: "Mark as NSFW"
|
||||||
unmarkAsSensitive: "Unmark as NSFW"
|
unmarkAsSensitive: "Unmark as NSFW"
|
||||||
|
clickToShowPatterns: "Click to show module patterns"
|
||||||
enterFileName: "Enter filename"
|
enterFileName: "Enter filename"
|
||||||
mute: "Mute"
|
mute: "Mute"
|
||||||
unmute: "Unmute"
|
unmute: "Unmute"
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
<span class="mod-row-inner">|C-41Cv14XEF</span>
|
<span class="mod-row-inner">|C-41Cv14XEF</span>
|
||||||
</span>
|
</span>
|
||||||
<br />
|
<br />
|
||||||
<p>Click to show module patterns</p>
|
<p>{{ i18n.ts.clickToShowPatterns }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
|
@ -43,24 +43,27 @@
|
||||||
<button class="stop" @click="stop()">
|
<button class="stop" @click="stop()">
|
||||||
<i class="ph-stop ph-fill ph-lg"></i>
|
<i class="ph-stop ph-fill ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
<input
|
<FormRange
|
||||||
class="progress"
|
class="progress"
|
||||||
type="range"
|
:min="0"
|
||||||
min="0"
|
:max="length"
|
||||||
max="1"
|
|
||||||
v-model="position"
|
v-model="position"
|
||||||
step="0.1"
|
:step="0.1"
|
||||||
ref="progress"
|
ref="progress"
|
||||||
|
:background="false"
|
||||||
|
:tooltips="false"
|
||||||
|
@update:modelValue="performSeek()"
|
||||||
@mousedown="initSeek()"
|
@mousedown="initSeek()"
|
||||||
@mouseup="performSeek()"
|
@mouseup="finishSeek()"
|
||||||
/>
|
></FormRange>
|
||||||
<input
|
<FormRange
|
||||||
type="range"
|
:min="0"
|
||||||
min="0"
|
:max="1"
|
||||||
max="1"
|
|
||||||
v-model="player.context.gain.value"
|
v-model="player.context.gain.value"
|
||||||
step="0.1"
|
:step="0.1"
|
||||||
/>
|
:background="false"
|
||||||
|
:tooltips="false"
|
||||||
|
></FormRange>
|
||||||
<a
|
<a
|
||||||
class="download"
|
class="download"
|
||||||
:title="i18n.ts.download"
|
:title="i18n.ts.download"
|
||||||
|
@ -75,8 +78,15 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, shallowRef, nextTick, onDeactivated, onMounted } from "vue";
|
import {
|
||||||
|
ref,
|
||||||
|
shallowRef,
|
||||||
|
nextTick,
|
||||||
|
onDeactivated,
|
||||||
|
onMounted,
|
||||||
|
} from "vue";
|
||||||
import * as calckey from "calckey-js";
|
import * as calckey from "calckey-js";
|
||||||
|
import FormRange from "./form/range.vue";
|
||||||
import { i18n } from "@/i18n";
|
import { i18n } from "@/i18n";
|
||||||
import { defaultStore } from "@/store";
|
import { defaultStore } from "@/store";
|
||||||
import { ChiptuneJsPlayer, ChiptuneJsConfig } from "@/scripts/chiptune2";
|
import { ChiptuneJsPlayer, ChiptuneJsConfig } from "@/scripts/chiptune2";
|
||||||
|
@ -94,7 +104,23 @@ interface ModRow {
|
||||||
}
|
}
|
||||||
|
|
||||||
const available = ref(false);
|
const available = ref(false);
|
||||||
|
const initRow = shallowRef<HTMLSpanElement>();
|
||||||
const player = shallowRef(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
|
const player = shallowRef(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
|
||||||
|
let hide = ref(
|
||||||
|
defaultStore.state.nsfw === "force"
|
||||||
|
? true
|
||||||
|
: props.module.isSensitive && defaultStore.state.nsfw !== "ignore"
|
||||||
|
);
|
||||||
|
let playing = ref(false);
|
||||||
|
let patternShow = ref(false);
|
||||||
|
let modPattern = ref<HTMLDivElement>();
|
||||||
|
let progress = ref<FormRange>();
|
||||||
|
let position = ref(0);
|
||||||
|
let patData = shallowRef([] as ModRow[][]);
|
||||||
|
let currentPattern = ref(0);
|
||||||
|
let nbChannels = ref(0);
|
||||||
|
let length = ref(1);
|
||||||
|
|
||||||
const loaded = !!window.libopenmpt;
|
const loaded = !!window.libopenmpt;
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
@ -131,21 +157,6 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
let hide = ref(
|
|
||||||
defaultStore.state.nsfw === "force"
|
|
||||||
? true
|
|
||||||
: props.module.isSensitive && defaultStore.state.nsfw !== "ignore"
|
|
||||||
);
|
|
||||||
let playing = ref(false);
|
|
||||||
let patternShow = ref(false);
|
|
||||||
const initRow = shallowRef<HTMLSpanElement>();
|
|
||||||
let modPattern = ref<HTMLDivElement>();
|
|
||||||
let progress = ref<HTMLProgressElement>();
|
|
||||||
let position = ref(0);
|
|
||||||
let patData = shallowRef([] as ModRow[][]);
|
|
||||||
let currentPattern = ref(0);
|
|
||||||
let nbChannels = ref(0);
|
|
||||||
|
|
||||||
let currentRow = 0;
|
let currentRow = 0;
|
||||||
let rowHeight = 0;
|
let rowHeight = 0;
|
||||||
let buffer = null;
|
let buffer = null;
|
||||||
|
@ -178,7 +189,7 @@ function playPause() {
|
||||||
player.value.addHandler("onRowChange", (i: { index: number }) => {
|
player.value.addHandler("onRowChange", (i: { index: number }) => {
|
||||||
currentRow = i.index;
|
currentRow = i.index;
|
||||||
currentPattern.value = player.value.getPattern();
|
currentPattern.value = player.value.getPattern();
|
||||||
progress.value.max = player.value.duration();
|
length.value = player.value.duration();
|
||||||
if (!isSeeking) {
|
if (!isSeeking) {
|
||||||
position.value = player.value.position() % player.value.duration();
|
position.value = player.value.position() % player.value.duration();
|
||||||
}
|
}
|
||||||
|
@ -220,10 +231,13 @@ function initSeek() {
|
||||||
isSeeking = true;
|
isSeeking = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function finishSeek() {
|
||||||
|
isSeeking = false;
|
||||||
|
}
|
||||||
|
|
||||||
function performSeek() {
|
function performSeek() {
|
||||||
player.value.seek(position.value);
|
player.value.seek(position.value);
|
||||||
display();
|
display();
|
||||||
isSeeking = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleVisible() {
|
function toggleVisible() {
|
||||||
|
@ -405,128 +419,17 @@ onDeactivated(() => {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--navFg);
|
color: var(--navFg);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--accentedBg);
|
background-color: var(--accentedBg);
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> input[type="range"] {
|
> .progress {
|
||||||
height: 21px;
|
flex-grow: 1;
|
||||||
-webkit-appearance: none;
|
min-width: 0;
|
||||||
width: 90px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 4px 8px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
&::-webkit-slider-runnable-track {
|
|
||||||
background: var(--bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-fill-lower,
|
|
||||||
&::-ms-fill-upper {
|
|
||||||
background: var(--bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-slider-runnable-track {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 0;
|
|
||||||
animate: 0.2s;
|
|
||||||
background: var(--bg);
|
|
||||||
border: 1px solid var(--fg);
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-slider-thumb {
|
|
||||||
border: none;
|
|
||||||
height: 100%;
|
|
||||||
width: 14px;
|
|
||||||
border-radius: 0;
|
|
||||||
background: var(--accentLighten);
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
box-shadow: calc(-100vw - 14px) 0 0 100vw var(--accent);
|
|
||||||
clip-path: polygon(
|
|
||||||
1px 0,
|
|
||||||
100% 0,
|
|
||||||
100% 100%,
|
|
||||||
1px 100%,
|
|
||||||
1px calc(50% + 10.5px),
|
|
||||||
-100vw calc(50% + 10.5px),
|
|
||||||
-100vw calc(50% - 10.5px),
|
|
||||||
0 calc(50% - 10.5px)
|
|
||||||
);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-track {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 0;
|
|
||||||
animate: 0.2s;
|
|
||||||
background: var(--bg);
|
|
||||||
border: 1px solid var(--fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-progress {
|
|
||||||
cursor: pointer;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
|
||||||
border: none;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 0;
|
|
||||||
width: 14px;
|
|
||||||
background: var(--accentLighten);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-track {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 0;
|
|
||||||
animate: 0.2s;
|
|
||||||
background: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-fill-lower {
|
|
||||||
background: var(--accent);
|
|
||||||
border: 1px solid var(--fg);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-fill-upper {
|
|
||||||
background: var(--bg);
|
|
||||||
border: 1px solid var(--fg);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-thumb {
|
|
||||||
margin-top: 1px;
|
|
||||||
border: none;
|
|
||||||
height: 100%;
|
|
||||||
width: 14px;
|
|
||||||
border-radius: 0;
|
|
||||||
background: var(--accentLighten);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.progress {
|
|
||||||
flex-grow: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<label class="timctyfi" :class="{ disabled, easing }">
|
<label class="timctyfi" :class="{ disabled, easing }">
|
||||||
<div class="label"><slot name="label"></slot></div>
|
<div class="label"><slot name="label"></slot></div>
|
||||||
<div v-adaptive-border class="body">
|
<div v-adaptive-border class="body" :class="{ background }">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<input
|
<input
|
||||||
ref="inputEl"
|
ref="inputEl"
|
||||||
|
@ -50,11 +50,15 @@ const props = withDefaults(
|
||||||
textConverter?: (value: number) => string;
|
textConverter?: (value: number) => string;
|
||||||
showTicks?: boolean;
|
showTicks?: boolean;
|
||||||
easing?: boolean;
|
easing?: boolean;
|
||||||
|
background?: boolean;
|
||||||
|
tooltips?: boolean;
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
step: 1,
|
step: 1,
|
||||||
textConverter: (v) => v.toString(),
|
textConverter: (v) => v.toString(),
|
||||||
easing: false,
|
easing: false,
|
||||||
|
background: true,
|
||||||
|
tooltips: true,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -79,6 +83,7 @@ function onChange(x) {
|
||||||
|
|
||||||
const tooltipShowing = ref(false);
|
const tooltipShowing = ref(false);
|
||||||
function tooltipShow() {
|
function tooltipShow() {
|
||||||
|
if (!props.tooltips) return;
|
||||||
tooltipShowing.value = true;
|
tooltipShowing.value = true;
|
||||||
os.popup(
|
os.popup(
|
||||||
defineAsyncComponent(() => import("@/components/MkTooltip.vue")),
|
defineAsyncComponent(() => import("@/components/MkTooltip.vue")),
|
||||||
|
@ -94,6 +99,7 @@ function tooltipShow() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
function tooltipHide() {
|
function tooltipHide() {
|
||||||
|
if (!props.tooltips) return;
|
||||||
tooltipShowing.value = false;
|
tooltipShowing.value = false;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -129,12 +135,19 @@ function tooltipHide() {
|
||||||
|
|
||||||
> .body {
|
> .body {
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
background: var(--panel);
|
background: none;
|
||||||
border: solid 1px var(--panel);
|
border: none;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
||||||
|
&.background {
|
||||||
|
background: var(--panel);
|
||||||
|
border: solid 1px var(--panel);
|
||||||
|
}
|
||||||
|
|
||||||
> .container {
|
> .container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
height: $thumbHeight;
|
height: $thumbHeight;
|
||||||
|
|
||||||
@mixin track {
|
@mixin track {
|
||||||
|
@ -155,6 +168,7 @@ function tooltipHide() {
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--accentLighten);
|
background: var(--accentLighten);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> input {
|
> input {
|
||||||
|
|
Loading…
Reference in a new issue