workout video playing on mobile

Author: Derek Roode

react-app/src/App.js

@@ -11,8 +11,6 @@ import ProtectedRoute from "./components/auth/ProtectedRoute";
 // COMPONENTS
 import NavBar from "./components/Organisms/NavBar/NavBar";
 import UsersList from "./components/UsersList";
-import User from "./components/User/User";
-// import WelcomePage from "./components/Welcome/Welcome";
 import Workouts from "./components/Workouts/Workouts";
 import Groups from "./components/Groups/Groups";
 import GroupsIndividual from "./components/GroupsIndividual/GroupsIndividual";
@@ -22,6 +20,7 @@ import About from "./components/About/About";
 import ProgressPhotoIndividual from "./components/ProgressPhotoIndividual/ProgressPhotoIndividual";
 import Login from "./components/Pages/Login/Login";
 import Main from "./components/Pages/Main/Main";
+import Workout from "./components/Pages/Workout/Workout";
 
 function App() {
   const [authenticated, setAuthenticated] = useState(true);
@@ -62,17 +61,15 @@ function App() {
                 <UsersList />
               </Route>
               <Route path="/workout" exact={true}>
-                <Workouts />
+                <Workout/>
               </Route>
               <Route path="/my_progress" exact={true}>
                 <ProgressPhotos />
               </Route>
               <Route path="/my_progress/:photoId" exact={true}>
                 <ProgressPhotoIndividual />
               </Route>
-              <Route path="/users/:userId" exact={true}>
-                <User />
-              </Route>
+              
 
               <Route path="/workout/:workoutId" exact={true}>
                 {/* SETUP ROUTE */}

react-app/src/components/Atoms/LoginPageVideo/LoginPageVideo.js

@@ -4,17 +4,21 @@ import styles from './LoginPageVideo.module.css'
 function LoginPageVideo() {
   return (
     // if you want a video to play just uncomment out the video 
-    <div >
+    <div className={styles.login__background_container}>
 
     <image className={styles.login__background_Image} src={'https://www.oxfordmail.co.uk/resources/images/10763753/'}/>
+    {/* <div className={styles.login__background_gradient}> */}
+
     <video
           className={styles.login__background_video}
           src="https://boxit.s3.us-east-2.amazonaws.com/video/welcomeHeaderVideo.m4v"
           autoPlay
           loop
           muted
+          
           />
           </div>
+          // </div>
   )
 }
 

react-app/src/components/Atoms/LoginPageVideo/LoginPageVideo.module.css

@@ -1,17 +1,17 @@
+
 .login__background_video{
   position: absolute;
   top: 0;
   left: 50%;
-  /* remove the item in the left positioning */
   transform: translateX(-50%);
   width: auto;
   height: 100%;
   overflow: hidden;
-  /* background-image: url("http://cdn.shopify.com/s/files/1/2510/5836/articles/Mike_Rashid_Heavyweight_Boxer_Training_1200x1200.png?v=1610545981"); */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   z-index: -1;
+
 }
 
 @media screen and (max-width: 768px) {

react-app/src/components/Atoms/WorkoutVideo/WorkoutVideo.js

@@ -0,0 +1,17 @@
+import React, { useState, useEffect } from "react";
+
+
+import styles from './WorkoutVideo.module.css'
+
+function WorkoutVideo({video, onEnd}) {
+
+
+  return (
+<div className={styles.workoutVideo_container}>
+  <video src={video} autoPlay onEnded={onEnd}/>
+  {/* <video src={workouts[pos]?.audio_url} autoPlay onEnded={() => logWorkout(workouts[pos].id)}/> */}
+</div>
+  )
+}
+
+export default WorkoutVideo

react-app/src/components/Atoms/WorkoutVideo/WorkoutVideo.module.css

@@ -0,0 +1,14 @@
+.workoutVideo_container{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.workoutVideo_container video{
+  width: auto;
+  height: 100%;
+  overflow: hidden;
+}
+

react-app/src/components/Molecules/WorkoutBlock/WorkoutBlock.js

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import WorkoutVideo from '../../Atoms/WorkoutVideo/WorkoutVideo'
+
+import { allWorkouts } from '../../../store/workouts';
+
+import styes from './WorkoutBlock.module.css'
+
+function WorkoutBlock() {
+  const workouts = useSelector((state) => state.workout);
+  console.log('workouts',workouts);
+  const dispatch = useDispatch();
+
+
+
+
+  useEffect( () => {
+
+    dispatch(allWorkouts());
+
+  }, []);
+
+  const logWorkout = () =>{
+    return null
+  }
+
+
+  return (
+    <div>
+      <WorkoutVideo video={workouts[2]?.audio_url} onEnd={logWorkout(workouts[2])}/>
+      
+    </div>
+  )
+}
+
+export default WorkoutBlock

react-app/src/components/Molecules/WorkoutBlock/WorkoutBlock.module.css

@@ -0,0 +1,14 @@
+import React from 'react'
+import WorkoutBlock from '../../Molecules/WorkoutBlock/WorkoutBlock'
+
+import styles from './Workout.module.css'
+
+function Workout() {
+  return (
+    <div>
+   <WorkoutBlock/>
+    </div>
+  )
+}
+
+export default Workout