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 3 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      index.html
  2. 85
      js/main.js

40
index.html
Unescape 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
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.
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

Write Preview
Loading…
Cancel
Save