Channel Component

import React from 'react';
import './channel.scss';

import channel from './channeljs'

class Channel extends React.Component{
  constructor(props){
    super(props);
    this.state = {};
  }

  componentDidMount(){
    const script = document.createElement("script");
    script.src = "https://apis.google.com/js/client.js";
    script.onload = () => {
      window.gapi.load('client', () => {
        channel.getVidContent();
      });
    };

    document.body.appendChild(script);
  }

  render(){
    return(
      <div className="Channel">
        <section className="panel region">
          <div id="video-screen"></div>
          <div id="navigation">
            <img alt='' onClick={()=>channel.getVidContent(channel.yt_prevPageToken)} src={'/images/left.png'} />
            <img alt='' onClick={()=>channel.getVidContent()} src={'/images/home.png'} />
            <img alt='' onClick={()=>channel.getVidContent(channel.yt_nextPageToken)} src={"/images/right.png"} />
          </div>
        </section>

      </div>
    );
  }
}

export default Channel;

import $ from 'jquery';

class Channel{
  constructor(){
    this.pageTokens = [];
    this.apiKey = 'AIzaSyCDMr6toQGyDRFPChRsbQ2sheSQfTQLVqg';

    this.kplaylistId = 'UUQfwfsi5VrQ8yKZ-UWmAEFg';
    this.yt_nextPageToken = false;
    this.yt_prevPageToken = false;
    this.kclicked = false;
    this.kPlaylistt = [];
    this.kPlaylist = [];
    this.created = false;
    this.videoIds = [];
  }

  getVidContent(pageToken) {
    $('#navigation img').eq(1).attr('src', '/images/loading.gif')
    channel.option = {
      "part": ["snippet,contentDetails"],
      "playlistId": channel.kplaylistId,
      "maxResults": 5
    }

    if(pageToken)
    channel.option.pageToken = pageToken;

    window.gapi.client.init({
      'apiKey': channel.apiKey,
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
    }).then(function() {
      return window.gapi.client.youtube.playlistItems.list(channel.option);
    }).then(function(response) {
      channel.yt_nextPageToken = response.result.nextPageToken;  
      channel.yt_prevPageToken = response.result.prevPageToken;
      channel.getVidData(response.result.items);
    }, function(reason) {
      console.log('Error: ' + reason.result.error.message);
    });
  }

  getVidData(items){
    this.videoIds = [];
    for(var v in items){
      this.videoIds.push(items[v].snippet.resourceId.videoId);
    }
    this.createPlayer();
  }

  createPlayer(){
    var html = ``;
    
    for(var v in this.videoIds){
      html += `
`;
      html += ``;
      html += `
`;
    }
    $('.panel #video-screen').html(html);
    $('#navigation img').eq(1).attr('src', '/images/home.png')
  }

}//end class

const channel = new Channel();

export default channel;

.panel{
  background:lightgrey;
  margin-top: 30px;
  border-radius:3px;
  #video-screen{
    display:grid;
    grid-template-columns:auto auto auto auto auto auto;
    grid-gap:15px;
    padding:15px;
    div{
      position:relative;
      padding-top:56.25%;
      iframe{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border-width:0;
      }
    }
    div:nth-child(1){
      grid-column: 1 / span 3;
    }
    div:nth-child(2){
      grid-column: 4 / span 3;
    }
    div:nth-child(3){
      grid-column: 1 / span 2;
    }
    div:nth-child(4){
      grid-column: 3 / span 2;
    }
    div:nth-child(5){
      grid-column: 5 / span 2;
    }
  }
  #navigation{
    text-align: center;
    padding-bottom:10px;
    img{
      height:25px;
      margin: 0 2.5px;
    }
    img:hover{
      opacity:.5;
      cursor:pointer;
    }
  }
}

@media only screen and (max-width: 600px){
  .panel{
    #video-screen{
      grid-template-columns: 100%;
      div:nth-child(1){
        grid-column: 1 / span 1;
      }
      div:nth-child(2){
        grid-column: 1 / span 1;
      }
      div:nth-child(3){
        grid-column: 1 / span 1;
      }
      div:nth-child(4){
        grid-column: 1 / span 1;
      }
      div:nth-child(5){
        grid-column: 1 / span 1;
      }
    }
  }
}

GitHub: "https://github.com/Sokhavuth/emultimedia
Heroku: https://khmerweb-emultimedia.herokuapp.com/