wip

2026-07-25 07:25:04 +02:00 · 2026-07-11 13:03:26 +09:00
parent 10df70b3f5
commit bf7986f2a4
3 changed files with 58 additions and 108 deletions
--- 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>
--- 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;
--- 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>