Merge pull request guardian#3169 from guardian/aw-reveal-digest-loop

Faster fades on load and progressive display of images
bbc · Mar 4, 2021 · 4c0bba9 · 4c0bba9
2 parents 3c0169e + 93dd61b
commit 4c0bba9
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 19 deletions.
diff --git a/common-lib/src/main/scala/com/gu/mediaservice/lib/imaging/ImageOperations.scala b/common-lib/src/main/scala/com/gu/mediaservice/lib/imaging/ImageOperations.scala
@@ -117,6 +117,7 @@ class ImageOperations(playPath: String) extends GridLogging {
   val thumbUnsharpRadius = 0.5d
   val thumbUnsharpSigma = 0.5d
   val thumbUnsharpAmount = 0.8d
+  val interlacedHow = "Line"
 
   /**
     * Given a source file containing a png (the 'browser viewable' file),
@@ -146,7 +147,8 @@ class ImageOperations(playPath: String) extends GridLogging {
     val profiled    = applyOutputProfile(stripped, optimised = true)
     val unsharpened = unsharp(profiled)(thumbUnsharpRadius, thumbUnsharpSigma, thumbUnsharpAmount)
     val qualified   = quality(unsharpened)(qual)
-    val addOutput   = {file:File => addDestImage(qualified)(file)}
+    val interlaced  = interlace(qualified)(interlacedHow)
+    val addOutput   = {file:File => addDestImage(interlaced)(file)}
     for {
       outputFile <- createTempFile(s"thumb-", thumbMimeType.fileExtension, tempDir)
       _          <- runConvertCmd(addOutput(outputFile), useImageMagick = sourceMimeType.contains(Tiff))

diff --git a/common-lib/src/main/scala/com/gu/mediaservice/lib/imaging/im4jwrapper/ImageMagick.scala b/common-lib/src/main/scala/com/gu/mediaservice/lib/imaging/im4jwrapper/ImageMagick.scala
@@ -28,6 +28,7 @@ object ImageMagick extends GridLogging {
   def scale(op: IMOperation)(dimensions: Dimensions): IMOperation = op <| (_.scale(dimensions.width, dimensions.height))
   def format(op: IMOperation)(definition: String): IMOperation = op <| (_.format(definition))
   def depth(op: IMOperation)(depth: Int): IMOperation = op <| (_.depth(depth))
+  def interlace(op: IMOperation)(interlacedHow: String): IMOperation = op <| (_.interlace(interlacedHow))
 
   def runConvertCmd(op: IMOperation, useImageMagick: Boolean): Future[Unit] = {
     logger.info(s"Using ${if(useImageMagick) { "imagemagick" } else { "graphicsmagick" }} for imaging operation $op")

diff --git a/kahuna/public/js/directives/gr-image-fade-on-load.js b/kahuna/public/js/directives/gr-image-fade-on-load.js
@@ -7,41 +7,52 @@ imageFade.directive('grImageFadeOnLoad',
                      function ($q, $timeout) {
 
     // TODO: customise duration, transition
-    const animationThreshold = 50; // ms
-    const animationDuration = 200; // ms
+                         const animationDuration = 200; // ms
+                         const revealAfter = 1500; // ms
 
     return {
         restrict: 'A',
         link: function (scope, element) {
-            // If not loaded after animationThreshold, hide and wait
+            // If not loaded, hide and wait
             // until loaded to fade in
-            $timeout(() => {
                 if (! isLoaded()) {
                     hide();
-                    whenLoaded().finally(reveal);
+                    whenLoaded();
                 }
-            }, animationThreshold);
 
+            // If not loaded after revealAfter
+            // show the image, it's progressive so we should
+            // have something to show for our time
+            $timeout(() => {
+                reveal();
+            }, revealAfter);
 
             function isLoaded() {
                 return element[0].complete;
             }
 
             function whenLoaded() {
                 const defer = $q.defer();
-
+                const revealAndResolve = () => {
+                    reveal();
+                    defer.resolve();
+                };
+                const revealAndReject = () => {
+                    reveal();
+                    defer.reject();
+                };
                 // already loaded
                 if (isLoaded()) {
-                    defer.resolve();
+                    revealAndResolve();
                 } else {
                     // wait until loaded/error
-                    element.on('load', defer.resolve);
-                    element.on('error', defer.reject);
+                    element.on('load', revealAndResolve);
+                    element.on('error', revealAndReject);
 
                     // free listeners once observed
                     defer.promise.finally(() => {
-                        element.off('load', defer.resolve);
-                        element.off('error', defer.reject);
+                        element.off('load', revealAndResolve);
+                        element.off('error', revealAndReject);
                     });
                 }
 

diff --git a/kahuna/public/js/image/view.html b/kahuna/public/js/image/view.html
@@ -150,8 +150,7 @@
                ng-src="{{:: ctrl.optimisedImageUri}}"
                grid:track-image="ctrl.image"
                grid:track-image-location="original"
-               grid:track-image-loadtime
-               gr-image-fade-on-load/>
+               grid:track-image-loadtime/>
         </div>
 
         <!-- TODO: As this loads async, add a loader -->

diff --git a/kahuna/public/js/preview/image.html b/kahuna/public/js/preview/image.html
@@ -35,8 +35,7 @@
        <img class="preview__image"
             ng-class="{'preview__image--staff': ctrl.states.isStaffPhotographer}"
             alt="{{::ctrl.imageDescription}}"
-            ng-src="{{::ctrl.image.data.thumbnail | assetFile}}"
-            gr-image-fade-on-load />
+            ng-src="{{::ctrl.image.data.thumbnail | assetFile}}"/>
     </a>
 
     <span ng-if="ctrl.selectionMode" class="preview__no-link">
@@ -45,8 +44,7 @@
              ng-class="{'preview__image--staff': ctrl.states.isStaffPhotographer}"
              alt="{{::ctrl.image.data.metadata.description}}"
              ng-src="{{::ctrl.image.data.thumbnail | assetFile}}"
-             ui-drag-data="ctrl.image | asImageDragData"
-             gr-image-fade-on-load />
+             ui-drag-data="ctrl.image | asImageDragData"/>
     </span>
 
     <div class="preview__info" ng-if="! ctrl.hideInfo">