From 9b2c380b642a4a6abc401df1b19a3a912b334332 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 1 Sep 2021 17:28:02 +0200
Subject: [PATCH] Split autoplay gifs and videos in to different settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/messages/MImageBody.tsx      |  8 ++++----
 src/components/views/messages/MVideoBody.tsx      |  4 ++--
 .../tabs/user/PreferencesUserSettingsTab.tsx      |  3 ++-
 src/settings/Settings.tsx                         |  9 +++++++--
 src/settings/handlers/AccountSettingsHandler.ts   | 15 +++++++++++++++
 5 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 8ead8d9ba2..e36e4c3113 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -128,7 +128,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     private onImageEnter = (e: React.MouseEvent<HTMLImageElement>): void => {
         this.setState({ hover: true });
 
-        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifs")) {
             return;
         }
         const imgElement = e.currentTarget;
@@ -138,7 +138,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     private onImageLeave = (e: React.MouseEvent<HTMLImageElement>): void => {
         this.setState({ hover: false });
 
-        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (!this.state.showImage || !this.isGif() || SettingsStore.getValue("autoplayGifs")) {
             return;
         }
         const imgElement = e.currentTarget;
@@ -387,7 +387,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             showPlaceholder = false; // because we're hiding the image, so don't show the placeholder.
         }
 
-        if (this.isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
+        if (this.isGif() && !SettingsStore.getValue("autoplayGifs") && !this.state.hover) {
             gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
         }
 
@@ -487,7 +487,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
         const contentUrl = this.getContentUrl();
         let thumbUrl;
-        if (this.isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
+        if (this.isGif() && SettingsStore.getValue("autoplayGifs")) {
             thumbUrl = contentUrl;
         } else {
             thumbUrl = this.getThumbUrl();
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 77c7ebacda..de1915299c 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -145,7 +145,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
     }
 
     async componentDidMount() {
-        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos") as boolean;
+        const autoplay = SettingsStore.getValue("autoplayVideo") as boolean;
         this.loadBlurhash();
 
         if (this.props.mediaEventHelper.media.isEncrypted && this.state.decryptedUrl === null) {
@@ -209,7 +209,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
 
     render() {
         const content = this.props.mxEvent.getContent();
-        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
+        const autoplay = SettingsStore.getValue("autoplayVideo");
 
         if (this.state.error !== null) {
             return (
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index 21c3ab24ec..2209537967 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -172,7 +172,8 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
     ];
     static IMAGES_AND_VIDEOS_SETTINGS = [
         'urlPreviewsEnabled',
-        'autoplayGifsAndVideos',
+        'autoplayGifs',
+        'autoplayVideo',
         'showImages',
     ];
     static TIMELINE_SETTINGS = [
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index a0261e9994..40f57a0a1c 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -393,9 +393,14 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         displayName: _td('Always show message timestamps'),
         default: false,
     },
-    "autoplayGifsAndVideos": {
+    "autoplayGifs": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: _td('Autoplay GIFs and videos'),
+        displayName: _td('Autoplay GIFs'),
+        default: false,
+    },
+    "autoplayVideo": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Autoplay videos'),
         default: false,
     },
     "enableSyntaxHighlightLanguageDetection": {
diff --git a/src/settings/handlers/AccountSettingsHandler.ts b/src/settings/handlers/AccountSettingsHandler.ts
index 9c937ebd88..75cef07685 100644
--- a/src/settings/handlers/AccountSettingsHandler.ts
+++ b/src/settings/handlers/AccountSettingsHandler.ts
@@ -110,6 +110,21 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
             return content ? content['enabled'] : null;
         }
 
+        // Special case for autoplaying videos and GIFs
+        if (["autoplayGifs", "autoplayVideo"].includes(settingName)) {
+            const settings = this.getSettings() || {};
+            const value = settings[settingName];
+            // Fallback to old combined setting
+            if (value === null || value === undefined) {
+                const oldCombinedValue= settings["autoplayGifsAndVideos"];
+                // Write, so that we can remove this in the future
+                this.setValue("autoplayGifs", roomId, oldCombinedValue);
+                this.setValue("autoplayVideo", roomId, oldCombinedValue);
+                return oldCombinedValue;
+            }
+            return value;
+        }
+
         const settings = this.getSettings() || {};
         let preferredValue = settings[settingName];