Added contact link, commented Bandcamp related stuff

README.md

@@ -1 +1,23 @@
-Mix Youtube videos like a pro DJ!
+#Mix Youtube videos like a pro DJ!
+
+##About
+This website is a tribute to the old twoyoutubevideosandamotherfuckingcrossfader.com.
+It's a simple way to play music from Youtube and smoothly fade between tracks thanks to the crossfader.
+
+##What's next?
+###Maybe one day
+- Search videos straight from the app (needs API key and calls)
+- Compatibility with Bandcamp music (not sure if it can be done without too much hacks)
+###Should be done quickly
+- Clean code (especially old P5JS)
+- Sanitize it (naming, organization, comments...)
+- Add current tracks/playlists as hashes in the URL so we can share track combinations
+
+##External resources and inspiration
+###Bandcamp fetching
+- https://gist.github.com/Romern/cd7f1e9a742d27eb3ac104201f6ae87c
+- https://stackoverflow.com/questions/65085046/how-do-i-pull-album-art-thumbnail-from-bandcamp
+- https://github.com/89z/mech/blob/master/bandcamp/bandcamp.go
+- https://github.com/openwhyd/openwhyd/blob/master/app/controllers/api/bandcampExtractor.js
+- https://github.com/ytdl-org/youtube-dl/blob/master/youtube_dl/extractor/bandcamp.py
+- https://github.com/masterT/bandcamp-scraper

css/main.css

@@ -357,3 +357,8 @@ input[type=range]#crossfader::-ms-thumb {
 .footer span {
   cursor: pointer;
 }
+
+span.spacer {
+  display: inline-block;
+  width: 3em;
+}

index.html

@@ -64,11 +64,11 @@
         </div>
         <input class='load-button' type="button" value="Load new track or playlist">
       </div>
-      <div class="hidden">
-        <!-- <iframe style="border: 0; width: 480px; height: 270px;" src="https://bandcamp.com/EmbeddedPlayer/album=78256716/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/track=1064671887/transparent=true/" seamless><a href="https://clett.bandcamp.com/album/tancarville">Tancarville by Clett</a></iframe> -->
-        <!-- For a single track:
-        <iframe style="border: 0; width: 480px; height: 270px;" src="https://bandcamp.com/EmbeddedPlayer/album=78256716/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/track=1064671887/transparent=true/" seamless><a href="https://clett.bandcamp.com/album/tancarville">Tancarville by Clett</a></iframe>-->
-      </div>
+      <!-- <div class="hidden">
+        <iframe style="border: 0; width: 480px; height: 270px;" src="https://bandcamp.com/EmbeddedPlayer/album=78256716/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/track=1064671887/transparent=true/" seamless><a href="https://clett.bandcamp.com/album/tancarville">Tancarville by Clett</a></iframe>
+        For a single track:
+        <iframe style="border: 0; width: 480px; height: 270px;" src="https://bandcamp.com/EmbeddedPlayer/album=78256716/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/track=1064671887/transparent=true/" seamless><a href="https://clett.bandcamp.com/album/tancarville">Tancarville by Clett</a></iframe>
+      </div> -->
     </div>
 
     <div id="crossfader-wrapper">
@@ -90,7 +90,7 @@
 
     <h1>🔊 Mix like a pro youtube DJ! 🎧</h1>
     <div class="footer">
-      <p><span id='shooting-stars-enable'></span> ⚒ <a href="https://tflcl.xyz">Made by tflcl.xyz</a> 🧩</p>
+      <p><span id='shooting-stars-enable'></span> <span class="spacer"></span> <a href="https://tflcl.xyz" target="_blank" >⚒ Made by tflcl.xyz 🧩</a> <span class="spacer"></span> <a href="#" id="contact-me">💌 Contact me 💌</a></p>
     </div>
   </div>
 

js/main.js

@@ -54,6 +54,7 @@ class player {
         let resp = check_url(url);
 
         if (resp < 0) {
+          alert('Wrong URL...');
           console.log('Nothing to load!');
         } else if (resp == 0) {
           let newTrackID = get_video_id(url);
@@ -66,10 +67,13 @@ class player {
             console.log('track to load: ' + newTrackID);
             this.load(newTrackID);
           } else {
+            alert('Wrong URL...');
             console.log('Nothing to load!');
           }
         } else if (resp == 1) {
-          fetch_bandcamp_url(url);
+          // fetch_bandcamp_url(url);
+          alert('Wrong URL...');
+          console.log('Nothing to load!');
         }
 
 
@@ -181,12 +185,15 @@ function get_playlist_id(url) {
     let regPlaylist = /[?&]list=([^#\&\?]+)/;
     let regIndex = /[?&]index=([^#]+)/;
     let match = url.match(regPlaylist);
+    console.log('match ' + match);
     let matchIndex = url.match(regIndex);
+    console.log('matchindex ' + matchIndex);
+    // console.log('regexp ' + match.match(/=LL([^#\&\?]*)/));
     let index = 0;
     if (matchIndex != null) {
       index = matchIndex[1] - 1;
     }
-    if (match != null) {
+    if (match != null && match[1].lenght > 2) { // lenght > 2 prevents from trying to load a "list=LL" (liked videos of signed-in user)
       return [match[1], index];
     } else {
       return [0,0];
@@ -225,6 +232,12 @@ function componentToHex(c) {
 // -----------------------------------
 // BANDCAMP Tests
 // -----------------------------------
+// let surl = 'https://bandcamp.com/api/bcsearch_public_api/1/autocomplete_elastic';
+// let req = {"search_text": "techno",
+//             "search_filter": "",
+//           	"full_page": false,
+//           	"fan_id": null
+//           };
 // let bcURL = 'https://clett.bandcamp.com/track/placenta';
 // let request = new Request(bcURL);
 // let headers = new Headers({
@@ -309,9 +322,9 @@ function newShootingStar() {
 newShootingStar();
 
 // Enable/disable shooting stars
-let separatorSpan = document.createElement('span');
-separatorSpan.innerHTML = ' - ';
-document.getElementById('shooting-stars-enable').after(separatorSpan);
+// 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', () => {
@@ -345,3 +358,20 @@ document.getElementById('shooting-stars-enable').addEventListener('click', () =>
 //     processingIsOn = true;
 //   }
 // });
+
+/*-------------------------------------------------------
+- EMAIL OBFUSCATION - found here http://www.grall.name/posts/1/antiSpam-emailAddressObfuscation.html
+-------------------------------------------------------*/
+document.getElementById('contact-me').addEventListener('click', (e) => {
+  console.log('okay');
+  var y = decode("pbagnpg@gsypy.klm"); //https://rot13.com/
+  e.target.setAttribute("href", "mailto:" + y);
+})
+
+function decode(a) {
+  // ROT13 : a Caesar cipher
+  // letter -> letter' such that code(letter') = (code(letter) + 13) modulo 26
+  return a.replace(/[a-zA-Z]/g, function(c){
+    return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
+  })
+};