added badge and some styling to player

Seneca-CDOT · Oct 8, 2020 · b2f650c · b2f650c
1 parent b037ca8
commit b2f650c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 11 deletions.
diff --git a/src/frontend/src/components/Header/DesktopHeader.jsx b/src/frontend/src/components/Header/DesktopHeader.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'gatsby';
 import { makeStyles } from '@material-ui/core/styles';
-import { AppBar, Toolbar, Button, IconButton } from '@material-ui/core';
+import { AppBar, Toolbar, Badge, Button, IconButton } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 
 import LogoIcon from '../LogoIcon';
@@ -61,7 +61,9 @@ export default function DesktopHeader() {
             </Button>
             <Button color="inherit" size="medium" className={classes.button}>
               <Link to="/player" className={classes.links}>
-                Player
+                <Badge badgeContent={'BETA'} color="error">
+                  Player
+                </Badge>
               </Link>
             </Button>
             <Button color="inherit" size="medium" className={classes.button}>

diff --git a/src/frontend/src/components/Header/MobileHeader.jsx b/src/frontend/src/components/Header/MobileHeader.jsx
@@ -1,7 +1,16 @@
 import React from 'react';
 import { Link } from 'gatsby';
 import { makeStyles } from '@material-ui/core/styles';
-import { AppBar, Toolbar, IconButton, List, ListItem, Drawer, Divider } from '@material-ui/core';
+import {
+  AppBar,
+  Badge,
+  Drawer,
+  Divider,
+  IconButton,
+  List,
+  ListItem,
+  Toolbar,
+} from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
 
@@ -93,7 +102,9 @@ export default function MobileHeader() {
         </ListItem>
         <Divider className={classes.line} />
         <ListItem button component={Link} to="/player" className={classes.item}>
-          PLAYER
+          <Badge badgeContent={'BETA'} color="error">
+            PLAYER
+          </Badge>
         </ListItem>
         <Divider className={classes.line} />
         <ListItem button component={Link} to="/about" className={classes.item}>

diff --git a/src/frontend/src/components/PlayerPage/PlayerPage.jsx b/src/frontend/src/components/PlayerPage/PlayerPage.jsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import ReactPlayer from 'react-player';
 import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Grid from '@material-ui/core/Grid';
+import { Container, Grid, Paper } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -13,6 +12,15 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
+  playerContainer: {
+    position: 'relative',
+    height: '480px',
+  },
+  player: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
 }));
 
 export default function PlayerPage() {
@@ -21,12 +29,17 @@ export default function PlayerPage() {
   return (
     <div className={classes.root}>
       <Grid container spacing={3}>
-        <Grid item xs={12} sm={8}>
-          <Paper className={classes.paper}>
-            <ReactPlayer url="https://www.youtube.com/watch?v=Izw_WtJb7Uo" />
-          </Paper>
+        <Grid item xs={12} md={8}>
+          <Container className={classes.playerContainer} maxWidth="md">
+            <ReactPlayer
+              className={classes.player}
+              url="https://www.youtube.com/watch?v=Izw_WtJb7Uo"
+              width="100%"
+              height="100%"
+            />
+          </Container>
         </Grid>
-        <Grid item xs={12} sm={4}>
+        <Grid item xs={12} md={4}>
           <Paper className={classes.paper}>xs=12 sm=6</Paper>
         </Grid>
       </Grid>