[Feature] Custom Redact All functionality (#4966)

* video redact

* testing stuff

* test

* api

* custom apply api

* added custom note selection function to redactionitem

* missing files

* cleanup

* cleanup

* cleanup

* cleanup

* cleanup

* documentation

* fix bad commit

* api tweaks

* api tweaks

* missing file

Co-authored-by: Kristian Hein <[email protected]>

Author: webviewer-ui

assets/icons/ic-full-frame-video-redact.svg

@@ -815,6 +815,7 @@
     "redactionItem": {
       "regionRedaction": "Region redaction",
       "fullPageRedaction": "Full page redaction",
+      "fullVideoFrameRedaction": "Video Redaction",
       "image": "Image"
     },
     "expand": "Expand",

i18n/translation-en.json

@@ -162,6 +162,7 @@ import getCustomData from './getCustomData';
 import setCustomMeasurementOverlayInfo from './setCustomMeasurementOverlayInfo';
 import setNoteTransformFunction from './setNoteTransformFunction';
 import setCustomNoteSelectionFunction from './setCustomNoteSelectionFunction';
+import setCustomApplyRedactionsHandler from './setCustomApplyRedactionsHandler';
 import selectThumbnailPages from './selectThumbnailPages';
 import unselectThumbnailPages from './unselectThumbnailPages';
 import setSearchResults from './setSearchResults';
@@ -292,6 +293,7 @@ export default store => {
     setToolbarGroup: setToolbarGroup(store),
     dangerouslySetNoteTransformFunction: setNoteTransformFunction(store),
     setCustomNoteSelectionFunction: setCustomNoteSelectionFunction(store),
+    setCustomApplyRedactionsHandler: setCustomApplyRedactionsHandler(store),
     setToolMode,
     setZoomLevel,
     setZoomList: setZoomList(store),

src/apis/index.js

@@ -0,0 +1,27 @@
+import actions from 'actions';
+
+/**
+ * @callback CustomApplyRedactionsHandler
+ * @memberof UI
+ * @param {Array.<Core.Annotations.Annotation>} annotations
+ * @param {function} originalApplyRedactionsFunction The original applyRedactions function
+ */
+
+/**
+ * @method UI.setCustomApplyRedactionsHandler
+ * @param {UI.CustomApplyRedactionsHandler} customApplyRedactionsHandler
+ * The function that will be invoked when clicking on the 'Redact All' button.
+ * @example
+ WebViewer(...)
+  .then(function(instance) {
+    instance.UI.setCustomApplyRedactionsHandler((annotationsToRedact, originalApplyRedactionsFunction) => {
+      // custom code
+      ...
+      originalApplyRedactionsFunction();
+    })
+  });
+ */
+
+export default store => customApplyRedactionsHandler => {
+  store.dispatch(actions.setCustomApplyRedactionsHandler(customApplyRedactionsHandler));
+};

src/apis/setCustomApplyRedactionsHandler.js

@@ -39,7 +39,11 @@ const RedactionItem = (props) => {
       <RedactionTextPreview linesToBreak={2}>
         {textPreview}
       </RedactionTextPreview>)
-  } else if (redactionType === redactionTypeMap['FULL_PAGE'] || redactionType === redactionTypeMap['REGION']) {
+  } else if (
+    redactionType === redactionTypeMap['FULL_PAGE'] 
+    || redactionType === redactionTypeMap['FULL_VIDEO_FRAME']
+    || redactionType === redactionTypeMap['REGION']
+  ) {
     redactionPreview = t(label);
   } else {
     redactionPreview = annotation.getContents();

src/components/RedactionPageGroup/RedactionItem/RedactionItem.js

@@ -13,10 +13,12 @@ const RedactionItemContainer = (props) => {
   const [
     dateFormat,
     language,
+    customNoteSelectionFunction,
   ] = useSelector(
     state => [
       selectors.getNoteDateFormat(state),
       selectors.getCurrentLanguage(state),
+      selectors.getCustomNoteSelectionFunction(state),
     ],
     shallowEqual,
   );
@@ -26,6 +28,7 @@ const RedactionItemContainer = (props) => {
   const author = core.getDisplayAuthor(annotation['Author']);
 
   const onRedactionItemSelection = useCallback(() => {
+    customNoteSelectionFunction && customNoteSelectionFunction(annotation);
     core.deselectAllAnnotations();
     core.selectAnnotation(annotation);
     core.jumpToAnnotation(annotation);

src/components/RedactionPageGroup/RedactionItem/RedactionItemContainer.js

@@ -19,13 +19,15 @@ export const RedactionPanelContainer = () => {
     isDisabled,
     redactionPanelWidth,
     isInDesktopOnlyMode,
+    customApplyRedactionsHandler,
     redactionSearchPatterns,
   ] = useSelector(
     state => [
       selectors.isElementOpen(state, 'redactionPanel'),
       selectors.isElementDisabled(state, 'redactionPanel'),
       selectors.getRedactionPanelWidth(state),
       selectors.isInDesktopOnlyMode(state),
+      selectors.getCustomApplyRedactionsHandler(state),
       selectors.getRedactionSearchPatterns(state),
     ], shallowEqual);
 
@@ -58,7 +60,14 @@ export const RedactionPanelContainer = () => {
 
   const dispatch = useDispatch();
   const applyAllRedactions = () => {
-    dispatch(applyRedactions(redactionAnnotationsList));
+    const originalApplyRedactions = () => {
+      dispatch(applyRedactions(redactionAnnotationsList));
+    };
+    if (customApplyRedactionsHandler) {
+      customApplyRedactionsHandler(redactionAnnotationsList, originalApplyRedactions);
+    } else {
+      originalApplyRedactions();
+    }
   };
   const closeRedactionPanel = () => {
     dispatch(actions.closeElement('redactionPanel'));

src/components/RedactionPanel/RedactionPanelContainer.js

@@ -2,6 +2,7 @@ export const redactionTypeMap = {
   REGION: 'region',
   TEXT: 'text',
   FULL_PAGE: 'fullPage',
+  FULL_VIDEO_FRAME: 'fullVideoFrame',
   CREDIT_CARD: 'creditCard',
   PHONE: 'phone',
   IMAGE: 'image',
@@ -17,6 +18,10 @@ export const defaultRedactionTypes = {
     icon: 'icon-header-page-manipulation-page-transition-page-by-page-line',
     label: 'redactionPanel.redactionItem.fullPageRedaction',
   },
+  [redactionTypeMap['FULL_VIDEO_FRAME']]: {
+    icon: 'ic-full-frame-video-redact',
+    name: 'redactionPanel.redactionItem.fullVideoFrameRedaction',
+  },
   [redactionTypeMap['TEXT']]: {
     icon: 'icon-form-field-text',
   },

src/constants/redactionTypes.js

@@ -429,6 +429,11 @@ export const setCustomNoteSelectionFunction = customNoteFunction => ({
   type: 'SET_CUSTOM_NOTE_SELECTION_FUNCTION',
   payload: { customNoteFunction },
 });
+export const setCustomApplyRedactionsHandler = customApplyRedactionsHandler => ({
+  type: 'SET_CUSTOM_APPLY_REDACTIONS_HANDLER',
+  payload: { customApplyRedactionsHandler },
+});
+
 export const setEnableSnapMode = enable => ({
   type: 'SET_ENABLE_SNAP_MODE',
   payload: { enable },

src/redux/actions/internalActions.js

@@ -406,6 +406,8 @@ export default initialState => (state = initialState, action) => {
       return { ...state, noteTransformFunction: payload.noteTransformFunction };
     case 'SET_CUSTOM_NOTE_SELECTION_FUNCTION':
       return { ...state, customNoteFunction: payload.customNoteFunction };
+    case 'SET_CUSTOM_APPLY_REDACTIONS_HANDLER':
+      return { ...state, customApplyRedactionsHandler: payload.customApplyRedactionsHandler };
     case 'SET_ANNOTATION_CONTENT_OVERLAY_HANDLER':
       return { ...state, annotationContentOverlayHandler: payload.annotationContentOverlayHandler };
     case 'SET_CUSTOM_MODAL': {

src/redux/reducers/viewerReducer.js

@@ -411,6 +411,8 @@ export const getNoteTransformFunction = state => state.viewer.noteTransformFunct
 
 export const getCustomNoteSelectionFunction = state => state.viewer.customNoteFunction;
 
+export const getCustomApplyRedactionsHandler = state => state.viewer.customApplyRedactionsHandler;
+
 export const isSnapModeEnabled = state => state.viewer.isSnapModeEnabled;
 
 export const getUnreadAnnotationIdSet = state => state.viewer.unreadAnnotationIdSet;