From ac34e88809ba9337c7c65cd3bc26725c33705f76 Mon Sep 17 00:00:00 2001 From: tfl Date: Thu, 30 Jun 2022 23:35:22 +0200 Subject: [PATCH] Added a load button, changed the crossfader curve --- index.html | 40 +++++++++++++++++++------ js/main.js | 85 ++++++++++++++++++++++++++++++++---------------------- 2 files changed, 82 insertions(+), 43 deletions(-) diff --git a/index.html b/index.html index 8830f6c..dcf4761 100644 --- a/index.html +++ b/index.html @@ -25,18 +25,40 @@ -

YTDJ!

+
-
- - -
-
- - +
+
+ + + +
+
+ + + +
+ + + +

YTDJ!

- + + + 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