sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): vue v3.4.16以降でタイムラインが正常に表示できない問題を修正 (#13248)

Browse Source 
* fix(frontend): vue v3.4.16でタイムラインが正常に表示できない問題を修正

* type

* Revert "fix: downgrade vue to 3.4.15"

This reverts commit e12369ac13.

* Update pnpm-lock.yaml

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
かっこかり
2024-02-16 15:39:48 +09:00
committed by GitHub
parent efc67f7ab5
commit f5459a25df
4 changed files with 114 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
packages/frontend/src/pages/timeline.vue
View File

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template>
<MkSpacer :contentMax="800">
<MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin">
<div :key="src + withRenotes + withReplies + onlyFiles" ref="rootEl" v-hotkey.global="keymap">
<div :key="src" ref="rootEl" v-hotkey.global="keymap">
<MkInfo v-if="['home', 'local', 'social', 'global'].includes(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()">
{{ i18n.ts._timelineDescription[src] }}
</MkInfo>
@@ -50,6 +50,7 @@ import { $i } from '@/account.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { antennasCache, userListsCache } from '@/cache.js';
import { deviceKind } from '@/scripts/device-kind.js';
import { deepMerge } from '@/scripts/merge.js';
import { MenuItem } from '@/types/menu.js';
import { miLocalStorage } from '@/local-storage.js';
@@ -65,50 +66,65 @@ const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>();
const rootEl = shallowRef<HTMLElement>();
const queue = ref(0);
const srcWhenNotSignin = ref(isLocalTimelineAvailable ? 'local' : 'global');
const src = computed({
const srcWhenNotSignin = ref<'local' | 'global'>(isLocalTimelineAvailable ? 'local' : 'global');
const src = computed<'home' | 'local' | 'social' | 'global' | `list:${string}`>({
get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin.value),
set: (x) => saveSrc(x),
});
const withRenotes = computed({
const withRenotes = computed<boolean>({
get: () => defaultStore.reactiveState.tl.value.filter.withRenotes,
set: (x: boolean) => saveTlFilter('withRenotes', x),
set: (x) => saveTlFilter('withRenotes', x),
});
const withReplies = computed({
// computed内での無限ループを防ぐためのフラグ
const localSocialTLFilterSwitchStore = ref<'withReplies' | 'onlyFiles' | false>('withReplies');
const withReplies = computed<boolean>({
get: () => {
if (!$i) return false;
if (['local', 'social'].includes(src.value) && onlyFiles.value) {
if (['local', 'social'].includes(src.value) && localSocialTLFilterSwitchStore.value === 'onlyFiles') {
return false;
} else {
return defaultStore.reactiveState.tl.value.filter.withReplies;
}
},
set: (x: boolean) => saveTlFilter('withReplies', x),
set: (x) => saveTlFilter('withReplies', x),
});
const onlyFiles = computed({
const onlyFiles = computed<boolean>({
get: () => {
if (['local', 'social'].includes(src.value) && withReplies.value) {
if (['local', 'social'].includes(src.value) && localSocialTLFilterSwitchStore.value === 'withReplies') {
return false;
} else {
return defaultStore.reactiveState.tl.value.filter.onlyFiles;
}
},
set: (x: boolean) => saveTlFilter('onlyFiles', x),
set: (x) => saveTlFilter('onlyFiles', x),
});
const withSensitive = computed({
get: () => defaultStore.reactiveState.tl.value.filter.withSensitive,
set: (x: boolean) => {
saveTlFilter('withSensitive', x);
// これだけはクライアント側で完結する処理なので手動でリロード
tlComponent.value?.reloadTimeline();
},
watch([withReplies, onlyFiles], ([withRepliesTo, onlyFilesTo]) => {
if (withRepliesTo) {
localSocialTLFilterSwitchStore.value = 'withReplies';
} else if (onlyFilesTo) {
localSocialTLFilterSwitchStore.value = 'onlyFiles';
} else {
localSocialTLFilterSwitchStore.value = false;
}
});
const withSensitive = computed<boolean>({
get: () => defaultStore.reactiveState.tl.value.filter.withSensitive,
set: (x) => saveTlFilter('withSensitive', x),
});
watch(src, () => {
queue.value = 0;
});
watch(withSensitive, () => {
// これだけはクライアント側で完結する処理なので手動でリロード
tlComponent.value?.reloadTimeline();
});
function queueUpdated(q: number): void {
queue.value = q;
}
@@ -184,10 +200,7 @@ async function chooseChannel(ev: MouseEvent): Promise<void> {
}
function saveSrc(newSrc: 'home' | 'local' | 'social' | 'global' | `list:${string}`): void {
const out = {
...defaultStore.state.tl,
src: newSrc,
};
const out = deepMerge({ src: newSrc }, defaultStore.state.tl);
if (newSrc.startsWith('userList:')) {
const id = newSrc.substring('userList:'.length);
@@ -195,25 +208,16 @@ function saveSrc(newSrc: 'home' | 'local' | 'social' | 'global' | `list:${string
}
defaultStore.set('tl', out);
srcWhenNotSignin.value = newSrc;
if (['local', 'global'].includes(newSrc)) {
srcWhenNotSignin.value = newSrc as 'local' | 'global';
}
}
function saveTlFilter(key: keyof typeof defaultStore.state.tl.filter, newValue: boolean) {
if (key !== 'withReplies' || $i) {
const out = { ...defaultStore.state.tl };
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!out.filter) {
out.filter = {
withRenotes: true,
withReplies: true,
withSensitive: true,
onlyFiles: false,
};
}
out.filter[key] = newValue;
const out = deepMerge({ filter: { [key]: newValue } }, defaultStore.state.tl);
defaultStore.set('tl', out);
}
return newValue;
}
async function timetravel(): Promise<void> {