From 43caa685942601678aefe155de983a5466dcaf75 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Sat, 11 Jul 2026 17:11:01 +0900 Subject: [PATCH 1/6] Update MkVideoContol.vue --- .../frontend/src/components/MkVideoContol.vue | 29 ------------------- 1 file changed, 29 deletions(-) diff --git a/packages/frontend/src/components/MkVideoContol.vue b/packages/frontend/src/components/MkVideoContol.vue index 776377c949..59bf57c67e 100644 --- a/packages/frontend/src/components/MkVideoContol.vue +++ b/packages/frontend/src/components/MkVideoContol.vue @@ -34,10 +34,6 @@ SPDX-License-Identifier: AGPL-3.0-only - @@ -48,7 +44,6 @@ import type { MenuItem } from '@/types/menu.js'; import { hms } from '@/filters/hms.js'; import { i18n } from '@/i18n.js'; import * as os from '@/os.js'; -import { exitFullscreen, requestFullscreen } from '@/utility/fullscreen.js'; import hasAudio from '@/utility/media-has-audio.js'; import MkMediaRange from '@/components/MkMediaRange.vue'; import { prefer } from '@/preferences.js'; @@ -115,11 +110,6 @@ function showMenu(ev: PointerEvent) { }); } -// MediaControl: Video State -const isHoverring = ref(false); -const isFullscreen = ref(false); -let controlStateTimer: number | null = null; - // MediaControl: Common State const oncePlayed = ref(false); const isReady = ref(false); @@ -156,25 +146,6 @@ function togglePlayPause() { } } -function toggleFullscreen() { - if (playerEl.value == null) return; - if (isFullscreen.value) { - exitFullscreen({ - videoEl: videoEl, - }); - isFullscreen.value = false; - } else { - requestFullscreen({ - videoEl: videoEl, - playerEl: playerEl.value, - options: { - navigationUI: 'hide', - }, - }); - isFullscreen.value = true; - } -} - function togglePictureInPicture() { if (window.document.pictureInPictureElement) { window.document.exitPictureInPicture(); From 292005b27bb6126db2f5d4680ec5d49850b61db0 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Sat, 11 Jul 2026 17:11:49 +0900 Subject: [PATCH 2/6] wip --- .../frontend/src/components/MkMediaList.vue | 2 +- .../frontend/src/components/MkMediaVideo.vue | 599 +----------------- .../src/components/MkMediaVideoPreview.vue | 196 ------ 3 files changed, 2 insertions(+), 795 deletions(-) delete mode 100644 packages/frontend/src/components/MkMediaVideoPreview.vue diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue index 780b98934b..79744bacd3 100644 --- a/packages/frontend/src/components/MkMediaList.vue +++ b/packages/frontend/src/components/MkMediaList.vue @@ -34,7 +34,7 @@ import * as Misskey from 'misskey-js'; import { FILE_TYPE_BROWSERSAFE } from '@@/js/const.js'; import XBanner from '@/components/MkMediaBanner.vue'; import XImage from '@/components/MkMediaImage.vue'; -import XVideo from '@/components/MkMediaVideoPreview.vue'; +import XVideo from '@/components/MkMediaVideo.vue'; import * as os from '@/os.js'; import { focusParent } from '@/utility/focus.js'; import { prefer } from '@/preferences.js'; diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index be3b3ad396..885c4052e2 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -6,16 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -112,17 +41,10 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/components/MkMediaVideoPreview.vue b/packages/frontend/src/components/MkMediaVideoPreview.vue deleted file mode 100644 index 885c4052e2..0000000000 --- a/packages/frontend/src/components/MkMediaVideoPreview.vue +++ /dev/null @@ -1,196 +0,0 @@ - - - - - - - From 9f37206f148a1ec52b97b2c4c695878d097bbcfd Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Sat, 11 Jul 2026 17:16:35 +0900 Subject: [PATCH 3/6] Update MkMediaVideo.vue --- .../frontend/src/components/MkMediaVideo.vue | 46 ++++++++----------- 1 file changed, 20 insertions(+), 26 deletions(-) diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index 885c4052e2..569fdc628a 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -33,7 +33,12 @@ SPDX-License-Identifier: AGPL-3.0-only > - + +
+
+ +
+
@@ -162,35 +167,24 @@ async function reveal() { width: 100%; } -.videoOverlayPlayButton { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - - opacity: 0; - transition: opacity .4s ease-in-out; - - background: var(--MI_THEME-accent); - color: #fff; - padding: 1rem; - border-radius: 99rem; - - font-size: 1.1rem; - - &:focus-visible { - outline: none; - } -} - -.videoLoading { +.playIconWrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - display: flex; - align-items: center; - justify-content: center; + display: grid; + place-items: center; +} + +.playIcon { + display: grid; + place-items: center; + width: 50px; + height: 50px; + border-radius: 100%; + font-size: 120%; + background: var(--MI_THEME-accent); + color: var(--MI_THEME-fgOnAccent); } From d55112ec7bbffcc8ede5dfd59bd8a7319db66172 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Sat, 11 Jul 2026 17:23:41 +0900 Subject: [PATCH 4/6] Update MkMediaVideo.vue --- packages/frontend/src/components/MkMediaVideo.vue | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index 569fdc628a..508ed10d39 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only ref="playerEl" tabindex="0" :class="[ - $style.videoContainer, + $style.root, (video.isSensitive && prefer.s.highlightSensitiveMedia) && $style.sensitive, ]" @contextmenu.stop @@ -70,7 +70,7 @@ async function reveal() { From 5d92214ccc1986e068b405cd98c0c970e0c033d2 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Sat, 11 Jul 2026 17:31:52 +0900 Subject: [PATCH 5/6] wip --- packages/frontend/src/components/MkImageGallery.item.vue | 3 ++- packages/frontend/src/components/MkImageGallery.vue | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/MkImageGallery.item.vue b/packages/frontend/src/components/MkImageGallery.item.vue index 3aa36172bb..d4969e75f8 100644 --- a/packages/frontend/src/components/MkImageGallery.item.vue +++ b/packages/frontend/src/components/MkImageGallery.item.vue @@ -206,7 +206,7 @@ function calcContentRenderingSize(content: Content) { } const contentRenderingSize = calcContentRenderingSize(props.content); -const contentRenderingRect = contentRenderingSize != null ? { +const getContentRenderingRect = () => contentRenderingSize != null ? { left: (window.innerWidth - contentRenderingSize.width + padding.left - padding.right) / 2, top: (window.innerHeight - contentRenderingSize.height + padding.top - padding.bottom) / 2, width: contentRenderingSize.width, @@ -217,6 +217,7 @@ const transform = ref({ x: 0, y: 0, scale: 1 }); // 元のimg要素の位置・サイズ(とobject-fitの設定値)を取得して、そこからneutralの位置にアニメーションするためのscaleとtranslationを計算する function getScaleAndTranslationForSourceElement() { const sourceElement = props.content.sourceElement; + const contentRenderingRect = getContentRenderingRect(); if (sourceElement == null || contentRenderingRect == null) return null; return calculateSourceTransform({ diff --git a/packages/frontend/src/components/MkImageGallery.vue b/packages/frontend/src/components/MkImageGallery.vue index cebef46661..ff72fdebc6 100644 --- a/packages/frontend/src/components/MkImageGallery.vue +++ b/packages/frontend/src/components/MkImageGallery.vue @@ -88,6 +88,12 @@ const contentsOffset = ref(currentIndex.value * -window.innerWidth); const enableSlideTransition = ref(false); let currentScrollLeft = contentsOffset.value; +// TODO: unmountで解除 +window.addEventListener('resize', () => { + screenWidth.value = window.innerWidth; + scrollToCurrentIndex(); +}); + function onHorizontalSwipe(offset: number) { if (currentIndex.value === 0 && offset > 0) { // これ以上戻れない contentsOffset.value = currentScrollLeft + (offset / 3); From 9db840c17b6b91654f92ca1b3e7b8390b79d9d27 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Sat, 11 Jul 2026 18:10:10 +0900 Subject: [PATCH 6/6] Update MkImageGallery.vue --- .../frontend/src/components/MkImageGallery.vue | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/MkImageGallery.vue b/packages/frontend/src/components/MkImageGallery.vue index ff72fdebc6..859f8cc9db 100644 --- a/packages/frontend/src/components/MkImageGallery.vue +++ b/packages/frontend/src/components/MkImageGallery.vue @@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only @afterLeave="onAfterLeave" > -
+
onItemClose(), + }, + 'arrowleft': { + allowRepeat: true, + callback: () => onPrev(), + }, + 'arrowright': { + allowRepeat: true, + callback: () => onNext(), + }, +} as const satisfies Keymap;