CSS+Vanilla JS shooting stars (P5JS no longuer in use but still there); more styling; favicons; Trying to get in touch with Bandcamp

js/main.js

@@ -51,19 +51,28 @@ class player {
       let url = prompt('Enter a YouTube URL (track or playlist):', 'https://www.youtube.com/watch?v=' + this.trackID);
 
       if (url) {
-        let newTrackID = get_video_id(url);
-        let newPlaylistID = get_playlist_id(url);
+        let resp = check_url(url);
 
-        if (newPlaylistID[0] != 0) {
-          console.log('playlistid to load: ' + newPlaylistID);
-          this.loadPlaylist(newPlaylistID);
-        } else if (newTrackID != 0) {
-          console.log('track to load: ' + newTrackID);
-          this.load(newTrackID);
-        } else {
+        if (resp < 0) {
           console.log('Nothing to load!');
+        } else if (resp == 0) {
+          let newTrackID = get_video_id(url);
+          let newPlaylistID = get_playlist_id(url);
+
+          if (newPlaylistID[0] != 0) {
+            console.log('playlistid to load: ' + newPlaylistID);
+            this.loadPlaylist(newPlaylistID);
+          } else if (newTrackID != 0) {
+            console.log('track to load: ' + newTrackID);
+            this.load(newTrackID);
+          } else {
+            console.log('Nothing to load!');
+          }
+        } else if (resp == 1) {
+          fetch_bandcamp_url(url);
         }
 
+
       }
     });
 
