mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-04-28 17:46:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

merge: Apply lessons learned from SkFlashPlayer to SkModPlayer (!801)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/801

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Hazelnoot <acomputerdog@gmail.com>
This commit is contained in:
dakkar 2024-12-08 18:00:53 +00:00
commit a014bfc225
1 changed files with 26 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
packages/frontend/src/components/SkModPlayer.vue
View file

@ -4,44 +4,44 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div v-if="hide" class="mod-player-disabled" @click="toggleVisible()"> <div v-if="hide" :class="$style.mod_player_disabled" @click="toggleVisible()">
<div> <div>
<b><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b> <b><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
<span>{{ i18n.ts.clickToShow }}</span> <span>{{ i18n.ts.clickToShow }}</span>
</div> </div>
</div> </div>
<div v-else class="mod-player-enabled"> <div v-else :class="$style.mod_player_enabled">
<div class="pattern-display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle"> <div :class="$style.pattern_display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle">
<div v-if="patternHide" class="pattern-hide"> <div v-if="patternHide" :class="$style.pattern_hide">
<b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b> <b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b>
<span>{{ i18n.ts.clickToShow }}</span> <span>{{ i18n.ts.clickToShow }}</span>
</div> </div>
<span class="patternShadowTop"></span> <span :class="$style.patternShadowTop"></span>
<span class="patternShadowBottom"></span> <span :class="$style.patternShadowBottom"></span>
<canvas ref="displayCanvas" class="pattern-canvas"></canvas> <canvas ref="displayCanvas" :class="$style.pattern_canvas"></canvas>
</div> </div>
<div class="controls"> <div :class="$style.controls">
<input v-if="patternScrollSliderShow" ref="patternScrollSlider" v-model="patternScrollSliderPos" class="pattern-slider" type="range" min="0" max="100" step="0.01" style=""/> <input v-if="patternScrollSliderShow" ref="patternScrollSlider" v-model="patternScrollSliderPos" :class="$style.pattern_slider" type="range" min="0" max="100" step="0.01" style=""/>
<button class="play" @click="playPause()"> <button :class="$style.play" @click="playPause()">
<i v-if="playing" class="ph-pause ph-bold ph-lg"></i> <i v-if="playing" class="ph-pause ph-bold ph-lg"></i>
<i v-else class="ph-play ph-bold ph-lg"></i> <i v-else class="ph-play ph-bold ph-lg"></i>
</button> </button>
<button class="stop" @click="stop()"> <button :class="$style.stop" @click="stop()">
<i class="ph-stop ph-bold ph-lg"></i> <i class="ph-stop ph-bold ph-lg"></i>
</button> </button>
<input ref="progress" v-model="position" class="progress" type="range" min="0" max="1" step="0.1" @mousedown="initSeek()" @mouseup="performSeek()"/> <input ref="progress" v-model="position" :class="$style.progress" type="range" min="0" max="1" step="0.1" @mousedown="initSeek()" @mouseup="performSeek()"/>
<input v-model="player.context.gain.value" type="range" min="0" max="1" step="0.1"/> <input v-model="player.context.gain.value" type="range" min="0" max="1" step="0.1"/>
<a class="download" :title="i18n.ts.download" :href="module.url" target="_blank"> <a :class="$style.download" :title="i18n.ts.download" :href="module.url" :download="module.name" target="_blank">
<i class="ph-download ph-bold ph-lg"></i> <i class="ph-download ph-bold ph-lg"></i>
</a> </a>
</div> </div>
<i class="hide ph-eye-slash ph-bold ph-lg" @click="toggleVisible()"></i> <i :class="$style.hide" class="ph-eye-slash ph-bold ph-lg" @click="toggleVisible()"></i>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, nextTick, computed, watch, onDeactivated, onMounted } from 'vue'; import { ref, nextTick, watch, onDeactivated, onMounted } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
@ -70,9 +70,9 @@ const props = defineProps<{
module: Misskey.entities.DriveFile module: Misskey.entities.DriveFile
}>(); }>();
const isSensitive = computed(() => { return props.module.isSensitive; }); const isSensitive = props.module.isSensitive;
const url = computed(() => { return props.module.url; }); const url = 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 && (defaultStore.state.nsfw !== 'ignore'));
let patternHide = ref(false); let patternHide = ref(false);
let playing = ref(false); let playing = ref(false);
let displayCanvas = ref<HTMLCanvasElement>(); let displayCanvas = ref<HTMLCanvasElement>();
@ -111,7 +111,7 @@ function bakeNumberRow() {
} }
onMounted(() => { onMounted(() => {
player.value.load(url.value).then((result) => { player.value.load(url).then((result) => {
buffer = result; buffer = result;
try { try {
player.value.play(buffer); player.value.play(buffer);
@ -437,7 +437,7 @@ onDeactivated(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.hide { .hide {
border-radius: var(--radius-sm) !important; border-radius: var(--radius-sm) !important;
@ -446,7 +446,7 @@ onDeactivated(() => {
font-size: 12px !important; font-size: 12px !important;
} }
.mod-player-enabled { .mod_player_enabled {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -469,7 +469,7 @@ onDeactivated(() => {
z-index: 4; z-index: 4;
} }
> .pattern-display { > .pattern_display {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-x: scroll; overflow-x: scroll;
@ -484,7 +484,7 @@ onDeactivated(() => {
display: none; display: none;
} }
.pattern-canvas { .pattern_canvas {
position: relative; position: relative;
background-color: black; background-color: black;
image-rendering: pixelated; image-rendering: pixelated;
@ -513,7 +513,7 @@ onDeactivated(() => {
z-index: 2; z-index: 2;
} }
.pattern-hide { .pattern_hide {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -563,7 +563,7 @@ onDeactivated(() => {
margin: 4px 8px; margin: 4px 8px;
overflow-x: hidden; overflow-x: hidden;
&.pattern-slider { &.pattern_slider {
position: absolute; position: absolute;
width: calc( 100% - 8px * 2 ); width: calc( 100% - 8px * 2 );
top: calc( 100% - 21px * 3 ); top: calc( 100% - 21px * 3 );
@ -677,7 +677,7 @@ onDeactivated(() => {
} }
} }
.mod-player-disabled { .mod_player_disabled {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;