Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

#10781

Browse source
This commit is contained in:
tamaina 2023-05-06 15:52:51 +00:00
parent 39becdb576
commit ee57b60da3
5 changed files with 100 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
packages/frontend/src/components/MkImgWithBlurhash.vue
View file

@ -1,6 +1,6 @@
<template>
<div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
<img v-if="!loaded && src && !forceBlurhash" :class="$style.loader" :src="src" @load="onLoad"/>
<img v-if="!loaded && src" :class="$style.loader" :src="src" @load="onLoad"/>
<Transition
mode="in-out"
:enter-active-class="defaultStore.state.animation && (props.transition?.enterActiveClass ?? $style['transition_toggle_enterActive']) || undefined"
@ -10,16 +10,18 @@
:enter-to-class="defaultStore.state.animation && (props.transition?.enterToClass ?? $style['transition_toggle_enterTo']) || undefined"
:leave-from-class="defaultStore.state.animation && (props.transition?.leaveFromClass ?? $style['transition_toggle_leaveFrom']) || undefined"
>
<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="width" :height="height" :title="title ?? undefined"/>
<img v-else :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined"/>
<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
<img v-else :class="$style.img" :width="props.width" :height="props.height" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined"/>
</Transition>
</div>
</template>
<script lang="ts" setup>
import { onMounted, shallowRef, useCssModule, watch } from 'vue';
import { decode } from 'blurhash';
import { computed, onMounted, onUnmounted, shallowRef, useCssModule, watch } from 'vue';
import { defaultStore } from '@/store';
import DrawBlurhash from '@/workers/draw-blurhash?worker';
let worker: Worker;
const $style = useCssModule();
@ -52,9 +54,17 @@ const props = withDefaults(defineProps<{
});
const canvas = shallowRef<HTMLCanvasElement>();
const offscreen = computed(() => {
if (!canvas.value) return;
const _offscreen = canvas.value.transferControlToOffscreen();
worker.postMessage({
canvas: _offscreen,
}, [_offscreen]);
return _offscreen;
});
let loaded = $ref(false);
let width = $ref(props.width);
let height = $ref(props.height);
let canvasWidth = $ref(props.width);
let canvasHeight = $ref(props.height);
function onLoad() {
loaded = true;
@ -63,31 +73,45 @@ function onLoad() {
watch([() => props.width, () => props.height], () => {
const ratio = props.width / props.height;
if (ratio > 1) {
width = Math.round(64 * ratio);
height = 64;
canvasWidth = Math.round(64 * ratio);
canvasHeight = 64;
} else {
width = 64;
height = Math.round(64 / ratio);
canvasWidth = 64;
canvasHeight = Math.round(64 / ratio);
}
}, {
immediate: true,
});
function draw() {
if (props.hash == null || !canvas.value) return;
const pixels = decode(props.hash, width, height);
const ctx = canvas.value.getContext('2d');
const imageData = ctx!.createImageData(width, height);
imageData.data.set(pixels);
ctx!.putImageData(imageData, 0, 0);
if (props.hash == null || !offscreen.value) return;
worker.postMessage({
hash: props.hash,
width: canvasWidth,
height: canvasHeight,
});
}
watch([() => props.hash, canvas], () => {
watch([() => props.hash, offscreen], () => {
draw();
});
onMounted(() => {
draw();
worker = new DrawBlurhash();
if (props.forceBlurhash) {
draw();
} else {
// 100ms後に画像の読み込みが完了していなければblurhashを描画する
setTimeout(() => {
if (!loaded) {
draw();
}
}, 100);
}
});
onUnmounted(() => {
worker.terminate();
});
</script>

41
packages/frontend/src/components/MkMediaImage.vue
View file

@ -1,27 +1,32 @@
<template>
<!--
<div v-if="hide" :class="$style.hidden" @click="hide = false">
<ImgWithBlurhash style="filter: brightness(0.5);" :hash="image.blurhash" :title="image.comment" :alt="image.comment" :width="image.properties.width" :height="image.properties.height" :force-blurhash="defaultStore.state.enableDataSaverMode"/>
<div :class="$style.hiddenText">
</div>-->
<div :class="hide ? $style.hidden : $style.visible" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click="onclick">
<a
:class="$style.imageContainer"
:href="image.url"
:title="image.name"
>
<ImgWithBlurhash :hash="image.blurhash" :src="(defaultStore.state.enableDataSaverMode && hide) ? null : url" :force-blurhash="hide" :cover="hide" :alt="image.comment || image.name" :title="image.comment || image.name" :width="image.properties.width" :height="image.properties.height"/>
</a>
<template v-if="hide">
<div :class="$style.hiddenText">
<div :class="$style.hiddenTextWrapper">
<b v-if="image.isSensitive" style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.image}${image.size ? ' ' + bytes(image.size) : ''})` : '' }}</b>
<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.enableDataSaverMode && image.size ? bytes(image.size) : i18n.ts.image }}</b>
<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
</div>
</div>
</div>
<div v-else :class="$style.visible" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'">
<a
:class="$style.imageContainer"
:href="image.url"
:title="image.name"
>
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :width="image.properties.width" :height="image.properties.height" :cover="false"/>
</a>
<div :class="$style.indicators">
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
<div v-if="image.comment" :class="$style.indicator">ALT</div>
</div>
<button v-tooltip="i18n.ts.hide" :class="$style.hide" class="_button" @click="hide = true"><i class="ti ti-eye-off"></i></button>
</template>
<template v-else>
<div :class="$style.indicators">
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
<div v-if="image.comment" :class="$style.indicator">ALT</div>
</div>
<button v-tooltip="i18n.ts.hide" :class="$style.hide" class="_button" @click.stop.prevent="hide = true"><i class="ti ti-eye-off"></i></button>
</template>
</div>
</template>
@ -49,6 +54,12 @@ const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
: props.image.thumbnailUrl,
);
function onclick() {
if (hide) {
hide = false;
}
}
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
watch(() => props.image, () => {
hide = (defaultStore.state.nsfw === 'force' || defaultStore.state.enableDataSaverMode) ? true : (props.image.isSensitive && defaultStore.state.nsfw !== 'ignore');

20
packages/frontend/src/workers/draw-blurhash.ts Normal file
View file

@ -0,0 +1,20 @@
import { decode } from 'blurhash';
let canvas: OffscreenCanvas | null = null;
onmessage = (event) => {
if ('canvas' in event.data) {
canvas = event.data.canvas;
}
if (!(canvas && 'hash' in event.data && typeof event.data.hash === 'string')) {
return;
}
const width = event.data.width ?? 64;
const height = event.data.height ?? 64;
const ctx = canvas.getContext!('2d');
if (!ctx) return;
const imageData = ctx.createImageData(width, height);
const pixels = decode(event.data.hash, width, height);
imageData.data.set(pixels);
ctx!.putImageData(imageData, 0, 0);
};

7
packages/frontend/src/workers/tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"lib": ["esnext", "webworker"],
}
}

4
packages/frontend/vite.config.ts
View file

@ -139,6 +139,10 @@ export function getConfig(): UserConfig {
},
},
worker: {
format: 'es',
},
test: {
environment: 'happy-dom',
deps: {