From b4b8aa8ab269144c3f979de0ce22b7046be44410 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Thu, 29 Aug 2024 14:19:00 +0900 Subject: [PATCH] wip --- locales/index.d.ts | 4 ++-- locales/ja-JP.yml | 2 +- packages/frontend-embed/src/pages/user-timeline.vue | 4 ++-- packages/frontend-embed/src/ui.vue | 1 + .../frontend/src/components/MkEmbedCodeGenDialog.vue | 8 +++----- packages/frontend/src/pages/clip.vue | 6 +++--- packages/frontend/src/pages/tag.vue | 6 +++--- packages/frontend/src/scripts/get-embed-code.ts | 9 ++++----- packages/frontend/src/scripts/get-note-menu.ts | 8 ++++---- packages/frontend/src/scripts/get-user-menu.ts | 6 +++--- 10 files changed, 26 insertions(+), 28 deletions(-) diff --git a/locales/index.d.ts b/locales/index.d.ts index 9f9f8e2166..fecc570395 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5073,9 +5073,9 @@ export interface Locale extends ILocale { */ "fromX": ParameterizedString<"x">; /** - * 埋め込みコードをコピー + * 埋め込みコードを生成 */ - "copyEmbedCode": string; + "genEmbedCode": string; /** * このユーザーのノート一覧 */ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 81a6e091cb..a1210bad29 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1264,7 +1264,7 @@ sensitiveMediaRevealConfirm: "センシティブなメディアです。表示 createdLists: "作成したリスト" createdAntennas: "作成したアンテナ" fromX: "{x}から" -copyEmbedCode: "埋め込みコードをコピー" +genEmbedCode: "埋め込みコードを生成" noteOfThisUser: "このユーザーのノート一覧" clipNoteLimitExceeded: "これ以上このクリップにノートを追加できません。" diff --git a/packages/frontend-embed/src/pages/user-timeline.vue b/packages/frontend-embed/src/pages/user-timeline.vue index 0666e1c559..2788e51886 100644 --- a/packages/frontend-embed/src/pages/user-timeline.vue +++ b/packages/frontend-embed/src/pages/user-timeline.vue @@ -60,7 +60,7 @@ import { url, instanceName } from '@/config.js'; import { defaultEmbedParams } from '@/embed-page.js'; const props = defineProps<{ - username: string; + userId: string; }>(); const embedParams = inject('embedParams', defaultEmbedParams); @@ -77,7 +77,7 @@ const loading = ref(true); const notesEl = shallowRef | null>(null); misskeyApi('users/show', { - username: props.username, + userId: props.userId, }).then(res => { user.value = res; loading.value = false; diff --git a/packages/frontend-embed/src/ui.vue b/packages/frontend-embed/src/ui.vue index 3c51468e95..973d379584 100644 --- a/packages/frontend-embed/src/ui.vue +++ b/packages/frontend-embed/src/ui.vue @@ -35,6 +35,7 @@ import EmUserTimelinePage from '@/pages/user-timeline.vue'; const page = location.pathname.split('/')[2]; const contentId = location.pathname.split('/')[3]; +console.log(page, contentId); const embedParams = inject('embedParams', defaultEmbedParams); diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue index 120851f69d..25707aeeb5 100644 --- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue +++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue @@ -117,7 +117,7 @@ const emit = defineEmits<{ const props = defineProps<{ entity: EmbeddableEntity; - idOrUsername: string; + id: string; params?: EmbedParams; }>(); @@ -152,13 +152,12 @@ const paramsForUrl = computed(() => ({ const paramsForPreview = ref(props.params ?? {}); const embedPreviewUrl = computed(() => { - const _idOrUsername = props.entity === 'user-timeline' ? '@' + props.idOrUsername : props.idOrUsername; const paramClass = new URLSearchParams(normalizeEmbedParams(paramsForPreview.value)); if (paramClass.has('maxHeight')) { const maxHeight = parseInt(paramClass.get('maxHeight')!); paramClass.set('maxHeight', maxHeight === 0 ? '500' : Math.min(maxHeight, 700).toString()); // プレビューであまりにも縮小されると見づらいため、700pxまでに制限 } - return `${url}/embed/${props.entity}/${_idOrUsername}${paramClass.toString() ? '?' + paramClass.toString() : ''}`; + return `${url}/embed/${props.entity}/${props.id}${paramClass.toString() ? '?' + paramClass.toString() : ''}`; }); const isEmbedWithScrollbar = computed(() => embedRouteWithScrollbar.includes(props.entity)); @@ -193,8 +192,7 @@ function applyToPreview() { const result = ref(''); function generate() { - const _idOrUsername = props.entity === 'user-timeline' ? '@' + props.idOrUsername : props.idOrUsername; - result.value = getEmbedCode(`/embed/${props.entity}/${_idOrUsername}`, paramsForUrl.value); + result.value = getEmbedCode(`/embed/${props.entity}/${props.id}`, paramsForUrl.value); phase.value = 'result'; } diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue index 2926e1a7c7..aad6acb4b5 100644 --- a/packages/frontend/src/pages/clip.vue +++ b/packages/frontend/src/pages/clip.vue @@ -44,7 +44,7 @@ import MkButton from '@/components/MkButton.vue'; import { clipsCache } from '@/cache.js'; import { isSupportShare } from '@/scripts/navigator.js'; import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; -import { copyEmbedCode } from '@/scripts/get-embed-code.js'; +import { genEmbedCode } from '@/scripts/get-embed-code.js'; const props = defineProps<{ clipId: string, @@ -140,9 +140,9 @@ const headerActions = computed(() => clip.value && isOwned.value ? [{ }, }, { icon: 'ti ti-code', - text: i18n.ts.copyEmbedCode, + text: i18n.ts.genEmbedCode, action: () => { - copyEmbedCode('clips', clip.value!.id); + genEmbedCode('clips', clip.value!.id); }, }, ...(isSupportShare() ? [{ icon: 'ti ti-share', diff --git a/packages/frontend/src/pages/tag.vue b/packages/frontend/src/pages/tag.vue index 56bb6deae8..1b3e1ecaee 100644 --- a/packages/frontend/src/pages/tag.vue +++ b/packages/frontend/src/pages/tag.vue @@ -28,7 +28,7 @@ import { i18n } from '@/i18n.js'; import { $i } from '@/account.js'; import { defaultStore } from '@/store.js'; import * as os from '@/os.js'; -import { copyEmbedCode } from '@/scripts/get-embed-code.js'; +import { genEmbedCode } from '@/scripts/get-embed-code.js'; const props = defineProps<{ tag: string; @@ -57,10 +57,10 @@ const headerActions = computed(() => [{ label: i18n.ts.more, handler: (ev: MouseEvent) => { os.popupMenu([{ - text: i18n.ts.copyEmbedCode, + text: i18n.ts.genEmbedCode, icon: 'ti ti-code', action: () => { - copyEmbedCode('tags', props.tag); + genEmbedCode('tags', props.tag); }, }], ev.currentTarget ?? ev.target); } diff --git a/packages/frontend/src/scripts/get-embed-code.ts b/packages/frontend/src/scripts/get-embed-code.ts index 58c2474c0b..905b07c8af 100644 --- a/packages/frontend/src/scripts/get-embed-code.ts +++ b/packages/frontend/src/scripts/get-embed-code.ts @@ -4,10 +4,10 @@ */ import { defineAsyncComponent } from 'vue'; import { v4 as uuid } from 'uuid'; +import type { EmbedParams, EmbeddableEntity } from '@/scripts/embed-page.js'; import { url } from '@/config.js'; import * as os from '@/os.js'; import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; -import type { EmbedParams, EmbeddableEntity } from '@/scripts/embed-page.js'; import { defaultEmbedParams, embedRouteWithScrollbar } from '@/scripts/embed-page.js'; const MOBILE_THRESHOLD = 500; @@ -64,7 +64,7 @@ export function getEmbedCode(path: string, params?: EmbedParams): string { * * カスタマイズ機能がいらない場合（事前にパラメータを指定する場合）は getEmbedCode を直接使ってください */ -export function copyEmbedCode(entity: EmbeddableEntity, idOrUsername: string, params?: EmbedParams) { +export function genEmbedCode(entity: EmbeddableEntity, id: string, params?: EmbedParams) { const _params = { ...params }; if (embedRouteWithScrollbar.includes(entity) && _params.maxHeight == null) { @@ -73,13 +73,12 @@ export function copyEmbedCode(entity: EmbeddableEntity, idOrUsername: string, pa // PCじゃない場合はコードカスタマイズ画面を出さずにそのままコピー if (window.innerWidth < MOBILE_THRESHOLD) { - const _idOrUsername = entity === 'user-timeline' ? `@${idOrUsername}` : idOrUsername; - copyToClipboard(getEmbedCode(`/embed/${entity}/${_idOrUsername}`, _params)); + copyToClipboard(getEmbedCode(`/embed/${entity}/${id}`, _params)); os.success(); } else { const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkEmbedCodeGenDialog.vue')), { entity, - idOrUsername, + id, params: _params, }, { closed: () => dispose(), diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts index 73f850dd18..e0ccea813d 100644 --- a/packages/frontend/src/scripts/get-note-menu.ts +++ b/packages/frontend/src/scripts/get-note-menu.ts @@ -21,7 +21,7 @@ import { MenuItem } from '@/types/menu.js'; import MkRippleEffect from '@/components/MkRippleEffect.vue'; import { isSupportShare } from '@/scripts/navigator.js'; import { getAppearNote } from '@/scripts/get-appear-note.js'; -import { copyEmbedCode } from '@/scripts/get-embed-code.js'; +import { genEmbedCode } from '@/scripts/get-embed-code.js'; export async function getNoteClipMenu(props: { note: Misskey.entities.Note; @@ -165,7 +165,7 @@ function getNoteEmbedCodeMenu(note: Misskey.entities.Note, text: string): MenuIt icon: 'ti ti-code', text, action: (): void => { - copyEmbedCode('notes', note.id); + genEmbedCode('notes', note.id); }, }; } @@ -324,7 +324,7 @@ export function getNoteMenu(props: { action: () => { window.open(appearNote.url ?? appearNote.uri, '_blank', 'noopener'); }, - } : getNoteEmbedCodeMenu(appearNote, i18n.ts.copyEmbedCode), + } : getNoteEmbedCodeMenu(appearNote, i18n.ts.genEmbedCode), ...(isSupportShare() ? [{ icon: 'ti ti-share', text: i18n.ts.share, @@ -464,7 +464,7 @@ export function getNoteMenu(props: { action: () => { window.open(appearNote.url ?? appearNote.uri, '_blank', 'noopener'); }, - } : getNoteEmbedCodeMenu(appearNote, i18n.ts.copyEmbedCode)] + } : getNoteEmbedCodeMenu(appearNote, i18n.ts.genEmbedCode)] .filter(x => x !== undefined); } diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts index 1caa99110f..035abc7bd0 100644 --- a/packages/frontend/src/scripts/get-user-menu.ts +++ b/packages/frontend/src/scripts/get-user-menu.ts @@ -17,7 +17,7 @@ import { notesSearchAvailable, canSearchNonLocalNotes } from '@/scripts/check-pe import { IRouter } from '@/nirax.js'; import { antennasCache, rolesCache, userListsCache } from '@/cache.js'; import { mainRouter } from '@/router/main.js'; -import { copyEmbedCode } from '@/scripts/get-embed-code.js'; +import { genEmbedCode } from '@/scripts/get-embed-code.js'; import { MenuItem } from '@/types/menu.js'; export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter = mainRouter) { @@ -182,12 +182,12 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter }, }] : [{ icon: 'ti ti-code', - text: i18n.ts.copyEmbedCode, + text: i18n.ts.genEmbedCode, type: 'parent' as const, children: [{ text: i18n.ts.noteOfThisUser, action: () => { - copyEmbedCode('user-timeline', user.username); + genEmbedCode('user-timeline', user.id); }, }], // TODO: ユーザーカードの埋め込みなど }]), {