Merge branch 'autoplay-embed' into 'develop'

Autoplay embedded videos after the play button is clicked

See merge request soapbox-pub/soapbox!2187

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.

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<ICard> = ({
   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<ICard> = ({
   };
 
   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;
 

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;