box-annotations 5.3.0 → 5.3.1-beta.0

package/src/components/Popups/PopupV2.tsx

@@ -142,10 +142,7 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
             const capturedToken = token;
             const url = await fetchAvatarBlob(capturedApiHost, capturedToken, fileId, userId);
             if (!url) return null;
-            if (
-                credentialsRef.current.apiHost !== capturedApiHost ||
-                credentialsRef.current.token !== capturedToken
-            ) {
+            if (credentialsRef.current.apiHost !== capturedApiHost || credentialsRef.current.token !== capturedToken) {
                 URL.revokeObjectURL(url);
                 return null;
             }
@@ -225,11 +222,9 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
 
     const isResolved = annotation?.status === 'resolved';
     const resolvedBy = isResolved
-        ? annotation?.resolution?.resolved_by?.name ?? annotation?.modified_by?.name
-        : undefined;
-    const resolvedAtSource = isResolved
-        ? annotation?.resolution?.resolved_at ?? annotation?.modified_at
+        ? (annotation?.resolution?.resolved_by?.name ?? annotation?.modified_by?.name)
         : undefined;
+    const resolvedAtSource = isResolved ? (annotation?.resolution?.resolved_at ?? annotation?.modified_at) : undefined;
     const resolvedAt = resolvedAtSource ? new Date(resolvedAtSource).getTime() : undefined;
 
     const userSelectorProps = React.useMemo(
@@ -288,14 +283,11 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
         [annotationId, dispatch, isRichTextEnabled],
     );
 
-    const handleThreadDelete = React.useCallback(
-        async (): Promise<void> => {
-            if (annotationId) {
-                await dispatch(deleteAnnotationAction(annotationId));
-            }
-        },
-        [annotationId, dispatch],
-    );
+    const handleThreadDelete = React.useCallback(async (): Promise<void> => {
+        if (annotationId) {
+            await dispatch(deleteAnnotationAction(annotationId));
+        }
+    }, [annotationId, dispatch]);
 
     const handleDelete = React.useCallback(
         async (id: string): Promise<void> => {
@@ -305,24 +297,18 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
         [annotationId, dispatch],
     );
 
-    const handleResolve = React.useCallback(
-        async (): Promise<void> => {
-            if (!annotationId) return;
-            const result = await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'resolved' } }));
-            if (updateAnnotationAction.fulfilled.match(result)) {
-                dispatch(setActiveAnnotationIdAction(null));
-            }
-        },
-        [annotationId, dispatch],
-    );
+    const handleResolve = React.useCallback(async (): Promise<void> => {
+        if (!annotationId) return;
+        const result = await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'resolved' } }));
+        if (updateAnnotationAction.fulfilled.match(result)) {
+            dispatch(setActiveAnnotationIdAction(null));
+        }
+    }, [annotationId, dispatch]);
 
-    const handleUnresolve = React.useCallback(
-        async (): Promise<void> => {
-            if (!annotationId) return;
-            await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'open' } }));
-        },
-        [annotationId, dispatch],
-    );
+    const handleUnresolve = React.useCallback(async (): Promise<void> => {
+        if (!annotationId) return;
+        await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'open' } }));
+    }, [annotationId, dispatch]);
 
     if (!popupPortalEl) return null;
 
@@ -331,25 +317,26 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
             <div
                 ref={popupRef}
                 aria-label={intl.formatMessage(messages.ariaLabelComment)}
-                className="ba-PopupV2"
+                className="ba-PopupAnnotation"
                 data-resin-component={annotationId ? 'popupThreadV2' : 'popupReplyV2'}
-                onClick={handleEvent}
+                data-resin-feature="annotations"
                 onMouseDown={handleEvent}
                 onMouseMove={handleEvent}
-                onMouseUp={handleEvent}
                 onTouchMove={handleEvent}
                 onTouchStart={handleEvent}
                 role="presentation"
             >
                 <BlueprintModernizationProvider enableModernizedComponents>
                     <TooltipProvider>
