@ -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 ) ;
