Finished top platforms and top users

js/functions.js

@@ -6232,6 +6232,35 @@ function buildTautulliItem(array){
         left: 0;
         filter: blur(7px) brightness(50%);
     }
+
+    .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 homestats = array.homestats.data;
@@ -6260,9 +6289,16 @@ function buildTautulliItem(array){
         var card = '';
         data.forEach(e => {
             if(e['stat_id'] == stat) {
+                if(stat === 'top_platforms') {
+                    classes = ' platform-' + e['rows'][0]['platform_name'] + '-rgba';
+                } else if(stat === 'top_users') {
+                    classes = ' platform-synclounge-rgba';
+                } else {
+                    classes = '';
+                }
                 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">`;
+                    <div class="card text-white mb-3 homepage-tautulli-card`+classes+`">`;
                         if(stat !== 'top_users' && stat !== 'top_platforms') {
                             card += `
                             <div class="bg-img-cont">
@@ -6275,8 +6311,9 @@ function buildTautulliItem(array){
                             <div class="row" style="display: flex;">
                                 <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs align-self-center">`;
                                 if(stat == 'top_users') {
-                                    console.log(e);
                                     card += `<img src="`+e['rows'][0]['user_thumb']+`" class="poster avatar" alt="user avatar">`;
+                                } else if(stat == 'top_platforms') {
+                                    card += `<img src="`+options['url']+`images/platforms/`+e['rows'][0]['platform_name']+`.svg" class="poster" alt="platform icon">`;
                                 } else {
                                     card += `<img src="`+options['url']+`pms_image_proxy?img=`+e['rows'][0]['thumb']+`" class="poster" alt="movie poster">`;
                                 }