usbharu
/
misskey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update use-uploader.ts

This commit is contained in:
syuilo 2025-10-31 16:57:21 +09:00
parent 63b11f5e18
commit 7f488e84bd
1 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/frontend/src/composables/use-uploader.ts
View File

@ -10,6 +10,7 @@ import { EventEmitter } from 'eventemitter3';
import { computed, markRaw, onMounted, onUnmounted, ref, triggerRef } from 'vue'; import { computed, markRaw, onMounted, onUnmounted, ref, triggerRef } from 'vue';
import ExifReader from 'exifreader'; import ExifReader from 'exifreader';
import type { MenuItem } from '@/types/menu.js'; import type { MenuItem } from '@/types/menu.js';
import type { WatermarkPreset } from '@/utility/watermark.js';
import { genId } from '@/utility/id.js'; import { genId } from '@/utility/id.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
@ -85,7 +86,7 @@ export type UploaderItem = {
compressedSize?: number | null; compressedSize?: number | null;
preprocessedFile?: Blob | null; preprocessedFile?: Blob | null;
file: File; file: File;
watermarkPresetId: string | null; // そのままpresetを入れてもいいのでは？ watermarkPreset: WatermarkPreset | null;
isSensitive?: boolean; isSensitive?: boolean;
caption?: string | null; caption?: string | null;
abort?: (() => void) | null; abort?: (() => void) | null;
@ -149,7 +150,7 @@ export function useUploader(options: {
uploaded: null, uploaded: null,
uploadFailed: false, uploadFailed: false,
compressionLevel: IMAGE_COMPRESSION_SUPPORTED_TYPES.includes(file.type) ? prefer.s.defaultImageCompressionLevel : VIDEO_COMPRESSION_SUPPORTED_TYPES.includes(file.type) ? prefer.s.defaultVideoCompressionLevel : 0, compressionLevel: IMAGE_COMPRESSION_SUPPORTED_TYPES.includes(file.type) ? prefer.s.defaultImageCompressionLevel : VIDEO_COMPRESSION_SUPPORTED_TYPES.includes(file.type) ? prefer.s.defaultVideoCompressionLevel : 0,
watermarkPresetId: uploaderFeatures.value.watermark && $i.policies.watermarkAvailable ? prefer.s.defaultWatermarkPresetId : null, watermarkPreset: uploaderFeatures.value.watermark && $i.policies.watermarkAvailable ? (prefer.s.watermarkPresets.find(p => p.id === prefer.s.defaultWatermarkPresetId) ?? null) : null,
file: markRaw(file), file: markRaw(file),
}); });
const reactiveItem = items.value.at(-1)!; const reactiveItem = items.value.at(-1)!;
@ -287,8 +288,8 @@ export function useUploader(options: {
!item.uploading && !item.uploading &&
!item.uploaded !item.uploaded
) { ) {
function changeWatermarkPreset(presetId: string | null) { function changeWatermarkPreset(preset: WatermarkPreset | null) {
item.watermarkPresetId = presetId; item.watermarkPreset = preset;
preprocess(item).then(() => { preprocess(item).then(() => {
triggerRef(items); triggerRef(items);
}); });
@ -297,20 +298,20 @@ export function useUploader(options: {
menu.push({ menu.push({
icon: 'ti ti-copyright', icon: 'ti ti-copyright',
text: i18n.ts.watermark, text: i18n.ts.watermark,
caption: computed(() => item.watermarkPresetId == null ? null : prefer.s.watermarkPresets.find(p => p.id === item.watermarkPresetId)?.name), caption: computed(() => item.watermarkPreset == null ? null : item.watermarkPreset.name),
type: 'parent', type: 'parent',
children: [{ children: [{
type: 'radioOption', type: 'radioOption',
text: i18n.ts.none, text: i18n.ts.none,
active: computed(() => item.watermarkPresetId == null), active: computed(() => item.watermarkPreset == null),
action: () => changeWatermarkPreset(null), action: () => changeWatermarkPreset(null),
}, { }, {
type: 'divider', type: 'divider',
}, ...prefer.s.watermarkPresets.map(preset => ({ }, ...prefer.s.watermarkPresets.map(preset => ({
type: 'radioOption' as const, type: 'radioOption' as const,
text: preset.name, text: preset.name,
active: computed(() => item.watermarkPresetId === preset.id), active: computed(() => item.watermarkPreset?.id === preset.id),
action: () => changeWatermarkPreset(preset.id), action: () => changeWatermarkPreset(preset),
})), ...(prefer.s.watermarkPresets.length > 0 ? [{ })), ...(prefer.s.watermarkPresets.length > 0 ? [{
type: 'divider' as const, type: 'divider' as const,
}] : []), { }] : []), {
@ -349,19 +350,18 @@ export function useUploader(options: {
menu.push({ menu.push({
icon: 'ti ti-device-ipad-horizontal', icon: 'ti ti-device-ipad-horizontal',
text: i18n.ts.frame, text: i18n.ts.frame,
//caption: computed(() => item.watermarkPresetId == null ? null : prefer.s.watermarkPresets.find(p => p.id === item.watermarkPresetId)?.name),
type: 'parent', type: 'parent',
children: [{ children: [{
type: 'radioOption', type: 'radioOption',
text: i18n.ts.none, text: i18n.ts.none,
active: computed(() => item.watermarkPresetId == null), active: computed(() => item.watermarkPreset == null),
action: () => changePreset(null), action: () => changePreset(null),
}, { }, {
type: 'divider', type: 'divider',
}, ...prefer.s.watermarkPresets.map(preset => ({ }, ...prefer.s.watermarkPresets.map(preset => ({
type: 'radioOption' as const, type: 'radioOption' as const,
text: preset.name, text: preset.name,
active: computed(() => item.watermarkPresetId === preset.id), active: computed(() => item.watermarkPreset?.id === preset.id),
action: () => changePreset(preset.id), action: () => changePreset(preset.id),
})), ...(prefer.s.watermarkPresets.length > 0 ? [{ })), ...(prefer.s.watermarkPresets.length > 0 ? [{
type: 'divider' as const, type: 'divider' as const,
@ -599,9 +599,8 @@ export function useUploader(options: {
let preprocessedFile: Blob | File = item.file; let preprocessedFile: Blob | File = item.file;
const needsWatermark = item.watermarkPresetId != null && WATERMARK_SUPPORTED_TYPES.includes(preprocessedFile.type) && $i.policies.watermarkAvailable; const needsWatermark = item.watermarkPreset != null && WATERMARK_SUPPORTED_TYPES.includes(preprocessedFile.type) && $i.policies.watermarkAvailable;
const preset = prefer.s.watermarkPresets.find(p => p.id === item.watermarkPresetId); if (needsWatermark && item.watermarkPreset != null) {
if (needsWatermark && preset != null) {
const canvas = window.document.createElement('canvas'); const canvas = window.document.createElement('canvas');
const renderer = new WatermarkRenderer({ const renderer = new WatermarkRenderer({
canvas: canvas, canvas: canvas,
@ -610,7 +609,7 @@ export function useUploader(options: {
image: imageBitmap, image: imageBitmap,
}); });
await renderer.setLayersAndRender(preset.layers); await renderer.setLayersAndRender(item.watermarkPreset.layers);
preprocessedFile = await new Promise<Blob>((resolve) => { preprocessedFile = await new Promise<Blob>((resolve) => {
canvas.toBlob((blob) => { canvas.toBlob((blob) => {