@@ -124,7 +133,7 @@ calcCrossfaderCoefs(crossfader.value);
 
 crossfader.addEventListener('input', (e) => {
   //Makes the slider stick on the middle
-  if (Math.abs(crossfader.value - 500) < 15) {
+  if (Math.abs(crossfader.value - 500) < 20) {
     crossfader.value = 500;
   }
 
@@ -155,6 +164,16 @@ function calcCrossfaderCoefs(input) {
   playerB.crossfaderCoef = coefB;
 }
 
+function check_url(url) {
+  let test = url.indexOf('youtu');
+  if (test > -1 && test < 13) {
+    return 0; //It's most likely a youtube link
+  } else if (url.indexOf('.bandcamp') > -1 || url.indexOf('/album/') > -1 || url.indexOf('/track/') > -1) {
+    return 1; //It's most likely a bandcamp link
+  } else {
+    return -1; //Wrong link
+  }
+}
 
 // From https://stackoverflow.com/a/55616161/14182148
 function get_playlist_id(url) {
@@ -184,16 +203,15 @@ function get_video_id(url) { //originally 'video_id_from_playlist'
     }
 }
 
-// From https://thomaspark.co/projects/needledrop/ by Thomas Park
-// 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 get_video_id(url) {
-//     url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
-//     return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
-// }
+function fetch_bandcamp_url(url) {
+  let iframe = document.createElement('iframe');
+  iframe.setAttribute('class','hidden');
+  iframe.setAttribute('src',url);
+  playerB.node.parentNode.appendChild(iframe);
+  console.log(iframe);
+  let scrap = iframe.contentWindow.document.querySelector('script[data-tralbum]');
+  console.log('scrap: ' + scrap);
+}
 
 function componentToHex(c) {
   var hex = c.toString(16);
@@ -201,20 +219,101 @@ function componentToHex(c) {
 }
 
 // Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg
-if (typeof variable !== 'undefined') {
-  let separatorSpan = document.createElement('span');
-  separatorSpan.innerHTML = ' - ';
-  document.getElementById('shooting-stars-enable').after(separatorSpan);
-  document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+
+let bcURL = 'https://clett.bandcamp.com/track/placenta';
+// let html = async await fetch(bcURL).text(); // html as text
+// let doc = new DOMParser().parseFromString(html, 'text/html');
+// doc.title; doc.body;
+
+// let Http = new XMLHttpRequest();
+// Http.open("GET", bcURL);
+// Http.send();
+//
+// Http.onreadystatechange = (e) => {
+//   console.log(Http.responseText)
+// }
+
+let areStarsShooting = true;
+let shootingStarWrapper = document.getElementsByClassName('shooting-stars-wrapper')[0];
+let shootingStar;
+
+function newShootingStar() {
+  shootingStar = document.createElement('div');
+
+  let topStart = Math.floor(0.6 * window.innerHeight * Math.random());
+  let leftStart = Math.floor(window.innerWidth * (0.1 + 0.8 * Math.random()));
+  let duration = 1000 + Math.floor(Math.random() * 5000);
+  let distance = 200 + Math.floor(Math.random() * 500);
+  let angle = Math.floor(Math.random() * 30) - 15;
+  let direction = Math.random() < 0.5 ? -1 : 1;
+
+  shootingStar.style.top = topStart + 'px';
+  shootingStar.style.left = leftStart + 'px';
+  // root.style.setProperty('--shooting-star-duration', duration + "px");
+  // shootingStarCSS.insertRule(':root{--shooting-star-duration: '+ duration + 'ms}');
+
+  document.documentElement.style.setProperty('--shooting-star-duration', duration + "ms");
+  document.documentElement.style.setProperty('--shooting-star-translate', distance + "px");
+  document.documentElement.style.setProperty('--shooting-star-angle', angle + "deg");
+  document.documentElement.style.setProperty('--shooting-star-direction', direction);
+
+
+
+  shootingStarWrapper.appendChild(shootingStar);
+  shootingStar.classList.add('shooting-star');
+
+  setTimeout(() => {
+    shootingStar.remove();
+    // let nextIn = 10;
+    let nextIn =  7000 + Math.floor(Math.random() * 5000);
+    if (areStarsShooting) {
+      setTimeout('newShootingStar()', nextIn);
+    }
+  }, duration);
+  // setTimeout('newShootingStar()', duration + nextIn);
 }
+// function endShootingStar(el) {
+//   el.remove();
+//   console.log('removed!');
+//   let nextIn = 4000;
+//   setTimeout('newShootingStar()', nextIn);
+// }
+
+newShootingStar();
+
+// Enable/disable shooting stars
+let separatorSpan = document.createElement('span');
+separatorSpan.innerHTML = ' - ';
+document.getElementById('shooting-stars-enable').after(separatorSpan);
+document.getElementById('shooting-stars-enable').innerHTML = '⭐️Disable shooting stars⭐️';
+
 document.getElementById('shooting-stars-enable').addEventListener('click', () => {
-  if (processingIsOn) {
-    processingSketch.frameRate(0);
-    document.getElementById('shooting-stars-enable').innerHTML = 'Enable shooting stars⭐️';
-    processingIsOn = false;
+  if (areStarsShooting) {
+    document.getElementById('shooting-stars-enable').innerHTML = '⭐️Enable shooting stars⭐️';
+    areStarsShooting = false;
   } else {
-    processingSketch.frameRate(24);
-    document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
-    processingIsOn = true;
+    document.getElementById('shooting-stars-enable').innerHTML = '⭐️Disable shooting stars⭐️';
+    areStarsShooting = true;
+    newShootingStar();
   }
 });
+
+
+// Enable/disable shooting stars (with P5JS background)
+// if (typeof processingSketch !== 'undefined') {
+//   let separatorSpan = document.createElement('span');
+//   separatorSpan.innerHTML = ' - ';
+//   document.getElementById('shooting-stars-enable').after(separatorSpan);
+//   document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+// }
+// document.getElementById('shooting-stars-enable').addEventListener('click', () => {
+//   if (processingIsOn) {
+//     processingSketch.frameRate(0);
+//     document.getElementById('shooting-stars-enable').innerHTML = 'Enable shooting stars⭐️';
+//     processingIsOn = false;
+//   } else {
+//     processingSketch.frameRate(24);
+//     document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+//     processingIsOn = true;
+//   }
+// });

js/sketch.js

@@ -1,6 +1,7 @@
 // Another possible inspiration: https://www.khanacademy.org/computer-programming/twinkle-twinkle/6280832014565376
-
 let sketch = function(p) {
+  let svgExport = false; // To export the result to SVG
+
   let bgCol = hexToRgb('#222233');
   let starCol = [hexToRgb('#ffcdff'), hexToRgb('#804442'), hexToRgb('#ffff7d')]
 
@@ -25,9 +26,13 @@ let sketch = function(p) {
     p.frameRate(24);
     currentWidth = p.windowWidth;
     currentHeight = p.windowHeight;
-    // p.createCanvas(currentWidth, currentHeight);
-    p.createCanvas(1920, 1080, p.SVG) // To export the result to SVG
-    p.noLoop(); // To export the result to SVG
+
+    if (svgExport) {
+      p.createCanvas(1920, 1080, p.SVG) // To export the result to SVG
+      p.noLoop(); // To export the result to SVG
+    } else {
+      p.createCanvas(currentWidth, currentHeight);
+    }
 
     bgInit();
 
@@ -57,8 +62,10 @@ let sketch = function(p) {
 
 
     time += 1;
-    p.save(); // To export the result to SVG
 
+    if (svgExport) {
+        p.save(); // To export the result to SVG
+    }
   } //End of draw()
 
   class Stars {