diff --git a/app/soapbox/utils/__tests__/media.test.ts b/app/soapbox/utils/__tests__/media.test.ts index 815b12321..56a02aebc 100644 --- a/app/soapbox/utils/__tests__/media.test.ts +++ b/app/soapbox/utils/__tests__/media.test.ts @@ -6,6 +6,13 @@ describe('addAutoPlay()', () => { const html = ''; expect(addAutoPlay(html)).toEqual(''); }); + + describe('when the iframe src already has params', () => { + it('adds the correct query parameters to the src', () => { + const html = ''; + expect(addAutoPlay(html)).toEqual(''); + }); + }); }); describe('when the provider is not Rumble', () => { @@ -13,5 +20,12 @@ describe('addAutoPlay()', () => { const html = ''; expect(addAutoPlay(html)).toEqual(''); }); + + describe('when the iframe src already has params', () => { + it('adds the correct query parameters to the src', () => { + const html = ''; + expect(addAutoPlay(html)).toEqual(''); + }); + }); }); }); diff --git a/app/soapbox/utils/media.ts b/app/soapbox/utils/media.ts index 27a1f6ba0..ff0bf502e 100644 --- a/app/soapbox/utils/media.ts +++ b/app/soapbox/utils/media.ts @@ -53,24 +53,29 @@ const getVideoDuration = (file: File): Promise => { 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('?')) { - iframe.src += '&'; - } else { - iframe.src += '?'; - } + const url = new URL(iframe.src); + const provider = new URL(iframe.src).host; - if (new URL(iframe.src).host === 'rumble.com') { - iframe.src += 'pub=7a20&autoplay=2'; + if (provider === VideoProviders.RUMBLE) { + 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;