Merge branch 'Saga' of https://git.e-declic.net/talents-tube/app into Saga

nextjs/components/atoms/VideoVimeo.js

@@ -35,11 +35,11 @@ const useStyles = makeStyles(theme => ({
 
 export default function VideoVimeo(props) {
 
-    const {videoId, options} = props;
+    const {videoId, options, classesOverride} = props;
     const classes = useStyles();
 
     return (
-        <section className={classes.video}>
+        <section className={classes.video +' '+classesOverride}>
             <iframe className='player' allow="autoplay" 
             src={"https://player.vimeo.com/video/"+ props.videoId + options} 
             frameborder="0" 

nextjs/components/organisms/ShortVideoHooker.js

@@ -1,13 +1,17 @@
 
 import Link from 'next/link';
 import React, { Component } from 'react'
+import getConfig from 'next/config'
 import { withStyles } from '@material-ui/core/styles';
+import Plyr from 'react-plyr';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
-import withWidth from '@material-ui/core/withWidth'
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 
 import VideoVimeo from '../atoms/VideoVimeo'
 
+const { publicRuntimeConfig } = getConfig()
+
 const styles = theme => ({
     root: {
         position: 'relative',
@@ -50,7 +54,33 @@ const styles = theme => ({
             background: 'none'
         },
     },
+    videoVimeo: {
+        zIndex: '888',
+        height: '65vh',
+        paddingBottom: '0%',
+        '& iframe': {
+            position: 'absolute',
+            top: 0,
+            left: 'calc(50% - 125vw)',
+            width: '250vw',
+            height: '100%',
+        },
+        [theme.breakpoints.up('md')]: {
+            height: '65vh',
+            paddingBottom: '0',
+            '& iframe': {
+                position: 'absolute',
+                left: 'calc(50% - 100vw)',
+                width: '200vw',
+                height: '130%',
+            },
+        },
+        [theme.breakpoints.up('lg')]: {
+            height: '85vh',
+        },
+    },
     text: {
+        zIndex: '999',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'flex-start',
@@ -94,6 +124,13 @@ const videoList = [
 class ShortVideoHooker extends Component {
     constructor(props) {
         super(props);
+
+        this.plyrRef = null;
+
+        this.setPlyrRef = element => {
+            this.plyrRef = element;
+
+        };
     }
     state = {
         i: 0,
@@ -117,17 +154,25 @@ class ShortVideoHooker extends Component {
                 this.setState({ i: 0, startDate: Date.now() })
             else
                 this.setState({ i: ++this.state.i, startDate: Date.now() })
-        
+            //Update Plyr
+            // if (this.plyrRef) {
+            //     this.plyrRef.hideControls = true;
+            //     this.plyrRef.displayDuration = false;
+            //     this.plyrRef.updateVideoSource(videoList[this.state.i].vimeoId, 'vimeo')
+            //     this.plyrRef.hideControls = true;
+            //     this.plyrRef.displayDuration = false;
+            // }
         }
 
     }
 
     render() {
         let { classes } = this.props;
+        let videoId = videoList[0].vimeoId;
 
         return (
             <div className={classes.video}>
-                <VideoVimeo videoId={videoList[this.state.i].vimeoId}
+                <VideoVimeo classesOverride={ classes.videoVimeo } videoId={videoList[this.state.i].vimeoId}
                     options={`?byline=0&title=0&background=1&autoplay=1&mute=1`} />
                 <section className={classes.text}>
                     <Typography gutterBottom

nextjs/components/templates/Layout.js

@@ -8,7 +8,7 @@ const styles = theme => ({
     height: '64px',
     background: theme.palette.secondary.main,
     position: 'fixed',
-    zIndex: '999',
+    zIndex: '10000',
   },
   foot: {
     height: '64px',

nextjs/pages/Help.js

@@ -118,7 +118,7 @@ function Help(props) {
           className={classes.subTitle}>
           Découvrez les offres d'emploi en vidéo
         </Typography>
-        <VideoVimeo videoId='356411947' classes={{ video: classes.video }}/>
+        <VideoVimeo videoId='356411947' classesOverride={classes.video}/>
         <Typography
           className={classes.text}
           gutterBottom>

nextjs/pages/index.js

@@ -61,6 +61,10 @@ const styles = theme => ({
       paddingBottom: theme.spacing(9),
     },
   },
+  scrollerSectionOffer: {
+    zIndex: '9999',
+    backgroundColor: theme.palette.secondary.main,
+  },
   scrollerSectionCompany: {
     backgroundColor: theme.palette.background.grey,
   },
@@ -154,7 +158,7 @@ class Index extends React.Component {
 
           <ShortVideoHooker />
 
-          <section className={classes.scrollerSection}>
+          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
             <div
               className={classes.HorizontalScrollerOffre}
             >