show points of interest ᴮᴱᵀᴬ crops in the UI

Co-authored-by: Frederick O'Brien <[email protected]>
guardian · Dec 6, 2024 · b59dfb0 · b59dfb0
1 parent 1f1313d
commit b59dfb0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/kahuna/public/js/components/gr-display-crops/gr-display-crops.html b/kahuna/public/js/components/gr-display-crops/gr-display-crops.html
@@ -14,7 +14,7 @@
                 <li class="image-info__group--dl gr-display-crops__crop"
                     ng-repeat="crop in ctrl.crops">
                     <div class="gr-display-crops__crop__list image-info__group--dl__key image-info__heading">
-                        <div>{{crop.specification.aspectRatio | asCropType}}</div>
+                        <div>{{crop.specification | asCropType}}</div>
                         <div>{{crop.master.dimensions.width}} x {{crop.master.dimensions.height}}</div>
                     </div>
                     <ul>

diff --git a/kahuna/public/js/image/controller.js b/kahuna/public/js/image/controller.js
@@ -297,7 +297,11 @@ image.controller('ImageCtrl', [
       }
       ctrl.crop = crops.find(crop => crop.id === cropKey);
       ctrl.fullCrop = crops.find(crop => crop.specification.type === 'full');
-      ctrl.crops = crops.filter(crop => crop.specification.type === 'crop');
+      ctrl.crops = [
+        ...crops.filter(crop => crop.specification.type === 'crop'),
+        // for POI, we can't use crops as the S3 crops are full frame and won't match up
+        ...esCrops.filter(crop => crop.specification.type === 'poi')
+      ];
       ctrl.image.allCrops = ctrl.fullCrop ? [ctrl.fullCrop].concat(ctrl.crops) : ctrl.crops;
       //boolean version for use in template
       ctrl.hasFullCrop = angular.isDefined(ctrl.fullCrop);

diff --git a/kahuna/public/js/image/crop.html b/kahuna/public/js/image/crop.html
@@ -5,7 +5,7 @@
 <div class="image-crop__info"
      ng-class="{'image-crop__info--selected': crop == ctrl.crop}">
   <div class="flex-container">
-    {{:: crop.specification.aspectRatio | asCropType}}
+    {{:: crop.specification | asCropType}}
     <span class="flex-spacer"></span>
     <span ng-if="crop.specification.aspectRatio">({{:: crop.specification.aspectRatio}})</span>
   </div>
@@ -21,6 +21,6 @@
     data-thumbnail="{{:: extremeAssets.smallest | assetFile}}"
     data-embeddable-url="{{:: ctrl.image.data.id | embeddableUrl:crop.id}}"
     data-aspect-ratio="{{:: crop.specification.aspectRatio}}"
-    data-crop-type="{{:: crop.specification.aspectRatio | asCropType}}"
+    data-crop-type="{{:: crop.specification | asCropType}}"
   ></asset-handle>
 </div>
diff --git a/kahuna/public/js/util/crop.js b/kahuna/public/js/util/crop.js
@@ -1,6 +1,6 @@
 import angular from 'angular';
 
-import { landscape, portrait, video, square, freeform, cropOptions } from './constants/cropOptions';
+import {landscape, portrait, video, square, freeform, cropOptions, pointsOfInterestBeta} from './constants/cropOptions';
 
 const CROP_TYPE_STORAGE_KEY = 'cropType';
 const CUSTOM_CROP_STORAGE_KEY = 'customCrop';
@@ -123,8 +123,11 @@ cropUtil.factory('cropSettings', ['storage', function(storage) {
 }]);
 
 cropUtil.filter('asCropType', function() {
-  return ratioString => {
-    const cropSpec = cropOptions.find(_ => _.ratioString === ratioString) || freeform;
+  return specification => {
+    if (specification.type === "poi"){
+      return pointsOfInterestBeta.key;
+    }
+    const cropSpec = cropOptions.find(_ => _.ratioString === specification.aspectRatio) || freeform;
     return cropSpec.key;
   };
 });