matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

nicolium: allow youtube embed start time

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-02-15 15:10:32 +01:00
parent e05c4d5ba9
commit 6df9a99c6e
3 changed files with 31 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/pl-fe/src/components/preview-card.tsx
View File

@ -15,7 +15,6 @@ import Icon from '@/components/ui/icon';
import Stack from '@/components/ui/stack';
import Text from '@/components/ui/text';
import Emojify from '@/features/emoji/emojify';
import { addAutoPlay } from '@/utils/media';
import { getTextDirection } from '@/utils/rtl';
import HoverAccountWrapper from './hover-account-wrapper';
@ -33,6 +32,34 @@ interface IPreviewCard {
horizontal?: boolean;
}
const domParser = new DOMParser();
const handleIframeUrl = (html: string, url: string, providerName: string) => {
const document = domParser.parseFromString(html, 'text/html').documentElement;
const iframe = document.querySelector('iframe');
const startTime = new URL(url).searchParams.get('t');
if (iframe) {
const iframeUrl = new URL(iframe.src);
iframeUrl.searchParams.set('autoplay', '1');
iframeUrl.searchParams.set('auto_play', '1');
if (providerName === 'YouTube') {
iframeUrl.searchParams.set('start', startTime ?? '');
iframe.referrerPolicy = 'strict-origin-when-cross-origin';
}
iframe.allow = 'autoplay';
iframe.src = iframeUrl.href;
return iframe.outerHTML;
}
return '';
};
/** Displays a Mastodon link preview. Similar to OEmbed. */
const PreviewCard: React.FC<IPreviewCard> = ({
card,
@ -93,7 +120,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
};
const renderVideo = () => {
const content = { __html: addAutoPlay(card.html) };
const content = { __html: handleIframeUrl(card.html, card.url, card.provider_name) };
const ratio = getRatio(card);
const height = width / ratio;

2
packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx
View File

@ -304,7 +304,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
<Text tag='span' theme='muted'>
<FormattedMessage
id='compose_event.fields.has_end_time'
defaultMessage='The event has an end date'
defaultMessage='This event has an end date'
/>
</Text>
</HStack>

30
packages/pl-fe/src/utils/media.ts
View File

@ -52,32 +52,4 @@ const getVideoDuration = (file: File): Promise<number> => {
return promise;
};
const domParser = new DOMParser();
/** Try adding autoplay to an iframe embed for platforms such as YouTube. */
const addAutoPlay = (html: string): string => {
try {
const document = domParser.parseFromString(html, 'text/html').documentElement;
const iframe = document.querySelector('iframe');
if (iframe) {
const url = new URL(iframe.src);
url.searchParams.append('autoplay', '1');
url.searchParams.append('auto_play', '1');
iframe.allow = 'autoplay';
iframe.src = url.toString();
// DOM parser creates html/body elements around original HTML fragment,
// so we need to get innerHTML out of the body and not the entire document
return (document.querySelector('body') as HTMLBodyElement).innerHTML;
}
} catch (e) {
return html;
}
return html;
};
export { getVideoDuration, formatBytes, truncateFilename, addAutoPlay };
export { getVideoDuration, formatBytes, truncateFilename };