diff --git a/CHANGELOG.md b/CHANGELOG.md index f511a0982..cde1ba14a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed ### Fixed +- Posts: don't have to click the play button twice for embedded videos. ### Removed - Admin: single user mode. Now the homepage can be redirected to any URL. diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx index 214b0f1f9..6fdad7cd7 100644 --- a/app/soapbox/features/status/components/card.tsx +++ b/app/soapbox/features/status/components/card.tsx @@ -5,7 +5,6 @@ import React, { useState, useEffect } from 'react'; import Blurhash from 'soapbox/components/blurhash'; import Icon from 'soapbox/components/icon'; import { HStack, Stack, Text } from 'soapbox/components/ui'; -import { useSettings } from 'soapbox/hooks'; import { normalizeAttachment } from 'soapbox/normalizers'; import { addAutoPlay } from 'soapbox/utils/media'; @@ -42,9 +41,6 @@ const Card: React.FC = ({ onOpenMedia, horizontal, }): JSX.Element => { - const settings = useSettings(); - const shouldAutoPlayVideo = settings.get('autoPlayVideo'); - const [width, setWidth] = useState(defaultWidth); const [embedded, setEmbedded] = useState(false); @@ -92,7 +88,7 @@ const Card: React.FC = ({ }; const renderVideo = () => { - const content = { __html: shouldAutoPlayVideo ? addAutoPlay(card.html) : card.html }; + const content = { __html: addAutoPlay(card.html) }; const ratio = getRatio(card); const height = width / ratio; diff --git a/app/soapbox/utils/media.ts b/app/soapbox/utils/media.ts index ff0bf502e..a9ffb88a1 100644 --- a/app/soapbox/utils/media.ts +++ b/app/soapbox/utils/media.ts @@ -57,28 +57,33 @@ enum VideoProviders { RUMBLE = 'rumble.com' } +/** Try adding autoplay to an iframe embed for platforms such as YouTube. */ const addAutoPlay = (html: string): string => { - const document = domParser.parseFromString(html, 'text/html').documentElement; - const iframe = document.querySelector('iframe'); - - if (iframe) { - const url = new URL(iframe.src); - const provider = new URL(iframe.src).host; - - if (provider === VideoProviders.RUMBLE) { - url.searchParams.append('pub', '7a20'); - url.searchParams.append('autoplay', '2'); - } else { - url.searchParams.append('autoplay', '1'); - url.searchParams.append('auto_play', '1'); - iframe.allow = 'autoplay'; + try { + const document = domParser.parseFromString(html, 'text/html').documentElement; + const iframe = document.querySelector('iframe'); + + if (iframe) { + const url = new URL(iframe.src); + const provider = new URL(iframe.src).host; + + if (provider === VideoProviders.RUMBLE) { + url.searchParams.append('pub', '7a20'); + url.searchParams.append('autoplay', '2'); + } else { + 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; } - - 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;