From c820db1a6508efd4b112534c89e7a8e08ceb19dc Mon Sep 17 00:00:00 2001 From: willie-yao Date: Thu, 16 Feb 2023 22:45:46 -0800 Subject: [PATCH] No sets view --- src/renderer/components/VideoSearch.tsx | 2 +- src/renderer/pages/SetsView.tsx | 362 ++++++++++++++++-------- src/renderer/pages/YTUploadView.tsx | 91 ++++-- 3 files changed, 312 insertions(+), 143 deletions(-) diff --git a/src/renderer/components/VideoSearch.tsx b/src/renderer/components/VideoSearch.tsx index 160bcef..fd3d31a 100644 --- a/src/renderer/components/VideoSearch.tsx +++ b/src/renderer/components/VideoSearch.tsx @@ -306,7 +306,7 @@ const VideoSearch = () => { label="Stream Station" variant="filled" onChange={(event) => setStation(event.target.value)} - helperText="Can be name of twitch stream or a number." + helperText="Name of a twitch channel or a station number." sx={{ marginBottom: '25px' }} /> {RetrieveSets( diff --git a/src/renderer/pages/SetsView.tsx b/src/renderer/pages/SetsView.tsx index 21cfd6e..e99fd6a 100644 --- a/src/renderer/pages/SetsView.tsx +++ b/src/renderer/pages/SetsView.tsx @@ -22,7 +22,7 @@ import { CardContent, CardMedia, Tooltip, - Switch + Switch, } from '@mui/material'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import EditIcon from '@mui/icons-material/Edit'; @@ -35,12 +35,12 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'; import SkipNextIcon from '@mui/icons-material/SkipNext'; -import moment from 'moment' +import moment from 'moment'; import ThumbnailGenerator from 'renderer/components/ThumbnailGenerator'; import { exportComponentAsJPEG } from 'react-component-export-image'; -import { MuiColorInput } from 'mui-color-input' +import { MuiColorInput } from 'mui-color-input'; import html2canvas from 'html2canvas'; -import {Buffer} from 'buffer'; +import { Buffer } from 'buffer'; const SetsView = () => { const theme = useTheme(); @@ -54,23 +54,23 @@ const SetsView = () => { const [infoOpen, setInfoOpen] = useState(false); const [successMessage, setSuccessMessage] = useState(''); const [errorMessage, setErrorMessage] = useState(''); - const [infoMessage, setInfoMessage] = useState('') - const [downloaded, setDownloaded] = useState(false) - const [enableDownload, setEnableDownload] = useState(false) - const [thumbnailModalOpen, setThumbnailModalOpen] = useState(false) - const [thumbnailColor, setThumbnailColor] = useState('#B9F3FC') - const [thumbnailLogo, setThumbnailLogo] = useState('') - const [downloadThumbnails, setDownloadThumbnails] = useState(true) + const [infoMessage, setInfoMessage] = useState(''); + const [downloaded, setDownloaded] = useState(false); + const [enableDownload, setEnableDownload] = useState(false); + const [thumbnailModalOpen, setThumbnailModalOpen] = useState(false); + const [thumbnailColor, setThumbnailColor] = useState('#B9F3FC'); + const [thumbnailLogo, setThumbnailLogo] = useState(''); + const [downloadThumbnails, setDownloadThumbnails] = useState(true); const inputFile = React.useRef(null); useEffect(() => { if (checked.length == location.state.sets.length + 1) { - setEnableDownload(false) + setEnableDownload(false); } else { - setEnableDownload(true) + setEnableDownload(true); } - }, [checked]) + }, [checked]); const handleSelectAll = () => { let newChecked = [...checked]; @@ -89,91 +89,127 @@ const SetsView = () => { setSelectAllChecked(!selectAllChecked); }; - const EditTimestampModal = (set: any, setIndex: number, open: boolean, setOpen: React.Dispatch>) => { - const [newStartTime, setNewStartTime] = useState(moment(set.startTime, 'HH:mm:ss')) - const [newEndTime, setNewEndTime] = useState(moment(set.endTime, 'HH:mm:ss')) - const [skipTime, setSkipTime] = useState(moment(set.startTime, 'HH:mm:ss')) - const [embedLink, setEmbedLink] = useState("") - const [newTitle, setNewTitle] = useState(set.title) - const [timeError, setTimeError] = useState(false) - const [randomKey, setRandomKey] = useState(Math.random()) + const EditTimestampModal = ( + set: any, + setIndex: number, + open: boolean, + setOpen: React.Dispatch> + ) => { + const [newStartTime, setNewStartTime] = useState( + moment(set.startTime, 'HH:mm:ss') + ); + const [newEndTime, setNewEndTime] = useState( + moment(set.endTime, 'HH:mm:ss') + ); + const [skipTime, setSkipTime] = useState(moment(set.startTime, 'HH:mm:ss')); + const [embedLink, setEmbedLink] = useState(''); + const [newTitle, setNewTitle] = useState(set.title); + const [timeError, setTimeError] = useState(false); + const [randomKey, setRandomKey] = useState(Math.random()); - let partUrl = location.state.vodUrl.split('/') - let twitchId = partUrl.pop() || partUrl.pop() + let partUrl = location.state.vodUrl.split('/'); + let twitchId = partUrl.pop() || partUrl.pop(); useEffect(() => { if (newEndTime.isBefore(newStartTime)) { - setTimeError(true) + setTimeError(true); } else { - setTimeError(false) + setTimeError(false); } - }) + }); useEffect(() => { - let split = skipTime.format('HH:mm:ss').split(':') + let split = skipTime.format('HH:mm:ss').split(':'); if (split.length === 3) { - let hours = split[0] - let minutes = split[1] - let seconds = split[2] - let twitchFormat = "" - if (hours !== "00") { - twitchFormat = twitchFormat.concat(hours.replace(/^0+/, ''), "h") + let hours = split[0]; + let minutes = split[1]; + let seconds = split[2]; + let twitchFormat = ''; + if (hours !== '00') { + twitchFormat = twitchFormat.concat(hours.replace(/^0+/, ''), 'h'); } - if (minutes !== "00") { - twitchFormat = twitchFormat.concat(minutes.replace(/^0+/, ''), "m") + if (minutes !== '00') { + twitchFormat = twitchFormat.concat(minutes.replace(/^0+/, ''), 'm'); } else { - twitchFormat = twitchFormat.concat("0m") + twitchFormat = twitchFormat.concat('0m'); } - if (seconds !== "00") { - twitchFormat = twitchFormat.concat(seconds.replace(/^0+/, ''), "s") + if (seconds !== '00') { + twitchFormat = twitchFormat.concat(seconds.replace(/^0+/, ''), 's'); } else { - twitchFormat = twitchFormat.concat("0s") + twitchFormat = twitchFormat.concat('0s'); } - setEmbedLink("https://player.twitch.tv/?video=" + twitchId + "&t=" + twitchFormat + "&parent=localhost&muted=true") + setEmbedLink( + 'https://player.twitch.tv/?video=' + + twitchId + + '&t=' + + twitchFormat + + '&parent=localhost&muted=true' + ); } - }) + }); return ( { - event.stopPropagation() - setOpen(false) + event.stopPropagation(); + setOpen(false); }} // onClick={(event: any) => event.stopPropagation()} > - - + + Edit Match {/* */} + > { - event.stopPropagation() - event.preventDefault() - setNewTitle(event.target.value) + event.stopPropagation(); + event.preventDefault(); + setNewTitle(event.target.value); }} - helperText={newTitle.length + "/100 | YouTube title character limit"} + helperText={ + newTitle.length + '/100 | YouTube title character limit' + } /> - + { - setNewStartTime(newValue) + setNewStartTime(newValue); }} renderInput={(params) => } inputFormat="HH:mm:ss" @@ -183,17 +219,29 @@ const SetsView = () => { className="timepicker" /> - newStartTime === skipTime ? setRandomKey(Math.random()) : setSkipTime(newStartTime)}> + + newStartTime === skipTime + ? setRandomKey(Math.random()) + : setSkipTime(newStartTime) + } + > - + { - setNewEndTime(newValue) + setNewEndTime(newValue); }} renderInput={(params) => } inputFormat="HH:mm:ss" @@ -203,13 +251,21 @@ const SetsView = () => { className="timepicker" /> - newEndTime === skipTime ? setRandomKey(Math.random()) : setSkipTime(newEndTime)}> + + newEndTime === skipTime + ? setRandomKey(Math.random()) + : setSkipTime(newEndTime) + } + > - + - ) - } + ); + }; const ThumbnailOptionsModal = () => { const ref: React.RefObject = React.createRef(); @@ -241,24 +299,53 @@ const SetsView = () => { if (event.target.files && event.target.files[0]) { setThumbnailLogo(URL.createObjectURL(event.target.files[0])); } - } + }; return ( { - event.stopPropagation() - setThumbnailModalOpen(false) + event.stopPropagation(); + setThumbnailModalOpen(false); }} > - - + + Thumbnail Options - setDownloadThumbnails(event.target.checked)} defaultChecked />} label="Download Thumbnails" /> + + setDownloadThumbnails(event.target.checked) + } + defaultChecked + /> + } + label="Download Thumbnails" + /> - setThumbnailColor(color)} /> + setThumbnailColor(color)} + /> - onImageChange(event)} ref={inputFile} style={{display: 'none'}}/> - - + onImageChange(event)} + ref={inputFile} + style={{ display: 'none' }} + /> + + - ) - } + ); + }; const generateThumbnail = (set: VODMetadata) => { - var thumbnail = document.getElementById(set.title) - html2canvas(thumbnail!) - .then((canvas) => { - const img = canvas.toDataURL('image/png') - const base64Data = img.replace(/^data:image\/png;base64,/, ""); - const buf = Buffer.from(base64Data, "base64"); + var thumbnail = document.getElementById(set.title); + html2canvas(thumbnail!).then((canvas) => { + const img = canvas.toDataURL('image/png'); + const base64Data = img.replace(/^data:image\/png;base64,/, ''); + const buf = Buffer.from(base64Data, 'base64'); window.electron.ipcRenderer.saveThumbnail({ folderName: set.tournamentName, fileName: set.title, - buf: buf - }) - }) - } + buf: buf, + }); + }); + }; const handleToggle = (set: any) => { const currentIndex = checked.indexOf(set); @@ -305,7 +406,6 @@ const SetsView = () => { setChecked(newChecked); }; - return ( { Select Sets to Download {ThumbnailOptionsModal()} - + @@ -469,8 +597,18 @@ const SetsView = () => { Continue to Upload - - + + {location.state.sets.map((set: VODMetadata) => { const ref: React.RefObject = React.createRef(); return ( @@ -486,7 +624,7 @@ const SetsView = () => { bottomText={set.tournamentName} title={set.title} /> - ) + ); })} diff --git a/src/renderer/pages/YTUploadView.tsx b/src/renderer/pages/YTUploadView.tsx index 9291424..f77407e 100644 --- a/src/renderer/pages/YTUploadView.tsx +++ b/src/renderer/pages/YTUploadView.tsx @@ -16,7 +16,7 @@ import SnackbarPopup from 'renderer/common/SnackbarPopup'; import FolderOpenIcon from '@mui/icons-material/FolderOpen'; const YTUploadView = () => { - const [description, setDescription] = useState("") + const [description, setDescription] = useState(''); const [tounamentFolders, setTournamentFolders] = useState([]); const [selectedFolder, setSelectedFolder] = useState(''); const [visibility, setVisibility] = useState('unlisted'); @@ -27,8 +27,8 @@ const YTUploadView = () => { const [infoOpen, setInfoOpen] = useState(false); const [successMessage, setSuccessMessage] = useState(''); const [errorMessage, setErrorMessage] = useState(''); - const [infoMessage, setInfoMessage] = useState('') - const [accessToken, setAccessToken] = useState('') + const [infoMessage, setInfoMessage] = useState(''); + const [accessToken, setAccessToken] = useState(''); const path = './downloadedVODs'; useEffect(() => { @@ -39,7 +39,7 @@ const YTUploadView = () => { }, []); useEffect(() => { - if (selectedFolder != '' || !loggedIn) { + if (selectedFolder != '' && loggedIn) { setButtonDisabled(false); } else { setButtonDisabled(true); @@ -47,20 +47,26 @@ const YTUploadView = () => { }); const login = () => { - window.electron.ipcRenderer.openGoogleLogin("hello").then((token) => { - setAccessToken(token.access_token) - }).then(() => { - setSuccessMessage('Login successful!'); - setSuccessOpen(true); - setLoggedIn(true); - }).catch((err) => { - setErrorMessage('Error logging in: ' + err); - setErrorOpen(true); - }) - } + window.electron.ipcRenderer + .openGoogleLogin('hello') + .then((token) => { + setAccessToken(token.access_token); + }) + .then(() => { + setSuccessMessage('Login successful!'); + setSuccessOpen(true); + setLoggedIn(true); + }) + .catch((err) => { + setErrorMessage('Error logging in: ' + err); + setErrorOpen(true); + }); + }; const uploadVideos = () => { - setInfoMessage('Your videos are being uploaded! Check your YouTube account for progress updates.'); + setInfoMessage( + 'Your videos are being uploaded! Check your YouTube account for progress updates.' + ); setInfoOpen(true); const params = { path: './downloadedVODs/' + selectedFolder + '/', @@ -69,14 +75,17 @@ const YTUploadView = () => { accessToken: accessToken, visibility: visibility, }; - window.electron.ipcRenderer.uploadVideos(params).then((response) => { - console.log(response); - setSuccessMessage('Upload successful!'); - setSuccessOpen(true); - }).catch((err) => { - setErrorMessage('Error uploading: ' + err); - setErrorOpen(true); - }) + window.electron.ipcRenderer + .uploadVideos(params) + .then((response) => { + console.log(response); + setSuccessMessage('Upload successful!'); + setSuccessOpen(true); + }) + .catch((err) => { + setErrorMessage('Error uploading: ' + err); + setErrorOpen(true); + }); }; return ( @@ -98,12 +107,20 @@ const YTUploadView = () => { > Login - + setSelectedFolder(event.target.value as string)} + onChange={(event) => + setSelectedFolder(event.target.value as string) + } label="VOD Folder" variant="filled" sx={{ width: '75%' }} @@ -122,7 +139,9 @@ const YTUploadView = () => { variant="contained" color="secondary" sx={{ width: '10%', color: 'white' }} - onClick={() => window.electron.ipcRenderer.openFolder(selectedFolder)} + onClick={() => + window.electron.ipcRenderer.openFolder(selectedFolder) + } > @@ -143,9 +162,21 @@ const YTUploadView = () => { value={visibility} onChange={(event) => setVisibility(event.target.value)} > - } label="Unlisted" /> - } label="Public" /> - } label="Private" /> + } + label="Unlisted" + /> + } + label="Public" + /> + } + label="Private" + />