Merge pull request #1357 from HalianElf/v2-develop

Tautulli Stuff

.gitignore

@@ -157,5 +157,7 @@ api/pages/custom/*.php
 /plugins/images/tabs/eatsleep.jpg
 /plugins/images/cache/tautulli-show.svg
 /plugins/images/cache/tautulli-android.svg
-/plugins/images/cache/tautulli-artist.png
+/plugins/images/cache/tautulli-artist.svg
 /plugins/images/cache/tautulli-movie.svg
+/plugins/images/cache/tautulli-windows.svg
+plugins/images/cache/tautulli-samsung.svg

api/functions/homepage-connect-functions.php

@@ -2488,7 +2488,7 @@ function getTautulli()
 		$url = qualifyURL($GLOBALS['tautulliURL']);
 		$apiURL = $url . '/api/v2?apikey=' . $GLOBALS['tautulliApikey'];
 		try {
-			$homestatsUrl = $apiURL . '&cmd=get_home_stats';
+			$homestatsUrl = $apiURL . '&cmd=get_home_stats&grouping=1';
 			$homestats = Requests::get($homestatsUrl, [], []);
 			if ($homestats->success) {
 				$homestats = json_decode($homestats->body, true);
@@ -2514,7 +2514,7 @@ function getTautulli()
 			if ($libstats->success) {
 				$libstats = json_decode($libstats->body, true);
 				$api['libstats'] = $libstats['response'];
-				$categories = ['movie.svg', 'show.svg', 'artist.png'];
+				$categories = ['movie.svg', 'show.svg', 'artist.svg'];
 				foreach ($categories as $cat) {
 					$parts = explode('.', $cat);
 					cacheImage($url . '/images/libraries/' . $cat, 'tautulli-' . $parts[0], $parts[1]);

css/organizr.css

@@ -323,6 +323,141 @@ img.imageSourceBottom {
     height: 100px;
 }
 
+.homepage-tautulli-card {
+    height: 160px;
+}
+
+.homepage-tautulli-card .card-body {
+    padding: 0;
+}
+
+.homepage-tautulli-card .poster {
+    max-width: 100%;
+    max-height: 150px;
+}
+
+.homepage-tautulli-card th {
+    border-bottom: 1px solid #ffffff20;
+    height: 30px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.homepage-tautulli-card .poster-td {
+    width: 110px;
+    padding: 5px;
+}
+
+.homepage-tautulli-card .scrollable {
+    height: 129px;
+}
+
+.homepage-tautulli-card table {
+    position: absolute;
+}
+
+.homepage-tautulli-card .cardCountType {
+    padding-top: 2px;
+    padding-right: 5px;
+    color: #808080;
+    font-size: smaller;
+}
+
+.homepage-tautulli-card .tautulliRank, .homepage-tautulli-card .tautulliSeparator {
+    color: #808080;
+    font-size: small;
+    padding-right: 2px;
+}
+
+.homepage-tautulli-card .cardListItem {
+    padding-top: 2px;
+    margin-left: 10px;
+    padding-right: 5px;
+    border-bottom: 1px solid #ffffff20;
+    box-sizing: border-box;
+    height: 25px;
+}
+
+.homepage-tautulli-card .cardListRow {
+    min-height: 25px;
+}
+
+.homepage-tautulli-card .cardListCount {
+    color: #f9be03;
+}
+
+.homepage-tautulli-card .tautulliFirstItem {
+    height: 30px;
+    padding-top: 2px;
+    font-size: large;
+}
+
+.homepage-tautulli-card .tautulliLastItem {
+    border-bottom: none;
+}
+
+.homepage-tautulli-card .simplebar-track {
+    left: 0;
+    right: auto;
+}
+
+.homepage-tautulli-card .lib-icon {
+    max-width: 100%;
+    height: 64px;
+}
+
+.homepage-tautulli-card .avatar {
+    border-radius: 50%;
+}
+
+.homepage-tautulli-card .bg-img-cont {
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #ffffff10;
+}
+
+.homepage-tautulli-card .bg-img {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    filter: blur(7px) brightness(30%);
+    transform: scale(1.1);
+}
+/* Tautulli Background Colors */
+.platform-android-rgba { background-color: rgba(164, 202, 57, 0.40); }
+.platform-atv-rgba { background-color: rgba(133, 132, 135, 0.40); }
+.platform-chrome-rgba { background-color: rgba(237, 94, 80, 0.40); }
+.platform-chromecast-rgba { background-color: rgba(16, 164, 232, 0.40); }
+.platform-default-rgba { background-color: rgba(229, 160, 13, 0.40); }
+.platform-dlna-rgba { background-color: rgba(12, 177, 75, 0.40); }
+.platform-firefox-rgba { background-color: rgba(230, 120, 23, 0.40); }
+.platform-gtv-rgba { background-color: rgba(0, 139, 207, 0.40); }
+.platform-ie-rgba { background-color: rgba(0, 89, 158, 0.40); }
+.platform-ios-rgba { background-color: rgba(133, 132, 135, 0.40); }
+.platform-kodi-rgba { background-color: rgba(49, 175, 225, 0.40); }
+.platform-linux-rgba { background-color: rgba(23, 147, 208, 0.40); }
+.platform-macos-rgba { background-color: rgba(133, 132, 135, 0.40); }
+.platform-msedge-rgba { background-color: rgba(0, 120, 215, 0.40); }
+.platform-opera-rgba { background-color: rgba(255, 27, 45, 0.40); }
+.platform-playstation-rgba { background-color: rgba(3, 77, 162, 0.40); }
+.platform-plex-rgba { background-color: rgba(229, 160, 13, 0.40); }
+.platform-plexamp-rgba { background-color: rgba(229, 160, 13, 0.40); }
+.platform-roku-rgba { background-color: rgba(109, 60, 151, 0.40); }
+.platform-safari-rgba { background-color: rgba(0, 169, 236, 0.40); }
+.platform-samsung-rgba { background-color: rgba(3, 78, 162, 0.40); }
+.platform-synclounge-rgba { background-color: rgba(21, 25, 36, 0.40); }
+.platform-tivo-rgba { background-color: rgba(0, 167, 225, 0.40); }
+.platform-wiiu-rgba { background-color: rgba(3, 169, 244, 0.40); }
+.platform-windows-rgba { background-color: rgba(47, 192, 245, 0.40); }
+.platform-wp-rgba { background-color: rgba(104, 33, 122, 0.40); }
+.platform-xbmc-rgba { background-color: rgba(59, 72, 114, 0.40); }
+.platform-xbox-rgba { background-color: rgba(16, 124, 16, 0.40); }
+
 .grayscale {
     -webkit-filter: grayscale(100%);
     /* Safari 6.0 - 9.0 */

js/functions.js

@@ -6541,139 +6541,7 @@ function homepageCalendar(timeout){
 	timeouts['calendar-Homepage'] = setTimeout(function(){ homepageCalendar(timeout); }, timeout);
 }
 function buildTautulliItem(array){
-    var cards = `
-    <style>
-    .homepage-tautulli-card {
-        height: 242px;
-    }
-
-    .library-card {
-        height: 137px;
-    }
-
-    .homepage-tautulli-card .poster {
-        max-width: 100%;
-        max-height: 15em;
-    }
-
-    .homepage-tautulli-card .lib-icon {
-        max-width: 100%;
-        height: 7.5em;
-    }
-
-    .homepage-tautulli-card .avatar {
-        border-radius: 50%;
-    }
-
-    .homepage-tautulli-card .align-self-center {
-        text-align: center;
-    }
-
-    .library-card ol {
-        overflow: auto;
-    }
-
-    .homepage-tautulli-card ol.pl-2 li p,
-    .library-card ol li p {
-        font-weight: 400;
-        font-size: 16px;
-        margin-bottom: 0;
-    }
-
-    .homepage-tautulli-card ol.pl-2 li,
-    .library-card ol li {
-        margin-top: 2px;
-        text-align-last: left;
-    }
-
-    .library-card ol::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-        border-radius: 10px;
-        background-color: #7b7b7b2e;
-        margin: 0 30px;
-    }
-
-    .library-card ol::-webkit-scrollbar {
-        width: 12px;
-        background-color: #7b7b7b2e;
-    }
-
-    .library-card ol::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-        background-color: #555;
-    }
-
-    .one-line {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .homepage-tautulli-card .bg-img-cont {
-        overflow: hidden;
-        pointer-events: none;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-    }
-
-    .homepage-tautulli-card .bg-img {
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        filter: blur(7px) brightness(30%);
-        transform: scale(1.1);
-    }
-
-    .lib-stats-row::before {
-        content: none !important;
-    }
-
-    .card-bg-colour {
-        background-color: #7b7b7b2e;
-    }
-
-    .homepage-tautulli-card .card-body h4 {
-        text-align-last: left;
-    }
-
-    .homepage-tautulli-card .card-body span.pull-left {
-        line-height: 22px;
-        font-size: 18px;
-    }
-
-    .platform-android-rgba { background-color: rgba(164, 202, 57, 0.40); }
-    .platform-atv-rgba { background-color: rgba(133, 132, 135, 0.40); }
-    .platform-chrome-rgba { background-color: rgba(237, 94, 80, 0.40); }
-    .platform-chromecast-rgba { background-color: rgba(16, 164, 232, 0.40); }
-    .platform-default-rgba { background-color: rgba(229, 160, 13, 0.40); }
-    .platform-dlna-rgba { background-color: rgba(12, 177, 75, 0.40); }
-    .platform-firefox-rgba { background-color: rgba(230, 120, 23, 0.40); }
-    .platform-gtv-rgba { background-color: rgba(0, 139, 207, 0.40); }
-    .platform-ie-rgba { background-color: rgba(0, 89, 158, 0.40); }
-    .platform-ios-rgba { background-color: rgba(133, 132, 135, 0.40); }
-    .platform-kodi-rgba { background-color: rgba(49, 175, 225, 0.40); }
-    .platform-linux-rgba { background-color: rgba(23, 147, 208, 0.40); }
-    .platform-macos-rgba { background-color: rgba(133, 132, 135, 0.40); }
-    .platform-msedge-rgba { background-color: rgba(0, 120, 215, 0.40); }
-    .platform-opera-rgba { background-color: rgba(255, 27, 45, 0.40); }
-    .platform-playstation-rgba { background-color: rgba(3, 77, 162, 0.40); }
-    .platform-plex-rgba { background-color: rgba(229, 160, 13, 0.40); }
-    .platform-plexamp-rgba { background-color: rgba(229, 160, 13, 0.40); }
-    .platform-roku-rgba { background-color: rgba(109, 60, 151, 0.40); }
-    .platform-safari-rgba { background-color: rgba(0, 169, 236, 0.40); }
-    .platform-samsung-rgba { background-color: rgba(3, 78, 162, 0.40); }
-    .platform-synclounge-rgba { background-color: rgba(21, 25, 36, 0.40); }
-    .platform-tivo-rgba { background-color: rgba(0, 167, 225, 0.40); }
-    .platform-wiiu-rgba { background-color: rgba(3, 169, 244, 0.40); }
-    .platform-windows-rgba { background-color: rgba(47, 192, 245, 0.40); }
-    .platform-wp-rgba { background-color: rgba(104, 33, 122, 0.40); }
-    .platform-xbmc-rgba { background-color: rgba(59, 72, 114, 0.40); }
-    .platform-xbox-rgba { background-color: rgba(16, 124, 16, 0.40); }
-    </style>
-    `;
+    var cards = ""
     var homestats = array.homestats.data;
     var libstats = array.libstats;
     var options = array.options;
@@ -6706,38 +6574,45 @@ function buildTautulliItem(array){
         var buildCard = function(type, data) {
             var card = `
             <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
-                <div class="card text-white mb-3 homepage-tautulli-card library-card card-bg-colour">
-                    <div class="card-body h-100">
-                        <div class="row h-100" style="display: flex;">
-                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 align-self-center" style="overflow: hidden;">`;
-                            if(type == 'artist') {
-                                card += `<img src="plugins/images/cache/tautulli-`+type+`.png" class="lib-icon" alt="library icon">`;
-                            } else {
-                                card += `<img src="plugins/images/cache/tautulli-`+type+`.svg" class="lib-icon" alt="library icon">`;
-                            }
-            card += `
-                            </div>
-                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12" style="overflow: hidden;">
-                                <ol class="h-100">`;
-                                data.forEach(e => {
-                                    card += `<li class="w-100">
-                                                <p class="one-line d-inline">`+e['section_name']+`</p>`;
-                                                if(type == 'movie') {
-                                                    card += `<p class="mb-0 pull-right d-inline text-right text-warning">`+e['count']+`</p>`;
-                                                } else {
-                                                    card += `<p class="mb-0 pull-right d-inline text-right text-warning">`+e['count']+` / `+e['parent_count']+` / `+e['child_count']+`</p>`;
-                                                }
-                                    card += `
-                                            </li>`;
-                                });
+                <div class="card text-white mb-3 homepage-tautulli-card library-card">
+                    <div class="card-body h-100 bg-org-alt">
+                        <table class="h-100 w-100">
+                            <tr>
+                                <td rowspan='2' class="poster-td text-center"><img src="plugins/images/cache/tautulli-`+type+`.svg" class="lib-icon" alt="library icon">`;
+                                var extraField = null;
+                                var section_name = null;
+                                if(type == 'movie'){
+                                    extraField = 'Movies';
+                                    section_name = 'Movie Libaries';
+                                }else if(type == 'show'){
+                                    extraField = 'Shows/Seasons/Episodes';
+                                    section_name = 'TV Show Libaries';
+                                }else if(type == 'artist'){
+                                    extraField = 'Artists/Albums/Tracks';
+                                    section_name = 'Music Libaries';
+                                }
+                                var cardTitle = '<th><span class="pull-left cardTitle">'+section_name.toUpperCase()+'</span><span class="pull-right cardCountType">'+extraField.toUpperCase()+'</th>';
+                                card += cardTitle+`
+                            </tr>
+                            <tr>
+                                <td><div class="scrollable" data-simplebar>`;
+                                for(var i = 0; i < data.length; i++) {
+                                    if(type == 'movie') {
+                                        card += `<div class="cardListItem elip`; if (i == 0) { card +=` tautulliFirstItem`; } if (i == data.length-1) { card +=` tautulliLastItem`; }
+                                        card += `"><span class="tautulliRank">`+(i+1)+`</span> `+data[i]['section_name']+`</span><span class="cardListCount pull-right">`+data[i]['count']+`</div>`;
+                                    } else {
+                                        card += `<div class="cardListItem elip`; if (i == 0) { card +=` tautulliFirstItem`; } if (i == data.length-1) { card +=` tautulliLastItem`; }
+                                        card += `"><span class="tautulliRank">`+(i+1)+`</span> `+data[i]['section_name']+`</span>
+                                                <span class="cardListCount pull-right">`+data[i]['count']+`<span class="tautulliSeparator"> / </span>`+data[i]['parent_count']+`<span class="tautulliSeparator"> / </span>`+data[i]['child_count']+`</div>`;
+                                    }
+                                };
             card += `
-                                </ol>
-                            </div>
-                        </div>
+                                </div></td>
+                            </tr>
+                        </table>
                     </div>
                 </div>
-            </div>
-            `;
+            </div>`;
             return card;
         };
         var card = (movies.length > 0) ? buildCard('movie', movies) : '';
@@ -6752,12 +6627,12 @@ function buildTautulliItem(array){
                 if(stat === 'top_platforms') {
                     classes = ' platform-' + e['rows'][0]['platform_name'] + '-rgba';
                 } else if(stat === 'top_users') {
-                    classes = ' card-bg-colour';
+                    classes = ' bg-org-alt';
                 } else {
                     classes = '';
                 }
                 card += `
-                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
+                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12">
                     <div class="card text-white mb-3 homepage-tautulli-card`+classes+`">`;
                         if(stat !== 'top_users' && stat !== 'top_platforms') {
                             card += `
@@ -6767,50 +6642,50 @@ function buildTautulliItem(array){
                             `;
                         }
                 card += `
-                        <div class="card-body">
-                            <div class="row h-100" style="display: flex;">
-                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 align-self-center" style="overflow: hidden;">`;
-                                if(stat == 'top_users') {
-                                    card += `<img src="`+e['rows'][0]['user_thumb']+`" class="poster avatar" alt="user avatar">`;
-                                } else if(stat == 'top_platforms') {
-                                    card += `<img src="plugins/images/cache/tautulli-`+e['rows'][0]['platform_name']+`.svg" class="poster" alt="platform icon">`;
-                                } else {
-                                    card += `<img src="`+e['rows'][0]['thumb']+`" class="poster" alt="movie poster">`;
-                                }
-                                var addExtraField = false;
-                                var extraField = null;
-                                if(e['stat_title'].includes('Popular')){
-                                    addExtraField = true;
-                                    extraField = ''//users;
-                                }else if(e['stat_title'].includes('Watched')){
-                                    addExtraField = true;
-                                    extraField = ''//plays;
-                                }
-                                var cardTitle = (addExtraField) ? '<span class="pull-left">'+e['stat_title']+'</span><span class="pull-right">'+extraField+'</span><div class="clearfix"></div>' : '<h4>'+e['stat_title']+'</h4>';
-                card += `
-                                </div>
-                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 align-self-center" style="overflow: hidden;">
-                                    `+cardTitle+`
-                                    <hr class="my-2">
-                                    <ol class="pl-2">`;
-                                    for(var i = 0; i < Math.min(5, e['rows'].length); i++) {
-                                        var item = e['rows'][i];
-                                        if(stat == 'top_users') {
-                                            card += `<li><p class="one-line">`+item['user']+`</p></li>`;
-                                        } else if(stat == 'top_platforms') {
-                                            card += `<li><p class="one-line">`+item['platform']+`</p></li>`;
-                                        } else {
-                                            card += `<li><span class="one-line">`+item['title']+`</span></li>`;
-                                        }
+                        <div class="card-body h-100 bg-org-alt">
+                            <table class="h-100 w-100">
+                                <tr>`;
+                                    if(stat == 'top_users') {
+                                        card += `<td rowspan="2" class="poster-td text-center"><img src="`+e['rows'][0]['user_thumb']+`" class="poster avatar" alt="user avatar"></td>`;
+                                    } else if(stat == 'top_platforms') {
+                                        card += `<td rowspan="2" class="poster-td text-center"><img src="plugins/images/cache/tautulli-`+e['rows'][0]['platform_name']+`.svg" class="poster" alt="platform icon"></td>`;
+                                    } else {
+                                        card += `<td rowspan="2" class="poster-td"><img src="`+e['rows'][0]['thumb']+`" class="poster" alt="movie poster"></td>`;
                                     }
-                card += `
-                                    </ol>
-                                </div>
-                            </div>
+                                    var extraField = null;
+                                    if(e['stat_title'].includes('Popular')){
+                                        extraField = 'users';
+                                    }else if(e['stat_title'].includes('Watched')||e['stat_title'].includes('Active')){
+                                        extraField = 'plays';
+                                    }
+                                    var cardTitle = '<th><span class="pull-left cardTitle">'+e['stat_title'].toUpperCase()+'</span><span class="pull-right cardCountType">'+extraField.toUpperCase()+'</th>';
+                                    card += cardTitle+`
+                                </tr>
+                                <tr>
+                                    <td><div class="scrollable" data-simplebar>`;
+                                        for(var i = 0; i < e['rows'].length; i++) {
+                                            var item = e['rows'][i];
+                                            if(stat == 'top_users') {
+                                                card += `<div class="cardListItem elip`; if (i == 0) { card +=` tautulliFirstItem`; } if (i == e['rows'].length-1) { card +=` tautulliLastItem`; }
+                                                card += `"><span class="tautulliRank">`+(i+1)+`</span> `+item['user']+`</span><span class="cardListCount pull-right">`+item['total_plays']+`</div>`;
+                                            } else if(stat == 'top_platforms') {
+                                                card += `<div class="cardListItem elip`; if (i == 0) { card +=` tautulliFirstItem`; } if (i == e['rows'].length-1) { card +=` tautulliLastItem`; }
+                                                card += `"><span class="tautulliRank">`+(i+1)+`</span> `+item['platform']+`</span><span class="cardListCount pull-right">`+item['total_plays']+`</div>`;
+                                            } else if(extraField == 'users') {
+                                                card += `<div class="cardListItem elip`; if (i == 0) { card +=` tautulliFirstItem`; } if (i == e['rows'].length-1) { card +=` tautulliLastItem`; }
+                                                card += `"><span class="tautulliRank">`+(i+1)+`</span> `+item['title']+`</span><span class="cardListCount pull-right">`+item['users_watched']+`</div>`;
+                                            } else {
+                                                card += `<div class="cardListItem elip`; if (i == 0) { card +=` tautulliFirstItem`; } if (i == e['rows'].length-1) { card +=` tautulliLastItem`; }
+                                                card += `"><span class="tautulliRank">`+(i+1)+`</span> `+item['title']+`</span><span class="cardListCount pull-right">`+item['total_plays']+`</div>`;
+                                            }
+                                        };
+card += `
+                                    </div></td>
+                                </tr>
+                            </table>
                         </div>
                     </div>
-                </div>
-                `;
+                </div>`;
             } else {
                 return '';
             }
@@ -6818,6 +6693,7 @@ function buildTautulliItem(array){
         return card;
     };
     cards += '<div class="row tautulliTop">'
+    cards += (options['libraries']) ? buildLibraries(libstats) : '';
     cards += (options['popularMovies']) ? buildStats(homestats, 'popular_movies') : '';
     cards += (options['popularTV']) ? buildStats(homestats, 'popular_tv') : '';
     cards += (options['topMovies']) ? buildStats(homestats, 'top_movies') : '';
@@ -6826,7 +6702,6 @@ function buildTautulliItem(array){
     cards += (options['topPlatforms']) ? buildStats(homestats, 'top_platforms') : '';
     cards += '</div>';
     cards += '<div class="row tautulliLibraries">'
-    cards += (options['libraries']) ? buildLibraries(libstats) : '';
     cards += '</div>';
     return cards;
 }