enhance(frontend): Bluesky 게시물 임베디드 미리보기 지원 (misskey-dev/misskey#14933)

kokonect-link · Nov 26, 2024 · f026e8a · f026e8a
1 parent d2ebd88
commit f026e8a
Show file tree

Hide file tree

Showing 28 changed files with 106 additions and 46 deletions.
diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
@@ -43,6 +43,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 - Enhance: 외부 사이트 이동 경고 표시 개선 (kokonect-link/cherrypick#533)
   - 신뢰할 수 있는 도메인 목록을 편집할 수 있음
   - 경고를 표시하지 않도록 설정할 수 있음
+- Enhance: Bluesky 게시물 임베디드 미리보기 지원 (misskey-dev/misskey#14933)
 - Fix: 아바타 장식에서 가이드라인이 표시되지 않음
 - Fix: 설정 페이지에서 글자수가 긴 일부 항목의 디자인이 잘못 표시될 수 있음
 - Fix: 서브 노트의 동작 버튼이 정상적으로 작동하지 않을 수 있음 (kokonect-link/cherrypick#536)

diff --git a/locales/ar-SA.yml b/locales/ar-SA.yml
@@ -568,7 +568,7 @@ poll: "استطلاع رأي"
 useCw: "إخفاء المحتوى"
 enablePlayer: "افتح مشغل الفيديو"
 disablePlayer: "أغلق مشغل الفيديو"
-expandTweet: "وسّع التغريدة"
+expandPost: "وسّع التغريدة"
 themeEditor: "مصمم القوالب"
 description: "الوصف"
 describeFile: "أضف تعليقًا توضيحيًا"

diff --git a/locales/bn-BD.yml b/locales/bn-BD.yml
@@ -561,7 +561,7 @@ poll: "জরিপ"
 useCw: "কন্টেন্ট লুকান"
 enablePlayer: "ভিডিও প্লেয়ার খুলুন"
 disablePlayer: "ভিডিও প্লেয়ার বন্ধ করুন"
-expandTweet: "টুইট বিস্তারিত করুন"
+expandPost: "টুইট বিস্তারিত করুন"
 themeEditor: "থিম সম্পাদক"
 description: "বর্ণনা"
 describeFile: "ক্যাপশন যোগ করুন"

diff --git a/locales/ca-ES.yml b/locales/ca-ES.yml
@@ -641,7 +641,7 @@ poll: "Enquesta"
 useCw: "Amaga el contingut"
 enablePlayer: "Obre el reproductor de vídeo"
 disablePlayer: "Tanca el reproductor de vídeo"
-expandTweet: "Expandir post"
+expandPost: "Expandir post"
 themeEditor: "Editor de temes"
 description: "Descripció"
 describeFile: "Afegir subtitulació"

diff --git a/locales/cs-CZ.yml b/locales/cs-CZ.yml
@@ -581,7 +581,7 @@ poll: "Anketa"
 useCw: "Schovat obsah"
 enablePlayer: "Otevřít video přehrávač"
 disablePlayer: "Zavřít video přehrávač"
-expandTweet: "Rozbalit tweet"
+expandPost: "Rozbalit tweet"
 themeEditor: "Editor témat"
 description: "Popis"
 describeFile: "Přidat popisek"

diff --git a/locales/de-DE.yml b/locales/de-DE.yml
@@ -644,7 +644,7 @@ poll: "Umfrage"
 useCw: "Inhaltswarnung verwenden"
 enablePlayer: "Video-Player öffnen"
 disablePlayer: "Video-Player schließen"
-expandTweet: "Tweet ausklappen"
+expandPost: "Tweet ausklappen"
 themeEditor: "Farbschema-Editor"
 description: "Beschreibung"
 describeFile: "Beschreibung hinzufügen"

diff --git a/locales/en-US.yml b/locales/en-US.yml
@@ -776,7 +776,7 @@ poll: "Poll"
 useCw: "Hide content"
 enablePlayer: "Open video player"
 disablePlayer: "Close video player"
-expandTweet: "Expand post"
+expandPost: "Expand post"
 themeEditor: "Theme editor"
 description: "Description"
 describeFile: "Add caption"

diff --git a/locales/es-ES.yml b/locales/es-ES.yml
@@ -636,7 +636,7 @@ poll: "Encuesta"
 useCw: "Esconder contenidos"
 enablePlayer: "Abrir reproductor"
 disablePlayer: "Cerrar reproductor"
-expandTweet: "Expandir tweet"
+expandPost: "Expandir tweet"
 themeEditor: "Editor de temas"
 description: "Descripción"
 describeFile: "Añade una descripción"

diff --git a/locales/fr-FR.yml b/locales/fr-FR.yml
@@ -638,7 +638,7 @@ poll: "Sondage"
 useCw: "Masquer le contenu"
 enablePlayer: "Ouvrir dans le lecteur vidéo"
 disablePlayer: "Fermer le lecteur vidéo"
-expandTweet: "Étendre le tweet"
+expandPost: "Étendre le tweet"
 themeEditor: "Éditeur de thèmes"
 description: "Description"
 describeFile: "Ajouter une description d'image"

diff --git a/locales/id-ID.yml b/locales/id-ID.yml
@@ -639,7 +639,7 @@ poll: "Angket"
 useCw: "Sembunyikan konten"
 enablePlayer: "Buka pemutar video"
 disablePlayer: "Tutup pemutar video"
-expandTweet: "Perluas utas"
+expandPost: "Perluas utas"
 themeEditor: "Penyunting tema"
 description: "Deskripsi"
 describeFile: "Tambahkan keterangan"

diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -3136,7 +3136,7 @@ export interface Locale extends ILocale {
     /**
      * ポストを展開する
      */
-    "expandTweet": string;
+    "expandPost": string;
     /**
      * テーマエディター
      */

diff --git a/locales/it-IT.yml b/locales/it-IT.yml
@@ -652,7 +652,7 @@ poll: "Sondaggio"
 useCw: "Contenuto esplicito"
 enablePlayer: "Visualizza"
 disablePlayer: "Chiudi"
-expandTweet: "Espandi tweet"
+expandPost: "Espandi tweet"
 themeEditor: "Editor di temi"
 description: "Descrizione"
 describeFile: "Aggiungi una descrizione d'immagine"

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -776,7 +776,7 @@ poll: "アンケート"
 useCw: "内容を隠す"
 enablePlayer: "プレイヤーを開く"
 disablePlayer: "プレイヤーを閉じる"
-expandTweet: "ポストを展開する"
+expandPost: "ポストを展開する"
 themeEditor: "テーマエディター"
 description: "説明"
 describeFile: "キャプションを付ける"

diff --git a/locales/ja-KS.yml b/locales/ja-KS.yml
@@ -652,7 +652,7 @@ poll: "アンケート"
 useCw: "内容を隠す"
 enablePlayer: "プレイヤー開く"
 disablePlayer: "プレイヤー閉じる"
-expandTweet: "ポスト展開しとく"
+expandPost: "ポスト展開しとく"
 themeEditor: "テーマエディター"
 description: "説明"
 describeFile: "キャプションを付ける"

diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
@@ -776,7 +776,7 @@ poll: "투표"
 useCw: "내용 가리기"
 enablePlayer: "플레이어 열기"
 disablePlayer: "플레이어 닫기"
-expandTweet: "게시물 확장하기"
+expandPost: "게시물 확장하기"
 themeEditor: "테마 에디터"
 description: "설명"
 describeFile: "캡션 추가"

diff --git a/locales/pl-PL.yml b/locales/pl-PL.yml
@@ -627,7 +627,7 @@ poll: "Ankieta"
 useCw: "Ukryj zawartość"
 enablePlayer: "Otwórz odtwarzacz wideo"
 disablePlayer: "Zamknij odtwarzacz wideo"
-expandTweet: "Rozwiń tweet"
+expandPost: "Rozwiń tweet"
 themeEditor: "Edytor motywu"
 description: "Opis"
 describeFile: "Dodaj podpis"

diff --git a/locales/pt-PT.yml b/locales/pt-PT.yml
@@ -627,7 +627,7 @@ poll: "Enquetes"
 useCw: "Ocultar conteúdo"
 enablePlayer: "Abrir o reprodutor de mídia"
 disablePlayer: "Fechar o reprodutor de mídia"
-expandTweet: "Expandir tweet"
+expandPost: "Expandir tweet"
 themeEditor: "Editor de temas"
 description: "Descrição"
 describeFile: "Adicionar legenda"

diff --git a/locales/ro-RO.yml b/locales/ro-RO.yml
@@ -551,7 +551,7 @@ poll: "Sondaj"
 useCw: "Ascunde conținutul"
 enablePlayer: "Deschide player-ul video"
 disablePlayer: "Închide player-ul video"
-expandTweet: "Expandează tweet"
+expandPost: "Expandează tweet"
 themeEditor: "Editor de teme"
 description: "Descriere"
 describeFile: "Adaugă titrări"

diff --git a/locales/ru-RU.yml b/locales/ru-RU.yml
@@ -640,7 +640,7 @@ poll: "Опрос"
 useCw: "Скрывать содержимое под предупреждением"
 enablePlayer: "Включить проигрыватель"
 disablePlayer: "Выключить проигрыватель"
-expandTweet: "Развернуть заметку"
+expandPost: "Развернуть заметку"
 themeEditor: "Редактор темы оформления"
 description: "Описание"
 describeFile: "Добавить подпись"

diff --git a/locales/sk-SK.yml b/locales/sk-SK.yml
@@ -567,7 +567,7 @@ poll: "Hlasovanie"
 useCw: "Skryť obsah"
 enablePlayer: "Otvoriť video prehrávač"
 disablePlayer: "Zavrieť video prehrávač"
-expandTweet: "Rozšíriť tweet"
+expandPost: "Rozšíriť tweet"
 themeEditor: "Editor tém"
 description: "Popis"
 describeFile: "Pridať nadpis"

diff --git a/locales/th-TH.yml b/locales/th-TH.yml
@@ -652,7 +652,7 @@ poll: "โพล"
 useCw: "ซ่อนเนื้อหา"
 enablePlayer: "เปิดเครื่องเล่นวิดีโอ"
 disablePlayer: "ปิดเครื่องเล่นวิดีโอ"
-expandTweet: "ขยายทวีต"
+expandPost: "ขยายทวีต"
 themeEditor: "ตัวแก้ไขธีม"
 description: "คำอธิบาย"
 describeFile: "เพิ่มแคปชั่น"

diff --git a/locales/uk-UA.yml b/locales/uk-UA.yml
@@ -566,7 +566,7 @@ poll: "Опитування"
 useCw: "Приховати вміст"
 enablePlayer: "Відкрити відеоплеєр"
 disablePlayer: "Закрити відеоплеєр"
-expandTweet: "Розгорнути твіт"
+expandPost: "Розгорнути твіт"
 themeEditor: "Редактор тем"
 description: "Опис"
 describeFile: "Додати підпис"

diff --git a/locales/uz-UZ.yml b/locales/uz-UZ.yml
@@ -567,7 +567,7 @@ poll: "So'ro'vnoma"
 useCw: "Kontentni yashirish"
 enablePlayer: "Video pleyerni ochish"
 disablePlayer: "Video pleyerni yopish"
-expandTweet: "Xabarni kengaytirish"
+expandPost: "Xabarni kengaytirish"
 themeEditor: "Rang sxemasi muharriri"
 description: "tavsif"
 describeFile: "sarlavha qo'shing"

diff --git a/locales/vi-VN.yml b/locales/vi-VN.yml
@@ -614,7 +614,7 @@ poll: "Bình chọn"
 useCw: "Ẩn nội dung"
 enablePlayer: "Mở trình phát video"
 disablePlayer: "Đóng trình phát video"
-expandTweet: "Mở rộng tweet"
+expandPost: "Mở rộng tweet"
 themeEditor: "Công cụ thiết kế theme"
 description: "Mô tả"
 describeFile: "Thêm mô tả"

diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
@@ -653,7 +653,7 @@ poll: "投票"
 useCw: "隐藏内容"
 enablePlayer: "打开播放器"
 disablePlayer: "关闭播放器"
-expandTweet: "展开帖子"
+expandPost: "展开帖子"
 themeEditor: "主题编辑器"
 description: "描述"
 describeFile: "添加描述"

diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
@@ -653,7 +653,7 @@ poll: "票選活動"
 useCw: "隱藏內容"
 enablePlayer: "開啟播放器"
 disablePlayer: "關閉播放器"
-expandTweet: "展開推文"
+expandPost: "展開推文"
 themeEditor: "佈景主題編輯器"
 description: "描述"
 describeFile: "新增標題"

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
@@ -26,19 +26,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkButton>
 	</div>
 </template>
-<template v-else-if="tweetId && tweetExpanded">
-	<div ref="twitter">
+<template v-else-if="tweetId && postExpanded">
+	<iframe
+		allow="fullscreen;web-share"
+		sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-same-origin"
+		scrolling="no"
+		:style="{ position: 'relative', width: '100%', height: `${postHeight}px`, border: 0 }"
+		:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"
+	></iframe>
+	<div :class="$style.action">
+		<MkButton :small="true" inline @click.stop="postExpanded = false">
+			<i class="ti ti-x"></i> {{ i18n.ts.close }}
+		</MkButton>
+	</div>
+</template>
+<template v-else-if="bskyDid && bskyPostRecordKey && postExpanded">
+	<div>
 		<iframe
-			ref="tweet"
 			allow="fullscreen;web-share"
 			sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-same-origin"
 			scrolling="no"
-			:style="{ position: 'relative', width: '100%', height: `${tweetHeight}px`, border: 0 }"
-			:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"
+			:style="{ position: 'relative', width: '100%', height: `${postHeight}px`, border: 0 }"
+			:src="`https://embed.bsky.app/embed/${bskyDid}/app.bsky.feed.post/${bskyPostRecordKey}?id=${embedId}`"
 		></iframe>
 	</div>
 	<div :class="$style.action">
-		<MkButton :small="true" inline @click.stop="tweetExpanded = false">
+		<MkButton :small="true" inline @click.stop="postExpanded = false">
 			<i class="ti ti-x"></i> {{ i18n.ts.close }}
 		</MkButton>
 	</div>
@@ -66,8 +79,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</component>
 	<template v-if="showActions">
 		<div v-if="tweetId" :class="$style.action">
-			<MkButton :small="true" inline @click.stop="tweetExpanded = true">
-				<i class="ti ti-brand-x"></i> {{ i18n.ts.expandTweet }}
+			<MkButton :small="true" inline @click.stop="postExpanded = true">
+				<i class="ti ti-brand-x"></i> {{ i18n.ts.expandPost }}
+			</MkButton>
+		</div>
+		<div v-if="bskyPostRecordKey" :class="$style.action">
+			<MkButton :small="true" inline @click.stop="openBskyEmbed">
+				<i class="ti ti-brand-bluesky"></i> {{ i18n.ts.expandPost }}
 			</MkButton>
 		</div>
 		<div v-if="!playerEnabled && player.url" :class="$style.action">
@@ -127,10 +145,17 @@ const player = ref({
 	height: null,
 } as SummalyResult['player']);
 const playerEnabled = ref(false);
-const tweetId = ref<string | null>(null);
-const tweetExpanded = ref(props.detail);
 const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
-const tweetHeight = ref(150);
+
+const postExpanded = ref(props.detail);
+const postHeight = ref(150);
+
+const tweetId = ref<string | null>(null);
+
+const bskyHandleOrDid = ref<string | null>(null);
+const bskyDid = ref<string | null>(null);
+const bskyPostRecordKey = ref<string | null>(null);
+
 const unknownUrl = ref(false);
 
 onDeactivated(() => {
@@ -145,6 +170,17 @@ if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twi
 	if (m) tweetId.value = m[1];
 }
 
+if (requestUrl.hostname === 'bsky.app') {
+	const bskyPostPageUrl = requestUrl.pathname.slice(1).split('/');
+	if (bskyPostPageUrl[0] === 'profile' && bskyPostPageUrl[1] && bskyPostPageUrl[2] === 'post' && bskyPostPageUrl[3]) {
+		bskyHandleOrDid.value = bskyPostPageUrl[1];
+		bskyPostRecordKey.value = bskyPostPageUrl[3];
+		if (postExpanded.value) {
+			openBskyEmbed();
+		}
+	}
+}
+
 if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
 	requestUrl.hostname = 'www.youtube.com';
 }
@@ -181,13 +217,21 @@ window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLa
 		sensitive.value = info.sensitive ?? false;
 	});
 
-function adjustTweetHeight(message: MessageEvent) {
-	if (message.origin !== 'https://platform.twitter.com') return;
-	const embed = message.data?.['twttr.embed'];
-	if (embed?.method !== 'twttr.private.resize') return;
-	if (embed?.id !== embedId) return;
-	const height = embed?.params[0]?.height;
-	if (height) tweetHeight.value = height;
+async function openBskyEmbed() {
+	if (bskyHandleOrDid.value == null || bskyPostRecordKey.value == null) return;
+	if (bskyDid.value == null) {
+		if (bskyHandleOrDid.value.startsWith('did:')) {
+			bskyDid.value = bskyHandleOrDid.value;
+		} else {
+			// handleで来ている場合はdidに変換
+			const bskyApiRes = await window.fetch(`https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=${bskyHandleOrDid.value}`);
+			if (bskyApiRes.ok) {
+				const bskyApiData = await bskyApiRes.json() as { did: string };
+				bskyDid.value = bskyApiData.did;
+			}
+		}
+	}
+	postExpanded.value = true;
 }
 
 function openPlayer(): void {
@@ -200,10 +244,25 @@ function openPlayer(): void {
 	});
 }
 
-window.addEventListener('message', adjustTweetHeight);
+function adjustSocialsEmbedHeight(message: MessageEvent) {
+	if (message.origin === 'https://platform.twitter.com') {
+		const embed = message.data?.['twttr.embed'];
+		if (embed?.method === 'twttr.private.resize' && embed?.id === embedId) {
+			const height = embed?.params[0]?.height;
+			if (height) postHeight.value = height;
+		}
+	} else if (message.origin === 'https://embed.bsky.app') {
+		if (message.data?.id === embedId) {
+			const height = message.data?.height;
+			if (height) postHeight.value = height;
+		}
+	}
+}
+
+window.addEventListener('message', adjustSocialsEmbedHeight);
 
 onUnmounted(() => {
-	window.removeEventListener('message', adjustTweetHeight);
+	window.removeEventListener('message', adjustSocialsEmbedHeight);
 });
 </script>
 

diff --git a/packages/frontend/src/index.html b/packages/frontend/src/index.html
@@ -22,7 +22,7 @@
 			style-src 'self' 'unsafe-inline';
 			img-src 'self' data: blob: www.google.com xn--931a.moe localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
 			media-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
-			connect-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://newassets.hcaptcha.com;
+			connect-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://newassets.hcaptcha.com https://public.api.bsky.app;
 			frame-src *;"
 	/>
 	<meta property="og:site_name" content="[DEV BUILD] CherryPick" />