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

Added a load button, changed the crossfader curve

Browse Source
This commit is contained in:
TFLCL
2022-06-30 23:35:22 +02:00
parent 42f4c992fe
commit ac34e88809
2 changed files with 82 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
index.html
View File

@@ -25,18 +25,40 @@
<body>
<!-- Add your site or application content here -->
<p>YTDJ!</p>
<div id="desk">
<div class="player">
<iframe id="playerA" src="" width="480" height="270", frameborder='0'></iframe>
<input type="range" class="volumeSlider" min='0' max = '100' value="80">
</div>
<div class="player">
<iframe id="playerB" src="" width="480" height="270", frameborder='0'></iframe>
<input type="range" class="volumeSlider" min='0' max = '100' value="80">
<div id="players">
<div class="player">
<iframe id="playerA" src="" width="480" height="270", frameborder='0'></iframe>
<input class='load-button' type="button" value="Load new track or playlist">
<input type="range" class="volumeSlider" min='0' max = '100' value="80">
</div>
<div class="player">
<iframe id="playerB" src="" width="480" height="270", frameborder='0'></iframe>
<input type="range" class="volumeSlider" min='0' max = '100' value="80">
<input class='load-button' type="button" value="Load new track or playlist">
</div>
</div>
<input type="range" id='crossfader' name="crossfader" min='0' max='1000' value='500'>
<!-- <div id="search-area">
<div class="search">
<input type="button" value="Load new track or playlist">
<label for="url-player-A">Enter link of a YT video or playlist</label>
<input type="url" name="url-player-A" id="url_A" placeholder="https://www.youtube.com/watch?v=...." pattern="https://.*" size="40">
</div>
<div class="search">
<input type="button" value="Load new track or playlist">
<label for="url-player-B">Enter link of a YT video or playlist</label>
<input type="url" name="url-player-B" id="url_B" placeholder="https://www.youtube.com/watch?v=...." pattern="https://.*" size="40">
</div>
</div> -->
<h1>YTDJ!</h1>
</div>
<input type="range" id='crossfader' name="crossfader" min='0' max='1000' value='500'>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>

85
js/main.js
View File

@@ -1,17 +1,3 @@
// let id = window.location.search ? window.location.search.substring(1) : album;
// let playerA = {
// iframe: document.querySelector('#playerA'),
// player: undefined,
// id: 'anWaxGNDRJ4',
// vol: 100
// }
// let playerB = {
// iframe: document.querySelector('#playerB'),
// player: undefined,
// id: 'PhEuAuhH418',
// vol: 100
// }
// Loads the IFrame Player API code asynchronously.
let tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
@@ -20,7 +6,7 @@ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
class player {
trackId;
trackID;
// volume;
// id;
// iframe;
@@ -35,16 +21,18 @@ class player {
this.node = this.iframe.parentNode;
this.volume = this.node.querySelector('.volumeSlider').value;
this.loadButton = this.node.querySelector('.load-button')
}
init(trackid) {
let src = `https://www.youtube.com/embed/${trackid}?enablejsapi=1&playsinline=1&autoplay=0&rel=0&modestbranding=1&version=3`;
init(trackID) {
this.trackID = trackID;
let src = `https://www.youtube-nocookie.com/embed/${trackID}?disablekb=1&enablejsapi=1&playsinline=1&autoplay=0&rel=0&modestbranding=1&iv_load_policy=3&version=3`;
this.iframe.setAttribute('src', src);
this.player = new YT.Player(this.id, {
events: {
'onReady': this.onPlayerReady.bind(this),
'onStateChange': onPlayerStateChange
'onStateChange': this.onPlayerStateChange.bind(this)
}
});
@@ -53,6 +41,19 @@ class player {
this.volume = volume;
this.player.setVolume(volume);
});
this.loadButton.addEventListener('click', () => {
let url = prompt('Enter a YouTube URL (track or playlist):', 'https://www.youtube.com/watch?v=' + this.trackID);
if (url) {
let newID = getYouTubeID(url);
if (newID && newID !== this.trackID) {
// window.location.href = './?' + newID;
this.load(newID);
}
}
});
}
onPlayerReady(e) {
// console.log(e.target);
@@ -62,6 +63,16 @@ class player {
// e.target.setVolume(this.volume);
this.player.setVolume(this.volume);
}
onPlayerStateChange(e) {
console.log(this.id + ' state change: ' + e.data);
}
load(trackID) {
this.player.loadVideoById(trackID);
}
}
@@ -74,34 +85,40 @@ function onYouTubeIframeAPIReady() {
playerB.init('PhEuAuhH418');
}
function onPlayerStateChange(event) {
console.log('state change: ' + event.data);
}
let crossfader = document.querySelector('#crossfader');
crossfader.addEventListener('input', (e) => {
if (Math.abs(crossfader.value - 500) < 15) {
crossfader.value = 500;
}
let normVal = crossfader.value / 1000;
// let coefB = normVal ** 2;
// let coefA = (1 - normVal) ** 2;
let coefB = Math.min(normVal*2, 1);
let coefA = Math.min((1-normVal)*2, 1);
let coefB = min(normVal*2, 1);
let coefA = min((1-normVal)*2, 1);
// console.log('crossfader: ' + crossfader.value);
// console.log('coefA: ' + coefA);
// console.log('coefB: ' + coefB);
// Sets box-shadow transparency depending on crossfader position
let boxShadowStyle = '0 0 3em #ddbddd'
playerA.iframe.style.boxShadow = boxShadowStyle + componentToHex(Math.round(coefA*255));
playerB.iframe.style.boxShadow = boxShadowStyle + componentToHex(Math.round(coefB*255));
playerA.player.setVolume(playerA.volume * coefA);
playerB.player.setVolume(playerB.volume * coefB);
})
});
function min(x, y) {
if (x > y) {
return y;
} else {
return x;
}
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;
}
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
// Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg