From 5c5a5fd83d8552de34cbe0a40d192b2443c62d83 Mon Sep 17 00:00:00 2001
From: pliablepixels <pliablepixels@gmail.com>
Date: Fri, 22 Jan 2016 15:32:22 -0500
Subject: #147 directed images through http interceptor

Former-commit-id: ed7370e244a1bc7d0badfabd763b28e0229682b7
---
 www/js/app.js                   | 45 +++++++++++++++++++++++++++++++++++++----
 www/templates/events-modal.html |  4 ++--
 www/templates/events.html       |  8 ++++++--
 3 files changed, 49 insertions(+), 8 deletions(-)

(limited to 'www')

diff --git a/www/js/app.js b/www/js/app.js
index 005e9135..0b289623 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -69,6 +69,43 @@ angular.module('zmApp', [
 })
 
 
+//credit http://stackoverflow.com/questions/20997406/force-http-interceptor-in-dynamic-ngsrc-request
+.directive('httpSrc', [
+        '$http', function ($http) {
+            var directive = {
+                link: link,
+                restrict: 'A'
+            };
+            return directive;
+
+            function link(scope, element, attrs) {
+                var requestConfig = {
+                    method: 'Get',
+                    url: attrs.httpSrc,
+                    responseType: 'arraybuffer',
+                    cache: 'true'
+                };
+
+                $http(requestConfig)
+                    .success(function(data) {
+                        var arr = new Uint8Array(data);
+
+                        var raw = '';
+                        var i, j, subArray, chunk = 5000;
+                        for (i = 0, j = arr.length; i < j; i += chunk) {
+                            subArray = arr.subarray(i, i + chunk);
+                            raw += String.fromCharCode.apply(null, subArray);
+                        }
+
+                        var b64 = btoa(raw);
+
+                        attrs.$set('src', "data:image/jpeg;base64," + b64);
+                    });
+            }
+
+        }
+    ])
+
 
 //------------------------------------------------------------------
 // switch between collection repeat or ng-repeat
@@ -260,14 +297,14 @@ angular.module('zmApp', [
             // handle basic auth properly
             if (config.url.indexOf("@") > -1)
             {
-               // console.log ("HTTP basic auth INTERCEPTOR URL IS "  + config.url);
+               //console.log ("HTTP basic auth INTERCEPTOR URL IS "  + config.url);
                 var components = URI.parse(config.url);
-                //console.log ("Parsed data is " + JSON.stringify(components));
+               // console.log ("Parsed data is " + JSON.stringify(components));
                 var credentials = btoa(components.userinfo);
                 //var authorization = {'Authorization': 'Basic ' + credentials};
-                config.headers.Authorization = 'Basic ' + credentials;
+               config.headers.Authorization = 'Basic ' + credentials;
                 
-                //console.log ("Full headers: " + JSON.stringify(config.headers));
+               // console.log ("Full headers: " + JSON.stringify(config.headers));
                 
             }
             
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 675a812d..da27116e 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -20,7 +20,7 @@
                             <li ng-repeat="slide in slides">
                                 <div ng-if="!animationInProgress">
                                     <img  style="width:100vw; height:100vh" imageonload="finishedLoadingImage($index)" 
-                                         image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}" 
+                                         http-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}" 
                                          image-spinner-loader="lines" 
                                          ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" 
                                          
@@ -28,7 +28,7 @@
                                 </div>
                                 <div ng-if="animationInProgress">
                                     <img   style="width:100vw; height:100vh" imageonload="finishedLoadingImage($index)" 
-                                         image-spinner-src="img/pausevideo.png" 
+                                         http-src="img/pausevideo.png" 
                                          image-spinner-loader="lines" 
                                          class="object-fit_contain"  />
                                 </div>
diff --git a/www/templates/events.html b/www/templates/events.html
index b0fb3a43..e3332960 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -144,7 +144,7 @@
                                                  
                                             <figure style="display:inline-block">
                                                 <figcaption><p>frame:{{alarm.id}} score:{{alarm.score}}</p></figcaption>       
-                                                  <img  ng-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380"  height="170px" />
+                                                  <img  http-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380"  height="170px" />
                                                   
                                                 
                                                 </figure>
@@ -179,7 +179,11 @@
                                             <!-- Linwood scaling -->
                                             
                                             
-                                            <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/>
+                                            <!-- <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/> -->
+                                            
+                                             
+                                            <img imageonload="finishedLoadingImage($index)" http-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/>
+                                            
                                             <br/>
 
 
-- 
cgit v1.2.3