-                        <MentionContextProvider value={{
-                            collaborationPopoverProps: {
-                                onSubmit: () => Promise.resolve(),
-                            },
-                            // Mentions are restricted to file collaborators; the invite popover is intentionally never shown.
-                            fetchCollaboratorState: async () => true,
-                        }}>
+                        <MentionContextProvider
+                            value={{
+                                collaborationPopoverProps: {
+                                    onSubmit: () => Promise.resolve(),
+                                },
+                                // Mentions are restricted to file collaborators; the invite popover is intentionally never shown.
+                                fetchCollaboratorState: async () => true,
+                            }}
+                        >
                             {annotationId ? (
                                 <ThreadedAnnotationsV2
                                     isAnnotations

package/src/components/ReplyForm/ReplyForm.tsx

@@ -70,14 +70,7 @@ const ReplyForm = (props: Props): JSX.Element => {
     }, [formRef]); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
-        <Form
-            ref={formRef}
-            className="ba-ReplyForm"
-            data-testid="ba-ReplyForm"
-            onPointerEnterCapture={undefined}
-            onPointerLeaveCapture={undefined}
-            placeholder={undefined}
-        >
+        <Form ref={formRef} className="ba-ReplyForm" data-testid="ba-ReplyForm">
             <div className="ba-Popup-main">
                 <ReplyField
                     className="ba-Popup-field"

package/src/constants.ts

@@ -9,14 +9,13 @@ export const MOUSE_PRIMARY = 1;
 
 /**
  * This is the default location index for video annotations.
- * Documents have locations that represent a page but that doesn't apply to 
+ * Documents have locations that represent a page but that doesn't apply to
  * videos as they have no pages. The annnotations managers take  locations as
- * parameters so we need to provide a default value that indicates that this is a 
+ * parameters so we need to provide a default value that indicates that this is a
  * video annotation.
  */
 export const MEDIA_LOCATION_INDEX = -1;
 
-
 export enum TARGET_TYPE {
     FRAME = 'frame',
     PAGE = 'page',

package/src/document/DocumentAnnotator.ts

@@ -97,13 +97,29 @@ export default class DocumentAnnotator extends BaseAnnotator {
         // Lazily instantiate managers as pages are added or re-rendered
         if (managers.size === 0) {
             if (viewMode === 'boundingBoxes') {
-                managers.add(new BoundingBoxHighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+                managers.add(
+                    new BoundingBoxHighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }),
+                );
                 return managers;
             }
 
             // Annotations mode
-            managers.add(new PopupManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
-            managers.add(new DrawingManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(
+                new PopupManager({
+                    location: pageNumber,
+                    popupPortalEl: this.popupPortalEl,
+                    referenceEl: pageReferenceEl,
+                    resinTags,
+                }),
+            );
+            managers.add(
+                new DrawingManager({
+                    location: pageNumber,
+                    popupPortalEl: this.popupPortalEl,
+                    referenceEl: pageReferenceEl,
+                    resinTags,
+                }),
+            );
 
             const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
 
@@ -118,7 +134,14 @@ export default class DocumentAnnotator extends BaseAnnotator {
                 );
             }
 
-            managers.add(new HighlightManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(
+                new HighlightManager({
+                    location: pageNumber,
+                    popupPortalEl: this.popupPortalEl,
+                    referenceEl: pageReferenceEl,
+                    resinTags,
+                }),
+            );
             managers.add(new RegionManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
 
             const canvasLayerEl = pageEl.querySelector<HTMLElement>('.canvasWrapper');
@@ -220,7 +243,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
                     width: `${origWidth}px`,
                 });
             } else {
-                manager.style({height: '', left: '', top: '', transform: '', width: ''});
+                manager.style({ height: '', left: '', top: '', transform: '', width: '' });
             }
 
             manager.render({

package/src/document/docUtil.ts

@@ -62,5 +62,11 @@ export function getSelection(): Selection | null {
         location = getPageNumber(selection.focusNode as Element) ?? endPage;
     }
 
-    return { containerEl: containerEl as HTMLElement, containerRect: containerEl.getBoundingClientRect(), hasError, location, range };
+    return {
+        containerEl: containerEl as HTMLElement,
+        containerRect: containerEl.getBoundingClientRect(),
+        hasError,
+        location,
+        range,
+    };
 }

package/src/drawing/DrawingAnnotations.tsx

@@ -91,7 +91,7 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         redoDrawingPathGroup();
     };
 
-    const getCurrentLocation = (): number => { 
+    const getCurrentLocation = (): number => {
         if (targetType === TARGET_TYPE.FRAME) {
             return getCurrentVideoLocation();
         }
@@ -121,12 +121,11 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         }
     }, [drawnPathGroups]);
 
-  
     let annotationsToShow: AnnotationDrawing[] = [];
-    // For video annotations, we only show the active annotation and we wait for the video 
+    // For video annotations, we only show the active annotation and we wait for the video
     // to seek to the annotation location before showing it. This prevents annoations from being
     // shown on the incorrect frame while the video is seeking.
-    if (targetType === TARGET_TYPE.FRAME ) {
+    if (targetType === TARGET_TYPE.FRAME) {
         if (!isVideoSeeking && activeAnnotationId) {
             annotationsToShow = annotations.filter(annotation => annotation.id === activeAnnotationId);
         }
@@ -134,9 +133,6 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         annotationsToShow = annotations;
     }
 
-    
-
-
     return (
         <>
             <DrawingList
@@ -179,23 +175,27 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
                 />
             )}
 
-            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && (() => {
-                const toolbar = (
-                    <PopupDrawingToolbar
-                        ref={popupDrawingToolbarRef}
-                        canComment={hasDrawnPathGroups}
-                        canRedo={hasStashedPathGroups}
-                        canUndo={hasDrawnPathGroups}
-                        className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
-                        onDelete={handleDelete}
-                        onRedo={handleRedo}
-                        onReply={handleReply}
-                        onUndo={handleUndo}
-                        reference={drawingSVGGroup}
-                    />
-                );
-                return popupPortalEl ? ReactDOM.createPortal(toolbar, popupPortalEl) : toolbar;
-            })()}
+            {isCreating &&
+                hasPathGroups &&
+                drawingSVGGroup &&
+                canShowPopupToolbar &&
+                (() => {
+                    const toolbar = (
+                        <PopupDrawingToolbar
+                            ref={popupDrawingToolbarRef}
+                            canComment={hasDrawnPathGroups}
+                            canRedo={hasStashedPathGroups}
+                            canUndo={hasDrawnPathGroups}
+                            className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
+                            onDelete={handleDelete}
+                            onRedo={handleRedo}
+                            onReply={handleReply}
+                            onUndo={handleUndo}
+                            reference={drawingSVGGroup}
+                        />
+                    );
+                    return popupPortalEl ? ReactDOM.createPortal(toolbar, popupPortalEl) : toolbar;
+                })()}
         </>
     );
 };

