@searpent/react-image-annotate 2.3.6 → 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,9 +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,
-      mediaPresenterLeaseUntil = _ref.mediaPresenterLeaseUntil;
+      fetchImage = _ref$fetchImage === void 0 ? function () {} : _ref$fetchImage;
 
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex(function (img) {
@@ -216,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;
     }
 
@@ -447,9 +445,7 @@ export var Annotator = function Annotator(_ref) {
       recalcActive: saveActive,
       onMetadataChange: handleMetadataChange,
       onAddGroup: handleAddGroup,
-      onRecalcClick: handleRecalcClicked,
-      updatedBy: updatedBy,
-      mediaPresenterLeaseUntil: mediaPresenterLeaseUntil
+      onRecalcClick: handleRecalcClicked
     }))
   );
 };

package/MainLayout/index.js

@@ -133,9 +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,
-      mediaPresenterLeaseUntil = _ref5.mediaPresenterLeaseUntil;
+      onRecalcClick = _ref5.onRecalcClick;
   var classes = useStyles();
   var settings = useSettings();
   var fullScreenHandle = useFullScreenHandle();
@@ -377,9 +375,7 @@ export var MainLayout = function MainLayout(_ref5) {
       onPageClick: handlePageClick,
       onMetadataChange: onMetadataChange,
       metadataConfigs: state.metadataConfigs || [],
-      onRecalcClick: onRecalcClick,
-      updatedBy: updatedBy,
-      mediaPresenterLeaseUntil: mediaPresenterLeaseUntil
+      onRecalcClick: onRecalcClick
     }),
     /*#__PURE__*/
     React.createElement(WorkspaceWrapper, null,

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, { normalizeMediaPresenterLeaseUntil } from './UpdatedBySemaphore';
 
 function PageThumbnail(_ref) {
   var _metadata$find, _metadata$find$call;
@@ -148,32 +147,18 @@ function isLocked(page) {
   return false;
 }
 
-function showUpdatedBySemaphore(updatedBy, mediaPresenterLeaseUntil) {
-  if (updatedBy !== undefined && updatedBy !== null) return true;
-  if (normalizeMediaPresenterLeaseUntil(mediaPresenterLeaseUntil) != null) return true;
-  return false;
-}
-
 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,
-      mediaPresenterLeaseUntil = _ref3.mediaPresenterLeaseUntil;
+      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", {
@@ -186,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"
     },
@@ -213,19 +194,7 @@ function PageSelector(_ref3) {
       className: "slider round"
     })),
     /*#__PURE__*/
-    React.createElement("label", {
-      className: "ps-top-bar-label"
-    }, "Metadata")), showUpdatedBySemaphore(updatedBy, mediaPresenterLeaseUntil) &&
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: "ps-semaphore-below-metadata"
-    },
-    /*#__PURE__*/
-    React.createElement(UpdatedBySemaphore, {
-      updatedBy: updatedBy,
-      mediaPresenterLeaseUntil: mediaPresenterLeaseUntil,
-      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,124 +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 lamps read as “off” (neutral); lit lamp pops. */
-.ps-semaphore-lamp:not(.ps-semaphore-lit) {
-  opacity: 0.88;
-}
-
-.ps-semaphore-lamp.ps-semaphore-lit {
-  opacity: 1;
-  transform: scale(1.02);
-}
-
-/* Off state: neutral gray so only the lit lamp reads as red/green (traffic-light style). */
-.ps-semaphore-red:not(.ps-semaphore-lit),
-.ps-semaphore-green:not(.ps-semaphore-lit) {
-  background: linear-gradient(165deg, #ececec 0%, #d4d4d4 45%, #bdbdbd 100%);
-  border-color: rgba(0, 0, 0, 0.12);
-  box-shadow:
-    inset 0 2px 4px rgba(255, 255, 255, 0.55),
-    inset 0 -2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.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);
-}
-
-.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.6",
+  "version": "2.3.7",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",