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:
parent
8b7f54df66
commit
2896fc6cb4
2 changed files with 18 additions and 2 deletions
|
@ -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}&hideCard=false&hideThread=false&lang=en&theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&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}&hideCard=false&hideThread=false&lang=en&theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&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">
|
||||||
|
|
|
@ -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');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue