Merge branch 'improve-image-viewer' into improve-image-viewer-1

packages/frontend/src/components/MkImageGallery.item.vue

@@ -225,7 +225,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,
@@ -263,6 +263,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({

packages/frontend/src/components/MkImageGallery.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@afterLeave="onAfterLeave"
 >
 	<!-- v-ifを使うとfalseになったとき(transitionが行われている間)子コンポーネントの更新が停止するのか子コンポーネントがアニメーションされなくなる -->
-	<div v-show="showing" ref="rootEl" :class="$style.root" :style="{ zIndex }">
+	<div v-show="showing" ref="rootEl" v-hotkey.global="keymap" :class="$style.root" :style="{ zIndex }">
 		<div :class="[$style.bg]" class="_modalBg"></div>
 		<div ref="mainEl" :class="$style.main">
 			<div
@@ -51,6 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, watch, nextTick } from 'vue';
 import XItem from './MkImageGallery.item.vue';
 import type { Content } from './MkImageGallery.item.vue';
+import type { Keymap } from '@/utility/hotkey.js';
 import * as os from '@/os.js';
 import { prefer } from '@/preferences.js';
 import { isTouchUsing } from '@/utility/touch.js';
@@ -101,6 +102,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);
@@ -160,6 +167,21 @@ function onAfterLeave() {
 	}
 	emit('closed');
 }
+
+const keymap = {
+	'esc': {
+		allowRepeat: true,
+		callback: () => onItemClose(),
+	},
+	'arrowleft': {
+		allowRepeat: true,
+		callback: () => onPrev(),
+	},
+	'arrowright': {
+		allowRepeat: true,
+		callback: () => onNext(),
+	},
+} as const satisfies Keymap;
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkVideoContol.vue

@@ -34,10 +34,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<button class="_button" :class="$style.controlButton" @click="showMenu">
 			<i class="ti ti-settings"></i>
 		</button>
-		<button class="_button" :class="$style.controlButton" @click="toggleFullscreen">
-			<i v-if="isFullscreen" class="ti ti-arrows-minimize"></i>
-			<i v-else class="ti ti-arrows-maximize"></i>
-		</button>
 	</div>
 </div>
 </template>
@@ -111,11 +107,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);
@@ -152,9 +143,6 @@ function togglePlayPause() {
 	}
 }
 
-function toggleFullscreen() {
-}
-
 function togglePictureInPicture() {
 	if (window.document.pictureInPictureElement) {
 		window.document.exitPictureInPicture();