diff options
Diffstat (limited to 'assets')
| -rwxr-xr-x | assets/js/main.js | 317 | ||||
| -rwxr-xr-x | assets/php/getData.php | 67 |
2 files changed, 215 insertions, 169 deletions
diff --git a/assets/js/main.js b/assets/js/main.js index bef3677..52b450c 100755 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -10,160 +10,205 @@ const loading = document.querySelector("#loading"); const stats = document.querySelector("#stats"); const toggle = document.querySelector("#toggle"); -cookie.addEventListener("keyup", e => { - if (e.key === "Enter") { - const request = new XMLHttpRequest(); - request.onreadystatechange = () => { - if (request.readyState === 4 && request.status === 200) { - loading.style.display = "none"; - stats.style.display = "block"; - analyze(request.responseText); - } else if (request.readyState === 4 && request.status !== 200) - alert("Cookie is not valid!") - }; - request.open("POST", "assets/php/getData.php", true); - request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); - request.send("cookie=" + cookie.value); - loading.style.display = "block"; - cookieWrap.style.display = "none"; - } +cookie.addEventListener("keyup", (e) => { + if (e.key === "Enter") { + const request = new XMLHttpRequest(); + request.onreadystatechange = () => { + if (request.readyState === 4 && request.status === 200) { + loading.style.display = "none"; + stats.style.display = "block"; + analyze(request.responseText); + } else if (request.readyState === 4 && request.status !== 200) + alert("Cookie is not valid!"); + }; + request.open("POST", "assets/php/getData.php", true); + request.setRequestHeader( + "Content-Type", + "application/x-www-form-urlencoded" + ); + request.send("cookie=" + cookie.value); + loading.style.display = "block"; + cookieWrap.style.display = "none"; + } }); function analyze(data) { - const filtered = {}; - data = JSON.parse(data).flat(1); - - // Push all titles with empty fields - data.forEach(node => filtered[node["seriesTitle"] ? node["seriesTitle"] : node["videoTitle"]] = { - duration: 0, - dates: [], - count: 0 - }); - - // Push duration, date and count - data.forEach(node => { - const obj = filtered[node["seriesTitle"] ? node["seriesTitle"] : node["videoTitle"]]; - obj.duration += node["duration"] / 60 / 60; // hours - obj.dates.push(new Date(node["date"])); - obj.count++; - }); - - setSizes(); - drawTotalSpent(filtered); - drawTimeline(filtered); - drawTopTitles(filtered); - - toggle.onclick = () => drawTopTitles(filtered); - - console.log(filtered); + const filtered = {}; + data = JSON.parse(data).flat(1); + + // Push all titles with empty fields + data.forEach( + (node) => + (filtered[node["seriesTitle"] || node["videoTitle"]] = { + duration: 0, + dates: [], + count: 0, + }) + ); + + // Push duration, date and count + data.forEach((node) => { + const obj = filtered[node["seriesTitle"] || node["videoTitle"]]; + obj.duration += node["duration"] / 60 / 60; // hours + obj.dates.push(new Date(node["date"])); + obj.count++; + }); + + setSizes(); + drawTotalSpent(filtered); + drawTimeline(filtered); + drawTopTitles(filtered); + + toggle.onclick = () => drawTopTitles(filtered); + + console.log(filtered); } function setSizes() { - const elements = document.getElementsByTagName("canvas"); - for (const elem of elements) { - elem.setAttribute("width", document.querySelector(".stats div").offsetWidth); - elem.setAttribute("height", window.innerHeight / 2 + 200); - } + const elements = document.getElementsByTagName("canvas"); + for (const elem of elements) { + elem.setAttribute( + "width", + document.querySelector(".stats div").offsetWidth + ); + elem.setAttribute("height", window.innerHeight / 2 + 200); + } } function drawTotalSpent(data) { - const totalHours = Object.keys(data).map(key => data[key].duration).reduce((a, b) => a + b); - document.querySelector("#totalSpent").innerHTML = ` + const totalHours = Object.keys(data) + .map((key) => data[key].duration) + .reduce((a, b) => a + b); + document.querySelector("#totalSpent").innerHTML = ` Days: ${Math.floor(totalHours / 24)}; Hours: ${Math.floor(totalHours)}; Minutes: ${Math.round(totalHours * 60)}; - Seconds: ${Math.round(totalHours * 60 * 60)}` + Seconds: ${Math.round(totalHours * 60 * 60)}`; } function drawTimeline(data) { - const hours = Object.keys(data).map(key => data[key].dates.map(date => date.getHours())).flat(1); - const occurrence = new Array(24).fill(0); - - hours.forEach(hour => occurrence[hour] ? occurrence[hour]++ : occurrence[hour] = 1); - - const ctx = document.getElementById("hourChart"); - new Chart(ctx, { - type: "line", - data: { - labels: [...Array(24).keys()], - datasets: [{ - data: occurrence, - borderColor: "#e50914" - }] - }, - options: { - responsive: false, - maintainAspectRatio: true, - legend: { - display: false - }, - scales: { - xAxes: [{ - gridLines: { - color: "#424242" - } - }], - yAxes: [{ - gridLines: { - color: "#424242" - } - }] - } - } - }); - - console.log(occurrence); + const hours = Object.keys(data) + .map((key) => data[key].dates.map((date) => date.getHours())) + .flat(1); + const occurrence = new Array(24).fill(0); + + hours.forEach((hour) => + occurrence[hour] ? occurrence[hour]++ : (occurrence[hour] = 1) + ); + + const ctx = document.getElementById("hourChart"); + new Chart(ctx, { + type: "line", + data: { + labels: [...Array(24).keys()], + datasets: [ + { + data: occurrence, + borderColor: "#e50914", + }, + ], + }, + options: { + responsive: false, + maintainAspectRatio: true, + legend: { + display: false, + }, + scales: { + xAxes: [ + { + gridLines: { + color: "#424242", + }, + }, + ], + yAxes: [ + { + gridLines: { + color: "#424242", + }, + }, + ], + }, + }, + }); + + console.log(occurrence); } let previous; function drawTopTitles(data) { - // Toggle layout - toggle.setAttribute("data-current", toggle.getAttribute("data-current") === "bar" ? "pie" : "bar"); - if (previous) - previous.destroy(); - - const ctx = document.getElementById("topChart"); - previous = new Chart(ctx, { - type: toggle.getAttribute("data-current"), - data: { - labels: Object.keys(data).sort((a, b) => data[b].duration - data[a].duration), - datasets: [{ - data: Object.keys(data).map(key => +data[key].duration.toFixed(2)).sort((a, b) => b - a), - borderColor: "#424242", - backgroundColor: Array.from({length: Object.keys(data).length}, () => "#" + ((1 << 24) * Math.random() | 0).toString(16)) - }] - }, - options: { - responsive: false, - maintainAspectRatio: true, - animation: { - animateScale: true, - animateRotate: true - }, - legend: { - display: false - }, - scales: { - xAxes: [{ - gridLines: { - display: toggle.getAttribute("data-current") === "bar", - color: "#424242" - }, - ticks: { - display: toggle.getAttribute("data-current") === "bar", - } - }], - yAxes: [{ - gridLines: { - display: toggle.getAttribute("data-current") === "bar", - color: "#424242" - }, - ticks: { - display: toggle.getAttribute("data-current") === "bar", - } - }] - } - } - }) + // Toggle layout + toggle.setAttribute( + "data-current", + toggle.getAttribute("data-current") === "bar" ? "pie" : "bar" + ); + if (previous) previous.destroy(); + + const ctx = document.getElementById("topChart"); + previous = new Chart(ctx, { + type: toggle.getAttribute("data-current"), + data: { + labels: Object.keys(data).sort( + (a, b) => data[b].duration - data[a].duration + ), + datasets: [ + { + data: Object.keys(data) + .map((key) => +data[key].duration.toFixed(2)) + .sort((a, b) => b - a), + borderColor: "#424242", + backgroundColor: Array.from( + { length: Object.keys(data).length }, + () => + "#" + + ( + "00000" + + ((Math.random() * (1 << 24)) | 0).toString(16) + ).slice(-6) + ), + }, + ], + }, + options: { + responsive: false, + maintainAspectRatio: true, + animation: { + animateScale: true, + animateRotate: true, + }, + legend: { + display: false, + }, + scales: { + xAxes: [ + { + gridLines: { + display: + toggle.getAttribute("data-current") === "bar", + color: "#424242", + }, + ticks: { + display: + toggle.getAttribute("data-current") === "bar", + }, + }, + ], + yAxes: [ + { + gridLines: { + display: + toggle.getAttribute("data-current") === "bar", + color: "#424242", + }, + ticks: { + display: + toggle.getAttribute("data-current") === "bar", + }, + }, + ], + }, + }, + }); } diff --git a/assets/php/getData.php b/assets/php/getData.php index f20b110..c392fc5 100755 --- a/assets/php/getData.php +++ b/assets/php/getData.php @@ -1,50 +1,51 @@ <?php + /** * Server-side script of the Netflix Stats Generator to get the personal Netflix JSON * @author Marvin Borner * @copyright Marvin Borner 2018 */ -$debug = false; +$debug = true; $cookie = $_POST['cookie']; if ($debug) { - print_r(file_get_contents("debug.json")); -} else if (isset($cookie)) { - $isLastPage = false; - $currentPage = 0; - $result = '['; - - while ($isLastPage === false) { - // netflix.appContext.state.model.models.serverDefs.data.BUILD_IDENTIFIER - $ch = curl_init('https://www.netflix.com/api/shakti/vf10970d2/viewingactivity?pg=' . $currentPage . '&pgSize=100'); - curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); - curl_setopt($ch, CURLOPT_HEADER, 0); - curl_setopt($ch, CURLOPT_COOKIE, $cookie); - $answer = curl_exec($ch); - - if ($isLastPage = (count(json_decode($answer, true)['viewedItems']) > 0)) { - $isLastPage = false; - $result .= json_encode(json_decode($answer, true)['viewedItems']) . ','; - } else { - $isLastPage = true; - $result = substr($result, 0, -1); - } - - curl_close($ch); - $currentPage++; - } + print_r(file_get_contents("../../debug.json")); + die(); +} - if ($result !== '') { - print_r($result . ']'); - } else { - http_response_code(404); - die(); - } -} else { +if (!isset($cookie)) { http_response_code(404); die(); } +$isLastPage = false; +$currentPage = 0; +$result = '['; + +while ($isLastPage === false) { + // Anywhere on netflix.com in console: netflix.appContext.state.model.models.serverDefs.data.BUILD_IDENTIFIER + $ch = curl_init('https://www.netflix.com/shakti/vbe1263cd/viewingactivity?pg=' . $currentPage . '&pgSize=100'); + curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); + curl_setopt($ch, CURLOPT_HEADER, 0); + curl_setopt($ch, CURLOPT_COOKIE, $cookie); + $answer = curl_exec($ch); + curl_close($ch); + + if ($isLastPage = (count(json_decode($answer, true)['viewedItems']) > 0)) { + $isLastPage = false; + $result .= json_encode(json_decode($answer, true)['viewedItems']) . ','; + } else { + $isLastPage = true; + $result = substr($result, 0, -1); + } + $currentPage++; +} +if ($result !== '') { + print_r($result . ']'); +} else { + http_response_code(404); + die(); +} |