From 0f2c2ea6d3ed38b3fac8d0f95a0c3e9826256b27 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Sat, 9 Feb 2019 22:52:43 -0700
Subject: [PATCH] Improve thumbnail loading, replace broken images with generic
 thunbnail

---
 lib/Thumbnail.lib.php |  2 +-
 pages/home.php        | 22 ++++++++++++++++++++--
 pages/news.php        | 18 ++++++++++++++++++
 static/js/home.js     | 20 ++++++++++++++++++++
 static/js/news.js     |  5 ++++-
 static/js/newsgrid.js |  7 ++++++-
 6 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/lib/Thumbnail.lib.php b/lib/Thumbnail.lib.php
index 50ec1cd..920458e 100644
--- a/lib/Thumbnail.lib.php
+++ b/lib/Thumbnail.lib.php
@@ -82,7 +82,7 @@ class Thumbnail {
         $path = "cache/thumb/$encodedfilename.$width.jpg";
         $image = self::getThumbnailFromUrl($url, $width, $height);
         file_put_contents(__DIR__ . "/../$path", $image);
-        echo $path;
+        
         return $image;
     }
 
diff --git a/pages/home.php b/pages/home.php
index 02f102a..bc0a170 100644
--- a/pages/home.php
+++ b/pages/home.php
@@ -5,6 +5,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+header("Link: <static/img/news-placeholder.svg>; rel=preload; as=image", false);
+
 $weatherclass = "Weather_" . $SETTINGS['sources']['weather'];
 $weather = new $weatherclass(46.595, -112.027); // TODO: get user location
 $weather->loadForecast();
@@ -128,10 +130,26 @@ foreach ($newsitems as $item) {
             break;
         }
         $count++;
-        echo $item->generateGridCard(false);
+        echo $item->generateGridCard(true);
     }
     ?>
 
     <div class="col-1 sizer-element"></div>
 
-</div>
\ No newline at end of file
+</div>
+
+
+<script nonce="<?php echo $SECURE_NONCE; ?>">
+    var preload_images = <?php
+    $srcs = [];
+    foreach ($itemsbycategory["general"] as $item) {
+        if (strpos($item->getImage(), "preview.redd.it") !== false) {
+            $imgurl = $item->getImage();
+        } else {
+            $imgurl = Thumbnail::getThumbnailCacheURL($item->getImage(), 500);
+        }
+        $srcs[] = $imgurl;
+    }
+    echo json_encode($srcs);
+    ?>;
+</script>
\ No newline at end of file
diff --git a/pages/news.php b/pages/news.php
index c02a42d..798a634 100644
--- a/pages/news.php
+++ b/pages/news.php
@@ -3,6 +3,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+header("Link: <static/img/news-placeholder.svg>; rel=preload; as=image", false);
+
 News::load($SETTINGS["sources"]["news"]);
 
 $newsitems = News::getItems();
@@ -39,3 +41,19 @@ $newsitems = News::getItems();
     <div class="col-1 sizer-element"></div>
 
 </div>
+
+
+<script nonce="<?php echo $SECURE_NONCE; ?>">
+    var preload_images = <?php
+    $srcs = [];
+    foreach ($newsitems as $item) {
+        if (strpos($item->getImage(), "preview.redd.it") !== false) {
+            $imgurl = $item->getImage();
+        } else {
+            $imgurl = Thumbnail::getThumbnailCacheURL($item->getImage(), 500);
+        }
+        $srcs[$item->getCategory()->toString()][] = $imgurl;
+    }
+    echo json_encode($srcs);
+    ?>;
+</script>
\ No newline at end of file
diff --git a/static/js/home.js b/static/js/home.js
index 9ae1f87..c5d53b1 100644
--- a/static/js/home.js
+++ b/static/js/home.js
@@ -3,3 +3,23 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+
+
+function loadPreloadedImage(index) {
+    console.log("Loading cached image ", preload_images[index]);
+    $("img.newscard-img[data-src=\"" + preload_images[index] + "\"]").attr("src", preload_images[index]);
+}
+
+// Load images into cache and replace placeholders
+$(document).ready(function () {
+    if (typeof preload_images != "undefined") {
+        var preloadCache = [];
+        for (var i = 0; i < preload_images.length; i++) {
+            console.log("Caching thumbnail: " + preload_images[i]);
+            img = new Image();
+            img.src = preload_images[i];
+            img.onload = loadPreloadedImage(i);
+            preloadCache.push(img);
+        }
+    }
+});
\ No newline at end of file
diff --git a/static/js/news.js b/static/js/news.js
index 4e357d3..e56d3ef 100644
--- a/static/js/news.js
+++ b/static/js/news.js
@@ -19,4 +19,7 @@ $("input[name=newscategory]").on("change", function () {
 });
 
 window.shuffleInstance.filter("general");
-setTimeout(fetchVisibleGridImages, 500);
\ No newline at end of file
+
+$(document).ready(function () {
+    fetchVisibleGridImages();
+});
\ No newline at end of file
diff --git a/static/js/newsgrid.js b/static/js/newsgrid.js
index 408826e..a1ce75d 100644
--- a/static/js/newsgrid.js
+++ b/static/js/newsgrid.js
@@ -15,4 +15,9 @@ setInterval(function () {
 
 // Show the images using JavaScript, to make sure we don't see double
 // when JS is disabled
-$("img.newscard-img.d-none").removeClass("d-none");
\ No newline at end of file
+$("img.newscard-img.d-none").removeClass("d-none");
+
+
+$("img.newscard-img").on("error", function () {
+    $(this).attr("src", "static/img/news-placeholder.svg");
+});
\ No newline at end of file