From bf7986f2a48ea6977fec4a4e9b93644804f1d8e5 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 11 Jul 2026 13:03:26 +0900
Subject: [PATCH] wip

---
 .../src/components/MkImageGallery.item.vue    |  35 +++---
 .../frontend/src/components/MkMediaRange.vue  |  26 ++---
 .../frontend/src/components/MkVideoContol.vue | 105 ++++++------------
 3 files changed, 58 insertions(+), 108 deletions(-)

diff --git a/packages/frontend/src/components/MkImageGallery.item.vue b/packages/frontend/src/components/MkImageGallery.item.vue
index 8d1944cdc2..7b5892b6ea 100644
--- a/packages/frontend/src/components/MkImageGallery.item.vue
+++ b/packages/frontend/src/components/MkImageGallery.item.vue
@@ -57,16 +57,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 						@loadedmetadata="originalContentLoaded = true"
 					></video>
 				</template>
+
+				<div v-if="activated && !originalContentLoaded" :class="$style.loading">
+					<MkLoading/>
+				</div>
 			</div>
 		</div>
 	</div>
 
-	<div v-if="activated && !originalContentLoaded" :class="$style.loading">
-		<MkLoading/>
-	</div>
-
 	<div :class="[$style.header, { [$style.infoShowing]: infoShowing && !isZooming }]">
-		<div :class="$style.title">
+		<div :class="$style.title" class="_acrylic">
 			{{ content.comment ?? content.filename }}
 		</div>
 	</div>
@@ -168,18 +168,18 @@ onMounted(() => {
 	infoShowing.value = true;
 });
 
-const headerSize = 50;
+const headerSize = 30;
 const footerSize = props.content.type === 'video' ? 80 : 0;
 
 const padding = deviceKind === 'smartphone' ? {
-	top: Math.max(0, headerSize + 5),
+	top: Math.max(0, headerSize + 10),
 	right: 0,
-	bottom: Math.max(0, footerSize + 5),
+	bottom: Math.max(0, footerSize + 10),
 	left: 0,
 } : {
-	top: Math.max(30, headerSize + 5),
+	top: Math.max(30, headerSize + 10),
 	right: 30,
-	bottom: Math.max(30, footerSize + 5),
+	bottom: Math.max(30, footerSize + 10),
 	left: 30,
 };
 
@@ -642,8 +642,6 @@ function onCLick() {
 	left: 0;
 	right: 0;
 	height: v-bind("footerSize + 'px'");
-	display: grid;
-	place-items: center;
 	opacity: 0;
 	transition: opacity 200ms ease, bottom 200ms ease;
 }
@@ -657,8 +655,6 @@ function onCLick() {
 	left: 0;
 	right: 0;
 	height: v-bind("headerSize + 'px'");
-	display: grid;
-	place-items: center;
 	opacity: 0;
 	transition: opacity 200ms ease, top 200ms ease;
 }
@@ -670,21 +666,20 @@ function onCLick() {
 .title {
 	width: max-content;
 	margin: auto;
-	padding: 6px 12px;
+	padding: 6px 14px;
 	box-sizing: border-box;
-	border-radius: 10px;
-	background: var(--MI_THEME-panel);
+	border-radius: 0 0 10px 10px;
 	font-size: 85%;
-	color: var(--MI_THEME-fg);
 }
 
 .mediaControl {
 	width: 100%;
+	height: 100%;
 	max-width: min(1000px, calc(100% - 16px));
 	box-sizing: border-box;
-	padding: 8px;
+	padding: 8px 12px;
 	margin: auto;
 	background: var(--MI_THEME-panel);
-	border-radius: 10px;
+	border-radius: 12px 12px 0 0;
 }
 </style>
diff --git a/packages/frontend/src/components/MkMediaRange.vue b/packages/frontend/src/components/MkMediaRange.vue
index 9689dc5cfa..e17d97c06c 100644
--- a/packages/frontend/src/components/MkMediaRange.vue
+++ b/packages/frontend/src/components/MkMediaRange.vue
@@ -5,11 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <!-- Media系専用のinput range -->
 <template>
-<div :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--MI_THEME-scrollbarHandle);'">
-	<div :class="$style.controlsSeekbar">
-		<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
-		<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
-	</div>
+<div :class="$style.controlsSeekbar">
+	<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
+	<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
 </div>
 </template>
 
