Browse Source

Added contact link, commented Bandcamp related stuff

master
TFLCL 2 years ago
parent
commit
9b8e6f5771
  1. 24
      README.md
  2. 5
      css/main.css
  3. 12
      index.html
  4. 40
      js/main.js

24
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

5
css/main.css

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

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

40
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);
})
};

Loading…
Cancel
Save