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

Added a load button, changed the crossfader curve

master
TFLCL 2 years ago
parent
42f4c992fe
commit
ac34e88809
2 changed files with 82 additions and 43 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. 24
      index.html
  2. 83
      js/main.js

24
index.html
Unescape View File

@ -25,18 +25,40 @@
<body> <body>
<!-- Add your site or application content here --> <!-- Add your site or application content here -->
<p>YTDJ!</p>
<div id="desk"> <div id="desk">
<div id="players">
<div class="player"> <div class="player">
<iframe id="playerA" src="" width="480" height="270", frameborder='0'></iframe> <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"> <input type="range" class="volumeSlider" min='0' max = '100' value="80">
</div> </div>
<div class="player"> <div class="player">
<iframe id="playerB" src="" width="480" height="270", frameborder='0'></iframe> <iframe id="playerB" src="" width="480" height="270", frameborder='0'></iframe>
<input type="range" class="volumeSlider" min='0' max = '100' value="80"> <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>
</div> </div>
<input type="range" id='crossfader' name="crossfader" min='0' max='1000' value='500'> <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>
<script src="js/vendor/modernizr-3.11.2.min.js"></script> <script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script> <script src="js/plugins.js"></script>

83
js/main.js
Unescape 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. // Loads the IFrame Player API code asynchronously.
let tag = document.createElement('script'); let tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api'; tag.src = 'https://www.youtube.com/iframe_api';
@ -20,7 +6,7 @@ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
class player { class player {
trackId; trackID;
// volume; // volume;
// id; // id;
// iframe; // iframe;
@ -35,16 +21,18 @@ class player {
this.node = this.iframe.parentNode; this.node = this.iframe.parentNode;
this.volume = this.node.querySelector('.volumeSlider').value; this.volume = this.node.querySelector('.volumeSlider').value;
this.loadButton = this.node.querySelector('.load-button')
} }
init(trackid) { init(trackID) {
let src = `https://www.youtube.com/embed/${trackid}?enablejsapi=1&playsinline=1&autoplay=0&rel=0&modestbranding=1&version=3`; 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.iframe.setAttribute('src', src);
this.player = new YT.Player(this.id, { this.player = new YT.Player(this.id, {
events: { events: {
'onReady': this.onPlayerReady.bind(this), 'onReady': this.onPlayerReady.bind(this),
'onStateChange': onPlayerStateChange 'onStateChange': this.onPlayerStateChange.bind(this)
} }
}); });
@ -53,6 +41,19 @@ class player {
this.volume = volume; this.volume = volume;
this.player.setVolume(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) { onPlayerReady(e) {
// console.log(e.target); // console.log(e.target);
@ -62,6 +63,16 @@ class player {
// e.target.setVolume(this.volume); // e.target.setVolume(this.volume);
this.player.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'); playerB.init('PhEuAuhH418');
} }
function onPlayerStateChange(event) {
console.log('state change: ' + event.data);
}
let crossfader = document.querySelector('#crossfader'); let crossfader = document.querySelector('#crossfader');
crossfader.addEventListener('input', (e) => { crossfader.addEventListener('input', (e) => {
if (Math.abs(crossfader.value - 500) < 15) {
crossfader.value = 500;
}
let normVal = crossfader.value / 1000; let normVal = crossfader.value / 1000;
// let coefB = normVal ** 2; // let coefB = normVal ** 2;
// let coefA = (1 - 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); // Sets box-shadow transparency depending on crossfader position
// console.log('coefA: ' + coefA); let boxShadowStyle = '0 0 3em #ddbddd'
// console.log('coefB: ' + coefB); 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); playerA.player.setVolume(playerA.volume * coefA);
playerB.player.setVolume(playerB.volume * coefB); playerB.player.setVolume(playerB.volume * coefB);
}) });
function min(x, y) { function getYouTubeID(url){
if (x > y) { url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
return y; return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : false;
} else {
return x;
} }
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
} }
// Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg

Write Preview
Loading…
Cancel
Save