@searpent/react-image-annotate 2.3.5 → 2.3.7

package/Annotator/examplePhotos.js

@@ -750,7 +750,7 @@ var examplePhotos = [{
           "Y1": 0,
           "Y2": 1
         },
-        "text": "[{\"key\":\"articleType\",\"value\":\"news\"}, {\"key\":\"previousArticleId\",\"value\":\"prev-article-1\"}, {\"key\":\"section\",\"value\":\"editorial\"}]",
+        "text": "[{\"key\":\"articleType\",\"value\":\"news\"}, {\"key\":\"section\",\"value\":\"editorial\"}]",
         "groupId": "42ba09e0-b2f5-439d-bdae-201e7c37787b",
         "id": "aba453dd-f870-4510-ae40-a19eb52eb7d6"
       }, {
@@ -762,7 +762,7 @@ var examplePhotos = [{
           "Y1": 0,
           "Y2": 1
         },
-        "text": "[{\"key\":\"articleType\",\"value\":\"ads\"}, {\"key\":\"previousArticleId\",\"value\":\"prev-article-2\"}, {\"key\":\"section\",\"value\":\"last page\"}]",
+        "text": "[{\"key\":\"articleType\",\"value\":\"ads\"}, {\"key\":\"section\",\"value\":\"last page\"}]",
         "groupId": "1",
         "id": "2615bf87-7247-4bde-a0f9-45413034a6a6"
       }]

package/Annotator/index.js

@@ -84,8 +84,7 @@ export var Annotator = function Annotator(_ref) {
       _ref$save = _ref.save,
       save = _ref$save === void 0 ? function () {} : _ref$save,
       _ref$fetchImage = _ref.fetchImage,
-      fetchImage = _ref$fetchImage === void 0 ? function () {} : _ref$fetchImage,
-      updatedBy = _ref.updatedBy;
+      fetchImage = _ref$fetchImage === void 0 ? function () {} : _ref$fetchImage;
 
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex(function (img) {
@@ -215,14 +214,14 @@ export var Annotator = function Annotator(_ref) {
       }
     }
   }, [state.previouslySelectedImage, state.selectedImage, state.images, state, save]); // Automatically save image shortly after specific metadata fields change
-  // (ArticleType, PreviousArticleId), but debounce so we don't save on every keystroke.
+  // (ArticleType, PreviousArticleId, Section), but debounce so we don't save on every keystroke.
 
   useEffect(function () {
     var _state$images;
 
     var lastAction = state.lastAction;
 
-    if (!lastAction || lastAction.type !== "UPDATE_METADATA" || lastAction.name !== "articleType" && lastAction.name !== "previousArticleId" || isNaN(lastAction.imageIndex)) {
+    if (!lastAction || lastAction.type !== "UPDATE_METADATA" || lastAction.name !== "articleType" && lastAction.name !== "previousArticleId" && lastAction.name !== "section" || isNaN(lastAction.imageIndex)) {
       return;
     }
 
@@ -446,8 +445,7 @@ export var Annotator = function Annotator(_ref) {
       recalcActive: saveActive,
       onMetadataChange: handleMetadataChange,
       onAddGroup: handleAddGroup,
-      onRecalcClick: handleRecalcClicked,
-      updatedBy: updatedBy
+      onRecalcClick: handleRecalcClicked
     }))
   );
 };

package/MainLayout/index.js

