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

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

master
TFLCL 2 years ago
parent
1759bfe2fb
commit
89241e8729
3 changed files with 81 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      css/main.css
  2. 2
      index.html
  3. 98
      js/main.js

5
css/main.css
Unescape 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
Unescape 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
Unescape 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;

Write Preview
Loading…
Cancel
Save