Added async image component

src/main/resources/templates/index.html

@@ -233,6 +233,7 @@
   <script src="components/multiSuggestionInputComponent.js"></script>
   <script src="components/singleResultViewerComponent.js"></script>
   <script src="components/facetWidgetComponent.js"></script>
+  <script src="components/imageAsyncComponent.js"></script>
 
   <!-- Directives -->
   <script src="directives/breadcrumbsDirective.js"></script>

src/main/webapp/app/components/imageAsyncComponent.js

@@ -0,0 +1,57 @@
+sage.constant('ImageStages', {
+  START: 'START',
+  LOADING: 'LOADING',
+  SUCCESS: 'SUCCESS',
+  ERROR: 'ERROR'
+});
+
+sage.component("imgAsync", {
+  templateUrl: "views/components/imgAsyncComponent.html",
+  bindings: {
+    result: "="
+  },
+  controller: function($scope, $timeout, $interval, $element, appConfig, ImageStages) {
+
+    this.imageStages = ImageStages;
+    this.imageStage = ImageStages.START;
+    this.defaultThumbnailURI = appConfig.defaultThumbnailURI;
+    this.defaultLoadingURI = appConfig.defaultLoadingThumbnailURI;
+
+    let loadingTimer = $timeout(() => {
+      $scope.$ctrl.imageStage = ImageStages.LOADING;
+    }, 1000);
+
+    const thumbnail = $element.children()[2];
+
+    const loadHandler = () => {
+      $timeout(() => {
+        $scope.$ctrl.imageStage = ImageStages.SUCCESS;
+        $timeout.cancel(loadingTimer);
+      });
+    };
+
+    const errorHandler = (e, e1) => {
+      console.log(e1);
+      $timeout(() => {
+        if($scope.$ctrl.imageStage === ImageStages.LOADING) {
+          $scope.$ctrl.imageStage = ImageStages.ERROR;
+          $timeout.cancel(loadingTimer);
+        }
+      });
+    };
+
+    thumbnail.addEventListener('load', loadHandler);
+    thumbnail.addEventListener('error', errorHandler);
+    window.addEventListener('manifestError', errorHandler);
+
+    this.$onInit = () => {
+      const timer = $interval(() => {
+        if (this.result.resourceThumbnailUriKey !== 'temp' && !this.thumbnailSrc) {
+          this.thumbnailSrc = this.result.resourceThumbnailUriKey;
+          $interval.cancel(timer);
+        } 
+      }, 10);
+    };
+
+  }
+});

src/main/webapp/app/config/appConfig.js

@@ -7,7 +7,8 @@ var appConfig = {
 
   'authStrategies': ['emailRegistration'],
 
-  'authService': window.location.protocol + '//' + window.location.host + window.location.base + '/auth',
+  //'authService': window.location.protocol + '//' + window.location.host + window.location.base + '/authfix',
+  'authService': 'https://labs.library.tamu.edu/authfix',
   'webService': window.location.protocol + '//' + window.location.host + window.location.base,
 
   'storageType': 'session',
@@ -52,6 +53,7 @@ var appConfig = {
     ]
   },
 
-  'defaultThumbnailURI': "resources/images/default-thumbnail.jpg"
+  'defaultThumbnailURI': "resources/images/default-thumbnail.jpg",
+  'defaultLoadingThumbnailURI': "resources/images/loading2.gif"
 
 };

src/main/webapp/app/model/discoveryContextModel.js

@@ -125,11 +125,13 @@ sage.model("DiscoveryContext", function ($q, $location, $routeParams, Field, Man
           if (!value.resourceThumbnailUriKey) {
             value.resourceThumbnailUriKey = 'temp';
             if (value.manifestUriKey) {
-              ManifestService.getThumbnailUrl(value.manifestUriKey).then(function(thumbnailUrl) {
-                value.resourceThumbnailUriKey = thumbnailUrl;
-              }, function(error) {
-
-              });
+              ManifestService.getThumbnailUrl(value.manifestUriKey)
+                .then(function(thumbnailUrl) {
+                  value.resourceThumbnailUriKey = thumbnailUrl;
+                })
+                .catch(function(error) {
+                  window.dispatchEvent(new CustomEvent("manifestError", error));
+                });
             }
           }
         });

