summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/frontend/src/components')
-rw-r--r--packages/frontend/src/components/MkImgWithBlurhash.vue3
-rw-r--r--packages/frontend/src/components/MkMediaList.vue122
-rw-r--r--packages/frontend/src/components/MkModal.vue1
-rw-r--r--packages/frontend/src/components/MkNote.vue2
-rw-r--r--packages/frontend/src/components/MkNoteDetailed.vue2
-rw-r--r--packages/frontend/src/components/MkNoteSimple.vue1
-rw-r--r--packages/frontend/src/components/MkPostForm.vue5
-rw-r--r--packages/frontend/src/components/MkTagCloud.vue4
-rw-r--r--packages/frontend/src/components/MkTimeline.vue10
9 files changed, 105 insertions, 45 deletions
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 4e36defb7c..6dcc890cd3 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -108,8 +108,7 @@ function waitForDecode() {
.then(() => {
loaded = true;
}, error => {
- console.error('Error occurred during decoding image', img.value, error);
- throw Error(error);
+ console.log('Error occurred during decoding image', img.value, error);
});
} else {
loaded = false;
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index be0aed6524..0cdccfb169 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -1,5 +1,5 @@
<template>
-<div>
+<div ref="root">
<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
@@ -22,8 +22,43 @@
</div>
</template>
+<script lang="ts">
+/**
+ * アスペクト比算出のためにHTMLElement.clientWidthを使うが、
+ * 大変重たいのでコンテナ要素とメディアリスト幅のペアをキャッシュする
+ * （タイムラインごとにスクロールコンテナが存在する前提だが……）
+ */
+const widthCache = new Map<Element, number>();
+
+/**
+ * コンテナ要素がリサイズされたらキャッシュを削除する
+ */
+const ro = new ResizeObserver(entries => {
+ for (const entry of entries) {
+ widthCache.delete(entry.target);
+ }
+});
+
+async function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLElement, count = 0) {
+ if (_DEV_) console.log('getClientWidthWithCache', { targetEl, containerEl, count, cache: widthCache.get(containerEl) });
+ if (widthCache.has(containerEl)) return widthCache.get(containerEl)!;
+
+ const width = targetEl.clientWidth;
+
+ if (count <= 10 && width < 64) {
+ // widthが64未満はおかしいのでリトライする
+ await new Promise(resolve => setTimeout(resolve, 50));
+ return getClientWidthWithCache(targetEl, containerEl, count + 1);
+ }
+
+ widthCache.set(containerEl, width);
+ ro.observe(containerEl);
+ return width;
+}
+</script>
+
<script lang="ts" setup>
-import { onMounted, watch, shallowRef } from 'vue';
+import { onMounted, onUnmounted, shallowRef } from 'vue';
import * as misskey from 'misskey-js';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe';
@@ -34,19 +69,33 @@ import XVideo from '@/components/MkMediaVideo.vue';
import * as os from '@/os';
import { FILE_TYPE_BROWSERSAFE } from '@/const';
import { defaultStore } from '@/store';
+import { getScrollContainer, getBodyScrollHeight } from '@/scripts/scroll';
const props = defineProps<{
mediaList: misskey.entities.DriveFile[];
raw?: boolean;
}>();
+const root = shallowRef<HTMLDivElement>();
+const container = shallowRef<HTMLElement | null | undefined>(undefined);
const gallery = shallowRef<HTMLDivElement>();
const pswpZIndex = os.claimZIndex('middle');
document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
+let lightbox: PhotoSwipeLightbox | null;
-function calcAspectRatio() {
- if (!gallery.value) return;
+const popstateHandler = (): void => {
+ if (lightbox.pswp && lightbox.pswp.isOpen === true) {
+ lightbox.pswp.close();
+ }
+};
+
+/**
+ * アスペクト比をmediaListWithOneImageAppearanceに基づいていい感じに調整する
+ * aspect-ratioではなくheightを使う
+ */
+async function calcAspectRatio() {
+ if (!gallery.value || !root.value) return;
let img = props.mediaList[0];
@@ -55,29 +104,47 @@ function calcAspectRatio() {
return;
}
- // アスペクト比上限設定では、横長の場合は高さを縮小させる
- const ratioMax = (ratio: number) => `${Math.max(ratio, img.properties.width / img.properties.height).toString()} / 1`;
+ if (!container.value) container.value = getScrollContainer(root.value);
+ const width = container.value ? await getClientWidthWithCache(root.value, container.value) : root.value.clientWidth;
+
+ const heightMin = (ratio: number) => {
+ const imgResizeRatio = width / img.properties.width;
+ const imgDrawHeight = img.properties.height * imgResizeRatio;
+ const maxHeight = width * ratio;
+ const height = Math.min(imgDrawHeight, maxHeight);
+ if (_DEV_) console.log('Image height calculated:', { width, properties: img.properties, imgResizeRatio, imgDrawHeight, maxHeight, height });
+ return `${height}px`;
+ };
switch (defaultStore.state.mediaListWithOneImageAppearance) {
case '16_9':
- gallery.value.style.aspectRatio = ratioMax(16 / 9);
+ gallery.value.style.height = heightMin(9 / 16);
break;
case '1_1':
- gallery.value.style.aspectRatio = ratioMax(1);
+ gallery.value.style.height = heightMin(1);
break;
case '2_3':
- gallery.value.style.aspectRatio = ratioMax(2 / 3);
+ gallery.value.style.height = heightMin(3 / 2);
break;
- default:
- gallery.value.style.aspectRatio = '';
+ default: {
+ const maxHeight = Math.max(64, (container.value ? container.value.clientHeight : getBodyScrollHeight()) * 0.5 || 360);
+ if (width === 0 || !maxHeight) return;
+ const imgResizeRatio = width / img.properties.width;
+ const imgDrawHeight = img.properties.height * imgResizeRatio;
+ gallery.value.style.height = `${Math.max(64, Math.min(imgDrawHeight, maxHeight))}px`;
+ gallery.value.style.minHeight = 'initial';
+ gallery.value.style.maxHeight = 'initial';
break;
+ }
}
-}
-watch([defaultStore.reactiveState.mediaListWithOneImageAppearance, gallery], () => calcAspectRatio());
+ gallery.value.style.aspectRatio = 'initial';
+}
onMounted(() => {
- const lightbox = new PhotoSwipeLightbox({
+ calcAspectRatio();
+
+ lightbox = new PhotoSwipeLightbox({
dataSource: props.mediaList
.filter(media => {
if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
@@ -161,12 +228,7 @@ onMounted(() => {
lightbox.init();
- window.addEventListener('popstate', () => {
- if (lightbox.pswp && lightbox.pswp.isOpen === true) {
- lightbox.pswp.close();
- return;
- }
- });
+ window.addEventListener('popstate', popstateHandler);
lightbox.on('beforeOpen', () => {
history.pushState(null, '', '#pswp');
@@ -179,6 +241,12 @@ onMounted(() => {
});
});
+onUnmounted(() => {
+ window.removeEventListener('popstate', popstateHandler);
+ lightbox?.destroy();
+ lightbox = null;
+});
+
const previewable = (file: misskey.entities.DriveFile): boolean => {
if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
@@ -203,7 +271,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
&.n1 {
grid-template-rows: 1fr;
- // default (expand)
+ // default but fallback (expand)
min-height: 64px;
max-height: clamp(
64px,
@@ -212,20 +280,20 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
);
&.n116_9 {
- min-height: none;
- max-height: none;
+ min-height: initial;
+ max-height: initial;
aspect-ratio: 16 / 9; // fallback
}
&.n11_1{
- min-height: none;
- max-height: none;
+ min-height: initial;
+ max-height: initial;
aspect-ratio: 1 / 1; // fallback
}
&.n12_3 {
- min-height: none;
- max-height: none;
+ min-height: initial;
+ max-height: initial;
aspect-ratio: 2 / 3; // fallback
}
}
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index bb5c6c7aab..bc6e3e4171 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -431,6 +431,7 @@ defineExpose({
margin: auto;
padding: 32px;
display: flex;
+ overflow: auto;
@media (max-width: 500px) {
padding: 16px;
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index deeae6e940..02431a4557 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -341,6 +341,7 @@ function reply(viaKeyboard = false): void {
pleaseLogin();
os.post({
reply: appearNote,
+ channel: appearNote.channel,
animation: !viaKeyboard,
}, () => {
focus();
@@ -758,6 +759,7 @@ function showReactions(): void {
padding: 16px;
border: dashed 1px var(--renote);
border-radius: 8px;
+ overflow: clip;
}
.channel {
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 1f8a36b8de..a40b9cd2bd 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -320,6 +320,7 @@ function reply(viaKeyboard = false): void {
showMovedDialog();
os.post({
reply: appearNote,
+ channel: appearNote.channel,
animation: !viaKeyboard,
}, () => {
focus();
@@ -595,6 +596,7 @@ if (appearNote.replyId) {
padding: 16px;
border: dashed 1px var(--renote);
border-radius: 8px;
+ overflow: clip;
}
.channel {
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 21be1454a7..98ea91d6be 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -37,7 +37,6 @@ const showContent = $ref(false);
display: flex;
margin: 0;
padding: 0;
- overflow: clip;
font-size: 0.95em;
}
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index f516ccbad8..0527811ab0 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -540,7 +540,7 @@ function onCompositionEnd(ev: CompositionEvent) {
}
async function onPaste(ev: ClipboardEvent) {
- for (const { item, i } of Array.from(ev.clipboardData.items).map((item, i) => ({ item, i }))) {
+ for (const { item, i } of Array.from(ev.clipboardData.items, (item, i) => ({ item, i }))) {
if (item.kind === 'file') {
const file = item.getAsFile();
const lio = file.name.lastIndexOf('.');
@@ -907,7 +907,6 @@ defineExpose({
display: flex;
flex-wrap: nowrap;
gap: 4px;
- margin-bottom: -10px;
}
.headerLeft {
@@ -1025,7 +1024,7 @@ defineExpose({
}
.targetNote {
- padding: 10px 20px 16px 20px;
+ padding: 0 20px 16px 20px;
}
.withQuote {
diff --git a/packages/frontend/src/components/MkTagCloud.vue b/packages/frontend/src/components/MkTagCloud.vue
index 6e4e054aad..21e76b766b 100644
--- a/packages/frontend/src/components/MkTagCloud.vue
+++ b/packages/frontend/src/components/MkTagCloud.vue
@@ -16,8 +16,8 @@ import tinycolor from 'tinycolor2';
const loaded = !!window.TagCanvas;
const SAFE_FOR_HTML_ID = 'abcdefghijklmnopqrstuvwxyz';
const computedStyle = getComputedStyle(document.documentElement);
-const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
-const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
+const idForCanvas = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
+const idForTags = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
let available = $ref(false);
let rootEl = $shallowRef<HTMLElement | null>(null);
let canvasEl = $shallowRef<HTMLCanvasElement | null>(null);
diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
index 2595ebc45d..062d0bd87a 100644
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@@ -38,14 +38,6 @@ const prepend = note => {
}
};
-const onUserAdded = () => {
- tlComponent.pagingComponent?.reload();
-};
-
-const onUserRemoved = () => {
- tlComponent.pagingComponent?.reload();
-};
-
let endpoint;
let query;
let connection;
@@ -125,8 +117,6 @@ if (props.src === 'antenna') {
listId: props.list,
});
connection.on('note', prepend);
- connection.on('userAdded', onUserAdded);
- connection.on('userRemoved', onUserRemoved);
} else if (props.src === 'channel') {
endpoint = 'channels/timeline';
query = {
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-13 13:47:07 +0000