heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'misskey/develop' into future-2024-04-10

Browse source
This commit is contained in:
dakkar 2024-04-11 13:39:55 +01:00
commit a3b4ca782a
78 changed files with 3068 additions and 2243 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/package.json
View file

@ -30,7 +30,7 @@
"@twemoji/parser": "15.0.0",
"@vitejs/plugin-vue": "5.0.4",
"@vue/compiler-sfc": "3.4.21",
"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.1.2",
"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.1.4",
"astring": "1.8.6",
"broadcast-channel": "7.0.0",
"buraha": "0.0.1",

2
packages/frontend/src/components/MkButton.vue
View file

@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-else class="_button"
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
:to="to ?? '#'"
:behavior="linkBehavior"
@mousedown="onMousedown"
>
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
@ -43,6 +44,7 @@ const props = defineProps<{
inline?: boolean;
link?: boolean;
to?: string;
linkBehavior?: null | 'window' | 'browser';
autofocus?: boolean;
wait?: boolean;
danger?: boolean;

2
packages/frontend/src/components/MkCode.vue
View file

@ -80,11 +80,9 @@ function copy() {
.codePlaceholderRoot {
display: block;
width: 100%;
background: none;
border: none;
outline: none;
font: inherit;
color: inherit;
cursor: pointer;
box-sizing: border-box;

8
packages/frontend/src/components/MkContextMenu.vue
View file

@ -47,12 +47,12 @@ onMounted(() => {
const width = rootEl.value!.offsetWidth;
const height = rootEl.value!.offsetHeight;
if (left + width - window.pageXOffset >= (window.innerWidth - SCROLLBAR_THICKNESS)) {
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.pageXOffset;
if (left + width - window.scrollX >= (window.innerWidth - SCROLLBAR_THICKNESS)) {
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.scrollX;
}
if (top + height - window.pageYOffset >= (window.innerHeight - SCROLLBAR_THICKNESS)) {
top = (window.innerHeight - SCROLLBAR_THICKNESS) - height + window.pageYOffset;
if (top + height - window.scrollY >= (window.innerHeight - SCROLLBAR_THICKNESS)) {
top = (window.innerHeight - SCROLLBAR_THICKNESS) - height + window.scrollY;
}
if (top < 0) {

2
packages/frontend/src/components/MkDialog.vue
View file

@ -161,7 +161,7 @@ function onKeydown(evt: KeyboardEvent) {
}
function onInputKeydown(evt: KeyboardEvent) {
if (evt.key === 'Enter') {
if (evt.key === 'Enter' && okButtonDisabledReason.value === null) {
evt.preventDefault();
evt.stopPropagation();
ok();

112
packages/frontend/src/components/MkMediaAudio.vue
View file

@ -5,11 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div
ref="playerEl"
v-hotkey="keymap"
tabindex="0"
:class="[
$style.audioContainer,
(audio.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive,
]"
@contextmenu.stop
@keydown.stop
>
<button v-if="hide" :class="$style.hidden" @click="hide = false">
<div :class="$style.hiddenTextWrapper">
@ -18,6 +22,19 @@ SPDX-License-Identifier: AGPL-3.0-only
<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
</div>
</button>
<div v-else-if="defaultStore.reactiveState.useNativeUIForVideoAudioPlayer.value" :class="$style.nativeAudioContainer">
<audio
ref="audioEl"
preload="metadata"
controls
:class="$style.nativeAudio"
@keydown.prevent
>
<source :src="audio.url">
</audio>
</div>
<div v-else :class="$style.audioControls">
<audio
ref="audioEl"
@ -75,6 +92,41 @@ const props = defineProps<{
audio: Misskey.entities.DriveFile;
}>();
const keymap = {
'up': () => {
if (hasFocus() && audioEl.value) {
volume.value = Math.min(volume.value + 0.1, 1);
}
},
'down': () => {
if (hasFocus() && audioEl.value) {
volume.value = Math.max(volume.value - 0.1, 0);
}
},
'left': () => {
if (hasFocus() && audioEl.value) {
audioEl.value.currentTime = Math.max(audioEl.value.currentTime - 5, 0);
}
},
'right': () => {
if (hasFocus() && audioEl.value) {
audioEl.value.currentTime = Math.min(audioEl.value.currentTime + 5, audioEl.value.duration);
}
},
'space': () => {
if (hasFocus()) {
togglePlayPause();
}
},
};
// PlayerElもしくはその子要素にフォーカスがあるかどうか
function hasFocus() {
if (!playerEl.value) return false;
return playerEl.value === document.activeElement || playerEl.value.contains(document.activeElement);
}
const playerEl = shallowRef<HTMLDivElement>();
const audioEl = shallowRef<HTMLAudioElement>();
// eslint-disable-next-line vue/no-setup-props-destructure
@ -88,6 +140,30 @@ function showMenu(ev: MouseEvent) {
menu = [
// TODO: 再生キューに追加
{
type: 'switch',
text: i18n.ts._mediaControls.loop,
icon: 'ti ti-repeat',
ref: loop,
},
{
type: 'radio',
text: i18n.ts._mediaControls.playbackRate,
icon: 'ti ti-clock-play',
ref: speed,
options: {
'0.25x': 0.25,
'0.5x': 0.5,
'0.75x': 0.75,
'1.0x': 1,
'1.25x': 1.25,
'1.5x': 1.5,
'2.0x': 2,
},
},
{
type: 'divider',
},
{
text: i18n.ts.hide,
icon: 'ph-eye-closed ph-bold ph-lg',
@ -150,6 +226,8 @@ const rangePercent = computed({
},
});
const volume = ref(.25);
const speed = ref(1);
const loop = ref(false); // TODO: ドライブファイルのフラグに置き換える
const bufferedEnd = ref(0);
const bufferedDataRatio = computed(() => {
if (!audioEl.value) return 0;
@ -179,6 +257,7 @@ function toggleMute() {
}
let onceInit = false;
let mediaTickFrameId: number | null = null;
let stopAudioElWatch: () => void;
function init() {
@ -198,8 +277,12 @@ function init() {
}
elapsedTimeMs.value = audioEl.value.currentTime * 1000;
if (audioEl.value.loop !== loop.value) {
loop.value = audioEl.value.loop;
}
}
window.requestAnimationFrame(updateMediaTick);
mediaTickFrameId = window.requestAnimationFrame(updateMediaTick);
}
updateMediaTick();
@ -237,6 +320,14 @@ watch(volume, (to) => {
if (audioEl.value) audioEl.value.volume = to;
});
watch(speed, (to) => {
if (audioEl.value) audioEl.value.playbackRate = to;
});
watch(loop, (to) => {
if (audioEl.value) audioEl.value.loop = to;
});
onMounted(() => {
init();
});
@ -255,6 +346,10 @@ onDeactivated(() => {
hide.value = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.audio.isSensitive && defaultStore.state.nsfw !== 'ignore');
stopAudioElWatch();
onceInit = false;
if (mediaTickFrameId) {
window.cancelAnimationFrame(mediaTickFrameId);
mediaTickFrameId = null;
}
});
</script>
@ -265,6 +360,10 @@ onDeactivated(() => {
border: .5px solid var(--divider);
border-radius: var(--radius);
overflow: clip;
&:focus {
outline: none;
}
}
.sensitive {
@ -370,4 +469,15 @@ onDeactivated(() => {
}
}
}
.nativeAudioContainer {
display: flex;
align-items: center;
padding: 6px;
}
.nativeAudio {
display: block;
width: 100%;
}
</style>

128
packages/frontend/src/components/MkMediaVideo.vue
View file

@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div
ref="playerEl"
v-hotkey="keymap"
tabindex="0"
:class="[
$style.videoContainer,
controlsShowing && $style.active,
@ -14,6 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@mouseover="onMouseOver"
@mouseleave="onMouseLeave"
@contextmenu.stop
@keydown.stop
>
<button v-if="hide" :class="$style.hidden" @click="hide = false">
<div :class="$style.hiddenTextWrapper">
@ -22,7 +25,28 @@ SPDX-License-Identifier: AGPL-3.0-only
<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
</div>
</button>
<div v-else :class="$style.videoRoot" @click.self="togglePlayPause">
<div v-else-if="defaultStore.reactiveState.useNativeUIForVideoAudioPlayer.value" :class="$style.videoRoot">
<video
ref="videoEl"
:class="$style.video"
:poster="video.thumbnailUrl ?? undefined"
:title="video.comment ?? undefined"
:alt="video.comment"
preload="metadata"
controls
@keydown.prevent
>
<source :src="video.url">
</video>
<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
<div :class="$style.indicators">
<div v-if="video.comment" :class="$style.indicator">ALT</div>
<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
</div>
</div>
<div v-else :class="$style.videoRoot">
<video
ref="videoEl"
:class="$style.video"
@ -31,6 +55,8 @@ SPDX-License-Identifier: AGPL-3.0-only
:alt="video.comment"
preload="metadata"
playsinline
@keydown.prevent
@click.self="togglePlayPause"
>
<source :src="video.url">
</video>
@ -103,6 +129,40 @@ const props = defineProps<{
video: Misskey.entities.DriveFile;
}>();
const keymap = {
'up': () => {
if (hasFocus() && videoEl.value) {
volume.value = Math.min(volume.value + 0.1, 1);
}
},
'down': () => {
if (hasFocus() && videoEl.value) {
volume.value = Math.max(volume.value - 0.1, 0);
}
},
'left': () => {
if (hasFocus() && videoEl.value) {
videoEl.value.currentTime = Math.max(videoEl.value.currentTime - 5, 0);
}
},
'right': () => {
if (hasFocus() && videoEl.value) {
videoEl.value.currentTime = Math.min(videoEl.value.currentTime + 5, videoEl.value.duration);
}
},
'space': () => {
if (hasFocus()) {
togglePlayPause();
}
},
};
// PlayerElもしくはその子要素にフォーカスがあるかどうか
function hasFocus() {
if (!playerEl.value) return false;
return playerEl.value === document.activeElement || playerEl.value.contains(document.activeElement);
}
// eslint-disable-next-line vue/no-setup-props-destructure
const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));
@ -114,6 +174,35 @@ function showMenu(ev: MouseEvent) {
menu = [
// TODO: 再生キューに追加
{
type: 'switch',
text: i18n.ts._mediaControls.loop,
icon: 'ti ti-repeat',
ref: loop,
},
{
type: 'radio',
text: i18n.ts._mediaControls.playbackRate,
icon: 'ti ti-clock-play',
ref: speed,
options: {
'0.25x': 0.25,
'0.5x': 0.5,
'0.75x': 0.75,
'1.0x': 1,
'1.25x': 1.25,
'1.5x': 1.5,
'2.0x': 2,
},
},
...(document.pictureInPictureEnabled ? [{
text: i18n.ts._mediaControls.pip,
icon: 'ti ti-picture-in-picture',
action: togglePictureInPicture,
}] : []),
{
type: 'divider',
},
{
text: i18n.ts.hide,
icon: 'ph-eye-closed ph-bold ph-lg',
@ -189,6 +278,8 @@ const rangePercent = computed({
},
});
const volume = ref(.25);
const speed = ref(1);
const loop = ref(false); // TODO: ドライブファイルのフラグに置き換える
const bufferedEnd = ref(0);
const bufferedDataRatio = computed(() => {
if (!videoEl.value) return 0;
@ -246,6 +337,16 @@ function toggleFullscreen() {
}
}
function togglePictureInPicture() {
if (videoEl.value) {
if (document.pictureInPictureElement) {
document.exitPictureInPicture();
} else {
videoEl.value.requestPictureInPicture();
}
}
}
function toggleMute() {
if (volume.value === 0) {
volume.value = .25;
@ -255,6 +356,7 @@ function toggleMute() {
}
let onceInit = false;
let mediaTickFrameId: number | null = null;
let stopVideoElWatch: () => void;
function init() {
@ -274,8 +376,12 @@ function init() {
}
elapsedTimeMs.value = videoEl.value.currentTime * 1000;
if (videoEl.value.loop !== loop.value) {
loop.value = videoEl.value.loop;
}
}
window.requestAnimationFrame(updateMediaTick);
mediaTickFrameId = window.requestAnimationFrame(updateMediaTick);
}
updateMediaTick();
@ -319,6 +425,14 @@ watch(volume, (to) => {
if (videoEl.value) videoEl.value.volume = to;
});
watch(speed, (to) => {
if (videoEl.value) videoEl.value.playbackRate = to;
});
watch(loop, (to) => {
if (videoEl.value) videoEl.value.loop = to;
});
watch(hide, (to) => {
if (to && isFullscreen.value) {
document.exitFullscreen();
@ -344,6 +458,10 @@ onDeactivated(() => {
hide.value = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore');
stopVideoElWatch();
onceInit = false;
if (mediaTickFrameId) {
window.cancelAnimationFrame(mediaTickFrameId);
mediaTickFrameId = null;
}
});
</script>
@ -352,6 +470,10 @@ onDeactivated(() => {
container-type: inline-size;
position: relative;
overflow: clip;
&:focus {
outline: none;
}
}
.sensitive {
@ -415,7 +537,7 @@ onDeactivated(() => {
font: inherit;
color: inherit;
cursor: pointer;
padding: 120px 0;
padding: 60px 0;
display: flex;
align-items: center;
justify-content: center;

91
packages/frontend/src/components/MkMenu.vue
View file

@ -42,9 +42,26 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</button>
<button v-else-if="item.type === 'switch'" role="menuitemcheckbox" :tabindex="i" class="_button" :class="[$style.item, $style.switch, { [$style.switchDisabled]: item.disabled } ]" @click="switchItem(item)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
<div :class="$style.item_content">
<span :class="[$style.item_content_text, $style.switchText]">{{ item.text }}</span>
<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
</div>
</button>
<button v-else-if="item.type === 'radio'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="preferClick ? null : showRadioOptions(item, $event)" @click="!preferClick ? null : showRadioOptions(item, $event)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
<div :class="$style.item_content">
<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
</div>
</button>
<button v-else-if="item.type === 'radioOption'" :tabindex="i" class="_button" role="menuitem" :class="[$style.item, { [$style.radioActive]: item.active }]" @click="clicked(item.action, $event, false)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<div :class="$style.icon">
<span :class="[$style.radio, { [$style.radioChecked]: item.active }]"></span>
</div>
<div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span>
</div>
</button>
<button v-else-if="item.type === 'parent'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="preferClick ? null : showChildren(item, $event)" @click="!preferClick ? null : showChildren(item, $event)">
@ -77,7 +94,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { ComputedRef, computed, defineAsyncComponent, isRef, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
import { focusPrev, focusNext } from '@/scripts/focus.js';
import MkSwitchButton from '@/components/MkSwitch.button.vue';
import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu.js';
import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { isTouchUsing } from '@/scripts/touch.js';
@ -168,6 +185,31 @@ function onItemMouseLeave(item) {
if (childCloseTimer) window.clearTimeout(childCloseTimer);
}
async function showRadioOptions(item: MenuRadio, ev: MouseEvent) {
const children: MenuItem[] = Object.keys(item.options).map<MenuRadioOption>(key => {
const value = item.options[key];
return {
type: 'radioOption',
text: key,
action: () => {
item.ref = value;
},
active: computed(() => item.ref === value),
};
});
if (props.asDrawer) {
os.popupMenu(children, ev.currentTarget ?? ev.target).finally(() => {
emit('close');
});
emit('hide');
} else {
childTarget.value = (ev.currentTarget ?? ev.target) as HTMLElement;
childMenu.value = children;
childShowingItem.value = item;
}
}
async function showChildren(item: MenuParent, ev: MouseEvent) {
const children: MenuItem[] = await (async () => {
if (childrenCache.has(item)) {
@ -196,8 +238,10 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
}
}
function clicked(fn: MenuAction, ev: MouseEvent) {
function clicked(fn: MenuAction, ev: MouseEvent, doClose = true) {
fn(ev);
if (!doClose) return;
close(true);
}
@ -350,6 +394,15 @@ onBeforeUnmount(() => {
}
}
&.radioActive {
color: var(--accent) !important;
opacity: 1;
&:before {
background-color: var(--accentedBg) !important;
}
}
&:not(:active):focus-visible {
box-shadow: 0 0 0 2px var(--focus) inset;
}
@ -417,11 +470,11 @@ onBeforeUnmount(() => {
.switchButton {
margin-left: -2px;
--height: 1.35em;
}
.switchText {
margin-left: 8px;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
}
@ -461,4 +514,32 @@ onBeforeUnmount(() => {
margin: 8px 0;
border-top: solid 0.5px var(--divider);
}
.radio {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
vertical-align: -.125em;
border-radius: 50%;
border: solid 2px var(--divider);
background-color: var(--panel);
&.radioChecked {
border-color: var(--accent);
&::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--accent);
}
}
}
</style>

24
packages/frontend/src/components/MkModal.vue
View file

@ -175,8 +175,8 @@ const align = () => {
let left;
let top;
const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset);
const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset);
const x = srcRect.left + (fixed.value ? 0 : window.scrollX);
const y = srcRect.top + (fixed.value ? 0 : window.scrollY);
if (props.anchor.x === 'center') {
left = x + (props.src.offsetWidth / 2) - (width / 2);
@ -220,24 +220,24 @@ const align = () => {
}
} else {
// 画面から横にはみ出る場合
if (left + width - window.pageXOffset > (window.innerWidth - SCROLLBAR_THICKNESS)) {
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.pageXOffset - 1;
if (left + width - window.scrollX > (window.innerWidth - SCROLLBAR_THICKNESS)) {
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.scrollX - 1;
}
const underSpace = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - (top - window.pageYOffset);
const underSpace = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - (top - window.scrollY);
const upperSpace = (srcRect.top - MARGIN);
// 画面から縦にはみ出る場合
if (top + height - window.pageYOffset > ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN)) {
if (top + height - window.scrollY > ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN)) {
if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace;
} else {
maxHeight.value = upperSpace;
top = window.pageYOffset + ((upperSpace + MARGIN) - height);
top = window.scrollY + ((upperSpace + MARGIN) - height);
}
} else {
top = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - height + window.pageYOffset - 1;
top = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - height + window.scrollY - 1;
}
} else {
maxHeight.value = underSpace;
@ -255,15 +255,15 @@ const align = () => {
let transformOriginX = 'center';
let transformOriginY = 'center';
if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.pageYOffset)) {
if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.scrollY)) {
transformOriginY = 'top';
} else if ((top + height) <= srcRect.top + (fixed.value ? 0 : window.pageYOffset)) {
} else if ((top + height) <= srcRect.top + (fixed.value ? 0 : window.scrollY)) {
transformOriginY = 'bottom';
}
if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.pageXOffset)) {
if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.scrollX)) {
transformOriginX = 'left';
} else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.pageXOffset)) {
} else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.scrollX)) {
transformOriginX = 'right';
}

8
packages/frontend/src/components/MkNote.vue
View file

@ -101,7 +101,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" :note="appearNote" :maxNumber="16" @click.stop @mockUpdateMyReaction="emitUpdReaction">
<template #more>
<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
</template>
</MkReactionsViewer>
<footer :class="$style.footer">
@ -275,6 +275,7 @@ if (noteViewInterruptors.length > 0) {
const isRenote = (
note.value.renote != null &&
note.value.reply == null &&
note.value.text == null &&
note.value.cw == null &&
note.value.fileIds && note.value.fileIds.length === 0 &&
@ -1254,10 +1255,9 @@ function emitUpdReaction(emoji: string, delta: number) {
.reactionOmitted {
display: inline-block;
height: 32px;
margin: 2px;
padding: 0 6px;
margin-left: 8px;
opacity: .8;
font-size: 95%;
}
.clickToOpen {

13
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -69,7 +69,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.noteContent">
<p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
<MkCwButton v-model="showContent" :text="appearNote.text" :files="appearNote.files" :poll="appearNote.poll"/>
<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll"/>
</p>
<div v-show="appearNote.cw == null || showContent">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
@ -264,10 +264,13 @@ import MkButton from '@/components/MkButton.vue';
import { boostMenuItems, type Visibility } from '@/scripts/boost-quote.js';
import { isEnabledUrlPreview } from '@/instance.js';
const props = defineProps<{
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
expandAllCws?: boolean;
}>();
initialTab: string;
}>(), {
initialTab: 'replies',
});
const inChannel = inject('inChannel', null);
@ -294,7 +297,9 @@ if (noteViewInterruptors.length > 0) {
const isRenote = (
note.value.renote != null &&
note.value.reply == null &&
note.value.text == null &&
note.value.cw == null &&
note.value.fileIds && note.value.fileIds.length === 0 &&
note.value.poll == null
);
@ -357,7 +362,7 @@ provide('react', (reaction: string) => {
});
});
const tab = ref('replies');
const tab = ref(props.initialTab);
const reactionTabType = ref<string | null>(null);
const renotesPagination = computed<Paging>(() => ({

8
packages/frontend/src/components/MkPostForm.vue
View file

@ -255,7 +255,13 @@ const maxTextLength = computed((): number => {
const canPost = computed((): boolean => {
return !props.mock && !posting.value && !posted.value &&
(1 <= textLength.value || 1 <= files.value.length || !!poll.value || !!props.renote) &&
(
1 <= textLength.value ||
1 <= files.value.length ||
poll.value != null ||
props.renote != null ||
(props.reply != null && quoteId.value != null)
) &&
(textLength.value <= maxTextLength.value) &&
(!poll.value || poll.value.choices.length >= 2);
});

3
packages/frontend/src/components/MkReactionsViewer.vue
View file

@ -100,6 +100,9 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
}
.root {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 4px -2px 0 -2px;
cursor: auto; /* not clickToOpen-able */

13
packages/frontend/src/components/MkSwitch.button.vue
View file

@ -41,13 +41,15 @@ const toggle = () => {
<style lang="scss" module>
.button {
--height: 21px;
position: relative;
display: inline-flex;
flex-shrink: 0;
margin: 0;
box-sizing: border-box;
width: 32px;
height: 23px;
width: calc(var(--height) * 1.6);
height: calc(var(--height) + 2px); // 枠線
outline: none;
background: var(--switchOffBg);
background-clip: content-box;
@ -69,9 +71,10 @@ const toggle = () => {
.knob {
position: absolute;
box-sizing: border-box;
top: 3px;
width: 15px;
height: 15px;
width: calc(var(--height) - 6px);
height: calc(var(--height) - 6px);
border-radius: var(--radius-ellipse);
transition: all 0.2s ease;
@ -82,7 +85,7 @@ const toggle = () => {
}
.knobChecked {
left: 12px;
left: calc(calc(100% - var(--height)) + 3px);
background: var(--switchOnFg);
}
</style>

4
packages/frontend/src/components/MkUrlPreviewPopup.vue
View file

@ -33,8 +33,8 @@ const left = ref(0);
onMounted(() => {
const rect = props.source.getBoundingClientRect();
const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
const y = rect.top + props.source.offsetHeight + window.pageYOffset;
const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.scrollX;
const y = rect.top + props.source.offsetHeight + window.scrollY;
top.value = y;
left.value = x;

4
packages/frontend/src/components/MkUserPopup.vue
View file

@ -118,8 +118,8 @@ onMounted(() => {
}
const rect = props.source.getBoundingClientRect();
const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset;
const y = rect.top + props.source.offsetHeight + window.pageYOffset;
const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX;
const y = rect.top + props.source.offsetHeight + window.scrollY;
top.value = y;
left.value = x;

4
packages/frontend/src/components/global/MkTime.vue
View file

@ -47,7 +47,7 @@ const invalid = Number.isNaN(_time);
const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid;
// eslint-disable-next-line vue/no-setup-props-destructure
const now = ref((props.origin ?? new Date()).getTime());
const now = ref(props.origin?.getTime() ?? Date.now());
const ago = computed(() => (now.value - _time) / 1000/*ms*/);
const relative = computed<string>(() => {
@ -77,7 +77,7 @@ let tickId: number;
let currentInterval: number;
function tick() {
now.value = (new Date()).getTime();
now.value = Date.now();
const nextInterval = ago.value < 60 ? 10000 : ago.value < 3600 ? 60000 : 180000;
if (currentInterval !== nextInterval) {

15
packages/frontend/src/components/page/page.block.vue
View file

@ -14,6 +14,7 @@ import XText from './page.text.vue';
import XSection from './page.section.vue';
import XImage from './page.image.vue';
import XNote from './page.note.vue';
import XDynamic from './page.dynamic.vue';
function getComponent(type: string) {
switch (type) {
@ -21,6 +22,20 @@ function getComponent(type: string) {
case 'section': return XSection;
case 'image': return XImage;
case 'note': return XNote;
// 動的ページの代替用ブロック
case 'button':
case 'if':
case 'textarea':
case 'post':
case 'canvas':
case 'numberInput':
case 'textInput':
case 'switch':
case 'radioButton':
case 'counter':
return XDynamic;
default: return null;
}
}

43
packages/frontend/src/components/page/page.dynamic.vue Normal file
View file

@ -0,0 +1,43 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<!-- 動的ページのブロックの代替。利用できないということを表示する -->
<template>
<div :class="$style.root">
<div :class="$style.heading"><i class="ti ti-dice-5"></i> {{ i18n.ts._pages.blocks.dynamic }}</div>
<I18n :src="i18n.ts._pages.blocks.dynamicDescription" tag="div" :class="$style.text">
<template #play>
<MkA to="/play" class="_link">Play</MkA>
</template>
</I18n>
</div>
</template>
<script lang="ts" setup>
import * as Misskey from 'misskey-js';
import { i18n } from '@/i18n.js';
const props = defineProps<{
block: Misskey.entities.PageBlock,
page: Misskey.entities.Page,
}>();
</script>
<style lang="scss" module>
.root {
border: 1px solid var(--divider);
border-radius: var(--radius);
padding: var(--margin);
text-align: center;
}
.heading {
font-weight: 700;
}
.text {
font-size: 90%;
}
</style>

2
packages/frontend/src/components/page/page.text.vue
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="_gaps" :class="$style.textRoot">
<Mfm :text="block.text ?? ''" :isNote="false"/>
<div v-if="isEnabledUrlPreview">
<div v-if="isEnabledUrlPreview" class="_gaps_s">
<MkUrlPreview v-for="url in urls" :key="url" :url="url"/>
</div>
</div>

5
packages/frontend/src/pages/note.vue
View file

@ -21,11 +21,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-if="defaultStore.state.noteDesign === 'misskey'" class="_margin _gaps_s">
<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
<MkNoteDetailed :key="note.id" v-model:note="note" :class="$style.note" :expandAllCws="expandAllCws"/>
<MkNoteDetailed :key="note.id" v-model:note="note" :initialTab="initialTab" :class="$style.note" :expandAllCws="expandAllCws"/>
</div>
<div v-else-if="defaultStore.state.noteDesign === 'sharkey'" class="_margin _gaps_s">
<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
<SkNoteDetailed :key="note.id" v-model:note="note" :class="$style.note" :expandAllCws="expandAllCws"/>
<SkNoteDetailed :key="note.id" v-model:note="note" :initialTab="initialTab" :class="$style.note" :expandAllCws="expandAllCws"/>
</div>
<div v-if="clips && clips.length > 0" class="_margin">
<div style="font-weight: bold; padding: 12px;">{{ i18n.ts.clip }}</div>
@ -71,6 +71,7 @@ import { defaultStore } from '@/store.js';
const props = defineProps<{
noteId: string;
initialTab?: string;
}>();
const note = ref<null | Misskey.entities.Note>();

19
packages/frontend/src/pages/settings/2fa.qrdialog.vue
View file

@ -25,6 +25,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div style="height: 100cqh; overflow: auto; text-align: center;">
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_gaps">
<MkInfo><MkLink url="https://misskey-hub.net/docs/for-users/stepped-guides/how-to-enable-2fa/" target="_blank">{{ i18n.ts._2fa.moreDetailedGuideHere }}</MkLink></MkInfo>
<I18n :src="i18n.ts._2fa.step1" tag="div">
<template #a>
<a href="https://authy.com/" rel="noopener" target="_blank" class="_link">Authy</a>
@ -33,8 +35,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a>
</template>
</I18n>
<div>{{ i18n.ts._2fa.step2 }}<br>{{ i18n.ts._2fa.step2Click }}</div>
<a :href="twoFactorData.url"><img :class="$style.qr" :src="twoFactorData.qr"></a>
<div>{{ i18n.ts._2fa.step2 }}</div>
<div>
<a :class="$style.qrRoot" :href="twoFactorData.url"><img :class="$style.qr" :src="twoFactorData.qr"></a>
<!-- QRコード側にマージンが入っているので直下でOK -->
<div><MkButton inline rounded link :to="twoFactorData.url" :linkBehavior="'browser'">{{ i18n.ts.launchApp }}</MkButton></div>
</div>
<MkKeyValue :copy="twoFactorData.url">
<template #key>{{ i18n.ts._2fa.step2Uri }}</template>
<template #value>{{ twoFactorData.url }}</template>
@ -109,6 +115,7 @@ import { i18n } from '@/i18n.js';
import * as os from '@/os.js';
import MkFolder from '@/components/MkFolder.vue';
import MkInfo from '@/components/MkInfo.vue';
import MkLink from '@/components/MkLink.vue';
import { confetti } from '@/scripts/confetti.js';
import { signinRequired } from '@/account.js';
@ -177,8 +184,14 @@ function allDone() {
transform: translateX(-50px);
}
.qr {
.qrRoot {
display: block;
margin: 0 auto;
width: 200px;
max-width: 100%;
}
.qr {
width: 100%;
}
</style>

6
packages/frontend/src/pages/settings/2fa.vue
View file

@ -30,7 +30,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton v-else danger @click="unregisterTOTP">{{ i18n.ts.unregister }}</MkButton>
</div>
<MkButton v-else-if="!$i.twoFactorEnabled" primary gradate @click="registerTOTP">{{ i18n.ts._2fa.registerTOTP }}</MkButton>
<div v-else-if="!$i.twoFactorEnabled" class="_gaps_s">
<MkButton primary gradate @click="registerTOTP">{{ i18n.ts._2fa.registerTOTP }}</MkButton>
<MkLink url="https://misskey-hub.net/docs/for-users/stepped-guides/how-to-enable-2fa/" target="_blank"><i class="ti ti-help-circle"></i> {{ i18n.ts.learnMore }}</MkLink>
</div>
</MkFolder>
<MkFolder>
@ -79,6 +82,7 @@ import MkInfo from '@/components/MkInfo.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import FormSection from '@/components/form/section.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkLink from '@/components/MkLink.vue';
import * as os from '@/os.js';
import { signinRequired, updateAccount } from '@/account.js';
import { i18n } from '@/i18n.js';

2
packages/frontend/src/pages/settings/general.vue
View file

@ -148,6 +148,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
<MkSwitch v-model="oneko">{{ i18n.ts.oneko }}</MkSwitch>
<MkSwitch v-model="enableSeasonalScreenEffect">{{ i18n.ts.seasonalScreenEffect }}</MkSwitch>
<MkSwitch v-model="useNativeUIForVideoAudioPlayer">{{ i18n.ts.useNativeUIForVideoAudioPlayer }}</MkSwitch>
</div>
<div>
<MkRadios v-model="emojiStyle">
@ -364,6 +365,7 @@ const enableSeasonalScreenEffect = computed(defaultStore.makeGetterSetter('enabl
const showVisibilitySelectorOnBoost = computed(defaultStore.makeGetterSetter('showVisibilitySelectorOnBoost'));
const visibilityOnBoost = computed(defaultStore.makeGetterSetter('visibilityOnBoost'));
const enableHorizontalSwipe = computed(defaultStore.makeGetterSetter('enableHorizontalSwipe'));
const useNativeUIForVideoAudioPlayer = computed(defaultStore.makeGetterSetter('useNativeUIForVideoAudioPlayer'));
watch(lang, () => {
miLocalStorage.setItem('lang', lang.value as string);

2
packages/frontend/src/router/definition.ts
View file

@ -35,7 +35,7 @@ const routes: RouteDef[] = [{
component: page(() => import('@/pages/user/index.vue')),
}, {
name: 'note',
path: '/notes/:noteId',
path: '/notes/:noteId/:initialTab?',
component: page(() => import('@/pages/note.vue')),
}, {
name: 'list',

1
packages/frontend/src/scripts/keycode.ts
View file

@ -15,6 +15,7 @@ export default (input: string): string[] => {
export const aliases = {
'esc': 'Escape',
'enter': ['Enter', 'NumpadEnter'],
'space': [' ', 'Spacebar'],
'up': 'ArrowUp',
'down': 'ArrowDown',
'left': 'ArrowLeft',

38
packages/frontend/src/scripts/popup-position.ts
View file

@ -26,8 +26,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
let top: number;
if (props.anchorElement) {
left = rect.left + window.pageXOffset + (props.anchorElement.offsetWidth / 2);
top = (rect.top + window.pageYOffset - contentHeight) - props.innerMargin;
left = rect.left + window.scrollX + (props.anchorElement.offsetWidth / 2);
top = (rect.top + window.scrollY - contentHeight) - props.innerMargin;
} else {
left = props.x;
top = (props.y - contentHeight) - props.innerMargin;
@ -35,8 +35,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
left -= (el.offsetWidth / 2);
if (left + contentWidth - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - contentWidth + window.pageXOffset - 1;
if (left + contentWidth - window.scrollX > window.innerWidth) {
left = window.innerWidth - contentWidth + window.scrollX - 1;
}
return [left, top];
@ -47,8 +47,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
let top: number;
if (props.anchorElement) {
left = rect.left + window.pageXOffset + (props.anchorElement.offsetWidth / 2);
top = (rect.top + window.pageYOffset + props.anchorElement.offsetHeight) + props.innerMargin;
left = rect.left + window.scrollX + (props.anchorElement.offsetWidth / 2);
top = (rect.top + window.scrollY + props.anchorElement.offsetHeight) + props.innerMargin;
} else {
left = props.x;
top = (props.y) + props.innerMargin;
@ -56,8 +56,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
left -= (el.offsetWidth / 2);
if (left + contentWidth - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - contentWidth + window.pageXOffset - 1;
if (left + contentWidth - window.scrollX > window.innerWidth) {
left = window.innerWidth - contentWidth + window.scrollX - 1;
}
return [left, top];
@ -68,8 +68,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
let top: number;
if (props.anchorElement) {
left = (rect.left + window.pageXOffset - contentWidth) - props.innerMargin;
top = rect.top + window.pageYOffset + (props.anchorElement.offsetHeight / 2);
left = (rect.left + window.scrollX - contentWidth) - props.innerMargin;
top = rect.top + window.scrollY + (props.anchorElement.offsetHeight / 2);
} else {
left = (props.x - contentWidth) - props.innerMargin;
top = props.y;
@ -77,8 +77,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
top -= (el.offsetHeight / 2);
if (top + contentHeight - window.pageYOffset > window.innerHeight) {
top = window.innerHeight - contentHeight + window.pageYOffset - 1;
if (top + contentHeight - window.scrollY > window.innerHeight) {
top = window.innerHeight - contentHeight + window.scrollY - 1;
}
return [left, top];
@ -89,15 +89,15 @@ export function calcPopupPosition(el: HTMLElement, props: {
let top: number;
if (props.anchorElement) {
left = (rect.left + props.anchorElement.offsetWidth + window.pageXOffset) + props.innerMargin;
left = (rect.left + props.anchorElement.offsetWidth + window.scrollX) + props.innerMargin;
if (props.align === 'top') {
top = rect.top + window.pageYOffset;
top = rect.top + window.scrollY;
if (props.alignOffset != null) top += props.alignOffset;
} else if (props.align === 'bottom') {
// TODO
} else { // center
top = rect.top + window.pageYOffset + (props.anchorElement.offsetHeight / 2);
top = rect.top + window.scrollY + (props.anchorElement.offsetHeight / 2);
top -= (el.offsetHeight / 2);
}
} else {
@ -106,8 +106,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
top -= (el.offsetHeight / 2);
}
if (top + contentHeight - window.pageYOffset > window.innerHeight) {
top = window.innerHeight - contentHeight + window.pageYOffset - 1;
if (top + contentHeight - window.scrollY > window.innerHeight) {
top = window.innerHeight - contentHeight + window.scrollY - 1;
}
return [left, top];
@ -123,7 +123,7 @@ export function calcPopupPosition(el: HTMLElement, props: {
const [left, top] = calcPosWhenTop();
// ツールチップを上に向かって表示するスペースがなければ下に向かって出す
if (top - window.pageYOffset < 0) {
if (top - window.scrollY < 0) {
const [left, top] = calcPosWhenBottom();
return { left, top, transformOrigin: 'center top' };
}
@ -141,7 +141,7 @@ export function calcPopupPosition(el: HTMLElement, props: {
const [left, top] = calcPosWhenLeft();
// ツールチップを左に向かって表示するスペースがなければ右に向かって出す
if (left - window.pageXOffset < 0) {
if (left - window.scrollX < 0) {
const [left, top] = calcPosWhenRight();
return { left, top, transformOrigin: 'left center' };
}

6
packages/frontend/src/scripts/use-chart-tooltip.ts
View file

@ -53,11 +53,11 @@ export function useChartTooltip(opts: { position: 'top' | 'middle' } = { positio
const rect = context.chart.canvas.getBoundingClientRect();
tooltipShowing.value = true;
tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX;
tooltipX.value = rect.left + window.scrollX + context.tooltip.caretX;
if (opts.position === 'top') {
tooltipY.value = rect.top + window.pageYOffset;
tooltipY.value = rect.top + window.scrollY;
} else if (opts.position === 'middle') {
tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
tooltipY.value = rect.top + window.scrollY + context.tooltip.caretY;
}
}

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

@ -495,6 +495,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: true,
},
useNativeUIForVideoAudioPlayer: {
where: 'device',
default: false,
},
sound_masterVolume: {
where: 'device',

10
packages/frontend/src/types/menu.ts
View file

@ -6,6 +6,8 @@
import * as Misskey from 'misskey-js';
import { ComputedRef, Ref } from 'vue';
interface MenuRadioOptionsDef extends Record<string, any> { }
export type MenuAction = (ev: MouseEvent) => void;
export type MenuDivider = { type: 'divider' };
@ -14,13 +16,15 @@ export type MenuLabel = { type: 'label', text: string };
export type MenuLink = { type: 'link', to: string, text: string, icon?: string, indicate?: boolean, avatar?: Misskey.entities.User };
export type MenuA = { type: 'a', href: string, target?: string, download?: string, text: string, icon?: string, indicate?: boolean };
export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string, disabled?: boolean | Ref<boolean> };
export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string, icon?: string, disabled?: boolean | Ref<boolean> };
export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean | ComputedRef<boolean>, avatar?: Misskey.entities.User; action: MenuAction };
export type MenuRadio = { type: 'radio', text: string, icon?: string, ref: Ref<MenuRadioOptionsDef[keyof MenuRadioOptionsDef]>, options: MenuRadioOptionsDef, disabled?: boolean | Ref<boolean> };
export type MenuRadioOption = { type: 'radioOption', text: string, action: MenuAction; active?: boolean | ComputedRef<boolean> };
export type MenuParent = { type: 'parent', text: string, icon?: string, children: MenuItem[] | (() => Promise<MenuItem[]> | MenuItem[]) };
export type MenuPending = { type: 'pending' };
type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuRadio | MenuRadioOption | MenuParent;
type OuterPromiseMenuItem = Promise<MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent>;
export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuRadio | MenuRadioOption | MenuParent;

35
packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
View file

@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkContainer :showHeader="widgetProps.showHeader" class="mkw-bdayfollowings">
<template #icon><i class="ph-cake ph-bold ph-lg"></i></template>
<template #header>{{ i18n.ts._widgets.birthdayFollowings }}</template>
<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="actualFetch()"><i class="ti ti-refresh"></i></button></template>
<div :class="$style.bdayFRoot">
<MkLoading v-if="fetching"/>
@ -53,7 +54,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
emit,
);
const users = ref<Misskey.entities.FollowingFolloweePopulated[]>([]);
const users = ref<Misskey.Endpoints['users/following']['res']>([]);
const fetching = ref(true);
let lastFetchedAt = '1970-01-01';
@ -70,19 +71,35 @@ const fetch = () => {
now.setHours(0, 0, 0, 0);
if (now > lfAtD) {
misskeyApi('users/following', {
limit: 18,
birthday: now.toISOString(),
userId: $i.id,
}).then(res => {
users.value = res;
fetching.value = false;
});
actualFetch();
lastFetchedAt = now.toISOString();
}
};
function actualFetch() {
if ($i == null) {
users.value = [];
fetching.value = false;
return;
}
const now = new Date();
now.setHours(0, 0, 0, 0);
fetching.value = true;
misskeyApi('users/following', {
limit: 18,
birthday: `${now.getFullYear().toString().padStart(4, '0')}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`,
userId: $i.id,
}).then(res => {
users.value = res;
window.setTimeout(() => {
// 早すぎるとチカチカする
fetching.value = false;
}, 100);
});
}
useInterval(fetch, 1000 * 60, {
immediate: true,
afterMounted: true,

6
packages/frontend/src/widgets/WidgetUnixClock.vue
View file

@ -68,9 +68,9 @@ watch(showColon, (v) => {
});
const tick = () => {
const now = new Date();
ss.value = Math.floor(now.getTime() / 1000).toString();
ms.value = Math.floor(now.getTime() % 1000 / 10).toString().padStart(2, '0');
const now = Date.now();
ss.value = Math.floor(now / 1000).toString();
ms.value = Math.floor(now % 1000 / 10).toString().padStart(2, '0');
if (ss.value !== prevSec) showColon.value = true;
prevSec = ss.value;
};