@@ -133,8 +133,7 @@ export var MainLayout = function MainLayout(_ref5) {
       saveActive = _ref5$saveActive === void 0 ? false : _ref5$saveActive,
       onMetadataChange = _ref5.onMetadataChange,
       onAddGroup = _ref5.onAddGroup,
-      onRecalcClick = _ref5.onRecalcClick,
-      updatedBy = _ref5.updatedBy;
+      onRecalcClick = _ref5.onRecalcClick;
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
@@ -376,8 +375,7 @@ export var MainLayout = function MainLayout(_ref5) {
       onPageClick: handlePageClick,
       onMetadataChange: onMetadataChange,
       metadataConfigs: state.metadataConfigs || [],
-      onRecalcClick: onRecalcClick,
-      updatedBy: updatedBy
+      onRecalcClick: onRecalcClick
     }),
     /*#__PURE__*/
     React.createElement(WorkspaceWrapper, null,

package/PageSelector/UpdatedBySemaphore.js

@@ -1,29 +1,74 @@
-import React from "react";
-import classnames from "classnames";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useMemo, useState } from "react";
 export function isUpdatedByAggregator(updatedBy) {
   if (updatedBy == null) return false;
   return String(updatedBy).trim() === "AGGREGATOR";
 }
+/** Non-empty lease string or null (treat undefined / "" / whitespace as no lock). */
+
+export function normalizeMediaPresenterLeaseUntil(raw) {
+  if (raw == null) return null;
+  var s = String(raw).trim();
+  return s === "" ? null : s;
+}
+/**
+ * True when Dynamo `mediaPresenterLeaseUntil` (ISO UTC string) is still in the future.
+ * Matches the media-presenter webhook lease written by BasicLinkingFunction.
+ */
+
+export function isMediaPresenterLockActive(mediaPresenterLeaseUntil) {
+  var s = normalizeMediaPresenterLeaseUntil(mediaPresenterLeaseUntil);
+  if (s == null) return false;
+  var t = Date.parse(s);
+  if (Number.isNaN(t)) return false;
+  return t > Date.now();
+}
 /**
  * Case-level “UPDATED BY” indicator for the page strip (left panel).
- * Red (left) / green (right) discs, left-aligned with the page-strip switch column; “Ready” after them.
- * Green lit only when value is exactly AGGREGATOR.
+ * Red (left) / green (right) discs, left-aligned with the page-strip switch column; status label after them.
+ * Green lit only when `updatedBy` is exactly AGGREGATOR and the media-presenter Dynamo lease is not active.
  * `selectionKey` should change per selected page so the control remounts when paging.
  */
 
 export default function UpdatedBySemaphore(_ref) {
   var updatedBy = _ref.updatedBy,
+      mediaPresenterLeaseUntil = _ref.mediaPresenterLeaseUntil,
       selectionKey = _ref.selectionKey;
-  var green = isUpdatedByAggregator(updatedBy);
+  var leaseStr = useMemo(function () {
+    return normalizeMediaPresenterLeaseUntil(mediaPresenterLeaseUntil);
+  }, [mediaPresenterLeaseUntil]); // While a lease string is present, re-evaluate every second so expiry clears without a parent refetch.
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      setLeasePulse = _useState2[1];
+
+  useEffect(function () {
+    if (leaseStr == null) return undefined;
+    var id = window.setInterval(function () {
+      return setLeasePulse(function (n) {
+        return n + 1;
+      });
+    }, 1000);
+    return function () {
+      return window.clearInterval(id);
+    };
+  }, [leaseStr]);
+  var lockActive = isMediaPresenterLockActive(leaseStr);
+  var green = isUpdatedByAggregator(updatedBy) && !lockActive;
   var source = updatedBy == null || updatedBy === "" ? "—" : String(updatedBy);
+  var leaseHint = lockActive ? " Media presenter lock active (lease until ".concat(leaseStr, ").") : "";
+  var statusLabel = green ? "Ready" : "Do not modify";
+  var title = "Case last updated by: ".concat(source, ".").concat(leaseHint, " Status: ").concat(statusLabel, ". Green lamp: safe to modify (AGGREGATOR and no active media-presenter lease). Red lamp: do not modify (other updater and/or lock).");
+  var redClass = "ps-semaphore-lamp ps-semaphore-red" + (green ? "" : " ps-semaphore-lit");
+  var greenClass = "ps-semaphore-lamp ps-semaphore-green" + (green ? " ps-semaphore-lit" : "");
   return (
     /*#__PURE__*/
     React.createElement("div", {
-      key: selectionKey,
+      key: "".concat(selectionKey, "|").concat(leaseStr !== null && leaseStr !== void 0 ? leaseStr : ""),
       className: "ps-updated-by-semaphore",
-      title: "Case last updated by: ".concat(source, ". Green disc: AGGREGATOR \u2014 OK to start manual edits. Red disc: other source \u2014 review before editing."),
+      title: title,
       role: "img",
-      "aria-label": green ? "OK to start manual edits (AGGREGATOR)" : "Review before manual edits (not AGGREGATOR)"
+      "aria-label": statusLabel
     },
     /*#__PURE__*/
     React.createElement("span", {
@@ -36,19 +81,15 @@ export default function UpdatedBySemaphore(_ref) {
     },
     /*#__PURE__*/
     React.createElement("span", {
-      className: classnames("ps-semaphore-lamp", "ps-semaphore-red", {
-        "ps-semaphore-lit": !green
-      })
+      className: redClass
     }),
     /*#__PURE__*/
     React.createElement("span", {
-      className: classnames("ps-semaphore-lamp", "ps-semaphore-green", {
-        "ps-semaphore-lit": green
-      })
+      className: greenClass
     }))),
     /*#__PURE__*/
     React.createElement("span", {
       className: "ps-top-bar-label ps-updated-by-semaphore__label"
-    }, "Ready"))
+    }, statusLabel))
   );
 }

