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

# Conflicts:
#	packages/frontend/src/ui/universal.vue
This commit is contained in:
mattyatea 2023-11-04 10:15:02 +09:00
commit bee34b41e0
8 changed files with 111 additions and 108 deletions

View File

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

View File

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

View File

@ -23,9 +23,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue'; import { onMounted, onUnmounted, watch } from 'vue';
import { deviceKind } from '@/scripts/device-kind.js'; import { deviceKind } from '@/scripts/device-kind.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { getScrollContainer } from '@/scripts/scroll.js';
const SCROLL_STOP = 10; const SCROLL_STOP = 10;
const MAX_PULL_DISTANCE = Infinity; const MAX_PULL_DISTANCE = Infinity;
@ -57,18 +58,6 @@ const emit = defineEmits<{
(ev: 'refresh'): void; (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) { function getScreenY(event) {
if (supportPointerDesktop) { if (supportPointerDesktop) {
return event.screenY; return event.screenY;
@ -138,12 +127,9 @@ function moveEnd() {
} }
} }
function moving(event) { function moving(event: TouchEvent | PointerEvent) {
if (!isPullStart || isRefreshing || disabled) return; if (!isPullStart || isRefreshing || disabled) return;
if (!scrollEl) {
scrollEl = getScrollableParentElement(rootEl);
}
if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + pullDistance)) { if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + pullDistance)) {
pullDistance = 0; pullDistance = 0;
isPullEnd = false; isPullEnd = false;
@ -159,6 +145,10 @@ function moving(event) {
const moveHeight = moveScreenY - startScreenY!; const moveHeight = moveScreenY - startScreenY!;
pullDistance = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE); pullDistance = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
if (pullDistance > 0) {
if (event.cancelable) event.preventDefault();
}
isPullEnd = pullDistance >= FIRE_THRESHOLD; isPullEnd = pullDistance >= FIRE_THRESHOLD;
} }
@ -178,24 +168,48 @@ function setDisabled(value) {
disabled = 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) {
// downup scrollEl!.style.touchAction = 'pan-x pan-down pinch-zoom';
window.addEventListener('pointerup', moveEnd); registerEventListenersForReadyToPull();
rootEl.addEventListener('pointermove', moving, { passive: true });
} else { } 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: falsepreventDefault使
}
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(() => { onUnmounted(() => {
if (supportPointerDesktop) window.removeEventListener('pointerup', moveEnd); if (scrollEl) scrollEl.removeEventListener('scroll', onScrollContainerScroll);
unregisterEventListenersForReadyToPull();
}); });
defineExpose({ defineExpose({

View File

@ -73,8 +73,36 @@ SPDX-License-Identifier: AGPL-3.0-only
</FormSection> </FormSection>
<FormSection> <FormSection>
<template #label>{{ i18n.ts._aboutMisskey.contributors }}</template> <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> <MkLink url="https://github.com/misskey-dev/misskey/graphs/contributors">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink>
</FormSection> </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> <FormSection>
<template #label><Mfm text="$[jelly ❤]"/> {{ i18n.ts._aboutMisskey.patrons }}</template> <template #label><Mfm text="$[jelly ❤]"/> {{ i18n.ts._aboutMisskey.patrons }}</template>
<div :class="$style.patronsWithIcon"> <div :class="$style.patronsWithIcon">
@ -88,23 +116,6 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<p>{{ i18n.ts._aboutMisskey.morePatrons }}</p> <p>{{ i18n.ts._aboutMisskey.morePatrons }}</p>
</FormSection> </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> </div>
</MkSpacer> </MkSpacer>
</div> </div>

View File

@ -32,20 +32,20 @@ import MkRange from '@/components/MkRange.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import MkFolder from '@/components/MkFolder.vue'; import MkFolder from '@/components/MkFolder.vue';
import { soundConfigStore } from '@/scripts/sound.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.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 soundsKeys = ['note', 'noteMy', 'notification', 'antenna', 'channel'] as const;
const sounds = ref<Record<typeof soundsKeys[number], Ref<any>>>({ 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) { 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, volume: sound.volume,
}; };
soundConfigStore.set(`sound_${type}`, v); defaultStore.set(`sound_${type}`, v);
sounds.value[type] = v; sounds.value[type] = v;
} }
function reset() { function reset() {
for (const sound of Object.keys(sounds.value) as Array<keyof typeof sounds.value>) { 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; sounds.value[sound] = v;
} }
} }

View File

@ -3,47 +3,7 @@
* SPDX-License-Identifier: AGPL-3.0-only * 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>(); 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 { 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); audio.volume = masterVolume - ((1 - volume) * masterVolume);
return audio; return audio;
} }
export function play(type: 'noteMy' | 'note' | 'antenna' | 'channel' | 'notification') { 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 (_DEV_) console.log('play', type, sound);
if (sound.type == null) return; if (sound.type == null) return;
playFile(sound.type, sound.volume); playFile(sound.type, sound.volume);

View File

@ -481,6 +481,31 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: true, 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 },
},
})); }));

View File

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