const vids = [
  {
    url: "http://media.w3.org/2010/05/bunny/trailer.mp4",
    thumbnail: "images/gitea.png",
    name: "Big Buck Bunny",
    subtitle: "Short Desc",
  },
  {
    url: "http://media.w3.org/2010/05/sintel/trailer.mp4",
    thumbnail: "images/gitea.png",
    name: "Sintel",
    subtitle: "Test",
  },
  {
    url: "https://vdo.mwit.ac.th/vod/_definst_/mp4:02_description/2561/05/30-05-61/VOD/30-05-61-AV4.mp4/playlist.m3u8",
    thumbnail: "images/gitea.png",
    name: "HLS",
    subtitle: "Should use hls.js",
  },
  {
    url: "http://vjs.zencdn.net/v/oceans.mp4",
    thumbnail: "images/gitea.png",
    name: "DisneyOcean1",
    subtitle: "555",
  },
  {
    url: "http://media.w3.org/2010/05/video/movie_300.mp4",
    thumbnail: "images/gitea.png",
    name: "5min",
    subtitle: "Just countdown",
  }
];

const videoListContainer = document.querySelector('#videoListContainer');
const titleText = document.querySelector('#titleText');
const vidPlayer = document.querySelector('#vidPlayer');

const createVidList = () => {
  var vidElements = "";

  vids.forEach((item, index) => {
    vidElements += `<div class="media" id='playlistEntry${index}' onclick='changeVid(${index})' style='transition-timing-function:ease-in-out'>
      <img class="mr-3" src="${item.thumbnail}" alt="thumbnail" height="96">
      <div class="media-body">
        <h5 class="mt-0">${item.name}</h5>
        ${item.subtitle}
      </div>
    </div>
    `;
  });

  videoListContainer.innerHTML = vidElements;
}

var hls = null;
var currentVideo = 0;

const changeVid = index => {
  var oldSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`);
  oldSelectedVideo.classList.remove("bg-dark");
  oldSelectedVideo.classList.remove("text-light");

  console.log("Switching video to index", index);
  titleText.innerHTML = vids[index].name;
  currentVideo = index;

  var newSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`)
  newSelectedVideo.classList.add("bg-dark");
  newSelectedVideo.classList.add("text-light");

  if(!/Android|webOS|iPhone|iPad|iPod|Edge|iOS/i.test(navigator.userAgent) &&
   Hls.isSupported() &&
   vids[index].url.endsWith(".m3u8")) {
    console.log("Using HLS.js");
    if(!hls==null) {
      hls.detachMedia(vidPlayer);
    }
    hls = new Hls();
    hls.loadSource(vids[index].url);
    hls.attachMedia(vidPlayer);
    hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play();});
  }
  else {
    vidPlayer.src = vids[index].url;
    vidPlayer.play();
  }
}

createVidList();
changeVid(currentVideo);