diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-09-24 09:01:06 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-09-24 09:01:06 +0900 |
| commit | 0f8c068e84c8b7961f0f9c50c565a9f778a0cbf6 (patch) | |
| tree | 7928f1c2198522fd906b1b80915e7595a81f7cdb /packages/frontend/src/components | |
| parent | Bump version to 2025.9.1-alpha.1 (diff) | |
| download | misskey-0f8c068e84c8b7961f0f9c50c565a9f778a0cbf6.tar.gz misskey-0f8c068e84c8b7961f0f9c50c565a9f778a0cbf6.tar.bz2 misskey-0f8c068e84c8b7961f0f9c50c565a9f778a0cbf6.zip | |
feat(frontend): Video compression (#16574)
* wip
* Update CHANGELOG.md
* wip
* wip
* wip
* wip
* Update use-uploader.ts
* Update use-uploader.ts
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkPostForm.vue | 7 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkPostFormDialog.vue | 1 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkUploaderItems.vue | 13 |
3 files changed, 17 insertions, 4 deletions
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index 9fec7ea4da..17f93a4ec8 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -105,7 +105,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide, shallowRef, ref, computed, useTemplateRef } from 'vue'; +import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide, shallowRef, ref, computed, useTemplateRef, onUnmounted } from 'vue'; import * as mfm from 'mfm-js'; import * as Misskey from 'misskey-js'; import insertTextAtCursor from 'insert-text-at-cursor'; @@ -218,6 +218,10 @@ const uploader = useUploader({ multiple: true, }); +onUnmounted(() => { + uploader.dispose(); +}); + uploader.events.on('itemUploaded', ctx => { files.value.push(ctx.item.uploaded!); uploader.removeItem(ctx.item); @@ -1300,6 +1304,7 @@ async function canClose() { defineExpose({ clear, + abortUploader: () => uploader.abortAll(), canClose, }); </script> diff --git a/packages/frontend/src/components/MkPostFormDialog.vue b/packages/frontend/src/components/MkPostFormDialog.vue index bf332e706e..ba8d3a7210 100644 --- a/packages/frontend/src/components/MkPostFormDialog.vue +++ b/packages/frontend/src/components/MkPostFormDialog.vue @@ -54,6 +54,7 @@ function onPosted() { async function _close() { const canClose = await form.value?.canClose(); if (!canClose) return; + form.value?.abortUploader(); modal.value?.close(); } diff --git a/packages/frontend/src/components/MkUploaderItems.vue b/packages/frontend/src/components/MkUploaderItems.vue index f1370965c4..f31c717ad5 100644 --- a/packages/frontend/src/components/MkUploaderItems.vue +++ b/packages/frontend/src/components/MkUploaderItems.vue @@ -10,7 +10,10 @@ SPDX-License-Identifier: AGPL-3.0-only :key="item.id" v-panel :class="[$style.item, { [$style.itemWaiting]: item.preprocessing, [$style.itemCompleted]: item.uploaded, [$style.itemFailed]: item.uploadFailed }]" - :style="{ '--p': item.progress != null ? `${item.progress.value / item.progress.max * 100}%` : '0%' }" + :style="{ + '--p': item.progress != null ? `${item.progress.value / item.progress.max * 100}%` : '0%', + '--pp': item.preprocessProgress != null ? `${item.preprocessProgress * 100}%` : '100%', + }" @contextmenu.prevent.stop="onContextmenu(item, $event)" > <div :class="$style.itemInner"> @@ -19,11 +22,15 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ item.thumbnail })` }" @click="onThumbnailClick(item, $event)"></div> <div :class="$style.itemBody"> - <div><i v-if="item.isSensitive" style="color: var(--MI_THEME-warn); margin-right: 0.5em;" class="ti ti-eye-exclamation"></i><MkCondensedLine :minScale="2 / 3">{{ item.name }}</MkCondensedLine></div> + <div> + <i v-if="item.isSensitive" style="color: var(--MI_THEME-warn); margin-right: 0.5em;" class="ti ti-eye-exclamation"></i> + <MkCondensedLine :minScale="2 / 3">{{ item.name }}</MkCondensedLine> + </div> <div :class="$style.itemInfo"> <span>{{ item.file.type }}</span> <span v-if="item.compressedSize">({{ i18n.tsx._uploader.compressedToX({ x: bytes(item.compressedSize) }) }} = {{ i18n.tsx._uploader.savedXPercent({ x: Math.round((1 - item.compressedSize / item.file.size) * 100) }) }})</span> <span v-else>{{ bytes(item.file.size) }}</span> + <span v-if="item.preprocessing">{{ i18n.ts.preprocessing }}<MkLoading inline em style="margin-left: 0.5em;"/></span> </div> <div> </div> @@ -97,7 +104,7 @@ function onThumbnailClick(item: UploaderItem, ev: MouseEvent) { position: absolute; top: 0; left: 0; - width: 100%; + width: var(--pp, 100%); height: 100%; background: linear-gradient(-45deg, transparent 25%, var(--c) 25%,var(--c) 50%, transparent 50%, transparent 75%, var(--c) 75%, var(--c)); background-size: 25px 25px; |