From 8920b4ca75fed7c664de15354b916fc5e1f15fa2 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Wed, 1 Jul 2020 23:35:05 +0800
Subject: [PATCH] Fix video transcode setting not reflected correctly (MP3
 incorrectly transcoded to MP4)

## Issue
4332: Video transcode setting not reflected correctly (MP3 incorrectly transcoded to MP4)

2 issues here:
(1) The checkbox is mixing between user state and logic state.
(2) The variables (e.g. `optimize`, `isVid`, `filePath`, etc) will have values from the previous operation when you enter Publish Page, so GUI issues beyond Transcode can be also produced (e.g. showing Transcode enabled for an image).

## Changes
The "Transcode" checkbox state (checked vs. unchecked) will now reflect the user's desire and will be a persisted state. Whether or not this setting is used will be reflected by the checkbox's grayed-out state (i.e. it can be checked for non videos, but it will be grayed out).
---
 ui/component/publishFile/view.jsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx
index 5ec433da9..0b1e89077 100644
--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@@ -7,7 +7,8 @@ import Button from 'component/button';
 import Card from 'component/common/card';
 import { FormField } from 'component/common/form';
 import Spinner from 'component/spinner';
-import I18nMessage from '../i18nMessage';
+import I18nMessage from 'component/i18nMessage';
+import usePersistedState from 'effects/use-persisted-state';
 
 type Props = {
   name: ?string,
@@ -48,6 +49,8 @@ function PublishFile(props: Props) {
   const ffmpegAvail = ffmpegStatus.available;
   const [oversized, setOversized] = useState(false);
   const [currentFile, setCurrentFile] = useState(null);
+  const [optimizeAvail, setOptimizeAvail] = useState(false);
+  const [userOptimize, setUserOptimize] = usePersistedState('publish-file-user-optimize', false);
 
   const RECOMMENDED_BITRATE = 6000000;
   const TV_PUBLISH_SIZE_LIMIT: number = 1073741824;
@@ -73,6 +76,14 @@ function PublishFile(props: Props) {
     }
   }, [filePath, currentFile, handleFileChange, updateFileInfo]);
 
+  useEffect(() => {
+    const isOptimizeAvail = currentFile && currentFile !== '' && isVid && ffmpegAvail;
+    const finalOptimizeState = isOptimizeAvail && userOptimize;
+
+    setOptimizeAvail(isOptimizeAvail);
+    updatePublishForm({ optimize: finalOptimizeState });
+  }, [filePath, isVid, ffmpegAvail, userOptimize]);
+
   function updateFileInfo(duration, size, isvid) {
     updatePublishForm({ fileDur: duration, fileSize: size, fileVid: isvid });
   }
@@ -266,9 +277,9 @@ function PublishFile(props: Props) {
           {/* @if TARGET='app' */}
           <FormField
             type="checkbox"
-            checked={isVid && ffmpegAvail && optimize}
-            disabled={!isVid || !ffmpegAvail}
-            onChange={e => updatePublishForm({ optimize: e.target.checked })}
+            checked={userOptimize}
+            disabled={!optimizeAvail}
+            onChange={() => setUserOptimize(!userOptimize)}
             label={__('Optimize and transcode video')}
             name="optimize"
           />