diff options
| author | Marvin Borner | 2018-08-05 22:12:05 +0200 |
|---|---|---|
| committer | Marvin Borner | 2018-08-05 22:12:05 +0200 |
| commit | ca005c80acb21dd425017cee8b52805629a8be4b (patch) | |
| tree | a94ae03791d8e2845d42dada5cbacccb3a248f6a | |
| parent | 782ce29a89e7b3bb256115237198e5704035c11b (diff) | |
Added title watch time for individual series/movie
| -rw-r--r-- | assets/css/main.css | 2 | ||||
| -rw-r--r-- | assets/css/main.css.map | 2 | ||||
| -rwxr-xr-x | assets/js/main.js | 136 |
3 files changed, 77 insertions, 63 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index faf1c9c..2fe6501 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,2 +1,2 @@ -body{font-family:"Varela Round", sans-serif !important;text-rendering:optimizeLegibility !important;box-sizing:border-box !important}.Main{min-height:100vh}.SectionHeader{display:flex;justify-content:center;align-items:center;align-content:space-between;width:100%}.SectionHeader h1{text-transform:capitalize}.GradientBackground .GreenBlue,.GradientBackground .OrangePink{position:fixed;top:0;left:0;z-index:-1;transition:opacity 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;width:100%;height:100vh}.GradientBackground .Color:not(.Active){display:none}.GradientBackground .GreenBlue{background:linear-gradient(145deg, #c3f0c8, #509bf5)}.GradientBackground .OrangePink{background:linear-gradient(145deg, #ffc867, #f037a6)}.GradientBackground .GreenBlue{background:linear-gradient(145deg, #c3f0c8, #509bf5)}.FavoritesSection .SectionHeader{height:40vh;color:#1e3264}.FavoritesSection .MostWatchedOverview{padding:30px}.FavoritesSection .MostWatchedOverview .OverviewText{position:relative;float:left;max-width:50%}.FavoritesSection .MostWatchedOverview .MostWatchedPoster{position:relative;float:right;max-width:50%;margin-bottom:20px}canvas#MostWatchedChart{opacity:0} +body{font-family:"Varela Round", sans-serif !important;text-rendering:optimizeLegibility !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important}.Main{min-height:100vh}.SectionHeader{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between;width:100%}.SectionHeader h1{text-transform:capitalize}.GradientBackground .GreenBlue,.GradientBackground .OrangePink{position:fixed;top:0;left:0;z-index:-1;-webkit-transition:opacity 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;transition:opacity 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;width:100%;height:100vh}.GradientBackground .Color:not(.Active){display:none}.GradientBackground .GreenBlue{background:linear-gradient(145deg, #c3f0c8, #509bf5)}.GradientBackground .OrangePink{background:linear-gradient(145deg, #ffc867, #f037a6)}.GradientBackground .GreenBlue{background:linear-gradient(145deg, #c3f0c8, #509bf5)}.FavoritesSection .SectionHeader{height:40vh;color:#1e3264}.FavoritesSection .MostWatchedOverview{padding:30px}.FavoritesSection .MostWatchedOverview .OverviewText{position:relative;float:left;max-width:50%}.FavoritesSection .MostWatchedOverview .MostWatchedPoster{position:relative;float:right;max-width:50%;margin-bottom:20px}canvas#MostWatchedChart{opacity:0} /*# sourceMappingURL=main.css.map */
\ No newline at end of file diff --git a/assets/css/main.css.map b/assets/css/main.css.map index 8d9b4db..1fbcbf1 100644 --- a/assets/css/main.css.map +++ b/assets/css/main.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "AAQA,AAAA,IAAI,AAAC,CACD,WAAW,CAAE,qCAAqC,CAClD,cAAc,CAAE,6BAA6B,CAC7C,UAAU,CAAE,qBAAqB,CAAI,AAEzC,AAAA,KAAK,AAAC,CAEF,UAAU,CAAE,KAAK,CAAI,AAGzB,AAAA,cAAc,AAAC,CACX,OAAO,CAAE,IAAI,CACb,eAAe,CAAE,MAAM,CACvB,WAAW,CAAE,MAAM,CACnB,aAAa,CAAE,aAAa,CAC5B,KAAK,CAAE,IAAI,CAAI,AAEnB,AAAe,cAAD,CAAC,EAAE,AAAC,CACd,cAAc,CAAE,UAAU,CAAI,AAGlC,AACI,mBADe,CAaf,UAAU,CAbd,AACI,mBADe,CAkBf,WAAW,AAjBD,CACN,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,OAAO,CAAE,EAAE,CACX,UAAU,CAAE,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,EAAE,CACjE,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,KAAK,CAAI,AARzB,AAUI,mBAVe,CAUf,MAAM,AAAA,IAAK,CAAA,AAAA,OAAO,CAAE,CAChB,OAAO,CAAE,IAAI,CAAI,AAXzB,AAaI,mBAbe,CAaf,UAAU,AAAC,CACP,UAAU,CAAE,yCAAyC,CAEjC,AAhB5B,AAkBI,mBAlBe,CAkBf,WAAW,AAAC,CACR,UAAU,CAAE,yCAAyC,CAEjC,AArB5B,AAaI,mBAbe,CAaf,UAAU,AAUC,CACP,UAAU,CAAE,yCAAyC,CAEjC,AAG5B,AACI,iBADa,CACb,cAAc,AAAC,CACX,MAAM,CAAE,IAAI,CACZ,KAAK,CAvDD,OAAO,CAuDS,AAH5B,AAKI,iBALa,CAKb,oBAAoB,AAAC,CACjB,OAAO,CAAE,IAAI,CAWgB,AAjBrC,AAQQ,iBARS,CAKb,oBAAoB,CAGhB,aAAa,AAAC,CACV,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,GAAG,CAAI,AAX9B,AAaQ,iBAbS,CAKb,oBAAoB,CAQhB,kBAAkB,AAAC,CACf,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,KAAK,CACZ,SAAS,CAAE,GAAG,CACd,aAAa,CAAE,IAAI,CAAI,AAGnC,AAAA,MAAM,AAAA,iBAAiB,AAAC,CACpB,OAAO,CAAE,CAAC,CAAI", + "mappings": "AAQA,AAAA,IAAI,AAAC,CACD,WAAW,CAAE,qCAAqC,CAClD,cAAc,CAAE,6BAA6B,CAC7C,UAAU,CAAE,qBAAqB,CAAG,AAExC,AAAA,KAAK,AAAC,CAEF,UAAU,CAAE,KAAK,CAAG,AAGxB,AAAA,cAAc,AAAC,CACX,OAAO,CAAE,IAAI,CACb,eAAe,CAAE,MAAM,CACvB,WAAW,CAAE,MAAM,CACnB,aAAa,CAAE,aAAa,CAC5B,KAAK,CAAE,IAAI,CAAG,AAElB,AAAA,cAAc,CAAC,EAAE,AAAC,CACd,cAAc,CAAE,UAAU,CAAG,AAGjC,AACI,mBADe,CAaf,UAAU,CAbd,mBAAmB,CAkBf,WAAW,AAjBD,CACN,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,OAAO,CAAE,EAAE,CACX,UAAU,CAAE,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,EAAE,CACjE,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,KAAK,CAAG,AARxB,AAUI,mBAVe,CAUf,MAAM,AAAA,IAAK,CAAA,OAAO,CAAE,CAChB,OAAO,CAAE,IAAI,CAAG,AAXxB,AAaI,mBAbe,CAaf,UAAU,AAAC,CACP,UAAU,CAAE,yCAAyC,CAEjC,AAhB5B,AAkBI,mBAlBe,CAkBf,WAAW,AAAC,CACR,UAAU,CAAE,yCAAyC,CAEjC,AArB5B,AAaI,mBAbe,CAaf,UAAU,AAUC,CACP,UAAU,CAAE,yCAAyC,CAEjC,AAG5B,AACI,iBADa,CACb,cAAc,AAAC,CACX,MAAM,CAAE,IAAI,CACZ,KAAK,CAvDD,OAAO,CAuDS,AAH5B,AAKI,iBALa,CAKb,oBAAoB,AAAC,CACjB,OAAO,CAAE,IAAI,CAWe,AAjBpC,AAQQ,iBARS,CAKb,oBAAoB,CAGhB,aAAa,AAAC,CACV,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,GAAG,CAAG,AAX7B,AAaQ,iBAbS,CAKb,oBAAoB,CAQhB,kBAAkB,AAAC,CACf,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,KAAK,CACZ,SAAS,CAAE,GAAG,CACd,aAAa,CAAE,IAAI,CAAG,AAGlC,AAAA,MAAM,AAAA,iBAAiB,AAAC,CACpB,OAAO,CAAE,CAAC,CAAG", "sources": [ "main.sass" ], diff --git a/assets/js/main.js b/assets/js/main.js index f1f386d..f211c5d 100755 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -81,42 +81,64 @@ $(() => { NetflixJson = JSON.parse(JsonResponse); console.log(NetflixJson); let EveryWatched = []; + let TitleWatchTime = {}; //how long you watched a series/movies let IndividualTitles = []; let IndividualSeries = []; let IndividualMovies = []; - let AverageWatchTimes = []; + let AverageWatchTimes = []; // when you watched a series/movie NetflixJson.forEach((item, pageKey) => { item.forEach((eachItem, ItemNumber) => { + const currentObject = NetflixJson[pageKey][ItemNumber]; + let currentTitle; // will be overriden by 'if series' + if ("seriesTitle" in eachItem) { // is series - const CurrentTitle = NetflixJson[pageKey][ItemNumber].seriesTitle; - EveryWatched.push(`${CurrentTitle}`); + currentTitle = currentObject.seriesTitle; + EveryWatched.push(currentTitle); if ( - IndividualSeries.indexOf(CurrentTitle) === -1 && - CurrentTitle !== undefined + IndividualSeries.indexOf(currentTitle) === -1 && + currentTitle !== undefined ) { // only if not already crawled -> individualism - IndividualSeries.push(CurrentTitle); - IndividualTitles.push(CurrentTitle); + IndividualSeries.push(currentTitle); } } else { // is movie - const CurrentTitle = NetflixJson[pageKey][ItemNumber].videoTitle; - EveryWatched.push(`${CurrentTitle}`); + currentTitle = currentObject.videoTitle; + EveryWatched.push(currentTitle); if ( - IndividualMovies.indexOf(CurrentTitle) === -1 && - CurrentTitle !== undefined + IndividualMovies.indexOf(currentTitle) === -1 && + currentTitle !== undefined ) { // only if not already crawled -> individualism - IndividualMovies.push(CurrentTitle); - IndividualTitles.push(CurrentTitle); + IndividualMovies.push(currentTitle); + } + } + + // individualism check for every title + if ( + IndividualMovies.indexOf(currentTitle) === -1 && + currentTitle !== undefined + ) { + if (!(currentTitle.includes(IndividualTitles))) IndividualTitles.push(currentTitle); + + // get watch-time in hours (how long you watched a series/movies) + const watchTimeInHours = currentObject.duration / 60 / 60; + let watchTime; + if (currentTitle in TitleWatchTime) { + // already in object -> add to previous + const previousTitleWatchTime = TitleWatchTime[currentTitle]; + watchTime = watchTimeInHours + previousTitleWatchTime; + } else { + watchTime = watchTimeInHours; } + TitleWatchTime[currentTitle] = watchTime; } - // get watch time + // get watch time as date (when you watched a series/movie) const DayTimeInSeconds = new Date( - NetflixJson[pageKey][ItemNumber].date * 1000 + currentObject.date * 1000 ); const DayTimeInHours = DayTimeInSeconds.getHours(); AverageWatchTimes.push(DayTimeInHours); @@ -139,8 +161,7 @@ $(() => { // Calculate the most watched series/movies const UnsortedTitleOccurrenceCounter = EveryWatched.reduce( - (prev, curr) => ((prev[curr] = ++prev[curr] || 1), prev), - {} + (prev, curr) => ((prev[curr] = ++prev[curr] || 1), prev), {} ); const SortedTitleOccurrenceCounter = sortObject( UnsortedTitleOccurrenceCounter @@ -156,10 +177,11 @@ $(() => { console.table(IndividualMovies); console.table(AverageWatchTimeOccurrence); console.table(SortedTitleOccurrenceCounter); + console.table(TitleWatchTime); // render RenderDayTimeChart(AverageWatchTimeOccurrence); - RenderMostWatchedChart(SortedTitleOccurrenceCounter); + RenderMostWatchedChart(SortedTitleOccurrenceCounter, TitleWatchTime); // create scroll events new Waypoint({ @@ -213,43 +235,37 @@ $(() => { "10pm", "11pm" ], - datasets: [ - { - label: "Watches at daytime", - borderColor: "rgb(255, 99, 132)", - cubicInterpolationMode: "monotone", - pointRadius: 0, - pointHitRadius: 15, - data: AverageWatchTimeOccurrenceArray - } - ] + datasets: [{ + label: "Watches at daytime", + borderColor: "rgb(255, 99, 132)", + cubicInterpolationMode: "monotone", + pointRadius: 0, + pointHitRadius: 15, + data: AverageWatchTimeOccurrenceArray + }] }, options: { scales: { - yAxes: [ - { - ticks: { - display: false - }, - gridLines: { - zeroLineColor: "transparent", - zeroLineWidth: 2, - drawTicks: false, - drawBorder: false, - color: "transparent" - } + yAxes: [{ + ticks: { + display: false + }, + gridLines: { + zeroLineColor: "transparent", + zeroLineWidth: 2, + drawTicks: false, + drawBorder: false, + color: "transparent" } - ], - xAxes: [ - { - gridLines: { - zeroLineColor: "rgba(255, 255, 255, 0.25)", - display: true, - drawBorder: false, - color: "rgba(255, 255, 255, 0.25)" - } + }], + xAxes: [{ + gridLines: { + zeroLineColor: "rgba(255, 255, 255, 0.25)", + display: true, + drawBorder: false, + color: "rgba(255, 255, 255, 0.25)" } - ] + }] }, tension: 1 } @@ -259,10 +275,10 @@ $(() => { /** * Renders the "most watched series" doughnut chart * @param {Object} TitleOccurrenceCounterObject + * @param {Object} TitleWatchTimeObject */ - function RenderMostWatchedChart(TitleOccurrenceCounterObject) { + function RenderMostWatchedChart(TitleOccurrenceCounterObject, TitleWatchTimeObject) { // Render and calculate most watched chart - const GenerateRandomColorArray = () => { let RandomColorArray = []; const Generate = () => { @@ -284,13 +300,11 @@ $(() => { .getContext("2d"); var MostWatchedChartData = { labels: [], - datasets: [ - { - label: "Most watched", - backgroundColor: GenerateRandomColorArray(), - data: [] - } - ] + datasets: [{ + label: "Most watched", + backgroundColor: GenerateRandomColorArray(), + data: [] + }] }; Chart.pluginService.register({ beforeInit: chart => { @@ -298,7 +312,7 @@ $(() => { for (var key in TitleOccurrenceCounterObject) { if (TitleOccurrenceCounterObject.hasOwnProperty(key)) { if (TitleOccurrenceCounterObject[key] > 1) { - data.labels.push(key); + data.labels.push(`${key} (Time: ${Math.round(TitleWatchTimeObject[key] * 100) / 100} hours)`); // add label with rounded watch time data.datasets[0].data.push(TitleOccurrenceCounterObject[key]); } } @@ -362,4 +376,4 @@ $(() => { } return orderedList; } -}); +});
\ No newline at end of file |