2021-12-12 16:31:15 +00:00
var loaded = false ;
2021-03-08 18:45:06 +00:00
function get _stats ( ) {
2020-12-19 16:10:59 +00:00
2021-12-12 16:31:15 +00:00
var loading _icon = document . getElementById ( "loading_icon" ) ;
2020-12-19 16:10:59 +00:00
2021-03-08 18:45:06 +00:00
stats _form = {
2021-12-12 16:31:15 +00:00
"cookie" : cookie ,
2022-01-18 16:57:26 +00:00
"caching" : false ,
"plex_identity" : plex _identity
2021-03-08 18:45:06 +00:00
} ;
2020-12-19 16:10:59 +00:00
2021-03-08 18:45:06 +00:00
var stats _data = JSON . stringify ( stats _form ) ;
2020-12-19 16:10:59 +00:00
2021-03-08 18:45:06 +00:00
var xhttp = new XMLHttpRequest ( ) ;
xhttp . onreadystatechange = function ( ) {
2021-10-11 12:25:19 +00:00
if ( this . readyState == 4 && ( this . status == 200 || this . status == 400 || this . status == 500 ) ) {
2021-10-07 16:44:27 +00:00
try {
var result = JSON . parse ( this . responseText ) ;
} catch ( error ) {
2022-01-11 13:33:30 +00:00
if ( this . responseText . includes ( 'Maximum execution time of' ) ) {
loading _icon . style . display = "none" ;
document . getElementById ( "search_wrapped_button" ) . disabled = false ;
document . getElementById ( "search_wrapped_button" ) . style . opacity = '1' ;
document . getElementById ( "plex_signout_button" ) . disabled = false ;
document . getElementById ( "plex_signout_button" ) . style . opacity = '1' ;
document . getElementById ( 'results_error' ) . innerHTML = 'PHP runtime exceeded and stopped execution. Admin must shorten wrapped period or perform caching.' ;
} else {
console . log ( 'Error: ' + error ) ;
console . log ( this . responseText ) ;
loading _icon . style . display = "none" ;
document . getElementById ( "search_wrapped_button" ) . disabled = false ;
document . getElementById ( "search_wrapped_button" ) . style . opacity = '1' ;
document . getElementById ( "plex_signout_button" ) . disabled = false ;
document . getElementById ( "plex_signout_button" ) . style . opacity = '1' ;
document . getElementById ( 'results_error' ) . innerHTML = "API response can't be parsed." ;
}
return ;
2021-10-07 16:44:27 +00:00
}
2021-10-24 16:08:22 +00:00
if ( result . error ) {
loading _icon . style . display = "none" ;
2021-12-12 16:31:15 +00:00
document . getElementById ( "search_wrapped_button" ) . disabled = false ;
document . getElementById ( "search_wrapped_button" ) . style . opacity = '1' ;
document . getElementById ( "plex_signout_button" ) . disabled = false ;
document . getElementById ( "plex_signout_button" ) . style . opacity = '1' ;
document . getElementById ( 'results_error' ) . innerHTML = result . message ;
} else {
results = result ;
load _page ( results ) ;
2021-10-24 16:08:22 +00:00
}
2021-03-08 18:45:06 +00:00
}
} ;
xhttp . withCredentials = true ;
xhttp . open ( "post" , "api/get_stats.php" ) ;
xhttp . send ( stats _data ) ;
2020-12-19 16:10:59 +00:00
2021-03-08 18:45:06 +00:00
loading _icon . style . display = "inline" ;
}
2020-12-19 16:10:59 +00:00
2020-12-22 16:27:30 +00:00
function load _page ( data ) {
2021-12-12 16:31:15 +00:00
// Remove snow
document . getElementById ( 'snowflakes' ) . style . display = 'none' ;
2022-01-11 13:33:30 +00:00
// Set body background color to introduction
document . getElementById ( "body" ) . classList . add ( 'color-red' ) ;
2021-12-12 16:31:15 +00:00
// Enable changing background colors JS
loaded = true ;
2020-12-19 16:10:59 +00:00
2021-03-08 18:45:06 +00:00
if ( results . error ) {
2020-12-19 16:10:59 +00:00
$ ( '#results_error' ) . html ( results . message ) ;
2020-12-22 16:27:30 +00:00
loading _icon . style . display = "none" ;
search _button ( "SEARCH" ) ;
2021-03-13 22:40:46 +00:00
return
2020-12-19 16:10:59 +00:00
}
2021-12-12 16:31:15 +00:00
// Find HTML elements and hide them
2020-12-19 16:10:59 +00:00
var search _box = document . getElementById ( "search_input" ) ;
2021-03-08 18:45:06 +00:00
var login _content = document . getElementById ( "login_content" ) ;
2021-03-12 22:45:44 +00:00
var footer = document . getElementById ( "footer" ) ;
2020-12-19 16:10:59 +00:00
search _box . style . display = "none" ;
2021-03-08 18:45:06 +00:00
login _content . style . display = "none" ;
2021-03-12 22:45:44 +00:00
footer . style . display = "none" ;
2021-12-12 16:31:15 +00:00
// Load the introduction
2021-03-08 18:45:06 +00:00
load _introduction ( ) ;
2020-12-19 16:10:59 +00:00
2021-12-12 16:31:15 +00:00
// Load the segments based on configuration
2021-03-08 18:45:06 +00:00
if ( ! results . user . user _movies . error && functions . get _user _movie _stats ) {
load _movies ( ) ;
}
2021-10-01 23:21:18 +00:00
2021-03-08 18:45:06 +00:00
if ( ! results . user . user _shows . error && functions . get _user _show _stats ) {
load _shows ( ) ;
}
2021-10-01 23:21:18 +00:00
if ( ! results . user . user _music . error && functions . get _user _music _stats ) {
load _music ( ) ;
}
2021-03-08 18:45:06 +00:00
2021-10-01 23:21:18 +00:00
if ( ! results . year _stats . error && ( functions . get _year _stats _movies || functions . get _year _stats _shows || functions . get _year _stats _music ) ) {
2021-03-08 18:45:06 +00:00
load _users ( ) ;
}
2020-12-19 16:10:59 +00:00
2021-12-12 16:31:15 +00:00
// Load the outro
2021-03-08 18:45:06 +00:00
load _outro ( ) ;
}
2021-12-12 16:31:15 +00:00
2021-03-08 18:45:06 +00:00
//INTRODUCTION
function load _introduction ( ) {
var text = "" ;
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='red' style='width: 100%; padding-bottom: 15em; padding-top: 15em; height:auto; background-color:none'>" ;
2020-12-19 16:10:59 +00:00
2020-12-23 13:17:10 +00:00
text += "<div class='boks3'>" ;
2021-03-08 18:45:06 +00:00
2020-12-23 13:17:10 +00:00
text += "<div class='boks2'>" ;
2021-03-08 18:45:06 +00:00
text += '<img src="assets/img/finished-illustration.svg" style="width:100%; ">' ;
text += "</div>" ;
2020-12-19 16:10:59 +00:00
2022-01-11 13:33:30 +00:00
text += "<div class='boks2' style='margin: auto 0;'>" ;
text += functions . stats _intro . replaceAll ( '{user}' , results . user . name )
2021-03-08 18:45:06 +00:00
text += "</div>" ;
text += "</div>" ;
text += "</div>" ;
document . getElementById ( "search_results" ) . innerHTML += text ;
}
2022-01-11 13:33:30 +00:00
// Toggle list to plays or duration
function top _list _sort _by ( array , title , music , year , div _id , button _id , functions _data ) {
document . getElementById ( div _id ) . outerHTML = top _list ( array , title , music , year , div _id ) ;
var button _text = document . getElementById ( button _id + '_text' ) ;
if ( button _text . innerHTML . includes ( functions _data . wrapperr _sort _plays ) ) {
button _text . innerHTML = functions _data . wrapperr _sort _duration ;
} else {
button _text . innerHTML = functions _data . wrapperr _sort _plays ;
}
var button = document . getElementById ( button _id ) ;
if ( button . getAttribute ( 'onclick' ) . includes ( '_duration' ) ) {
button . setAttribute ( "onclick" , button . getAttribute ( 'onclick' ) . replaceAll ( '_duration' , '_plays' ) ) ;
} else {
button . setAttribute ( "onclick" , button . getAttribute ( 'onclick' ) . replaceAll ( '_plays' , '_duration' ) ) ;
}
}
2021-03-08 18:45:06 +00:00
//MOVIES
function load _movies ( ) {
var text = "" ;
2021-10-24 16:08:22 +00:00
if ( results . user . user _movies . data . movie _plays > 1 ) {
2021-03-08 18:45:06 +00:00
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='orangered' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color: none;'>" ;
// Get custom text fron functions
text += "<div class='boks3'>" ;
text += "<h1>" + functions . get _user _movie _stats _title + "</h1>" ;
text += "</div>" ;
2021-03-08 18:45:06 +00:00
2022-01-11 13:33:30 +00:00
// Replace custom string with movie plays
2021-03-08 18:45:06 +00:00
text += "<div class='boks3'>" ;
2022-01-11 13:33:30 +00:00
text += "<h2>" + functions . get _user _movie _stats _subtitle . replaceAll ( '{movie_count}' , results . user . user _movies . data . movie _plays ) + "</h2>" ;
text += "</div>" ;
2021-03-08 18:45:06 +00:00
2022-01-11 13:33:30 +00:00
text += "<div class='boks3'>" ;
text += "<p>" + functions . get _user _movie _stats _subsubtitle + "</p>" ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
2022-01-11 13:33:30 +00:00
// Place stats
2021-03-08 18:45:06 +00:00
text += "<div class='boks3'>" ;
2021-03-13 22:40:46 +00:00
2021-03-08 18:45:06 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += '<button class="form-control btn" style="margin: 0.5em auto; width: fit-content;" name="user_movies_data_movies_button" id="user_movies_data_movies_button" onclick="top_list_sort_by(results.user.user_movies.data.movies_plays, functions.get_user_movie_stats_top_movie_plural, false, true, \'user_movies_data_movies\', \'user_movies_data_movies_button\', functions);"><img src="assets/tweak.svg" class="btn_logo"><p2 id="user_movies_data_movies_button_text">' + functions . wrapperr _sort _plays + '</p2></button>' ;
text += top _list ( results . user . user _movies . data . movies _duration , functions . get _user _movie _stats _top _movie _plural , false , true , 'user_movies_data_movies' ) ;
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-03-09 23:41:48 +00:00
text += "<div class='boks2' style='padding: 0;'>" ;
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += completion _movie ( results . user . user _movies . data . user _movie _finishing _percent , false , functions ) ;
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-03-09 23:41:48 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += paused _movie ( results . user . user _movies . data . user _movie _most _paused , false , functions ) ;
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-10-24 16:08:22 +00:00
if ( ! results . user . user _movies . data . user _movie _oldest . error ) {
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += oldest _movie ( results . user . user _movies . data . user _movie _oldest , functions ) ;
2021-10-24 16:08:22 +00:00
text += "</div>" ;
2021-03-09 23:41:48 +00:00
}
2021-03-13 22:40:46 +00:00
2021-03-09 23:41:48 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += you _spent ( results . user . user _movies . data . movie _duration , 'movies' , functions ) ;
2021-03-09 23:41:48 +00:00
text += "</div>" ;
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2020-12-19 16:10:59 +00:00
2021-10-24 16:08:22 +00:00
} else if ( results . user . user _movies . data . movie _plays == 1 ) {
2020-12-23 13:17:10 +00:00
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='orangered' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:none;'>" ;
2020-12-23 13:17:10 +00:00
2021-03-08 18:45:06 +00:00
text += "<div class='boks3'>" ;
2022-01-11 13:33:30 +00:00
text += "<h1>" + functions . get _user _movie _stats _title + "</h1>" ;
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<h2>" + functions . get _user _movie _stats _subtitle _one + "</h2>" ;
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<p>" + functions . get _user _movie _stats _subsubtitle _one + "</p>" ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
text += "<div class='boks3'>" ;
2021-03-13 22:40:46 +00:00
2021-03-08 18:45:06 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += top _list ( results . user . user _movies . data . movies _duration , functions . get _user _movie _stats _top _movie , false , true ) ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
2021-03-09 23:41:48 +00:00
text += "<div class='boks2' style='padding: 0;'>" ;
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += completion _movie ( results . user . user _movies . data . user _movie _finishing _percent , true , functions ) ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
2021-03-09 23:41:48 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += paused _movie ( results . user . user _movies . data . user _movie _most _paused , true , functions ) ;
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-03-09 23:41:48 +00:00
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
text += "</div>" ;
} else {
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='orangered' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:none;'>" ;
2021-03-08 18:45:06 +00:00
text += "<div class='boks3'>" ;
2021-10-07 16:44:27 +00:00
text += "<div class='boks2'>" ;
text += "<div class='status'>" ;
2022-01-11 13:33:30 +00:00
text += "<h1>" + functions . get _user _movie _stats _title + "</h1>" ;
text += "<h2>" + functions . get _user _movie _stats _subtitle _none + "</h2>" ;
text += "<p>" + functions . get _user _movie _stats _subsubtitle _none + "</p>" ;
2021-10-07 16:44:27 +00:00
text += '<img src="assets/img/bored.svg" style="margin: auto; display: block; width: 15em;">' ;
text += "</div>" ;
text += "</div>" ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-03-08 18:45:06 +00:00
}
document . getElementById ( "search_results" ) . innerHTML += text ;
}
//SHOWS
function load _shows ( ) {
var text = "" ;
2021-10-24 16:08:22 +00:00
if ( results . user . user _shows . data . show _plays > 1 ) {
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='orangeyellow' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:none;'>" ;
2021-03-09 23:41:48 +00:00
text += "<div class='boks3'>" ;
2022-01-11 13:33:30 +00:00
text += "<h1>" + functions . get _user _show _stats _title + "</h1>" ;
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<h2>" + functions . get _user _show _stats _subtitle . replaceAll ( '{show_count}' , results . user . user _shows . data . show _plays ) + "</h2>" ;
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<p>" + functions . get _user _show _stats _subsubtitle + "</p>" ;
2021-03-09 23:41:48 +00:00
text += "</div>" ;
2020-12-23 13:17:10 +00:00
2021-03-08 18:45:06 +00:00
text += "<div class='boks3'>" ;
2021-03-13 22:40:46 +00:00
2020-12-23 13:17:10 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += '<button class="form-control btn" style="margin: 0.5em auto; width: fit-content;" name="user_shows_data_shows_button" id="user_shows_data_shows_button" onclick="top_list_sort_by(results.user.user_shows.data.shows_plays, functions.get_user_show_stats_top_show_plural, false, true, \'user_shows_data_shows\', \'user_shows_data_shows_button\', functions);"><img src="assets/tweak.svg" class="btn_logo"><p2 id="user_shows_data_shows_button_text">' + functions . wrapperr _sort _plays + '</p2></button>' ;
text += top _list ( results . user . user _shows . data . shows _duration , functions . get _user _show _stats _top _show _plural , false , true , 'user_shows_data_shows' ) ;
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-03-09 23:41:48 +00:00
text += "<div class='boks2' style='padding: 0;'>" ;
2021-03-08 18:45:06 +00:00
2022-01-11 13:33:30 +00:00
if ( results . user . user _shows . data . shows _duration . length > 0 && ! results . user . user _shows . data . show _buddy . error && functions . get _user _show _stats _buddy ) {
2021-03-09 23:41:48 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += load _showbuddy ( results . user . user _shows . data . show _buddy , results . user . user _shows . data . shows _duration [ 0 ] , functions ) ;
2021-03-09 23:41:48 +00:00
text += "</div>" ;
}
2021-10-07 16:44:27 +00:00
if ( results . user . user _shows . data . episode _duration _longest . plays != 0 && results . user . user _shows . data . episode _duration _longest . duration != 0 ) {
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += load _longest _episode ( results . user . user _shows . data . episode _duration _longest , functions ) ;
2021-10-07 16:44:27 +00:00
text += "</div>" ;
}
2021-03-09 23:41:48 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += you _spent ( results . user . user _shows . data . show _duration , 'shows' , functions ) ;
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-03-09 23:41:48 +00:00
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-03-08 18:45:06 +00:00
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
2021-10-24 16:08:22 +00:00
} else if ( results . user . user _shows . data . show _plays == 1 ) {
2021-03-08 18:45:06 +00:00
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='orangeyellow' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:none;'>" ;
text += "<div class='boks3'>" ;
text += "<h1>" + functions . get _user _show _stats _title + "</h1>" ;
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<h2>" + functions . get _user _show _stats _subtitle _one + "</h2>" ;
text += "</div>" ;
2021-03-09 23:41:48 +00:00
text += "<div class='boks3'>" ;
2022-01-11 13:33:30 +00:00
text += "<p>" + functions . get _user _show _stats _subsubtitle _one + "</p>" ;
2021-03-09 23:41:48 +00:00
text += "</div>" ;
2021-03-08 18:45:06 +00:00
text += "<div class='boks3'>" ;
2021-03-13 22:40:46 +00:00
2021-03-08 18:45:06 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += top _list ( results . user . user _shows . data . shows _duration , functions . get _user _show _stats _top _show , false , true ) ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
2020-12-22 16:27:30 +00:00
2022-01-11 13:33:30 +00:00
if ( results . user . user _shows . data . shows _duration . length > 0 && ! results . user . user _shows . data . show _buddy . error && functions . get _user _show _stats _buddy ) {
2021-03-08 18:45:06 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += load _showbuddy ( results . user . user _shows . data . show _buddy , results . user . user _shows . data . shows _duration [ 0 ] , functions ) ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
}
2021-10-07 16:44:27 +00:00
if ( results . user . user _shows . data . episode _duration _longest . plays != 0 && results . user . user _shows . data . episode _duration _longest . duration != 0 ) {
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += load _longest _episode ( results . user . user _shows . data . episode _duration _longest , functions ) ;
2021-10-07 16:44:27 +00:00
text += "</div>" ;
}
2021-03-08 18:45:06 +00:00
text += "</div>" ;
2020-12-22 16:27:30 +00:00
text += "</div>" ;
2021-03-08 18:45:06 +00:00
} else {
2020-12-19 16:10:59 +00:00
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='orangeyellow' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:none;'>" ;
2021-03-08 18:45:06 +00:00
text += "<div class='boks3'>" ;
2021-10-07 16:44:27 +00:00
text += "<div class='boks2'>" ;
text += "<div class='status'>" ;
2022-01-11 13:33:30 +00:00
text += "<h1>" + functions . get _user _show _stats _title + "</h1>" ;
text += "<h2>" + functions . get _user _show _stats _subtitle _none + "</h2>" ;
text += "<p>" + functions . get _user _show _stats _subsubtitle _none + "</p>" ;
2021-10-07 16:44:27 +00:00
text += '<img src="assets/img/bored.svg" style="margin: auto; display: block; width: 15em;">' ;
text += "</div>" ;
text += "</div>" ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
text += "</div>" ;
}
document . getElementById ( "search_results" ) . innerHTML += text ;
}
2021-10-01 23:21:18 +00:00
//MUSIC
function load _music ( ) {
var text = "" ;
2021-10-24 16:08:22 +00:00
if ( results . user . user _music . data . track _plays > 1 ) {
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='mango' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:none;'>" ;
2021-10-01 23:21:18 +00:00
text += "<div class='boks3'>" ;
2022-01-11 13:33:30 +00:00
text += "<h1>" + functions . get _user _music _stats _title + "</h1>" ;
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<h2>" + functions . get _user _music _stats _subtitle . replaceAll ( '{track_count}' , results . user . user _music . data . track _plays ) + "</h2>" ;
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<p>" + functions . get _user _music _stats _subsubtitle + "</p>" ;
2021-10-01 23:21:18 +00:00
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += '<button class="form-control btn" style="margin: 0.5em auto; width: fit-content;" name="user_music_data_tracks_button" id="user_music_data_tracks_button" onclick="top_list_sort_by(results.user.user_music.data.tracks_plays, functions.get_user_music_stats_top_track_plural, \'track\', false, \'user_music_data_tracks\', \'user_music_data_tracks_button\', functions);"><img src="assets/tweak.svg" class="btn_logo"><p2 id="user_music_data_tracks_button_text">' + functions . wrapperr _sort _plays + '</p2></button>' ;
text += top _list ( results . user . user _music . data . tracks _duration , functions . get _user _music _stats _top _track _plural , "track" , false , 'user_music_data_tracks' ) ;
2021-10-01 23:21:18 +00:00
text += "</div>" ;
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += '<button class="form-control btn" style="margin: 0.5em auto; width: fit-content;" name="user_music_data_albums_button" id="user_music_data_albums_button" onclick="top_list_sort_by(results.user.user_music.data.albums_plays, functions.get_user_music_stats_top_album_plural, \'album\', false, \'user_music_data_albums\', \'user_music_data_albums_button\', functions);"><img src="assets/tweak.svg" class="btn_logo"><p2 id="user_music_data_albums_button_text">' + functions . wrapperr _sort _plays + '</p2></button>' ;
text += top _list ( results . user . user _music . data . albums _duration , functions . get _user _music _stats _top _album _plural , "album" , false , 'user_music_data_albums' ) ;
2021-10-01 23:21:18 +00:00
text += "</div>" ;
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += '<button class="form-control btn" style="margin: 0.5em auto; width: fit-content;" name="user_music_data_artists_button" id="user_music_data_artists_button" onclick="top_list_sort_by(results.user.user_music.data.artists_plays, functions.get_user_music_stats_top_artist_plural, \'artist\', false, \'user_music_data_artists\', \'user_music_data_artists_button\', functions);"><img src="assets/tweak.svg" class="btn_logo"><p2 id="user_music_data_artists_button_text">' + functions . wrapperr _sort _plays + '</p2></button>' ;
text += top _list ( results . user . user _music . data . artists _duration , functions . get _user _music _stats _top _artist _plural , "artist" , false , 'user_music_data_artists' ) ;
2021-10-01 23:21:18 +00:00
text += "</div>" ;
2022-01-11 13:33:30 +00:00
text += "</div>" ;
text += "<div class='boks3'>" ;
2021-10-07 16:44:27 +00:00
text += "<div class='boks2' style='padding: 0;'>" ;
2021-10-12 12:38:54 +00:00
2021-10-24 16:08:22 +00:00
if ( ! results . user . user _music . data . user _album _oldest . error ) {
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += oldest _album ( results . user . user _music . data . user _album _oldest , functions ) ;
2021-10-24 16:08:22 +00:00
text += "</div>" ;
2021-10-07 16:44:27 +00:00
}
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += you _spent ( results . user . user _music . data . track _duration , 'music' , functions ) ;
2021-10-07 16:44:27 +00:00
text += "</div>" ;
text += "</div>" ;
2021-10-05 13:34:30 +00:00
2021-10-01 23:21:18 +00:00
text += "</div>" ;
text += "</div>" ;
2021-10-24 16:08:22 +00:00
} else if ( results . user . user _music . data . track _plays == 1 ) {
2021-10-05 13:34:30 +00:00
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='mango' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:none;'>" ;
2021-10-05 13:34:30 +00:00
text += "<div class='boks3'>" ;
2022-01-11 13:33:30 +00:00
text += "<h1>" + functions . get _user _music _stats _title + "</h1>" ;
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<h2>" + functions . get _user _music _stats _subtitle _one + "</h2>" ;
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<p>" + functions . get _user _music _stats _subsubtitle _one + "</p>" ;
2021-10-05 13:34:30 +00:00
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += top _list ( results . user . user _music . data . tracks _duration , functions . get _user _music _stats _top _track , true , false ) ;
2021-10-05 13:34:30 +00:00
text += "</div>" ;
text += "</div>" ;
text += "</div>" ;
} else {
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='mango' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:none;'>" ;
2021-10-05 13:34:30 +00:00
text += "<div class='boks3'>" ;
2021-10-07 16:44:27 +00:00
text += "<div class='boks2'>" ;
text += "<div class='status'>" ;
2022-01-11 13:33:30 +00:00
text += "<h1>" + functions . get _user _music _stats _title + "</h1>" ;
text += "<h2>" + functions . get _user _music _stats _subtitle _none + "</h2>" ;
text += "<p>" + functions . get _user _music _stats _subsubtitle _none + "</p>" ;
2021-10-07 16:44:27 +00:00
text += '<img src="assets/img/bored.svg" style="margin: auto; display: block; width: 15em;">' ;
text += "</div>" ;
text += "</div>" ;
2021-10-05 13:34:30 +00:00
text += "</div>" ;
text += "</div>" ;
}
2021-10-01 23:21:18 +00:00
document . getElementById ( "search_results" ) . innerHTML += text ;
}
2022-01-11 13:33:30 +00:00
function oldest _movie ( array , functions _data ) {
2021-03-13 22:40:46 +00:00
var html = "" ;
html += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
html += "<div class='stats'>" ;
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _movie _stats _oldest _title . replaceAll ( '{movie_title}' , '<b>' + array . title + "</b> (" + array . year + ")" ) ;
html += '<br>' ;
html += '<br>' ;
2021-03-13 22:40:46 +00:00
if ( array . year < 1950 ) {
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _movie _stats _oldest _subtitle _pre _1950 ;
2021-03-13 22:40:46 +00:00
} else if ( array . year < 1975 ) {
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _movie _stats _oldest _subtitle _pre _1975 ;
2021-03-13 22:40:46 +00:00
} else if ( array . year < 2000 ) {
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _movie _stats _oldest _subtitle _pre _2000 ;
2021-03-13 22:40:46 +00:00
} else {
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _movie _stats _oldest _subtitle ;
2021-03-13 22:40:46 +00:00
}
2022-01-11 13:33:30 +00:00
html += '<br><img src="assets/img/old-man.svg" style="margin: auto; display: block; width: 15em;">' ;
2021-03-13 22:40:46 +00:00
html += "</div>" ;
html += "</div>" ;
return html ;
}
2022-01-11 13:33:30 +00:00
function oldest _album ( album , functions _data ) {
2021-10-07 16:44:27 +00:00
var html = "" ;
html += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
html += "<div class='stats'>" ;
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _music _stats _oldest _album _title . replaceAll ( '{album_title}' , '<b>' + album . parent _title + "</b> (" + album . year + ")</b>" ) . replaceAll ( '{album_artist}' , album . grandparent _title ) ;
html += "<br><br>" ;
html += functions _data . get _user _music _stats _oldest _album _subtitle ;
html += '<br><img src="assets/img/old-man.svg" style="margin: auto; display: block; width: 15em;">' ;
2021-10-07 16:44:27 +00:00
html += "</div>" ;
html += "</div>" ;
return html ;
}
2022-01-11 13:33:30 +00:00
function completion _movie ( user _movie _finishing _percent , single , functions _data ) {
2021-03-13 22:40:46 +00:00
var html = "" ;
html += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
html += "<div class='stats'>" ;
var str = JSON . stringify ( user _movie _finishing _percent ) ;
2022-01-11 13:33:30 +00:00
if ( str . includes ( '.' ) ) {
var percent = str . split ( '.' ) ;
percent = percent [ 0 ] + '.' + percent [ 1 ] . slice ( 0 , 2 ) ;
} else {
var percent = str ;
}
2021-03-13 22:40:46 +00:00
if ( ! single ) {
2022-01-11 13:33:30 +00:00
html += "<b>" + functions _data . get _user _movie _stats _movie _completion _title _plural . replaceAll ( '{movie_finish_percent}' , percent ) + "</b>" ;
2021-03-13 22:40:46 +00:00
} else {
2022-01-11 13:33:30 +00:00
html += "<b>" + functions _data . get _user _movie _stats _movie _completion _title . replaceAll ( '{movie_finish_percent}' , percent ) + "</b>" ;
2021-03-13 22:40:46 +00:00
}
2022-01-11 13:33:30 +00:00
if ( user _movie _finishing _percent >= 90.0 ) {
html += '<img src="assets/img/champion.svg" style="margin: 1em auto; display: block; width: 15em;">' ;
} else {
html += '<br><br>' ;
2021-03-13 22:40:46 +00:00
}
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _movie _stats _movie _completion _subtitle ;
2021-03-13 22:40:46 +00:00
html += "</div>" ;
html += "</div>" ;
return html ;
}
2022-01-11 13:33:30 +00:00
function paused _movie ( array , single , functions _data ) {
2021-03-13 22:40:46 +00:00
var html = "" ;
html += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
if ( array . paused _counter > 0 ) {
var pause _time = seconds _to _time ( array . paused _counter , false ) ;
if ( ! single ) {
html += "<div class='stats'>" ;
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _movie _stats _pause _title . replaceAll ( '{movie_title}' , '<b>' + array . title + '</b>' + ' (' + array . year + ')' ) ;
html += "<br>" ;
html += "<br>" ;
html += functions _data . get _user _movie _stats _pause _subtitle . replaceAll ( '{pause_duration}' , pause _time ) ;
2021-03-13 22:40:46 +00:00
html += "</div>" ;
} else {
html += "<div class='stats'>" ;
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _movie _stats _pause _title _one ;
html += "<br>" ;
html += "<br>" ;
html += functions _data . get _user _movie _stats _pause _subtitle _one . replaceAll ( '{pause_duration}' , pause _time ) ;
2021-03-13 22:40:46 +00:00
html += "</div>" ;
}
} else {
html += "<div class='stats'>" ;
2022-01-11 13:33:30 +00:00
html += '<b>' + functions _data . get _user _movie _stats _pause _title _none + '</b>' ;
html += '<br><img src="assets/img/awards.svg" style="margin: auto; display: block; width: 15em;">' ;
html += "<br>" ;
html += functions _data . get _user _movie _stats _pause _subtitle _none ;
2021-03-13 22:40:46 +00:00
html += "</div>" ;
}
html += "</div>" ;
return html ;
}
2021-10-07 16:44:27 +00:00
2022-01-11 13:33:30 +00:00
function load _showbuddy ( buddy _object , top _show , functions _data ) {
2021-03-08 18:45:06 +00:00
var html = "" ;
2021-03-13 22:40:46 +00:00
2021-03-08 18:45:06 +00:00
html += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
html += "<div class='stats'>" ;
2022-01-11 13:33:30 +00:00
if ( ! buddy _object . error ) {
if ( ! buddy _object . found ) {
html += functions _data . get _user _show _stats _buddy _title _none . replaceAll ( '{top_show_title}' , '<b>' + top _show . title + '</b>' ) ;
html += '<br><img src="assets/img/quest.svg" style="margin: auto; display: block; width: 15em;"><br>' ;
html += functions _data . get _user _show _stats _buddy _subtitle _none ;
2021-03-08 18:45:06 +00:00
} else {
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _show _stats _buddy _title . replaceAll ( '{top_show_title}' , '<b>' + top _show . title + '</b>' ) . replaceAll ( '{buddy_username}' , buddy _object . friendly _name ) ;
var combined = results . user . user _shows . data . show _buddy . duration + parseInt ( results . user . user _shows . data . shows _duration [ 0 ] . duration ) ;
2021-03-13 22:40:46 +00:00
var combined _2 = seconds _to _time ( combined ) ;
2021-03-08 18:45:06 +00:00
html += '<img src="assets/img/social-event.svg" style="margin: auto; display: block; width: 15em;">' ;
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _show _stats _buddy _subtitle . replaceAll ( '{buddy_duration_sum}' , combined _2 ) . replaceAll ( '{top_show_title}' , top _show . title ) ;
2021-03-08 18:45:06 +00:00
}
}
html += "</div>" ;
html += "</div>" ;
2021-03-13 22:40:46 +00:00
return html ;
}
2022-01-11 13:33:30 +00:00
function load _longest _episode ( array , functions _data ) {
2021-10-07 16:44:27 +00:00
var html = "" ;
html += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
html += "<div class='stats'>" ;
2022-01-11 13:33:30 +00:00
html += functions _data . get _user _show _stats _most _played _title . replaceAll ( '{show_episode}' , '<b>' + array . title + '</b>' ) . replaceAll ( '{show_title}' , array . grandparent _title ) ;
html += '<br><br>' ;
html += functions _data . get _user _show _stats _most _played _subtitle . replaceAll ( '{episode_play_sum}' , play _plays ( array . plays ) ) . replaceAll ( '{episode_duration_sum}' , seconds _to _time ( array . duration , false ) ) ;
2021-10-07 16:44:27 +00:00
html += "</div>" ;
html += "</div>" ;
return html ;
}
2022-01-11 13:33:30 +00:00
function you _spent ( time , category , functions _data ) {
2021-03-13 22:40:46 +00:00
var html = "" ;
2021-12-12 16:31:15 +00:00
var time _str = seconds _to _time ( time , false ) ;
2021-03-13 22:40:46 +00:00
2022-01-11 13:33:30 +00:00
if ( category === 'movies' ) {
html += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
html += "<div class='stats'>" ;
html += functions _data . get _user _movie _stats _spent _title . replaceAll ( '{movie_sum_duration}' , time _str ) ;
html += '<br><img src="assets/img/watching-tv.svg" style="margin: auto; display: block; width: 15em;">' ;
html += "</div>" ;
html += "</div>" ;
} else if ( category === 'shows' ) {
html += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
html += functions _data . get _user _show _stats _spent _title . replaceAll ( '{show_sum_duration}' , time _str ) ;
html += '<br><img src="assets/img/watching-tv.svg" style="margin: auto; display: block; width: 15em;">' ;
html += "</div>" ;
} else if ( category === 'music' ) {
html += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
html += "<div class='stats'>" ;
html += functions _data . get _user _music _stats _spent _title . replaceAll ( '{music_sum_duration}' , time _str ) ;
2021-12-12 16:31:15 +00:00
if ( time > 3600 ) {
var time _min = Math . floor ( time / 60 ) ;
2022-01-11 13:33:30 +00:00
var time _str = time _min + ' ' + functions . wrapperr _minute _plural ;
html += '<br><br>' ;
html += functions _data . get _user _music _stats _spent _subtitle . replaceAll ( '{music_sum_minutes}' , number _with _spaces ( time _str ) ) ;
2021-12-12 16:31:15 +00:00
}
2021-10-05 13:34:30 +00:00
html += '<br><img src="assets/img/music.svg" style="margin: auto; display: block; width: 15em;">' ;
2022-01-11 13:33:30 +00:00
html += "</div>" ;
2021-03-13 22:40:46 +00:00
html += "</div>" ;
2022-01-11 13:33:30 +00:00
} else {
html += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
html += "Unknown category." ;
html += "</div>" ;
}
2021-03-13 22:40:46 +00:00
return html ;
}
2022-01-11 13:33:30 +00:00
function top _list ( array , title , music , year , div _id ) {
2021-03-13 22:40:46 +00:00
var html = "" ;
2022-01-11 13:33:30 +00:00
html += "<div class='status' id='" + div _id + "'>" ;
2021-03-13 22:40:46 +00:00
html += "<div class='stats'>" ;
html += "<div class='status-title'>" + title + "</div>" ;
html += "<div class='stats-list'>" ;
for ( i = 0 ; ( i < array . length && i < 10 ) ; i ++ ) {
html += "<div class='item'>" ;
html += "<div class='number'>" ;
html += i + 1 + ". " ;
html += "</div>" ;
2021-10-01 23:21:18 +00:00
html += "<div class='movie_name'>" ;
2021-10-24 16:08:22 +00:00
if ( music === "track" || music === "album" ) {
2021-10-01 23:21:18 +00:00
html += array [ i ] . grandparent _title + "<br>" ;
}
html += "<b>" ;
2021-10-24 16:08:22 +00:00
if ( music === "album" ) {
html += array [ i ] . parent _title ;
} else if ( music === "artist" ) {
html += array [ i ] . grandparent _title ;
} else {
html += array [ i ] . title ;
}
2021-03-13 22:40:46 +00:00
html += "</b>" ;
var movie _hour = seconds _to _time ( array [ i ] . duration , true ) ;
2021-10-12 12:38:54 +00:00
if ( typeof ( array [ i ] . year ) !== "undefined" && year ) {
2021-03-13 22:40:46 +00:00
html += " (" + array [ i ] . year + ")" ;
}
html += "<br>" + movie _hour + "<br>" + play _plays ( array [ i ] . plays ) ;
html += "</div>" ;
html += "</div>" ;
}
html += "</div>" ;
html += "</div>" ;
html += "</div>" ;
return html ;
}
2022-01-11 13:33:30 +00:00
function top _list _names ( array , title , div _id ) {
2021-03-13 22:40:46 +00:00
var html = "" ;
2022-01-11 13:33:30 +00:00
html += "<div class='status' id='" + div _id + "'>" ;
2021-03-13 22:40:46 +00:00
html += "<div class='stats'>" ;
html += "<div class='status-title'>" + title + "</div>" ;
html += "<div class='stats-list'>" ;
for ( i = 0 ; i < 10 && i < array . length ; i ++ ) {
if ( i == 0 ) {
html += "<div class='item gold'>" ;
} else if ( i == 1 ) {
html += "<div class='item silver'>" ;
} else if ( i == 2 ) {
html += "<div class='item bronze'>" ;
} else {
html += "<div class='item'>" ;
}
html += "<div class='number'>" ;
html += i + 1 + ". " ;
html += "</div>" ;
if ( array [ i ] . user == results . user . name ) {
html += "<div class='name you'>" ;
html += array [ i ] . user ;
html += "</div>" ;
} else {
html += "<div class='name'>" ;
html += array [ i ] . user ;
html += "</div>" ;
}
html += "</div>" ;
}
html += "</div>" ;
html += "</div>" ;
html += "</div>" ;
2021-03-08 18:45:06 +00:00
return html ;
}
2022-01-11 13:33:30 +00:00
// Toggle names list to plays or duration
function top _list _names _sort _by ( array , title , div _id , button _id , functions _data ) {
document . getElementById ( div _id ) . outerHTML = top _list _names ( array , title , div _id ) ;
var button _text = document . getElementById ( button _id + '_text' ) ;
if ( button _text . innerHTML . includes ( functions _data . wrapperr _sort _plays ) ) {
button _text . innerHTML = button _text . innerHTML = functions _data . wrapperr _sort _duration ;
} else {
button _text . innerHTML = button _text . innerHTML = functions _data . wrapperr _sort _plays ;
}
var button = document . getElementById ( button _id ) ;
if ( button . getAttribute ( 'onclick' ) . includes ( '_duration' ) ) {
button . setAttribute ( "onclick" , button . getAttribute ( 'onclick' ) . replaceAll ( '_duration' , '_plays' ) ) ;
} else {
button . setAttribute ( "onclick" , button . getAttribute ( 'onclick' ) . replaceAll ( '_plays' , '_duration' ) ) ;
}
}
2021-03-08 18:45:06 +00:00
//TOP USERS
function load _users ( ) {
var text = "" ;
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='pistach' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color: none;'>" ;
text += "<h1>" + functions . get _year _stats _title + "</h1>" ;
text += "<h2>" + functions . get _year _stats _subtitle + "</h2>" ;
text += "<p>" + functions . get _year _stats _subsubtitle + "</p>" ;
2020-12-23 13:17:10 +00:00
text += "<div class='boks3'>" ;
2021-10-01 23:21:18 +00:00
if ( functions . get _year _stats _leaderboard ) {
2020-12-23 13:17:10 +00:00
2021-10-01 23:21:18 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += '<button class="form-control btn" style="margin: 0.5em auto; width: fit-content;" name="year_stats_year_users_button" id="year_stats_year_users_button" onclick="top_list_names_sort_by(results.year_stats.year_users.data.users_plays, \'Top users\', \'year_stats_year_users\', \'year_stats_year_users_button\', functions);"><img src="assets/tweak.svg" class="btn_logo"><p2 id="year_stats_year_users_button_text">' + functions . wrapperr _sort _plays + '</p2></button>' ;
text += top _list _names ( results . year _stats . year _users . data . users _duration , functions . get _year _stats _leaderboard _title , 'year_stats_year_users' ) ;
2021-10-01 23:21:18 +00:00
text += "</div>" ;
2020-12-23 13:17:10 +00:00
2021-10-24 16:08:22 +00:00
var time _movies = seconds _to _time ( results . year _stats . year _movies . data . movie _duration , false ) ;
var time _shows = seconds _to _time ( results . year _stats . year _shows . data . show _duration , false ) ;
var time _artists = seconds _to _time ( results . year _stats . year _music . data . music _duration , false ) ;
2021-10-07 16:44:27 +00:00
var function _sum = 0 ;
2021-12-02 14:19:50 +00:00
var time = 0 ;
2021-10-01 23:21:18 +00:00
text += "<div class='boks2'>" ;
text += "<div class='status' id='list3' style='padding:1em;min-width:15em;'>" ;
text += "<div class='stats'>" ;
2021-10-24 16:08:22 +00:00
if ( functions . get _year _stats _movies && results . year _stats . year _movies . data . movie _plays > 0 ) {
2022-01-11 13:33:30 +00:00
text += functions . get _year _stats _movies _duration _title . replaceAll ( '{movie_duration_sum}' , '<b>' + time _movies + '</b>' ) ;
2021-10-01 23:21:18 +00:00
text += "<br><br>" ;
2021-10-07 16:44:27 +00:00
function _sum += 1 ;
2021-12-02 14:19:50 +00:00
time += results . year _stats . year _movies . data . movie _duration ;
2021-10-01 23:21:18 +00:00
}
2021-10-24 16:08:22 +00:00
if ( functions . get _year _stats _shows && results . year _stats . year _shows . data . show _plays > 0 ) {
2022-01-11 13:33:30 +00:00
text += functions . get _year _stats _shows _duration _title . replaceAll ( '{show_duration_sum}' , '<b>' + time _shows + '</b>' ) ;
2021-10-01 23:21:18 +00:00
text += "<br><br>" ;
2021-10-07 16:44:27 +00:00
function _sum += 1 ;
2021-12-02 14:19:50 +00:00
time += results . year _stats . year _shows . data . show _duration ;
2021-10-01 23:21:18 +00:00
}
2021-10-24 16:08:22 +00:00
if ( functions . get _year _stats _music && results . year _stats . year _music . data . music _plays > 0 ) {
2022-01-11 13:33:30 +00:00
text += functions . get _year _stats _music _duration _title . replaceAll ( '{music_duration_sum}' , '<b>' + time _artists + '</b>' ) ;
2021-10-01 23:21:18 +00:00
text += "<br><br>" ;
2021-10-07 16:44:27 +00:00
function _sum += 1 ;
2021-12-02 14:19:50 +00:00
time += results . year _stats . year _music . data . music _duration ;
2021-10-01 23:21:18 +00:00
}
2021-10-07 16:44:27 +00:00
if ( function _sum > 1 ) {
2021-12-02 14:19:50 +00:00
var time _all = seconds _to _time ( Math . floor ( time ) , false ) ;
2022-01-11 13:33:30 +00:00
text += functions . get _year _stats _duration _sum _title . replaceAll ( '{all_duration_sum}' , '<b>' + time _all + '</b>' ) ;
2021-10-01 23:21:18 +00:00
}
text += '<img src="assets/img/home.svg" style="margin: auto; display: block; width: 15em;">' ;
text += "</div>" ;
2020-12-23 13:17:10 +00:00
text += "</div>" ;
text += "</div>" ;
2021-10-01 23:21:18 +00:00
}
2020-12-19 16:10:59 +00:00
text += "</div>" ;
2020-12-23 13:17:10 +00:00
text += "<div class='boks3'>" ;
2020-12-19 16:10:59 +00:00
2021-10-24 16:08:22 +00:00
if ( functions . get _year _stats _movies && results . year _stats . year _movies . data . movie _plays > 0 ) {
2021-10-01 23:21:18 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += '<button class="form-control btn" style="margin: 0.5em auto; width: fit-content;" name="year_stats_year_movies_button" id="year_stats_year_movies_button" onclick="top_list_sort_by(results.year_stats.year_movies.data.movies_plays, \'Top movies\', false, true, \'year_stats_year_movies\', \'year_stats_year_movies_button\', functions);"><img src="assets/tweak.svg" class="btn_logo"><p2 id="year_stats_year_movies_button_text">' + functions . wrapperr _sort _plays + '</p2></button>' ;
text += top _list ( results . year _stats . year _movies . data . movies _duration , functions . get _year _stats _movies _title , false , true , 'year_stats_year_movies' ) ;
2021-10-01 23:21:18 +00:00
text += "</div>" ;
}
2020-12-23 13:17:10 +00:00
2021-10-24 16:08:22 +00:00
if ( functions . get _year _stats _shows && results . year _stats . year _shows . data . show _plays > 0 ) {
2021-10-01 23:21:18 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += '<button class="form-control btn" style="margin: 0.5em auto; width: fit-content;" name="year_stats_year_shows_button" id="year_stats_year_shows_button" onclick="top_list_sort_by(results.year_stats.year_shows.data.shows_plays, \'Top shows\', false, false, \'year_stats_year_shows\', \'year_stats_year_shows_button\', functions);"><img src="assets/tweak.svg" class="btn_logo"><p2 id="year_stats_year_shows_button_text">' + functions . wrapperr _sort _plays + '</p2></button>' ;
text += top _list ( results . year _stats . year _shows . data . shows _duration , functions . get _year _stats _shows _title , false , false , 'year_stats_year_shows' ) ;
2021-10-01 23:21:18 +00:00
text += "</div>" ;
}
2021-10-24 16:08:22 +00:00
if ( functions . get _year _stats _music && results . year _stats . year _music . data . music _plays > 0 ) {
2021-10-01 23:21:18 +00:00
text += "<div class='boks2'>" ;
2022-01-11 13:33:30 +00:00
text += '<button class="form-control btn" style="margin: 0.5em auto; width: fit-content;" name="year_stats_year_music_button" id="year_stats_year_music_button" onclick="top_list_sort_by(results.year_stats.year_music.data.artists_plays, \'Top artists\', \'artist\', false, \'year_stats_year_music\', \'year_stats_year_music_button\', functions);"><img src="assets/tweak.svg" class="btn_logo"><p2 id="year_stats_year_music_button_text">' + functions . wrapperr _sort _plays + '</p2></button>' ;
text += top _list ( results . year _stats . year _music . data . artists _duration , functions . get _year _stats _music _title , "artist" , false , 'year_stats_year_music' ) ;
2021-10-01 23:21:18 +00:00
text += "</div>" ;
}
2020-12-23 13:17:10 +00:00
text += "</div>" ;
2020-12-19 16:10:59 +00:00
text += "</div>" ;
2021-03-08 18:45:06 +00:00
document . getElementById ( "search_results" ) . innerHTML += text ;
}
2020-12-19 16:10:59 +00:00
2021-03-08 18:45:06 +00:00
//Outro
function load _outro ( ) {
var text = "" ;
2020-12-19 16:10:59 +00:00
2022-01-11 13:33:30 +00:00
text += "<div class='boks' data-color='charcoal' style='height: auto !important; width: 100%; padding-bottom: 15em; padding-top: 15em; height:10em; background-color:none;'>" ;
2021-03-08 18:45:06 +00:00
text += "<div class='boks3'>" ;
2021-12-12 16:31:15 +00:00
2022-01-11 13:33:30 +00:00
text += "<div class='boks2' style='margin: auto 0;'>" ;
2021-03-08 18:45:06 +00:00
text += '<img src="assets/img/new-years.svg" style="width:100%; ">' ;
text += "</div>" ;
2021-12-12 16:31:15 +00:00
2021-03-08 18:45:06 +00:00
text += "<div class='boks2' style='margin-top:5em;'>" ;
2022-01-11 13:33:30 +00:00
text += functions . stats _outro ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
2021-12-12 16:31:15 +00:00
text += "</div>" ;
text += "<div class='boks3'>" ;
text += "<div class='boks2' style='margin-top:5em;'>" ;
if ( ! link _mode && functions . create _share _links ) {
text += "<div class='form-group' id='share_wrapped_div' style=''>" ;
text += "<button class='form-control btn' name='share_wrapped_button' id='share_wrapped_button' onclick='create_wrapped_link()'>" ;
text += "<img src='assets/share.svg' class='btn_logo'>" ;
text += "<p2 id='share_wrapped_button_text'>Share wrapped page</p2>" ;
text += "</button>" ;
text += "<div class='form-group' id='share_wrapped_results_div' style='display: none; margin: 0.5em 0;'>" ;
text += "<div><p>This URL is valid for 7 days:</p></div>" ;
2022-01-11 13:33:30 +00:00
text += "<div id='share_wrapped_results_url' style='padding: 0.25em; background-color: var(--white); border-radius: 0.25em; overflow: auto;'></div>" ;
2021-12-12 16:31:15 +00:00
text += "</div>" ;
text += "</div>" ;
}
var url _home = window . location . href . split ( '?' ) [ 0 ] ;
text += "<div class='form-group' id='return_home_div' style=''>" ;
text += ` <button class='form-control btn' name='return_home_button' id='return_home_button' onclick='window.location.href = " ` + url _home + ` ";'> ` ;
text += "<img src='assets/restart.svg' class='btn_logo'>" ;
text += "<p2 id='return_home_text'>Return</p2>" ;
text += "</button>" ;
text += "</div>" ;
text += "</div>" ;
2021-03-08 18:45:06 +00:00
text += "</div>" ;
text += "</div>" ;
2020-12-19 16:10:59 +00:00
2021-03-08 18:45:06 +00:00
document . getElementById ( "search_results" ) . innerHTML += text ;
2021-03-13 22:40:46 +00:00
}
2021-12-12 16:31:15 +00:00
function create _wrapped _link ( ) {
document . getElementById ( "share_wrapped_button" ) . disabled = true ;
document . getElementById ( "share_wrapped_button" ) . style . opacity = '0.5' ;
wrapped _form = {
2022-01-11 13:33:30 +00:00
"cookie" : get _cookie ( 'wrapperr-user' ) ,
"data" : results ,
"functions" : functions
2021-12-12 16:31:15 +00:00
} ;
var wrapped _data = JSON . stringify ( wrapped _form ) ;
var xhttp = new XMLHttpRequest ( ) ;
xhttp . onreadystatechange = function ( ) {
if ( this . readyState == 4 && ( this . status == 200 || this . status == 400 || this . status == 500 ) ) {
try {
var result = JSON . parse ( this . responseText ) ;
} catch ( error ) {
alert ( "API response can't be parsed." ) ;
console . log ( 'Error: ' + error ) ;
console . log ( this . responseText ) ;
document . getElementById ( "share_wrapped_button" ) . disabled = false ;
document . getElementById ( "share_wrapped_button" ) . style . opacity = '1' ;
}
if ( result . error ) {
alert ( result . message ) ;
2022-01-11 13:33:30 +00:00
document . getElementById ( "share_wrapped_button" ) . disabled = false ;
document . getElementById ( "share_wrapped_button" ) . style . opacity = '1' ;
2021-12-12 16:31:15 +00:00
} else {
document . getElementById ( 'share_wrapped_results_url' ) . innerHTML = '<span style="white-space: nowrap;">' + window . location . href . split ( '?' ) [ 0 ] + result . url + '</span>' ;
document . getElementById ( 'share_wrapped_results_div' ) . style . display = 'inline-block' ;
document . getElementById ( "share_wrapped_button" ) . disabled = false ;
document . getElementById ( "share_wrapped_button" ) . style . opacity = '1' ;
}
}
} ;
xhttp . withCredentials = true ;
xhttp . open ( "post" , "api/create_link.php" ) ;
xhttp . send ( wrapped _data ) ;
}
2021-03-13 22:40:46 +00:00
//Converting seconds to time in string
var seconds _in _day = 86400 ;
var seconds _in _hour = 3600 ;
var seconds _in _minute = 60 ;
function seconds _to _time ( seconds , comma ) {
if ( seconds >= seconds _in _day ) {
2022-01-11 13:33:30 +00:00
var time = seconds _to _days ( seconds , comma , functions ) ;
2021-03-13 22:40:46 +00:00
} else if ( seconds >= seconds _in _hour ) {
2022-01-11 13:33:30 +00:00
var time = seconds _to _hours ( seconds , comma , functions ) ;
2021-03-13 22:40:46 +00:00
} else if ( seconds >= seconds _in _minute ) {
2022-01-11 13:33:30 +00:00
var time = seconds _to _minutes ( seconds , comma , functions ) ;
2021-03-13 22:40:46 +00:00
} else {
2022-01-11 13:33:30 +00:00
var time = seconds _to _seconds ( seconds , functions ) ;
2021-03-13 22:40:46 +00:00
}
return time ;
}
2021-12-12 16:31:15 +00:00
// Change background color for each category
$ ( window ) . scroll ( function ( ) {
if ( loaded ) {
// Select the window, body and elements containing stats
var $window = $ ( window ) ,
$body = $ ( 'body' ) ,
$panel = $ ( '.boks' ) ;
// Change 33% earlier than scroll position so colour is there when you arrive
var scroll = $window . scrollTop ( ) + ( $window . height ( ) / 3 ) ;
$panel . each ( function ( ) {
var $this = $ ( this ) ;
// If position is within range of this panel.
// So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
// Remember we set the scroll to 33% earlier in scroll var.
if ( $this . position ( ) . top <= scroll && $this . position ( ) . top + $this . height ( ) > scroll ) {
// Remove all classes on body with color-
$body . removeClass ( function ( index , css ) {
return ( css . match ( /(^|\s)color-\S+/g ) || [ ] ) . join ( ' ' ) ;
} ) ;
// Add class of currently active div
$body . addClass ( 'color-' + $ ( this ) . data ( 'color' ) ) ;
}
} ) ;
}
} ) . scroll ( ) ;
