From 55e3614e8c75fae4202b3959092713c245028374 Mon Sep 17 00:00:00 2001
From: Jonathan Wong <Jonny.Wong.16@gmail.com>
Date: Sat, 22 Aug 2015 20:41:38 -0700
Subject: [PATCH] Quick fix for high contrast mode

Not sure if this is the best way to fix this, but it works for now
---
 data/interfaces/default/css/plexpy.css        |  3 +-
 data/interfaces/default/home_stats.html       | 14 +++++++++
 data/interfaces/default/info.html             | 10 +++++++
 data/interfaces/default/js/script.js          | 29 +++++++++++++++++++
 data/interfaces/default/recently_added.html   | 14 +++++++++
 .../default/user_platform_stats.html          | 10 +++++++
 .../default/user_recently_watched.html        | 10 +++++++
 7 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index 7bbf8d46..3ae409b4 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -418,6 +418,7 @@ input[type="color"],
     webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    overflow: hidden;
 }
 .cover-face {
     background-position: center;
@@ -826,8 +827,6 @@ input[type="color"],
     -ms-backface-visibility: hidden;
     -o-backface-visibility: hidden;
     backface-visibility: hidden;
-    width: auto;
-    height: 260px;
     border: 1px solid rgba(128, 128, 128, 0.3);
 }
 .summary-content {
diff --git a/data/interfaces/default/home_stats.html b/data/interfaces/default/home_stats.html
index 2a05ca34..4f6fa1e6 100644
--- a/data/interfaces/default/home_stats.html
+++ b/data/interfaces/default/home_stats.html
@@ -254,6 +254,20 @@ DOCUMENTATION :: END
 % else:
 <div class="text-muted">No stats for selected period.</div><br>
 % endif
+<script>
+        $(function () {
+            if (HCTest() == true) {
+                $('#home-stats .poster-face').each(function () {
+                    background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                    $(this).html('<img src="' + background_img + '" width="80" height="120"/>');
+                })
+                $('#home-stats .home-platforms-instance-oval, #home-stats .home-platforms-instance-box').each(function () {
+                    background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                    $(this).html('<img src="' + background_img + '" width="80" height="80"/>');
+                })
+            }
+        })
+</script>
 % else:
 <div class="text-muted">Unable to retrieve data from database. Please check your <a href="settings">settings</a>.
 </div><br>
diff --git a/data/interfaces/default/info.html b/data/interfaces/default/info.html
index 8eba3f9b..e409d6c6 100644
--- a/data/interfaces/default/info.html
+++ b/data/interfaces/default/info.html
@@ -345,5 +345,15 @@ DOCUMENTATION :: END
     $("#airdate").html(moment($("#airdate").text()).format('MMM DD, YYYY'));
     $("#runtime").html(millisecondsToMinutes($("#runtime").text(), true));
 </script>
+<script>
+    $(function () {
+        if (HCTest() == true) {
+            $('.poster-face').each(function () {
+                background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                $(this).html('<img src="' + background_img + '" width="150" height="225"/>');
+            })
+        }
+    })
+</script>
 % endif
 </%def>
diff --git a/data/interfaces/default/js/script.js b/data/interfaces/default/js/script.js
index 1ad24f57..a4c1518b 100644
--- a/data/interfaces/default/js/script.js
+++ b/data/interfaces/default/js/script.js
@@ -360,3 +360,32 @@ function clearSearchButton(tableName, table) {
         table.search('').draw();
     });
 }
+
+function HCTest(idval) {
+    var objDiv, objImage, strColor, strWidth, strReady;
+    var strImageID = idval; // ID of image on the page
+
+    // Create a test div
+    objDiv = document.createElement('div');
+
+    //Set its color style to something unusual
+    objDiv.style.color = 'rgb(31, 41, 59)';
+
+    // Attach to body so we can inspect it
+    document.body.appendChild(objDiv);
+
+    // Read computed color value
+    strColor = document.defaultView ? document.defaultView.getComputedStyle(objDiv, null).color : objDiv.currentStyle.color;
+    strColor = strColor.replace(/ /g, '');
+
+    // Delete the test DIV
+    document.body.removeChild(objDiv);
+
+    // Check if we get the color back that we set. If not, we're in 
+    // high contrast mode. 
+    if (strColor !== 'rgb(31,41,59)') {
+        return true;
+    } else {
+        return false;
+    }
+}
\ No newline at end of file
diff --git a/data/interfaces/default/recently_added.html b/data/interfaces/default/recently_added.html
index 75482622..0a990d6a 100644
--- a/data/interfaces/default/recently_added.html
+++ b/data/interfaces/default/recently_added.html
@@ -63,6 +63,20 @@ DOCUMENTATION :: END
         % endfor
     </ul>
 </div>
+<script>
+    $(function () {
+        if (HCTest() == true) {
+            $('#recentlyAdded .poster-face').each(function () {
+                background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                $(this).html('<img src="' + background_img + '" width="150" height="225"/>');
+            })
+            $('#recentlyAdded .cover-face').each(function () {
+                background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                $(this).html('<img src="' + background_img + '" width="150" height="150"/>');
+            })
+        }
+    })
+</script>
 % else:
 <div class="text-muted">There was an error communicating with your Plex Server. Please check your <a href="settings">settings</a>.
 </div><br>
diff --git a/data/interfaces/default/user_platform_stats.html b/data/interfaces/default/user_platform_stats.html
index c281b48b..ea99d31d 100644
--- a/data/interfaces/default/user_platform_stats.html
+++ b/data/interfaces/default/user_platform_stats.html
@@ -37,6 +37,16 @@ DOCUMENTATION :: END
     $("#user-platform-image-${a['result_id']}").html("<div class='user-platforms-instance-poster' style='background-image: url(" + getPlatformImagePath('${a['platform_type']}') + ");'>");
 </script>
 % endfor
+<script>
+    $(function () {
+        if (HCTest() == true) {
+            $('.user-platforms-instance-poster').each(function () {
+                background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                $(this).html('<img src="' + background_img + '" width="80" height="80"/>');
+            })
+        }
+    })
+</script>
 % else:
 <div class="text-muted">Unable to retrieve data from database. Please check your <a href="settings">settings</a>.
 </div><br>
diff --git a/data/interfaces/default/user_recently_watched.html b/data/interfaces/default/user_recently_watched.html
index 2cf7b57c..f15b8cbf 100644
--- a/data/interfaces/default/user_recently_watched.html
+++ b/data/interfaces/default/user_recently_watched.html
@@ -58,6 +58,16 @@ DOCUMENTATION :: END
         % endfor
     </ul>
 </div>
+<script>
+    $(function () {
+        if (HCTest() == true) {
+            $('.poster-face').each(function () {
+                background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                $(this).html('<img src="' + background_img + '" width="150" height="225"/>');
+            })
+        }
+    })
+</script>
 % else:
 <div class="text-muted">Unable to retrieve data from database. Please check your <a href="settings">settings</a>.
 </div><br>