Merge branch 'develop' of https://github.com/misskey-dev/misskey into develop

This commit is contained in:
tamaina 2023-04-15 16:18:11 +00:00
commit d2aba9b693
10 changed files with 142 additions and 36 deletions

View File

@ -4,7 +4,10 @@
"service": "app", "service": "app",
"workspaceFolder": "/workspace", "workspaceFolder": "/workspace",
"features": { "features": {
"ghcr.io/devcontainers-contrib/features/pnpm:2": {} "ghcr.io/devcontainers-contrib/features/pnpm:2": {},
"ghcr.io/devcontainers/features/node:1": {
"version": "18.16.0"
}
}, },
"forwardPorts": [3000], "forwardPorts": [3000],
"postCreateCommand": "sudo chmod 755 .devcontainer/init.sh && .devcontainer/init.sh", "postCreateCommand": "sudo chmod 755 .devcontainer/init.sh && .devcontainer/init.sh",

View File

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

View File

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

View File

@ -1,6 +1,6 @@
<template> <template>
<div v-if="hide" :class="$style.hidden" @click="hide = false"> <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.hiddenText">
<div :class="$style.hiddenTextWrapper"> <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> <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" :href="image.url"
:title="image.name" :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> </a>
<div :class="$style.indicators"> <div :class="$style.indicators">
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div> <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 hide = $ref(true);
let darkMode: boolean = $ref(defaultStore.state.darkMode); 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 ? props.image.url
: defaultStore.state.disableShowingAnimatedImages : defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(props.image.url) ? getStaticImageUrl(props.image.url)
: props.image.thumbnailUrl; : props.image.thumbnailUrl
);
// Plugin:register_note_view_interruptor 使watch // Plugin:register_note_view_interruptor 使watch
watch(() => props.image, () => { watch(() => props.image, () => {

View File

@ -2,10 +2,17 @@
<div> <div>
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/> <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 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))"> <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"/> <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="media.id" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw"/> <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> </template>
</div> </div>
</div> </div>
@ -13,7 +20,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, useCssModule } from 'vue'; import { onMounted, ref, useCssModule, watch } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import PhotoSwipeLightbox from 'photoswipe/lightbox'; import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe'; import PhotoSwipe from 'photoswipe';
@ -23,6 +30,7 @@ import XImage from '@/components/MkMediaImage.vue';
import XVideo from '@/components/MkMediaVideo.vue'; import XVideo from '@/components/MkMediaVideo.vue';
import * as os from '@/os'; import * as os from '@/os';
import { FILE_TYPE_BROWSERSAFE } from '@/const'; import { FILE_TYPE_BROWSERSAFE } from '@/const';
import { defaultStore } from '@/store';
const props = defineProps<{ const props = defineProps<{
mediaList: misskey.entities.DriveFile[]; mediaList: misskey.entities.DriveFile[];
@ -31,11 +39,42 @@ const props = defineProps<{
const $style = useCssModule(); const $style = useCssModule();
const gallery = ref(null); const gallery = ref<HTMLDivElement>();
const pswpZIndex = os.claimZIndex('middle'); const pswpZIndex = os.claimZIndex('middle');
document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString()); document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
const count = $computed(() => props.mediaList.filter(media => previewable(media)).length); 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(() => { onMounted(() => {
const lightbox = new PhotoSwipeLightbox({ const lightbox = new PhotoSwipeLightbox({
dataSource: props.mediaList dataSource: props.mediaList
@ -155,12 +194,36 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
display: grid; display: grid;
grid-gap: 8px; grid-gap: 8px;
// for webkit
height: 100%; height: 100%;
&.n1 { &.n1 {
aspect-ratio: 16/9;
grid-template-rows: 1fr; 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 { &.n2 {

View File

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

View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, h } from 'vue'; import { VNode, defineComponent, h } from 'vue';
import MkRadio from './MkRadio.vue'; import MkRadio from './MkRadio.vue';
export default defineComponent({ export default defineComponent({
@ -22,31 +22,33 @@ export default defineComponent({
}, },
}, },
render() { render() {
console.log(this.$slots, this.$slots.label && this.$slots.label());
if (!this.$slots.default) return null;
let options = this.$slots.default(); let options = this.$slots.default();
const label = this.$slots.label && this.$slots.label(); const label = this.$slots.label && this.$slots.label();
const caption = this.$slots.caption && this.$slots.caption(); const caption = this.$slots.caption && this.$slots.caption();
// Fragment // 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', { return h('div', {
class: 'novjtcto', class: 'novjtcto',
}, [ }, [
...(label ? [h('div', { ...(label ? [h('div', {
class: 'label', class: 'label',
}, [label])] : []), }, label)] : []),
h('div', { h('div', {
class: 'body', class: 'body',
}, options.map(option => h(MkRadio, { }, options.map(option => h(MkRadio, {
key: option.key, key: option.key,
value: option.props.value, value: option.props?.value,
modelValue: this.value, modelValue: this.value,
'onUpdate:modelValue': value => this.value = value, 'onUpdate:modelValue': value => this.value = value,
}, option.children)), }, () => option.children)),
), ),
...(caption ? [h('div', { ...(caption ? [h('div', {
class: 'caption', class: 'caption',
}, [caption])] : []), }, caption)] : []),
]); ]);
}, },
}); });

View File

@ -81,6 +81,14 @@
<option value="2"><span style="font-size: 16px;">Aa</span></option> <option value="2"><span style="font-size: 16px;">Aa</span></option>
<option value="3"><span style="font-size: 17px;">Aa</span></option> <option value="3"><span style="font-size: 17px;">Aa</span></option>
</MkRadios> </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> </div>
</FormSection> </FormSection>
@ -172,6 +180,7 @@ const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfin
const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu')); const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars')); const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
const aiChanMode = computed(defaultStore.makeGetterSetter('aiChanMode')); const aiChanMode = computed(defaultStore.makeGetterSetter('aiChanMode'));
const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance'));
watch(lang, () => { watch(lang, () => {
miLocalStorage.setItem('lang', lang.value as string); miLocalStorage.setItem('lang', lang.value as string);

View File

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

View File

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