From 62c3fe6b3cdaae0ce9fcebf796d80c13237e30e5 Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Mon, 17 Jun 2024 14:48:43 -0600
Subject: [PATCH] Compressing video about segment.  Moving about segment above
 comments.

---
 app/src/components/VideoPlayer.js | 46 ++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/app/src/components/VideoPlayer.js b/app/src/components/VideoPlayer.js
index ecb6473f..78a601de 100644
--- a/app/src/components/VideoPlayer.js
+++ b/app/src/components/VideoPlayer.js
@@ -278,20 +278,35 @@ function VideoPage({videoFile, prevFile, nextFile, fetchVideo, ...props}) {
 
     const aboutSegment = <Segment>
         <Header as='h2'>About Video</Header>
-        <h3>Size</h3>
-        <p>{videoFile.size ? humanFileSize(videoFile.size) : 'Unknown'}</p>
 
-        <h3>Source URL</h3>
-        <p>{videoFile.url ? <a href={videoFile.url}>{videoFile.url}</a> : 'N/A'}</p>
-
-        <h3>View Count</h3>
-        <p>{video.view_count ? humanNumber(video.view_count) : 'N/A'}</p>
-
-        <h3>Censored</h3>
-        <p>{video.censored ? 'Yes' : 'No'}</p>
-
-        <h3>Codec Names</h3>
-        <>{video.codec_names ? video.codec_names.map(i => <Label key={i}>{i}</Label>) : 'N/A'}</>
+        <Grid columns={2}>
+            <Grid.Row>
+                <Grid.Column>
+                    <h3>Size</h3>
+                    <p>{videoFile.size ? humanFileSize(videoFile.size) : 'Unknown'}</p>
+                </Grid.Column>
+                <Grid.Column>
+                    <h3>View Count</h3>
+                    <p>{video.view_count ? humanNumber(video.view_count) : 'N/A'}</p>
+                </Grid.Column>
+            </Grid.Row>
+            <Grid.Row>
+                <Grid.Column>
+                    <h3>Codec Names</h3>
+                    <>{video.codec_names ? video.codec_names.map(i => <Label key={i}>{i}</Label>) : 'N/A'}</>
+                </Grid.Column>
+                <Grid.Column>
+                    <h3>Censored</h3>
+                    <p>{video.censored ? 'Yes' : 'No'}</p>
+                </Grid.Column>
+            </Grid.Row>
+            <Grid.Row columns={1}>
+                <Grid.Column>
+                    <h3>Source URL</h3>
+                    <p>{videoFile.url ? <a href={videoFile.url}>{videoFile.url}</a> : 'N/A'}</p>
+                </Grid.Column>
+            </Grid.Row>
+        </Grid>
     </Segment>;
 
     const localAddTag = async (name) => {
@@ -377,17 +392,16 @@ function VideoPage({videoFile, prevFile, nextFile, fetchVideo, ...props}) {
                         disabled={!videoFile.url}
                     >Refresh</APIButton>
                 </p>
-                <br/>
             </Segment>
 
             <Segment>
                 <TagsSelector selectedTagNames={videoFile['tags']} onAdd={localAddTag} onRemove={localRemoveTag}/>
             </Segment>
 
-            <Tab menu={tabMenu} panes={tabPanes}/>
-
             {aboutSegment}
 
+            <Tab menu={tabMenu} panes={tabPanes}/>
+
             {prevNextVideosSegment}
         </Container>
     </>