From 482656f5281bf3c345ea77118bd952e2d2b48e01 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 7 Nov 2023 11:53:51 +0100 Subject: [PATCH 1/3] Thumbnails: Make video boxes same size as thumbnail boxes Currently in the thumbnail view, the videos are the same size as the thumbnails. However, the outlines surrounding them are different, as the outline around the thumbnails also contains buttons. This enlarges the videos to make the outlines have the same width. --- src/main/Thumbnail.tsx | 3 ++- src/main/VideoPlayers.tsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx index 9f970a2d2..77e4bf13c 100644 --- a/src/main/Thumbnail.tsx +++ b/src/main/Thumbnail.tsx @@ -106,7 +106,8 @@ const Thumbnail : React.FC = () => { discard={discardThumbnail} />
- + {/* use maxHeightInPixel to make video players the same size*/} +
= ({refs, widthInPercent = 100}) => { +const VideoPlayers: React.FC<{refs: any, widthInPercent?: number, maxHeightInPixel?: number}> = ({refs, widthInPercent = 100, maxHeightInPixel = 300}) => { const videoURLs = useSelector(selectVideoURL) const videoCount = useSelector(selectVideoCount) @@ -37,7 +37,7 @@ const VideoPlayers: React.FC<{refs: any, widthInPercent?: number}> = ({refs, wid borderRadius: '5px', ...(flexGapReplacementStyle(10, false)), - maxHeight: '300px', + maxHeight: maxHeightInPixel + 'px', }); // Initialize video players From a3d7880c457522e304c102a14ffb2aaae632adbe Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 7 Nov 2023 12:01:09 +0100 Subject: [PATCH 2/3] Thumbnail: Allow timeline to stretch fully The timeline in the thumbnail view did not stretch to the full width of the available screenspace in some cases (e.g. when there is only one video). This fixes that. --- src/main/Thumbnail.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx index 77e4bf13c..5dbc44ca9 100644 --- a/src/main/Thumbnail.tsx +++ b/src/main/Thumbnail.tsx @@ -91,6 +91,7 @@ const Thumbnail : React.FC = () => { const bottomStyle = css({ display: 'flex', + width: '100%', flexDirection: 'column', alignItems: 'center', }) From f020dbd66da5aef1a874f935c17375324407f7cd Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 8 Nov 2023 09:26:53 +0100 Subject: [PATCH 3/3] Second attempt at making thumbnail boxes same size as video boxes Now actually gets the width from the video boxes. Still uses magic numbers a bit though. --- src/main/Thumbnail.tsx | 22 ++++++++++++++++------ src/main/VideoPlayers.tsx | 3 +++ 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx index 5dbc44ca9..fafbe05fa 100644 --- a/src/main/Thumbnail.tsx +++ b/src/main/Thumbnail.tsx @@ -101,6 +101,7 @@ const Thumbnail : React.FC = () => {
{t('thumbnail.title')}
{ />
{/* use maxHeightInPixel to make video players the same size*/} - +
{ */ const ThumbnailTable : React.FC<{ inputRefs: any, + generateRefs: React.MutableRefObject, generate: any, upload: any, uploadCallback: any, discard: any, -}> = ({inputRefs, generate, upload, uploadCallback, discard}) => { +}> = ({inputRefs, generateRefs, generate, upload, uploadCallback, discard}) => { const videoTracks = useSelector(selectVideos) const thumbnailTableStyle = css({ display: 'flex', + width: '100%', flexDirection: 'row', justifyContent: 'center', ...(flexGapReplacementStyle(10, false)), @@ -184,6 +187,7 @@ const ThumbnailTable : React.FC<{ track={track} index={index} inputRefs={inputRefs} + generateRef={generateRefs.current[index]} generate={generate} upload={upload} uploadCallback={uploadCallback} @@ -209,15 +213,19 @@ const ThumbnailTableRow: React.FC<{ track: Track, index: number, inputRefs: any, + generateRef: any, generate: any, upload: any, uploadCallback: any, discard: any, -}> = ({track, index, inputRefs, generate, upload, uploadCallback, discard}) => { +}> = ({track, index, inputRefs, generateRef, generate, upload, uploadCallback, discard}) => { const { t } = useTranslation() const theme = useTheme(); + // The "+40" comes from padding that is not included in the "getWidth" function + const videoWidth = generateRef ? generateRef.getWidth() + 40 : undefined + const renderPriority = (thumbnailPriority: number) => { if (isNaN(thumbnailPriority)) { return "" @@ -233,7 +241,7 @@ const ThumbnailTableRow: React.FC<{ } return ( -
+
{track.flavor.type + renderPriority(track.thumbnailPriority)}
@@ -499,7 +507,7 @@ const ThumbnailTableSingleRow: React.FC<{ const theme = useTheme(); return ( -
+
{t("thumbnailSimple.rowTitle")}
@@ -582,9 +590,11 @@ const ThumbnailButtonsSimple : React.FC<{ /** * CSS shared between multi and simple display mode */ -const thumbnailTableRowStyle = css({ +const thumbnailTableRowStyle = (maxWidth: number) => css({ display: 'flex', flexDirection: 'column', + width: '100%', + maxWidth: `${maxWidth}px`, }) const thumbnailTableRowTitleStyle = css({ diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx index f351c0f00..1375f67b9 100644 --- a/src/main/VideoPlayers.tsx +++ b/src/main/VideoPlayers.tsx @@ -325,6 +325,9 @@ export const VideoPlayer = React.forwardRef( canvasContext.drawImage(video, 0, 0); return canvas.toDataURL('image/png') } + }, + getWidth() { + return (ref.current?.getInternalPlayer() as HTMLVideoElement).clientWidth } }));