From 2cbe1d1210a5745787f37069ecb59b8f6c03c224 Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Mon, 9 Sep 2024 20:57:36 +0900 Subject: feat(frontend): ノート・ユーザータイムライン埋め込み (#13929) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix * navhookをbootに移動 * サーバーサイドのbootも分けるように * 埋め込みページかどうかの判定は最初の一回だけに * tooltipは出せるように * fix design * 埋め込み独自のtooltipを削除 * ロジックの分岐が多かったMkNoteDetailedを分離 * fix indent * プレビュー用iframeにフォーカスが当たるのを修正 * popupの制御を出す側で行うように * パラメータが逆になっていたのを修正 * Update MkEmbedCodeGenDialog.vue * fix * eliminate misskey-js lint warns * fix * add appropriate attributes to embed html * enhance: サーバーサイドのembed系をさらに分離 * enhance: embed routerを分離（route定義をboot時に変更できるようにする改修を含む） * type * lint * fix indent * server-side styleを完全に分離 * Revert "refactor: 画面サイズのしきい値をconstにまとめる" This reverts commit 05ca36f400889456981e89489ae0ae242fa09b67. * fix * revert all changes in base.pug * embedドメインをまとめた * embedドメインをまとめた * prevent calling contextmenu in embed page by stopping at the caller * fix import * fix import * improve directory structure * fix import * register timeline ui as a container * wa- * rename * wa- * Update EmMediaList.vue * Update EmMediaList.vue * Update EmMediaList.vue * Update EmMediaImage.vue * Update EmNote.vue * revert mkmedialist changes * 戻し漏れ * wip * tweak embed media ui * revert original media components * Update boot.embed.js * rename * wip * Update MkNote.vue * wip * Update MkSubNoteContent.vue * Update EmNote.vue * Update packages/frontend/src/router/definition.ts * Revert "Update packages/frontend/src/router/definition.ts" This reverts commit 937ae44521cdb0f250796943b20142b65f8ed944. * refactor EmMediaImage * fix import * remove unused imports * Update router.ts * wip * Update boot.ts * wip * wip * wip * wip * Update EmNote.vue * Update EmNote.vue * Create EmA.vue * Create EmAvatar.vue * Update EmAvatar.vue * wip * wip * wip * Create EmImgWithBlurhash.vue * Update EmImgWithBlurhash.vue * Create EmPagination.vue * wip * Update boot.ts * wip * wip * wi@p * wip * wip * wiop * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update boot.ts * wip * Update MkMisskeyFlavoredMarkdown.ts * wip * wip * wip * wip * wip * Update post-message.ts * wip * Update EmNoteDetailed.vue * Update EmNoteDetailed.vue * Create instance.ts * Update EmNoteDetailed.vue * wip * Update EmNoteDetailed.vue * wip * wip * wip * Update pnpm-lock.yaml * wip * wip * wp * wip * Update ClientServerService.ts * wip * Update boot.ts * Update vite.config.local-dev.ts * Update vite.config.ts * Create index.html * wa- * wip * Update boot.ts * wip * wip * wip * wip * wip * wip * wip * wip * wip * Create EmLink.vue * Create EmMention.vue * Update EmMfm.ts * wip * wip * wip * wip * Update vite.config.ts * Update boot.ts * Update EmA.vue * うぃｐ * wip * wip * Create EmError.vue * wip * Update MkEmbedCodeGenDialog.vue * Update EmNote.vue * wip * wip * Update user-timeline.vue * Update check-spdx-license-id.yml * wip * wip * style(frontend-shared): lint fixes on build.js * fix(frontend-shared): include `*.{js,json}` files in js-built * wip * use alias * refactor * refactor * Update scroll.ts * refactor * refactor * refactor * wip * wip * wip * wip * Update roles.vue * Update branding.vue * wip * wip * wip * Update page.vue * wip * fix import * add missing css variables * 絵文字をtwemojiに変更 クライアントデフォルトにあわせるため * force empoll readonly * fix compiler error * fix broken imports * tweak button style * run api extractor * fix storybook theme preloads * fix storybook instance imports * Update preview.ts * Update preview.ts * Update preview.ts * Revert "Update preview.ts" This reverts commit 12bab1c6fbd3baf753515df760ff19d027b85155. * Revert "Update preview.ts" This reverts commit 5c0ce01dbdf2194ffe94aba950f747a9968f29c4. * Revert "Update preview.ts" This reverts commit f4863524d7e5ca0f25470808849c24a72bea000a. * Revert "fix storybook instance imports" This reverts commit ed8eabb246edf731d31adffbe3c77c539e53ae9e. * Revert "wip" This reverts commit d3c1926519878155193a1654f49141e515d49683. * Revert "Update page.vue" This reverts commit 27c7900b0c1ae296b56075e8a9c22585d9cd744b. * Revert "Update branding.vue" This reverts commit c08ccb65ba66774c3e2b3dcfc6153004b5c0aa16. * Revert "Update roles.vue" This reverts commit 1488b670660cb1803d17d8f5c78f2d79e59fa52d. * Revert "wip" This reverts commit aab1c769814b08c257cad3025422a0eea3bfba4f. * refactor: use common media proxy * fix imports * fix * fix: MediaProxyの初期化を保証する（storybook対策？） * enhance(frontend-embed): improve embedParams provide * fix(backend): MK_DEV_PREFER=backendのときにembed viteが読み込めないのを修正 * fix * embed-pageを共通化 * fix import * fix import * fix import * const.jsを共通化 （たぶんrevertしすぎた） * fix type error * fix duplicated import * fix lint * fix * コメントとして残す * sharedとembedをlint対象にする * lint * attempt to fix eslint (frontend-shared) * lint fixes --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> Co-authored-by: zyoshoka <107108195+zyoshoka@users.noreply.github.com> --- packages/frontend/src/scripts/get-embed-code.ts | 87 +++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 packages/frontend/src/scripts/get-embed-code.ts (limited to 'packages/frontend/src/scripts/get-embed-code.ts') diff --git a/packages/frontend/src/scripts/get-embed-code.ts b/packages/frontend/src/scripts/get-embed-code.ts new file mode 100644 index 0000000000..007cd6561b --- /dev/null +++ b/packages/frontend/src/scripts/get-embed-code.ts @@ -0,0 +1,87 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { defineAsyncComponent } from 'vue'; +import { v4 as uuid } from 'uuid'; +import type { EmbedParams, EmbeddableEntity } from '@@/js/embed-page.js'; +import { url } from '@/config.js'; +import * as os from '@/os.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; +import { defaultEmbedParams, embedRouteWithScrollbar } from '@@/js/embed-page.js'; + +const MOBILE_THRESHOLD = 500; + +/** + * パラメータを正規化する（埋め込みコード作成用） + * @param params パラメータ + * @returns 正規化されたパラメータ + */ +export function normalizeEmbedParams(params: EmbedParams): Record { + // paramsのvalueをすべてstringに変換。undefinedやnullはプロパティごと消す + const normalizedParams: Record = {}; + for (const key in params) { + // デフォルトの値と同じならparamsに含めない + if (params[key] == null || params[key] === defaultEmbedParams[key]) { + continue; + } + switch (typeof params[key]) { + case 'number': + normalizedParams[key] = params[key].toString(); + break; + case 'boolean': + normalizedParams[key] = params[key] ? 'true' : 'false'; + break; + default: + normalizedParams[key] = params[key]; + break; + } + } + return normalizedParams; +} + +/** + * 埋め込みコードを生成（iframe IDの発番もやる） + */ +export function getEmbedCode(path: string, params?: EmbedParams): string { + const iframeId = 'v1_' + uuid(); // 将来embed.jsのバージョンが上がったとき用にv1_を付けておく + + let paramString = ''; + if (params) { + const searchParams = new URLSearchParams(normalizeEmbedParams(params)); + paramString = searchParams.toString() === '' ? '' : '?' + searchParams.toString(); + } + + const iframeCode = [ + ``, + ``, + ]; + return iframeCode.join('\n'); +} + +/** + * 埋め込みコードを生成してコピーする（カスタマイズ機能つき） + * + * カスタマイズ機能がいらない場合（事前にパラメータを指定する場合）は getEmbedCode を直接使ってください + */ +export function genEmbedCode(entity: EmbeddableEntity, id: string, params?: EmbedParams) { + const _params = { ...params }; + + if (embedRouteWithScrollbar.includes(entity) && _params.maxHeight == null) { + _params.maxHeight = 700; + } + + // PCじゃない場合はコードカスタマイズ画面を出さずにそのままコピー + if (window.innerWidth < MOBILE_THRESHOLD) { + copyToClipboard(getEmbedCode(`/embed/${entity}/${id}`, _params)); + os.success(); + } else { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkEmbedCodeGenDialog.vue')), { + entity, + id, + params: _params, + }, { + closed: () => dispose(), + }); + } +} -- cgit v1.2.3-freya From 837a8e15d893a670ab2ce51b3ec87e6b62a51da7 Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Tue, 10 Sep 2024 18:39:53 +0900 Subject: refactor(frontend): frontend-embed/src/to-be-sharedを共通化 (#14536) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(frontend): shouldCollapsedを共通化 * refactor(frontend): config.js, worker-multi-dispatch.js, intl-const.jsを共通化 * fix(frontend-shared): fix type error * refactor(frontend): is-link.jsと、同一の振る舞いをする記述を共通化 * fix * fix lint * lint fixes --- packages/frontend-embed/src/boot.ts | 2 +- packages/frontend-embed/src/components/EmAcct.vue | 2 +- .../src/components/EmImgWithBlurhash.vue | 2 +- packages/frontend-embed/src/components/EmLink.vue | 2 +- .../frontend-embed/src/components/EmMention.vue | 2 +- packages/frontend-embed/src/components/EmMfm.ts | 2 +- packages/frontend-embed/src/components/EmNote.vue | 4 +- .../src/components/EmNoteDetailed.vue | 4 +- .../src/components/EmSubNoteContent.vue | 4 +- packages/frontend-embed/src/components/EmTime.vue | 2 +- packages/frontend-embed/src/components/EmUrl.vue | 2 +- packages/frontend-embed/src/config.ts | 18 ----- packages/frontend-embed/src/i18n.ts | 2 +- packages/frontend-embed/src/misskey-api.ts | 2 +- packages/frontend-embed/src/pages/clip.vue | 4 +- packages/frontend-embed/src/pages/tag.vue | 4 +- .../frontend-embed/src/pages/user-timeline.vue | 2 +- .../frontend-embed/src/to-be-shared/collapsed.ts | 22 ------ .../frontend-embed/src/to-be-shared/intl-const.ts | 50 ------------- .../frontend-embed/src/to-be-shared/is-link.ts | 12 --- .../src/to-be-shared/worker-multi-dispatch.ts | 82 --------------------- packages/frontend-embed/src/utils.ts | 2 +- packages/frontend-shared/@types/global.d.ts | 25 +++++++ packages/frontend-shared/eslint.config.js | 6 +- packages/frontend-shared/js/collapsed.ts | 22 ++++++ packages/frontend-shared/js/config.ts | 28 +++++++ packages/frontend-shared/js/emoji-base.ts | 4 +- packages/frontend-shared/js/intl-const.ts | 51 +++++++++++++ packages/frontend-shared/js/is-link.ts | 12 +++ .../frontend-shared/js/worker-multi-dispatch.ts | 86 ++++++++++++++++++++++ packages/frontend-shared/tsconfig.json | 7 ++ packages/frontend/src/account.ts | 2 +- packages/frontend/src/boot/common.ts | 2 +- packages/frontend/src/boot/main-boot.ts | 2 +- .../frontend/src/components/MkAccountMoved.vue | 2 +- .../frontend/src/components/MkCropperDialog.vue | 2 +- packages/frontend/src/components/MkDonation.vue | 2 +- .../src/components/MkEmbedCodeGenDialog.vue | 2 +- .../frontend/src/components/MkFollowButton.vue | 2 +- .../frontend/src/components/MkImgWithBlurhash.vue | 2 +- .../frontend/src/components/MkInstanceTicker.vue | 2 +- packages/frontend/src/components/MkLink.vue | 2 +- packages/frontend/src/components/MkMention.vue | 2 +- packages/frontend/src/components/MkNote.vue | 15 +--- .../frontend/src/components/MkNoteDetailed.vue | 11 +-- packages/frontend/src/components/MkPageWindow.vue | 2 +- packages/frontend/src/components/MkPoll.vue | 2 +- packages/frontend/src/components/MkPostForm.vue | 2 +- packages/frontend/src/components/MkPreview.vue | 2 +- packages/frontend/src/components/MkSignin.vue | 2 +- .../src/components/MkSignupDialog.form.vue | 2 +- .../src/components/MkSourceCodeAvailablePopup.vue | 2 +- .../frontend/src/components/MkSubNoteContent.vue | 2 +- .../frontend/src/components/MkTutorialDialog.vue | 2 +- packages/frontend/src/components/MkUpdated.vue | 2 +- packages/frontend/src/components/MkUrlPreview.vue | 4 +- .../frontend/src/components/MkUserSelectDialog.vue | 2 +- .../frontend/src/components/MkUserSetupDialog.vue | 2 +- .../frontend/src/components/MkVisitorDashboard.vue | 2 +- packages/frontend/src/components/MkWidgets.vue | 8 +- .../frontend/src/components/MkYouTubePlayer.vue | 2 +- packages/frontend/src/components/global/MkA.vue | 2 +- packages/frontend/src/components/global/MkAcct.vue | 2 +- packages/frontend/src/components/global/MkAd.vue | 2 +- .../components/global/MkMisskeyFlavoredMarkdown.ts | 2 +- .../src/components/global/MkTime.stories.impl.ts | 2 +- packages/frontend/src/components/global/MkTime.vue | 2 +- packages/frontend/src/components/global/MkUrl.vue | 2 +- packages/frontend/src/config.ts | 27 ------- packages/frontend/src/filters/date.ts | 2 +- packages/frontend/src/filters/number.ts | 2 +- packages/frontend/src/filters/user.ts | 2 +- packages/frontend/src/i18n.ts | 2 +- packages/frontend/src/navbar.ts | 2 +- packages/frontend/src/pages/_error_.vue | 2 +- packages/frontend/src/pages/about-misskey.vue | 2 +- packages/frontend/src/pages/about.overview.vue | 2 +- packages/frontend/src/pages/admin-user.vue | 2 +- packages/frontend/src/pages/admin/branding.vue | 2 +- packages/frontend/src/pages/admin/queue.vue | 2 +- packages/frontend/src/pages/channel.vue | 2 +- packages/frontend/src/pages/clip.vue | 2 +- .../frontend/src/pages/drop-and-fusion.game.vue | 2 +- packages/frontend/src/pages/flash/flash.vue | 2 +- packages/frontend/src/pages/gallery/post.vue | 2 +- .../frontend/src/pages/page-editor/page-editor.vue | 2 +- packages/frontend/src/pages/page.vue | 2 +- packages/frontend/src/pages/reversi/game.board.vue | 2 +- packages/frontend/src/pages/reversi/game.vue | 2 +- packages/frontend/src/pages/role.vue | 2 +- packages/frontend/src/pages/settings/general.vue | 2 +- .../src/pages/settings/preferences-backups.vue | 2 +- packages/frontend/src/pages/theme-editor.vue | 2 +- packages/frontend/src/pages/welcome.setup.vue | 2 +- packages/frontend/src/pages/welcome.vue | 2 +- packages/frontend/src/scripts/aiscript/api.ts | 2 +- packages/frontend/src/scripts/collapsed.ts | 22 ------ packages/frontend/src/scripts/gen-search-query.ts | 2 +- packages/frontend/src/scripts/get-embed-code.ts | 2 +- packages/frontend/src/scripts/get-note-menu.ts | 2 +- packages/frontend/src/scripts/get-user-menu.ts | 2 +- packages/frontend/src/scripts/initialize-sw.ts | 2 +- packages/frontend/src/scripts/intl-const.ts | 2 +- packages/frontend/src/scripts/is-link.ts | 12 --- packages/frontend/src/scripts/media-proxy.ts | 2 +- packages/frontend/src/scripts/misskey-api.ts | 2 +- .../frontend/src/scripts/player-url-transform.ts | 2 +- packages/frontend/src/scripts/popout.ts | 2 +- packages/frontend/src/scripts/upload.ts | 2 +- .../frontend/src/scripts/worker-multi-dispatch.ts | 82 --------------------- packages/frontend/src/store.ts | 4 +- packages/frontend/src/stream.ts | 2 +- packages/frontend/src/ui/_common_/common.ts | 2 +- packages/frontend/src/ui/classic.sidebar.vue | 2 +- packages/frontend/src/ui/classic.vue | 10 +-- packages/frontend/src/ui/deck/main-column.vue | 7 +- packages/frontend/src/ui/minimum.vue | 2 +- packages/frontend/src/ui/universal.vue | 9 +-- packages/frontend/src/ui/visitor.vue | 2 +- packages/frontend/src/ui/zen.vue | 2 +- .../frontend/src/widgets/WidgetInstanceInfo.vue | 2 +- packages/frontend/src/widgets/WidgetRss.vue | 2 +- packages/frontend/src/widgets/WidgetRssTicker.vue | 2 +- 123 files changed, 356 insertions(+), 484 deletions(-) delete mode 100644 packages/frontend-embed/src/config.ts delete mode 100644 packages/frontend-embed/src/to-be-shared/collapsed.ts delete mode 100644 packages/frontend-embed/src/to-be-shared/intl-const.ts delete mode 100644 packages/frontend-embed/src/to-be-shared/is-link.ts delete mode 100644 packages/frontend-embed/src/to-be-shared/worker-multi-dispatch.ts create mode 100644 packages/frontend-shared/@types/global.d.ts create mode 100644 packages/frontend-shared/js/collapsed.ts create mode 100644 packages/frontend-shared/js/config.ts create mode 100644 packages/frontend-shared/js/intl-const.ts create mode 100644 packages/frontend-shared/js/is-link.ts create mode 100644 packages/frontend-shared/js/worker-multi-dispatch.ts delete mode 100644 packages/frontend/src/config.ts delete mode 100644 packages/frontend/src/scripts/collapsed.ts delete mode 100644 packages/frontend/src/scripts/is-link.ts delete mode 100644 packages/frontend/src/scripts/worker-multi-dispatch.ts (limited to 'packages/frontend/src/scripts/get-embed-code.ts') diff --git a/packages/frontend-embed/src/boot.ts b/packages/frontend-embed/src/boot.ts index 6c73fecd76..fcea7d32ea 100644 --- a/packages/frontend-embed/src/boot.ts +++ b/packages/frontend-embed/src/boot.ts @@ -17,7 +17,7 @@ import { applyTheme, assertIsTheme } from '@/theme.js'; import { fetchCustomEmojis } from '@/custom-emojis.js'; import { DI } from '@/di.js'; import { serverMetadata } from '@/server-metadata.js'; -import { url } from '@/config.js'; +import { url } from '@@/js/config.js'; import { parseEmbedParams } from '@@/js/embed-page.js'; import { postMessageToParentWindow, setIframeId } from '@/post-message.js'; diff --git a/packages/frontend-embed/src/components/EmAcct.vue b/packages/frontend-embed/src/components/EmAcct.vue index 07315e6a8b..6856b8272e 100644 --- a/packages/frontend-embed/src/components/EmAcct.vue +++ b/packages/frontend-embed/src/components/EmAcct.vue @@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only