Added search function using YT data API. Fixed slider and scrollbar on web kit. Minor changes

js/main.js

@@ -116,6 +116,10 @@ class player {
     this.player.loadVideoById(trackID);
   }
 
+  cue(trackID) {
+    this.player.cueVideoById(trackID);
+  }
+
   loadPlaylist(playlistID) {
     //First element should be the playlist ID, second element the index of the video to play
     let list = playlistID[0];
@@ -201,9 +205,9 @@ function get_playlist_id(url) {
     let regPlaylist = /[?&]list=([^#\&\?]+)/;
     let regIndex = /[?&]index=([^#]+)/;
     let match = url.match(regPlaylist);
-    console.log('match ' + match);
+    // console.log('match ' + match);
     let matchIndex = url.match(regIndex);
-    console.log('matchindex ' + matchIndex);
+    // console.log('matchindex ' + matchIndex);
     // console.log('regexp ' + match.match(/=LL([^#\&\?]*)/));
     let index = 0;
     if (matchIndex != null) {
@@ -313,8 +317,6 @@ function newShootingStar() {
   document.documentElement.style.setProperty('--shooting-star-angle', angle + "deg");
   document.documentElement.style.setProperty('--shooting-star-direction', direction);
 
-
-
   shootingStarWrapper.appendChild(shootingStar);
   shootingStar.classList.add('shooting-star');
 
@@ -346,8 +348,6 @@ document.getElementById('shooting-stars-enable').addEventListener('click', () =>
   }
 });
 
-
-
 // Enable/disable shooting stars (with P5JS background)
 // if (typeof processingSketch !== 'undefined') {
 //   let separatorSpan = document.createElement('span');
@@ -371,7 +371,6 @@ document.getElementById('shooting-stars-enable').addEventListener('click', () =>
 - EMAIL OBFUSCATION - found here http://www.grall.name/posts/1/antiSpam-emailAddressObfuscation.html
 -------------------------------------------------------*/
 document.getElementById('contact-me').addEventListener('click', (e) => {
-  console.log('okay');
   var y = decode("pbagnpg@gsypy.klm"); //https://rot13.com/
   e.target.setAttribute("href", "mailto:" + y);
 })
@@ -383,3 +382,97 @@ function decode(a) {
     return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
   })
 };
+
+
+
+/**
+SEARCH WITH YOUTUBE API
+ */
+let lastSearchQuery;
+let results;
+
+gapi.load("client", loadClient);
+
+// https://developers.google.com/youtube/v3/docs/search/list
+function loadClient() {
+  gapi.client.setApiKey("AIzaSyCuz5tGc9oDxw6RZnpibakYFHzMvsd8bUs");
+  return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
+      .then(function() { console.log("GAPI client loaded for API"); },
+            function(err) { console.error("Error loading GAPI client for API", err); });
+}
+
+function execute(query) {
+   // Make sure the client is loaded before calling this method.
+   return gapi.client.youtube.search.list({
+      "part": [
+         "snippet"
+      ],
+      "maxResults": 15,
+      "q": query,
+      "type": [
+         "video"
+      ],
+      "fields": "items(id/videoId,snippet(title,thumbnails/medium))"
+   })
+   .then(function(response) {
+      if (response.status == 200) {
+         results = response.result;
+         localStorage.setItem('sres', JSON.stringify(results));
+         displaySearchResults(results);
+      }
+      // Handle the results here (response.result has the parsed body).
+      console.log("Response", response);
+
+   },
+   function(err) {
+      console.error("Execute error", err);
+      alert("Whoops, something went wrong. \n       Maybe all of my daily Youtube Data API requests have been used. Try again later! \n Maybe it's something else. Try again later?");
+   });
+}
+
+const searchForm = document.getElementById('search-bar');
+const searchQueryObj = document.getElementById('search-query');
+const searchButtonObj = document.getElementById('search-button');
+const searchResultsObj = document.getElementById('search-results');
+//When the page has loaded, store the hidden search-item class div as a template for future searchs
+const searchResultItemObj = searchResultsObj.querySelector('.search-item').cloneNode(true);
+searchResultsObj.querySelector('.search-item').remove();
+
+
+searchForm.addEventListener('submit', (e) => {
+   e.preventDefault(); // We handle the form submit by ourselve
+   if (searchQueryObj.value != lastSearchQuery) { // prevent useless requests
+      console.log('Search for: ' + searchQueryObj.value);
+      execute(searchQueryObj.value);
+      lastSearchQuery = searchQueryObj.value;
+   }
+   return false;
+});
+
+
+function displaySearchResults(res) {
+   // First we clean previous search results
+   while (searchResultsObj.firstChild) {
+      searchResultsObj.removeChild(searchResultsObj.firstChild);
+   }
+
+   res.items.forEach((item) => {
+      let itemElmt = searchResultItemObj.cloneNode(true);
+      itemElmt.querySelector('.search-item-info img').setAttribute('src', item.snippet.thumbnails.medium.url);
+      itemElmt.querySelector('.search-item-info span').innerHTML = item.snippet.title;
+      itemElmt.querySelector('.search-item-info a').setAttribute('href', 'https://www.youtube.com/watch?v=' + item.id.videoId)
+      itemElmt.dataset.id = item.id.videoId;
+      itemElmt.querySelector('.load-to-A').addEventListener('click', () => {
+         playerA.cue(item.id.videoId);
+      });
+      itemElmt.querySelector('.load-to-B').addEventListener('click', () => {
+         playerB.cue(item.id.videoId);
+      });
+      console.log(itemElmt);
+      searchResultsObj.appendChild(itemElmt);
+   });
+}
+
+// For testing purpose
+results = JSON.parse(localStorage.getItem('sres'));
+displaySearchResults(results);