Merge remote-tracking branch 'origin/develop' into chats

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

@@ -0,0 +1,7 @@
+import { compareId } from '../comparators';
+
+test('compareId', () => {
+  expect(compareId('3', '3')).toBe(0);
+  expect(compareId('10', '1')).toBe(1);
+  expect(compareId('99', '100')).toBe(-1);
+});

app/soapbox/utils/__tests__/config-db.test.ts

@@ -2,7 +2,7 @@ import { List as ImmutableList, fromJS } from 'immutable';
 
 import config_db from 'soapbox/__fixtures__/config_db.json';
 
-import { ConfigDB } from '../config_db';
+import { ConfigDB } from '../config-db';
 
 test('find', () => {
   const configs = fromJS(config_db).get('configs');

app/soapbox/utils/__tests__/emoji-reacts.test.ts

@@ -11,7 +11,7 @@ import {
   getReactForStatus,
   simulateEmojiReact,
   simulateUnEmojiReact,
-} from '../emoji_reacts';
+} from '../emoji-reacts';
 
 const ALLOWED_EMOJI = ImmutableList([
   '👍',

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

@@ -0,0 +1,31 @@
+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 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', () => {
+    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>');
+    });
+
+    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/comparators.ts

@@ -0,0 +1,23 @@
+'use strict';
+
+/**
+ * Compare numerical primary keys represented as strings.
+ * For example, '10' (as a string) is considered less than '9'
+ * when sorted alphabetically. So compare string length first.
+ *
+ * - `0`: id1 == id2
+ * - `1`: id1 > id2
+ * - `-1`: id1 < id2
+ */
+function compareId(id1: string, id2: string) {
+  if (id1 === id2) {
+    return 0;
+  }
+  if (id1.length === id2.length) {
+    return id1 > id2 ? 1 : -1;
+  } else {
+    return id1.length > id2.length ? 1 : -1;
+  }
+}
+
+export { compareId };

app/soapbox/utils/greentext.ts

@@ -1,4 +1,4 @@
-import { processHtml } from './tiny_post_html_processor';
+import { processHtml } from './tiny-post-html-processor';
 
 export const addGreentext = (html: string): string => {
   // Copied from Pleroma FE

app/soapbox/utils/media.ts

@@ -51,4 +51,37 @@ const getVideoDuration = (file: File): Promise<number> => {
   return promise;
 };
 
-export { getVideoDuration, formatBytes, truncateFilename };
+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) {
+    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;
+  }
+
+  return html;
+};
+
+export { getVideoDuration, formatBytes, truncateFilename, addAutoPlay };

app/soapbox/utils/sounds.ts

@@ -35,21 +35,21 @@ const play = (audio: HTMLAudioElement): void => {
 const soundCache: Record<Sounds, HTMLAudioElement> = {
   boop: createAudio([
     {
-      src: require('../../sounds/boop.ogg'),
+      src: require('../../assets/sounds/boop.ogg'),
       type: 'audio/ogg',
     },
     {
-      src: require('../../sounds/boop.mp3'),
+      src: require('../../assets/sounds/boop.mp3'),
       type: 'audio/mpeg',
     },
   ]),
   chat: createAudio([
     {
-      src: require('../../sounds/chat.oga'),
+      src: require('../../assets/sounds/chat.oga'),
       type: 'audio/ogg',
     },
     {
-      src: require('../../sounds/chat.mp3'),
+      src: require('../../assets/sounds/chat.mp3'),
       type: 'audio/mpeg',
     },
   ]),

app/soapbox/utils/state.ts

@@ -4,7 +4,7 @@
  */
 
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import * as BuildConfig from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build-config';
 import { isPrerendered } from 'soapbox/precheck';
 import { isURL } from 'soapbox/utils/auth';
 

app/soapbox/utils/static.ts

@@ -5,7 +5,7 @@
 
 import { join } from 'path';
 
-import * as BuildConfig from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build-config';
 
 /** Gets the path to a file with build configuration being considered. */
 export const joinPublicPath = (...paths: string[]): string => {