From 5c6ae4d6da1af2ab671efe20d6b9072142c2eaec Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Fri, 11 Nov 2022 10:21:32 -0500
Subject: [PATCH] Make auto-play video optional config

---
 app/soapbox/__fixtures__/intlMessages.json      | 1 +
 app/soapbox/components/status-media.tsx         | 9 +++++++--
 app/soapbox/features/preferences/index.tsx      | 4 ++++
 app/soapbox/features/status/components/card.tsx | 6 +++++-
 app/soapbox/locales/en.json                     | 1 +
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/__fixtures__/intlMessages.json b/app/soapbox/__fixtures__/intlMessages.json
index 54c919e6a..eb2a35806 100644
--- a/app/soapbox/__fixtures__/intlMessages.json
+++ b/app/soapbox/__fixtures__/intlMessages.json
@@ -319,6 +319,7 @@
     "poll_button.add_poll": "Add a poll",
     "poll_button.remove_poll": "Remove poll",
     "preferences.fields.auto_play_gif_label": "Auto-play animated GIFs",
+    "preferences.fields.auto_play_video_label": "Auto-play videos",
     "preferences.fields.boost_modal_label": "Show confirmation dialog before reposting",
     "preferences.fields.delete_modal_label": "Show confirmation dialog before deleting a post",
     "preferences.fields.demetricator_label": "Use Demetricator",
diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index 195e749f1..b159d4fe5 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -6,7 +6,7 @@ import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder
 import Card from 'soapbox/features/status/components/card';
 import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useSettings } from 'soapbox/hooks';
 import { addAutoPlay } from 'soapbox/utils/media';
 
 import type { List as ImmutableList } from 'immutable';
@@ -34,6 +34,9 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   onToggleVisibility = () => { },
 }) => {
   const dispatch = useAppDispatch();
+  const settings = useSettings();
+  const shouldAutoPlayVideo = settings.get('autoPlayVideo');
+
   const [mediaWrapperWidth, setMediaWrapperWidth] = useState<number | undefined>(undefined);
 
   const size = status.media_attachments.size;
@@ -94,7 +97,9 @@ const StatusMedia: React.FC<IStatusMedia> = ({
               ref={setRef}
               className='status-card__image status-card-video'
               style={height ? { height } : undefined}
-              dangerouslySetInnerHTML={{ __html: addAutoPlay(status.card.html) }}
+              dangerouslySetInnerHTML={{
+                __html: shouldAutoPlayVideo ? addAutoPlay(status.card.html) : status.card.html,
+              }}
             />
           </div>
         );
diff --git a/app/soapbox/features/preferences/index.tsx b/app/soapbox/features/preferences/index.tsx
index 3adb90861..98221a8fd 100644
--- a/app/soapbox/features/preferences/index.tsx
+++ b/app/soapbox/features/preferences/index.tsx
@@ -193,6 +193,10 @@ const Preferences = () => {
           <SettingToggle settings={settings} settingPath={['autoPlayGif']} onChange={onToggleChange} />
         </ListItem>
 
+        <ListItem label={<FormattedMessage id='preferences.fields.auto_play_video_label' defaultMessage='Auto-play videos' />}>
+          <SettingToggle settings={settings} settingPath={['autoPlayVideo']} onChange={onToggleChange} />
+        </ListItem>
+
         {features.spoilers && <ListItem label={<FormattedMessage id='preferences.fields.expand_spoilers_label' defaultMessage='Always expand posts marked with content warnings' />}>
           <SettingToggle settings={settings} settingPath={['expandSpoilers']} onChange={onToggleChange} />
         </ListItem>}
diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index 7e976e5bb..18dd427a5 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -5,6 +5,7 @@ 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';
 
@@ -41,6 +42,9 @@ 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);
 
@@ -88,7 +92,7 @@ const Card: React.FC<ICard> = ({
   };
 
   const renderVideo = () => {
-    const content = { __html: addAutoPlay(card.html) };
+    const content = { __html: shouldAutoPlayVideo ? addAutoPlay(card.html) : card.html };
     const ratio = getRatio(card);
     const height = width / ratio;
 
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index f2eaf32c8..b7c280137 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -790,6 +790,7 @@
   "poll_button.remove_poll": "Remove poll",
   "pre_header.close": "Close",
   "preferences.fields.auto_play_gif_label": "Auto-play animated GIFs",
+  "preferences.fields.auto_play_video_label": "Auto-play videos",
   "preferences.fields.autoload_more_label": "Automatically load more items when scrolled to the bottom of the page",
   "preferences.fields.autoload_timelines_label": "Automatically load new posts when scrolled to the top of the page",
   "preferences.fields.boost_modal_label": "Show confirmation dialog before reposting",