Social Share

Header maj
US403, US413, US404
2020-12-03 16:43:29 +01:00 · 2020-12-03 16:20:51 +01:00 · 2020-12-03 16:17:52 +01:00 · 2020-12-02 16:40:57 +01:00 · 2020-12-01 19:21:23 +01:00 · 2020-12-01 11:23:22 +01:00
50 changed files with 2829 additions and 304 deletions
@@ -75,7 +75,7 @@ export default function ChatCard(props) {
                className={classes.messageDate}
                align="center"
            >
-                Envoyée le  {(new Date(props.message.c_time)).toLocaleDateString("fr-FR")} à {(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")}
+                Envoyé le  {(new Date(props.message.c_time)).toLocaleDateString("fr-FR")} à {(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")}
            </Typography>
        </Fragment>
    )
@@ -8,6 +8,8 @@ import LocationOnIcon from '@material-ui/icons/LocationOn';
 import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
 import Business from '@material-ui/icons/Business';
 import Typography from '@material-ui/core/Typography';
+import WatchLater from '@material-ui/icons/WatchLater';
+import Home from '@material-ui/icons/Home';

 const variantIcon = {
  assignment: AssignmentIcon,
@@ -15,6 +17,8 @@ const variantIcon = {
  location_on: LocationOnIcon,
  business_center: BusinessCenterIcon,
  business: Business,
+  watch_later: WatchLater,
+  home: Home,
 };

 const styles = theme => ({
@@ -4,6 +4,8 @@ import { withStyles } from '@material-ui/core/styles';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import RoomIcon from '@material-ui/icons/Room';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
+import HomeOnIcon from '@material-ui/icons/Home';
+import WatchLater from '@material-ui/icons/WatchLater';
 import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
 import Typography from '@material-ui/core/Typography';
 import Business from '@material-ui/icons/Business';
@@ -12,6 +14,8 @@ const variantIcon = {
  assignment: AssignmentIcon,
  room: RoomIcon,
  location_on: LocationOnIcon,
+  home: HomeOnIcon,
+  watch_later: WatchLater,
  business_center: BusinessCenterIcon,
  business: Business,
 };
@@ -5,19 +5,24 @@ const JobPosting = props => {
    return (
        
            <JobPostingJsonLd
-        datePosted="2020-01-06T03:37:40Z"
+        datePosted={props.job_date}
        description={props.job_description}
        hiringOrganization={{
            name: props.job_brand,
            sameAs: props.job_brand_link,
        }}
        jobLocation={{
-            addressLocality: props.job_location,
+            addressLocality: props.job_ville,
+            addressRegion: props.job_dept,
+            // postalCode: props.job_location,
+            streetAddress: props.job_location,
+            addressCountry: props.job_pays,

        }}
        title={props.job_title}
-        validThrough="2020-01-06"
+        validThrough={props.job_date_fin}
        applicantLocationRequirements="FR"
+        employmentType = {props.job_contract_type + ","+props.job_temps_type }
        />
        
        
@@ -6,7 +6,7 @@ const OgHead = props => {
    return (
        <Head>
            <title key="title">{props.seo_title}</title>
-            <meta name="robots" content="noindex, nofollow"></meta>
+            {/* <meta name="robots" content="noindex, nofollow"></meta> */}
            <meta name="description" kenoindexy="description" content={props.seo_description} />
            <meta name="keywords" content={props.seo_key}/>
            <meta key="og:url" property="og:url" content={props.seo_url} />
@@ -22,12 +22,12 @@ const OgHead = props => {
            <meta name="twitter:card" content="summary"/>
            <meta name="twitter:site" content="@TalentsTube"/>
            <meta name="twitter:title" content={props.seo_title}/>
-            <meta name="twitter:description" content={props.seo_title}/>
+            <meta name="twitter:description" content={props.seo_description}/>
            <meta name="twitter:image" content={props.image}/>
-            <meta http-equiv='cache-control' content='no-store,no-cache'></meta>
-            <meta http-equiv='expires' content='0'></meta>
-            <meta http-equiv='pragma' content='no-cache'></meta>
-            <link rel="canonical" href={ props.seo_url} />    
+            {/* <meta httpEquiv='cache-control' content='no-store,no-cache'></meta>
+            <meta httpEquiv='expires' content='0'></meta>
+            <meta httpEquiv='pragma' content='no-cache'></meta> */}
+            {/* <link rel="canonical" href={ props.seo_url} />     */}
            
        </Head>
        
@@ -94,7 +94,7 @@ const useStyles = makeStyles(theme => ({

 export default function SimpleCollapse(props) {
  const classes = useStyles();
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(true);

  function handleExpandClick() {
    setExpanded(!expanded);
@@ -111,12 +111,10 @@ export default function SimpleCollapse(props) {
      </Collapse>

      <CardActions disableSpacing classes={{ root: classes.rootCardAction }}>
-
-
        <IconButton
          onClick={handleExpandClick}
          aria-expanded={expanded}
-          aria-label="Afficher plus"
+          aria-label="Afficher plus "
        > <Typography className={classes.displayMore}>
            {(!expanded) ? 'Afficher plus' : 'Afficher moins'}
          </Typography>
@@ -113,8 +113,8 @@ class AccountEtape1 extends Component {
    onBlur(e) {
        console.log("blur")
        this.setState({ [e.target.name]: e.target.value });
-        console.log("phone=>"+this.state.phone);
-        this.soumettre();
+        
+        this.soumettre(e.target.name, "unitaire");
      }     
    

@@ -160,12 +160,16 @@ class AccountEtape1 extends Component {
    onSubmit = (e) => {
        
        e.preventDefault();
-        this.soumettre(e);
+        console.log("submit")
+        console.log(e.keyCode)
+        
+        this.soumettre(e.target.name, "global")
        
    }
-    soumettre(e){
-        
-        const errors = this.validate(this.state);
+    soumettre(champ, type){
+        console.log("soumettre");
+        console.log(champ);
+        const errors = this.validate(this.state, champ, type);
        const success = {};
        this.setState({ errors });
        if (!this.state.errors || !this.state.errors.message){
@@ -193,18 +197,19 @@ class AccountEtape1 extends Component {
            
        }
    }
-
-    validate = data => {
+    validate(data,champ, type){
+        console.log("valdiate")
+        console.log(champ);
        const errors = {};
        errors.message ="";
        //if (!Validator.isEmail(data.currentJob)) errors.message += "Le poste actuel doit etre un email\n";
-        if (!data.firstname || data.firstname==="") errors.message += "Veuillez saisir votre prénom<br />";
-        if (!data.lastname || data.lastname==="") errors.message += " Veuillez saisir saisir votre nom<br />";
-        if (data.phone=="") errors.message += "Veuillez saisir un numéro de téléphone<br />";
-        if (!data.currentJob || data.currentJob=="") errors.message += "Veuillez saisir votre intitulé de poste actuel ou poste recherché<br />";
-        if ((data.zipCode && data.zipCode!="") && !Validator.isPostalCode(data.zipCode, "FR")) errors.message += "Le code postal n'est pas correct<br />";
+        if (type=="global" || (champ=="firstname" &&  data.firstname=="")) errors.message += "Veuillez saisir votre prénom<br />";
+        if (type=="global" || (champ=="lastname" &&  data.lastname=="")) errors.message += " Veuillez saisir votre nom<br />";
+        if (type=="global" || (champ=="phone" && data.phone=="")) errors.message += "Veuillez saisir un numéro de téléphone<br />";
+        if (type=="global" || (champ=="currentJob" &&  data.currentJob=="")) errors.message += "Veuillez saisir votre intitulé de poste actuel ou poste recherché<br />";
+        if (type=="global" || (champ=="zipCode" && (data.zipCode && data.zipCode!="") && !Validator.isPostalCode(data.zipCode, "FR"))) errors.message += "Le code postal n'est pas correct<br />";
        // if ((data.website && data.website!="") && !Validator.isURL(data.website)) errors.message += " Veuillez ajouter un site internet avec une url valide<br />";
-        // if (!Validator.isMobilePhone(data.phone, "fr-FR") && !Validator.isNumeric(data.phone, "fr-FR")) errors.message += "Le téléphone n'est pas correct<br />";
+         if (!Validator.isMobilePhone(data.phone, "fr-FR") && !Validator.isNumeric(data.phone, "fr-FR")) errors.message += "Le téléphone n'est pas correct<br />";
        //console.log(errors.email);
        
        return errors;
@@ -363,7 +368,7 @@ class AccountEtape1 extends Component {
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
-                        value={this.state.currentJob && this.state.currentJob !='null' ? this.state.currentJob : ''}
+                        value={this.state.currentJob  ? this.state.currentJob : ''}
                        onChange={this.handleChange}
                        onBlur={this.onBlur} 
                    />
@@ -375,7 +380,7 @@ class AccountEtape1 extends Component {
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
-                        value={this.state.address1 && this.state.address1 !='null' ? this.state.address1 : ''}
+                        value={this.state.address1 ? this.state.address1 : ''}
                        onChange={this.handleChange}
                        onBlur={this.onBlur} 
                    />
@@ -387,7 +392,7 @@ class AccountEtape1 extends Component {
                        className={classes.textField}
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
-                        value={this.state.address2 && this.state.address2 !='null' ? this.state.address2 : ''}
+                        value={this.state.address2 ? this.state.address2  : ''}
                        onChange={this.handleChange}
                        onBlur={this.onBlur} 
                    />    
@@ -399,7 +404,7 @@ class AccountEtape1 extends Component {
                        className={classes.textField}
                        classes={{ root: classes.textFieldSmall }}
                        variant="outlined"
-                        value={this.state.zipCode && this.state.zipCode !='null' ? this.state.zipCode : ''}
+                        value={this.state.zipCode ? this.state.zipCode : ''}
                        onChange={this.handleChange}
                        onBlur={this.onBlur} 
                    /> 
@@ -411,7 +416,7 @@ class AccountEtape1 extends Component {
                        className={classes.textField}
                        classes={{ root: classes.textFieldSmall }}
                        variant="outlined"
-                        value={this.state.city && this.state.city !='null' ? this.state.city : ''}
+                        value={this.state.city ? this.state.city : ''}
                        onChange={this.handleChange}
                        onBlur={this.onBlur} 
                    />      
@@ -423,7 +428,7 @@ class AccountEtape1 extends Component {
                        className={classes.textField}
                        classes={{ root: classes.textFieldSmall }}
                        variant="outlined"
-                        value={this.state.country && this.state.country !='null' ? this.state.country : ''}
+                        value={this.state.country ? this.state.country : ''}
                        onChange={this.handleChange}
                        onBlur={this.onBlur} 
                    />
@@ -437,7 +442,7 @@ class AccountEtape1 extends Component {
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        placeholder="http://www.linkedin.com/in/"
-                        value={this.state.linkedin && this.state.linkedin !='null' ? this.state.linkedin : ''}
+                        value={this.state.linkedin  ? this.state.linkedin : ''}
                        onChange={this.handleChange}
                        onBlur={this.onBlur} 

@@ -451,7 +456,7 @@ class AccountEtape1 extends Component {
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        placeholder="http://twitter.com/.."
-                        value={this.state.twitter && this.state.twitter !='null' ? this.state.twitter : ''}
+                        value={this.state.twitter   ? this.state.twitter : ''}
                        onChange={this.handleChange}
                        onBlur={this.onBlur} 
                    />
@@ -464,14 +469,15 @@ class AccountEtape1 extends Component {
                        classes={{ root: classes.rootTextfield }}
                        variant="outlined"
                        placeholder="http://monsite.fr"
-                        value={this.state.website && this.state.website !='null' ? this.state.website : ''}
+                        value={this.state.website ? this.state.website : ''}
                        onChange={this.handleChange}
                        onBlur={this.onBlur} 
                    />
                    <Button
+                            type="submit"
                            variant="contained"
                            color="primary"
-                            onClick={refresh}
+                            
                            className={classes.button}>
                            Enregistrer
                        </Button>
@@ -12,7 +12,7 @@ import {fetchCompanyRequest} from '../../actions/companies'
 import {fetchCurrentUserRequest} from '../../actions/user'
 import VideoVimeo from '../atoms/VideoVimeo'
 import Router from 'next/router'
-import Loader from '../templates/loader'
+import LoaderVideo from '../templates/loaderVideo'
 import Ar from "lodash/array"
 import Snackbar from '@material-ui/core/Snackbar';
 import { Alert, AlertTitle } from '@material-ui/lab';
@@ -71,6 +71,16 @@ const styles = theme => ({
            backgroundColor:  "#25D89A",
        }
    },
+    captureButton: {
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.main,
+        padding: theme.spacing(5, 2),
+        margin: theme.spacing(1),
+        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.14)',
+        '&:hover': {
+          backgroundColor: theme.palette.primary.main,
+        },
+      },
    importButton: {
        color: theme.palette.primary.main,
        backgroundColor:  theme.palette.secondary.main,
@@ -135,7 +145,7 @@ class Etape2 extends React.Component {
        //window.location.reload(false);
        if (nextProps.media.status === 'success') {
            const success = {};
-            success.message ="Vidéo mis à jour";
+            success.message ="Vidéo mise à jour";
            this.setState({ success });
            this.setActiveStep(1);
        }
@@ -197,7 +207,7 @@ class Etape2 extends React.Component {
            <section className={classes.container}>
                <Fragment>
                    {this.AfficherSuccess()}
-                    { loading ? <Loader/>  : <div></div> }
+                    { loading ? <LoaderVideo/>  : <div></div> }
                    
                    <div className={classes.root}>
                    <Hidden xsUp>
@@ -210,9 +220,39 @@ class Etape2 extends React.Component {
                            alignItems="center" 
                            spacing={2}>
                            <Grid item xs={12} sm={12} md={12} lg={6} lg={6}>
+                                
+
+
+                            { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
+                                (
+                                    <Fragment>
+                                    <input
+                                        type="file" accept="video/*" capture="camcorder"
+                                        className={classes.input}
+                                        style={{ display: 'none' }}
+                                        id="record-button-file"
+                                        multiple
+                                        onChange={this.inputCamRecorderChange}
+                                    />
+                                    <label htmlFor="record-button-file">
+                                        <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
+                                        <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
+                                        <Typography align="left" className={classes.textButton}>
+                                            Je <span className={classes.underlined}>réalise</span> ma vidéo de présentation
+                                        </Typography>
+                                        <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                                        </Button>
+                                    </label>
+                                    </Fragment>
+                                ):
+                                (
+
+                                
                                <div className={classes.recorderContainer}>
                                    <Recorder uploader={this.props.uploadMediaPres} titreBouton="Remplacer ma vidéo"/>
                                </div>
+                                )
+                            }
                            </Grid>
                            <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
                                <div> 
@@ -253,7 +293,7 @@ class Etape2 extends React.Component {
                                                    src='/statique/images/Import.svg'
                                                    className={classes.iconButton}/>
                                                <Typography align="left" className={classes.textButton}>
-                                                    J'<span className={classes.underlined}>importe</span> ma vidéo de réponse
+                                                    J'<span className={classes.underlined}>importe</span> ma vidéo de présentation

                                                </Typography>
                                                <KeyboardArrowDownIcon className={classes.InputKeyboardArrowDownIcon}/>
@@ -8,7 +8,7 @@ import { makeStyles } from '@material-ui/styles';
 import { Button, Typography, Divider, Hidden } from '@material-ui/core';
 import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import Loader from '../../components/templates/loader'
+import LoaderVideo from '../../components/templates/loaderVideo'
 import Snack from '../../components/atoms/snack';
 import Snackbar from '@material-ui/core/Snackbar';
 import { Alert, AlertTitle } from '@material-ui/lab';
@@ -169,7 +169,7 @@ class Etape3 extends React.Component {
                    fontSize: '1em',
                    }}
                  >
-                    Visionner mon CV
+                    Visualiser mon CV
                    </a>
                    <br />
                {/* <a href="https://www.permatheque.fr/PDF/mansobufukuoka-larevolutiondunseulbrindepaille.pdf" target="_blank">lien</a> */}
@@ -191,7 +191,7 @@ class Etape3 extends React.Component {
    return (
      <Fragment>
      { loading ? 
-        <Loader /> :
+        <LoaderVideo /> :
        <Fragment>
          {this.AfficherSuccess()}
          
@@ -293,7 +293,7 @@ const AccountProfile = props => {
                                    : {user.phone}<br/>
                                    <LinkedInIcon className={classes.menuButton}/>
                                    : {(user.linkedin && user.linkedin != '' && user.linkedin != 'null')
-                                        ? <a href={user.linkedin} target="_blank">Lien sur mon linkendIn</a>
+                                        ? <a href={user.linkedin} target="_blank">Lien sur mon linkedIn</a>
                                        : 'Non renseigné'}<br/>
                                    <PublicIcon className={classes.menuButton}/>
                                    : {(user.website && user.website != '' && user.website != 'null')
@@ -321,13 +321,13 @@ const AccountProfile = props => {
                                    <DuoIcon className={classes.menuButton}/>
                                    : {(user.alias && user.alias != '' && user.alias != 'null')
                                        ? <a
-                                                href={publicRuntimeConfig.cvThequeUrl + "talent/" + user.alias}
+                                                href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
                                                target="_blank">Voir mon profil TalentsTube
                                            </a>
                                        : 'Non renseigné'}<br/>
                                    <div
                                        class="fb-share-button"
-                                        data-href={publicRuntimeConfig.cvThequeUrl + "talent/" + user.alias}
+                                        data-href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
                                        data-layout="button_count"
                                        data-size="small">

@@ -335,7 +335,7 @@ const AccountProfile = props => {
                                        :
                                        <a
                                            target="_blank"
-                                            href={"https://www.facebook.com/sharer/sharer.php?u=" + publicRuntimeConfig.cvThequeUrl + "talent/" + user.alias + "%2F&amp;src=sdkpreparse"}
+                                            href={"https://www.facebook.com/sharer/sharer.php?u=" + publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias + "%2F&amp;src=sdkpreparse"}
                                            class="fb-xfbml-parse-ignore"> Partager mon profil
                                        </a>
                                    </div>
@@ -160,7 +160,12 @@ class Answer extends Component {

        //TODO:maybe add this two in a single transactionnal saga
        this.props.updateUserRequest(data)
-
+        //TODO: faire appel à une méthode qui va encoyer le mail a l'entreprise 
+        
+        // this.props.companyMails.map((user) =>
+        //     //TODO Envoyer un mail a chaque user
+        //     console.log(user.email)
+        // )
        this.props.postAdAnswerRequest(
            {
                adId: this.props.adId,
@@ -308,7 +313,7 @@ class Answer extends Component {
                    />
                </form>
                <div id="F" className={classes.foot}>
-                    <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Postuler</Button>
+                <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Envoyer ma candidature</Button>
                </div>
            </section>
        )
@@ -243,6 +243,13 @@ function Footer(props) {
                            </Typography>
                        </a>
                    </Link>
+                    <Link href="" >
+                        <a href="https://blog.talentstube.com/contact" target="_blank">
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Contact
+                            </Typography>
+                        </a>
+                    </Link>
                </section>
                <section className={classes.container}>
                    <Typography color="secondary" component="p" className={classes.titleContainer}>
@@ -255,11 +262,11 @@ function Footer(props) {
                        56 000 Vannes
                </Typography>
                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
-                        02.30.05.06.31
+                    <a href="tel:+33230050631"  >02.30.05.06.31 </a> 
                </Typography>
-                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                    {/* <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                        contact@talentstube.com
-                </Typography>
+                </Typography> */}
                </section>

            </div>
@@ -2,6 +2,7 @@ import React from 'react';

 const NextButton = ({ hasNext, onClick, style, className, text }) => hasNext ? (
  <button type="button" onClick={onClick} style={style} className={className}>Suivant</button>
+                
 ) :
 null;

@@ -0,0 +1,35 @@
+// import React, { useState } from 'react';
+// import Pagination from '@material-ui/lab/Pagination';
+// import PaginationItem from '@material-ui/lab/PaginationItem';
+// export default function GriddleCustomPageDropdown(props) {
+//   let [page] = React.useState(1);
+//   let PageDropDown = null;
+//   const setPage = (event, newPage) => {
+//     console.log('test');
+//     setPage(newPage);
+
+//   };
+//   return (
+//     <Pagination count={props.maxPages} defaultPage={props.currentPage} onChange={props.setPage}/>
+//   );
+// }
+
+// const [page, setPage] = useState(1);
+//   const handleChangePage = (event, newPage) => {
+    
+//     setPage(newPage);
+//   };
+// const PageDropDown = ({ maxPages, currentPage, setPage  }) => <Pagination count={maxPages} defaultPage={currentPage} onChangePage={handleChangePage}/> ;
+
+// export default PageDropDown;
+
+
+import React from 'react';
+import Pagination from '@material-ui/lab/Pagination';
+
+const NextButton = ({ maxPages, currentPage, setPage, className, text }) => maxPages ? (
+  <Pagination count={maxPages} defaultPage={currentPage} onChange={setPage} shape="rounded"/>              
+) :
+null;
+
+export default NextButton;
@@ -40,7 +40,7 @@ import ActiveLink from "./../atoms/Activelink";
 import axios from 'axios';
 import setAuthorizationHeader from "../../data/setAuthorizationHeader";
 import getConfig from 'next/config'
-
+import Router from 'next/router'
 const styles = theme => ({
  root: {
    width: '100%',
@@ -327,7 +327,12 @@ class Header extends React.Component {
  }

  toggle = () => this.setState(state => ({ toggle: !state.toggle }))
+  chargerPage =(type)=> {
+    console.log(type);
+    //Router.replace(page);
+    sessionStorage.setItem(type+'_currentPage',1);

+  } 
  render() {
    const { classes } = this.props;
    const { publicRuntimeConfig } = getConfig();
@@ -452,7 +457,7 @@ class Header extends React.Component {
                  <Divider light={true} />

                  <div className={classes.linkGroup}>
-                    <a href={publicRuntimeConfig.symphonyUrl + "/faire-offre-emploi-video"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
+                    <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
                      <WorkOutlineIcon className={classes.icon} />
                      <ListItemText primary='Connexion recruteurs'>
                      </ListItemText>
@@ -538,13 +543,13 @@ class Header extends React.Component {

                <List className={classes.desktopMenuList}>
                  <div>
-                    <ActiveLink activeClassName={classes.active} href="/Offres"  >
-                      <a className={classes.desktopMenuItem}>
+                    <ActiveLink activeClassName={classes.active} href="/Offres"   >
+                      <a className={classes.desktopMenuItem} >
                        <ListItemText primary="Offres d'emploi">
                        </ListItemText>
                      </a>
                    </ActiveLink>
-                    <ActiveLink activeClassName={classes.active} href="/Entreprises"  >
+                    <ActiveLink activeClassName={classes.active} href="/Entreprises"    >
                      <a className={classes.desktopMenuItem}>
                        <ListItemText primary='Nos entreprises'>
                        </ListItemText>
@@ -605,7 +610,7 @@ class Header extends React.Component {
              </section>
              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>

-                <a href={publicRuntimeConfig.symphonyUrl + "/faire-offre-emploi-video"} className={classes.desktopMenuItem}>
+                <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
                  <ListItemText primary='Espace recruteurs'>
                  </ListItemText>
                  <ArrowForward className={classes.icon} />
@@ -0,0 +1,565 @@
+import React, { Fragment, Children } from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import { withStyles, getMuiTheme } from '@material-ui/core/styles';
+import MenuIcon from '@material-ui/icons/Menu';
+import Link from 'next/link'
+import Drawer from '@material-ui/core/Drawer';
+import Divider from '@material-ui/core/Divider';
+import HomeIcon from '@material-ui/icons/HomeOutlined';
+import OfferIcon from '@material-ui/icons/LocalOfferOutlined';
+import CompanyIcon from '@material-ui/icons/DomainOutlined';
+import HelpIcon from '@material-ui/icons/HelpOutline';
+import VideoIcon from '@material-ui/icons/OndemandVideoOutlined';
+import NotesIcon from '@material-ui/icons/NotesOutlined';
+import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';
+import PersonIcon from '@material-ui/icons/Person';
+import PersonAddIcon from '@material-ui/icons/PersonAdd';
+import WorkOutlineIcon from '@material-ui/icons/WorkOutline';
+import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined';
+import FolderSharedIcon from '@material-ui/icons/FolderShared';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import PermContactCalendar from '@material-ui/icons/PermContactCalendar';
+import VideoCam from '@material-ui/icons/Videocam';
+import SettingsIcon from '@material-ui/icons/Settings';
+import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import { ListItemText } from '@material-ui/core';
+import Loader from '../templates/loader'
+import { connect } from 'react-redux'
+import { fetchCurrentUserRequest } from "../../actions/user";
+import { requestLogout } from "../../actions/auth";
+import Button from '@material-ui/core/Button';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
+import Typography from '@material-ui/core/Typography';
+import { withRouter } from "next/router";
+import ActiveLink from "../atoms/Activelink";
+import axios from 'axios';
+import setAuthorizationHeader from "../../data/setAuthorizationHeader";
+import getConfig from 'next/config'
+import Router from 'next/router'
+import ButtonBase from "@material-ui/core/ButtonBase";
+import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+const styles = theme => ({
+  root: {
+    width: '100%',
+    position: 'relative',
+    zIndex: '999',
+    '& a': {
+      textDecoration: 'none'
+    }
+  },
+  toolbar: {
+    height: '64px',
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+    display: 'block'
+  },
+  menuLogo: {
+    cursor: 'pointer',
+    [theme.breakpoints.down('md')]: {
+      width: '200px'
+    },
+    [theme.breakpoints.down('sm')]: {
+      width: '130px'
+    },
+  },
+  menuAvatar: {
+    width: '2.5em',
+    borderRadius: '50%',
+    marginTop: theme.spacing(2),
+    marginLeft: theme.spacing(2),
+  },
+  menuUserName: {
+    color: theme.palette.menu.emailText,
+    fontSize: '1.3rem',
+    fontWeight: '500',
+  },
+  menuUserEmail: {
+    color: theme.palette.menu.emailText,
+    fontSize: '0.9rem',
+    fontWeight: '200',
+  },
+  darkDivider: {
+    background: 'whitesmoke',
+    opacity: '0.1',
+  },
+  List: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: '100%',
+    paddingTop: 0,
+    paddingBottom: 0,
+    '&>a:first-child': {
+      minHeight: '64px',
+      height: '64px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    [theme.breakpoints.up('md')]: {
+      '&>a:first-child': {
+        height: '64px',
+      },
+      '&>a:first-child li': {
+        height: '64px',
+        alignItems: 'center',
+      },
+    },
+  },
+  fullList: {
+    width: 'auto',
+    cursor: 'pointer',
+    paddingBottom: 0
+  },
+  lightFullList: {
+    height: '100vh',
+    backgroundColor: theme.palette.background.default,
+  },
+  darkFullList: {
+    backgroundColor: theme.palette.background.dark,
+  },
+  lightMenuItem: {
+    color: theme.palette.menu.lightText,
+    textDecoration: 'none',
+  },
+  darkMenuItem: {
+    color: theme.palette.menu.darkText,
+    textDecoration: 'none',
+  },
+  darkMenuItemSpecific: {
+    '&:hover,&:active': {
+      color: theme.palette.primary.main,
+    }
+  },
+  links: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: '100%',
+  },
+  linkGroup: {
+    padding: theme.spacing(1.2, 0),
+    paddingLeft: 0,
+  },
+  videothequeLinkGroup: {
+    backgroundColor: theme.palette.background.videotheque,
+  },
+  blogLinkGroup: {
+    backgroundColor: theme.palette.background.blog,
+  },
+  recruteurLinkGroup: {
+    backgroundColor: theme.palette.background.recruteur,
+  },
+  rootListItem: {
+    padding: theme.spacing(1, 2),
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  rootListItemIcon: {
+    padding: theme.spacing(1, 2),
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  ListItemUserConnected: {
+    flexDirection: 'column',
+  },
+  ListItemText: {
+    fontSize: '1em',
+  },
+  icon: {
+    paddingRight: theme.spacing(2.5),
+  },
+  iconAccount: {
+    color: theme.palette.primary.dark,
+  },
+  title: {
+    color: theme.palette.secondary.main,
+    fontSize: '1.5em'
+  },
+  email: {
+    color: theme.palette.menu.emailText,
+    fontSize: '0.9em'
+  },
+  button: {
+    padding: theme.spacing(0.5, 1),
+    textTransform: 'inherit',
+    '& svg': {
+      width: '0.7em',
+      height: '0.7em',
+    },
+  },
+
+  active: {
+    '& span, & svg': {
+      color: theme.palette.primary.main + ' !important',
+    },
+  },
+
+  //DESKTOP PART
+
+  desktopMenuItem: {
+    [theme.breakpoints.down('md')]: {
+      padding: theme.spacing(0.4),
+    },
+    '& span.MuiTypography-root': {
+      fontSize: '0.8rem',
+      fontWeight: '500',
+    },
+  },
+  desktopMenuList: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 0,
+  },
+  appBarDesktopSection: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  appBarDesktopSection1: {
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    borderRight: 'solid 1px whitesmoke',
+  },
+  appBarDesktopSection2: {
+    width: '100%',
+    justifyContent: 'space-between',
+    padding: theme.spacing(0, 2),
+    '& ul': {
+      width: '95%',
+    },
+    '& ul>div': {
+      display: 'flex',
+    },
+    '& ul > div:nth-child(1) a span': {
+      color: theme.palette.primary.dark,
+      '&:hover, &:active': {
+        color: theme.palette.primary.main,
+      }
+    },
+    '& .MuiListItemText-root': {
+      padding: theme.spacing(0, 1),
+      [theme.breakpoints.down('md')]: {
+        padding: theme.spacing(0),
+      },
+    },
+    '& a:last-child .MuiButtonBase-root span': {
+      color: theme.palette.secondary.main,
+    },
+  },
+  appBarDesktopSection3: {
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    backgroundColor: theme.palette.primary.dark,
+    '& a': {
+      display: 'flex',
+      alignItems: 'flex-end',
+    },
+    '& span, & svg': {
+      color: theme.palette.secondary.main,
+    },
+  },
+  toolbarDesktop: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: '64px',
+  },
+  desktopMenuButtonLogin: {
+    background: theme.palette.primary.main,
+    borderColor: theme.palette.primary.main,
+  },
+  rootListItemDesktop: {
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(1),
+    },
+  },
+  iconDesktop: {
+    paddingRight: theme.spacing(2.5),
+    [theme.breakpoints.up('md')]: {
+      paddingRight: 0,
+    },
+  },
+});
+let urlEnv;
+
+class HeaderOffre extends React.Component {
+  state = {
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+    toggle: true
+  };
+
+
+
+  componentDidMount() {
+
+  }
+
+  
+
+  toggleDrawer = (side, open) => () => {
+    this.setState({
+      [side]: open,
+    });
+  };
+
+  onRedirectAccount = e => {
+      urlEnv = (process.env.NODE_ENV !== 'production') ? '//localhost/app_dev.php' : process.env.SERVER_URL;
+      e.preventDefault();
+      var redirectAccountUrl = urlEnv + "/api/talent?bearer=" + localStorage.getItem("ttJWT");
+      window.open(redirectAccountUrl);
+  }
+
+  toggle = () => this.setState(state => ({ toggle: !state.toggle }))
+  chargerPage =(type)=> {
+    console.log(type);
+    //Router.replace(page);
+    sessionStorage.setItem(type+'_currentPage',1);
+
+  } 
+  render() {
+    const { classes } = this.props;
+    const { publicRuntimeConfig } = getConfig();
+
+
+    return (
+      <div className={classes.root}>
+        
+
+        <Drawer anchor="right" open={this.state.right} onClose={this.toggleDrawer('right', false)}>
+          <div
+            tabIndex={0}
+            role="button"
+            onClick={this.toggleDrawer('right', false)}
+            onKeyDown={this.toggleDrawer('right', false)}
+          >{!!this.props.loading &&
+            (<Loader />
+            )}
+            {!!!this.props.loading && !!!this.props.fetched
+              &&
+              <div className={classes.fullList + ' ' + classes.darkFullList}>
+                
+              </div>}
+            {!!!this.props.loading && !!this.props.fetched &&
+              <Fragment>
+                {this.props.user.picture ?
+                  <img alt="talents-tube" src={publicRuntimeConfig.symphonyUrl +publicRuntimeConfig.postedContentUrl+ this.props.user.picture} className={classes.menuAvatar} />
+                  :
+                  <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={classes.menuAvatar} />
+                }
+                <ListItem classes={{ root: classes.rootListItem }} className={classes.ListItemUserConnected}>
+                  <Typography gutterBottom component="h1" className={classes.menuUserName}>
+                    {this.props.user.firstname + " " + this.props.user.lastname}
+                  </Typography>
+
+                  <Typography gutterBottom component="h3" className={classes.menuUserEmail} >
+                    {this.props.user.email}
+                  </Typography>
+                </ListItem>
+
+                <Divider className={classes.darkDivider} />
+
+                {/* TODO:real links */}
+                <Link href="/Candidatures"  >
+                  <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                    <FolderSharedIcon className={classes.icon} />
+                    <ListItemText primary='Mes candidatures'>
+                    </ListItemText>
+                  </ListItem></a>
+                </Link>
+                <Link href="/profileStep"  >
+                <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                    <AccountCircleIcon className={classes.icon} />
+                    <ListItemText primary='Mon compte'>
+                    </ListItemText>
+                  </ListItem></a>
+                </Link>
+                
+                <Link href="/Parametres"  >
+                  <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                    <SettingsIcon className={classes.icon} />
+                    <ListItemText primary='Paramètres de notification'>
+                    </ListItemText>
+                  </ListItem></a>
+                </Link>
+                <Link href="/" >
+                  <a onClick={() => {
+                    localStorage.removeItem("ttJWT");
+                    return this.props.requestLogout();
+                  }} className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                      <PowerSettingsNewIcon className={classes.icon} />
+                      <ListItemText primary='Déconnexion'>
+                      </ListItemText>
+                    </ListItem></a>
+                </Link>
+              </Fragment>
+            }
+          </div>
+        </Drawer>
+
+        {isWidthUp('md', this.props.width) ?
+          (<AppBar position="static" className={classes.appBar}>
+            <Toolbar disableGutters={true} className={classes.toolbarDesktop}>
+              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection1}>
+                <Link href="/"  >
+                  <a className={classes.darkMenuItem}>
+                    <ListItem classes={{ root: classes.rootListItemDesktop }}>
+                      <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.desktopMenuLogo} />
+                    </ListItem>
+                  </a>
+                </Link>
+              </section>
+              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection2}>
+                {/* <IconButton className={classes.menuButton} onClick={this.toggleDrawer('left', true)}
+                  color="inherit" aria-label="Open drawer">
+                  <MenuIcon />
+                </IconButton> */}
+                {/* <ButtonBase name='back'
+                  focusRipple
+                  className={classes.back}
+                  focusVisibleClassName={classes.focusVisible}
+                  onClick={() => Router.back()}>
+                  <ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
+                </ButtonBase> */}
+                <List className={classes.desktopMenuList}>
+                  <div>
+                    <ActiveLink activeClassName={classes.active} href="/Offres"   >
+                      <a className={classes.desktopMenuItem} >
+                        <ListItemText primary="Offres d'emploi">
+                        </ListItemText>
+                      </a>
+                    </ActiveLink>
+                    <ActiveLink activeClassName={classes.active} href="/Entreprises"    >
+                      <a className={classes.desktopMenuItem}>
+                        <ListItemText primary='Nos entreprises'>
+                        </ListItemText>
+                      </a>
+                    </ActiveLink>
+                    <ActiveLink activeClassName={classes.active} href="/Help"  >
+                      <a className={classes.desktopMenuItem}>
+                        <ListItemText primary='Comment ça marche ?'>
+                        </ListItemText>
+                      </a>
+                    </ActiveLink>
+                  </div>
+
+                  <div>
+                    {!!!this.props.loading && !!!this.props.fetched &&
+                      <Fragment>
+                        <Link href="/Login?inscription=true"  >
+                          <a className={classes.desktopMenuItem}>
+                            <ListItem classes={{ root: classes.rootListItemDesktop }}>
+                              <Button
+                                variant="outlined"
+                                className={classes.button + ' ' + classes.desktopMenuButtonRegister}>
+                                <PersonAddIcon className={classes.iconDesktop} />
+                                <ListItemText classes={{ primary: classes.ListItemText }} primary='Inscription'></ListItemText>
+                              </Button >
+                            </ListItem>
+                          </a>
+                        </Link>
+
+                        <Link href="/Login"  >
+                          <a className={classes.desktopMenuItem}>
+                            <ListItem classes={{ root: classes.rootListItemDesktop }}>
+                              <Button
+                                variant="outlined"
+                                className={classes.button + ' ' + classes.desktopMenuButtonLogin}>
+                                <PersonIcon className={classes.iconDesktop} />
+                                <ListItemText classes={{ primary: classes.ListItemText }} primary='Connexion'></ListItemText>
+                              </Button >
+                            </ListItem>
+                          </a>
+                        </Link>
+                      </Fragment>
+                    }
+                    {!!!this.props.loading && !!this.props.fetched &&
+                      <IconButton
+                        edge="end"
+                        aria-label="Profile"
+                        aria-controls={'primary-search-account-menu'}
+                        aria-haspopup="true"
+                        onClick={this.toggleDrawer('right', true)}
+                        className={classes.iconAccount + ' cypConnexionMenu'}
+                      >
+                        <AccountCircleOutlinedIcon />
+                      </IconButton>
+                    }
+                  </div>
+                </List>
+              </section>
+              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
+
+                <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
+                  <ListItemText primary='Espace recruteurs'>
+                  </ListItemText>
+                  <ArrowForward className={classes.icon} />
+                </a>
+              </section>
+            </Toolbar>
+          </AppBar>)
+          :
+          (
+            <AppBar position="static" className={classes.appBar}>
+              <Toolbar className={classes.toolbar}>
+                {/* <IconButton className={classes.menuButton} onClick={this.toggleDrawer('left', true)}
+                  color="inherit" role="button">
+                  <MenuIcon />
+                </IconButton> */}
+                <ButtonBase name='back'
+                  focusRipple
+                  className={classes.back}
+                  focusVisibleClassName={classes.focusVisible}
+                  onClick={() => Router.back()}>
+                  <ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
+                </ButtonBase>
+                <div className={classes.grow} />
+                <Link href="/"  >
+                  <a><img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} /></a>
+                </Link>
+                <div className={classes.grow} />
+                <IconButton
+                  edge="end"
+                  aria-label="Profile"
+                  aria-controls={'primary-search-account-menu'}
+                  aria-haspopup="true"
+                  onClick={this.toggleDrawer('right', true)}
+                  className={classes.iconAccount + ' cypConnexionMenu'}
+
+                >
+                  <AccountCircleOutlinedIcon />
+                </IconButton>
+              </Toolbar>
+            </AppBar>
+          )}
+      </div >
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+    fetched: !!state.user.fetched,
+    loading: !!state.user.loading
+  };
+}
+export default (connect(mapStateToProps, { fetchCurrentUserRequest, requestLogout })(withStyles(styles)(withWidth()(HeaderOffre))));
@@ -17,7 +17,7 @@ const styles = theme => ({
  card: {
    display: 'flex',
    minHeight: '21vh',
-    maxHeight: '32vh',
+    // maxHeight: '32vh',
    borderRadius: '5px',
    width: '100%',
    cursor: 'pointer',
@@ -38,7 +38,7 @@ const styles = theme => ({
    },
    [theme.breakpoints.up('md')]: {
      minHeight: '15vh',
-      maxHeight: '20vh',
+      // maxHeight: '20vh',
    },
    margin: '1vh 2vh 1vh 2vh',
    [theme.breakpoints.up('sm')]: {
@@ -17,8 +17,28 @@ const RTCRecorder = dynamic(() => import('RecordRTC'), {

 const videoJsOptions = {
    controls: true,
-
+    languages: {
+        fr: {
+          
+            Replay: 'Jouer'
+        }
+      },
+    autoplay:true,
+    preload:"auto",
+    playsinline : true,
+    //videoEngine: 'webm-wasm',
+    //liveui : true,
    fluid: true,
+    nativeControlsForTouch:false,
+    controlBar: {
+        // hide fullscreen and volume controls
+        fullscreenToggle: false,
+        volumePanel: false,
+        deviceButton: false,
+        recordIndicator:true,
+        recordToggle: true
+    },
+    // poster: "https://vignette.wikia.nocookie.net/charabattles/images/e/eb/Chuck_norris.jpg/revision/latest/scale-to-width-down/400?cb=20170412123612&path-prefix=fr",
    plugins: {
      /*
      // wavesurfer section is only needed when recording audio-only
@@ -81,10 +101,42 @@ class Recorder extends Component {
                ' and recordrtc ' + RTCRecorder.VERSION;
            videojs.log(version_info);
        });
+        var vid= this.player;
+        this.player.bigPlayButton.hide();
+
+
+        // When you pass text in options it just creates a control text,
+// which is displayed as tooltip when hovered on 
+// this button viz the span in you div,
+var myButton = this.player.controlBar.addChild("button");
+
+
+
+// There are many functions available for button component 
+// like below mentioned in this docs 
+// https://docs.videojs.com/button. 
+// You can set attributes and clasess as well.
+
+// Getting html DOM
+var myButtonDom = myButton.el();
+//var myButtonDom2 = myButton2.el();
+// Since now you have the html dom element 
+// you can add click events
+
+
+// Now I am setting the text as you needed.
+myButtonDom.innerHTML = "Youi";
+
+myButtonDom.onclick = function(){
+  //alert("Redirecting");
+  vid.pause();
+}  
+   

        // device is ready
        this.player.on('deviceReady', () => {
            console.info('device is ready!');
+            this.player.record().start();
            this.setState({canSend:false});
        });

@@ -129,6 +181,23 @@ class Recorder extends Component {
        this.props.uploader(formData);
    }

+    pausePlayer = () => {
+        // console.log('accessing recording: ', this.player.recordedData)
+        if (this.player) {
+            //this.player.recorder.start()
+            this.player.ready();
+            this.player.record().getDevice();
+            
+        }
+     }
+    
+     arretPlayer = () => {
+        // console.log('accessing recording: ', this.player.recordedData)
+        if (this.player) {
+            this.player.record().stop();
+        }
+     }
+
    render() {
        const { classes, titreBouton } = this.props;
        let titreButtonLabel= "Envoyer";
@@ -150,6 +219,11 @@ class Recorder extends Component {
                        onClick={this.sendBlob}>
                        {titreButtonLabel}
                    </Button>}
+                    <Button className={classes.button} variant="outlined" color="primary" onClick={this.pausePlayer}>Lancer enregistrement</Button>
+                    <Button className={classes.button}  variant="outlined" color="primary" onClick={this.arretPlayer}>Arreter enregistrement</Button>
+                </div>
+                <div id="controleNav">
+                    
                </div>
            </div>
        );
@@ -277,15 +277,15 @@ class Register extends React.Component {
                        S'inscrire
                    </Button>

-                    <Typography
+                    {/* <Typography
                        paragraph={true}
                        align="center"
                        className={classes.conditionalText}
-                    >Ou</Typography>
+                    >Ou</Typography> */}

                </form>

-                <SocialButtonsAuth linkedInAuth={this.props.linkedInAuth} facebookAuth={this.props.facebookAuth} />
+                {/* <SocialButtonsAuth linkedInAuth={this.props.linkedInAuth} facebookAuth={this.props.facebookAuth} /> */}

                <div classes={classes.form}>
                    <Typography
@@ -51,17 +51,17 @@ export default function SocialShare(props) {

    return (
        <div className={classes.root}>
-            <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)}>
+            <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
                <Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')} color="secondary" />
            </a>
-            <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)}>
+            <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
                <Icon className={clsx(classes.icon, classes.TwitterIcon, 'fab fa-twitter')} color="secondary" />
            </a>
-            <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talent's Tube")}>
+            <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talent's Tube")} target="_blank">
                <Icon className={clsx(classes.icon, classes.LinkedinIcon, 'fab fa-linkedin-in')} color="secondary" />
            </a>
            {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
-            <a href={"mailto:?subject=Offre d'emploi Talent's Tube&body=Regardez cette offre : " + props.url} >
+            <a href={"mailto:?subject=Offre d'emploi Talent's Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
                <Icon className={clsx(classes.icon, classes.MailIcon, 'fas fa-envelope')} color="secondary" />
            </a>
        </div>
@@ -1,5 +1,6 @@
-import React from 'react';
-import videojs from 'video.js'
+import React, { lazy } from 'react';
+const videojs = lazy(() => import('video.js'));
+//import videojs from 'video.js'

 export default class VideoPlayer extends React.Component {
  componentDidMount() {
@@ -1,4 +1,4 @@
-import Griddle, { utils } from "griddle-react";
+import Griddle, { utils, plugins } from "griddle-react";
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 import { withStyles } from '@material-ui/core/styles';
@@ -7,6 +7,7 @@ import TextField from '@material-ui/core/TextField';
 import GriddleCustomTable from "../organisms/GriddleCustomTableComponent";
 import GriddleCustomNextButton from "../organisms/GriddleCustomNextButton"
 import GriddleCustomPreviousButton from "../organisms/GriddleCustomPreviousButton"
+import GriddleCustomPageDropdown from "../organisms/GriddleCustomPageDropdown"
 import Loader from './loader'
 import IconSearch from '@material-ui/icons/Search';
 import NoResult from './../atoms/NoResult';
@@ -80,18 +81,37 @@ class Grid extends Component {
        recordCount: 0,
        promoted: false,
        filterText: "",
+        // options: [],
    };

    async componentDidMount() {
        
        this.setState({pageSize:this.props.limit})
-
+        let data = sessionStorage.getItem(this.props.type+'_currentPage');
+        let current;
+        if(data){
+            current=data;
+        }else{
+            current=this.state.currentPage;
+        }
        this.props.dataFetcher(
            {
-                offset: this.state.currentPage,
+                offset: ((current-1)*this.props.limit)+1,
                limit: this.props.limit
            }
        );
+        // let options = [];
+        // let startIndex = Math.max(this.props.currentPage - 5, 0);
+        // let endIndex = Math.min(startIndex + 11, this.props.maxPage);
+
+        // if (this.props.maxPage >= 11 && (endIndex - startIndex) <= 10) {
+        //     startIndex = endIndex - 11;
+        // }
+
+        // for(let i = startIndex; i < endIndex ; i++){
+        //   let selected = this.props.currentPage == i ? "current-page-selected" : "";
+        //     options.push(<button className={selected} data-value={i} onClick={this.pageChange}>{i + 1}</button>);
+        // }
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
@@ -106,10 +126,17 @@ class Grid extends Component {
        const { currentPage, pageSize, filterText, promoted } = this.state;

        if (nextProps.promoted != this.state.promoted) {
+            let data = sessionStorage.getItem(this.props.type+'_currentPage');
+            let current;
+            if(data){
+                current=data;
+            }else{
+                current=this.state.currentPage;
+            }
            this.setState({ promoted: nextProps.promoted });
            this.props.dataFetcher(
                {
-                    offset: this.state.currentPage,
+                    offset: ((current-1)*(this.state.pageSize+1))+1,
                    limit: this.state.pageSize,
                    keyword: filterText,
                    isPromoted: nextProps.promoted
@@ -123,19 +150,34 @@ class Grid extends Component {
    _onNext = () => {
        const { currentPage, pageSize, filterText, promoted } = this.state;
        this.props.dataFetcher({ offset: currentPage * pageSize, limit: pageSize, keyword: filterText, isPromoted: promoted })
+        sessionStorage.setItem(this.props.type+'_currentPage', currentPage+1);
+
    };

    _onPrevious = () => {
        const { currentPage, pageSize, filterText, promoted } = this.state;
        this.props.dataFetcher({ offset: (currentPage - 2) * pageSize + 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
+        sessionStorage.setItem(this.props.type+'_currentPage', currentPage-1);
+
    };

-    _onGetPage = pageNumber => {
+    _onGetPage = (pageNumber, page) => {
+        const { pageSize, filterText, promoted } = this.state;
+        this.props.dataFetcher({ offset: (page - 1) * pageSize + 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
+        console.log(pageNumber);
+        console.log(page);
+        sessionStorage.setItem(this.props.type+'_currentPage', page);
+        console.log("On get Page");
+    };
+
+    _onSetPage = pageNumber => {
        const { pageSize, filterText, promoted } = this.state;
        this.props.dataFetcher({ offset: (pageNumber - 1) * pageSize + 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
+        console.log("On set Page");
    };

    _onFilter = filterText => {
+        sessionStorage.setItem(this.props.type+'_currentPage', 1);
        this.setState({ currentPage: 1 });
        const { currentPage, pageSize, promoted } = this.state;
        this.setState({ filterText });
@@ -148,11 +190,12 @@ class Grid extends Component {

    searchSubmit = () => {
        const { currentPage, pageSize, promoted, filterText } = this.state;
-
+        sessionStorage.setItem(this.props.type+'_currentPage', 1);
        this.props.dataFetcher({ offset: 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
    }

    render() {
+        
        const { classes, placeholder } = this.props
        const style = {
            styles: {
@@ -203,7 +246,7 @@ class Grid extends Component {
                    fontSize: '0.9em',
                    fontWeight: '600',
                    fontFamily: 'Dosis',
-                    display: 'none',
+                    // display: 'none',
                },
            }
        }
@@ -211,10 +254,12 @@ class Grid extends Component {
        const { filterText, data, currentPage, pageSize, recordCount, loading } = this.state;

        const NewLayout = ({ Table, Pagination, Filter }) => (
+            
            <div>
                {/* <Filter /> */}
                <Table />
                <Pagination />
+                
            </div>
        );

@@ -278,6 +323,7 @@ class Grid extends Component {
                                recordCount,
                            }}
                            useCustomPagerComponent="true"
+                            plugins={plugins.localPlugin}
                            components={{
                                Layout: NewLayout,
                                Row: this.props.CustomRowComponent,
@@ -285,12 +331,15 @@ class Grid extends Component {
                                TableBody: CustomTableBody,
                                PreviousButton: GriddleCustomPreviousButton,
                                NextButton: GriddleCustomNextButton,
+                                PageDropdown: GriddleCustomPageDropdown,
+                                
                            }}
                            events={{
                                onNext: this._onNext,
                                onPrevious: this._onPrevious,
                                onGetPage: this._onGetPage,
-                                onFilter: this._onFilter
+                                onFilter: this._onFilter,
+                                onSetPage: this._onSetPage
                            }}
                            styleConfig={style}
                        />
@@ -0,0 +1,100 @@
+import { withStyles } from '@material-ui/core/styles'
+import Router from 'next/router';
+import RootContainer from '../atoms/RootContainer'
+import ButtonBase from "@material-ui/core/ButtonBase";
+import ArrowLeft from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+const styles = theme => ({
+  inner: {
+    height: '100%',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.04), 0 1px 10px 0 rgba(0, 0, 0, 0.04), 0 3px 5px -1px rgba(0, 0, 0, 0.04)',
+    backgroundColor: '#1E2327',
+  },
+  head: {
+    zIndex: '999',
+    width: '100%',
+    height: '64px',
+    background: theme.palette.background.main,
+    position: 'fixed',
+    [theme.breakpoints.up('sm')]: {
+      height: '64px'
+    }
+  },
+  icon: {
+    fontSize: '3em',
+    textAlign :'right'
+  },
+  title: { 
+    color: theme.palette.primary.dark,
+  },
+  content: {
+    top: '64px',
+    width: '100%',
+    minHeight: '1000px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    position: 'relative',
+    backgroundColor: '#1E2327',
+  },
+  contentFixed: {
+     height: 'calc(100vh - 64px)',
+    backgroundColor: '#1E2327',
+  },
+  back: {
+    zIndex: 10,
+    border: 'none',
+    padding: theme.spacing(0.2),
+    textAlign: 'center',
+    textDecoration: 'none',
+    borderRadius: '50%',
+    position: 'absolute',
+    right: theme.spacing(1),
+    backgroundColor: '#fff'
+  },
+  player: {
+    background:'#1E2327'
+  },
+});
+
+function LayoutBack(props) {
+
+  const { classes, height} = props;
+  
+  //height fixed = height 100vh
+  const content = (height == 'fixed') ? classes.content+' '+classes.contentFixed : classes.content
+  return (
+    <RootContainer align='center' className={content}>
+      <div id="H" className={classes.head}>
+        <div className={classes.inner}>
+          <ButtonBase name='back'
+            focusRipple
+            className={classes.back}
+            focusVisibleClassName={classes.focusVisible}
+            onClick={() => Router.push(props.url)}>
+            <ArrowLeft color="#fff" classes={{ root: classes.icon }}></ArrowLeft>
+          </ButtonBase>
+          <Typography
+            component="h1"
+            align="center"
+            className={classes.title}
+          >
+            {props.text}
+          </Typography>
+        </div>
+      </div>
+      <div id="C" className={content}>
+        {props.children}
+      </div>
+
+    </RootContainer>
+  )
+}
+
+export default withStyles(styles)(LayoutBack)
@@ -10,6 +10,7 @@ import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 import Header from '../organisms/Header'
 import {AppBar,CssBaseline,Container,Toolbar,IconButton,Typography} from "@material-ui/core";
 import Hidden from '@material-ui/core/Hidden';
+import Link from 'next/link'

 const styles = theme => ({
  RootContainer: {
@@ -65,12 +66,21 @@ const styles = theme => ({
  },
  button: {
    textTransform: 'inherit',
-    marginLeft: theme.spacing(8),
-    marginRight: theme.spacing(8),
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
    padding: theme.spacing(1.2, 2),
    color: theme.palette.secondary.main,
    backgroundColor: theme.palette.primary.important,
  },
+  voirOffre: {
+    textTransform: 'inherit',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    padding: theme.spacing(1.2, 2),
+    color: '#BBBCBD',
+    backgroundColor: '#F3F3F4',
+    
+  },
 })

 function LayoutCompany(props) {
@@ -105,6 +115,13 @@ function LayoutCompany(props) {
          
          <Hidden mdUp>
          <div id="F" className={classes.foot}>
+          <Link href="#discover"  >
+            <Button
+                variant="contained"
+                className={classes.voirOffre + ' cypButtonApply'}
+            >Voir les offres</Button>
+                                            
+          </Link>
            <Button
              variant="contained"
              className={classes.button}
@@ -5,9 +5,11 @@ import Router from 'next/router';
 import RootContainer from '../atoms/RootContainer'
 import ButtonBase from "@material-ui/core/ButtonBase";
 import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
-import Header from '../organisms/Header'
+import Header from '../organisms/HeaderOffre'
+import SocialShare from '../organisms/SocialShare'
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 import Hidden from '@material-ui/core/Hidden';
+import Link from 'next/link'

 const styles = theme => ({
  foot: {
@@ -62,16 +64,28 @@ const styles = theme => ({
    color: theme.palette.secondary.main,
    backgroundColor: theme.palette.primary.important,
  },
+  voirEntreprise: {
+    textTransform: 'inherit',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    padding: theme.spacing(1.2, 2),
+    color: '#BBBCBD',
+    backgroundColor: '#F3F3F4',
+
+  },
+  pourvuButton:{
+        padding :'10px'
+  },
 })

 function LayoutOffre(props) {

-  const { classes, offreId, isProvided } = props;
+  const { classes, offreId, offre, isProvided, socialShareUrl } = props;
  const contentClass = (!isProvided) ? classes.contentDefault : classes.contentProvided

  return (
    <RootContainer>
-      {isWidthUp('sm', props.width) ?
+      {isWidthUp('xs', props.width) ?
        (<Header />)
        :
        (<ButtonBase name='back'
@@ -91,13 +105,36 @@ function LayoutOffre(props) {
          <div id="F" className={classes.foot}>
            {/* <div className={classes.inner}>
          <div className={classes.grow} /> */}
+            {/* <Link href={`/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`} >
+              <Button
+                  variant="contained"
+                  className={classes.voirEntreprise + ' cypButtonApply'}
+              >Voir l'entreprise</Button>              
+             </Link> */}
+            
            <Button
              variant="contained"
              className={classes.button + ' cypButtonApply'}
              classes={{ root: classes.rootButton}}
              onClick={() => Router.push(`/Reponse?adId=${offreId}`)}
            >
-              Postuler</Button>
+              Postuler
+            </Button>
+            <SocialShare url={socialShareUrl} />
+
+            {/* <div className={classes.grow} />
+        </div> */}
+          </div>
+        )}
+        {isProvided && (
+          <div id="F" className={classes.foot}>
+            {/* <div className={classes.inner}>
+          <div className={classes.grow} /> */}
+            
+            
+            <Button variant="contained" disabled className={classes.pourvuButton}>
+                                        Pourvue
+            </Button>
            {/* <div className={classes.grow} />
        </div> */}
          </div>
@@ -6,6 +6,7 @@ const styles = theme => ({
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
+    textAlign: 'center',
    justifyContent: 'center',
    fontFamily: 'Dosis',
    fontWeight: '500',
@@ -19,7 +20,7 @@ class Loader extends React.Component {
  render() {
    const { classes } = this.props;
    return (
-      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement...</div>
+      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement... </div>
    )

  }
@@ -0,0 +1,29 @@
+import React, { Fragment } from 'react'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import { withStyles } from '@material-ui/core/styles'
+const styles = theme => ({
+  loader: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center',
+    justifyContent: 'center',
+    fontFamily: 'Dosis',
+    fontWeight: '500',
+    fontSize: '1em',
+    padding: theme.spacing(6,0),
+    color: theme.palette.primary.main,
+  },
+})
+
+class LoaderVideo extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement... <br/>Le temps de chargement peut varier de quelques secondes à <b>plusieurs minutes</b> en fonction de la qualité de votre connexion internet.<br/></div>
+    )
+
+  }
+}
+
+export default withStyles(styles)(LoaderVideo)
@@ -40,10 +40,21 @@ module.exports = withPlugins(
    }],
    [{
      publicRuntimeConfig: {
-        symphonyUrl: 'https://recruteur.talentstube.com',
+        // DEV
+        // symphonyUrl: 'http://localhost/app_dev.php/',
+        // blogUrl: 'https://blog.talentstube.com',
+        // frontServerUrl: 'http://localhost:3000',
+        // cvThequeUrl: 'https://recruteur.talentstube.com',
+        // PROD
+        symphonyUrl: 'https://recruteur.talentstube.com/',
        blogUrl: 'https://blog.talentstube.com',
-        frontServerUrl: 'https://www.talentstube.com',
-        cvThequeUrl: 'https://cvtheque.talentstube.com/',
+        frontServerUrl: 'https://www.talentstube.com/',
+        cvThequeUrl: 'https://recruteur.talentstube.com',
+        // PRE PROD
+        // symphonyUrl: 'https://pp.talentstube.com/',
+        // blogUrl: 'https://blog.talentstube.com',
+        // frontServerUrl: 'https://pp.app.talentstube.com/',
+        // cvThequeUrl: 'https://recruteur.talentstube.com',
        adListDefaultUrl: '/statique/images/default/default_picture_company.svg',
        cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
        postedContentUrl: '/uploads/img/',
@@ -52,6 +63,7 @@ module.exports = withPlugins(
          "siteKey": "6LdyqLwUAAAAADKI5uC7d5W9VqVgzd8VEmMU2Yi-"
        },
        applicationServerPublicKey: 'BNFyiyPiLH97Dgc0m1vXluUNaCN6y3Hkgd4YcqS2lVkP8my3tq2D5gM5g7cY6R4VxC7GljSzkLRu+k+oO+2TtjU='
+        //applicationServerPublicKey: 'BG2lV673DvB67dzEwX9GKfds3sXaEdtZo2oWO1cO2xUdTJAFZ_rV_UrP1nHQz-F8LJNO9HxG0kmQRIb54JL1ZCA'
      }
    }]
  ],
@@ -11,6 +11,7 @@
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@ostai/next-css": "^1.0.2",
+    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.18.0",
    "connect-mongo": "^2.0.1",
    "cross-env": "^5.2.0",
@@ -47,6 +48,7 @@
    "prop-types": "latest",
    "react": "^16.9.0",
    "react-ad-block-detect": "^1.0.1",
+    "react-autosuggest": "^10.0.2",
    "react-dom": "^16.9.0",
    "react-ga": "^2.5.7",
    "react-google-recaptcha": "^2.0.1",
@@ -54,6 +56,7 @@
    "react-jss": "latest",
    "react-moment": "^0.9.7",
    "react-redux": "^7.0.3",
+    "react-sticky-box": "^0.9.3",
    "react-swipeable-views": "^0.13.3",
    "reactstrap": "^6.4.0",
    "recordrtc": "^5.5.4",
@@ -188,7 +188,7 @@ class Candidature extends React.Component {
                                                        {this.props.user.firstname + " " + this.props.user.lastname}
                                                    </Typography>
                                                    <Typography gutterBottom className={classes.userTextDate}>
-                                                        Envoyée le  {(new Date(this.props.answer.c_time)).toLocaleDateString("fr-FR")}
+                                                        Envoyé le  {(new Date(this.props.answer.c_time)).toLocaleDateString("fr-FR")}
                                                    </Typography>
                                                </div>
                                            </section>
@@ -29,7 +29,7 @@ export default function HorizontalNonLinearStepper() {
  return (
    <Layout>
      <Head>
-          <title key="title">Profile – Talents Tube</title>
+          <title key="title">Profil – Talents Tube</title>
          <meta key="robots" name="robots" content="noindex, nofollow"></meta>
      </Head>
        <div >
@@ -84,10 +84,20 @@ class ConfirmAccount extends Component {
                                e-mail validé
                            </Typography>
                            <Typography gutterBottom align="left" className={classes.text}>
-                                Votre email a bien été validé.
+                                Votre email a bien été validé. 
+                                
                            </Typography>
                            <Typography gutterBottom align="left" className={classes.text}>
                                Vous pouvez maintenant vous connecter.
+                                <Button
+                                    variant="contained"
+                                    className={classes.button}
+                                    classes={{ root: classes.rootButton }}
+                                    onClick={() => Router.push('/Login')}
+                                >
+                                    Connexion
+                                </Button>
+
                            </Typography>
                            <section className={classes.bottomContainer}>
                                <Button
@@ -1,5 +1,5 @@

-import React, { Fragment } from 'react'
+import React, { Fragment,lazy, Suspense } from 'react'
 import Router from 'next/router'
 import { connect } from "react-redux"
 import PropTypes from 'prop-types'
@@ -16,7 +16,8 @@ import { fetchCompanyRequest, clearCompany, countCompanyViewRequest } from '../a
 import IconText from '../components/atoms/IconText'
 import IconTextInline from '../components/atoms/IconTextInline'
 import SimpleCollapse from '../components/atoms/SimpleCollapse'
-import VideoVimeo from '../components/atoms/VideoVimeo'
+const VideoVimeo = lazy(() => import('../components/atoms/VideoVimeo'));
+//import VideoVimeo from '../components/atoms/VideoVimeo'
 import SocialShare from '../components/organisms/SocialShare'
 import Loader from '../components/templates/loader'
 import _ from "lodash"
@@ -25,7 +26,7 @@ import withWidth from '@material-ui/core/withWidth'
 import Hidden from '@material-ui/core/Hidden';
 import NoResult from '../components/atoms/NoResult';
 import OgHead from '../components/atoms/OgHead';
-
+const renderLoader = () => <p>Chargement</p>;
 const styles = theme => ({
    companyContainer: {
        [theme.breakpoints.up('md')]: {
@@ -278,13 +279,25 @@ const styles = theme => ({
    },
    button: {
        textTransform: 'inherit',
-        marginLeft: theme.spacing(4),
-        marginRight: theme.spacing(4),
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
        padding: theme.spacing(1.2, 2),
        color: theme.palette.secondary.main,
        backgroundColor: theme.palette.primary.important,
        alignSelf: 'center',
    },
+    voirOffre: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        padding: theme.spacing(1.2, 2),
+        color: '#BBBCBD',
+        backgroundColor: '#F3F3F4',
+
+    },
+    buttonContainer: {
+        alignItems: 'right',
+    },
    chip: {
        color: theme.palette.secondary.main,
        backgroundColor: theme.palette.primary.main,
@@ -415,17 +428,28 @@ class Entreprise extends React.Component {
                                            :
                                            (<Chip label={nbOffre} className={classes.chip + ' ' + classes.chipHeader} />)
                                        }
+                                        
                                        {/* ville */}
                                    </div>
                                </div>
+                                <div className={classes.buttonContainer}>
+                                
+                                <Link href="#discover"  >
+                                            <Button
+                                                variant="contained"
+                                                className={classes.voirOffre + ' cypButtonApply'}
+                                            >Voir les offres</Button>
+                                            
+                                </Link>
                                <Button
                                    variant="contained"
                                    className={classes.button}
                                    onClick={() => Router.push(`/Reponse?companyId=${company.id}`)}
                                >Candidature spontanée</Button>
+                                </div>
                            </section>
                        </Hidden>
-                        {company.presentation_video && <VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} autoplay='1' />}
+                        {company.presentation_video &&  <Suspense fallback={renderLoader()}><VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} autoplay='1' /></Suspense>}
                        <div className={classes.container}>
                            <Hidden mdUp>
                                <section className={classes.headerContainer}>
@@ -504,6 +528,7 @@ class Entreprise extends React.Component {
                                        className={classes.button}
                                        onClick={() => Router.push(`/Reponse?companyId=${company.id}`)}
                                    >Candidature spontanée</Button>
+                                    
                                    <Typography className={classes.contentCondition}>
                                        ou
                                    </Typography>
@@ -544,7 +569,7 @@ class Entreprise extends React.Component {
                                            Découvrir le <span className={classes.primary}>territoire</span>
                                        </Typography>
                                        <section className={classes.discoverTerritoryContentContainer}>
-                                            <VideoVimeo classesOverride={classes.videoVimeo} videoId={territoryVideoId} autoplay='0' />
+                                            <Suspense fallback={renderLoader()}><VideoVimeo classesOverride={classes.videoVimeo} videoId={territoryVideoId} autoplay='0' /></Suspense>
                                            <Typography className={classes.territoryTitle}>
                                                {(company.territories) ? company.territories[0].territory.brand_name : ''}
                                            </Typography>
@@ -112,6 +112,7 @@ class Entreprises extends React.Component {
            currentPage={this.props.currentPage}
            recordCount={this.props.recordCount}
            loading={this.props.loading}
+            type="entreprises"
            limit={12}
            placeholder={"Rechercher une entreprise"}
          />
@@ -156,7 +156,7 @@ function Help(props) {
        <Typography
          className={classes.text}
          gutterBottom>
-          Suivez ce <a href="https://blog.talentstube.com/faire-cv-video" target="_blank" >lien</a>
+          Suivez ce <a href="https://blog.talentstube.com/cv-video" target="_blank" >lien</a>
        </Typography>
       
        
@@ -246,7 +246,7 @@ class LoginPage extends React.Component {
                    )}
                    {!loading && (
                        <Fragment>
-                            <AppBar className={classes.AppBar} color="default">
+                            {/* <AppBar className={classes.AppBar} color="default">
                                <Tabs
                                    value={this.state.tabIndex}
                                    onChange={this.handleChange}
@@ -256,7 +256,7 @@ class LoginPage extends React.Component {
                                    <Tab label="Connexion" className={classes.tab} />
                                    <Tab label="Inscription" className={classes.tab} />
                                </Tabs>
-                            </AppBar>
+                            </AppBar> */}
                            <SwipeableViews
                                axis={'x'}
                                index={this.state.tabIndex}
@@ -316,15 +316,15 @@ class LoginPage extends React.Component {
                                            </Typography>


-                                            <Typography
+                                            {/* <Typography
                                                paragraph={true}
                                                align="center"
                                                className={classes.conditionalText}
-                                            >Ou</Typography>
+                                            >Ou</Typography> */}


                                        </form>
-                                        <SocialButtonsAuth linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} />
+                                        {/* <SocialButtonsAuth linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} /> */}

                                        <div className={classes.form}>
                                            <Typography
@@ -1,19 +1,21 @@

-import React from 'react';
+import React, { Fragment,lazy, Suspense } from 'react'
 import { connect } from "react-redux";
 import PropTypes from 'prop-types';
 import getConfig from 'next/config'
 import { withStyles } from '@material-ui/core/styles';
 import LayoutOffre from "../components/templates/LayoutOffre";
-import OffreDetail   from "../components/organisms/OffreDetail";
+const OffreDetail = lazy(() => import('../components/organisms/OffreDetail'));
+//import OffreDetail   from "../components/organisms/OffreDetail";
 import { fetchJobRequest, clearAd, countAdViewRequest } from '../actions/ads'
 import _ from "lodash/string";
-
+const renderLoader = () => <p>Chargement</p>;
 const styles = theme => ({

 });

 const { publicRuntimeConfig } = getConfig()
+
 class Offre extends React.Component {

    componentDidMount() {
@@ -29,10 +31,11 @@ class Offre extends React.Component {
    }
    render() {
        const { classes, offre } = this.props;
-
+        const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Offre/${offre.id}-${_.kebabCase(offre.title)}`;
        return (
-            <LayoutOffre backLink="/Offres" offreId={offre.id} isProvided={offre.is_promoted}>
-                <OffreDetail offre={offre}/>
+            <LayoutOffre backLink="/Offres" offreId={offre.id} offre={offre} isProvided={offre.is_promoted}>
+                {/* <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense> */}
+                <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense>
            </LayoutOffre>
        );
    }
@@ -80,9 +80,21 @@ class Offres extends React.Component {

  constructor(props) {
    super(props);
+    
+  }
+  voirOffre(){
+    this.props.togglePromotedFilterRequest()
+    sessionStorage.setItem('offres_currentPage',1);
+  }
+
+  static getInitialProps({ query }) {
+    const { init } = query
+    //this.props.promotedFilter =init
+    return { init };
  }

  render() {
+    
    const { classes } = this.props;
    const countColor = this.props.promotedFilter ? classes.provided : classes.primary;
    const btnClass = this.props.promotedFilter ? classes.buttonDefault : classes.buttonProvided;
@@ -113,12 +125,14 @@ class Offres extends React.Component {
            recordCount={this.props.recordCount}
            promoted={this.props.promotedFilter}
            loading={this.props.loading}
+            type="offres"
            placeholder={"Rechercher un job"}
          />
          <Button
          name="Rechercher un job"
            variant="outlined"
-            onClick={() => this.props.togglePromotedFilterRequest()}
+            onClick={() => this.voirOffre()
+            }
            className={classes.button + ' ' + btnClass}>
            {this.props.promotedFilter? 'Voir les offres en cours' : 'Voir les offres pourvues'}
          </Button>
@@ -0,0 +1,82 @@
+import React, { Component, Fragment,lazy, Suspense } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography'
+import LayoutBackUrl from '../components/templates/LayoutBackUrl';
+import Router from 'next/router';
+import Head from 'next/head'
+// const VideoVimeo = lazy(() => import('../components/atoms/VideoVimeo'));
+import VideoVimeo from '../components/atoms/VideoVimeo';
+import queryString from 'query-string';
+const renderLoader = () => <p>Chargement</p>;
+const styles = theme => ({
+    player: {
+        background:'#1E2327',
+        height: '100%'
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        height: '100%',
+        padding: '0 10px',
+    },
+    bottomContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignSelf: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        bottom: 0,
+    },
+    title: {
+        fontFamily: 'Dosis',
+        fontSize: '1.5em',
+        fontWeight: '600',
+        padding: theme.spacing(3, 0),
+    },
+    text: {
+        fontSize: '1em',
+        fontWeight: '300',
+        padding: theme.spacing(1, 0),
+        whiteSpace: 'pre-line',
+    },
+    video: {
+        width:"100%",
+        height:"100%",
+        [theme.breakpoints.up('md')]: {
+            paddingBottom: '35%', /* 16:9 */
+        },
+    }
+})
+
+
+class Player extends Component {
+    render() {
+        const { classes } = this.props
+        const params = queryString.parse(location.search);
+        console.log(params.id);
+        console.log(params.type);
+        console.log(params.videoId);
+        let url = params.id;
+        return (
+            <LayoutBackUrl text="Player" url={url} >
+                
+                    
+                        <VideoVimeo classes={{ video: classes.video }} videoId={params.videoId} options="" autoplay='1' />
+                
+            </LayoutBackUrl>
+        )
+    }
+}
+
+Player.getInitialProps = function (context) {
+
+    let { id, videoId,type } = context.query;
+    let {res} = context;
+    return {};
+  }
+
+
+
+
+export default withStyles(styles)(Player);
@@ -9,7 +9,7 @@ import { fetchJobRequest } from '../actions/ads'
 import { fetchCompanyRequest } from '../actions/companies'
 import { fetchCurrentUserRequest } from '../actions/user'
 import { uploadMedia } from '../actions/media'
-import Loader from './../components/templates/loader'
+import LoaderVideo from './../components/templates/loaderVideo'
 import Answer from '../components/organisms/Answer'
 import LayoutBack from '../components/templates/LayoutBack'
 import { withStyles } from '@material-ui/core/styles'
@@ -286,7 +286,7 @@ class Reponse extends React.Component {
        </Head>
        {/* https://codesandbox.io/s/ii0us */}
       { loading ? 
-        <Loader /> :
+        <LoaderVideo /> :
       <Fragment>
        
        <section className={classes.headerContainer}>
@@ -407,7 +407,8 @@ class Reponse extends React.Component {
          (
            <Answer mediaId={!!this.props.media && this.props.media.id}
             companyId={!!offre.company ? offre.company.id : !!company.brand_name ? company.id : null}
-             adId={offre.id}>
+             adId={offre.id}
+             >
             </Answer>
          )}
           <Snack variant="error" message={!!!_.isEmpty(this.state.errors) && this.state.errors.message }
@@ -65,15 +65,18 @@ class VerifyEmail extends Component {
                <div className={classes.container}>
                    <Typography gutterBottom align="center" className={classes.title}>
                        Consultez vos e-mails
-                </Typography>
+                    </Typography>
                    <Typography gutterBottom align="left" className={classes.text}>
                        Un e-mail a été envoyé à l'adresse <span className={classes.email}>{email}</span>
                    </Typography>
                    <Typography gutterBottom align="left" className={classes.text}>
                        Cliquez sur le lien dans l'e-mail que nous vous avons envoyé pour activer votre compte.
-                </Typography>
+                    </Typography>
+                    <Typography gutterBottom align="left" className={classes.text}>
+                    N'oubliez pas de consulter vos spams, si vous ne trouvez pas le lien d'activation dans votre boite de réception.
+                    </Typography>
                    <section className={classes.bottomContainer}>
-                        <Typography gutterBottom align="center" className={classes.bottomText}>
+                        {/* <Typography gutterBottom align="center" className={classes.bottomText}>
                            Cliquez sur suivant pour continuer votre candidature
                        </Typography>
                        <Button
@@ -83,7 +86,7 @@ class VerifyEmail extends Component {
                            onClick={() => Router.push('/Login')}
                        >
                            Suivant
-                </Button>
+                        </Button> */}
                    </section>
                </div>
            </Layout>
@@ -32,7 +32,7 @@ class MyDocument extends Document {
          {/* PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />

-          <link href="https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
+          <link href="https://fonts.googleapis.com/css?family=Dosis:600|Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">
          </link>

          <script type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */

-import React, {Fragment} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Layout from "../components/templates/Layout"
@@ -8,12 +8,14 @@ import { Typography } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import Router from 'next/router'
 import { connect } from 'react-redux'
+//const fetchEmphasisJobsRequest = lazy(() => import('../actions/ads'));
 import { fetchEmphasisJobsRequest } from "../actions/ads";
+//const fetchEmphasisCompaniesRequest = lazy(() => import('../actions/companies'));
 import { fetchEmphasisCompaniesRequest } from "../actions/companies";
 import Loader from './../components/templates/loader'
 import { isEmpty } from "lodash"
 import NoResult from './../components/atoms/NoResult';
-import Head from 'next/head'
+// import Head from 'next/head'
 import dynamic from 'next/dynamic'
 import OgHead from '../components/atoms/OgHead';
 import getConfig from 'next/config'
@@ -163,7 +165,7 @@ class Index extends React.Component {
    const imgUrl =  DefaultUrl
    return (
      <Layout>
-        <OgHead seo_title="Talents Tube : Plateforme de recrutement 100 % vidéo"
+        <OgHead seo_title="Espace candidat - Plateforme de recrutement en vidéo | Talents Tube"
                    seo_description="Talents Tube est la première plateforme réservée aux offres d'emploi vidéo, vidéo marque employeur et aux CV vidéos. Découvrez une nouvelle méthode de recrutement."
                    seo_url={socialShareUrl}
                    image={imgUrl}
@@ -56,7 +56,7 @@ export default function HorizontalNonLinearStepper() {
    return (
        <Layout>
            <Head>
-                <title key="title">Profile – Talents Tube</title>
+                <title key="title">Profil – Talents Tube</title>
                <meta key="robots" name="robots" content="noindex, nofollow"></meta>
            </Head>
            <div >
@@ -0,0 +1,164 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import parse from 'autosuggest-highlight/parse';
+import throttle from 'lodash/throttle';
+
+function loadScript(src, position, id) {
+  if (!position) {
+    return;
+  }
+
+  const script = document.createElement('script');
+  script.setAttribute('async', '');
+  script.setAttribute('id', id);
+  script.src = src;
+  position.appendChild(script);
+}
+
+const autocompleteService = { current: null };
+
+const useStyles = makeStyles((theme) => ({
+  icon: {
+    color: theme.palette.text.secondary,
+    marginRight: theme.spacing(2),
+  },
+}));
+
+export default function GoogleMaps() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(null);
+  const [inputValue, setInputValue] = React.useState('');
+  const [options, setOptions] = React.useState([]);
+  const loaded = React.useRef(false);
+
+  if (typeof window !== 'undefined' && !loaded.current) {
+    if (!document.querySelector('#google-maps')) {
+      loadScript(
+        'https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places',
+        document.querySelector('head'),
+        'google-maps',
+      );
+    }
+
+    loaded.current = true;
+  }
+
+  const fetch = React.useMemo(
+    () =>
+      throttle((request, callback) => {
+        autocompleteService.current.getPlacePredictions(request, callback);
+        
+      }, 200),
+    [],
+  );
+
+  React.useEffect(() => {
+    let active = true;
+
+    if (!autocompleteService.current && window.google) {
+      autocompleteService.current = new window.google.maps.places.AutocompleteService();
+      // console.log('autocompleteService.current');
+      // console.log(autocompleteService.current);
+    }
+    if (!autocompleteService.current) {
+      return undefined;
+    }
+
+    if (inputValue === '') {
+      setOptions(value ? [value] : []);
+      return undefined;
+    }
+
+    fetch({ input: inputValue }, (results) => {
+      if (active) {
+        let newOptions = [];
+
+        if (value) {
+          newOptions = [value];
+        }
+
+        if (results) {
+          newOptions = [...newOptions, ...results];
+        }
+
+        setOptions(newOptions);
+      }
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [value, inputValue, fetch]);
+
+  return (
+    <Autocomplete
+      id="google-map-demo"
+      style={{ width: 300 }}
+      getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)}
+      filterOptions={(x) => x}
+      options={options}
+      autoComplete
+      includeInputInList
+      filterSelectedOptions
+      value={value}
+      onChange={(event, newValue) => {
+        setOptions(newValue ? [newValue, ...options] : options);
+        setValue(newValue);
+        console.log("newValue");
+        // console.log(newValue);
+        console.log(newValue.description)
+         let geocoder = new google.maps.Geocoder();
+         let addresses = {};
+        geocoder.geocode({ 'address': newValue.description   }, function(results, status) {
+          results.map((index, value) => [
+            console.log(index.geometry.location.lat()+" "+index.geometry.location.lng())
+          ]);
+          
+          
+        });
+        
+      }}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+        console.log('newInputValue');
+        console.log(newInputValue);
+      }}
+      renderInput={(params) => (
+        <TextField {...params} label="Tapez une adresse" variant="outlined" fullWidth />
+      )}
+      renderOption={(option) => {
+        // console.log('option');
+        // console.log(option);
+        const matches = option.structured_formatting.main_text_matched_substrings;
+        const parts = parse(
+          option.structured_formatting.main_text,
+          matches.map((match) => [match.offset, match.offset + match.length]),
+        );
+
+        return (
+          <Grid container alignItems="center">
+            <Grid item>
+              <LocationOnIcon className={classes.icon} />
+            </Grid>
+            <Grid item xs>
+              {parts.map((part, index) => (
+                <span key={index} style={{ fontWeight: part.highlight ? 700 : 400 }}>
+                  {part.text}
+                </span>
+              ))}
+
+              <Typography variant="body2" color="textSecondary">
+                {option.structured_formatting.secondary_text}
+              </Typography>
+            </Grid>
+          </Grid>
+        );
+      }}
+    />
+  );
+}
@@ -0,0 +1,92 @@
+// server.autosuggest.js
+import React from 'react';
+import Autosuggest from 'react-autosuggest';
+// import './autosuggest.css';
+
+class ServerAutoSuggest extends React.Component {
+    constructor() {
+        super();
+
+        //Define state for value and suggestion collection
+        this.state = {
+            value: '',
+            suggestions: []
+        };
+    }
+
+    // Filter logic
+    getSuggestions = async (value) => {
+        const inputValue = value.trim().toLowerCase();
+        let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+        let data = await response.json()
+        return data;
+    };
+
+    // Trigger suggestions
+    getSuggestionValue = suggestion => suggestion.Title;
+
+    // Render Each Option
+    renderSuggestion = suggestion => (
+        <span className="sugg-option">
+            <span className="icon-wrap"><img src={suggestion.Poster} /></span>
+            <span className="name">
+                {suggestion.Title}
+            </span>
+        </span>
+    );
+
+    // OnChange event handler
+    onChange = (event, { newValue }) => {
+        this.setState({
+            value: newValue
+        });
+    };
+
+    // Suggestion rerender when user types
+    onSuggestionsFetchRequested = ({ value }) => {
+        this.getSuggestions(value)
+            .then(data => {
+                if (data.Error) {
+                    this.setState({
+                        suggestions: []
+                    });
+                } else {
+                    this.setState({
+                        suggestions: data.Search
+                    });
+                }
+            })
+    };
+
+    // Triggered on clear
+    onSuggestionsClearRequested = () => {
+        this.setState({
+            suggestions: []
+        });
+    };
+
+    render() {
+        const { value, suggestions } = this.state;
+
+        // Option props
+        const inputProps = {
+            placeholder: 'Type movie name',
+            value,
+            onChange: this.onChange
+        };
+
+        // Adding AutoSuggest component
+        return (
+            <Autosuggest
+                suggestions={suggestions}
+                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                getSuggestionValue={this.getSuggestionValue}
+                renderSuggestion={this.renderSuggestion}
+                inputProps={inputProps}
+            />
+        );
+    }
+}
+
+export default ServerAutoSuggest;
@@ -0,0 +1,342 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Layout from "../components/templates/Layout"
+import { Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Router from 'next/router'
+import { connect } from 'react-redux'
+import Loader from './../components/templates/loader'
+import { isEmpty } from "lodash"
+import NoResult from './../components/atoms/NoResult';
+import Head from 'next/head'
+import dynamic from 'next/dynamic'
+import OgHead from '../components/atoms/OgHead';
+import getConfig from 'next/config'
+
+import Autosuggest from 'react-autosuggest';
+
+// const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
+//   ssr: false
+// });
+const HorizontalScroller = dynamic(() => import('../components/organisms/HorizontalScroller'), {
+  ssr: false
+});
+
+const TileCompany = dynamic(() => import('../components/organisms/TileCompany'), {
+  ssr: false
+});
+
+const TileOffre = dynamic(() => import('../components/organisms/TileOffre'), {
+  ssr: false
+});
+
+const Footer = dynamic(() => import('../components/organisms/Footer'), {
+  ssr: false
+});
+const { publicRuntimeConfig } = getConfig();
+const styles = theme => ({
+  root: {
+    position: 'relative',
+    textAlign: 'center',
+    paddingTop: theme.spacing(20),
+    justifyContent: 'center',
+  },
+  primary: {
+    color: theme.palette.primary.main,
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  scrollerSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: theme.spacing(6),
+    '&>div': {
+      paddingBottom: theme.spacing(3),
+    },
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(2, 10),
+      paddingBottom: theme.spacing(9),
+    },
+    [theme.breakpoints.up('lg')]: {
+      padding: theme.spacing(2, 30),
+      paddingBottom: theme.spacing(9),
+    },
+    [theme.breakpoints.up('xl')]: {
+      padding: theme.spacing(2, 55),
+    },
+  },
+  scrollerSectionOffer: {
+    backgroundColor: theme.palette.secondary.main,
+  },
+  scrollerSectionCompany: {
+    backgroundColor: theme.palette.background.grey,
+  },
+  card: {
+    margin: theme.spacing(1),
+    width: '96%',
+    height: '100%',
+    maxWidth: '640px',
+    maxheight: '360px',
+
+  },
+  HorizontalScroller: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(4),
+  },
+  paper: {
+    margin: theme.spacing(1),
+    width: '96%',
+    height: '100%',
+  },
+  media: {
+  },
+  svg: {
+    width: 100,
+    height: 100,
+  },
+  polygon: {
+    fill: theme.palette.common.white,
+    stroke: theme.palette.divider,
+    strokeWidth: 4,
+  },
+  img: {
+    maxWidth: '100%',
+
+  },
+  titleContainer: {
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(3),
+  },
+  beforeTitle: {
+    fontSize: '0.8em',
+    fontWeight: '300',
+    textAlign: 'center',
+    textTransform: 'uppercase',
+    color: theme.palette.secondary.text,
+  },
+  title: {
+    fontFamily: 'Dosis',
+    fontSize: '1.5em',
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  white: {
+    color: theme.palette.common.white
+  },
+  button: {
+    textTransform: 'inherit',
+    margin: theme.spacing(0, 8),
+    padding: theme.spacing(1.2, 2),
+    [theme.breakpoints.up('sm')]: {
+      margin: 'auto',
+    },
+  },
+});
+
+class Index extends React.Component {
+  constructor() {
+    super();
+
+    //Define state for value and suggestion collection
+    this.state = {
+        value: '',
+        suggestions: [],
+        valueMetier: '',
+        suggestionsMetier: [],
+    };
+  }
+
+  componentDidMount() {
+    localStorage.setItem("loginRedirect", "/")
+    
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      
+    })
+  }
+
+  // Filter logic
+  getSuggestions = async (value) => {
+    const inputValue = value.trim().toLowerCase();
+    let response = await fetch(publicRuntimeConfig.symphonyUrl+"/api/getCompetences?q=" + inputValue );
+    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+    let data = await response.json()
+    return data;
+  };
+
+  // Trigger suggestions
+  getSuggestionValue = suggestion => suggestion.libelle;
+  // Render Each Option
+  renderSuggestion = suggestion => (
+      <span className="sugg-option">
+          
+          <span className="name">
+              {suggestion.libelle} ({suggestion.code})
+          </span>
+      </span>
+  );
+
+  // OnChange event handler
+  onChange = (event, { newValue }) => {
+      this.setState({
+          value: newValue
+      });
+  };
+
+  // Suggestion rerender when user types
+  onSuggestionsFetchRequested = ({ value }) => {
+      this.getSuggestions(value)
+          .then(data => {
+              if (data.Error) {
+                  this.setState({
+                      suggestions: []
+                  });
+              } else {
+                  this.setState({
+                      suggestions: data
+                  });
+              }
+          })
+  };
+
+  // Triggered on clear
+  onSuggestionsClearRequested = () => {
+      this.setState({
+          suggestions: []
+      });
+  };
+
+
+  // METIER
+  // Filter logic
+  getSuggestionsMetier = async (valueMetier) => {
+    const inputValue = valueMetier.trim().toLowerCase();
+    let response = await fetch(publicRuntimeConfig.symphonyUrl+"api/getAppelationsLibelle?q=" + inputValue );
+    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+    let data = await response.json()
+    return data;
+  };
+
+  // Trigger suggestions
+  getSuggestionMetierValue = suggestion => suggestion.libelle;
+  // Render Each Option
+  renderSuggestionMetier = suggestion => (
+      <span className="sugg-option">
+          
+          <span className="name">
+              {suggestion.libelle} ({suggestion.code})
+          </span>
+      </span>
+  );
+
+  // OnChange event handler
+  onChangeMetier = (event, { newValue }) => {
+      this.setState({
+          valueMetier: newValue
+      });
+  };
+
+  // Suggestion rerender when user types
+  onSuggestionsMetierFetchRequested = ({ value }) => {
+      this.getSuggestionsMetier(value)
+          .then(data => {
+              if (data.Error) {
+                  this.setState({
+                      suggestionsMetier: []
+                  });
+              } else {
+                  this.setState({
+                      suggestionsMetier: data
+                  });
+              }
+          })
+  };
+
+  // Triggered on clear
+  onSuggestionsMetierClearRequested = () => {
+      this.setState({
+          suggestionsMetier: []
+      });
+  };
+
+
+
+  render() {
+    const { classes } = this.props;
+    const { value, suggestions, valueMetier, suggestionsMetier } = this.state;
+    // Option props
+    const inputProps = {
+      placeholder: 'Saisir une compétence',
+      value,
+      onChange: this.onChange
+    };
+
+    const inputPropsMetier = {
+      placeholder: 'Saisir un métier',
+      value:valueMetier,
+      onChange: this.onChangeMetier
+    };
+    const socialShareUrl = typeof window !== 'undefined' ? window.location
+            : publicRuntimeConfig.frontServerUrl ;
+    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
+    const imgUrl =  DefaultUrl
+    return (
+      <Layout>
+        <OgHead seo_title="Talents Tube - Plateforme de recrutement en vidéo"
+                    seo_description="Talents Tube est la première plateforme réservée aux offres d'emploi vidéo, vidéo marque employeur et aux CV vidéos. Découvrez une nouvelle méthode de recrutement."
+                    seo_url={socialShareUrl}
+                    image={imgUrl}
+                    seo_key="Recrutement, video"
+
+        ></OgHead>
+        <div className={classes.container}>
+
+          {/* <VideoSlider /> */}
+
+          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
+            
+
+            
+            <Autosuggest
+                suggestions={suggestions}
+                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                getSuggestionValue={this.getSuggestionValue}
+                renderSuggestion={this.renderSuggestion}
+                inputProps={inputProps}
+            />
+            <Autosuggest
+                suggestions={suggestionsMetier}
+                onSuggestionsFetchRequested={this.onSuggestionsMetierFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsMetierClearRequested}
+                getSuggestionValue={this.getSuggestionMetierValue}
+                renderSuggestion={this.renderSuggestionMetier}
+                inputProps={inputPropsMetier}
+            />
+          </section>
+
+          
+          <Footer />
+        </div>
+      </Layout>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    
+  };
+}
+
+Index.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default (connect(mapStateToProps, { })(withStyles(styles)(Index)));
@@ -163,6 +163,12 @@ app.prepare()
      app.render(req, res, actualPage, queryParams)
    })

+    server.get('/Player', (req, res) => {
+      const actualPage = '/Player'
+      const queryParams = { id: req.query.id, videoId:req.query.videoId, type:req.query.type }
+      app.render(req, res, actualPage, queryParams)
+    })
+
    server.get('/VerifyEmail/:email', (req, res) => {
      const actualPage = '/VerifyEmail'
      const queryParams = { email: req.params.email }
@@ -0,0 +1,180 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import { withStyles, getMuiTheme } from '@material-ui/core/styles';
+import MenuIcon from '@material-ui/icons/Menu';
+import Link from 'next/link'
+import Drawer from '@material-ui/core/Drawer';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Divider from '@material-ui/core/Divider';
+import SendIcon from '@material-ui/icons/Send';
+import CodeIcon from '@material-ui/icons/Code';
+import HomeIcon from '@material-ui/icons/Home';
+import FingerprintIcon from '@material-ui/icons/Fingerprint';
+import LocalBarIcon from '@material-ui/icons/LocalBar';
+
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import { ListItemText } from '@material-ui/core';
+
+import { Spring, animated } from 'react-spring'
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    '& a':{
+      textDecoration:'none'
+    }
+  },
+
+  grow: {
+    flexGrow: 1,
+  },
+  bar: {
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+    [theme.breakpoints.up('sm')]: {
+      display: 'none',
+    },
+    [theme.breakpoints.down('md')]: {
+      display: 'block',
+    },
+  },
+  menuLogo: {
+    marginLeft: 20,
+    marginRight: 40,
+    cursor: 'pointer'
+  },
+  title: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+    [theme.breakpoints.down('md')]: {
+      display: 'none',
+    },
+    marginRight: 15,
+    cursor: 'pointer'
+  },
+  sectionDesktop: {
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'flex',
+    },
+  },
+  sectionMobile: {
+    display: 'flex',
+    [theme.breakpoints.up('md')]: {
+      display: 'none',
+    },
+  },
+  fullList: {
+    width: 'auto',
+    cursor: 'pointer'
+  },
+});
+
+class HeaderOffre extends React.Component {
+  state = {
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+    toggle: true
+  };
+
+  toggleDrawer = (side, open) => () => {
+    this.setState({
+      [side]: open,
+    });
+  };
+
+  toggle = () => this.setState(state => ({ toggle: !state.toggle }))
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classes.root}>
+        <Drawer anchor="top" open={this.state.top} onClose={this.toggleDrawer('top', false)}>
+          <div
+            tabIndex={0}
+            role="button"
+            onClick={this.toggleDrawer('top', false)}
+            onKeyDown={this.toggleDrawer('top', false)}
+          >
+            <div className={classes.fullList}>
+              <List>
+                <Link href="/" prefetch >
+                  <a><ListItem>
+                    <ListItemIcon>
+                      <HomeIcon />
+                    </ListItemIcon>
+                    <ListItemText primary='Accueil'>
+                    </ListItemText>
+                  </ListItem></a>
+                </Link>
+                <Divider />
+                <Link href="/contact" prefetch >
+                  <a><ListItem>
+                    <ListItemIcon>
+                      <SendIcon />
+                    </ListItemIcon>
+                    <ListItemText primary='contact'>
+                    </ListItemText>
+                  </ListItem></a>
+                </Link>
+              </List>
+            </div>
+          </div>
+        </Drawer>
+        <AppBar position="static" className={classes.appBar}>
+          <Toolbar>
+            <IconButton className={classes.menuButton} onClick={this.toggleDrawer('top', true)}
+              color="inherit" aria-label="Open drawer">
+              <MenuIcon />
+            </IconButton>
+
+            <Link href="/" prefetch>
+            <a><div onClick={this.toggle}>
+                <Spring native from={{ x: 0 }} to={{ x: this.state.toggle ? 1 : 0 }} config={{ duration: 1000 }}>
+                  {({ x }) => (
+                    <animated.div
+                      style={{
+                        opacity: x.interpolate({ output: [1, 1] }),
+                        transform: x
+                          .interpolate({
+                            range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
+                            output: [1, 0.97, 0.9, 1.1, 0.9, 1.1, 1.03, 1]
+                          })
+                          .interpolate(x => `scale(${x})`)
+                      }}>
+                      <img alt="e-declic" src='https://www.e-declic.com/files/e-declic/img/logo.png' className={classes.menuLogo} />
+                    </animated.div>
+                  )}
+                </Spring>
+              </div></a>
+            </Link>
+           
+            <Link href="/contact" prefetch >
+              <a><Typography className={classes.title} variant="h5" color="inherit" noWrap>
+                Contact
+              </Typography></a>
+            </Link>
+          </Toolbar>
+        </AppBar>
+      </div >
+    );
+  }
+}
+
+HeaderOffre.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+
+export default withStyles(styles)(HeaderOffre)
Author	SHA1	Message	Date
llaniau	6c34cad1e7	Social Share	2020-12-03 16:43:29 +01:00
llaniau	cb5268bf27	Header maj	2020-12-03 16:20:51 +01:00
llaniau	7b77b2195d	US403, US413, US404	2020-12-03 16:17:52 +01:00
llaniau	dad7e6b2eb	US 420,412,421,414	2020-12-02 16:40:57 +01:00
llaniau	146d1a5061	Mise en place du nouveau parcours talent	2020-12-01 19:21:23 +01:00
llaniau	ed626137cf	Correction entreprise rattaché à territoir en prod	2020-12-01 11:23:22 +01:00
llaniau	224cedac65	Bug video territoire	2020-11-26 15:03:54 +01:00
llaniau	b5b41b4849	next.config.js en mode prod	2020-11-25 09:14:32 +01:00
llaniau	d1ee296684	Pour mise en prod, balise nofolow	2020-11-24 13:55:54 +01:00
llaniau	6cf3bcc658	Forcage web app	2020-11-24 11:48:29 +01:00
llaniau	b20efef730	Tel + collapse	2020-11-17 17:40:27 +01:00
llaniau	459ff88e9d	Correction navigation	2020-10-28 17:06:53 +01:00
llaniau	dcdbfed2a3	Garder historique des pages de recherche	2020-10-27 18:23:34 +01:00
llaniau	d235b08fe3	Mise en place du lazy	2020-10-22 17:27:28 +02:00
llaniau	e5b9f2b75d	Nofollow pour pre prod	2020-10-20 09:17:21 +02:00
llaniau	563107e649	Modif mise en page diverses	2020-10-20 09:14:13 +02:00
llaniau	5545dbfad0	Modif next.config.js	2020-10-20 08:50:47 +02:00
llaniau	353128fa8e	Suppression balise meta pour mise en prod	2020-10-15 15:12:07 +02:00
llaniau	2e9fa7e9d0	Corrections mineures	2020-10-15 14:45:36 +02:00
llaniau	c0e5ec6e90	Test api pole emploi	2020-10-14 17:36:43 +02:00
llaniau	33adc4c819	oghead	2020-10-13 17:24:48 +02:00
llaniau	ebe81cd588	Mise en place de googgle place	2020-10-12 18:28:03 +02:00
llaniau	c3ced21cce	US466 : Chgt postuler en envoyer sa candidature	2020-10-07 16:16:00 +02:00
llaniau	a156050184	Import icon watch later	2020-10-05 23:05:23 +02:00
llaniau	535069bb64	Texte temp de travail en francais	2020-10-05 18:06:39 +02:00
llaniau	e4603f4ca8	Amélioration employmentType	2020-10-05 17:53:58 +02:00
llaniau	cab481cd2f	Amélioration job posting	2020-10-05 17:21:00 +02:00
llaniau	34d1384fb7	Job Posting ajout dept, ville, ...	2020-10-05 14:05:16 +02:00
llaniau	4b2fabd4b4	Amelioration Parcours talent	2020-10-01 17:01:06 +02:00
llaniau	130fb89c5f	Modif applicationServerPublicKey pour pre prod	2020-09-29 14:12:07 +02:00
llaniau	eeee4d3f45	changement next.config.js pour pre prod	2020-09-29 14:08:18 +02:00
llaniau	7f2c8374a4	Video de pres (module video telephone)	2020-09-29 09:59:22 +02:00
llaniau	e380dec152	Envoi message apres candidature	2020-09-24 17:10:25 +02:00
llaniau	58bf654651	applicationServerPublicKey de prod	2020-09-22 15:15:07 +02:00
llaniau	ead5370495	Modif pour eviter cvtheque.talentstube.com	2020-09-22 15:12:08 +02:00
llaniau	ce8f8660f3	modif title offre pour referencement	2020-09-21 18:16:32 +02:00
llaniau	28fbf3a013	lien espace recruteur	2020-09-21 16:31:16 +02:00
llaniau	726cd78bd3	MEP 21 sept	2020-09-21 16:08:41 +02:00
llaniau	70a0e47d28	Version stabilisé pre prod avant mise en prod	2020-09-21 15:51:54 +02:00
llaniau	d338cfaad4	recette avant mise en prod	2020-09-21 13:16:26 +02:00
llaniau	1815b2834e	Modif Tel francais	2020-09-20 21:02:02 +02:00
llaniau	27ac00bafb	Modif suite recette 18_09	2020-09-19 11:46:12 +02:00
llaniau	6a7024d5ac	Suppression bouton connexion linkedin et fb	2020-09-17 16:36:10 +02:00
llaniau	485ccece1e	Modif ref	2020-09-16 18:06:22 +02:00
llaniau	1fd45a00a3	Referencement Offre et Modif profil	2020-09-16 11:49:04 +02:00