box-annotations 5.2.0 → 5.2.1-beta.0

package/package.json

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

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/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.ts

@@ -120,18 +120,19 @@ export default class MediaAnnotator extends BaseAnnotator {
     // 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): void {
+    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 ?? 0
+        const annotationLocation = annotation?.target?.location?.value ?? defaultLocation;
         const video = this.getReference();
-        if (!annotation || !video || !this.annotatedEl) {
+
+        if ( !video || !this.annotatedEl || annotationLocation === -1 ) {
             return;
         }
-  
+
         video.pause();
         video.currentTime = annotationLocation / 1000;