diff options
| -rwxr-xr-x | README.md | 25 | ||||
| -rwxr-xr-x | assets/js/main.js | 42 | ||||
| -rwxr-xr-x | assets/php/getData.php | 2 | ||||
| -rwxr-xr-x | index.html | 4 |
4 files changed, 52 insertions, 21 deletions
@@ -2,20 +2,27 @@ ## Demo -- Visit [GitHub Pages](https://marvinborner.github.io/NetflixStats/index.html) +- Visit [GitHub + Pages](https://marvinborner.github.io/NetflixStats/index.html) - Follow the instructions below if you want to see your own analysis ## Instructions -- Clone the GitHub Repository with `git clone https://github.com/marvinborner/NetFlixPersonalStats` -- Remove the `example.json` file if you want to analyse your own account -- Move into the directory and setup a local PHP Server (eg. with `php -S localhost:8080`) +- Clone the GitHub Repository with + `git clone https://github.com/marvinborner/NetFlixPersonalStats` +- Remove the `example.json` file if you want to analyse your own + account +- 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 + - visiting `https://www.netflix.com/WiViewingActivity` + - 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 77dc22e..537b3d7 100755 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -78,7 +78,7 @@ function analyze(data) { obj.count++; }); - drawTotalSpent(filtered); + drawTotalSpent(data); drawTimeline(filtered); drawTopTitles(filtered); drawHeatmap(filtered); @@ -87,14 +87,12 @@ function analyze(data) { } function drawTotalSpent(data) { - const totalHours = Object.keys(data) - .map((key) => data[key].duration) - .reduce((a, b) => a + b); + const totalSeconds = data.reduce((a,b) => a + b.duration, 0); document.querySelector("#totalSpent").innerHTML = ` - ${Math.floor(totalHours / 24)} days or - ${Math.floor(totalHours)} hours or - ${Math.round(totalHours * 60)} minutes or - ${Math.round(totalHours * 60 * 60)} seconds!`; + ${Math.floor(totalSeconds / 60 / 60 / 24)} days or + ${Math.floor(totalSeconds / 60 / 60)} hours or + ${Math.round(totalSeconds / 60)} minutes or + ${Math.round(totalSeconds)} seconds!`; } function drawTimeline(data) { @@ -189,6 +187,10 @@ function drawTopTitles(data) { // TODO: There may be a bug in the first week in January function drawHeatmap(data) { + const prev = document.getElementById("prevYear"); + const selected = document.getElementById("selectedYear"); + const next = document.getElementById("nextYear"); + Date.prototype.getWeek = function () { var d = new Date( Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()) @@ -198,8 +200,15 @@ function drawHeatmap(data) { return Math.ceil(((d - yearStart) / 86400000 + 1) / 7); }; - const currentYear = new Date().getFullYear(); - const currentWeek = new Date().getWeek(); + let currentYear, currentWeek; + if (selected.innerText == "") { + currentYear = new Date().getFullYear(); + currentWeek = new Date().getWeek(); + selected.innerText = currentYear; + } else { + currentYear = +selected.innerText; + currentWeek = 52; + } const days = [[], [], [], [], [], [], []]; Object.keys(data).forEach((elem) => { @@ -302,6 +311,19 @@ function drawHeatmap(data) { }, }); chart.render(); + + prev.onclick = () => { + selected.innerText = +selected.innerText - 1; + chart.destroy(); + drawHeatmap(data); + } + + next.onclick = () => { + selected.innerText = +selected.innerText + 1; + chart.destroy(); + drawHeatmap(data); + } + } Apex.colors = ["#e50914"]; diff --git a/assets/php/getData.php b/assets/php/getData.php index a236d49..603670d 100755 --- a/assets/php/getData.php +++ b/assets/php/getData.php @@ -19,7 +19,7 @@ $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'); + $ch = curl_init('https://www.netflix.com/api/shakti/mre/viewingactivity?pg=' . $currentPage . '&pgSize=100'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_COOKIE, $cookie); @@ -38,6 +38,7 @@ <div class="stats" id="stats"> <h2>Netflix Statistics</h2> + <div><b>Note:</b> The statistics don't include rewatches due to technical reasons</div> <div>Total watch time: <span id="totalSpent"></span></div> <div> <p>Title count per hour:</p> @@ -49,7 +50,8 @@ <div class="chart" id="topChart"></div> </div> <div> - <p>Title count per day this year:</p> + <p>Title count per day per year:</p> + <p><span id="prevYear">❮</span> <span id="selectedYear" data-week=0></span> <span id="nextYear">❯</span></p> <div class="chart" id="heatMap"></div> </div> </div> |