package/PageSelector/index.js

@@ -4,7 +4,6 @@ import classnames from "classnames";
 import './page-selector.css';
 import Locker from '../Locker';
 import Errorer from '../Errorer';
-import UpdatedBySemaphore from './UpdatedBySemaphore';
 
 function PageThumbnail(_ref) {
   var _metadata$find, _metadata$find$call;
@@ -149,24 +148,17 @@ function isLocked(page) {
 }
 
 function PageSelector(_ref3) {
-  var _ref4, _ref5;
-
   var pages = _ref3.pages,
       onPageClick = _ref3.onPageClick,
       onMetadataChange = _ref3.onMetadataChange,
       metadataConfigs = _ref3.metadataConfigs,
-      onRecalcClick = _ref3.onRecalcClick,
-      updatedBy = _ref3.updatedBy;
+      onRecalcClick = _ref3.onRecalcClick;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       showMetadata = _useState2[0],
       setShowMetadata = _useState2[1];
 
-  var activePage = pages.find(function (p) {
-    return p.isActive;
-  });
-  var selectionKey = (_ref4 = (_ref5 = activePage === null || activePage === void 0 ? void 0 : activePage.id) !== null && _ref5 !== void 0 ? _ref5 : activePage === null || activePage === void 0 ? void 0 : activePage.src) !== null && _ref4 !== void 0 ? _ref4 : String(pages.length);
   return (
     /*#__PURE__*/
     React.createElement("div", {
@@ -179,10 +171,6 @@ function PageSelector(_ref3) {
       className: "top-buttons"
     },
     /*#__PURE__*/
-    React.createElement("div", {
-      className: "page-selector-top-controls"
-    },
-    /*#__PURE__*/
     React.createElement("div", {
       className: "show-metadata-wrapper"
     },
@@ -206,18 +194,7 @@ function PageSelector(_ref3) {
       className: "slider round"
     })),
     /*#__PURE__*/
-    React.createElement("label", {
-      className: "ps-top-bar-label"
-    }, "Metadata")), updatedBy !== undefined && updatedBy !== null &&
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: "ps-semaphore-below-metadata"
-    },
-    /*#__PURE__*/
-    React.createElement(UpdatedBySemaphore, {
-      updatedBy: updatedBy,
-      selectionKey: selectionKey
-    })))),
+    React.createElement("label", null, "Metadata"))),
     /*#__PURE__*/
     React.createElement("div", {
       className: "pages"

package/PageSelector/page-selector.css

@@ -4,6 +4,8 @@
   transition: width .5s;
 }
 
+.page-selector--opened {}
+
 .pages {
   list-style: none;
   display: flex;
@@ -103,132 +105,6 @@
   z-index: 100;
 }
 
-.page-selector-top-controls {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  gap: 0.5rem;
-}
-
-/* Same typography as “Metadata” label (plain label next to switch) */
-.ps-top-bar-label {
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: inherit;
-  cursor: default;
-}
-
-.ps-semaphore-below-metadata {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-  padding-top: 0.15rem;
-  padding-left: 0;
-  box-sizing: border-box;
-}
-
-/* Same slot as .switch (60px) + .mr-2 (1rem) — lines up with Metadata toggle row */
-.ps-semaphore-toggle-column {
-  width: 60px;
-  margin-right: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  box-sizing: border-box;
-}
-
-/* Plain text + discs to the right — no box */
-.ps-updated-by-semaphore {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.5rem;
-  padding: 0;
-  margin: 0;
-  border: none;
-  background: none;
-  box-shadow: none;
-  flex-shrink: 0;
-}
-
-.ps-updated-by-semaphore__label {
-  text-align: left;
-  margin: 0;
-  white-space: nowrap;
-}
-
-.ps-semaphore-lamps {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-}
-
-/* Same diameter as Metadata toggle knob (.slider:before: 26×26) */
-.ps-semaphore-lamp {
-  box-sizing: border-box;
-  display: inline-block;
-  vertical-align: middle;
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  border: 2px solid rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
-  flex-shrink: 0;
-}
-
-/* Inactive: still a faint tint of the lamp’s hue */
-.ps-semaphore-lamp:not(.ps-semaphore-lit) {
-  opacity: 0.72;
-}
-
-.ps-semaphore-lamp.ps-semaphore-lit {
-  opacity: 1;
-  transform: scale(1.02);
-}
-
-/* Inactive red: soft rose / dusty red */
-.ps-semaphore-red {
-  background: linear-gradient(165deg, #f0d4d4 0%, #d9a8a8 45%, #c08080 100%);
-  border-color: rgba(180, 90, 90, 0.35);
-  box-shadow:
-    inset 0 2px 5px rgba(255, 255, 255, 0.35),
-    inset 0 -2px 6px rgba(160, 60, 60, 0.2);
-}
-
-.ps-semaphore-red.ps-semaphore-lit {
-  background: linear-gradient(180deg, #ff5252 0%, #d50000 55%, #b71c1c 100%);
-  border-color: rgba(255, 200, 200, 0.85);
-  box-shadow:
-    0 0 10px rgba(213, 0, 0, 0.88),
-    inset 0 -2px 5px rgba(0, 0, 0, 0.18);
-}
-
-/* Inactive green: soft mint / dusty green */
-.ps-semaphore-green {
-  background: linear-gradient(165deg, #dff2df 0%, #b8dcb8 45%, #92c592 100%);
-  border-color: rgba(80, 140, 80, 0.35);
-  box-shadow:
-    inset 0 2px 5px rgba(255, 255, 255, 0.4),
-    inset 0 -2px 6px rgba(60, 120, 60, 0.18);
-}
-
-.ps-semaphore-green.ps-semaphore-lit {
-  background: linear-gradient(180deg, #b9f6ca 0%, #00e676 40%, #00c853 100%);
-  border-color: rgba(200, 255, 220, 0.9);
-  box-shadow:
-    0 0 10px rgba(0, 200, 83, 0.88),
-    inset 0 -2px 5px rgba(0, 0, 0, 0.14);
-}
-
 .top-buttons button {
   margin-bottom: 1rem;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.3.5",
+  "version": "2.3.7",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",