Browse Source

Added search function using YT data API. Fixed slider and scrollbar on web kit. Minor changes

master
TFLCL 1 year ago
parent
commit
ee487c5fd7
  1. 5
      README.md
  2. 182
      css/main.css
  3. 33
      index.html
  4. 107
      js/main.js

5
README.md

@ -6,12 +6,15 @@ It's a simple way to play music from Youtube and smoothly fade between tracks th
## What's next?
### Maybe one day
- Search videos straight from the app (needs API key and calls)
- ~~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)
- A playlist of to-be-played tracks that can be added manually ("add url") or through the search
- A history of played tracks?
### 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
- Better indication of the video current status (playing or paused),maybe using `outline` on the iframe, or changing the `box-shadow color`?
## External resources and inspiration
### Inspiration

182
css/main.css

@ -1,5 +1,5 @@
:root {
--bg-color: #223;
--bg-color: 34, 34, 51; /* #223 */
--text-color: #eee;
--text-color-light: #bbb;
--accent-color-1: #ff91d8;
@ -9,7 +9,6 @@
--crossfader-thumb-width: 30px;
--crossfader-thumb-height: 60px;
--crossfader-thumb-radius: 15px;
}
@font-face {
@ -79,6 +78,11 @@ textarea {
resize: vertical;
}
a, a:visited {
color: inherit;
text-decoration: none;
}
#bg {
z-index: -2;
overflow: hidden;
@ -105,8 +109,7 @@ textarea {
#players, #search-area {
display: flex;
justify-content: center;
padding-bottom: 2em;
gap: 15px;
/* gap: 15px; */
}
.hidden {
@ -142,15 +145,20 @@ iframe {
/* right: 0; */
}
input[type=button], button {
cursor: pointer;
border: none;
background-color: var(--accent-color-2);
color: rgb(var(--bg-color));
border-radius: 5px;
font-weight: 900;
transition: transform 0.2s ease;
}
input[type=button]:hover, button:hover {
transform: scale(1.1);
}
.load-button {
/* flex-grow: 2; */
cursor: pointer;
border: none;
background-color: var(--accent-color-2);
color: var(--bg-color);
font-weight: 900;
border-radius: 5px;
/* padding: 2em; */
width: 50%;
}
@ -244,6 +252,8 @@ input[type=range]:focus {
input[type=range]::-webkit-slider-runnable-track {
background: var(--accent-color-1);
border-radius: 25px;
margin-bottom: 0.5em;
height: 4px;
width: 100%;
cursor: pointer;
}
@ -251,12 +261,13 @@ input[type=range]::-webkit-slider-thumb {
background: var(--accent-color-2);
border: solid var(--accent-color-1-light);
border-width: 0px;
margin-top: -0.4em;
width: 1em;
height: 1em;
border-radius: 1em;
cursor: pointer;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: var(--accent-color-1-light);
}
input[type=range]::-moz-range-track {
background: var(--accent-color-1);
width: 100%;
@ -265,39 +276,10 @@ input[type=range]::-moz-range-track {
}
input[type=range]::-moz-range-thumb {
background: var(--accent-color-2);
/* border: solid var(--accent-color-1-light); */
cursor: pointer;
border-width: 0px;
border-radius: var(--crossfader-thumb-radius);
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
color: transparent;
width: 100%;
cursor: pointer;
}
input[type=range]::-ms-fill-lower {
background: var(--accent-color-1);
border-radius: 25px;
}
input[type=range]::-ms-fill-upper {
background: var(--accent-color-1);
border-radius: 25px;
}
input[type=range]::-ms-thumb {
background: var(--accent-color-2);
/* border: solid var(--accent-color-1-light); */
cursor: pointer;
margin-top: 0px;
/*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
background: var(--accent-color-1);
}
input[type=range]:focus::-ms-fill-upper {
background: var(--accent-color-1-light);
}
/*------------------------*/
input[type=range]#crossfader::-webkit-slider-runnable-track {
@ -307,12 +289,11 @@ input[type=range]#crossfader::-webkit-slider-thumb {
margin-top: -20.65px;
width: var(--crossfader-thumb-width);
height: var(--crossfader-thumb-height);
/* border-width: 5px;
border-radius: 12px; */
border-radius: var(--crossfader-thumb-radius);
}
input[type=range]#crossfader::-moz-range-track {
/* border-radius: 25px; */
border-radius: var(--crossfader-thumb-radius);
width: 100%;
height: 13.3px;
cursor: pointer;
@ -320,39 +301,100 @@ input[type=range]#crossfader::-moz-range-track {
input[type=range]#crossfader::-moz-range-thumb {
width: var(--crossfader-thumb-width);
height: var(--crossfader-thumb-height);
/* border-width: 5px; */
/* border-radius: 12px; */
border-radius: var(--crossfader-thumb-radius);
cursor: pointer;
}
input[type=range]#crossfader::-ms-track {
/* border-width: 18.75px 0; */
height: 13.3px;
.search-wrapper {
/* margin-bottom: 2em; */
}
input[type=range]#crossfader::-ms-fill-lower {
/* border-width: 2.3px;
border-radius: 50px; */
.search-bar-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 2em;
margin-bottom: 1em;
}
input[type=range]#crossfader::-ms-fill-upper {
/* border-radius: 50px; */
#search-bar {
display: flex;
column-gap: 1em;
}
input[type=range]#crossfader::-ms-thumb {
width: var(--crossfader-thumb-width);
height: var(--crossfader-thumb-height);
/* border-width: 5px;
border-radius: 12px; */
cursor: pointer;
margin-top: 0px;
/*Needed to keep the Edge thumb centred*/
#search-bar input, #search-bar button {
height: 2em;;
}
#search-button {
padding: 0.2em 1em;
}
#search-results {
display: flex;
overflow: auto;
width: 95vw;
/* flex-direction: column; */
column-gap: 1em;
/* padding-bottom: 1em; */
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.8) rgba(0,0,0,0);
border-radius: 6px;
}
#search-results::-webkit-scrollbar {
height: 9px;
}
#search-results::-webkit-scrollbar-track {
background: rgba(0,0,0,0);
}
#search-results::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.8);
width: 9px;
}
.search-item {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
position: relative;
}
.search-item-info {
position: relative;
}
.search-item-title {
position: absolute;
top: 0;
margin: 0.5em;
}
.search-item-thumbnail img {
/* width: 80%; */
}
.search-item-title span {
display: inline;
background-color: rgba(var(--bg-color), 0.8);
padding: 0.3em 0;
line-height: 1.8em;
}
.search-item-controls {
display: flex;
/* justify-content: center; */
column-gap: 1em;
margin: 0.5em;
position: absolute;
bottom: 0;
}
.load-to-A, .load-to-B {
padding: 0.5em;
}
.footer {
font-weight: 100;
padding-top: 2em;
}
.footer a, .footer a:visited {
color: var(--text-color);
text-decoration: none;
/* padding-top: 2em; */
}
.footer span {

33
index.html

@ -84,24 +84,53 @@
</div>
</div>
<div class="search-wrapper">
<div class="search-bar-wrapper">
<form id="search-bar">
<input id='search-query' type="search" minlength="4" maxlength="512" placeholder="Search for Youtube videos">
<button id='search-button' type="submit">Search</button>
</form>
</div>
<div id="search-results">
<div class="search-item" data-id="">
<div class="search-item-info">
<div class="search-item-thumbnail">
<img src="" alt="">
</div>
<div class="search-item-title">
<a href="#" rel="noreferrer" target="_blank"><span>Titre vidéo</span></a>
</div>
</div>
<div class="search-item-controls">
<input type="button" class="load-to-A" value="Load to desk A">
<input type="button" class="load-to-B" value="Load to desk B">
</div>
</div>
</div>
</div>
<h1>🔊 Mix like a pro youtube DJ! 🎧</h1>
<div class="footer">
<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>
<span class="spacer"></span>
<a href="https://git.tflcl.xyz/tfl/YTDJ">🧩 Source code 🧩</a>
<a href="https://git.tflcl.xyz/tfl/YTDJ">🧩 More info / Source code 🧩</a>
</p>
</div>
</div>
<!-- REMOVE THIS LINE (Some light analytics to know how people use this website) -->
<script async defer data-website-id="c073e27d-91e4-47fa-bd38-578b7fe727eb" src="https://stats.tflcl.xyz/sucre.js"></script>
<!-- Background was first made using P5JS -->
<!-- <script src="/js/vendor/p5.js"></script>
<script src="/js/vendor/p5.svg.js"></script>
<script src="/js/sketch.js"></script> -->
<script src="https://apis.google.com/js/api.js"></script>
<script src="/js/main.js"></script>

107
js/main.js

@ -116,6 +116,10 @@ class player {
this.player.loadVideoById(trackID);
}
cue(trackID) {
this.player.cueVideoById(trackID);
}
loadPlaylist(playlistID) {
//First element should be the playlist ID, second element the index of the video to play
let list = playlistID[0];
@ -201,9 +205,9 @@ function get_playlist_id(url) {
let regPlaylist = /[?&]list=([^#\&\?]+)/;
let regIndex = /[?&]index=([^#]+)/;
let match = url.match(regPlaylist);
console.log('match ' + match);
// console.log('match ' + match);
let matchIndex = url.match(regIndex);
console.log('matchindex ' + matchIndex);
// console.log('matchindex ' + matchIndex);
// console.log('regexp ' + match.match(/=LL([^#\&\?]*)/));
let index = 0;
if (matchIndex != null) {
@ -313,8 +317,6 @@ function newShootingStar() {
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');
@ -346,8 +348,6 @@ document.getElementById('shooting-stars-enable').addEventListener('click', () =>
}
});
// Enable/disable shooting stars (with P5JS background)
// if (typeof processingSketch !== 'undefined') {
// let separatorSpan = document.createElement('span');
@ -371,7 +371,6 @@ document.getElementById('shooting-stars-enable').addEventListener('click', () =>
- 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);
})
@ -383,3 +382,97 @@ function decode(a) {
return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
})
};
/**
SEARCH WITH YOUTUBE API
*/
let lastSearchQuery;
let results;
gapi.load("client", loadClient);
// https://developers.google.com/youtube/v3/docs/search/list
function loadClient() {
gapi.client.setApiKey("AIzaSyCuz5tGc9oDxw6RZnpibakYFHzMvsd8bUs");
return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
.then(function() { console.log("GAPI client loaded for API"); },
function(err) { console.error("Error loading GAPI client for API", err); });
}
function execute(query) {
// Make sure the client is loaded before calling this method.
return gapi.client.youtube.search.list({
"part": [
"snippet"
],
"maxResults": 15,
"q": query,
"type": [
"video"
],
"fields": "items(id/videoId,snippet(title,thumbnails/medium))"
})
.then(function(response) {
if (response.status == 200) {
results = response.result;
localStorage.setItem('sres', JSON.stringify(results));
displaySearchResults(results);
}
// Handle the results here (response.result has the parsed body).
console.log("Response", response);
},
function(err) {
console.error("Execute error", err);
alert("Whoops, something went wrong. \n Maybe all of my daily Youtube Data API requests have been used. Try again later! \n Maybe it's something else. Try again later?");
});
}
const searchForm = document.getElementById('search-bar');
const searchQueryObj = document.getElementById('search-query');
const searchButtonObj = document.getElementById('search-button');
const searchResultsObj = document.getElementById('search-results');
//When the page has loaded, store the hidden search-item class div as a template for future searchs
const searchResultItemObj = searchResultsObj.querySelector('.search-item').cloneNode(true);
searchResultsObj.querySelector('.search-item').remove();
searchForm.addEventListener('submit', (e) => {
e.preventDefault(); // We handle the form submit by ourselve
if (searchQueryObj.value != lastSearchQuery) { // prevent useless requests
console.log('Search for: ' + searchQueryObj.value);
execute(searchQueryObj.value);
lastSearchQuery = searchQueryObj.value;
}
return false;
});
function displaySearchResults(res) {
// First we clean previous search results
while (searchResultsObj.firstChild) {
searchResultsObj.removeChild(searchResultsObj.firstChild);
}
res.items.forEach((item) => {
let itemElmt = searchResultItemObj.cloneNode(true);
itemElmt.querySelector('.search-item-info img').setAttribute('src', item.snippet.thumbnails.medium.url);
itemElmt.querySelector('.search-item-info span').innerHTML = item.snippet.title;
itemElmt.querySelector('.search-item-info a').setAttribute('href', 'https://www.youtube.com/watch?v=' + item.id.videoId)
itemElmt.dataset.id = item.id.videoId;
itemElmt.querySelector('.load-to-A').addEventListener('click', () => {
playerA.cue(item.id.videoId);
});
itemElmt.querySelector('.load-to-B').addEventListener('click', () => {
playerB.cue(item.id.videoId);
});
console.log(itemElmt);
searchResultsObj.appendChild(itemElmt);
});
}
// For testing purpose
results = JSON.parse(localStorage.getItem('sres'));
displaySearchResults(results);

Loading…
Cancel
Save