From 9e248bbe16638e319a90139a63d5f4d188d022fc Mon Sep 17 00:00:00 2001 From: Austin Woodard Date: Mon, 8 Apr 2024 16:35:10 -0400 Subject: [PATCH 1/7] Remove button to load fine tuning frames --- src/pages/V2FramePage.js | 114 ++++++++++++++++++--------------------- 1 file changed, 51 insertions(+), 63 deletions(-) diff --git a/src/pages/V2FramePage.js b/src/pages/V2FramePage.js index ffbe6714..f95af542 100644 --- a/src/pages/V2FramePage.js +++ b/src/pages/V2FramePage.js @@ -85,7 +85,7 @@ export default function FramePage({ shows = [] }) { const [fontSizeScaleFactor, setFontSizeScaleFactor] = useState(1); const [fontLineHeightScaleFactor, setFontLineHeightScaleFactor] = useState(1); const [fontBottomMarginScaleFactor, setFontBottomMarginScaleFactor] = useState(1); - const [enableFineTuningFrames, setEnableFineTuningFrames] = useState(false); + const [enableFineTuningFrames, setEnableFineTuningFrames] = useState(true); const throttleTimeoutRef = useRef(null); @@ -390,7 +390,7 @@ export default function FramePage({ shows = [] }) { // Call the loading functions loadInitialFrameInfo().then(() => { - // loadFineTuningFrames(); // Load fine-tuning frames + loadFineTuningFrames(); // Load fine-tuning frames loadSurroundingSubtitles(); // Load surrounding subtitles loadSurroundingFrames(); // Load surrounding frames }); @@ -404,17 +404,17 @@ export default function FramePage({ shows = [] }) { const fineTuningImageUrls = await fetchFramesFineTuning(confirmedCid, season, episode, frame); // Preload the images and convert them to blob URLs - const fineTuningFrames = await Promise.all( - fineTuningImageUrls.map(async (url) => { - const response = await fetch(url); - const blob = await response.blob(); - return URL.createObjectURL(blob); - }) - ); - - setFineTuningFrames(fineTuningFrames); - setFrames(fineTuningFrames); - console.log("Fine Tuning Frames: ", fineTuningFrames); + // const fineTuningFrames = await Promise.all( + // fineTuningImageUrls.map(async (url) => { + // const response = await fetch(url); + // const blob = await response.blob(); + // return URL.createObjectURL(blob); + // }) + // ); + + setFineTuningFrames(fineTuningImageUrls); + setFrames(fineTuningImageUrls); + console.log("Fine Tuning Frames: ", fineTuningImageUrls); } catch (error) { console.error("Failed to fetch fine tuning frames:", error); } @@ -536,59 +536,47 @@ export default function FramePage({ shows = [] }) { - {enableFineTuningFrames ? - <> - {frames && frames?.length > 0 ? - - - - - - - handleSliderChange(newValue)} - valueLabelFormat={(value) => `Fine Tuning: ${((value - 4) / 10).toFixed(1)}s`} - marks - /> - - : - - - - Loading fine tuning frames... - - - } - + + {frames && frames?.length > 0 ? + + + + + + + handleSliderChange(newValue)} + valueLabelFormat={(value) => `Fine Tuning: ${((value - 4) / 10).toFixed(1)}s`} + marks + /> + : - <> -
- -
- + + + + + + + + } - + ); }; From 3dee473cbac6e50cd1b48056dd46aeac84bf157c Mon Sep 17 00:00:00 2001 From: Austin Woodard Date: Mon, 8 Apr 2024 17:03:04 -0400 Subject: [PATCH 2/7] Change frame page components to look more like v1 --- src/pages/V2FramePage.js | 244 +++++++++++++++++++++++++++++---------- 1 file changed, 180 insertions(+), 64 deletions(-) diff --git a/src/pages/V2FramePage.js b/src/pages/V2FramePage.js index f95af542..b7dad128 100644 --- a/src/pages/V2FramePage.js +++ b/src/pages/V2FramePage.js @@ -38,6 +38,8 @@ import { TextField, Snackbar, Alert, + FormControl, + FormLabel } from '@mui/material'; import { Add, ArrowBack, ArrowBackIos, ArrowForward, ArrowForwardIos, BrowseGallery, Close, ContentCopy, Edit, FormatLineSpacing, FormatSize, GpsFixed, GpsNotFixed, HistoryToggleOffRounded, Home, Menu, OpenInBrowser, OpenInNew, VerticalAlignBottom, VerticalAlignTop, Visibility, VisibilityOff } from '@mui/icons-material'; import useSearchDetails from '../hooks/useSearchDetails'; @@ -554,6 +556,29 @@ export default function FramePage({ shows = [] }) { onChange={(e, newValue) => handleSliderChange(newValue)} valueLabelFormat={(value) => `Fine Tuning: ${((value - 4) / 10).toFixed(1)}s`} marks + componentsProps={{ + track: { + style: { + ...(isSm && { pointerEvents: 'none' }), + backgroundColor: 'white', // Change the background color to white + height: 6, // Increase the height of the slider + } + }, + rail: { + style: { + backgroundColor: 'white', // Change the background color to white + height: 6, // Increase the height of the slider + } + }, + thumb: { + style: { + ...(isSm && { pointerEvents: 'auto' }), + backgroundColor: '#2079fe', // Change the color of the slider thumb to blue + width: 20, // Increase the width of the slider thumb + height: 20, // Increase the height of the slider thumb + } + } + }} /> : @@ -572,6 +597,34 @@ export default function FramePage({ shows = [] }) { step={1} disabled marks + componentsProps={{ + root: { + style: { + ...(isSm && { pointerEvents: 'none' }), + } + }, + track: { + style: { + ...(isSm && { pointerEvents: 'none' }), + backgroundColor: 'white', // Change the background color to white + height: 6, // Increase the height of the slider + } + }, + rail: { + style: { + backgroundColor: 'white', // Change the background color to white + height: 6, // Increase the height of the slider + } + }, + thumb: { + style: { + ...(isSm && { pointerEvents: 'auto' }), + backgroundColor: '#2079fe', // Change the color of the slider thumb to blue + width: 20, // Increase the width of the slider thumb + height: 20, // Increase the height of the slider thumb + } + } + }} /> } @@ -651,59 +704,80 @@ export default function FramePage({ shows = [] }) { {showTitle} */} {loading ? - + : <> - - {showText ? - - { setShowText(!showText) }}> - - - setLoadedSubtitle(e.target.value)} - /> - - : - - setShowText(!showText)} sx={{ cursor: 'pointer' }}> - - - { setShowText(!showText) }} - > - {loadedSubtitle || '(no subtitle)'} - - - } + + + { + setShowText(true) + }} + onChange={(e) => setLoadedSubtitle(e.target.value)} + sx={{ + '& .MuiOutlinedInput-root': { + backgroundColor: 'white', + color: 'black', + '& fieldset': { + borderColor: 'rgba(0, 0, 0, 0.23)', + }, + '&:hover fieldset': { + borderColor: 'rgba(0, 0, 0, 0.87)', + }, + '&.Mui-focused fieldset': { + borderColor: 'primary.main', + }, + }, + '& .MuiInputBase-input': { + color: 'black', + }, + '& .MuiFormLabel-root': { + color: 'text.secondary', + }, + }} + /> + - {showText && - - + + Bottom Margin + + {/* - + */} { + setShowText(true) + }} /> - } - {showText && - - + + + Font Size + + {/* - + */} { @@ -762,49 +856,71 @@ export default function FramePage({ shows = [] }) { marks valueLabelFormat='Font Size' valueLabelDisplay + onMouseDown={() => { + setShowText(true) + }} /> - } - {showText && - - + + + Line Height + + {/* - + */} { if (e.type === 'mousedown') { return; } - // Divide by scale factor to get the actual value to set setFontLineHeightScaleFactor(newValue); }} onChangeCommitted={() => updateCanvas()} valueLabelFormat='Line Height' valueLabelDisplay + onMouseDown={() => { + setShowText(true) + }} marks /> - } + } @@ -833,7 +949,7 @@ export default function FramePage({ shows = [] }) { )} */} - + */} + {parseInt(frame, 10) > firstFrame && ( + + )} + {parseInt(frame, 10) < lastFrame && ( + + )} ); From 6640bff6a5b1bf680aa99e2ec23066c254f23f73 Mon Sep 17 00:00:00 2001 From: Austin Woodard Date: Mon, 8 Apr 2024 19:48:13 -0400 Subject: [PATCH 7/7] Preload fine tuning frames in the background --- src/pages/V2FramePage.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/pages/V2FramePage.js b/src/pages/V2FramePage.js index b7dad128..03622109 100644 --- a/src/pages/V2FramePage.js +++ b/src/pages/V2FramePage.js @@ -405,14 +405,11 @@ export default function FramePage({ shows = [] }) { // Since fetchFramesFineTuning now expects an array, calculate the array of indexes for fine-tuning const fineTuningImageUrls = await fetchFramesFineTuning(confirmedCid, season, episode, frame); - // Preload the images and convert them to blob URLs - // const fineTuningFrames = await Promise.all( - // fineTuningImageUrls.map(async (url) => { - // const response = await fetch(url); - // const blob = await response.blob(); - // return URL.createObjectURL(blob); - // }) - // ); + // Preload the images + fineTuningImageUrls.forEach((url) => { + const img = new Image(); + img.src = url; + }); setFineTuningFrames(fineTuningImageUrls); setFrames(fineTuningImageUrls);