app/nextjs/components/organisms/ShortVideoHooker.js

import Link from 'next/link';
import React, { Component } from 'react'
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'

import VideoVimeo from '../atoms/VideoVimeo'


const styles = theme => ({
    root: {
        position: 'relative',
        textAlign: 'center',
        paddingTop: theme.spacing(20),
        justifyContent: 'center',
    },
    container: {
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
    },
    video: {
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',

        '& .plyr__video-embed': {
            [theme.breakpoints.up('sm')]: {
                height: '40vh',
                maxHeight: '40vh',
            },
            [theme.breakpoints.down('sm')]: {
                height: '60vh',
            },

        },
        '& .plyr__video-wrapper.plyr__video-embed': {
            [theme.breakpoints.up('xs')]: {
                width: '240vw',
                transform: 'translateX(-55vw)',
                paddingBottom: '50% !important',
            },
            [theme.breakpoints.up('sm')]: {
                width: 'auto',
                transform: 'inherit',
            },
        },
        '& .plyr__controls': {
            background: 'none'
        },
    },
    videoVimeo: {
        zIndex: '888',
        height: '65vh',
        paddingBottom: '0%',
        overflow: 'hidden',
        '& iframe': {
            position: 'absolute',
            top: 0,
            left: 'calc(50% - 125vw)',
            width: '250vw',
            height: '120vw',
        },
        [theme.breakpoints.up('md')]: {
            height: '48vw',
            paddingBottom: '0',
            '& iframe': {
                position: 'absolute',
                left: 'calc(50% - 100vw)',
                width: '200vw',
                height: '130%',
            },
        },
        [theme.breakpoints.up('lg')]: {
            height: '48vw',
        },
    },
    text: {
        zIndex: '999',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        position: 'absolute',
        bottom: '17vh',
        left: '3vh',
    },
    textCompany: {
        color: theme.palette.secondary.main,
        backgroundColor: 'rgba(30,35,39,0.9)',
        padding: theme.spacing(0.8, 2),
        marginBottom: 0,
        fontWeight: 'bold',
        fontSize: '1em',
    },
    textJob: {
        color: theme.palette.secondary.main,
        backgroundColor: 'rgba(30,35,39,0.5)',
        padding: theme.spacing(0.4, 2),
        marginBottom: 0,
        fontWeight: 'lighter',
        fontSize: '0.9em',
    },
    button: {
        position: 'absolute',
        bottom: '5vh',
        left: '3vh',
        padding: theme.spacing(1, 4),
        textTransform: 'inherit',
        zIndex: '999',
    },

});

const videoList = [
    { vimeoId: '350927569', title: 'Les Vergers de Châteaubourg', adTitle: 'Conducteurs de ligne (H/F)', link: '/Offre/73-Les-Vergers-de-Châteaubourg-chateaubourg' },
    { vimeoId: '350927551', title: 'Grand Ouest Étiquettes', adTitle: 'Conducteurs de machine d’impression', link: '/Offre/79-Grand-Ouest-Étiquettes-Saint-Brieuc' },
    { vimeoId: '350927537', title: 'Fym Action', adTitle: 'Promoteur des ventes en alimentaire (H/F)', link: '/Offre/81-Fym-Action-Caudan' }
]

class ShortVideoHooker extends Component {
    constructor(props) {
        super(props);

        this.plyrRef = null;

        this.setPlyrRef = element => {
            this.plyrRef = element;

        };
    }
    state = {
        i: 0,
        startDate: Date.now()
    }

    componentDidMount() {

        this.timer = setInterval(this.tick.bind(this), 2000);
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }

    tick() {

        if (new Date() - this.state.startDate >= 8000) {

            if (this.state.i == 2)
                this.setState({ i: 0, startDate: Date.now() })
            else
                this.setState({ i: ++this.state.i, startDate: Date.now() })
            //Update Plyr
            // if (this.plyrRef) {
            //     this.plyrRef.hideControls = true;
            //     this.plyrRef.displayDuration = false;
            //     this.plyrRef.updateVideoSource(videoList[this.state.i].vimeoId, 'vimeo')
            //     this.plyrRef.hideControls = true;
            //     this.plyrRef.displayDuration = false;
            // }
        }

    }

    render() {
        let { classes } = this.props;
        let videoId = videoList[0].vimeoId;

        return (
            <div className={classes.video}>
                {/* <VideoVimeo classesOverride={ classes.videoVimeo } videoId={videoId} 
                    options={`?byline=0&title=0&background=1&autoplay=1&mute=1`} />
                <section className={classes.text}>
                    <Typography gutterBottom
                        variant="headline"
                        variant="h6"
                        component="h4"
                        align="center"
                        className={classes.textCompany}>
                        {videoList[this.state.i].title}
                    </Typography>

                    <Typography gutterBottom
                        variant="headline"
                        variant="h6"
                        component="h4"
                        align="center"
                        className={classes.textJob}>
                        {videoList[this.state.i].adTitle}
                    </Typography>
                </section>
                <Link href={videoList[this.state.i].link}>
                    <Button
                        name="Offre"
                        className={classes.button}
                        variant="outlined"
                        color="secondary"
                    >
                        Voir l'offre
                </Button>
                </Link> */}
            </div>
        )
    }
}
export default withStyles(styles)(withWidth()(ShortVideoHooker))