amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance(client): 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にする (#10452)

Browse Source 
* ✌️

* fix

* ✌️

* 422px上限

* 334

* min-height: 130px

* 64px

* fix

* wip

* ✌️

* fix

* max-height: none

* MkImgWithBlurHashでratioを計算する

* wip

* fix

* fix?

* Revert "fix?"

This reverts commit e39d832dd1498ae58a2372b6dc527585ae165bac.

* Revert "fix"

This reverts commit 15be36ba55a411c5aac69037f693e1d922451f15.

* Revert "wip"

This reverts commit af7d86f69dd89e138d98f1285976b502f382e6c6.

* fix

* Revert "Revert "wip""

This reverts commit bb0036ae22ea2bca896ee9bb500bae624e81049b.

* Revert "Revert "fix""

This reverts commit c1d94a45c575cc843e061a0c55df1106bf033035.

* Revert "Revert "fix?""

This reverts commit 9cb4fbfd96db9adaf92cf3ec1f6f15b1b257d7b3.

* fix

* use clamp

* readable

* add 1:1, 3:4

* moveComment

* 3:4 → 2:3

* fix

* default

* fallback

* Revert "fallback"

This reverts commit 741717dd4903ed89b6536d8ea1ca061aacfa7dcb.

* Fix?(server): Content-Dispositionのパースでエラーが発生した場合にもダウンロードが完了するように
#10626
This commit is contained in:
tamaina 2023-04-15 21:35:19 +09:00 committed by GitHub
parent 38fdc73d01
commit 15761a0fa8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 138 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
locales/ja-JP.yml
View File

@ -475,6 +475,8 @@ createAccount: "アカウントを作成"
existingAccount: "既存のアカウント"
regenerate: "再生成"
fontSize: "フォントサイズ"
mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
limitTo: "{x}を上限に"
noFollowRequests: "フォロー申請はありません"
openImageInNewTab: "画像を新しいタブで開く"
dashboard: "ダッシュボード"

55
packages/frontend/src/components/MkImgWithBlurhash.vue
View File

@ -1,12 +1,12 @@
<template>
<div :class="[$style.root, { [$style.cover]: cover }]" :title="title">
<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="size" :height="size" :title="title"/>
<img v-if="src && !forceBlurhash" :class="$style.img" :src="src" :title="title" :alt="alt" @load="onLoad"/>
<div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="width" :height="height" :title="title ?? ''"/>
<img v-if="src && !forceBlurhash" v-show="loaded" :class="$style.img" :src="src" :title="title ?? ''" :alt="alt ?? ''" @load="onLoad"/>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, watch } from 'vue';
import { decode } from 'blurhash';
const props = withDefaults(defineProps<{
@ -14,34 +14,55 @@ const props = withDefaults(defineProps<{
hash?: string;
alt?: string | null;
title?: string | null;
size?: number;
height?: number;
width?: number;
cover?: boolean;
forceBlurhash?: boolean;
}>(), {
src: null,
alt: '',
title: null,
size: 64,
height: 64,
width: 64,
cover: true,
forceBlurhash: false,
});
const canvas = $shallowRef<HTMLCanvasElement>();
let loaded = $ref(false);
function draw() {
if (props.hash == null) return;
const pixels = decode(props.hash, props.size, props.size);
const ctx = canvas.getContext('2d');
const imageData = ctx!.createImageData(props.size, props.size);
imageData.data.set(pixels);
ctx!.putImageData(imageData, 0, 0);
}
let width = $ref(props.width);
let height = $ref(props.height);
function onLoad() {
loaded = true;
}
watch([() => props.width, () => props.height], () => {
const ratio = props.width / props.height;
if (ratio > 1) {
width = Math.round(64 * ratio);
height = 64;
} else {
width = 64;
height = Math.round(64 / ratio);
}
}, {
immediate: true,
});
function draw() {
if (props.hash == null) return;
const pixels = decode(props.hash, width, height);
const ctx = canvas.getContext('2d');
const imageData = ctx!.createImageData(width, height);
imageData.data.set(pixels);
ctx!.putImageData(imageData, 0, 0);
}
watch(() => props.hash, () => {
draw();
});
onMounted(() => {
draw();
});
@ -54,6 +75,7 @@ onMounted(() => {
height: 100%;
&.cover {
> .canvas,
> .img {
object-fit: cover;
}
@ -68,8 +90,7 @@ onMounted(() => {
}
.canvas {
position: absolute;
object-fit: cover;
object-fit: contain;
}
.img {

9
packages/frontend/src/components/MkMediaImage.vue
View File

@ -1,6 +1,6 @@
<template>
<div v-if="hide" :class="$style.hidden" @click="hide = false">
<ImgWithBlurhash style="filter: brightness(0.5);" :hash="image.blurhash" :title="image.comment" :alt="image.comment" :force-blurhash="defaultStore.state.enableDataSaverMode" />
<ImgWithBlurhash style="filter: brightness(0.5);" :hash="image.blurhash" :title="image.comment" :alt="image.comment" :width="image.properties.width" :height="image.properties.height" :force-blurhash="defaultStore.state.enableDataSaverMode" />
<div :class="$style.hiddenText">
<div :class="$style.hiddenTextWrapper">
<b v-if="image.isSensitive" style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.image}${image.size ? ' ' + bytes(image.size) : ''})` : '' }}</b>
@ -15,7 +15,7 @@
:href="image.url"
:title="image.name"
>
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :cover="false"/>
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :width="image.properties.width" :height="image.properties.height" :cover="false"/>
</a>
<div :class="$style.indicators">
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
@ -42,11 +42,12 @@ const props = defineProps<{
let hide = $ref(true);
let darkMode: boolean = $ref(defaultStore.state.darkMode);
const url = (props.raw || defaultStore.state.loadRawImages)
const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
? props.image.url
: defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(props.image.url)
: props.image.thumbnailUrl;
: props.image.thumbnailUrl
);
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
watch(() => props.image, () => {

77
packages/frontend/src/components/MkMediaList.vue
View File

@ -2,10 +2,17 @@
<div>
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
<div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container">
<div ref="gallery" :class="[$style.medias, count <= 4 ? $style['n' + count] : $style.nMany]">
<div
ref="gallery"
:class="[
$style.medias,
count <= 4 ? $style['n' + count] : $style.nMany,
$style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`]
]"
>
<template v-for="media in mediaList.filter(media => previewable(media))">
<XVideo v-if="media.type.startsWith('video')" :key="media.id" :class="$style.media" :video="media"/>
<XImage v-else-if="media.type.startsWith('image')" :key="media.id" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw"/>
<XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :class="$style.media" :video="media"/>
<XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw"/>
</template>
</div>
</div>
@ -13,7 +20,7 @@
</template>
<script lang="ts" setup>
import { onMounted, ref, useCssModule } from 'vue';
import { onMounted, ref, useCssModule, watch } from 'vue';
import * as misskey from 'misskey-js';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe';
@ -23,6 +30,7 @@ import XImage from '@/components/MkMediaImage.vue';
import XVideo from '@/components/MkMediaVideo.vue';
import * as os from '@/os';
import { FILE_TYPE_BROWSERSAFE } from '@/const';
import { defaultStore } from '@/store';
const props = defineProps<{
mediaList: misskey.entities.DriveFile[];
@ -31,11 +39,42 @@ const props = defineProps<{
const $style = useCssModule();
const gallery = ref(null);
const gallery = ref<HTMLDivElement>();
const pswpZIndex = os.claimZIndex('middle');
document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
function calcAspectRatio() {
if (!gallery.value) return;
let img = props.mediaList[0];
if (props.mediaList.length !== 1 || !(img.properties.width && img.properties.height)) {
gallery.value.style.aspectRatio = '';
return;
}
// アスペクト比上限設定では、横長の場合は高さを縮小させる
const ratioMax = (ratio: number) => `${Math.max(ratio, img.properties.width / img.properties.height).toString()} / 1`;
switch (defaultStore.state.mediaListWithOneImageAppearance) {
case '16_9':
gallery.value.style.aspectRatio = ratioMax(16 / 9);
break;
case '1_1':
gallery.value.style.aspectRatio = ratioMax(1);
break;
case '2_3':
gallery.value.style.aspectRatio = ratioMax(2 / 3);
break;
default:
gallery.value.style.aspectRatio = '';
break;
}
}
watch([defaultStore.reactiveState.mediaListWithOneImageAppearance, gallery], () => calcAspectRatio());
onMounted(() => {
const lightbox = new PhotoSwipeLightbox({
dataSource: props.mediaList
@ -155,12 +194,36 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
display: grid;
grid-gap: 8px;
// for webkit
height: 100%;
&.n1 {
aspect-ratio: 16/9;
grid-template-rows: 1fr;
// default (expand)
min-height: 64px;
max-height: clamp(
64px,
calc(var(--containerHeight, 100svh) * 0.5), // but --containerHeight can broken (too big)
min(334px, 50vh)
);
&.n116_9 {
min-height: none;
max-height: none;
aspect-ratio: 16 / 9; // fallback
}
&.n11_1{
min-height: none;
max-height: none;
aspect-ratio: 1 / 1; // fallback
}
&.n12_3 {
min-height: none;
max-height: none;
aspect-ratio: 2 / 3; // fallback
}
}
&.n2 {

2
packages/frontend/src/components/MkRadio.vue
View File

@ -24,7 +24,7 @@ import { } from 'vue';
const props = defineProps<{
modelValue: any;
value: any;
disabled: boolean;
disabled?: boolean;
}>();
const emit = defineEmits<{

14
packages/frontend/src/components/MkRadios.vue
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { defineComponent, h } from 'vue';
import { VNode, defineComponent, h } from 'vue';
import MkRadio from './MkRadio.vue';
export default defineComponent({
@ -22,31 +22,33 @@ export default defineComponent({
},
},
render() {
console.log(this.$slots, this.$slots.label && this.$slots.label());
if (!this.$slots.default) return null;
let options = this.$slots.default();
const label = this.$slots.label && this.$slots.label();
const caption = this.$slots.caption && this.$slots.caption();
// なぜかFragmentになることがあるため
if (options.length === 1 && options[0].props == null) options = options[0].children;
if (options.length === 1 && options[0].props == null) options = options[0].children as VNode[];
return h('div', {
class: 'novjtcto',
}, [
...(label ? [h('div', {
class: 'label',
}, [label])] : []),
}, label)] : []),
h('div', {
class: 'body',
}, options.map(option => h(MkRadio, {
key: option.key,
value: option.props.value,
value: option.props?.value,
modelValue: this.value,
'onUpdate:modelValue': value => this.value = value,
}, option.children)),
}, () => option.children)),
),
...(caption ? [h('div', {
class: 'caption',
}, [caption])] : []),
}, caption)] : []),
]);
},
});

