Merge pull request #1210 from Arnei/thumbnail-make-boxes-same-size

Thumbnail make boxes same size
opencast · Jan 18, 2024 · 4ab76ea · 4ab76ea
2 parents ce6e642 + f020dbd
commit 4ab76ea
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git 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',
   })
@@ -100,13 +101,15 @@ const Thumbnail : React.FC = () => {
       <div css={[titleStyle(theme), titleStyleBold(theme)]}>{t('thumbnail.title')}</div>
       <ThumbnailTable
         inputRefs={inputRefs}
+        generateRefs={generateRefs}
         generate={generate}
         upload={upload}
         uploadCallback={uploadCallback}
         discard={discardThumbnail}
       />
       <div css={bottomStyle}>
-        <VideoPlayers refs={generateRefs} widthInPercent={100}/>
+        {/* use maxHeightInPixel to make video players the same size*/}
+        <VideoPlayers refs={generateRefs} widthInPercent={100} maxHeightInPixel={420}/>
         <div css={videosStyle(theme)}>
           <Timeline
             timelineHeight={125}
@@ -139,16 +142,18 @@ const Thumbnail : React.FC = () => {
  */
 const ThumbnailTable : React.FC<{
   inputRefs: any,
+  generateRefs: React.MutableRefObject<any>,
   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 +189,7 @@ const ThumbnailTable : React.FC<{
               track={track}
               index={index}
               inputRefs={inputRefs}
+              generateRef={generateRefs.current[index]}
               generate={generate}
               upload={upload}
               uploadCallback={uploadCallback}
@@ -209,15 +215,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 +243,7 @@ const ThumbnailTableRow: React.FC<{
   }
 
   return (
-    <div key={index} css={[backgroundBoxStyle(theme), thumbnailTableRowStyle]}>
+    <div key={index} css={[backgroundBoxStyle(theme), thumbnailTableRowStyle(videoWidth)]}>
       <div css={thumbnailTableRowTitleStyle}>
         {track.flavor.type + renderPriority(track.thumbnailPriority)}
       </div>
@@ -503,7 +513,7 @@ const ThumbnailTableSingleRow: React.FC<{
   const theme = useTheme();
 
   return (
-    <div key={index} css={[backgroundBoxStyle(theme), thumbnailTableRowStyle]}>
+    <div key={index} css={[backgroundBoxStyle(theme), thumbnailTableRowStyle(500)]}>
       <div css={thumbnailTableRowTitleStyle}>
         {t("thumbnailSimple.rowTitle")}
       </div>
@@ -586,9 +596,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
@@ -24,7 +24,7 @@ import { useTheme } from "../themes";
 
 import { backgroundBoxStyle, flexGapReplacementStyle } from '../cssStyles'
 
-const VideoPlayers: React.FC<{refs: any, widthInPercent?: number}> = ({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
@@ -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
       }
     }));