Add # location

index.js

@@ -1,4 +1,4 @@
-const vids = [
+const videoList = [
     {
         url: "https://vdo.mwit.ac.th/live/live1/playlist.m3u8",
         thumbnail: "images/Mlive1.png",
@@ -84,10 +84,10 @@ const titleText = document.querySelector('#titleText');
 const vidPlayer = document.querySelector('#vidPlayer');
 
 const createVidList = () => {
-    var vidElements = "";
+    var vidElements = '';
 
-    vids.forEach((item, index) => {
-        vidElements += `<div class="media" id='playlistEntry${index}' onclick='changeVid(${index})' style='transition-timing-function:ease-in-out'>
+    videoList.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>
@@ -101,40 +101,51 @@ const createVidList = () => {
 };
 
 var hls = null;
-var currentVideo = 0;
+var currentVideoIndex = 0;
+if(window.location.hash) {
+    let hash = window.location.hash;
+    if(hash.startsWith('#')) {
+        hash = hash.substring(1);
+    }
+    if(videoList[hash]){
+        currentVideoIndex = hash;
+    }
+}
 
 const changeVid = index => {
-    let oldSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`);
+    let oldSelectedVideo = document.querySelector(`#playlistEntry${currentVideoIndex}`);
     oldSelectedVideo.classList.remove("bg-dark");
     oldSelectedVideo.classList.remove("text-light");
-    if(!hls==null) {
+    if (!hls==null) {
         console.log("Removing HLS.js");
         hls.detachMedia(vidPlayer);
         hls = null;
     }
 
     console.log("Switching video to index", index);
-    titleText.innerHTML = vids[index].name;
-    currentVideo = index;
+    titleText.innerHTML = videoList[index].name;
+    currentVideoIndex = index;
 
-    let newSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`)
+    window.location.hash = currentVideoIndex;
+
+    let newSelectedVideo = document.querySelector(`#playlistEntry${currentVideoIndex}`);
     newSelectedVideo.classList.add("bg-dark");
     newSelectedVideo.classList.add("text-light");
 
-    if(!/Android|webOS|iPhone|iPad|iPod|Edge|iOS/i.test(navigator.userAgent) &&
+    if (!/Android|webOS|iPhone|iPad|iPod|Edge|iOS/i.test(navigator.userAgent) &&
         Hls.isSupported() &&
-        vids[index].url.endsWith(".m3u8")) {
+        videoList[index].url.endsWith(".m3u8")) {
         console.log("Using HLS.js");
         hls = new Hls();
-        hls.loadSource(vids[index].url);
+        hls.loadSource(videoList[index].url);
         hls.attachMedia(vidPlayer);
         hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play();});
     }
     else {
-        vidPlayer.src = vids[index].url;
+        vidPlayer.src = videoList[index].url;
         vidPlayer.play();
     }
 };
 
 createVidList();
-changeVid(currentVideo);
+changeVid(currentVideoIndex);