Adding Movie Series to Homepage

#controllers/home.py
import config, copy, lib
from flask import render_template, redirect
from models.moviedb import Moviedb
from models.seriesdb import Seriesdb

class Home():
  def __init__(self):
    self.lib = lib.Lib()
    self.moviedb = Moviedb()
    self.seriesdb = Seriesdb()

  def get_youtube(self):
    self.vdict = copy.deepcopy(config.vdict)
    self.get_movie()
    self.get_series()
    return render_template('index.html', data=self.vdict)

  def get_movie(self):
    self.vdict['movies'] = self.moviedb.select(self.vdict['home_max_movie'])
    self.vdict['thumbs'] = self.lib.get_thumbs(self.vdict['movies'], 5, type='movie')

  def get_series(self):
    self.vdict['series'] = self.seriesdb.select(self.vdict['home_max_movie'])
    self.vdict['series-thumbs'] = self.lib.get_thumbs(self.vdict['series'], 4, type='movie')

//static/scripts/series.js
class Series{
  setVideo(playlist=[], episode=0){
    if(!this.pl){
      var pl = JSON.parse(playlist);
      this.pl = pl;
      var index = pl.length - 1;
    }else{
      var pl = this.pl;
      var index = episode - 1;
      var activeElement = document.getElementById(this.active);
      var clickedElement = document.getElementById(`episode${episode}`);
      activeElement.className = 'episode-outer';
      clickedElement.className += ' active';
      this.active = `episode${episode}`;
    }

    if(pl[index].type === "YouTube"){
      var src = "https://www.youtube.com/embed/" + pl[index].id;
    }else if(pl[index].type === "Facebook"){
      var src = `https://www.facebook.com/watch/?v=${pl[index].id}`;
    }else if(pl[index].type === "Dailymotion"){
      var src = "https://www.dailymotion.com/embed/video/" + pl[index].id;
    }else if(pl[index].type === "Vimeo"){
      var src = "https://player.vimeo.com/video/" + pl[index].id;
    }else if(pl[index].type === "OKRU"){
      var src = "//ok.ru/videoembed/" + pl[index].id;
    }else if(pl[index].type === "YouTubePl"){
      var src = "https://www.youtube.com/embed/videoseries?list=" + pl[index].id;
    }

    if(pl[index].type !== 'Facebook'){
      var iframe = `<div style='position:relative;padding-top:56.25%;margin-top:20px;'>
      <iframe id="series-player" src="${src}" frameborder="0" allowfullscreen></iframe>
      </div>`;
    }else{
      var iframe = `<div class="fb-video" data-href="${src}" data-width="auto" data-show-captions="true"></div>`;
      var width = $('#series-wrapper').css('width');
      var height = parseInt(width)/16*9;
      $('#series-wrapper').css('min-height', height);
    }

    $('#series-wrapper').html(iframe);
    if((pl[index].type === 'Facebook') && (fb_api)){
      FB.XFBML.parse();
    }
    
  }

  setEpisodes(playlist, ending){
    var pl = JSON.parse(playlist);
    var html = '';

    for(var i=pl.length-1; i>-1; i--){
      if(i==pl.length-1)
        html += `<div class="episode-outer active" id="episode${i+1}">`;
      else
        html += `<div class="episode-outer" id="episode${i+1}">`;

      html += `<div class="thumb"><a onclick="series.setVideo(undefined, ${i+1})"><img src="/static/images/playlist.jpg" /></a></div>`;
      if((ending === 'ចប់​ហើយ') && (i === pl.length-1))
        html += `<div class="episode"><a>ភាគ​ទី ${i+1} ចប់</a></div>`;
      else
        html += `<div class="episode"><a>ភាគ​ទី ${i+1}</a></div>`;

      html += `</div>`;
    }
    $('#episodes').html(html);
    this.active = `episode${pl.length}`;
  }
}//End of class

const series = new Series();

/*static/styles/series.css*/
#content{
  padding: 20px;
}
#content .post-title{
  font: 22px/1.5 Oswald, Koulen;
}
#content .post-title span, #content .author span{
  float: right;
}
#content .author{
  margin-top: 20px;
}
#content .author img{
  width: 30px;
  margin-left: 5px;
}
#content .country{
  margin-top: 5px;
}
#content #series-wrapper{
  margin-top: 30px;
}
#content #series-player{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#content #episodes{
  background: black;
  max-height: 365px;
  overflow: auto;
}
#content #episodes .episode-outer{
  display: grid;
  grid-template-columns: 150px auto;
  align-items: center;
  padding: 2px;
  padding-right: 30px;
  border-top: 2px solid rgb(73, 73, 73);
  font: 20px/1.5 Limonf3;
}
#content #episodes .episode-outer img{
  width: 150px;
  float: left;
}
#content #episodes .episode{
  text-align: right;
}
#content #episodes .episode-outer img:hover,
#content #episodes .episode a:hover{
  cursor: pointer;
}
.active{
  background: rgb(36, 36, 36)
}
#content #random-series{
  display: grid;
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
  grid-gap: 10px;
  margin-top: 10px;
}
#content #random-series a,
#content #random-series img{
  width: 100%;
}
#content #random-series img{
  float: left;
}
#content #random-series .series-wrapper{
  position: relative;
  text-align: center;
}
#content #random-series .series-title{
  display: block;
  position: absolute;
  bottom: 0;
  padding: 10px 0;
  font: 18px/1.5 Courgette, HandWriting;
  text-shadow: 2px 2px 5px black;
  background-image: linear-gradient(to top, black, transparent);
}

@media only screen and (max-width: 600px){
  #content #random-series{
    grid-template-columns: 100%;
  }
}

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