Connecting to YouTube Channel Playlist

<!--templates/index.html-->
{% extends "base.html" %}

{% block head %}
{{ super() }}
<script src="/static/scripts/index.js"></script>
<link href="/static/styles/index.css" rel="stylesheet">
{% endblock %}

{% block panel %}
<div id="panel" class="panel region"></div>
<div class="navigation region">
  <img onclick="index.navPrevious()" src="/static/images/left.png" /> 
  <img id="nav-home" onclick="index.navHome()" src="/static/images/home.png" /> 
  <img onclick="index.navNext()" src="/static/images/right.png" />
</div>
{% endblock %}

{% block ad %}
<div class="ad region">
  <img src="/static/images/ad.jpg" />
</div>
<div style="clear: both;"></div>
{% endblock %}

{% block content %}
<div id='content'>
  <div id="channel">
    <div id='kvid-screen' width="100%"></div>
    <div id="kdownloadButton"></div>
    <div id="kplaylistPanel"></div>
    <div id="next-page">
      <a class="new-vid" onclick="index.previousPageKD()">&lt;&lt; ៥០​ កំរង​វីដេអូ</a>  
      <a class="new-vid" onclick="index.nextPageKD()">៥០ កំរង​វីដេអូ &gt;&gt;</a>
    </div>
  </div>
</div>
{%  endblock %}

//static/scritps/index.js
class Index{
  constructor(){
    this.pageTokens = [];
    this.apiKey = 'AIzaSyCDMr6toQGyDRFPChRsbQ2sheSQfTQLVqg';
    this.blogId = '3212243556817590089';
    this.maxResult = 5;
    this.label = false;

    this.kplaylistId = false;
    this.ChannelId =  'UC7cyr5kbcN7jvG7No6lZ-wQ';
    this.yt_nextPageToken = false;
    this.yt_prevPageToken = false;
    this.kclicked = false;
    this.kPlaylistt = [];
    this.kPlaylist = [];
    this.created = false;

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    this.kplayerHeight = 0;
  }

  
  handleClientLoad() {       
    index.loadAPIClientInterfaces();        
  }

  loadAPIClientInterfaces(){
    gapi.client.load('youtube', 'v3', function() {
    index.requestUserPlaylistId();
    });
  }

  requestUserPlaylistId(){
    var request = gapi.client.youtube.playlists.list({
      channelId: this.ChannelId,
      maxResults: 50,
      part: 'contentDetails'
    });
    
    request.execute(function(response) {
      index.playlistId = response.result.items;
      index.requestPlaylists(index.ChannelId);
    });
  }

  requestPlaylists(ChannelId, pageToken) {
    var requestOptions = {
      channelId: ChannelId,
      part: 'snippet',
      maxResults: 50
    };
    if (pageToken) {
      requestOptions.pageToken = pageToken;
    }

    var request = gapi.client.youtube.playlists.list(requestOptions);

    request.execute(function(response) {
      index.yt_nextPageToken = response.result.nextPageToken;  
      index.yt_prevPageToken = response.result.prevPageToken;
      var playlistItems = response.result.items;
      var kPlaylistt = [];
      for (var i = 0; i < playlistItems.length; i++) {
      kPlaylistt.push({'title':playlistItems[i].snippet.title, 'file':playlistItems[i].id, 'image':playlistItems[i].snippet.thumbnails.medium.url});
      }
      index.kPlaylist = [];
      for (var i = 0; i < kPlaylistt.length; i++) {
        index.kPlaylist.push({file:kPlaylistt[i]["file"],title:kPlaylistt[i]["title"],image:kPlaylistt[i]["image"]});
      }
   
      if(!index.created){
        index.createPlayer();
        index.created = true;
      }
  
      index.kdownloadButton = document.getElementById('kdownloadButton');
      index.kdownloadButton.innerHTML = '<input id="kurlField" type="text" name="kurl" value="Get direct link" size="82%" style="display:none;"  />'+'<input type="submit"  onclick="index.konSubmit()" value="ត្រឡប់​លេខរៀងវីដេអូ" />';
      
      const kPlaylist = index.kPlaylist;

      var kPlaylistPanel = document.getElementById('kplaylistPanel'); 
      for (var i = 0; i < kPlaylist.length; i++) {
       if(i==0){
        kPlaylistPanel.innerHTML = '<div id="kVideo'+(i+1)+'" class="kplaylistItem" onclick="index.kloadVideo('+i+')" >'+'<img class="kimgThub" src="'+kPlaylist[i]['image']+'" /><div class="klabel">'+kPlaylist[i]['title']+'</div>'+'</div>';
       }else{
        kPlaylistPanel.innerHTML += '<div id="kVideo'+(i+1)+'" class="kplaylistItem" onclick="index.kloadVideo('+i+')" >'+'<img class="kimgThub" src="'+kPlaylist[i]['image']+'" /><div class="klabel">'+kPlaylist[i]['title']+'</div>'+'</div>';
       }
  
        if(i==0){
          index.kdowloadField = document.getElementById('kurlField');
          index.kdowloadField.value = kPlaylistt[0]['file'];
        }
      }
  
    });
  }

  createPlayer(){
    var kPlayer = document.getElementById('kvid-screen');
    var kplayerWidth = kPlayer.clientWidth;
    index.kplayerHeight = kplayerWidth/16*9;
    index.kplayer = false;
    index.YouTubeIframeAPIReady();
  }

  YouTubeIframeAPIReady() {  
    index.kplayer = new YT.Player('kvid-screen', {
      height: index.kplayerHeight,
      width: '100%',
      playerVars: {
       showinfo: 1
      },
      events: {
        'onReady': index.PlayerReady,
        'onStateChange': index.PlayerStateChange
      }
    });
  }

  PlayerReady(event) {
    event.target.cuePlaylist({list:index.kPlaylist[0]['file']});
    index.kclicked = document.getElementById('kVideo1');
    index.kclicked.style.backgroundColor = '#1e1d1d';
  }

  PlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      //stopVideo();
    }
  }

  kloadVideo(v){
    index.kclicked.style.backgroundColor = '#333131';
    index.kplayer.loadPlaylist({list:index.kPlaylist[v]['file']});
    index.kclicked = document.getElementById('kVideo'+(v+1));
    index.kclicked.style.backgroundColor = '#1e1d1d';
  }

  konSubmit(){
    var playList = index.kplayer.getPlaylist();
    playList.reverse();
    index.kplayer.loadPlaylist(playList);
  }

  nextPageKD() {
    index.requestPlaylists(index.ChannelId, index.yt_nextPageToken);
  }
  
  previousPageKD() {
    index.requestPlaylists(index.ChannelId, index.yt_prevPageToken);
  }
  
}//end class

const index = new Index();

function initAPI() {
  gapi.client.setApiKey(index.apiKey);
  index.next = true;
  index.makeApiCall();
  index.handleClientLoad()
}

gapi.load('client', initAPI);

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