Revert "enhance(frontend): データセーバーモードで隠れる画像を増やす等 (#11779)"

This reverts commit 22d966e92d.
2023-09-08 14:15:35 +09:00 · 2023-09-08 14:15:35 +09:00 · cd7ab326cd
parent ff9a65e8fa
commit cd7ab326cd
7 changed files with 42 additions and 75 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -37,7 +37,6 @@
 - Enhance: ノート検索にローカルのみ検索可能なオプションの追加
 - Enhance: AiScriptで`LOCALE`として現在の設定言語を取得できるように
 - Enhance: Renote自体を通報できるように
- Enhance: データセーバーモードの強化
 - Enhance: Renoteを管理者権限で削除可能に
 - `$[rainbow ]`記法が、動きのあるMFMが無効になっていても使用できるようになりました
 - Playの操作を行うAPI TokenをAPIコンソールから発行できるように
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@ -4,41 +4,34 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div :class="hide ? $style.hidden : $style.visible" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click.stop="onclick">
-	<component
-		:is="disableImageLink ? 'div' : 'a'"
-		v-bind="disableImageLink ? {
-			title: image.name,
-			class: $style.imageContainer,
-		} : {
-			title: image.name,
-			class: $style.imageContainer,
-			href: image.url,
-			style: 'cursor: zoom-in;'
-		}"
+<div :class="hide ? $style.hidden : $style.visible" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click="onclick">
+	<a
+		:class="$style.imageContainer"
+		:href="image.url"
+		:title="image.name"
 	>
 		<ImgWithBlurhash
 			:hash="image.blurhash"
 			:src="(defaultStore.state.enableDataSaverMode && hide) ? null : url"
 			:forceBlurhash="hide"
-			:cover="hide || cover"
+			:cover="hide"
 			:alt="image.comment || image.name"
 			:title="image.comment || image.name"
 			:width="image.properties.width"
 			:height="image.properties.height"
 			:style="hide ? 'filter: brightness(0.5);' : null"
 		/>
-	</component>
+	</a>
 	<template v-if="hide">
 		<div :class="$style.hiddenText">
 			<div :class="$style.hiddenTextWrapper">
 				<b v-if="image.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.image}${image.size ? ' ' + bytes(image.size) : ''})` : '' }}</b>
 				<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.enableDataSaverMode && image.size ? bytes(image.size) : i18n.ts.image }}</b>
-				<span v-if="controls" style="display: block;">{{ i18n.ts.clickToShow }}</span>
+				<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
 			</div>
 		</div>
 	</template>
-	<template v-else-if="controls">
+	<template v-else>
 		<div :class="$style.indicators">
 			<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
 			<div v-if="image.comment" :class="$style.indicator">ALT</div>
@ -61,17 +54,10 @@ import { i18n } from '@/i18n';
 import * as os from '@/os';
 import { iAmModerator } from '@/account';

-const props = withDefaults(defineProps<{
+const props = defineProps<{
 	image: Misskey.entities.DriveFile;
 	raw?: boolean;
-	cover?: boolean;
-	disableImageLink?: boolean;
-	controls?: boolean;
-}>(), {
-	cover: false,
-	disableImageLink: false,
-	controls: true,
-});
+}>();

 let hide = $ref(true);
 let darkMode: boolean = $ref(defaultStore.state.darkMode);
