natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(frontend/MkUrlPreview): allow fullscreen from tweets (#11712) 

* fix(frontend/MkUrlPreview): allow fullscreen from tweets

* Update url-preview.test.ts
This commit is contained in:
Kagami Sascha Rosylight 2023-08-13 05:29:13 +02:00 committed by GitHub
parent 8b7f54df66
commit 2896fc6cb4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,14 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<template v-else-if="tweetId && tweetExpanded"> <template v-else-if="tweetId && tweetExpanded">
<div ref="twitter"> <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>
<div :class="$style.action"> <div :class="$style.action">
<MkButton :small="true" inline @click="tweetExpanded = false"> <MkButton :small="true" inline @click="tweetExpanded = false">

11
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>>; type SummalyResult = Awaited<ReturnType<typeof summaly>>;
describe('MkMediaImage', () => { describe('MkUrlPreview', () => {
const renderPreviewBy = async (summary: Partial<SummalyResult>): Promise<RenderResult> => { const renderPreviewBy = async (summary: Partial<SummalyResult>): Promise<RenderResult> => {
if (!summary.player) { if (!summary.player) {
summary.player = { summary.player = {
@ -143,4 +143,13 @@ describe('MkMediaImage', () => {
assert.exists(iframe, 'iframe should exist'); assert.exists(iframe, 'iframe should exist');
assert.strictEqual(iframe?.parentElement?.style.paddingTop, '200px'); 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');
});
}); });