Autoplay videos from Rumble

app/soapbox/utils/__tests__/media.test.ts

@@ -0,0 +1,17 @@
+import { addAutoPlay } from '../media';
+
+describe('addAutoPlay()', () => {
+  describe('when the provider is Rumble', () => {
+    it('adds the correct query parameters to the src', () => {
+      const html = '<iframe src="https://rumble.com/embed/123456/" width="1920" height="1080" frameborder="0" title="Video upload for 1" allowfullscreen=""></iframe>';
+      expect(addAutoPlay(html)).toEqual('<iframe src="https://rumble.com/embed/123456/?pub=7a20&amp;autoplay=2" width="1920" height="1080" frameborder="0" title="Video upload for 1" allowfullscreen=""></iframe>');
+    });
+  });
+
+  describe('when the provider is not Rumble', () => {
+    it('adds the correct query parameters to the src', () => {
+      const html = '<iframe src="https://youtube.com/embed/123456/" width="1920" height="1080" frameborder="0" title="Video upload for 1" allowfullscreen=""></iframe>';
+      expect(addAutoPlay(html)).toEqual('<iframe src="https://youtube.com/embed/123456/?autoplay=1&amp;auto_play=1" width="1920" height="1080" frameborder="0" title="Video upload for 1" allowfullscreen=""></iframe>');
+    });
+  });
+});

app/soapbox/utils/media.ts

@@ -51,4 +51,32 @@ const getVideoDuration = (file: File): Promise<number> => {
   return promise;
 };
 
-export { getVideoDuration, formatBytes, truncateFilename };
+const domParser = new DOMParser();
+
+const addAutoPlay = (html: string): string => {
+  const document = domParser.parseFromString(html, 'text/html').documentElement;
+  const iframe = document.querySelector('iframe');
+
+  if (iframe) {
+    if (iframe.src.includes('?')) {
+      iframe.src += '&';
+    } else {
+      iframe.src += '?';
+    }
+
+    if (new URL(iframe.src).host === 'rumble.com') {
+      iframe.src += 'pub=7a20&autoplay=2';
+    } else {
+      iframe.src += 'autoplay=1&auto_play=1';
+      iframe.allow = 'autoplay';
+    }
+
+    // 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;
+  }
+
+  return html;
+};
+
+export { getVideoDuration, formatBytes, truncateFilename, addAutoPlay };