@ -84,9 +70,6 @@ const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
 );

 function onclick() {
-	if (!props.controls) {
-		return;
-	}
 	if (hide) {
 		hide = false;
 	}
@ -184,6 +167,7 @@ function showMenu(ev: MouseEvent) {

 .imageContainer {
 	display: block;
+	cursor: zoom-in;
 	overflow: hidden;
 	width: 100%;
 	height: 100%;
--- a/packages/frontend/src/components/MkPagePreview.vue
+++ b/packages/frontend/src/components/MkPagePreview.vue
@ -5,15 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only

 <template>
 <MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
-	<div v-if="page.eyeCatchingImage" class="thumbnail">
-		<MediaImage
-			:image="page.eyeCatchingImage"
-			:disableImageLink="true"
-			:controls="false"
-			:cover="true"
-			:class="$style.eyeCatchingImageRoot"
-		/>
-	</div>
+	<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
 	<article>
 		<header>
 			<h1 :title="page.title">{{ page.title }}</h1>
@ -31,22 +23,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
 import { userName } from '@/filters/user';
-import MediaImage from '@/components/MkMediaImage.vue';

 const props = defineProps<{
 	page: Misskey.entities.Page;
 }>();
 </script>

-<style module>
-.eyeCatchingImageRoot {
-	width: 100%;
-	height: 200px;
-	border-radius: var(--radius) var(--radius) 0 0;
-	overflow: hidden;
-}
-</style>
-
 <style lang="scss" scoped>
 .vhpxefrj {
 	display: block;
@ -57,15 +39,32 @@ const props = defineProps<{
 	}

 	> .thumbnail {
+		width: 100%;
+		height: 200px;
+		background-position: center;
+		background-size: cover;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		> button {
+			font-size: 3.5em;
+			opacity: 0.7;
+
+			&:hover {
+				font-size: 4em;
+				opacity: 0.9;
+			}
+		}
+
 		& + article {
-			border-radius: 0 0 var(--radius) var(--radius);
+			left: 100px;
+			width: calc(100% - 100px);
 		}
 	}

 	> article {
-		background-color: var(--panel);
 		padding: 16px;
-		border-radius: var(--radius);

 		> header {
 			margin-bottom: 8px;
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 <div v-else>
 	<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url.substring(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
-		<div v-if="thumbnail" :class="$style.thumbnail" :style="defaultStore.state.enableDataSaverMode ? '' : `background-image: url('${thumbnail}')`">
+		<div v-if="thumbnail" :class="$style.thumbnail" :style="`background-image: url('${thumbnail}')`">
 		</div>
 		<article :class="$style.body">
 			<header :class="$style.header">
@ -260,7 +260,6 @@ onUnmounted(() => {
 	height: 100%;
 	background-position: center;
 	background-size: cover;
-	background-color: var(--bg);
 	display: flex;
 	justify-content: center;
 	align-items: center;
--- a/packages/frontend/src/components/page/page.image.vue
+++ b/packages/frontend/src/components/page/page.image.vue
@ -5,24 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-only

 <template>
 <div>
-	<MediaImage
-		v-if="image"
-		:image="image"
-		:disableImageLink="true"
-	/>
+	<ImgWithBlurhash v-if="image" style="max-width: 100%;" :hash="image.blurhash" :src="image.url" :alt="image.comment" :title="image.comment" :width="image.properties.width" :height="image.properties.height" :cover="false"/>
 </div>
 </template>

 <script lang="ts" setup>
-import { ref } from 'vue';
+import { } from 'vue';
 import * as Misskey from 'misskey-js';
 import { ImageBlock } from './block.type';
-import MediaImage from '@/components/MkMediaImage.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';

 const props = defineProps<{
 	block: ImageBlock,
 	page: Misskey.entities.Page,
 }>();

-const image = ref<Misskey.entities.DriveFile>(props.page.attachedFiles.find(x => x.id === props.block.fileId));
+const image = props.page.attachedFiles.find(x => x.id === props.block.fileId);
 </script>
--- a/packages/frontend/src/components/page/page.vue
+++ b/packages/frontend/src/components/page/page.vue
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }" class="_gaps_s">
+<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }">
 	<XBlock v-for="child in page.content" :key="child.id" :page="page" :block="child" :h="2"/>
 </div>
 </template>
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@ -16,13 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				-->
 					<div class="banner">
-						<MkMediaImage
-							v-if="page.eyeCatchingImageId"
-							:image="page.eyeCatchingImage"
-							:cover="true"
-							:disableImageLink="true"
-							class="thumbnail"
-						/>
+						<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
 					</div>
 					<div class="content">
 						<XPage :page="page"/>
@ -80,7 +74,6 @@ import XPage from '@/components/page/page.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { url } from '@/config';
-import MkMediaImage from '@/components/MkMediaImage.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import MkContainer from '@/components/MkContainer.vue';
 import MkPagination from '@/components/MkPagination.vue';
@ -211,14 +204,11 @@ definePageMetadata(computed(() => page ? {
 		}

 		> .banner {
-			> .thumbnail {
+			> img {
 				// TODO: 良い感じのアスペクト比で表示
 				display: block;
 				width: 100%;
-				height: auto;
-				aspect-ratio: 3/1;
-				border-radius: var(--radius);
-				overflow: hidden;
+				height: 150px;
 				object-fit: cover;
 			}
 		}