@@ -18,10 +16,8 @@ import { computed } from 'vue';
 
 withDefaults(defineProps<{
 	buffer?: number;
-	sliderBgWhite?: boolean;
 }>(), {
 	buffer: undefined,
-	sliderBgWhite: false,
 });
 
 const emit = defineEmits<{
@@ -38,6 +34,8 @@ const modelValue = computed({
 <style lang="scss" module>
 .controlsSeekbar {
 	position: relative;
+	--sliderBg: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15));
+	--thumbSize: 17px;
 }
 
 .seek {
@@ -49,7 +47,7 @@ const modelValue = computed({
 	border-radius: 26px;
 	color: var(--MI_THEME-accent);
 	display: block;
-	height: 19px;
+	height: 24px;
 	margin: 0;
 	min-width: 0;
 	padding: 0;
@@ -83,11 +81,11 @@ const modelValue = computed({
 		border: 0;
 		border-radius: 100%;
 		box-shadow: 0 1px 1px rgba(35, 40, 47, .15),0 0 0 1px rgba(35, 40, 47, .2);
-		height: 13px;
-		margin-top: -4px;
+		height: var(--thumbSize);
+		margin-top: calc((5px - var(--thumbSize)) / 2);
 		position: relative;
 		transition: all .2s ease;
-		width: 13px;
+		width: var(--thumbSize);
 
 		&:active {
 			box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .15), 0 0 0 3px rgba(255, 255, 255, .5);
@@ -99,10 +97,10 @@ const modelValue = computed({
 		border: 0;
 		border-radius: 100%;
 		box-shadow: 0 1px 1px rgba(35, 40, 47, .15),0 0 0 1px rgba(35, 40, 47, .2);
-		height: 13px;
+		height: var(--thumbSize);
 		position: relative;
 		transition: all .2s ease;
-		width: 13px;
+		width: var(--thumbSize);
 
 		&:active {
 			box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .15), 0 0 0 3px rgba(255, 255, 255, .5);
@@ -119,7 +117,7 @@ const modelValue = computed({
 .buffer {
 	appearance: none;
 	background: transparent;
-	color: var(--sliderBg);
+	color: color(from var(--MI_THEME-accent) srgb r g b / 0.25);
 	border: 0;
 	border-radius: 99rem;
 	height: 5px;
diff --git a/packages/frontend/src/components/MkVideoContol.vue b/packages/frontend/src/components/MkVideoContol.vue
index 6bd4172249..776377c949 100644
--- a/packages/frontend/src/components/MkVideoContol.vue
+++ b/packages/frontend/src/components/MkVideoContol.vue
@@ -5,13 +5,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
+	<div :class="[$style.seekbar]">
+		<MkMediaRange
+			v-model="rangePercent"
+			:buffer="bufferedDataRatio"
+		/>
+	</div>
+
 	<div :class="[$style.controlsChild, $style.controlsLeft]">
 		<button class="_button" :class="$style.controlButton" @click="togglePlayPause">
-			<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
-			<i v-else class="ti ti-player-play-filled"></i>
+			<i v-if="isPlaying" class="ti ti-player-pause"></i>
+			<i v-else class="ti ti-player-play"></i>
 		</button>
+
+		<div :class="[$style.controlsChild, $style.controlsTime]">{{ hms(elapsedTimeMs) }} / {{ hms(durationMs) }}</div>
+	</div>
+	<div :class="[$style.controlsChild, $style.controlsCenter]">
 	</div>
 	<div :class="[$style.controlsChild, $style.controlsRight]">
+		<button class="_button" :class="$style.controlButton" @click="toggleMute">
+			<i v-if="volume === 0" class="ti ti-volume-3"></i>
+			<i v-else class="ti ti-volume"></i>
+		</button>
+		<MkMediaRange
+			v-model="volume"
+			:class="$style.volumeSeekbar"
+		/>
 		<button class="_button" :class="$style.controlButton" @click="showMenu">
 			<i class="ti ti-settings"></i>
 		</button>
@@ -20,24 +39,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<i v-else class="ti ti-arrows-maximize"></i>
 		</button>
 	</div>
-	<div :class="[$style.controlsChild, $style.controlsTime]">{{ hms(elapsedTimeMs) }}</div>
-	<div :class="[$style.controlsChild, $style.controlsVolume]">
-		<button class="_button" :class="$style.controlButton" @click="toggleMute">
-			<i v-if="volume === 0" class="ti ti-volume-3"></i>
-			<i v-else class="ti ti-volume"></i>
-		</button>
-		<MkMediaRange
-			v-model="volume"
-			:sliderBgWhite="true"
-			:class="$style.volumeSeekbar"
-		/>
-	</div>
-	<MkMediaRange
-		v-model="rangePercent"
-		:sliderBgWhite="true"
-		:class="$style.seekbarRoot"
-		:buffer="bufferedDataRatio"
-	/>
 </div>
 </template>
 
@@ -272,31 +273,18 @@ onActivated(() => {
 .root {
 	display: grid;
 	grid-template-areas:
-		"left time . volume right"
-		"seekbar seekbar seekbar seekbar seekbar";
-	grid-template-columns: auto auto 1fr auto auto;
+		"seekbar seekbar seekbar"
+		"left center right";
+	grid-template-columns: auto 1fr auto;
 	align-items: center;
 	gap: 4px 8px;
 	width: 100%;
 }
 
-.active {
-	.videoControls {
-		transform: translateY(0);
-		opacity: 1;
-		pointer-events: auto;
-	}
-
-	.videoOverlayPlayButton {
-		opacity: 1;
-	}
-}
-
 .controlsChild {
 	display: flex;
 	align-items: center;
 	gap: 4px;
-	color: #fff;
 
 	.controlButton {
 		padding: 6px;
@@ -322,9 +310,13 @@ onActivated(() => {
 	grid-area: right;
 }
 
+.controlsCenter {
+	grid-area: center;
+	justify-content: center;
+}
+
 .controlsTime {
-	grid-area: time;
-	font-size: .9rem;
+	font-size: 90%;
 }
 
 .controlsVolume {
@@ -335,42 +327,7 @@ onActivated(() => {
 	}
 }
 
-.seekbarRoot {
+.seekbar {
 	grid-area: seekbar;
-	/* ▼シークバー操作をやりやすくするためにクリックイベントが伝播されないエリアを拡張する */
-	margin: -10px;
-	padding: 10px;
-}
-
-@container (min-width: 500px) {
-	.root {
-		grid-template-areas: "left seekbar time volume right";
-		grid-template-columns: auto 1fr auto auto auto;
-	}
-
-	.controlsVolume {
-		.volumeSeekbar {
-			max-width: 90px;
-			display: block;
-			flex-grow: 1;
-		}
-	}
-}
-
-@container (max-width: 300px) {
-	.root {
-		grid-template-areas:
-			"left . right"
-			"seekbar seekbar seekbar";
-		grid-template-columns: auto 1fr auto;
-	}
-
-	.controlsTime {
-		display: none;
-	}
-
-	.controlsVolume {
-		display: none;
-	}
 }
 </style>