sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance(frontend): X (formally known as Twitter) (MisskeyIO#208)

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

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

* enhance(frontend): x.comでも展開ができるように (misskey-dev#11757)
cheery-picked from cb80dff7df
Co-authored-by: maguroshouta <54607611+maguroshouta@users.noreply.github.com>
This commit is contained in:
まっちゃとーにゅ
2023-11-06 04:59:48 +09:00
committed by GitHub
parent 6a06711ffd
commit ae9245abdc
4 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/package.json
View File

@@ -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",

13
packages/frontend/src/components/MkUrlPreview.vue
View File

@@ -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];
}

20
packages/frontend/test/url-preview.test.ts
View File

@@ -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');
});
});