LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix video transcode setting not reflected correctly (MP3 incorrectly transcoded to MP4)

Browse source 
## 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).
This commit is contained in:
infiinte-persistence 2020-07-01 23:35:05 +08:00 • committed by Sean Yesmunt
parent 0fcf78a700
commit 8920b4ca75
1 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/component/publishFile/view.jsx
View file

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