Refactor to use URL and URLSearchParams

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

@@ -6,6 +6,13 @@ describe('addAutoPlay()', () => {
       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 iframe src already has params', () => {
+      it('adds the correct query parameters to the src', () => {
+        const html = '<iframe src="https://rumble.com/embed/123456/?foo=bar" width="1920" height="1080" frameborder="0" title="Video upload for 1" allowfullscreen=""></iframe>';
+        expect(addAutoPlay(html)).toEqual('<iframe src="https://rumble.com/embed/123456/?foo=bar&amp;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', () => {
@@ -13,5 +20,12 @@ describe('addAutoPlay()', () => {
       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>');
     });
+
+    describe('when the iframe src already has params', () => {
+      it('adds the correct query parameters to the src', () => {
+        const html = '<iframe src="https://youtube.com/embed/123456?foo=bar" width="1920" height="1080" frameborder="0" title="Video upload for 1" allowfullscreen=""></iframe>';
+        expect(addAutoPlay(html)).toEqual('<iframe src="https://youtube.com/embed/123456?foo=bar&amp;autoplay=1&amp;auto_play=1" width="1920" height="1080" frameborder="0" title="Video upload for 1" allowfullscreen=""></iframe>');
+      });
+    });
   });
 });

app/soapbox/utils/media.ts

@@ -53,24 +53,29 @@ const getVideoDuration = (file: File): Promise<number> => {
 
 const domParser = new DOMParser();
 
+enum VideoProviders {
+  RUMBLE = 'rumble.com'
+}
+
 const addAutoPlay = (html: string): string => {
   const document = domParser.parseFromString(html, 'text/html').documentElement;
   const iframe = document.querySelector('iframe');
 
   if (iframe) {
-    if (iframe.src.includes('?')) {
+    const url = new URL(iframe.src);
-      iframe.src += '&';
+    const provider = new URL(iframe.src).host;
-    } else {
-      iframe.src += '?';
-    }
 
-    if (new URL(iframe.src).host === 'rumble.com') {
+    if (provider === VideoProviders.RUMBLE) {
-      iframe.src += 'pub=7a20&autoplay=2';
+      url.searchParams.append('pub', '7a20');
+      url.searchParams.append('autoplay', '2');
     } else {
-      iframe.src += 'autoplay=1&auto_play=1';
+      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;