Now playlists are loaded with the correct track (if an index is provided)

2 years ago · 89241e8729
3 changed files with 81 additions and 24 deletions
--- a/css/main.css
+++ b/css/main.css
@ -78,7 +78,7 @@ html {
  flex-wrap: wrap;
  gap: 2em 1em;
  /* flex-direction: column; */
-  /* align-content: space-between; */
+  align-content: space-between unsafe;
  justify-content: space-between;
  padding: 1em;
 }
@ -95,7 +95,7 @@ iframe {
  /* flex-grow: 1; */
  transform: rotate(270deg);
  width: 5em;
-  height: 2em;
+  height: 3em;
 }

 #playerA .volume-slider {
@ -114,6 +114,7 @@ iframe {

 .speed-control {
  width: 20%;
+  /* margin: auto; */
  display: flex;
  flex-direction: column;
 }
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <title></title>
+  <title>YTDJ!</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

--- a/js/main.js
+++ b/js/main.js
@ -6,15 +6,6 @@ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 let crossfader = document.querySelector('#crossfader');

-crossfader.addEventListener('input', (e) => {
-
-  if (Math.abs(crossfader.value - 500) < 15) {
-    crossfader.value = 500;
-  }
-
-  updateCrossfader(crossfader.value);
-});
-
 class player {
  trackID;
  // volume;
@ -52,7 +43,7 @@ class player {
    // console.log(e.target);
    // this.node.querySelector('.volumeSlider').value = this.player.getVolume();
    // e.target.playVideo();
-    console.log(e.target);
+    // console.log(e.target);
    // e.target.setVolume(this.volume);
    this.player.setVolume(this.volume);

@ -66,23 +57,26 @@ class player {
      let url = prompt('Enter a YouTube URL (track or playlist):', 'https://www.youtube.com/watch?v=' + this.trackID);

      if (url) {
-      let newID = getYouTubeID(url);
+        let newTrackID = get_video_id(url);
+        let newPlaylistID = get_playlist_id(url);
+
+        if (newPlaylistID[0] != 0) {
+          this.loadPlaylist(newPlaylistID);
+        } else if (newTrackID != 0) {
+          this.load(newTrackID);
+        } else {
+          console.log('Nothing to load!');
+        }

-      if (newID && newID !== this.trackID) {
-        // window.location.href = './?' + newID;
-        this.load(newID);
      }
-    }
    });

    this.speedSlider.addEventListener('input', (e) => {
      this.speedSlider.previousElementSibling.innerHTML =  'Speed: ' + e.target.value;
-      console.log(e.target.value);
-      console.log(this.player);
      this.player.setPlaybackRate(Number(e.target.value));
    });

-    updateCrossfader(crossfader.value)
+    // updateCrossfader(crossfader.value); //Throws an error at the beginning because the second player is not ready yet.
  }

  onPlayerStateChange(e) {
@ -97,6 +91,18 @@ class player {
    this.player.loadVideoById(trackID);
  }

+  loadPlaylist(playlistID) {
+    //First element should be the playlist ID, second element the index of the video to play
+    let list = playlistID[0];
+    let index = playlistID[1];
+    console.log('playlistid to load: ' + playlistID);
+    this.player.loadPlaylist({
+      list: list,
+      listType: 'playlist',
+      index: index
+    });
+  }
+

 }

@ -110,6 +116,21 @@ function onYouTubeIframeAPIReady() {
  playerB.init('PhEuAuhH418');
 }

+// while (bothPlayersReady < 2) {
+//
+// }
+crossfader.addEventListener('input', (e) => {
+
+  if (Math.abs(crossfader.value - 500) < 15) {
+    crossfader.value = 500;
+  }
+
+  updateCrossfader(crossfader.value);
+});
+
+//
+
+
 function updateCrossfader(input) {
  let normVal = crossfader.value / 1000;

@ -128,11 +149,46 @@ function updateCrossfader(input) {
  playerB.player.setVolume(playerB.volume * coefB);
 }

-function getYouTubeID(url){
-  url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
-  return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : false;
+// From https://thomaspark.co/projects/needledrop/ by Thomas Park
+// function getYouTubeID(url){
+//   url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+//   return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : false;
+// }
+
+
+// From https://stackoverflow.com/a/55616161/14182148
+function get_playlist_id(url) {
+    let VID_REGEX = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
+    let regPlaylist = /[?&]list=([^#\&\?]+)/;
+    let regIndex = /[?&]index=([^#]+)/;
+    let match = url.match(regPlaylist);
+    let matchIndex = url.match(regIndex);
+    let index = 0;
+    if (matchIndex != null) {
+      index = matchIndex[1] - 1;
+    }
+    if (match != null) {
+      return [match[1], index];
+    } else {
+      return 0;
+    }
+}
+
+function get_video_id(url) { //originally 'video_id_from_playlist'
+    let VID_REGEX = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
+    let video_id = url.match(VID_REGEX);
+    if (video_id != null) {
+      return video_id[2];
+    } else {
+      return 0;
+    }
 }

+// function get_video_id(url) {
+//     url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+//     return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
+// }
+
 function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;