src/main/webapp/app/resources/styles/sass/app.scss

@@ -9,6 +9,8 @@
 
 @import "splash/all";
 
+@import "components/all";
+
 @import "discovery-context/all";
 
 @import "directives/all";

src/main/webapp/app/resources/styles/sass/components/_all.scss

@@ -0,0 +1 @@
+@import "./async-loader"

src/main/webapp/app/resources/styles/sass/components/async-loader.scss

@@ -0,0 +1,15 @@
+.loader-wrapper {
+  width: 150px;
+  height: 112.5px;
+  background: #dadada;
+  padding-top: 28px;
+
+}
+
+.discovery-context .dc-content .dc-main .dc-results .dc-result .loader-wrapper img {
+  min-width: unset;
+  max-width: unset;
+  width: 75px !important;
+  height: 56.25px;
+  margin: auto;
+}

src/main/webapp/app/services/manifestService.js

@@ -11,11 +11,11 @@ sage.factory("ManifestService", function($http, $q) {
         $http({
           method: "GET",
           url: url
-        }).then(function success(response) {
+        }).then((response) => {
           cache[url] = response.data;
           resolve(cache[url]);
-        }, function error(error) {
-          console.error(error);
+        })
+        .catch((error) => {
           reject(error);
         });
       }
@@ -24,15 +24,17 @@ sage.factory("ManifestService", function($http, $q) {
 
   manifestService.getThumbnailUrl = function(url, ignoreCache) {
     return $q(function(resolve, reject) {
-      manifestService.getManifest(url, ignoreCache).then(function(manifest) {
-        if (manifest && manifest.thumbnail) {
-          resolve(manifest.thumbnail['@id'].replace("!100,100","!200,200"));
-        } else {
-          reject('No manifest thumbnail found!');
-        }
-      }, function(error) {
-        reject(error);
-      });
+      manifestService.getManifest(url, ignoreCache)
+        .then(function(manifest) {
+          if (manifest && manifest.thumbnail) {
+            resolve(manifest.thumbnail['@id'].replace("!100,100","!200,200"));
+          } else {
+            reject('No manifest thumbnail found!');
+          }
+        })
+        .catch((error) => {
+          reject(error);
+        });
     });
   };
 

src/main/webapp/app/views/components/imgAsyncComponent.html

@@ -0,0 +1,5 @@
+<img class="media-object" ng-src="{{$ctrl.defaultThumbnailURI}}" ng-show="$ctrl.imageStage===$ctrl.imageStages.START || $ctrl.imageStage===$ctrl.imageStages.ERROR" />
+<div class="loader-wrapper" ng-show="$ctrl.imageStage===$ctrl.imageStages.LOADING">
+  <img class="media-object" ng-src="{{$ctrl.defaultLoadingURI}}" /> 
+</div>
+<img class="media-object thumbnail" src="{{$ctrl.thumbnailSrc}}" ng-show="$ctrl.imageStage===$ctrl.imageStages.SUCCESS" />

src/main/webapp/app/views/discovery/discovery-context.html

@@ -77,7 +77,7 @@ <h3>
           <div class="media dc-result" ng-repeat="result in discoveryContext.results">
             <div class="media-left">
               <a href="discovery-context/{{discoveryContext.slug}}/{{result.uniqueIdentifier}}">
-                <img class="media-object" default-src="defaultThumbnailURI" ng-src="{{result.resourceThumbnailUriKey}}" alt="picture of: {{result.title}}">
+                <img-async result="result"></img-async>
               </a>
             </div>
             <div class="media-body">