Merge pull request #25 from templerobotics/fixing-video

Fixed video and copyright

Author: ryanhodge240

src/App.tsx

@@ -4,6 +4,8 @@ import React, { useEffect } from 'react'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
+import { isMobile } from 'react-device-detect'
+import styled from 'styled-components'
 
 // Styles
 import 'bootstrap/dist/css/bootstrap.min.css'
@@ -19,44 +21,71 @@ import Copyright from './pages/general/copyright/Copyright'
 import Rocksat from './pages/rocksat/Rocksat'
 import Ballooning from './pages/ballooning/Ballooning'
 import NoMatch404 from './pages/general/NoMatch404'
+import spaceBackground from './assets/pics/outreach/space-background.jpeg'
 
 // Images
 import backgroundVideo1 from './assets/vids/nasa-vid-1.webm'
 import { PATHS } from './tools/Constants'
 
+class Styles {
+	static readonly AppContainer = styled.div<{height: number}>`
+		min-height: ${props => props.height + 'px'};
+	`
+
+	static readonly Content = styled.div<{height: number}>`
+		min-height: ${props => props.height + 'px'};
+		display: grid;
+	`
+}
+
 const App = (): React.ReactElement => {
 	// Used for Sign-Ups
 	useEffect(() => { getEventToasts() })
+	const height = window.innerHeight
+
+	const getBackground = (): React.ReactElement => {
+		if (isMobile) {
+			return (
+				<img src={spaceBackground} id='video-background'/>
+			)
+		} else {
+			return (
+				<video loop muted autoPlay playsInline id='video-background'>
+					<source src={backgroundVideo1} type='video/webm'/>
+				</video>
+			)
+		}
+	}
 
 	return (
-		<>
+		<Styles.AppContainer height={height}>
 			<ToastContainer style={{fontSize: 'var(--bs-body-font-size)'}}/>
-			<video loop muted autoPlay playsInline id='video-background'>
-				<source src={backgroundVideo1} type='video/webm'/>
-			</video>
+			{getBackground()}
 			<GlobalStyles/>
 			{/* The basename is if this is not a org website <Router basename='website-2.0'> */}
-			<Router>
-				<div className='App'>
-					<Navigation/>
-					<div className='content'>
-						{/* Define routes within the website */}
-						<Routes>
-							<Route path='/' element={<Home/>}/>
-							<Route path={PATHS.HOME} element={<Home/>}/>
-							<Route path={PATHS.EVENTS} element={<Events/>}/>
-							<Route path={PATHS.ROBOTICS} element={<RoboticMining/>}/>
-							<Route path={PATHS.SPONSORS} element={<Sponsors/>}/>
-							<Route path={PATHS.ROCKSAT} element={<Rocksat/>}/>
-							<Route path={PATHS.BALLOONING} element={<Ballooning/>}/>
-							{/* If no path was matched, go to 404 page */}
-							<Route path='*' element={<NoMatch404/>}/>
-						</Routes>
+			<Styles.Content height={height}>
+				<Router>
+					<div className='App'>
+						<Navigation/>
+						<div className='content'>
+							{/* Define routes within the website */}
+							<Routes>
+								<Route path='/' element={<Home/>}/>
+								<Route path={PATHS.HOME} element={<Home/>}/>
+								<Route path={PATHS.EVENTS} element={<Events/>}/>
+								<Route path={PATHS.ROBOTICS} element={<RoboticMining/>}/>
+								<Route path={PATHS.SPONSORS} element={<Sponsors/>}/>
+								<Route path={PATHS.ROCKSAT} element={<Rocksat/>}/>
+								<Route path={PATHS.BALLOONING} element={<Ballooning/>}/>
+								{/* If no path was matched, go to 404 page */}
+								<Route path='*' element={<NoMatch404/>}/>
+							</Routes>
+						</div>
 					</div>
-				</div>
-			</Router>
-			<Copyright/>
-		</>
+				</Router>
+				<Copyright/>
+			</Styles.Content>
+		</Styles.AppContainer>
 	)
 }
 

src/pages/general/copyright/CopyrightStyles.tsx

@@ -4,8 +4,13 @@ import { COLORS } from '../../../tools/Constants'
 
 export default class CopyrightStyles {
 	static readonly CopyrightContainer = styled.div`
-        background-color: ${COLORS.PRIMARY};
-        text-align: center;
-        height: 100%;
+		height: calc(var(--vh) * .02);
+		align-self: end;
+		background-color: ${COLORS.PRIMARY};
+		text-align: center;
+		width: 100%;
+		display: flex;
+    	justify-content: center;
+		align-items: center;
 	`
 }

src/pages/general/navigation/Navigation.tsx

@@ -8,14 +8,14 @@ import Styles from './NavigationStyles'
 
 // General tools
 import * as Constants from '../../../tools/Constants'
-import { getScrollY, getWindowWidth, scrollToTop } from '../../../tools/HelpfulFunctions'
+import { getScrollY, useWindowSize, scrollToTop } from '../../../tools/HelpfulFunctions'
 
 // Images
 import nasaLogo from '../../../assets/pics/logos/nasa.png'
 
 const Navigation = (): React.ReactElement => {
 	const { scroll } = getScrollY()
-	const { width } = getWindowWidth()
+	const { width } = useWindowSize()
 	return (
 		<>
 			{/* The rest of the navigation bar. The className is dependent on whether the navbar is expanded or not */}

src/tools/HelpfulFunctions.tsx

@@ -9,12 +9,12 @@ export const scrollToTop = (): void =>{
 	})
 }
 
-export const getWindowWidth = (): {width: number} => {
-	const [dimensions, setWidth] = useState({ width: window.innerWidth })
+export const useWindowSize = (): {width: number, height: number} => {
+	const [dimensions, setWidth] = useState({ width: window.innerWidth, height: window.innerHeight })
 
 	useEffect(() => {
 		const handler = debounce(() => {
-			setWidth({ width: window.innerWidth })
+			setWidth({ width: window.innerWidth, height: window.innerHeight })
 		}, 10)
 
 		window.addEventListener('scroll', handler)