tfl/YTDJ
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
TFLCL
2022-07-01 03:57:38 +02:00
parent 1759bfe2fb
commit 89241e8729
3 changed files with 81 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
css/main.css
View File

@@ -78,7 +78,7 @@ html {
flex-wrap: wrap; flex-wrap: wrap;
gap: 2em 1em; gap: 2em 1em;
/* flex-direction: column; */ /* flex-direction: column; */
/* align-content: space-between; */ align-content: space-between unsafe;
justify-content: space-between; justify-content: space-between;
padding: 1em; padding: 1em;
} }
@@ -95,7 +95,7 @@ iframe {
/* flex-grow: 1; */ /* flex-grow: 1; */
transform: rotate(270deg); transform: rotate(270deg);
width: 5em; width: 5em;
height: 2em; height: 3em;
} }
#playerA .volume-slider { #playerA .volume-slider {
@@ -114,6 +114,7 @@ iframe {
.speed-control { .speed-control {
width: 20%; width: 20%;
/* margin: auto; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

2
index.html
View File

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

98
js/main.js
View File

@@ -6,15 +6,6 @@ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let crossfader = document.querySelector('#crossfader'); let crossfader = document.querySelector('#crossfader');
crossfader.addEventListener('input', (e) => {
if (Math.abs(crossfader.value - 500) < 15) {
crossfader.value = 500;
}
updateCrossfader(crossfader.value);
});
class player { class player {
trackID; trackID;
// volume; // volume;
@@ -52,7 +43,7 @@ class player {
// console.log(e.target); // console.log(e.target);
// this.node.querySelector('.volumeSlider').value = this.player.getVolume(); // this.node.querySelector('.volumeSlider').value = this.player.getVolume();
// e.target.playVideo(); // e.target.playVideo();
console.log(e.target); // console.log(e.target);
// e.target.setVolume(this.volume); // e.target.setVolume(this.volume);
this.player.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); let url = prompt('Enter a YouTube URL (track or playlist):', 'https://www.youtube.com/watch?v=' + this.trackID);
if (url) { 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.addEventListener('input', (e) => {
this.speedSlider.previousElementSibling.innerHTML = 'Speed: ' + e.target.value; this.speedSlider.previousElementSibling.innerHTML = 'Speed: ' + e.target.value;
console.log(e.target.value);
console.log(this.player);
this.player.setPlaybackRate(Number(e.target.value)); 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) { onPlayerStateChange(e) {
@@ -97,6 +91,18 @@ class player {
this.player.loadVideoById(trackID); 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'); 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) { function updateCrossfader(input) {
let normVal = crossfader.value / 1000; let normVal = crossfader.value / 1000;
@@ -128,11 +149,46 @@ function updateCrossfader(input) {
playerB.player.setVolume(playerB.volume * coefB); playerB.player.setVolume(playerB.volume * coefB);
} }
function getYouTubeID(url){ // From https://thomaspark.co/projects/needledrop/ by Thomas Park
url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/); // function getYouTubeID(url){
return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : false; // 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) { function componentToHex(c) {
var hex = c.toString(16); var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex; return hex.length == 1 ? "0" + hex : hex;