Merge remote-tracking branch 'misskey-original/develop' into develop

# Conflicts:
#	packages/frontend/src/ui/universal.vue

packages/frontend/src/components/MkMediaBanner.vue

@@ -34,7 +34,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, shallowRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { soundConfigStore } from '@/scripts/sound.js';
 import { i18n } from '@/i18n.js';
 
 const props = withDefaults(defineProps<{

packages/frontend/src/components/MkPageWindow.vue

@@ -166,7 +166,7 @@ defineExpose({
 
 <style lang="scss" module>
 .root {
-	overscroll-behavior: none;
+	overscroll-behavior: contain;
 
 	min-height: 100%;
 	background: var(--bg);

packages/frontend/src/components/MkPullToRefresh.vue

@@ -23,9 +23,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, watch } from 'vue';
 import { deviceKind } from '@/scripts/device-kind.js';
 import { i18n } from '@/i18n.js';
+import { getScrollContainer } from '@/scripts/scroll.js';
 
 const SCROLL_STOP = 10;
 const MAX_PULL_DISTANCE = Infinity;
@@ -57,18 +58,6 @@ const emit = defineEmits<{
 	(ev: 'refresh'): void;
 }>();
 
-function getScrollableParentElement(node) {
-	if (node == null) {
-		return null;
-	}
-
-	if (node.scrollHeight > node.clientHeight) {
-		return node;
-	} else {
-		return getScrollableParentElement(node.parentNode);
-	}
-}
-
 function getScreenY(event) {
 	if (supportPointerDesktop) {
 		return event.screenY;
@@ -138,12 +127,9 @@ function moveEnd() {
 	}
 }
 
-function moving(event) {
+function moving(event: TouchEvent | PointerEvent) {
 	if (!isPullStart || isRefreshing || disabled) return;
 
-	if (!scrollEl) {
-		scrollEl = getScrollableParentElement(rootEl);
-	}
 	if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + pullDistance)) {
 		pullDistance = 0;
 		isPullEnd = false;
@@ -159,6 +145,10 @@ function moving(event) {
 	const moveHeight = moveScreenY - startScreenY!;
 	pullDistance = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
 
+	if (pullDistance > 0) {
+		if (event.cancelable) event.preventDefault();
+	}
+
 	isPullEnd = pullDistance >= FIRE_THRESHOLD;
 }
 
@@ -178,24 +168,48 @@ function setDisabled(value) {
 	disabled = value;
 }
 
-onMounted(() => {
+function onScrollContainerScroll() {
-	// マウス操作でpull to refreshするのは不便そう
+	const scrollPos = scrollEl!.scrollTop;
-	//supportPointerDesktop = !!window.PointerEvent && deviceKind === 'desktop';
 
-	if (supportPointerDesktop) {
+	// When at the top of the page, disable vertical overscroll so passive touch listeners can take over.
-		rootEl.addEventListener('pointerdown', moveStart);
+	if (scrollPos === 0) {
-		// ポインターの場合、ポップアップ系の動作をするとdownだけ発火されてupが発火されないため
+		scrollEl!.style.touchAction = 'pan-x pan-down pinch-zoom';
-		window.addEventListener('pointerup', moveEnd);
+		registerEventListenersForReadyToPull();
-		rootEl.addEventListener('pointermove', moving, { passive: true });
 	} else {
-		rootEl.addEventListener('touchstart', moveStart);
+		scrollEl!.style.touchAction = 'auto';
-		rootEl.addEventListener('touchend', moveEnd);
+		unregisterEventListenersForReadyToPull();
-		rootEl.addEventListener('touchmove', moving, { passive: true });
 	}
+}
+
+function registerEventListenersForReadyToPull() {
+	if (rootEl == null) return;
+	rootEl.addEventListener('touchstart', moveStart, { passive: true });
+	rootEl.addEventListener('touchmove', moving, { passive: false }); // passive: falseにしないとpreventDefaultが使えない
+}
+
+function unregisterEventListenersForReadyToPull() {
+	if (rootEl == null) return;
+	rootEl.removeEventListener('touchstart', moveStart);
+	rootEl.removeEventListener('touchmove', moving);
+}
+
+onMounted(() => {
+	if (rootEl == null) return;
+
+	scrollEl = getScrollContainer(rootEl);
+	if (scrollEl == null) return;
+
+	scrollEl.addEventListener('scroll', onScrollContainerScroll, { passive: true });
+
+	rootEl.addEventListener('touchend', moveEnd, { passive: true });
+
+	registerEventListenersForReadyToPull();
 });
 
 onUnmounted(() => {
-	if (supportPointerDesktop) window.removeEventListener('pointerup', moveEnd);
+	if (scrollEl) scrollEl.removeEventListener('scroll', onScrollContainerScroll);
+
+	unregisterEventListenersForReadyToPull();
 });
 
 defineExpose({

packages/frontend/src/pages/about-misskey.vue

@@ -73,8 +73,36 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</FormSection>
 				<FormSection>
 					<template #label>{{ i18n.ts._aboutMisskey.contributors }}</template>
+					<div :class="$style.contributors" style="margin-bottom: 8px;">
+						<a href="https://github.com/mei23" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/30769358?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@mei23</span>
+						</a>
+						<a href="https://github.com/rinsuki" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/6533808?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@rinsuki</span>
+						</a>
+						<a href="https://github.com/robflop" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/8159402?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@robflop</span>
+						</a>
+					</div>
 					<MkLink url="https://github.com/misskey-dev/misskey/graphs/contributors">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink>
 				</FormSection>
+				<FormSection>
+					<template #label>Special thanks</template>
+					<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));grid-gap:24px;align-items:center;">
+						<div>
+							<a style="display: inline-block;" class="masknetwork" title="Mask Network" href="https://mask.io/" target="_blank"><img style="width: 100%;" src="https://misskey-hub.net/sponsors/masknetwork.png" alt="Mask Network"></a>
+						</div>
+						<div>
+							<a style="display: inline-block;" class="xserver" title="XServer" href="https://www.xserver.ne.jp/" target="_blank"><img style="width: 100%;" src="https://misskey-hub.net/sponsors/xserver.png" alt="XServer"></a>
+						</div>
+						<div>
+							<a style="display: inline-block;" class="skeb" title="Skeb" href="https://skeb.jp/" target="_blank"><img style="width: 100%;" src="https://misskey-hub.net/sponsors/skeb.svg" alt="Skeb"></a>
+						</div>
+					</div>
+				</FormSection>
 				<FormSection>
 					<template #label><Mfm text="$[jelly ❤]"/> {{ i18n.ts._aboutMisskey.patrons }}</template>
 					<div :class="$style.patronsWithIcon">
@@ -88,23 +116,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 					<p>{{ i18n.ts._aboutMisskey.morePatrons }}</p>
 				</FormSection>
-				<FormSection>
-					<template #label>Special thanks</template>
-					<div class="_gaps" style="text-align: center;">
-						<div>
-							<a style="display: inline-block;" class="masknetwork" title="Mask Network" href="https://mask.io/" target="_blank"><img width="180" src="https://misskey-hub.net/sponsors/masknetwork.png" alt="Mask Network"></a>
-						</div>
-						<div>
-							<a style="display: inline-block;" class="xserver" title="XServer" href="https://www.xserver.ne.jp/" target="_blank"><img width="180" src="https://misskey-hub.net/sponsors/xserver.png" alt="XServer"></a>
-						</div>
-						<div>
-							<a style="display: inline-block;" class="skeb" title="Skeb" href="https://skeb.jp/" target="_blank"><img width="180" src="https://misskey-hub.net/sponsors/skeb.svg" alt="Skeb"></a>
-						</div>
-						<div>
-							<a style="display: inline-block;" class="dcadvirth" title="DC Advirth" href="https://www.dotchain.ltd/advirth" target="_blank"><img width="100" src="https://misskey-hub.net/sponsors/dcadvirth.png" alt="DC Advirth"></a>
-						</div>
-					</div>
-				</FormSection>
 			</div>
 		</MkSpacer>
 	</div>

packages/frontend/src/pages/settings/sounds.vue

@@ -32,20 +32,20 @@ import MkRange from '@/components/MkRange.vue';
 import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
 import MkFolder from '@/components/MkFolder.vue';
-import { soundConfigStore } from '@/scripts/sound.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { defaultStore } from '@/store.js';
 
-const masterVolume = computed(soundConfigStore.makeGetterSetter('sound_masterVolume'));
+const masterVolume = computed(defaultStore.makeGetterSetter('sound_masterVolume'));
 
 const soundsKeys = ['note', 'noteMy', 'notification', 'antenna', 'channel'] as const;
 
 const sounds = ref<Record<typeof soundsKeys[number], Ref<any>>>({
-	note: soundConfigStore.reactiveState.sound_note,
+	note: defaultStore.reactiveState.sound_note,
-	noteMy: soundConfigStore.reactiveState.sound_noteMy,
+	noteMy: defaultStore.reactiveState.sound_noteMy,
-	notification: soundConfigStore.reactiveState.sound_notification,
+	notification: defaultStore.reactiveState.sound_notification,
-	antenna: soundConfigStore.reactiveState.sound_antenna,
+	antenna: defaultStore.reactiveState.sound_antenna,
-	channel: soundConfigStore.reactiveState.sound_channel,
+	channel: defaultStore.reactiveState.sound_channel,
 });
 
 async function updated(type: keyof typeof sounds.value, sound) {
@@ -54,14 +54,14 @@ async function updated(type: keyof typeof sounds.value, sound) {
 		volume: sound.volume,
 	};
 
-	soundConfigStore.set(`sound_${type}`, v);
+	defaultStore.set(`sound_${type}`, v);
 	sounds.value[type] = v;
 }
 
 function reset() {
 	for (const sound of Object.keys(sounds.value) as Array<keyof typeof sounds.value>) {
-		const v = soundConfigStore.def[`sound_${sound}`].default;
+		const v = defaultStore.def[`sound_${sound}`].default;
-		soundConfigStore.set(`sound_${sound}`, v);
+		defaultStore.set(`sound_${sound}`, v);
 		sounds.value[sound] = v;
 	}
 }

packages/frontend/src/scripts/sound.ts

@@ -3,47 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { markRaw } from 'vue';
+import { defaultStore } from '@/store.js';
-import { Storage } from '@/pizzax.js';
-
-export const soundConfigStore = markRaw(new Storage('sound', {
-	sound_masterVolume: {
-		where: 'device',
-		default: 0.3,
-	},
-	sound_note: {
-		where: 'account',
-		default: { type: 'syuilo/n-aec', volume: 1 },
-	},
-	sound_noteMy: {
-		where: 'account',
-		default: { type: 'syuilo/n-cea-4va', volume: 1 },
-	},
-	sound_notification: {
-		where: 'account',
-		default: { type: 'syuilo/n-ea', volume: 1 },
-	},
-	sound_antenna: {
-		where: 'account',
-		default: { type: 'syuilo/triple', volume: 1 },
-	},
-	sound_channel: {
-		where: 'account',
-		default: { type: 'syuilo/square-pico', volume: 1 },
-	},
-}));
-
-await soundConfigStore.ready;
-
-//#region サウンドのColdDeviceStorage => indexedDBのマイグレーション
-for (const target of Object.keys(soundConfigStore.state) as Array<keyof typeof soundConfigStore.state>) {
-	const value = localStorage.getItem(`miux:${target}`);
-	if (value) {
-		soundConfigStore.set(target, JSON.parse(value) as typeof soundConfigStore.def[typeof target]['default']);
-		localStorage.removeItem(`miux:${target}`);
-	}
-}
-//#endregion
 
 const cache = new Map<string, HTMLAudioElement>();
 
@@ -112,13 +72,13 @@ export function getAudio(file: string, useCache = true): HTMLAudioElement {
 }
 
 export function setVolume(audio: HTMLAudioElement, volume: number): HTMLAudioElement {
-	const masterVolume = soundConfigStore.state.sound_masterVolume;
+	const masterVolume = defaultStore.state.sound_masterVolume;
 	audio.volume = masterVolume - ((1 - volume) * masterVolume);
 	return audio;
 }
 
 export function play(type: 'noteMy' | 'note' | 'antenna' | 'channel' | 'notification') {
-	const sound = soundConfigStore.state[`sound_${type}`];
+	const sound = defaultStore.state[`sound_${type}`];
 	if (_DEV_) console.log('play', type, sound);
 	if (sound.type == null) return;
 	playFile(sound.type, sound.volume);

packages/frontend/src/store.ts

@@ -481,6 +481,31 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+
+	sound_masterVolume: {
+		where: 'device',
+		default: 0.3,
+	},
+	sound_note: {
+		where: 'device',
+		default: { type: 'syuilo/n-aec', volume: 1 },
+	},
+	sound_noteMy: {
+		where: 'device',
+		default: { type: 'syuilo/n-cea-4va', volume: 1 },
+	},
+	sound_notification: {
+		where: 'device',
+		default: { type: 'syuilo/n-ea', volume: 1 },
+	},
+	sound_antenna: {
+		where: 'device',
+		default: { type: 'syuilo/triple', volume: 1 },
+	},
+	sound_channel: {
+		where: 'device',
+		default: { type: 'syuilo/square-pico', volume: 1 },
+	},
 }));
 
 

packages/frontend/src/ui/universal.vue

@@ -399,7 +399,7 @@ $widgets-hide-threshold: 1090px;
   min-width: 0;
   overflow: auto;
   overflow-y: scroll;
-  overscroll-behavior: none;
+  overscroll-behavior: contain;
   background: var(--bg);
 }
 
@@ -582,12 +582,6 @@ $widgets-hide-threshold: 1090px;
 		animation: none;
 		font-size: 12px;
 	}
-  position: absolute;
-  top: 0;
-  left: 0;
-  color: var(--indicator);
-  font-size: 16px;
-  animation: blink 1s infinite;
   &.gamingDark {
     color: white;
   }