Add hilight selected video

index.js

@@ -34,13 +34,12 @@ const vids = [
 const videoListContainer = document.querySelector('#videoListContainer');
 const titleText = document.querySelector('#titleText');
 const vidPlayer = document.querySelector('#vidPlayer');
-var hls = null;
 
 const createVidList = () => {
   var vidElements = "";
 
   vids.forEach((item, index) => {
-    vidElements += `<div class="media" onclick='changeVid(${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>
@@ -53,9 +52,21 @@ const createVidList = () => {
   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() &&
@@ -76,4 +87,4 @@ const changeVid = index => {
 }
 
 createVidList();
-changeVid(0);
+changeVid(currentVideo);