From 021e98c65426382458f866eb50985e077f154fed Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 26 Oct 2017 14:53:24 -0700
Subject: [PATCH] added thumbnail preview to upload tools

---
 views/layouts/main.handlebars                 |  1 -
 .../partials/publishForm-Thumbnail.handlebars | 50 ++++++++++++++++++-
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index 703a057a..9837366c 100644
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -28,7 +28,6 @@
     <script src="/assets/js/dropzoneFunctions.js"></script>
     <script src="/assets/js/createChannelFunctions.js"></script>
     <script src="/assets/js/navBarFunctions.js"></script>
-    {{> releaseBanner}}
     {{> navBar}}
     {{{ body }}}
 </body>
diff --git a/views/partials/publishForm-Thumbnail.handlebars b/views/partials/publishForm-Thumbnail.handlebars
index 8688fa85..449c3016 100644
--- a/views/partials/publishForm-Thumbnail.handlebars
+++ b/views/partials/publishForm-Thumbnail.handlebars
@@ -3,8 +3,54 @@
         <label class="label">Thumbnail:</label>
     </div><div class="column column--6 column--sml-10">
         <div class="input-text--primary">
-            <input type="text" id="claim-thumbnail-input" class="input-text input-text--full-width" placeholder="https://spee.ch/xyz/example.jpg" value="">
+            <input type="text" id="claim-thumbnail-input" class="input-text input-text--full-width" placeholder="https://spee.ch/xyz/example.jpg" value="" oninput="updateVideoThumb(event)">
         </div>
     </div>
 
-</div>
\ No newline at end of file
+</div>
+
+<script type="text/javascript">
+    function urlIsAnImage(url) {
+        return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
+    }
+
+    function testImage(url, timeoutT) {
+        return new Promise(function (resolve, reject) {
+            var timeout = timeoutT || 5000;
+            var timer, img = new Image();
+            img.onerror = img.onabort = function () {
+                clearTimeout(timer);
+                reject("error");
+            };
+            img.onload = function () {
+                clearTimeout(timer);
+                resolve("success");
+            };
+            timer = setTimeout(function () {
+                // reset .src to invalid URL so it stops previous
+                // loading, but doesn't trigger new load
+                img.src = "//!!!!/test.jpg";
+                reject("timeout");
+            }, timeout);
+            img.src = url;
+        });
+    }
+
+    function updateVideoThumb(event){
+        var videoPreview = document.getElementById('asset-preview');
+        var imageUrl = event.target.value;
+        if (urlIsAnImage(imageUrl)){
+            testImage(imageUrl, 3000)
+                .then(function(result) {
+                    if (result === 'success'){
+                        videoPreview.src = imageUrl;
+                    } else if (result === 'timeout') {
+                        console.log('could not resolve the provided thumbnail image url');
+                    }
+                })
+                .catch(function(error) {
+                    console.log('encountered an error loading thumbnail image url.')
+                })
+        }
+    }
+</script>
\ No newline at end of file