diff --git a/index.html b/index.html
index 8830f6c..dcf4761 100644
--- a/index.html
+++ b/index.html
@@ -25,18 +25,40 @@
-
-
-
-
-
-
-
+
+
+
diff --git a/js/main.js b/js/main.js
index 2bd6576..7a3cee6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -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