box-annotations 5.1.0 → 5.2.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.1.0",
+    "version": "5.2.1-beta.0",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/@types/model.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-use-before-define */
 import { Permissions } from './api';
+import { TARGET_TYPE } from '../constants';
 
 // New Data Model Types
 export interface Annotation {
@@ -37,10 +38,17 @@ export type Dimensions = {
 };
 
 export interface Page {
-    type: 'page';
+    type: TARGET_TYPE.PAGE;
     value: number;
 }
 
+export interface Frame {
+    type: TARGET_TYPE.FRAME;
+    value: number;
+}
+
+export type Location = Page | Frame;
+
 export interface Path {
     clientId?: string;
     points: Array<Position>;
@@ -93,7 +101,7 @@ export interface Stroke {
 export type Target = TargetDrawing | TargetHighlight | TargetPoint | TargetRegion;
 
 export interface TargetDrawing {
-    location: Page;
+    location: Location;
     path_groups: Array<PathGroup>;
     type: 'drawing';
 }
@@ -106,12 +114,12 @@ export interface TargetHighlight {
 }
 
 export interface TargetPoint extends Position {
-    location: Page;
+    location: Location;
     type: 'point';
 }
 
 export interface TargetRegion {
-    location: Page;
+    location: Location;
     shape: Rect;
     type: 'region';
 }

package/src/BoxAnnotations.ts

@@ -4,6 +4,7 @@ import BaseAnnotator from './common/BaseAnnotator';
 import ImageAnnotator from './image/ImageAnnotator';
 import DocumentAnnotator from './document/DocumentAnnotator';
 import { IntlOptions, Permissions, PERMISSIONS, Type } from './@types';
+import MediaAnnotator from './media/MediaAnnotator';
 
 type Annotator = {
     CONSTRUCTOR: typeof BaseAnnotator;
@@ -60,6 +61,12 @@ const ANNOTATORS: Annotator[] = [
         TYPES: [Type.region],
         VIEWERS: ['Image'],
     },
+    {
+        CONSTRUCTOR: MediaAnnotator,
+        NAME: 'Media',
+        TYPES: [Type.region],
+        VIEWERS: ['Dash','MP4'],
+    },
 ];
 
 class BoxAnnotations {

package/src/common/BaseManager.ts

@@ -2,13 +2,15 @@ import * as ReactDOM from 'react-dom/client';
 import { IntlShape } from 'react-intl';
 import { Store } from 'redux';
 import { applyResinTags } from '../utils/resin';
+import { TARGET_TYPE } from '../constants';
 
 export type ResinTags = Record<string, unknown>;
 
 export type Options = {
     location?: number;
     referenceEl: HTMLElement;
-    resinTags?: ResinTags;
+    resinTags?: Record<string, unknown>;
+    targetType?: TARGET_TYPE;
 };
 
 export type Props = {
@@ -30,13 +32,19 @@ export default class BaseManager implements Manager {
 
     root: ReactDOM.Root | null = null;
 
-    constructor({ location = 1, referenceEl, resinTags = {} }: Options) {
+    targetType: TARGET_TYPE;
+
+    referenceEl: HTMLElement;
+
+    constructor({ location = 1, referenceEl, resinTags = {}, targetType = TARGET_TYPE.PAGE }: Options) {
         this.location = location;
         this.reactEl = this.insert(referenceEl, {
             ...resinTags,
             feature: 'annotations',
         });
 
+        this.referenceEl = referenceEl;
+        this.targetType = targetType;
         this.root = ReactDOM.createRoot(this.reactEl);
 
         this.decorate();

package/src/components/Popups/PopupDrawingToolbar.scss

@@ -27,6 +27,7 @@
     }
 }
 
+// Legacy styles (default)
 .ba-PopupDrawingToolbar {
     background-color: $bdl-gray;
     border-radius: $bdl-border-radius-size;
@@ -44,6 +45,19 @@
     }
 }
 
+// Modernized styles (when feature flag is enabled)
+.ba-PopupDrawingToolbar--modernized {
+    background-color: transparent;
+    border-radius: 46px;
+
+    .ba-Popup-content {
+        gap: 4px;
+        padding: 8px;
+        background-color: rgba(0, 0, 0, .8);
+        border-radius: 46px;
+    }
+}
+
 .ba-PopupDrawingToolbar-group {
     position: relative;
     display: flex;
@@ -53,6 +67,15 @@
     & + & {
         border-left: 1px solid #000;
     }
+
+    .ba-PopupDrawingToolbar--modernized & {
+        gap: 4px;
+    }
+}
+
+// Modernized border-left for adjacent groups
+.ba-PopupDrawingToolbar--modernized .ba-PopupDrawingToolbar-group + .ba-PopupDrawingToolbar-group {
+    border-left: 1px solid rgb(255, 255, 255, 8%);
 }
 
 .ba-PopupDrawingToolbar-delete,
@@ -65,6 +88,7 @@
     }
 }
 
+// Legacy comment button styles
 .ba-PopupDrawingToolbar-comment {
     @include ba-PopupDrawingToolbarButton($width: max-content);
     @include common-typography;
@@ -74,3 +98,10 @@
     color: $white;
     font-weight: bold;
 }
+
+// Modernized comment button styles
+.ba-PopupDrawingToolbar--modernized .ba-PopupDrawingToolbar-comment {
+    padding-right: 8px;
+    padding-left: 12px;
+    font-size: 15px;
+}

package/src/components/Popups/PopupDrawingToolbar.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import { FormattedMessage, useIntl } from 'react-intl';
+// Legacy icons (box-ui-elements)
 import IconRedo from 'box-ui-elements/es/icon/line/Redo16';
 import IconTrash from 'box-ui-elements/es/icon/line/Trash16';
 import IconUndo from 'box-ui-elements/es/icon/line/Undo16';
+// Modernized icons
+import ArrowBack from '../../icons/ArrowBack';
+import ArrowForward from '../../icons/ArrowForward';
+import Trash from '../../icons/Trash';
 import messages from './messages';
 import PopupBase from './PopupBase';
 import { Options, PopupReference, Rect } from './Popper';
 import './PopupDrawingToolbar.scss';
+import { isFeatureEnabled } from '../../store/options/selectors';
+import { AppState } from '../../store/types';
 
 export type PopupBaseRef = PopupBase;
 
@@ -48,14 +56,20 @@ const options: Partial<Options> = {
     placement: 'top',
 };
 
+const ICON_SIZE = 20;
+
 const PopupDrawingToolbar = (props: Props, ref: React.Ref<PopupBaseRef>): JSX.Element => {
     const { canComment, canRedo, canUndo, className, onDelete, onRedo, onReply, onUndo, reference } = props;
+    const isModernizationEnabled = useSelector((state: AppState) => isFeatureEnabled(state, 'modernization'));
+
     const intl = useIntl();
 
     return (
         <PopupBase
             ref={ref}
-            className={classNames(className, 'ba-PopupDrawingToolbar')}
+            className={classNames(className, 'ba-PopupDrawingToolbar', {
+                'ba-PopupDrawingToolbar--modernized': isModernizationEnabled,
+            })}
             data-resin-component="popupDrawingToolbar"
             options={options}
             reference={reference}
@@ -69,7 +83,7 @@ const PopupDrawingToolbar = (props: Props, ref: React.Ref<PopupBaseRef>): JSX.El
                     title={intl.formatMessage(messages.drawingButtonUndo)}
                     type="button"
                 >
-                    <IconUndo />
+                    {isModernizationEnabled ? <ArrowBack height={ICON_SIZE} width={ICON_SIZE} /> : <IconUndo />}
                 </button>
                 <button
                     className="ba-PopupDrawingToolbar-redo"
@@ -79,7 +93,7 @@ const PopupDrawingToolbar = (props: Props, ref: React.Ref<PopupBaseRef>): JSX.El
                     title={intl.formatMessage(messages.drawingButtonRedo)}
                     type="button"
                 >
-                    <IconRedo />
+                    {isModernizationEnabled ? <ArrowForward height={ICON_SIZE} width={ICON_SIZE} /> : <IconRedo />}
                 </button>
                 <button
                     className="ba-PopupDrawingToolbar-delete"
@@ -88,7 +102,7 @@ const PopupDrawingToolbar = (props: Props, ref: React.Ref<PopupBaseRef>): JSX.El
                     title={intl.formatMessage(messages.drawingButtonDelete)}
                     type="button"
                 >
-                    <IconTrash />
+                    {isModernizationEnabled ? <Trash height={ICON_SIZE} width={ICON_SIZE} /> : <IconTrash />}
                 </button>
             </div>
             <div className="ba-PopupDrawingToolbar-group">

package/src/constants.ts

@@ -0,0 +1,23 @@
+export const ANNOTATOR_EVENT = {
+    fetch: 'annotationsfetched',
+    error: 'annotationerror',
+    scale: 'scaleannotations',
+    setVisibility: 'annotationsetvisibility',
+};
+
+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 
+ * 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 
+ * video annotation.
+ */
+export const MEDIA_LOCATION_INDEX = -1;
+
+
+export enum TARGET_TYPE {
+    FRAME = 'frame',
+    PAGE = 'page',
+}

package/src/drawing/DrawingAnnotations.tsx

@@ -10,6 +10,8 @@ import PopupDrawingToolbar, { PopupBaseRef } from '../components/Popups/PopupDra
 import { AnnotationDrawing, PathGroup } from '../@types';
 import { CreatorItemDrawing, CreatorStatus } from '../store';
 import './DrawingAnnotations.scss';
+import { TARGET_TYPE } from '../constants';
+import useVideoTiming from '../utils/useVideoTiming';
 
 export type Props = {
     activeAnnotationId: string | null;
@@ -29,6 +31,8 @@ export type Props = {
     setupDrawing: (location: number) => void;
     stashedPathGroups: Array<PathGroup>;
     undoDrawingPathGroup: () => void;
+    targetType: TARGET_TYPE;
+    referenceEl?: HTMLElement;
 };
 
 const DrawingAnnotations = (props: Props): JSX.Element => {
@@ -50,6 +54,8 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         setupDrawing,
         stashedPathGroups,
         undoDrawingPathGroup,
+        targetType,
+        referenceEl,
     } = props;
     const [isDrawing, setIsDrawing] = React.useState<boolean>(false);
     const [stagedRootEl, setStagedRootEl] = React.useState<DrawingSVGRef | null>(null);
@@ -60,6 +66,13 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
     const stagedGroupRef = React.useRef<SVGGElement>(null);
     const { current: drawingSVGGroup } = stagedGroupRef;
 
+    const { isVideoSeeking, getCurrentVideoLocation } = useVideoTiming({
+        targetType,
+        referenceEl,
+        activeAnnotationId,
+        annotations,
+    });
+
     const handleAnnotationActive = (annotationId: string | null): void => {
         setActiveAnnotationId(annotationId);
     };
@@ -72,8 +85,16 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
     const handleRedo = (): void => {
         redoDrawingPathGroup();
     };
+
+    const getCurrentLocation = (): number => { 
+        if (targetType === TARGET_TYPE.FRAME) {
+            return getCurrentVideoLocation();
+        }
+        return location;
+    };
     const handleReply = (): void => {
-        setStaged({ location, pathGroups: drawnPathGroups });
+        const annotationLocation = getCurrentLocation();
+        setStaged({ location: annotationLocation, pathGroups: drawnPathGroups });
         setStatus(CreatorStatus.staged);
     };
     const handleStart = (): void => {
@@ -95,11 +116,27 @@ 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 
+    // 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 (!isVideoSeeking && activeAnnotationId) {
+            annotationsToShow = annotations.filter(annotation => annotation.id === activeAnnotationId);
+        }
+    } else {
+        annotationsToShow = annotations;
+    }
+
+    
+
+
     return (
         <>
             <DrawingList
                 activeId={activeAnnotationId}
-                annotations={annotations}
+                annotations={annotationsToShow}
                 className="ba-DrawingAnnotations-list"
                 onSelect={handleAnnotationActive}
             />

package/src/drawing/DrawingManager.tsx

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

package/src/drawing/actions.ts

@@ -2,16 +2,18 @@ import { AppThunkDispatch, AppState, getCreatorStatus, CreatorStatus } from '../
 import { createAnnotationAction } from '../store/annotations';
 import { getFileVersionId } from '../store/options';
 import { PathGroup } from '../@types';
+import { TARGET_TYPE } from '../constants';
 import { resetDrawingAction, setDrawingLocationAction } from '../store/drawing';
 
 export type CreateArg = {
     location: number;
     message: string;
     pathGroups: Array<PathGroup>;
+    targetType: TARGET_TYPE;
 };
 
 export const createDrawingAction = (arg: CreateArg) => (dispatch: AppThunkDispatch, getState: () => AppState) => {
-    const { location, message, pathGroups } = arg;
+    const { location, message, pathGroups, targetType } = arg;
     const state = getState();
     const newAnnotation = {
         description: {
@@ -23,7 +25,7 @@ export const createDrawingAction = (arg: CreateArg) => (dispatch: AppThunkDispat
         },
         target: {
             location: {
-                type: 'page' as const,
+                type: targetType,
                 value: location,
             },
             path_groups: pathGroups,

package/src/highlight/actions.ts

@@ -2,6 +2,7 @@ import { AppThunkDispatch, AppState } from '../store';
 import { createAnnotationAction } from '../store/annotations';
 import { getFileVersionId } from '../store/options';
 import { Rect } from '../@types';
+import { TARGET_TYPE } from '../constants';
 
 export type CreateArg = {
     location: number;
@@ -23,7 +24,7 @@ export const createHighlightAction = (arg: CreateArg) => (dispatch: AppThunkDisp
         },
         target: {
             location: {
-                type: 'page' as const,
+                type: TARGET_TYPE.PAGE as const,
                 value: location,
             },
             shapes,

package/src/icons/ArrowBack.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+function ArrowBack(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            data-testid="ArrowBack"
+            fill="none"
+            focusable="false"
+            height="1em"
+            role="img"
+            viewBox="0 0 20 20"
+            width="1em"
+            {...props}
+        >
+            <path
+                d="M6.91086 1.91058C7.2363 1.58515 7.76381 1.58515 8.08925 1.91058C8.41462 2.23602 8.41462 2.76355 8.08925 3.08896L5.34511 5.8331H12.5C14.1062 5.83312 15.3897 6.4396 16.2574 7.47291C17.1089 8.4871 17.5 9.83869 17.5 11.2498C17.5 12.6609 17.109 14.0125 16.2574 15.0266C15.3897 16.0599 14.1062 16.6664 12.5 16.6664H10C9.53987 16.6664 9.16679 16.2933 9.16671 15.8331C9.16671 15.3729 9.53979 14.9998 10 14.9998H12.5C13.6552 14.9998 14.4553 14.5803 14.9805 13.9549C15.5219 13.3102 15.8334 12.3699 15.8334 11.2498C15.8334 10.1296 15.5219 9.18935 14.9805 8.54469C14.4553 7.91928 13.6552 7.49979 12.5 7.49977H5.34511L8.08925 10.2439C8.41462 10.5694 8.41471 11.0969 8.08925 11.4223C7.76384 11.7477 7.23631 11.7477 6.91086 11.4223L2.7442 7.25563C2.41876 6.9302 2.41876 6.40268 2.7442 6.07725L6.91086 1.91058Z"
+                fill="#fff"
+            />
+        </svg>
+    );
+}
+
+export default ArrowBack;

package/src/icons/ArrowForward.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+function ArrowForward(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            data-testid="ArrowForward"
+            fill="none"
+            focusable="false"
+            height="1em"
+            role="img"
+            viewBox="0 0 20 20"
+            width="1em"
+            {...props}
+        >
+            <path
+                d="M11.9108 1.91058C12.2363 1.58515 12.7638 1.58515 13.0892 1.91058L17.2558 6.07725C17.5813 6.40268 17.5813 6.9302 17.2558 7.25563L13.0892 11.4223C12.7638 11.7477 12.2363 11.7477 11.9108 11.4223C11.5854 11.0969 11.5854 10.5694 11.9108 10.2439L14.6549 7.49977H7.5C6.34482 7.49977 5.54479 7.91927 5.01953 8.54469C4.4782 9.18935 4.16667 10.1296 4.16667 11.2498C4.16668 12.3699 4.47819 13.3102 5.01953 13.9549C5.54479 14.5803 6.34484 14.9998 7.5 14.9998H10C10.4603 14.9998 10.8333 15.3729 10.8333 15.8331C10.8333 16.2933 10.4603 16.6664 10 16.6664H7.5C5.89388 16.6664 4.6104 16.0599 3.74268 15.0266C2.89112 14.0125 2.50001 12.6609 2.5 11.2498C2.5 9.83869 2.89113 8.4871 3.74268 7.47291C4.6104 6.43958 5.89385 5.8331 7.5 5.8331H14.6549L11.9108 3.08896C11.5854 2.76354 11.5854 2.23602 11.9108 1.91058Z"
+                fill="#fff"
+            />
+        </svg>
+    );
+}
+
+export default ArrowForward;

package/src/icons/Trash.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+function Trash(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            data-testid="Trash"
+            fill="none"
+            focusable="false"
+            height="1em"
+            role="img"
+            viewBox="0 0 20 20"
+            width="1em"
+            {...props}
+        >
+            <path
+                clipRule="evenodd"
+                d="M7.55758 4.25017C7.6296 3.87481 7.75758 3.73256 7.87369 3.65128C7.99454 3.56669 8.19891 3.47991 8.56146 3.41949C8.92362 3.35914 9.39079 3.33317 9.99996 3.33317C10.6092 3.33317 11.0764 3.35914 11.4385 3.41949C11.801 3.47991 12.0054 3.56669 12.1263 3.65128C12.2424 3.73256 12.3704 3.87481 12.4424 4.25017C11.7196 4.1984 10.9065 4.1665 9.99996 4.1665C9.09346 4.1665 8.2803 4.1984 7.55758 4.25017ZM5.85575 4.42505C5.92957 3.5488 6.20244 2.78673 6.91792 2.2859C7.31791 2.0059 7.79063 1.8583 8.28746 1.7755C8.78471 1.69262 9.35921 1.6665 9.99996 1.6665C10.6408 1.6665 11.2153 1.69262 11.7125 1.7755C12.2093 1.8583 12.682 2.0059 13.082 2.2859C13.7975 2.78673 14.0704 3.5488 14.1442 4.42505C14.5419 4.47947 14.8961 4.53848 15.208 4.59789C15.7812 4.70707 16.2109 4.81752 16.5036 4.90318C16.6499 4.946 16.762 4.98262 16.8405 5.00976C16.8797 5.02333 16.9105 5.03452 16.9331 5.04294L16.9608 5.05343L16.97 5.05701L16.9735 5.05837L16.9749 5.05895C16.9752 5.05906 16.9761 5.05944 16.6666 5.83317L16.9761 5.05944C17.4035 5.23037 17.6113 5.71535 17.4404 6.14266C17.2975 6.49966 16.9356 6.70348 16.5711 6.66122L16.0734 15.1939C15.9706 16.9565 14.5113 18.3332 12.7457 18.3332H7.25422C5.48867 18.3332 4.02937 16.9565 3.92655 15.1939L3.42881 6.66122C3.06437 6.70348 2.70237 6.49966 2.55958 6.14266C2.38865 5.71535 2.5965 5.23037 3.02382 5.05944L3.33331 5.83317C3.02382 5.05944 3.02351 5.05955 3.02382 5.05944L3.02506 5.05895L3.02649 5.05837L3.02994 5.05701L3.03914 5.05343L3.06682 5.04294C3.0894 5.03452 3.12027 5.02333 3.15952 5.00976C3.23802 4.98262 3.35004 4.946 3.49637 4.90318C3.78904 4.81752 4.21877 4.70707 4.79197 4.59789C5.10387 4.53848 5.45812 4.47947 5.85575 4.42505ZM5.59039 15.0969L5.07378 6.24087L5.10382 6.23512C6.1447 6.03685 7.75911 5.83317 9.99996 5.83317C12.2409 5.83317 13.8553 6.03685 14.8961 6.23512L14.9261 6.24087L14.4095 15.0969C14.3581 15.9782 13.6285 16.6665 12.7457 16.6665H7.25422C6.37145 16.6665 5.6418 15.9782 5.59039 15.0969ZM11.6666 7.49984C12.1269 7.49984 12.5 7.87294 12.5 8.33317V14.1665C12.5 14.6268 12.1269 14.9998 11.6666 14.9998C11.2064 14.9998 10.8333 14.6268 10.8333 14.1665V8.33317C10.8333 7.87294 11.2064 7.49984 11.6666 7.49984ZM9.16662 8.33317C9.16662 7.87294 8.79354 7.49984 8.33329 7.49984C7.87307 7.49984 7.49997 7.87294 7.49997 8.33317V14.1665C7.49997 14.6268 7.87307 14.9998 8.33329 14.9998C8.79354 14.9998 9.16662 14.6268 9.16662 14.1665V8.33317Z"
+                fill="#fff"
+                fillRule="evenodd"
+            />
+        </svg>
+    );
+}
+
+export default Trash;

package/src/media/MediaAnnotator.scss

@@ -0,0 +1,20 @@
+.bp-media {
+    .ba-Layer {
+        position: absolute;
+        white-space: initial; // Overrides white-space: no-wrap inherited .bp-image
+        text-align: initial; // Overrides text-align: center inherited .bp-image
+        pointer-events: none;
+    }
+
+    // Applied to img element, which is managed by Preview SDK
+    .ba-is-drawing {
+        user-select: none; // Prevent visible selection highlight
+    }
+
+    // Raise the rendering order to override the stacking context created by the
+    // transform applied to each of the managers' react mount element to account for
+    // rotation
+    .ba-Layer--popup {
+        z-index: 4;
+    }
+}

package/src/media/MediaAnnotator.ts

@@ -0,0 +1,141 @@
+import { Unsubscribe } from 'redux';
+import BaseAnnotator, { Options } from '../common/BaseAnnotator';
+import PopupManager from '../popup/PopupManager';
+import { DrawingManager } from '../drawing';
+import { RegionCreationManager, RegionManager } from '../region';
+import { CreatorStatus, getCreatorStatus } from '../store/creator';
+import { getAnnotation, getFileId, getIsCurrentFileVersion, getRotation } from '../store';
+import { Manager } from '../common/BaseManager';
+import './MediaAnnotator.scss';
+import { MEDIA_LOCATION_INDEX, TARGET_TYPE } from '../constants';
+
+export const CSS_IS_DRAWING_CLASS = 'ba-is-drawing';
+export const VIDEO_PARENT_SELECTOR = '.bp-media';
+
+export default class MediaAnnotator extends BaseAnnotator {
+    annotatedEl?: HTMLElement;
+
+    managers: Set<Manager> = new Set();
+
+    storeHandler?: Unsubscribe;
+
+    constructor(options: Options) {
+        super(options);
+
+        // Subscribe to the store so that the annoator can capture changes to the creator status
+        this.storeHandler = this.store.subscribe(this.handleStore);
+    }
+
+    destroy(): void {
+
+        // If the store handler is present, unsubscribe from the store.
+        if (this.storeHandler) {
+            this.storeHandler();
+        }
+
+        if (this.managers) {
+            this.managers.forEach(manager => manager.destroy());
+        }
+
+        super.destroy();
+    }
+
+    getAnnotatedElement(): HTMLElement | null | undefined {
+        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, 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> {
+        const fileId = getFileId(this.store.getState());
+        const isCurrentFileVersion = getIsCurrentFileVersion(this.store.getState());
+        const resinTags = { fileid: fileId, iscurrent: isCurrentFileVersion };
+        this.managers.forEach(manager => {
+            if (!manager.exists(parentEl)) {
+                manager.destroy();
+                this.managers.delete(manager);
+            }
+        });
+
+        if (this.managers.size === 0) {
+            this.addManagers(referenceEl, resinTags);
+        }
+
+        return this.managers;
+    }
+
+  
+
+    // returns the actual video element
+    getReference(): HTMLVideoElement | null | undefined {
+        return this.annotatedEl?.querySelector('video');
+    }
+
+    handleStore = (): void => {
+        const referenceEl = this.getReference();
+
+        if (!referenceEl) {
+            return;
+        }
+
+        if (getCreatorStatus(this.store.getState()) === CreatorStatus.started) {
+            referenceEl.classList.add(CSS_IS_DRAWING_CLASS);
+        } else {
+            referenceEl.classList.remove(CSS_IS_DRAWING_CLASS);
+        }
+    };
+
+    render(): void {
+        const referenceEl = this.getReference();
+        const rotation = getRotation(this.store.getState()) || 0;
+
+        if (!this.annotatedEl || !referenceEl) {
+            return;
+        }
+
+        this.getManagers(this.annotatedEl, referenceEl).forEach(manager => {
+            manager.style({
+                height: `${referenceEl.offsetHeight}px`,
+                left: `${referenceEl.offsetLeft}px`,
+                top: `${referenceEl.offsetTop}px`,
+                transform: `rotate(${rotation}deg)`,
+                width: `${referenceEl.offsetWidth}px`,
+            });
+            manager.render({
+                intl: this.intl,
+                store: this.store,
+            });
+        });
+
+        this.postRender();
+    }
+
+    // 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 
+    // annotation instead of the scrollLeft and scrollTop of the parent element.
+    scrollToAnnotation(annotationId: string | null | undefined, defaultLocation: number = -1 ): void {
+        
+        if (!annotationId) {
+            return;
+        }
+        const annotation = getAnnotation(this.store.getState(), annotationId);
+        const annotationLocation = annotation?.target?.location?.value ?? defaultLocation;
+        const video = this.getReference();
+
+        if ( !video || !this.annotatedEl || annotationLocation === -1 ) {
+            return;
+        }
+
+        video.pause();
+        video.currentTime = annotationLocation / 1000;
+        
+    }
+}
+