package/src/drawing/DrawingCursor.ts

@@ -1,5 +1,6 @@
 const getDrawingCursor = (color: string): string => {
-    const encodedSvg = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' viewBox='0 0 32 32'>
+    const encodedSvg =
+        encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' viewBox='0 0 32 32'>
     <defs>
       <path id='ba-DrawingCursor-b' d='M23.0868949,12.6610542 L21.7362465,14.0116939 C21.5985448,14.1493947 21.3758783,14.1493947 21.2381766,14.0116939 L17.9860729,10.7596114 C17.8483713,10.6219106 17.8483713,10.3992455 17.9860729,10.2615447 L19.3367214,8.91090502 C19.8845983,8.36303166 20.7752645,8.36303166 21.3260713,8.91090502 L23.0868949,10.6717173 C23.6377017,11.2195906 23.6377017,12.1102511 23.0868949,12.6610542 Z M16.825863,11.4217471 L9.13214756,19.1154126 L8.51102507,22.6751246 C8.4260602,23.1556124 8.8450249,23.5716446 9.32551588,23.4896101 L12.8852509,22.8655618 L20.5789664,15.1718963 C20.7166681,15.0341955 20.7166681,14.8115304 20.5789664,14.6738296 L17.3268627,11.4217471 C17.1862312,11.2840463 16.9635647,11.2840463 16.825863,11.4217471 Z M12.1352162,18.4562067 C11.974076,18.2950675 11.974076,18.0372447 12.1352162,17.8761055 L16.6471438,13.3642072 C16.8082841,13.203068 17.0661085,13.203068 17.2272488,13.3642072 C17.388389,13.5253464 17.388389,13.7831692 17.2272488,13.9443084 L12.7153212,18.4562067 C12.5541809,18.6173459 12.2963565,18.6173459 12.1352162,18.4562067 L12.1352162,18.4562067 Z M11.0775501,20.9201719 L12.4838652,20.9201719 L12.4838652,21.9836908 L10.5941293,22.3147587 L9.6829543,21.4035896 L10.0140243,19.513866 L11.0775501,19.513866 L11.0775501,20.9201719 Z'/>
       <filter id='ba-DrawingCursor-a' width='196.7%' height='196.7%' x='-48.3%' y='-41.7%' filterUnits='objectBoundingBox'>

package/src/drawing/DrawingManager.tsx

@@ -25,6 +25,14 @@ export default class DrawingListManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<DrawingAnnotationsContainer referenceEl={this.referenceEl} targetType={this.targetType} location={this.location} popupPortalEl={this.popupPortalEl} {...props} />);
+        this.root.render(
+            <DrawingAnnotationsContainer
+                referenceEl={this.referenceEl}
+                targetType={this.targetType}
+                location={this.location}
+                popupPortalEl={this.popupPortalEl}
+                {...props}
+            />,
+        );
     }
 }

package/src/highlight/HighlightAnnotations.tsx

@@ -126,30 +126,31 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
             )}
 
             {/* Layer 3a: Annotations promoter to promote selection to staged */}
-            {!isCreating && selection && !selection.hasError && (() => {
-                const popupShape = selection.popupRect || getBoundingRect(selection.rects);
-                const popup = (
-                    <div className="ba-HighlightAnnotations-popup">
-                        <PopupHighlight
-                            onCancel={handleCancel}
-                            onSubmit={handlePromote}
-                            shape={popupShape}
-                        />
-                    </div>
-                );
-                return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
-            })()}
+            {!isCreating &&
+                selection &&
+                !selection.hasError &&
+                (() => {
+                    const popupShape = selection.popupRect || getBoundingRect(selection.rects);
+                    const popup = (
+                        <div className="ba-HighlightAnnotations-popup">
+                            <PopupHighlight onCancel={handleCancel} onSubmit={handlePromote} shape={popupShape} />
+                        </div>
+                    );
+                    return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
+                })()}
 
             {/* Layer 3b: Highlight error popup */}
-            {selection && selection.hasError && (() => {
-                const popupShape = selection.popupRect || getBoundingRect(selection.rects);
-                const popup = (
-                    <div className="ba-HighlightAnnotations-popup">
-                        <PopupHighlightError onCancel={handleCancel} shape={popupShape} />
-                    </div>
-                );
-                return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
-            })()}
+            {selection &&
+                selection.hasError &&
+                (() => {
+                    const popupShape = selection.popupRect || getBoundingRect(selection.rects);
+                    const popup = (
+                        <div className="ba-HighlightAnnotations-popup">
+                            <PopupHighlightError onCancel={handleCancel} shape={popupShape} />
+                        </div>
+                    );
+                    return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
+                })()}
         </>
     );
 };

package/src/highlight/HighlightCreator.scss

@@ -7,6 +7,13 @@ $text_cursor_32_3x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAA
     $offset_x: 10;
     $offset_y: 16;
 
-    cursor: url($text_cursor_32) $offset_x $offset_y, text; /* Legacy */
-    cursor: image-set(url($text_cursor_32) 1x, url($text_cursor_32_2x) 2x, url($text_cursor_32_3x) 3x) $offset_x $offset_y, text; /* Webkit */ /* stylelint-disable-line */
+    cursor:
+        url($text_cursor_32) $offset_x $offset_y,
+        text; /* Legacy */
+
+    /* stylelint-disable unit-no-unknown */
+    cursor:
+        image-set(url($text_cursor_32) 1x, url($text_cursor_32_2x) 2x, url($text_cursor_32_3x) 3x) $offset_x $offset_y,
+        text; /* Webkit */
+    /* stylelint-enable unit-no-unknown */
 }

