diff options
| -rwxr-xr-x | README.md | 23 | ||||
| -rwxr-xr-x | assets/js/main.js | 317 | ||||
| -rwxr-xr-x | assets/php/getData.php | 67 | ||||
| -rwxr-xr-x | index.html | 88 |
4 files changed, 276 insertions, 219 deletions
@@ -1,14 +1,15 @@ # NetflixPersonalStats ## Instructions -* Clone the GitHub Repository with `git clone https://github.com/marvinborner/NetFlixPersonalStats` -* Move into the directory and setup a local PHP Server (eg. with `php -S localhost:8080`) -* Get your Netflix cookie by - * visiting `https://www.netflix.com/WiViewingActivity` - * pressing `F12` (Developer Menu) - * moving to the `Network` Tab - * selecting the first entry in the left sidebar ("WiViewingActivity"") - * copying the **complete** String of the "Cookie:" information in the "request headers" part - (make sure it looks like `memclid=***; otherNetflixCookie=****:` and so on) -* Visit `localhost:8080`, paste the cookie into the input field and press enter -* Get amazed of how long you're using Netflix every day + +- Clone the GitHub Repository with `git clone https://github.com/marvinborner/NetFlixPersonalStats` +- Move into the directory and setup a local PHP Server (eg. with `php -S localhost:8080`) +- Get your Netflix cookie by + - visiting `https://www.netflix.com/WiViewingActivity` + - pressing `F12` (Developer Menu) + - moving to the `Network` Tab + - selecting the first entry in the left sidebar ("WiViewingActivity"") + - copying the **complete** String of the "Cookie:" information in the "request headers" part + (Tip: Right-click and click on 'copy' on the cookie element) +- Visit `localhost:8080`, paste the cookie into the input field and press enter +- Get amazed of how long you're using Netflix every day 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(); +} @@ -1,50 +1,60 @@ -<!doctype html> +<!DOCTYPE html> <!-- Markup of the Netflix Stats Generator @author Marvin Borner @copyright Marvin Borner 2018 --> <html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" + name="viewport" + /> + <meta content="ie=edge" http-equiv="X-UA-Compatible" /> + <link + href="https://fonts.googleapis.com/css?family=Varela+Round" + rel="stylesheet" + /> + <link href="assets/css/normalize.css" rel="stylesheet" /> + <link href="assets/css/main.css" rel="stylesheet" /> + <title>Netflix Statistics</title> + </head> -<head> - <meta charset="UTF-8"> - <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" - name="viewport"> - <meta content="ie=edge" http-equiv="X-UA-Compatible"> - <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"> - <link href="assets/css/normalize.css" rel="stylesheet"> - <link href="assets/css/main.css" rel="stylesheet"> - <title>Netflix Statistics</title> -</head> + <body> + <div id="cookie_wrap"> + <label for="cookie">Enter your cookie:</label> + <input + class="cookie" + id="cookie" + placeholder="memclid=***; ..." + type="text" + /> + </div> -<body> -<div id="cookie_wrap"> - <label for="cookie">Enter your cookie:</label> - <input class="cookie" id="cookie" placeholder="memclid=***; ..." type="text"> -</div> + <div class="loading" id="loading"> + Loading... (This can take some time, please be patient) + </div> -<div class="loading" id="loading">Loading...</div> - -<div class="stats" id="stats"> - <h2>Netflix Statistics</h2> - <div>Total watch time: <span id="totalSpent"></span></div> - <div> - <canvas id="hourChart"></canvas> - </div> - <div> - <p>Most watched titles: </p> - <button data-current="bar" id="toggle">Toggle</button> - <canvas id="topChart"></canvas> - </div> - <div> - <p>Overview of the year:</p> - <div id="information"></div> - <table class="heatMap" id="heatMap"></table> - </div> -</div> - -<script src="assets/js/chart.js"></script> -<script src="assets/js/main.js"></script> -</body> + <div class="stats" id="stats"> + <h2>Netflix Statistics</h2> + <div>Total watch time: <span id="totalSpent"></span></div> + <div> + <canvas id="hourChart"></canvas> + </div> + <div> + <p>Most watched titles:</p> + <button data-current="bar" id="toggle">Toggle</button> + <canvas id="topChart"></canvas> + </div> + <div> + <p>Overview of the year:</p> + <div id="information"></div> + <table class="heatMap" id="heatMap"></table> + </div> + </div> + <script src="assets/js/chart.js"></script> + <script src="assets/js/main.js"></script> + </body> </html> |