diff --git a/css/main.css b/css/main.css
index 8ed1c8d..aecf99d 100644
--- 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;
}
diff --git a/index.html b/index.html
index 2d330cf..588f1dd 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
-
+ YTDJ!
diff --git a/js/main.js b/js/main.js
index 32291a4..5b67e0a 100644
--- 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;