Untitled

import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
import YouTube from 'react-youtube'
import applyLayout from '../modules/next-layouts'
import ContentLayout from '../components/layout'
import PropTypes from 'prop-types'
import Head from 'next/head'
import Footer from '../components/footer'
import layout from "../static/css-modules/layout.css"
import styles from "../static/css-modules/style.css"
import CSS from "../static/css-modules/works.css"
import Videos from "../api/videos.json"

class Works extends React.Component {
    static layout = ContentLayout
    videoSettings = {
        height: '400px',
        width: '100%',
        playerVars: { // https://developers.google.com/youtube/player_parameters
            autoplay: 0,
            rel: 0
        }
    }
    constructor(props){
        super(props)
        let selectedVideo, ogData

        if(typeof props.query.id === "undefined"){
            selectedVideo = 0
            ogData = {
                "fb_tag_title":         "OP Works",
                "fb_tag_description":   "We deliver uniquely tailored messages to hundreds of millions of people through a wide network of Ocean Pulser influencers. The messages are hand-crafted to effectively reach each target group.",
                "fb_tag_image":         "/static/og_pages/work.jpg"
            }
        }else{
            selectedVideo = Videos.findIndex((item, index) =>(
                item.video === props.query.id
            ))
            ogData = {
                "fb_tag_title":         selectedVideo.title,
                "fb_tag_description":   selectedVideo.title,
                "fb_tag_image":         "/static/work/og/"+selectedVideo.thumb
            }
        }

        this.state = {
            defaultVideo: selectedVideo,
            initVideoPlayer: false,
            selectedVideo: selectedVideo,
            videoEvent: null,
            videos: Videos.slice(0, 6),
            listState: null,
            start: 0,
            end: 5,
            //facebook open graph settings
            ...ogData
        }

        this.playerReady = this.playerReady.bind(this)
    }
    static async getInitialProps ({ pathname, query }) {
        return {pathname, query}
    }
    componentDidMount(){
        //wait for the page to load then show videos to achieve nicer transition
        setTimeout(() => this.setState({ listState: CSS.animateIn }), 200 )

        //wait until transitions are finished before showing youtube video as otherwise it would cause lag
        setTimeout(() => this.setState({ initVideoPlayer: true }), 1000 )
    }
    playerReady(event) {
        this.setState({videoEvent: event.target})
    }
    navigateVideos(direction){
        //hide old videos
        this.setState({ listState: CSS.animateOut })

        let start = this.state.start
        let end = this.state.end

        if(direction === "next"){
            if(end + 6 < Videos.length - 1){
                start += 6
                end +=  7
            }else{
                start = Videos.length - 6
                end = Videos.length
            }

        }else{
            if(start - 6 > 0){
                start -= 6
                end -=  6
            }else{
                start = 0
                end = 6
            }
        }

        setTimeout(() => (
            this.setState({
                videos: Videos.slice(start, end),
                listState: CSS.animateIn,
                start: start,
                end: end
            })
        ), 1100 )
    }
    selectVideo(index){
        this.setState({selectedVideo: index})
        this.state.videoEvent.loadVideoById(Videos[index].video, 0, "large")
        window.history.pushState("", "", "/works/v/"+Videos[index].video)
        // Router.push("/works?v="+Videos[index].video, "/works/v/"+Videos[index].video, { shallow: true })
    }
    generateDelay(){
        return Math.floor(Math.random() * (0 - 1000) + 1000)
    }
    render () {
        return (
            <React.Fragment>
                <Head>
                    <title>OP Works</title>
                    <meta property='og:video'       content={'https://www.youtube.com/watch?v='+Videos[this.state.selectedVideo].video} />
                    <meta property="og:title"       content={this.state.fb_tag_title} />
                    <meta property="og:description" content="We deliver uniquely tailored messages to hundreds of millions of people through a wide network of Ocean Pulser influencers. The messages are hand-crafted to effectively reach each target group." />
                    <meta property="og:type"        content="website" />
                    <meta property="og:image"       content={this.state.fb_tag_image} />
                </Head>

                <div id="leftCol" className={this.context.pageStatus}>
                    <ul className={CSS.videos}>
                    {this.state.videos.map((video, index) =>{

                        return (
                            <li
                                className={
                                    (this.state.selectedVideo === index ? CSS.selectedVideo : null)+' '+
                                    this.state.listState
                                }
                                key={index}
                                style={{ transitionDelay: this.generateDelay()+"ms" }}
                                onClick={()=> this.selectVideo(index)}
                            >
                                <div
                                    className={CSS.background}
                                    style={{ backgroundImage: "url(/static/work/"+video.thumb+")"  }}
                                ></div>
                            </li>
                        )
                    })}
                    </ul>

                    {this.state.start > 0 &&
                        <div className={CSS.navigate+' '+CSS.prev} onClick={() => this.navigateVideos("prev")}></div>
                    }
                    {this.state.end < Videos.length &&
                        <div className={CSS.navigate+' '+CSS.next} onClick={() => this.navigateVideos("next")}></div>
                    }
                </div>
                <div id="rightCol" className={CSS.contentWrapper+' '+layout.contentPadding+' '+this.context.pageStatus}>
                    <section className={CSS.content} >
                        <h1>Works</h1>

                        <p className={CSS.message}>We deliver uniquely tailored messages to hundreds of millions of people through a wide network of Ocean Pulser influencers. The messages are hand-crafted to effectively reach each target group.</p>

                        {this.state.initVideoPlayer &&
                            <YouTube
                                videoId={Videos[this.state.defaultVideo].video}
                                opts={this.videoSettings}
                                onReady={this.playerReady}
                            />
                        }
                        <p className={CSS.title}>{Videos[this.state.selectedVideo].title}</p>
                    </section>
                </div>
                <Footer />
            </React.Fragment>
        )
    }
}

Works.contextTypes = {
    pageStatus: PropTypes.string
}

export default applyLayout(Works)