9
packages/frontend/src/pages/settings/general.vue
View File

@ -81,6 +81,14 @@
<option value="2"><span style="font-size: 16px;">Aa</span></option>
<option value="3"><span style="font-size: 17px;">Aa</span></option>
</MkRadios>
<MkRadios v-model="mediaListWithOneImageAppearance">
<template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template>
<option value="expand">{{ i18n.ts.default }}</option>
<option value="16_9">{{ i18n.t('limitTo', { x: '16:9' }) }}</option>
<option value="1_1">{{ i18n.t('limitTo', { x: '1:1' }) }}</option>
<option value="2_3">{{ i18n.t('limitTo', { x: '2:3' }) }}</option>
</MkRadios>
</div>
</FormSection>
@ -172,6 +180,7 @@ const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfin
const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
const aiChanMode = computed(defaultStore.makeGetterSetter('aiChanMode'));
const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance'));
watch(lang, () => {
miLocalStorage.setItem('lang', lang.value as string);

1
packages/frontend/src/pages/settings/preferences-backups.vue
View File

@ -88,6 +88,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
'squareAvatars',
'numberOfPageCache',
'aiChanMode',
'mediaListWithOneImageAppearance',
];
const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
'lightTheme',

4
packages/frontend/src/store.ts
View File

@ -310,6 +310,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: false,
},
mediaListWithOneImageAppearance: {
where: 'device',
default: 'expand' as 'expand' | '16_9' | '1_1' | '2_3',
},
}));
// TODO: 他のタブと永続化されたstateを同期