From 9542cb8d6253a93b06a68b9ac3647367f8f7354c Mon Sep 17 00:00:00 2001 From: tamaina Date: Mon, 4 Mar 2024 13:48:57 +0900 Subject: fix(backend): リモートサーバーの情報が更新できなくなっていた問題を修正 (#13507) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(backend): fetchInstanceMetadataのLockが永遠に解除されない問題を修正 Co-authored-by: まっちゃとーにゅ <17376330+u1-liquid@users.noreply.github.com> * fix test * fix * comment * comment * improve test --------- Co-authored-by: まっちゃとーにゅ <17376330+u1-liquid@users.noreply.github.com> --- .../src/core/FetchInstanceMetadataService.ts | 28 ++++++++++++++++------ 1 file changed, 21 insertions(+), 7 deletions(-) (limited to 'packages/backend/src') diff --git a/packages/backend/src/core/FetchInstanceMetadataService.ts b/packages/backend/src/core/FetchInstanceMetadataService.ts index bc270bd28f..8d173855f3 100644 --- a/packages/backend/src/core/FetchInstanceMetadataService.ts +++ b/packages/backend/src/core/FetchInstanceMetadataService.ts @@ -51,21 +51,35 @@ export class FetchInstanceMetadataService { } @bindThis - public async tryLock(host: string): Promise { - const mutex = await this.redisClient.set(`fetchInstanceMetadata:mutex:${host}`, '1', 'GET'); - return mutex !== '1'; + // public for test + public async tryLock(host: string): Promise { + // TODO: マイグレーションなのであとで消す (2024.3.1) + this.redisClient.del(`fetchInstanceMetadata:mutex:${host}`); + + return await this.redisClient.set( + `fetchInstanceMetadata:mutex:v2:${host}`, '1', + 'EX', 30, // 30秒したら自動でロック解除 https://github.com/misskey-dev/misskey/issues/13506#issuecomment-1975375395 + 'GET' // 古い値を返す（なかったらnull） + ); } @bindThis - public unlock(host: string): Promise<'OK'> { - return this.redisClient.set(`fetchInstanceMetadata:mutex:${host}`, '0'); + // public for test + public unlock(host: string): Promise { + return this.redisClient.del(`fetchInstanceMetadata:mutex:v2:${host}`); } @bindThis public async fetchInstanceMetadata(instance: MiInstance, force = false): Promise { const host = instance.host; - // Acquire mutex to ensure no parallel runs - if (!await this.tryLock(host)) return; + + // finallyでunlockされてしまうのでtry内でロックチェックをしない + // （returnであってもfinallyは実行される） + if (!force && await this.tryLock(host) === '1') { + // 1が返ってきていたらロックされているという意味なので、何もしない + return; + } + try { if (!force) { const _instance = await this.federatedInstanceService.fetch(host); -- cgit v1.2.3-freya From 08d618bb8b98199a4670313019d6a85ad4cf155b Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Tue, 5 Mar 2024 18:06:57 +0900 Subject: enhance(frontend): 自分のノートの添付ファイルから直接ファイルの詳細ページに飛べるようにする (#13520) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * enhance(frontend): 自分のノートの添付ファイルから直接ファイルの詳細ページに飛べるようにする * 他のファイルタイプにも対応 * Update Changelog --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> --- CHANGELOG.md | 1 + .../backend/src/core/entities/DriveFileEntityService.ts | 2 +- packages/frontend/src/components/MkMediaAudio.vue | 15 ++++++++++++--- packages/frontend/src/components/MkMediaImage.vue | 9 ++++++++- packages/frontend/src/components/MkMediaVideo.vue | 15 ++++++++++++--- 5 files changed, 34 insertions(+), 8 deletions(-) (limited to 'packages/backend/src') diff --git a/CHANGELOG.md b/CHANGELOG.md index 0cebaabffd..1b90094279 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - ### Client +- Enhance: 自分のノートの添付ファイルから直接ファイルの詳細ページに飛べるように - Fix: 一部のページ内リンクが正しく動作しない問題を修正 ### Server diff --git a/packages/backend/src/core/entities/DriveFileEntityService.ts b/packages/backend/src/core/entities/DriveFileEntityService.ts index 8affe2b3bf..26bf386cbc 100644 --- a/packages/backend/src/core/entities/DriveFileEntityService.ts +++ b/packages/backend/src/core/entities/DriveFileEntityService.ts @@ -248,7 +248,7 @@ export class DriveFileEntityService { folder: opts.detail && file.folderId ? this.driveFolderEntityService.pack(file.folderId, { detail: true, }) : null, - userId: opts.withUser ? file.userId : null, + userId: file.userId, user: (opts.withUser && file.userId) ? this.userEntityService.pack(file.userId) : null, }); } diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue index d42146f941..96c9b9fd66 100644 --- a/packages/frontend/src/components/MkMediaAudio.vue +++ b/packages/frontend/src/components/MkMediaAudio.vue @@ -66,7 +66,7 @@ import * as os from '@/os.js'; import bytes from '@/filters/bytes.js'; import { hms } from '@/filters/hms.js'; import MkMediaRange from '@/components/MkMediaRange.vue'; -import { iAmModerator } from '@/account.js'; +import { $i, iAmModerator } from '@/account.js'; const props = defineProps<{ audio: Misskey.entities.DriveFile; @@ -96,8 +96,6 @@ function showMenu(ev: MouseEvent) { if (iAmModerator) { menu.push({ - type: 'divider', - }, { text: props.audio.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive, icon: props.audio.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation', danger: true, @@ -105,6 +103,17 @@ function showMenu(ev: MouseEvent) { }); } + if ($i?.id === props.audio.userId) { + menu.push({ + type: 'divider', + }, { + type: 'link' as const, + text: i18n.ts._fileViewer.title, + icon: 'ti ti-info-circle', + to: `/my/drive/file/${props.audio.id}`, + }); + } + menuShowing.value = true; os.popupMenu(menu, ev.currentTarget ?? ev.target, { align: 'right', diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue index 4ba2c76133..82f36fe5c4 100644 --- a/packages/frontend/src/components/MkMediaImage.vue +++ b/packages/frontend/src/components/MkMediaImage.vue @@ -59,7 +59,7 @@ import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; import { defaultStore } from '@/store.js'; import { i18n } from '@/i18n.js'; import * as os from '@/os.js'; -import { iAmModerator } from '@/account.js'; +import { $i, iAmModerator } from '@/account.js'; const props = withDefaults(defineProps<{ image: Misskey.entities.DriveFile; @@ -114,6 +114,13 @@ function showMenu(ev: MouseEvent) { action: () => { os.apiWithDialog('drive/files/update', { fileId: props.image.id, isSensitive: true }); }, + }] : []), ...($i?.id === props.image.userId ? [{ + type: 'divider' as const, + }, { + type: 'link' as const, + text: i18n.ts._fileViewer.title, + icon: 'ti ti-info-circle', + to: `/my/drive/file/${props.image.id}`, }] : [])], ev.currentTarget ?? ev.target); } diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index eab4fdfd6b..73c1b6ff9d 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -94,7 +94,7 @@ import * as os from '@/os.js'; import { isFullscreenNotSupported } from '@/scripts/device-kind.js'; import hasAudio from '@/scripts/media-has-audio.js'; import MkMediaRange from '@/components/MkMediaRange.vue'; -import { iAmModerator } from '@/account.js'; +import { $i, iAmModerator } from '@/account.js'; const props = defineProps<{ video: Misskey.entities.DriveFile; @@ -122,8 +122,6 @@ function showMenu(ev: MouseEvent) { if (iAmModerator) { menu.push({ - type: 'divider', - }, { text: props.video.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive, icon: props.video.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation', danger: true, @@ -131,6 +129,17 @@ function showMenu(ev: MouseEvent) { }); } + if ($i?.id === props.video.userId) { + menu.push({ + type: 'divider', + }, { + type: 'link' as const, + text: i18n.ts._fileViewer.title, + icon: 'ti ti-info-circle', + to: `/my/drive/file/${props.video.id}`, + }); + } + menuShowing.value = true; os.popupMenu(menu, ev.currentTarget ?? ev.target, { align: 'right', -- cgit v1.2.3-freya From 4457b02db2ca7591afa8683141e4b223170ea367 Mon Sep 17 00:00:00 2001 From: tamaina Date: Wed, 6 Mar 2024 08:08:32 +0000 Subject: fix(frontend)?: importAppScriptはimportをawaitするように MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/backend/src/server/web/boot.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/backend/src') diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 59441826b0..396536948e 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -86,8 +86,8 @@ //#endregion //#region Script - function importAppScript() { - import(`/vite/${CLIENT_ENTRY}`) + async function importAppScript() { + await import(`/vite/${CLIENT_ENTRY}`) .catch(async e => { console.error(e); renderError('APP_IMPORT', e); -- cgit v1.2.3-freya From 00c1e4eb550c68f43ae44ba9f0c8da9887fc2180 Mon Sep 17 00:00:00 2001 From: tamaina Date: Wed, 6 Mar 2024 09:40:47 +0000 Subject: perf: boot.jsの調整 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/backend/src/server/web/boot.js | 501 ++++++++++++++++++-------------- 1 file changed, 288 insertions(+), 213 deletions(-) (limited to 'packages/backend/src') diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 396536948e..bc7b800d22 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -7,158 +7,163 @@ * BOOT LOADER * サーバーからレスポンスされるHTMLに埋め込まれるスクリプトで、以下の役割を持ちます。 * - 翻訳ファイルをフェッチする。 - * - バージョンに基づいて適切なメインスクリプトを読み込む。 + * - 事前に挿入されたCLIENT_ENTRYを読んで適切なメインスクリプトを読み込む。 * - キャッシュされたコンパイル済みテーマを適用する。 * - クライアントの設定値に基づいて対応するHTMLクラス等を設定する。 + * - もしメインスクリプトの読み込みなどでエラーが発生した場合は、renderErrorでエラーを描画する。 * テーマをこの段階で設定するのは、メインスクリプトが読み込まれる間もテーマを適用したいためです。 - * 注: webpackは介さないため、このファイルではrequireやimportは使えません。 */ 'use strict'; +var misskey_loader = new Set(); + // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので -(async () => { - window.onerror = (e) => { - console.error(e); - renderError('SOMETHING_HAPPENED', e); - }; - window.onunhandledrejection = (e) => { - console.error(e); - renderError('SOMETHING_HAPPENED_IN_PROMISE', e); - }; +function boot() { + const defaultSolutions = [ + 'Clear the browser cache / ブラウザのキャッシュをクリアする', + 'Update your os and browser / ブラウザおよびOSを最新バージョンに更新する', + 'Disable an adblocker / アドブロッカーを無効にする', + '(Tor Browser) Set dom.webaudio.enabled to true / dom.webaudio.enabledをtrueに設定する' + ]; + + const onErrorStyle = ` + * { + font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; + } - let forceError = localStorage.getItem('forceError'); - if (forceError != null) { - renderError('FORCED_ERROR', 'This error is forced by having forceError in local storage.') + #misskey_app, + #splash { + display: none !important; } - //#region Detect language & fetch translations - if (!localStorage.hasOwnProperty('locale')) { - const supportedLangs = LANGS; - let lang = localStorage.getItem('lang'); - if (lang == null || !supportedLangs.includes(lang)) { - if (supportedLangs.includes(navigator.language)) { - lang = navigator.language; - } else { - lang = supportedLangs.find(x => x.split('-')[0] === navigator.language); + body, + html { + background-color: #222; + color: #dfddcc; + justify-content: center; + margin: auto; + padding: 10px; + text-align: center; + } - // Fallback - if (lang == null) lang = 'en-US'; - } - } + button { + border-radius: 999px; + padding: 0px 12px 0px 12px; + border: none; + cursor: pointer; + margin-bottom: 12px; + } - const metaRes = await window.fetch('/api/meta', { - method: 'POST', - body: JSON.stringify({}), - credentials: 'omit', - cache: 'no-cache', - headers: { - 'Content-Type': 'application/json', - }, - }); - if (metaRes.status !== 200) { - renderError('META_FETCH'); - return; - } - const meta = await metaRes.json(); - const v = meta.version; - if (v == null) { - renderError('META_FETCH_V'); - return; - } + .button-big { + background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0)); + line-height: 50px; + } - // for https://github.com/misskey-dev/misskey/issues/10202 - if (lang == null || lang.toString == null || lang.toString() === 'null') { - console.error('invalid lang value detected!!!', typeof lang, lang); - lang = 'en-US'; - } + .button-big:hover { + background: rgb(153, 204, 0); + } - const localRes = await window.fetch(`/assets/locales/${lang}.${v}.json`); - if (localRes.status === 200) { - localStorage.setItem('lang', lang); - localStorage.setItem('locale', await localRes.text()); - localStorage.setItem('localeVersion', v); - } else { - renderError('LOCALE_FETCH'); - return; - } + .button-small { + background: #444; + line-height: 40px; } - //#endregion - //#region Script - async function importAppScript() { - await import(`/vite/${CLIENT_ENTRY}`) - .catch(async e => { - console.error(e); - renderError('APP_IMPORT', e); - }); + .button-small:hover { + background: #555; } - // タイミングによっては、この時点でDOMの構築が済んでいる場合とそうでない場合とがある - if (document.readyState !== 'loading') { - importAppScript(); - } else { - window.addEventListener('DOMContentLoaded', () => { - importAppScript(); - }); + .button-label-big { + color: #222; + font-weight: bold; + font-size: 1.2em; + padding: 12px; } - //#endregion - //#region Theme - const theme = localStorage.getItem('theme'); - if (theme) { - for (const [k, v] of Object.entries(JSON.parse(theme))) { - document.documentElement.style.setProperty(`--${k}`, v.toString()); + .button-label-small { + color: rgb(153, 204, 0); + font-size: 16px; + padding: 12px; + } - // HTMLの theme-color 適用 - if (k === 'htmlThemeColor') { - for (const tag of document.head.children) { - if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') { - tag.setAttribute('content', v); - break; - } - } - } - } + a { + color: rgb(134, 179, 0); + text-decoration: none; } - const colorScheme = localStorage.getItem('colorScheme'); - if (colorScheme) { - document.documentElement.style.setProperty('color-scheme', colorScheme); + + p, + li { + font-size: 16px; } - //#endregion - const fontSize = localStorage.getItem('fontSize'); - if (fontSize) { - document.documentElement.classList.add('f-' + fontSize); + .icon-warning { + color: #dec340; + height: 4rem; + padding-top: 2rem; } - const useSystemFont = localStorage.getItem('useSystemFont'); - if (useSystemFont) { - document.documentElement.classList.add('useSystemFont'); + h1 { + font-size: 1.5em; + margin: 1em; } - const wallpaper = localStorage.getItem('wallpaper'); - if (wallpaper) { - document.documentElement.style.backgroundImage = `url(${wallpaper})`; + summary { + cursor: pointer; } - const customCss = localStorage.getItem('customCss'); - if (customCss && customCss.length > 0) { - const style = document.createElement('style'); - style.innerHTML = customCss; - document.head.appendChild(style); + code { + font-family: Fira, FiraCode, monospace; + } + + #errors { + display: flex; + flex-direction: column; + align-items: center; } - async function addStyle(styleText) { - let css = document.createElement('style'); - css.appendChild(document.createTextNode(styleText)); - document.head.appendChild(css); + .errorInfo { + background: #333; + width: 40rem; + max-width: 100%; + border-radius: 10px; + justify-content: center; + padding: 1rem; + margin-bottom: 1rem; + box-sizing: border-box; } - function renderError(code, details) { + .errorInfo > pre { + text-wrap: auto; + text-wrap: balance; + } + `; + + + const addStyle = (styleText) => { + try { + let css = document.createElement('style'); + css.appendChild(document.createTextNode(styleText)); + document.head.appendChild(css); + } catch (e) { + console.error(e); + } + } + + const renderError = (code, details, solutions = defaultSolutions) => { + if (document.readyState === 'loading') { + window.addEventListener('DOMContentLoaded', () => { + renderError(code, details, solutions); + }); + try { + addStyle(onErrorStyle); + } catch (e) { } + return; + } + let errorsElement = document.getElementById('errors'); if (!errorsElement) { + // エラー描画用のビューになっていない場合は、エラー描画用のビューに切り替える document.body.innerHTML = ` @@ -170,10 +175,7 @@ Reload / リロード

The following actions may solve the problem. / 以下を行うと解決する可能性があります。

-

Clear the browser cache / ブラウザのキャッシュをクリアする

-

Update your os and browser / ブラウザおよびOSを最新バージョンに更新する

-

Disable an adblocker / アドブロッカーを無効にする

-

(Tor Browser) Set dom.webaudio.enabled to true / dom.webaudio.enabledをtrueに設定する

+ ${solutions.map(x => `

${x}

`).join('')}
Other options / その他のオプション @@ -199,121 +201,194 @@ `; errorsElement = document.getElementById('errors'); } - const detailsElement = document.createElement('details'); - detailsElement.id = 'errorInfo'; - detailsElement.innerHTML = ` -
- - ERROR CODE: ${code} - - ${JSON.stringify(details)}`; - errorsElement.appendChild(detailsElement); - addStyle(` - * { - font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; - } - #misskey_app, - #splash { - display: none !important; - } + if (typeof details === 'string') { + const errorEl = document.createElement('div'); + errorEl.classList.add('errorInfo'); + + const titleCodeElement = document.createElement('code'); + titleCodeElement.textContent = `ERROR CODE: ${code}`; + errorEl.appendChild(titleCodeElement); + + errorEl.appendChild(document.createElement('br')); + + const detailsCodeElement = document.createElement('code'); + detailsCodeElement.textContent = details; + errorEl.appendChild(detailsCodeElement); + + errorsElement.appendChild(errorEl); + } else if (details instanceof Error) { + const errorEl = document.createElement('details'); + errorEl.classList.add('errorInfo'); + + const summaryElement = document.createElement('summary'); + const titleCodeElement = document.createElement('code'); + titleCodeElement.textContent = `ERROR CODE: ${code}`; + summaryElement.appendChild(titleCodeElement); + errorEl.appendChild(summaryElement); + + const detailsPreElement = document.createElement('pre'); + const detailsMessageElement = document.createElement('code'); + detailsMessageElement.textContent = details.message; + detailsPreElement.appendChild(detailsMessageElement); + detailsPreElement.appendChild(document.createElement('br')); + const detailsCodeElement = document.createElement('code'); + detailsCodeElement.textContent = details.stack; + detailsPreElement.appendChild(detailsCodeElement); + errorEl.appendChild(detailsPreElement); + + errorsElement.appendChild(errorEl); + } else { + const errorEl = document.createElement('details'); + errorEl.classList.add('errorInfo'); - body, - html { - background-color: #222; - color: #dfddcc; - justify-content: center; - margin: auto; - padding: 10px; - text-align: center; - } + const summaryElement = document.createElement('summary'); + const titleCodeElement = document.createElement('code'); + titleCodeElement.textContent = `ERROR CODE: ${code}`; + summaryElement.appendChild(titleCodeElement); + errorEl.appendChild(summaryElement); - button { - border-radius: 999px; - padding: 0px 12px 0px 12px; - border: none; - cursor: pointer; - margin-bottom: 12px; - } + const detailsCodeElement = document.createElement('code'); + detailsCodeElement.textContent = JSON.stringify(details); + errorEl.appendChild(detailsCodeElement); - .button-big { - background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0)); - line-height: 50px; + errorsElement.appendChild(errorEl); } - .button-big:hover { - background: rgb(153, 204, 0); - } + addStyle(onErrorStyle); + } - .button-small { - background: #444; - line-height: 40px; - } + window.onerror = (e) => { + console.error(e); + renderError('SOMETHING_HAPPENED', e); + }; + window.onunhandledrejection = (e) => { + console.error(e); + renderError('SOMETHING_HAPPENED_IN_PROMISE', e); + }; - .button-small:hover { - background: #555; - } + let forceError = localStorage.getItem('forceError'); + if (forceError != null) { + renderError('FORCED_ERROR', 'This error is forced by having forceError in local storage.') + renderError('FORCED_ERROR', Error('This error is forced by having forceError in local storage.')); + return; + } - .button-label-big { - color: #222; - font-weight: bold; - font-size: 1.2em; - padding: 12px; + //#region After DOM loaded + async function oncontentload() { + const providedMetaEl = document.getElementById('misskey_meta'); + const meta = providedMetaEl && providedMetaEl.textContent ? JSON.parse(providedMetaEl.textContent) : null; + const providedAt = providedMetaEl && providedMetaEl.dataset.generatedAt ? parseInt(providedMetaEl.dataset.generatedAt) : 0; + console.log('providedAt', providedAt, 'now', Date.now()); + if (providedAt < Date.now() - 1000 * 60 * 60 * 24) { + // 古いデータがなぜか提供された場合は、エラーを描画する + renderError( + 'META_PROVIDED_AT_TOO_OLD', + 'This view is too old. Please reload.', + [ + 'Reload / リロードする', + 'Clear the browser cache then reload / ブラウザのキャッシュをクリアしてリロードする', + 'Disable an adblocker / アドブロッカーを無効にする', + ] + ); + return; } - .button-label-small { - color: rgb(153, 204, 0); - font-size: 16px; - padding: 12px; - } + //#region Detect language & fetch translations on first load + if (!localStorage.hasOwnProperty('locale')) { + const supportedLangs = LANGS; + let lang = localStorage.getItem('lang'); + if (lang == null || !supportedLangs.includes(lang)) { + if (supportedLangs.includes(navigator.language)) { + lang = navigator.language; + } else { + lang = supportedLangs.find(x => x.split('-')[0] === navigator.language); + + // Fallback + if (lang == null) lang = 'en-US'; + } + } - a { - color: rgb(134, 179, 0); - text-decoration: none; - } + const v = meta?.version; - p, - li { - font-size: 16px; - } + // for https://github.com/misskey-dev/misskey/issues/10202 + if (lang == null || lang.toString == null || lang.toString() === 'null') { + console.warn('invalid lang value detected!!!', typeof lang, lang); + lang = 'en-US'; + } - .icon-warning { - color: #dec340; - height: 4rem; - padding-top: 2rem; + const localRes = await window.fetch(`/assets/locales/${lang}.${v}.json`); + if (localRes.status === 200) { + localStorage.setItem('lang', lang); + localStorage.setItem('locale', await localRes.text()); + localStorage.setItem('localeVersion', v); + } else { + renderError('LOCALE_FETCH'); + return; + } } + //#endregion - h1 { - font-size: 1.5em; - margin: 1em; - } + await import(`/vite/${CLIENT_ENTRY}`) + .catch(async e => { + console.error(e); + renderError('APP_IMPORT', e); + }); + } - code { - font-family: Fira, FiraCode, monospace; - } + if (document.readyState !== 'loading') { + misskey_loader.add(oncontentload()); + } else { + window.addEventListener('DOMContentLoaded', () => { + misskey_loader.add(oncontentload()); + }); + } + //#endregion - #errorInfo { - background: #333; - margin-bottom: 2rem; - padding: 0.5rem 1rem; - width: 40rem; - border-radius: 10px; - justify-content: center; - margin: auto; - } + //#region Theme + const theme = localStorage.getItem('theme'); + if (theme) { + for (const [k, v] of Object.entries(JSON.parse(theme))) { + document.documentElement.style.setProperty(`--${k}`, v.toString()); - #errorInfo summary { - cursor: pointer; + // HTMLの theme-color 適用 + if (k === 'htmlThemeColor') { + for (const tag of document.head.children) { + if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') { + tag.setAttribute('content', v); + break; + } + } + } } + } + const colorScheme = localStorage.getItem('colorScheme'); + if (colorScheme) { + document.documentElement.style.setProperty('color-scheme', colorScheme); + } + //#endregion - #errorInfo summary > * { - display: inline; - } + const fontSize = localStorage.getItem('fontSize'); + if (fontSize) { + document.documentElement.classList.add('f-' + fontSize); + } - @media screen and (max-width: 500px) { - #errorInfo { - width: 50%; - } - `) + const useSystemFont = localStorage.getItem('useSystemFont'); + if (useSystemFont) { + document.documentElement.classList.add('useSystemFont'); } -})(); + + const wallpaper = localStorage.getItem('wallpaper'); + if (wallpaper) { + document.documentElement.style.backgroundImage = `url(${wallpaper})`; + } + + const customCss = localStorage.getItem('customCss'); + if (customCss && customCss.length > 0) { + const style = document.createElement('style'); + style.innerHTML = customCss; + document.head.appendChild(style); + } +} + +boot(); -- cgit v1.2.3-freya From 62922352b3cddaee9f72261448d862002e55a67c Mon Sep 17 00:00:00 2001 From: tamaina Date: Wed, 6 Mar 2024 09:49:01 +0000 Subject: Revert "perf: boot.jsの調整" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 00c1e4eb550c68f43ae44ba9f0c8da9887fc2180. --- packages/backend/src/server/web/boot.js | 501 ++++++++++++++------------------ 1 file changed, 213 insertions(+), 288 deletions(-) (limited to 'packages/backend/src') diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index bc7b800d22..396536948e 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -7,163 +7,158 @@ * BOOT LOADER * サーバーからレスポンスされるHTMLに埋め込まれるスクリプトで、以下の役割を持ちます。 * - 翻訳ファイルをフェッチする。 - * - 事前に挿入されたCLIENT_ENTRYを読んで適切なメインスクリプトを読み込む。 + * - バージョンに基づいて適切なメインスクリプトを読み込む。 * - キャッシュされたコンパイル済みテーマを適用する。 * - クライアントの設定値に基づいて対応するHTMLクラス等を設定する。 - * - もしメインスクリプトの読み込みなどでエラーが発生した場合は、renderErrorでエラーを描画する。 * テーマをこの段階で設定するのは、メインスクリプトが読み込まれる間もテーマを適用したいためです。 + * 注: webpackは介さないため、このファイルではrequireやimportは使えません。 */ 'use strict'; -var misskey_loader = new Set(); - // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので -function boot() { - const defaultSolutions = [ - 'Clear the browser cache / ブラウザのキャッシュをクリアする', - 'Update your os and browser / ブラウザおよびOSを最新バージョンに更新する', - 'Disable an adblocker / アドブロッカーを無効にする', - '(Tor Browser) Set dom.webaudio.enabled to true / dom.webaudio.enabledをtrueに設定する' - ]; - - const onErrorStyle = ` - * { - font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; - } - - #misskey_app, - #splash { - display: none !important; - } - - body, - html { - background-color: #222; - color: #dfddcc; - justify-content: center; - margin: auto; - padding: 10px; - text-align: center; - } - - button { - border-radius: 999px; - padding: 0px 12px 0px 12px; - border: none; - cursor: pointer; - margin-bottom: 12px; - } +(async () => { + window.onerror = (e) => { + console.error(e); + renderError('SOMETHING_HAPPENED', e); + }; + window.onunhandledrejection = (e) => { + console.error(e); + renderError('SOMETHING_HAPPENED_IN_PROMISE', e); + }; - .button-big { - background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0)); - line-height: 50px; + let forceError = localStorage.getItem('forceError'); + if (forceError != null) { + renderError('FORCED_ERROR', 'This error is forced by having forceError in local storage.') } - .button-big:hover { - background: rgb(153, 204, 0); - } + //#region Detect language & fetch translations + if (!localStorage.hasOwnProperty('locale')) { + const supportedLangs = LANGS; + let lang = localStorage.getItem('lang'); + if (lang == null || !supportedLangs.includes(lang)) { + if (supportedLangs.includes(navigator.language)) { + lang = navigator.language; + } else { + lang = supportedLangs.find(x => x.split('-')[0] === navigator.language); - .button-small { - background: #444; - line-height: 40px; - } + // Fallback + if (lang == null) lang = 'en-US'; + } + } - .button-small:hover { - background: #555; - } + const metaRes = await window.fetch('/api/meta', { + method: 'POST', + body: JSON.stringify({}), + credentials: 'omit', + cache: 'no-cache', + headers: { + 'Content-Type': 'application/json', + }, + }); + if (metaRes.status !== 200) { + renderError('META_FETCH'); + return; + } + const meta = await metaRes.json(); + const v = meta.version; + if (v == null) { + renderError('META_FETCH_V'); + return; + } - .button-label-big { - color: #222; - font-weight: bold; - font-size: 1.2em; - padding: 12px; - } + // for https://github.com/misskey-dev/misskey/issues/10202 + if (lang == null || lang.toString == null || lang.toString() === 'null') { + console.error('invalid lang value detected!!!', typeof lang, lang); + lang = 'en-US'; + } - .button-label-small { - color: rgb(153, 204, 0); - font-size: 16px; - padding: 12px; + const localRes = await window.fetch(`/assets/locales/${lang}.${v}.json`); + if (localRes.status === 200) { + localStorage.setItem('lang', lang); + localStorage.setItem('locale', await localRes.text()); + localStorage.setItem('localeVersion', v); + } else { + renderError('LOCALE_FETCH'); + return; + } } + //#endregion - a { - color: rgb(134, 179, 0); - text-decoration: none; + //#region Script + async function importAppScript() { + await import(`/vite/${CLIENT_ENTRY}`) + .catch(async e => { + console.error(e); + renderError('APP_IMPORT', e); + }); } - p, - li { - font-size: 16px; + // タイミングによっては、この時点でDOMの構築が済んでいる場合とそうでない場合とがある + if (document.readyState !== 'loading') { + importAppScript(); + } else { + window.addEventListener('DOMContentLoaded', () => { + importAppScript(); + }); } + //#endregion - .icon-warning { - color: #dec340; - height: 4rem; - padding-top: 2rem; - } + //#region Theme + const theme = localStorage.getItem('theme'); + if (theme) { + for (const [k, v] of Object.entries(JSON.parse(theme))) { + document.documentElement.style.setProperty(`--${k}`, v.toString()); - h1 { - font-size: 1.5em; - margin: 1em; + // HTMLの theme-color 適用 + if (k === 'htmlThemeColor') { + for (const tag of document.head.children) { + if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') { + tag.setAttribute('content', v); + break; + } + } + } + } } - - summary { - cursor: pointer; + const colorScheme = localStorage.getItem('colorScheme'); + if (colorScheme) { + document.documentElement.style.setProperty('color-scheme', colorScheme); } + //#endregion - code { - font-family: Fira, FiraCode, monospace; + const fontSize = localStorage.getItem('fontSize'); + if (fontSize) { + document.documentElement.classList.add('f-' + fontSize); } - #errors { - display: flex; - flex-direction: column; - align-items: center; + const useSystemFont = localStorage.getItem('useSystemFont'); + if (useSystemFont) { + document.documentElement.classList.add('useSystemFont'); } - .errorInfo { - background: #333; - width: 40rem; - max-width: 100%; - border-radius: 10px; - justify-content: center; - padding: 1rem; - margin-bottom: 1rem; - box-sizing: border-box; + const wallpaper = localStorage.getItem('wallpaper'); + if (wallpaper) { + document.documentElement.style.backgroundImage = `url(${wallpaper})`; } - .errorInfo > pre { - text-wrap: auto; - text-wrap: balance; + const customCss = localStorage.getItem('customCss'); + if (customCss && customCss.length > 0) { + const style = document.createElement('style'); + style.innerHTML = customCss; + document.head.appendChild(style); } - `; - - const addStyle = (styleText) => { - try { - let css = document.createElement('style'); - css.appendChild(document.createTextNode(styleText)); - document.head.appendChild(css); - } catch (e) { - console.error(e); - } + async function addStyle(styleText) { + let css = document.createElement('style'); + css.appendChild(document.createTextNode(styleText)); + document.head.appendChild(css); } - const renderError = (code, details, solutions = defaultSolutions) => { - if (document.readyState === 'loading') { - window.addEventListener('DOMContentLoaded', () => { - renderError(code, details, solutions); - }); - try { - addStyle(onErrorStyle); - } catch (e) { } - return; - } - + function renderError(code, details) { let errorsElement = document.getElementById('errors'); if (!errorsElement) { - // エラー描画用のビューになっていない場合は、エラー描画用のビューに切り替える document.body.innerHTML = ` @@ -175,7 +170,10 @@ function boot() { Reload / リロード

The following actions may solve the problem. / 以下を行うと解決する可能性があります。

- ${solutions.map(x => `

${x}

`).join('')} +

Clear the browser cache / ブラウザのキャッシュをクリアする

+

Update your os and browser / ブラウザおよびOSを最新バージョンに更新する

+

Disable an adblocker / アドブロッカーを無効にする

+

(Tor Browser) Set dom.webaudio.enabled to true / dom.webaudio.enabledをtrueに設定する

Other options / その他のオプション @@ -201,194 +199,121 @@ function boot() { `; errorsElement = document.getElementById('errors'); } + const detailsElement = document.createElement('details'); + detailsElement.id = 'errorInfo'; + detailsElement.innerHTML = ` +
+ + ERROR CODE: ${code} + + ${JSON.stringify(details)}`; + errorsElement.appendChild(detailsElement); + addStyle(` + * { + font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; + } - if (typeof details === 'string') { - const errorEl = document.createElement('div'); - errorEl.classList.add('errorInfo'); - - const titleCodeElement = document.createElement('code'); - titleCodeElement.textContent = `ERROR CODE: ${code}`; - errorEl.appendChild(titleCodeElement); - - errorEl.appendChild(document.createElement('br')); - - const detailsCodeElement = document.createElement('code'); - detailsCodeElement.textContent = details; - errorEl.appendChild(detailsCodeElement); - - errorsElement.appendChild(errorEl); - } else if (details instanceof Error) { - const errorEl = document.createElement('details'); - errorEl.classList.add('errorInfo'); - - const summaryElement = document.createElement('summary'); - const titleCodeElement = document.createElement('code'); - titleCodeElement.textContent = `ERROR CODE: ${code}`; - summaryElement.appendChild(titleCodeElement); - errorEl.appendChild(summaryElement); - - const detailsPreElement = document.createElement('pre'); - const detailsMessageElement = document.createElement('code'); - detailsMessageElement.textContent = details.message; - detailsPreElement.appendChild(detailsMessageElement); - detailsPreElement.appendChild(document.createElement('br')); - const detailsCodeElement = document.createElement('code'); - detailsCodeElement.textContent = details.stack; - detailsPreElement.appendChild(detailsCodeElement); - errorEl.appendChild(detailsPreElement); - - errorsElement.appendChild(errorEl); - } else { - const errorEl = document.createElement('details'); - errorEl.classList.add('errorInfo'); - - const summaryElement = document.createElement('summary'); - const titleCodeElement = document.createElement('code'); - titleCodeElement.textContent = `ERROR CODE: ${code}`; - summaryElement.appendChild(titleCodeElement); - errorEl.appendChild(summaryElement); - - const detailsCodeElement = document.createElement('code'); - detailsCodeElement.textContent = JSON.stringify(details); - errorEl.appendChild(detailsCodeElement); + #misskey_app, + #splash { + display: none !important; + } - errorsElement.appendChild(errorEl); + body, + html { + background-color: #222; + color: #dfddcc; + justify-content: center; + margin: auto; + padding: 10px; + text-align: center; } - addStyle(onErrorStyle); - } + button { + border-radius: 999px; + padding: 0px 12px 0px 12px; + border: none; + cursor: pointer; + margin-bottom: 12px; + } - window.onerror = (e) => { - console.error(e); - renderError('SOMETHING_HAPPENED', e); - }; - window.onunhandledrejection = (e) => { - console.error(e); - renderError('SOMETHING_HAPPENED_IN_PROMISE', e); - }; + .button-big { + background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0)); + line-height: 50px; + } - let forceError = localStorage.getItem('forceError'); - if (forceError != null) { - renderError('FORCED_ERROR', 'This error is forced by having forceError in local storage.') - renderError('FORCED_ERROR', Error('This error is forced by having forceError in local storage.')); - return; - } + .button-big:hover { + background: rgb(153, 204, 0); + } - //#region After DOM loaded - async function oncontentload() { - const providedMetaEl = document.getElementById('misskey_meta'); - const meta = providedMetaEl && providedMetaEl.textContent ? JSON.parse(providedMetaEl.textContent) : null; - const providedAt = providedMetaEl && providedMetaEl.dataset.generatedAt ? parseInt(providedMetaEl.dataset.generatedAt) : 0; - console.log('providedAt', providedAt, 'now', Date.now()); - if (providedAt < Date.now() - 1000 * 60 * 60 * 24) { - // 古いデータがなぜか提供された場合は、エラーを描画する - renderError( - 'META_PROVIDED_AT_TOO_OLD', - 'This view is too old. Please reload.', - [ - 'Reload / リロードする', - 'Clear the browser cache then reload / ブラウザのキャッシュをクリアしてリロードする', - 'Disable an adblocker / アドブロッカーを無効にする', - ] - ); - return; + .button-small { + background: #444; + line-height: 40px; } - //#region Detect language & fetch translations on first load - if (!localStorage.hasOwnProperty('locale')) { - const supportedLangs = LANGS; - let lang = localStorage.getItem('lang'); - if (lang == null || !supportedLangs.includes(lang)) { - if (supportedLangs.includes(navigator.language)) { - lang = navigator.language; - } else { - lang = supportedLangs.find(x => x.split('-')[0] === navigator.language); - - // Fallback - if (lang == null) lang = 'en-US'; - } - } + .button-small:hover { + background: #555; + } - const v = meta?.version; + .button-label-big { + color: #222; + font-weight: bold; + font-size: 1.2em; + padding: 12px; + } - // for https://github.com/misskey-dev/misskey/issues/10202 - if (lang == null || lang.toString == null || lang.toString() === 'null') { - console.warn('invalid lang value detected!!!', typeof lang, lang); - lang = 'en-US'; - } + .button-label-small { + color: rgb(153, 204, 0); + font-size: 16px; + padding: 12px; + } - const localRes = await window.fetch(`/assets/locales/${lang}.${v}.json`); - if (localRes.status === 200) { - localStorage.setItem('lang', lang); - localStorage.setItem('locale', await localRes.text()); - localStorage.setItem('localeVersion', v); - } else { - renderError('LOCALE_FETCH'); - return; - } + a { + color: rgb(134, 179, 0); + text-decoration: none; } - //#endregion - await import(`/vite/${CLIENT_ENTRY}`) - .catch(async e => { - console.error(e); - renderError('APP_IMPORT', e); - }); - } + p, + li { + font-size: 16px; + } - if (document.readyState !== 'loading') { - misskey_loader.add(oncontentload()); - } else { - window.addEventListener('DOMContentLoaded', () => { - misskey_loader.add(oncontentload()); - }); - } - //#endregion + .icon-warning { + color: #dec340; + height: 4rem; + padding-top: 2rem; + } - //#region Theme - const theme = localStorage.getItem('theme'); - if (theme) { - for (const [k, v] of Object.entries(JSON.parse(theme))) { - document.documentElement.style.setProperty(`--${k}`, v.toString()); + h1 { + font-size: 1.5em; + margin: 1em; + } - // HTMLの theme-color 適用 - if (k === 'htmlThemeColor') { - for (const tag of document.head.children) { - if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') { - tag.setAttribute('content', v); - break; - } - } - } + code { + font-family: Fira, FiraCode, monospace; } - } - const colorScheme = localStorage.getItem('colorScheme'); - if (colorScheme) { - document.documentElement.style.setProperty('color-scheme', colorScheme); - } - //#endregion - const fontSize = localStorage.getItem('fontSize'); - if (fontSize) { - document.documentElement.classList.add('f-' + fontSize); - } + #errorInfo { + background: #333; + margin-bottom: 2rem; + padding: 0.5rem 1rem; + width: 40rem; + border-radius: 10px; + justify-content: center; + margin: auto; + } - const useSystemFont = localStorage.getItem('useSystemFont'); - if (useSystemFont) { - document.documentElement.classList.add('useSystemFont'); - } + #errorInfo summary { + cursor: pointer; + } - const wallpaper = localStorage.getItem('wallpaper'); - if (wallpaper) { - document.documentElement.style.backgroundImage = `url(${wallpaper})`; - } + #errorInfo summary > * { + display: inline; + } - const customCss = localStorage.getItem('customCss'); - if (customCss && customCss.length > 0) { - const style = document.createElement('style'); - style.innerHTML = customCss; - document.head.appendChild(style); + @media screen and (max-width: 500px) { + #errorInfo { + width: 50%; + } + `) } -} - -boot(); +})(); -- cgit v1.2.3-freya From 7ead98cbe592e6911e4a54550cb7bb507e782d7c Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Wed, 6 Mar 2024 21:08:42 +0900 Subject: enhance(frontend): リアクションの総数を表示するように (#13532) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * enhance(frontend): リアクションの総数を表示するように * Update Changelog * リアクション選択済の色をaccentに --- CHANGELOG.md | 2 ++ locales/index.d.ts | 4 +++ locales/ja-JP.yml | 1 + .../backend/src/core/entities/NoteEntityService.ts | 1 + packages/backend/src/models/json-schema/note.ts | 4 +++ packages/frontend/src/components/MkNote.vue | 25 +++++++++++------ .../frontend/src/components/MkNoteDetailed.vue | 31 ++++++++++++++-------- .../frontend/src/components/MkNotification.vue | 27 ++++++++++++------- .../src/components/MkTutorialDialog.Note.vue | 1 + .../src/components/MkTutorialDialog.PostNote.vue | 1 + .../src/components/MkTutorialDialog.Sensitive.vue | 1 + packages/frontend/src/scripts/use-note-capture.ts | 2 ++ packages/frontend/src/style.scss | 7 +++++ packages/misskey-js/src/autogen/types.ts | 1 + 14 files changed, 79 insertions(+), 29 deletions(-) (limited to 'packages/backend/src') diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b90094279..7bdfa53e99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ ### Client - Enhance: 自分のノートの添付ファイルから直接ファイルの詳細ページに飛べるように +- Enhance: リアクション・いいねの総数を表示するように +- Enhance: リアクション受け入れが「いいねのみ」の場合はリアクション絵文字一覧を表示しないように - Fix: 一部のページ内リンクが正しく動作しない問題を修正 ### Server diff --git a/locales/index.d.ts b/locales/index.d.ts index c1aa163f98..3ac4ff9e74 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -8909,6 +8909,10 @@ export interface Locale extends ILocale { * {n}人がリアクションしました */ "reactedBySomeUsers": ParameterizedString<"n">; + /** + * {n}人がいいねしました + */ + "likedBySomeUsers": ParameterizedString<"n">; /** * {n}人がリノートしました */ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 51380e49c5..177d6a06c9 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -2355,6 +2355,7 @@ _notification: sendTestNotification: "テスト通知を送信する" notificationWillBeDisplayedLikeThis: "通知はこのように表示されます" reactedBySomeUsers: "{n}人がリアクションしました" + likedBySomeUsers: "{n}人がいいねしました" renotedBySomeUsers: "{n}人がリノートしました" followedBySomeUsers: "{n}人にフォローされました" flushNotification: "通知の履歴をリセットする" diff --git a/packages/backend/src/core/entities/NoteEntityService.ts b/packages/backend/src/core/entities/NoteEntityService.ts index 5b6affc6a5..22d01462e7 100644 --- a/packages/backend/src/core/entities/NoteEntityService.ts +++ b/packages/backend/src/core/entities/NoteEntityService.ts @@ -333,6 +333,7 @@ export class NoteEntityService implements OnModuleInit { visibleUserIds: note.visibility === 'specified' ? note.visibleUserIds : undefined, renoteCount: note.renoteCount, repliesCount: note.repliesCount, + reactionCount: Object.values(note.reactions).reduce((a, b) => a + b, 0), reactions: this.reactionService.convertLegacyReactions(note.reactions), reactionEmojis: this.customEmojiService.populateEmojis(reactionEmojiNames, host), reactionAndUserPairCache: opts.withReactionAndUserPairCache ? note.reactionAndUserPairCache : undefined, diff --git a/packages/backend/src/models/json-schema/note.ts b/packages/backend/src/models/json-schema/note.ts index bb4ccc7ee4..2641161c8b 100644 --- a/packages/backend/src/models/json-schema/note.ts +++ b/packages/backend/src/models/json-schema/note.ts @@ -223,6 +223,10 @@ export const packedNoteSchema = { }], }, }, + reactionCount: { + type: 'number', + optional: false, nullable: false, + }, renoteCount: { type: 'number', optional: false, nullable: false, diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 03a283cab3..656ccc7959 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -93,7 +93,7 @@ SPDX-License-Identifier: AGPL-3.0-only {{ appearNote.channel.name }} - + @@ -101,7 +101,7 @@ SPDX-License-Identifier: AGPL-3.0-only