From ae9245abdcc049ca6e48b9016eed6fcf204eeef7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Mon, 6 Nov 2023 04:59:48 +0900
Subject: [PATCH] enhance(frontend): X (formally known as Twitter)
 (MisskeyIO#208)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(frontend): TwitterアイコンをXに変更 (misskey-dev#11436)
cheery-picked from 007ed5c9298ba6d7374dc913f65a5600ac88f331
Co-authored-by: Ebise Lutica <7106976+EbiseLutica@users.noreply.github.com>

* fix(frontend/MkUrlPreview): allow fullscreen from tweets (misskey-dev#11712)
cheery-picked from 2896fc6cb4f6f35df4b0a0c22c9be55ad3c8e19a
Co-authored-by: Kagami Sascha Rosylight <saschanaz@outlook.com>

* enhance(frontend): x.comでも展開ができるように (misskey-dev#11757)
cheery-picked from cb80dff7df07e9ea9292365fe82fc7af09cc63c1
Co-authored-by: maguroshouta <54607611+maguroshouta@users.noreply.github.com>
---
 packages/frontend/package.json                |  2 +-
 .../frontend/src/components/MkUrlPreview.vue  | 13 +++++++++---
 packages/frontend/test/url-preview.test.ts    | 20 ++++++++++++++++++-
 pnpm-lock.yaml                                | 14 ++++++-------
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 84b5da261f..f7af1b1d5b 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -23,7 +23,7 @@
 		"@rollup/plugin-typescript": "^11.1.2",
 		"@rollup/pluginutils": "5.0.2",
 		"@syuilo/aiscript": "0.15.0",
-		"@tabler/icons-webfont": "2.25.0",
+		"@tabler/icons-webfont": "2.30.0",
 		"@vitejs/plugin-vue": "4.2.3",
 		"@vue-macros/reactivity-transform": "0.3.15",
 		"@vue/compiler-sfc": "3.3.4",
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 852999773a..19bbb3882f 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -28,7 +28,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 <template v-else-if="tweetId && tweetExpanded">
 	<div ref="twitter">
-		<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :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>
+		<iframe
+			ref="tweet"
+			allow="fullscreen;web-share"
+			sandbox="allow-popups 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}`"
+		></iframe>
 	</div>
 	<div :class="$style.action">
 		<MkButton :small="true" inline @click="tweetExpanded = false">
@@ -60,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template v-if="showActions">
 		<div v-if="tweetId" :class="$style.action">
 			<MkButton :small="true" inline @click="tweetExpanded = true">
-				<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
+				<i class="ti ti-brand-x"></i> {{ i18n.ts.expandTweet }}
 			</MkButton>
 		</div>
 		<div v-if="!playerEnabled && player.url" :class="$style.action">
@@ -126,7 +133,7 @@ let unknownUrl = $ref(false);
 const requestUrl = new URL(props.url);
 if (!['http:', 'https:'].includes(requestUrl.protocol)) throw new Error('invalid url');
 
-if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twitter.com') {
+if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twitter.com' || requestUrl.hostname === 'x.com' || requestUrl.hostname === 'mobile.x.com') {
 	const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/);
 	if (m) tweetId = m[1];
 }
diff --git a/packages/frontend/test/url-preview.test.ts b/packages/frontend/test/url-preview.test.ts
index 1d43a628f2..0cf3a417e2 100644
--- a/packages/frontend/test/url-preview.test.ts
+++ b/packages/frontend/test/url-preview.test.ts
@@ -13,7 +13,7 @@ import MkUrlPreview from '@/components/MkUrlPreview.vue';
 
 type SummalyResult = Awaited<ReturnType<typeof summaly>>;
 
-describe('MkMediaImage', () => {
+describe('MkUrlPreview', () => {
 	const renderPreviewBy = async (summary: Partial<SummalyResult>): Promise<RenderResult> => {
 		if (!summary.player) {
 			summary.player = {
@@ -143,4 +143,22 @@ describe('MkMediaImage', () => {
 		assert.exists(iframe, 'iframe should exist');
 		assert.strictEqual(iframe?.parentElement?.style.paddingTop, '200px');
 	});
+
+	test('Loading a tweet in iframe', async () => {
+		const iframe = await renderAndOpenPreview({
+			url: 'https://twitter.com/i/web/status/1685072521782325249',
+		});
+		assert.exists(iframe, 'iframe should exist');
+		assert.strictEqual(iframe?.getAttribute('allow'), 'fullscreen;web-share');
+		assert.strictEqual(iframe?.getAttribute('sandbox'), 'allow-popups allow-scripts allow-same-origin');
+	});
+
+	test('Loading a post in iframe', async () => {
+		const iframe = await renderAndOpenPreview({
+			url: 'https://x.com/i/web/status/1685072521782325249',
+		});
+		assert.exists(iframe, 'iframe should exist');
+		assert.strictEqual(iframe?.getAttribute('allow'), 'fullscreen;web-share');
+		assert.strictEqual(iframe?.getAttribute('sandbox'), 'allow-popups allow-scripts allow-same-origin');
+	});
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 75a7e4242e..fedebc0356 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -638,8 +638,8 @@ importers:
         specifier: 0.15.0
         version: 0.15.0
       '@tabler/icons-webfont':
-        specifier: 2.25.0
-        version: 2.25.0
+        specifier: 2.30.0
+        version: 2.30.0
       '@vitejs/plugin-vue':
         specifier: 4.2.3
         version: 4.2.3(vite@4.4.4)(vue@3.3.4)
@@ -8394,14 +8394,14 @@ packages:
     dependencies:
       defer-to-connect: 2.0.1
 
-  /@tabler/icons-webfont@2.25.0:
-    resolution: {integrity: sha512-IWYVnYlCwlGC95kvpY5Hdiyn1/amXOUwsfRthtmgEtHCQly4JSLRuaD90xD0O+pQ+wZBXIVNsO3pKdg74zEaBg==}
+  /@tabler/icons-webfont@2.30.0:
+    resolution: {integrity: sha512-tGGKxeATvyHJBHl5FzY4oAShbAiR4ovstG62lqb2HGlOJwz4Io9TSk4eoB88nqxg3sT5no2YsAKXcr1UnlpnNQ==}
     dependencies:
-      '@tabler/icons': 2.25.0
+      '@tabler/icons': 2.30.0
     dev: false
 
-  /@tabler/icons@2.25.0:
-    resolution: {integrity: sha512-Z+FtSZoG/CM1TMCgg7elUew2m0+qMdh5gutMhvxiIY77KIIsE6L/6fUBy+rPXWE9v7MV296fsnCvbpfgwpXupQ==}
+  /@tabler/icons@2.30.0:
+    resolution: {integrity: sha512-tvtmkI4ALjKThVVORh++sB9JnkFY7eGInKxNy+Df7WVQiF7T85tlvGADzlgX4Ic+CK5MIUzZ0jhOlQ/RRlgXpg==}
     dev: false
 
   /@tensorflow/tfjs-backend-cpu@4.4.0(@tensorflow/tfjs-core@4.4.0):