styling stuff

aza547 · Apr 12, 2023 · 3531836 · 3531836
1 parent 0263137
commit 3531836
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 101 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 ### Changed
 - [Issue 370](https://github.com/aza547/wow-recorder/issues/370) - Show more than the most recent video on home page.
+- [Issue 371](https://github.com/aza547/wow-recorder/issues/371) - Include Battleground names in the UI.
+- [Issue 352](https://github.com/aza547/wow-recorder/issues/352) - Change the home page to be less fancy and more functional.
+
 ### Fixed
 
 ## [3.10.1] - 2023-04-11

diff --git a/src/renderer/BattlegroundInfo.tsx b/src/renderer/BattlegroundInfo.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { Typography } from '@mui/material';
+import { RendererVideo } from 'main/types';
+
+interface IProps {
+  video: RendererVideo;
+}
+
+const BattlegroundInfo: React.FC<IProps> = (props: IProps) => {
+  const { video } = props;
+  const { zoneName } = video;
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        flexDirection: 'column',
+        backgroundColor: 'transparent',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Typography
+        sx={{
+          color: 'white',
+          fontFamily: '"Arial",sans-serif',
+          fontWeight: 700,
+          fontSize: '1.5rem',
+          textShadow:
+            '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
+        }}
+      >
+        {zoneName}
+      </Typography>
+    </Box>
+  );
+};
+
+export default BattlegroundInfo;
diff --git a/src/renderer/HomePage.tsx b/src/renderer/HomePage.tsx
@@ -9,12 +9,7 @@ import {
 import { VideoCategory } from 'types/VideoCategory';
 import React from 'react';
 import { RendererVideo, RendererVideoState, TNavigatorState } from 'main/types';
-import {
-  getLatestCategory,
-  getNumVideos,
-  getRecentVideos,
-} from './rendererutils';
-import { VideoJS } from './VideoJS';
+import { getNumVideos, getRecentVideos } from './rendererutils';
 import VideoButton from './VideoButton';
 
 interface IProps {
@@ -26,7 +21,6 @@ const categories = Object.values(VideoCategory);
 
 const HomePage: React.FC<IProps> = (props: IProps) => {
   const { videoState, setNavigation } = props;
-  const latestCategory = getLatestCategory(videoState);
   const numVideos = getNumVideos(videoState);
   const haveVideos = numVideos > 0;
   const recentVideos = getRecentVideos(videoState);
@@ -48,83 +42,26 @@ const HomePage: React.FC<IProps> = (props: IProps) => {
     });
   };
 
-  const getLatestVideoPanel = () => {
-    const video = videoState[latestCategory][0];
-    const videoFullPath = video.fullPath;
-    return <VideoJS id="video-player" key={videoFullPath} video={video} />;
-  };
-
   const renderRecentVideoList = () => {
     return (
-      <Box
-        sx={{
-          m: 2,
-          width: '75%',
-          height: '300px',
-          overflowY: 'scroll',
-          scrollbarWidth: 'thin',
-          '&::-webkit-scrollbar': {
-            width: '1em',
-          },
-          '&::-webkit-scrollbar-track': {
-            background: '#f1f1f1',
-          },
-          '&::-webkit-scrollbar-thumb': {
-            backgroundColor: '#888',
-          },
-          '&::-webkit-scrollbar-thumb:hover': {
-            background: '#555',
-          },
-        }}
-      >
-        <List sx={{ width: '100%', p: 0 }}>
-          {recentVideos.map((video) => {
-            return (
-              <ListItem
-                disablePadding
-                key={video.fullPath}
+      <List sx={{ width: '100%' }}>
+        {recentVideos.map((video) => {
+          return (
+            <ListItem
+              disablePadding
+              key={video.fullPath}
+              sx={{ width: '100%' }}
+            >
+              <ListItemButton
+                onClick={() => handleSelectVideo(video)}
                 sx={{ width: '100%' }}
               >
-                <ListItemButton
-                  onClick={() => handleSelectVideo(video)}
-                  sx={{ width: '100%', pt: '2px', pb: '2px' }}
-                >
-                  <VideoButton key={video.fullPath} video={video} />
-                </ListItemButton>
-              </ListItem>
-            );
-          })}
-        </List>
-      </Box>
-    );
-  };
-
-  const renderLatestVideo = () => {
-    return (
-      <Box
-        sx={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-        }}
-      >
-        <Box
-          sx={{
-            height: '100%',
-            width: '75%',
-            mt: 1,
-            border: '1px solid black',
-            borderRadius: '0%',
-            boxShadow: '-3px -3px 5px 5px black',
-          }}
-        >
-          {getLatestVideoPanel()}
-        </Box>
-        {renderRecentVideoList()}
-      </Box>
+                <VideoButton key={video.fullPath} video={video} />
+              </ListItemButton>
+            </ListItem>
+          );
+        })}
+      </List>
     );
   };
 
@@ -175,34 +112,25 @@ const HomePage: React.FC<IProps> = (props: IProps) => {
   };
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContet: 'center',
-        flexDirection: 'column',
-        width: '100%',
-        height: '100%',
-      }}
-    >
+    <>
       <Typography
         variant="h6"
         align="center"
         sx={{
           color: 'white',
           fontFamily: '"Arial",sans-serif',
-          m: 1,
+          mt: 1,
           textShadow:
             '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
         }}
       >
-        You have {numVideos} videos saved, view the most recent below or select
-        a category.
+        You have {numVideos} videos saved, select from the most recent below or
+        choose a category.
       </Typography>
 
-      {haveVideos && renderLatestVideo()}
+      {haveVideos && renderRecentVideoList()}
       {!haveVideos && renderFirstTimeUserPrompt()}
-    </Box>
+    </>
   );
 };
 

diff --git a/src/renderer/Layout.tsx b/src/renderer/Layout.tsx
@@ -108,12 +108,23 @@ const Layout: React.FC<IProps> = (props: IProps) => {
       <Box
         sx={{
           display: 'flex',
-          flexGrow: 1,
-          alignItems: 'center',
-          justifyContet: 'center',
           flexDirection: 'column',
-          width: '100%',
+          overflowY: 'scroll',
           height: '100%',
+          width: '100%',
+          scrollbarWidth: 'thin',
+          '&::-webkit-scrollbar': {
+            width: '1em',
+          },
+          '&::-webkit-scrollbar-track': {
+            background: '#f1f1f1',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#888',
+          },
+          '&::-webkit-scrollbar-thumb:hover': {
+            background: '#555',
+          },
         }}
       >
         <HomePage videoState={videoState} setNavigation={setNavigation} />

diff --git a/src/renderer/VideoButton.tsx b/src/renderer/VideoButton.tsx
@@ -123,7 +123,7 @@ export default function VideoButton(props: IProps) {
                 color: 'white',
                 fontWeight: '600',
                 fontFamily: '"Arial",sans-serif',
-                fontSize: '2rem',
+                fontSize: '1rem',
                 textShadow:
                   '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
               }}
@@ -183,7 +183,7 @@ export default function VideoButton(props: IProps) {
                 color: 'white',
                 fontWeight: '600',
                 fontFamily: '"Arial",sans-serif',
-                fontSize: '2rem',
+                fontSize: '1rem',
                 textShadow:
                   '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000',
               }}