const vids = [{
    url: "https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
    thumbnail: "images/gitea.png",
    name: "Big Buck Bunny",
    subtitle: "Short Desc",
}, {
    url: "a.mp4",
    thumbnail: "images/gitea.png",
    name: "Video 2",
    subtitle: "Test",
}, {
    url: "dog.mp4",
    thumbnail: "images/gitea.png",
    name: "Video 3",
    subtitle: "Woo",
}];

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" onclick='changeVid(${index})'>
      <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;
}

const changeVid = index => {
    console.log('VIDEO IS NOW',index)
    vidPlayer.src = vids[index].url;
    titleText.innerHTML = vids[index].name;
}

createVidList();
changeVid(0);