package/src/media/MediaAnnotator.ts

@@ -27,7 +27,6 @@ export default class MediaAnnotator extends BaseAnnotator {
     }
 
     destroy(): void {
-
         // If the store handler is present, unsubscribe from the store.
         if (this.storeHandler) {
             this.storeHandler();
@@ -44,12 +43,40 @@ export default class MediaAnnotator extends BaseAnnotator {
         return this.containerEl?.querySelector(VIDEO_PARENT_SELECTOR);
     }
 
-
-    addManagers(referenceEl: HTMLVideoElement, resinTags: { fileid: string|null; iscurrent: boolean }): void {
-        this.managers.add(new PopupManager({ location: MEDIA_LOCATION_INDEX, popupPortalEl: this.popupPortalEl, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
-        this.managers.add(new DrawingManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
-        this.managers.add(new RegionManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
-        this.managers.add(new RegionCreationManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
+    addManagers(referenceEl: HTMLVideoElement, resinTags: { fileid: string | null; iscurrent: boolean }): void {
+        this.managers.add(
+            new PopupManager({
+                location: MEDIA_LOCATION_INDEX,
+                popupPortalEl: this.popupPortalEl,
+                referenceEl,
+                resinTags,
+                targetType: TARGET_TYPE.FRAME,
+            }),
+        );
+        this.managers.add(
+            new DrawingManager({
+                location: MEDIA_LOCATION_INDEX,
+                referenceEl,
+                resinTags,
+                targetType: TARGET_TYPE.FRAME,
+            }),
+        );
+        this.managers.add(
+            new RegionManager({
+                location: MEDIA_LOCATION_INDEX,
+                referenceEl,
+                resinTags,
+                targetType: TARGET_TYPE.FRAME,
+            }),
+        );
+        this.managers.add(
+            new RegionCreationManager({
+                location: MEDIA_LOCATION_INDEX,
+                referenceEl,
+                resinTags,
+                targetType: TARGET_TYPE.FRAME,
+            }),
+        );
     }
 
     getManagers(parentEl: HTMLElement, referenceEl: HTMLVideoElement): Set<Manager> {
@@ -70,8 +97,6 @@ export default class MediaAnnotator extends BaseAnnotator {
         return this.managers;
     }
 
-  
-
     // returns the actual video element
     getReference(): HTMLVideoElement | null | undefined {
         return this.annotatedEl?.querySelector('video');
@@ -117,12 +142,11 @@ export default class MediaAnnotator extends BaseAnnotator {
         this.postRender();
     }
 
-    // This function gets called by the client. We are using the name scrollToAnnotation to match 
+    // This function gets called by the client. We are using the name scrollToAnnotation to match
     // the other annotators as the client calls this function when it wants to show an annoation on the
-    // preview. The only difference is that we are using the video element's currentTime to scroll to the 
+    // preview. The only difference is that we are using the video element's currentTime to scroll to the
     // annotation instead of the scrollLeft and scrollTop of the parent element.
-    scrollToAnnotation(annotationId: string | null | undefined, defaultLocation: number = -1 ): void {
-        
+    scrollToAnnotation(annotationId: string | null | undefined, defaultLocation: number = -1): void {
         if (!annotationId) {
             return;
         }
@@ -130,13 +154,11 @@ export default class MediaAnnotator extends BaseAnnotator {
         const annotationLocation = annotation?.target?.location?.value ?? defaultLocation;
         const video = this.getReference();
 
-        if ( !video || !this.annotatedEl || annotationLocation === -1 ) {
+        if (!video || !this.annotatedEl || annotationLocation === -1) {
             return;
         }
 
         video.pause();
         video.currentTime = annotationLocation / 1000;
-        
     }
 }
-

package/src/popup/PopupLayer.tsx

@@ -140,11 +140,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
     if (showCreator && isThreadedAnnotation) {
         return (
             <div className="ba-PopupLayer-popup">
-                <PopupV2
-                    onSubmit={handleSubmit}
-                    popupPortalEl={popupPortalEl}
-                    reference={reference}
-                />
+                <PopupV2 onSubmit={handleSubmit} popupPortalEl={popupPortalEl} reference={reference} />
             </div>
         );
     }

package/src/region/RegionAnnotations.tsx

@@ -26,8 +26,8 @@ const RegionAnnotations = (props: Props): JSX.Element => {
         setActiveAnnotationId(annotationId);
     };
 
-    let annotationsToShow: AnnotationRegion[] = []
-  
+    let annotationsToShow: AnnotationRegion[] = [];
+
     if (targetType === TARGET_TYPE.FRAME) {
         if (!isVideoSeeking && activeAnnotationId) {
             annotationsToShow = annotations.filter(annotation => annotation.id === activeAnnotationId);
@@ -35,7 +35,6 @@ const RegionAnnotations = (props: Props): JSX.Element => {
     } else {
         annotationsToShow = annotations;
     }
-    
 
     return (
         <RegionList

package/src/region/RegionCreation.tsx

@@ -56,7 +56,10 @@ export default class RegionCreation extends React.PureComponent<Props, State> {
 
     handleStop = (shape: Rect): void => {
         const { location, setStaged, setStatus, targetType, referenceEl } = this.props;
-        const annotationLocation = targetType !== TARGET_TYPE.FRAME ? location : getVideoCurrentTimeInMilliseconds(referenceEl as HTMLVideoElement);
+        const annotationLocation =
+            targetType !== TARGET_TYPE.FRAME
+                ? location
+                : getVideoCurrentTimeInMilliseconds(referenceEl as HTMLVideoElement);
 
         setStaged({ location: annotationLocation, shape });
         setStatus(CreatorStatus.staged);

package/src/region/RegionCreationManager.tsx

@@ -14,6 +14,13 @@ export default class RegionManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<RegionCreationContainer targetType={this.targetType} referenceEl={this.referenceEl} location={this.location} {...props} />);
+        this.root.render(
+            <RegionCreationContainer
+                targetType={this.targetType}
+                referenceEl={this.referenceEl}
+                location={this.location}
+                {...props}
+            />,
+        );
     }
 }

package/src/region/RegionCreator.scss

@@ -1,7 +1,6 @@
 $region_cursor_32: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAA8UlEQVRYCe1Vyw6DIBBcafkPDxjb9P8/pQcTD/4HkZZpe1qeEQyHsgeTXZbZcRiUqEdXoLECQ835LxsxvMEGX7/yQmmuxtELsW6bt16dAKbwYSFS6BV4nBGQG5HCPkzAHveOM7exp4bE1g8TAOh9moLYX25xU2LzKR6InTlnXJ0ANyAfyPOqBHJMxwkUeYCDHcmTCsBMCWAR6slRJHlPAf6YZzLGODy01iSldOpCCHouC+UQcDbzAgiE4qZUaOlT51i+PHkEobewE/ABgoeM7bn4wHNqzU3YCTRXIMcn3h6Y8HcFiv6GXvBe7Ap0Bf5KgTeoYIC/a04wgAAAAABJRU5ErkJggg==';
 $region_cursor_32_2x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABlmWCKAAABWUlEQVR4Ae2YOxKDIBCGNaM5R4pYWOT+B0lhYQrPEZ1JGGcoZIy6Lj4IH40DLAt8+8srSUgQgAAEIAABCEAAAnESSM867Y9JmrGlJi1pf1li9M822dknd7/dREN8NY3IHgWIcB1oPBdZqVLsVFCAJRHK113dtbsFCtg78iZib9Nn7vTbmshenbJdsihgF8wjnZRF0ZdWdT1S+7tI+8+7nlGAS+Ss+bX7/Nx8UMAcoaPr506A2vGhAC3Brdq7J76t+oleAQDYSlqh+FW/CHk6meVSP77WiOh/gUUvp1NytpF7lGXSdd2U6aCubds+n+fuxXBgNshkWZY8q6ovQwEDNOsz3hQgHcLa26DtBwVYEsqveheQRsKsGbwIKYPmtXn02yAAvOopQGcoIMCgeR0yCvCKM0Bn0StAfReQBp2ToJQY9hCAAAQgAAEIQAACEIAABCAAAQhAwDOBLxaXQ2IYNsXoAAAAAElFTkSuQmCC';
 $region_cursor_32_3x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAYKADAAQAAAABAAAAYAAAAACK+310AAACaUlEQVR4Ae3bwUrDQBDG8VTE+Bg9CD0IBd//IYSCh4KHPobxopuDYQgGOtNvdhvy39O2zc5uf9Odpol2HQ0BBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAgXSBXfoMdzDBT2mZy9iVFo3/EB3IOI0ACdA4hqM8hkeudODLfi9Z+eflIonDDpAwxoOQgLidZOTmSpBV85YRVfmya2AHWI0GfRLQAN1OuekSZCGWfkxl/4hjB9gsNOiTgAbodsrVlKBSCr7Kwnu7+Fl/KGXkefbc3T9kBzROEQlonIDVlCDr9Ho4dMMwdH3fdx/ns30p3M8+21laGDtgSabS8ySgEvTSNKssQUtvxvt8xrUd7xrYAV4x8fEkQAzqDbe5EuS9BO0F9R7PDvCKiY8nAWJQb7hNlKClS81erIzj2QEZqo6YJMCBlXEoCchQdcQkAQ6sjENJQIaqI2b6WVDFy7y9aq6aZ03sAMenNeNQEpCh6ogZ/seCa+ewZeHteOy+y52sW9t4N+yvjXfFbm1PJcb76TSFqVmC0r8DpndVOiO+xbOvRfvqeNF1RMdVTcD4SVM0i67aAYp1RWJULUGRBf43JuOmvJ2nZgniS9jKN+iTgAbodsr07wDVdi5nU/xpos0cfY0AJUjjGI5CAsJ0moEkQOMYjkICwnSagSRA4xiOQgLCdJqBJEDjGI5CAsJ0moEkQOMYjkICwnSagSRA4xiOQgLCdJqBJEDjGI6SfkcsvLLZQC5Hz0B4qBGgBGkciYIAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIITAK/BlNVeN572e8AAAAASUVORK5CYII=';
-
 $region_cursor_new: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAFEUlEQVRYCcVXeUyjVRD/erCl5SjtrpblWHbxADlTD0TDESIak0UJUYyE/zAhGo7gP+oaMDEhIRFNiCRG4A8NmGACwYsAG0lIIBSMCBSCrRDCXbkRiq2bbvv5m9qv2+srn3UTJ5nO++bNmzdv5r2ZKcMEgp6entfAF9Gc2EMglsZOLg1OTk7Gj4+PP6KxP+Tn57O+3CfBkHsyL29sbHzqyWBmZ2eLwfDc1TnvZiwtLanBsRcWFpJ+tzVOKdePDDSqu7v7g8nJyS8wDvec5Ma0MjYrK+tx0Ac5piAqMhgMLwWTJGNZvV7PK+QUIKG5ubmbgTSJDw4OHJi4CtQA3cfkBkSlLS0tWzab7f3s7Oy60tJSLXhuz5FzbAqF4g48OpCamsrrrCgIqvf39xdAJcCAQNtxWwcUCMYU9/b2vpqXl0cueTkURWLXhaQzsAUFBez8/HxJMEXu2+Jr1vb2NtPR0aELDw9/D+PbbW1t5F4/8FMgk8n+hFRGQkKCIikpyYqbpRoaGkpUqVSjeAifYM5vjZ9WF+NKc3PzQUNDwzP4jgBeHx0dvQVK11YQKPr6+t5dX1//rbW19XWEbnl8fHzh8PBwGqsFK/HciR6lCij4CJ6LBY//0yWiXS45HA4LUcFb+ghGTE9Ps6enp1ahSgI6RKlUhp+dnf0hRElABWRVdHS0XIgSXgVClQRUkJKSwqysrMwik+n29vZ+Pjo6+hIKA8rSRp4QgYfD9vf3t4F5HUhVgfIUXSDeBII5NyhGRkbewZemvLxcqdPppjs7Ow2Ey8vLP4Hvd4V9Mw/tEga8u7u7+9XOzk764OBgm91uFyOd1+Non2VmZn6OecoXQUG6ubn5rdFopNwXA1ROTEw0g8YBvTblcwxrsViOV1dXHXDi26DFcrn8xbW1tVookAIvBFKchMVGPN9FPOVfhoeHF0CNjY2NKZjzsoJPG/mCStgDwKsIpUGtVqdj7FVr8S0IyCIKZcCiKUjD/yFEfpKYTKYncPwXMCbn8wUtZPuCKSQDZDMzMwkoyLeRYswodlSjKFcJCqIQq4IZQOtF2FiGwsBQiqqtrf0O36f305CLDPA6BB6T05C6urrvKdXdD0P+lQGcNSiPznxbX1/vNATtA3VdIYVG0KvmNiaKboEpKipys2CEHM3rD8hXFjSz5chZP2LyLvDCfOVWwjMg70RQs0R1LiMjg0WCdAwMDFAyfA6YB3zWhU+DZgOvASOBglI35C7Oa2KxmM3JyXE0NTV9HBsb+zXW/A40azQaBoaVREZGpotEIimqOUOyEonESn8mkpOTpyBnB1LvywvBnhPNUVypr6IM9heQWgYGSfktZPpKtMPX0EKapNJ7kTSbzezY2Nhj1dXVS0jibxYXF89hCRkSUkjICEIKB1FyrXpra+sbavxQchcrKyspST0CvAF8VKvVFiBUehSBhaqqKgoL5W7ey37PdEgFAM5qjjqNYFmWKAPXs/Hx8dS+mIB3gNKampoYq9XqQF8siYmJof6IQsCtx9AbnIq8WUG/yANR7e3tz5eUlHzY1dX1EGJuKysr+zUuLm4ROSoLueESPKQKCwuz486c5ebm2s7Pz2+lpaWNYW3IoeCsIoOpTFKVfxj4VGJiYj6oFphGFPX2jampKf0ioKKi4hUX/zIorfM7sB8DQkKA1nH3gsaciymkSpz8Ck7tAB7i+wxoc8lwcvj8B0I1gFvvS0kfZxzNcfH325hb+Dfx/eE8ndH+AwAAAABJRU5ErkJggg==';
 $region_cursor_new_2x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAAHdbkFIAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABlmWCKAAAN4klEQVR4Ae2beXDVRRLHX8hNQoIhIJeQkBCIcoO16lZQFIVd1+KwgKUQa8sDtCyQclcQa0FAFLkWEUSO1WIVKREVtNg/QCnLCwEhciWQgBxLsoabcORO3n6+P9+k3nu8OwdYa1f1m/nN9Mz09PT09PTv92y2ICAe2jB3+iZOBcktWrSo8URkaFLI2Fu2bGl3JnLuUgSdwHzwPFgCukAMT9H79u374uOPP15BPs6l1vEQn5eX90/ybcEElTkPYZ5THZWXSI+qMDB477330v1R2hcuXJjhi0jzt8+ZM8dzT59++qkIOoKagUeIgY+cTz75ZOnkyZNFbIHzWpTV1NSEDx8+/K8pKSlHqHUXgdUgkd92+/fvzyGNtEo8/Hhs6YHOKnJmwdDckpSUZF+6dKlEElRnpoMUMpbIkpOT7fPmzescbEdWB2+88YbdGVasWNGBjq4BTyy2h0qYg+r1Jp139erVMMCemZm5KzExcQJltctA3ivEL1u27KcFCxaMgULSTx0yZMgwUu2tWvAkRFNZGR4eviQjI2Pq9u3bZxw9evTfd91117JTp05lQ9DUEAWTqpHULCKYRiHRehJswB2Fa+mg9qqm7j25C9GaH31UBNqJewfWAKy5LdBOPHagXgLtxGsHgXbitQPJ8hd5ore/yCTcmp/bj0elqKqqqmQK2gcynlqVMrd2Xh+jKysr1SgVjGbkatTYgoqKilOURbm3dFcasRkLlq5du/buwsLCNZ06ddqgRr17936gefPmeRibh3is3Y3uU6im8goYxog3JyQklDz88MOzeS4H14A6dlzAqxBPnjxZXFJSEvXdd991p0Up09n24Ycf9iLvUZguvToebkEeJXv27NmHua46fPhw3pEjRw6RTqfefeqe2lv7oR01KWAHOLCPHj16KPnmYEAdQFcLmurNoCzTrws01Yi9e/fKSEv4QU+9rtOV4raW/AWOw062qtEYiWawFA1OateJK3A4Io3CiAsDYkKIR2gx4ji1G5QRjwwYRuQ6CBxeV4Mw4pMBw4jc31AZcbdl9Okd3n33XdsjjzxS3aRJk+FQyUTLObedOXOmBvNdSlb7XZ7HZbAK9Av+tFkSaMPsjnFGlEVGRg7muQA8C+rgVXvn7SkdEVMaXKh8reUmfw34Y0DrKpdfqAGLQVn2ptXV1YVTp06Nw30qh7FKyiyA2bDy8vK4MWPG7CoqKnp20KBBP1BRW+8gq038MaB6Q2NmEstZ9aeLFy/OYSlsx48fX/jaa6/tcgyiJYiDia/khiO1TX369HmVMh1R1nKRuoA/HbC2nVMLMRPODK12MFDToUOHM5QdBK+qDpS0bDExMZUwupGsZm+YV5ULmNm5FPp4EL1O7PYwsXvatGnxHLpnu3btejIrK2t7q1atxhUUFORyDEauX78+cdSoUReoD2O53mGnLKad9MKFmWAZoL01S2m6TrdWXbp0SWKtrxQXF0vMkkAzlmAzZvsEu+PNWbNmfUvZf0FJSjvFhQGeQwJrKWips0IXWaHykk4bsPeIESMeJE0Dm4FaMo+T9VgIcaig/qSIZmvKRxLWy6zp5/8U6nuZXMSo9fIGGji8tLR0NKmUyBettz78lvvrNIL93oN9reCCzgV/9H4HdCfw1aEkEMX+jsXeZ8DIXp613Xy1ce/f77O/zrQEUTNnzrTl5uZ2hokf65sJfwzIjFo0XI7EhCRRr0z4Y0CXy9pdICYOHjwoJrLrSxJ+GXBfxF69etkOHTrUBSZ21wcTQTMghnr27CkmutYHEyExYJggUCom5IyEvDtCZkBM9OjRw5afn58JE3K7QmKiTgyIie7du4uJW2FiZyhMWK6VOgoEFPzhsu+N9DbCEjuioqL6QuDTDXPuIGAGsIY2nEzbqlWrFo0bN+4Lt0E0oKIzp0H5Al69YOpcICAGoqOjrcGXLFkya+LEiZvo4QIo99zZ0ZC/J5dLDki9gPTjppycnBUYI93/pvCs4JV8QUU/5X7JN5TLZe4Oela57hNqX2vEyHsEfxKoYU2rGHzciy++uIMeikCJOozl2M9BVU7QR9ewWsAzDk9NTe07bNiwpI0bN6rO5+3IF4eaQSyQxIGkdVVnVgyMgVe/9dZb/c+fP98G/19ltVBWViYp2LisVHFvUEBJy+JVc31JQOtbweDnSQW6mqkj3QVGMbht7ty5to8++miNLigi0LkxePDgEbjiyZcuXSqkKA6UroTMgBTLKJUYkiTkmNQC7vdaHvTSSYNEffDBB8WPPfbYMAL8XfQM1tnW0EctSLl0W7brJY6A53SwBShxtwZ7jB079s+ktzue1cYrhMKdu95o9tIPKeelLVu23PbMM8/8Dd5kGc2ykfUMoTDgvPdt33zzzaD09HSdA5ppFBHdlM2bN6c5htNyqVzjuDNukfhSQovA7UeDV//8889fNm3atO+UKVMSWrduPYOzYBVK+S+8p9+htNqikceOHTtEwHdz+/btu2PCZTfcDZfVdSgMlLdt2/ZZtttXvM/Jw0OqYoBw4gXxbMkImWvAuHKmfzEg83zNbjAEahQIqAPFhs4x2EDS5nfeeWcCMfHT5DVA03Xr1g3n3PgLy5IBY/dTdgr0CsEyoCXQQDoLlJ7//vvvtb5mdnEsxU8DBgw4QZni7GJM13KzTcnWD2hQMS8lkwIq1Z5PBDs/9dRTw0h7gjo3VOdVCT1qJg1CAfUlpmSKzZpre/q0hPXJAGNZW03WUih9MeiydSn/DX6TgEMCdVFB09akRqhG3Uxqym/IVNYhFNCkhdr0kZw+sziFcrdu3XoLz7JG2oNeLQ91v3rQ5HTGy9olcTQvtFwjfrgZ5a1cuTLDUefTD4DmVwsSgM4XnTvtuRa8KQHo65Xs7GxLFtxT8x2vGCWkG1YQoW4B5mSB2kew6pZHce7cORvvRmy8UbTiabileQjiRwSRCp0ObNGpjbvdoOj6QF0FYHHNkrtMSNclhdJ4o2mF0xyCyOZd7w0niHoRgLe1k0YonOcQRJfnnntOGnFDCaJBBWAEYwTBCzMrtukQxG5euqdAc123RqMIwAji7NmzVmxVglBo8/nnn89HI3ZdT0E0qgCcBaHQqkMQmUYQBKA6NrZGXBcBuAuCaJoVZ37hhRcOoxE/NKYgrOPLMNRQ6UsvvWS79957fXavk+PAgQO2bt263SpBYCdy8CseQjuKaGgu3HKv69XFbjAB6HuK5cuX25588klFDGs2bdq0jg/oCghT2IXO0tAzYYyaiIiIqt27d1fExcWVEV0qQWh3f/3117n9+/ff5xCCSzvnPkLN17sAmITt/ffft40cOVIvE6oQwoKnn376SxhUjFZxOkWNdE93n4yehYqEasUV+zFI9sZxnsSMbIdc4ZvAFFR3pfxfLkVK7ETGynB6plF3D9gH7Ay2A5NBtZELLVQ0Vagyg3pWncL+ii3rmJQr7XzBcnG8qGt0MAIQsx0JDS7XxHmpfnX27NmTKMsCe4GdwFagJqOJSGgxjz/+eBIR/umEFrdyizyNppQ7of4i4III9Cc+bF9NrHOwox8jEAmiTsKoyxYw6irmixYvXjxy0qRJ+TAkNZe66zMmpVJn0YYvWrSo7YQJE77F0le9/fbbFXxhlEZ5INAJm9Jx6NChmci5HwbzH9w3ZtJQY2nLeNpSgfQbsvQkdamkBKjVMCuiiWqPa9JCMSbaqPj4+DiCx4d443UUG9GXMhsTOnDHHXdkYgTVl1e4cuXKOf4XUXb69Ol2fCVX+vLLL0civHl8MzafRrITZiyNHxRIlUMFY6y0yop+XgSLHXnnlZeQYlavXp2Fpb9p27Zt2jY2vhA/SlC7G8fdZATwIDgIvB8c6MAHSP8APsRk940fP16v/rTNYi9cuFDQrFmze3iu81U71C1gJC0huO9BU6dyCVgYyX63xkKFLXomZtGhyheoLwSN0NSnQFohzYrlDy1/37Fjxzjsy3DaRXCcbu/Xr9+r1LmPTVFwEKoAnEcxE3Yuc85LAGGsnIuaGwHovKdebyH1qlMxdCMAtVN4LZa31Amoe0vUX8ZUfkQxRlE2xtCLB398QHItaJDrCg5BiHnZC01eNsQZq3fu3DmEt2B/5NXrRfyKI3wtOf6zzz7rDZ3zpKUNQWtEYwjAstDs4T0ceSVcgrRyNtQ4jdd6uQRL1rEtToIXiSxtnz9/focnnngimX0+F79iKwu9hX9XTVQbIIwTx9KkgQMHzuW/Hp9Ds4VTYTL9ykZIo1UfsCACJqTTYEF9GzWWsUp89NFHu3D8rYfhc3zxEceL9BbOnU6fPr0AW3GYd5/tODEqX3/99duc673l+aStEOFmc9KMhUangjdv01sXDVYuAciQyaOTQ5QO9r3vvvuG8ueQjUzyOCtfA9qZQBnfYG3EumelpaUN4J99a4gfHADzLl++XCSaGTNmFPO1itrYafsfAi2HwB+BRXy5oL5bghpLmtCQi0v3gYHRAsua00RHYFswDdTqyk2+HewHak/rleqtYKYjr/KsDRs2LDACIMB6TPlXXnnlWep+D/YENfnWYCIobzOobQB9g4MRhFZGDGqV9HmP/H9tA6HymoDKhUlgGzAd69/nxIkTn2viQA1/0XqH8h5gKijNEr1sgAQd1OSvh5qYMZWaPFkLnK262T4SmGyIcXpEIxdYx6d8Bx2FxhMk63Iy6NknuDPgk7iRK8WbhCCU5giVF+i4NEemThnrpFFFsHAjC0BzMfy5p9ICZ21xzgclg/8BctbpBcEyMGQAAAAASUVORK5CYII=';
 $region_cursor_new_3x: 'data:image/png;base64,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';
@@ -10,8 +9,15 @@ $region_cursor_new_3x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCA
     $offset_x: 9;
     $offset_y: 4;
 
-    cursor: url($region_cursor_new) $offset_x $offset_y, auto; /* Legacy */
-    cursor: image-set(url($region_cursor_new) 1x, url($region_cursor_new_2x) 2x, url($region_cursor_new_3x) 3x) $offset_x $offset_y, auto; /* Webkit */ /* stylelint-disable-line */
+    cursor:
+        url($region_cursor_new) $offset_x $offset_y,
+        auto; /* Legacy */
+
+    /* stylelint-disable unit-no-unknown */
+    cursor:
+        image-set(url($region_cursor_new) 1x, url($region_cursor_new_2x) 2x, url($region_cursor_new_3x) 3x) $offset_x $offset_y,
+        auto; /* Webkit */
+    /* stylelint-enable unit-no-unknown */
 }
 
 .ba-RegionCreator-rect {

package/src/region/RegionManager.tsx

@@ -14,6 +14,13 @@ export default class RegionListManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<RegionAnnotationsContainer location={this.location} referenceEl={this.referenceEl} targetType={this.targetType} {...props} />);
+        this.root.render(
+            <RegionAnnotationsContainer
+                location={this.location}
+                referenceEl={this.referenceEl}
+                targetType={this.targetType}
+                {...props}
+            />,
+        );
     }
 }