From a24e93ec6c241533e520dc329cd7c5996bb77828 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?= =?UTF-8?q?=E3=81=AB=E3=82=85?= <17376330+u1-liquid@users.noreply.github.com> Date: Sat, 2 Mar 2024 13:19:21 +0900 Subject: [PATCH] =?UTF-8?q?spec(frontend):=20=E9=9D=9E=E3=83=AD=E3=82=B0?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E7=8A=B6=E6=85=8B=E3=81=A7=E3=81=AF=E3=82=BB?= =?UTF-8?q?=E3=83=B3=E3=82=B7=E3=83=86=E3=82=A3=E3=83=96=E3=81=AB=E8=A8=AD?= =?UTF-8?q?=E5=AE=9A=E3=81=95=E3=82=8C=E3=81=9F=E3=82=B3=E3=83=B3=E3=83=86?= =?UTF-8?q?=E3=83=B3=E3=83=84=E3=82=92=E9=96=B2=E8=A6=A7=E3=81=A7=E3=81=8D?= =?UTF-8?q?=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB=20(MisskeyIO#498)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/MkMediaAudio.vue | 26 ++++++-- .../frontend/src/components/MkMediaBanner.vue | 19 +++++- .../frontend/src/components/MkMediaImage.vue | 23 +++++-- .../frontend/src/components/MkMediaVideo.vue | 57 +++++++++++++---- packages/frontend/src/components/MkNote.vue | 18 ++---- .../frontend/src/pages/user/index.files.vue | 64 ++++--------------- .../frontend/src/pages/welcome.timeline.vue | 2 +- 7 files changed, 121 insertions(+), 88 deletions(-) diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue index d42146f941..f2ed8e6647 100644 --- a/packages/frontend/src/components/MkMediaAudio.vue +++ b/packages/frontend/src/components/MkMediaAudio.vue @@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only ]" @contextmenu.stop > -
-
{{ hms(elapsedTimeMs) }}
- @@ -66,7 +66,8 @@ import * as os from '@/os.js'; import bytes from '@/filters/bytes.js'; import { hms } from '@/filters/hms.js'; import MkMediaRange from '@/components/MkMediaRange.vue'; -import { iAmModerator } from '@/account.js'; +import { pleaseLogin } from '@/scripts/please-login.js'; +import { $i, iAmModerator } from '@/account.js'; const props = defineProps<{ audio: Misskey.entities.DriveFile; @@ -114,6 +115,21 @@ function showMenu(ev: MouseEvent) { }); } +function showHiddenContent(ev: MouseEvent) { + if (props.audio.isSensitive && !$i) { + ev.preventDefault(); + ev.stopPropagation(); + pleaseLogin(); + return; + } + + if (hide.value) { + ev.preventDefault(); + ev.stopPropagation(); + hide.value = false; + } +} + function toggleSensitive(file: Misskey.entities.DriveFile) { os.apiWithDialog('drive/files/update', { fileId: file.id, diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue index a219848b7f..7a128fbad1 100644 --- a/packages/frontend/src/components/MkMediaBanner.vue +++ b/packages/frontend/src/components/MkMediaBanner.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -59,7 +59,8 @@ import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; import { defaultStore } from '@/store.js'; import { i18n } from '@/i18n.js'; import * as os from '@/os.js'; -import { iAmModerator } from '@/account.js'; +import { pleaseLogin } from '@/scripts/please-login.js'; +import { $i, iAmModerator } from '@/account.js'; const props = withDefaults(defineProps<{ image: Misskey.entities.DriveFile; @@ -83,11 +84,21 @@ const url = computed(() => (props.raw || defaultStore.state.loadRawImages) : props.image.thumbnailUrl, ); -function onclick() { +function showHiddenContent(ev: MouseEvent) { if (!props.controls) { return; } + + if (props.image.isSensitive && !$i) { + ev.preventDefault(); + ev.stopPropagation(); + pleaseLogin(); + return; + } + if (hide.value) { + ev.preventDefault(); + ev.stopPropagation(); hide.value = false; } } diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index eab4fdfd6b..82b0cdd4ad 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only @mouseleave="onMouseLeave" @contextmenu.stop > - + +
-
- -
{{ hms(elapsedTimeMs) }}
- @@ -94,11 +95,15 @@ import * as os from '@/os.js'; import { isFullscreenNotSupported } from '@/scripts/device-kind.js'; import hasAudio from '@/scripts/media-has-audio.js'; import MkMediaRange from '@/components/MkMediaRange.vue'; -import { iAmModerator } from '@/account.js'; +import { pleaseLogin } from '@/scripts/please-login.js'; +import { $i, iAmModerator } from '@/account.js'; -const props = defineProps<{ +const props = withDefaults(defineProps<{ video: Misskey.entities.DriveFile; -}>(); + videoControls?: boolean; +}>(), { + videoControls: true, +}); // eslint-disable-next-line vue/no-setup-props-destructure const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore')); @@ -140,6 +145,21 @@ function showMenu(ev: MouseEvent) { }); } +function showHiddenContent(ev: MouseEvent) { + if (props.video.isSensitive && !$i) { + ev.preventDefault(); + ev.stopPropagation(); + pleaseLogin(); + return; + } + + if (hide.value) { + ev.preventDefault(); + ev.stopPropagation(); + hide.value = false; + } +} + function toggleSensitive(file: Misskey.entities.DriveFile) { os.apiWithDialog('drive/files/update', { fileId: file.id, @@ -403,7 +423,6 @@ onDeactivated(() => { font: inherit; color: inherit; cursor: pointer; - padding: 120px 0; display: flex; align-items: center; justify-content: center; @@ -415,6 +434,22 @@ onDeactivated(() => { color: #fff; } +.menu { + display: block; + position: absolute; + border-radius: 999px; + background-color: rgba(0, 0, 0, 0.3); + -webkit-backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--blur, blur(15px)); + color: #fff; + font-size: 0.8em; + width: 28px; + height: 28px; + text-align: center; + bottom: 10px; + right: 10px; +} + .videoRoot { background: #000; position: relative; diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index f1a6d85948..b75b1d0e56 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -251,7 +251,7 @@ const urls = computed(() => parsed.value ? extractUrlFromMfm(parsed.value).filte const isLong = shouldCollapsed(appearNote.value, urls.value ?? []); const collapsed = ref(appearNote.value.cw == null && isLong); const isDeleted = ref(false); -const muted = ref(checkMute(appearNote.value, $i?.mutedWords)); +const muted = ref(checkMute(appearNote.value, $i?.mutedWords ?? [])); const translation = ref(null); const translating = ref(false); const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance); @@ -260,24 +260,16 @@ const renoteCollapsed = ref( defaultStore.state.collapseRenotes && isRenote && ( ($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131 (appearNote.value.myReaction != null) - ) + ), ); -const hideMutedNotes = defaultStore.state.hideMutedNotes; - -/* Overload FunctionにLintが対応していないのでコメントアウト -function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array | undefined | null, checkOnly: true): boolean; -function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array | undefined | null, checkOnly: false): boolean | 'sensitiveMute'; -*/ -function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array | undefined | null, checkOnly = false): boolean | 'sensitiveMute' { - if (mutedWords == null) return false; +const hideMutedNotes = $i ? defaultStore.state.hideMutedNotes : true; +function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array): boolean | 'sensitiveMute' { if (checkWordMute(noteToCheck, $i, mutedWords)) return true; if (noteToCheck.reply && checkWordMute(noteToCheck.reply, $i, mutedWords)) return true; if (noteToCheck.renote && checkWordMute(noteToCheck.renote, $i, mutedWords)) return true; - if (checkOnly) return false; - - if (inTimeline && !defaultStore.state.tl.filter.withSensitive && noteToCheck.files?.some((v) => v.isSensitive)) return 'sensitiveMute'; + if (inTimeline && ($i ? !defaultStore.state.tl.filter.withSensitive : true) && noteToCheck.files?.some((v) => v.isSensitive)) return 'sensitiveMute'; return false; } diff --git a/packages/frontend/src/pages/user/index.files.vue b/packages/frontend/src/pages/user/index.files.vue index 2bc59a7589..b4663d7c47 100644 --- a/packages/frontend/src/pages/user/index.files.vue +++ b/packages/frontend/src/pages/user/index.files.vue @@ -9,25 +9,16 @@ SPDX-License-Identifier: AGPL-3.0-only
-
- @@ -35,12 +26,12 @@ SPDX-License-Identifier: AGPL-3.0-only