box
diff --git a/‎i18n/en-US.properties‎
Lines changed: 2 additions & 0 deletions b/‎i18n/en-US.properties‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎src/components/form-elements/draft-js-mention-selector/DraftJSMentionSelector.js‎
Lines changed: 66 additions & 21 deletions b/‎src/components/form-elements/draft-js-mention-selector/DraftJSMentionSelector.js‎
Lines changed: 66 additions & 21 deletions
diff --git a/‎src/components/form-elements/draft-js-mention-selector/DraftTimestamp.scss‎
Lines changed: 1 addition & 1 deletion b/‎src/components/form-elements/draft-js-mention-selector/DraftTimestamp.scss‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/components/form-elements/draft-js-mention-selector/README.md‎
Lines changed: 1 addition & 3 deletions b/‎src/components/form-elements/draft-js-mention-selector/README.md‎
Lines changed: 1 addition & 3 deletions
diff --git a/‎src/components/form-elements/draft-js-mention-selector/__tests__/DraftJSMentionSelector.test.js‎
Lines changed: 27 additions & 13 deletions b/‎src/components/form-elements/draft-js-mention-selector/__tests__/DraftJSMentionSelector.test.js‎
Lines changed: 27 additions & 13 deletions
@@ -232,6 +232,8 @@ be.contentSidebar.activityFeed.common.editedMessage = \ (edited)
 be.contentSidebar.activityFeed.common.seeLessMessage = See less
 # See more button for showing whole long message
 be.contentSidebar.activityFeed.common.seeMoreMessage = See more
+# Accessibility label for timestamp button that allows jumping to a specific time in media
+be.contentSidebar.activityFeed.common.timestampLabel = Seek to video timestamp
 # Translate button for translating comment
 be.contentSidebar.activityFeed.common.translateMessage = Translate
 # Text for aria label of approval task circle type icon
 
@@ -11,6 +11,12 @@ import * as messages from '../input-messages';
 import type { SelectorItems } from '../../../common/types/core';
 import Toggle from '../../toggle/Toggle';
 import { UNEDITABLE_TIMESTAMP_TEXT } from './utils';
+import { convertSecondsToHMMSS } from '../../../utils/timestamp';
+
+type videoTimestamp = {
+    timestamp: string,
+    timestampInMilliseconds: number,
+};
 
 /**
  * Scans a Draft ContentBlock for entity ranges, so they can be annotated
@@ -35,7 +41,9 @@ const mentionStrategy = (contentBlock, callback, contentState) => {
  * @param {ContentState} contentState
  */
 const timestampStrategy = (contentBlock: any, callback: (start: number, end: number) => void, contentState: any) => {
-    if (!contentBlock || !contentState) return;
+    if (!contentBlock || !contentState) {
+        return;
+    }
     contentBlock.findEntityRanges(character => {
         const entityKey = character.getEntity();
         const hasEntityKey = entityKey !== null;
@@ -52,6 +60,7 @@ type Props = {
     contactsLoaded?: boolean,
     description?: React.Node,
     editorState?: EditorState,
+    fileVersionId?: string,
     hideLabel?: boolean,
     isDisabled?: boolean,
     isRequired?: boolean,
@@ -120,6 +129,26 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
         return contacts ? { contacts } : null;
     }
 
+    componentDidMount() {
+        // if video timestamping is enabled we need to check if a timestamp entity is present in the editor state passed in via props
+        // and if it is then set the isTimestampToggledOn state to true. This will happen when the user is editing a comment
+        // that has a timestamp entity.
+        if (this.getIsVideoTimestampEnabled()) {
+            const { isTimestampToggledOn, internalEditorState } = this.state;
+            const { editorState: externalEditorState } = this.props;
+            const currentEditorState = internalEditorState || externalEditorState;
+            // if video timestamping is enabled and the editor state is being passed in check if a timestamp entity is present
+            // and if it is then set the isTimestampToggledOn state to true.
+            if (!isTimestampToggledOn && currentEditorState) {
+                const currentContent = currentEditorState.getCurrentContent();
+                const isTimeStampEntityPresent = this.getIsTimestampEntityPresent(currentContent);
+                if (isTimeStampEntityPresent) {
+                    this.setState({ isTimestampToggledOn: true });
+                }
+            }
+        }
+    }
+
     componentDidUpdate(prevProps: Props, prevState: State) {
         const { internalEditorState: prevInternalEditorState } = prevState;
         const { internalEditorState } = this.state;
@@ -145,7 +174,7 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
         }
 
         // if isRequired is false then the comment box will be closed and we want
-        // to make sure that isTimestampToggledOn is alawys set to false in this casee
+        // to make sure that isTimestampToggledOn is always set to false in this casee
         if (this.getIsVideoTimestampEnabled() && isRequired !== prevIsRequiredFromProps && isRequired === false) {
             this.setState({ isTimestampToggledOn: false });
         }
@@ -197,30 +226,36 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
             return;
         }
 
-        const timestampLengthIncludingSpace = this.getTimestampLength(currentContent, currentContent.getFirstBlock());
+        const timestampLengthIncludingSpace = this.getTimestampLength(currentContent);
         const isTimestampEntityPresent = timestampLengthIncludingSpace > 0;
 
         // check if we need to toggle the timestamp on and that the timestamp entity is not already present in the content
         if ((!isTimestampToggledOn || forceOn) && !isTimestampEntityPresent) {
             // get the current timestamp
-            const timestamp = this.getVideoTimestamp();
+            const { timestamp, timestampInMilliseconds } = this.getVideoTimestamp();
+            const { fileVersionId } = this.props;
             const timestampText = `${timestamp}`;
-            // Create a new entity for the timestamp. It is immutable so it will not be editable.
+            // Create a new entity for the timestamp. It is immutable so it will not be editable. Adding
+            // timestampInMilliseconds, and fileVersionId to the entity data which will be used when the comment form is submitted
+            // and will be added to the text of the comment. This will let us filter out timetsamped comments based on version and also
+            // be able to click the timestamp button in comments in the sidebar and got to the proper place in the video.
             // $FlowFixMe
-            const timestampEntity = currentContent?.createEntity(
+            const contentWithTimestampEntity = currentContent.createEntity(
                 UNEDITABLE_TIMESTAMP_TEXT, // Entity type
                 'IMMUTABLE',
-                { timestamp },
+                { timestampInMilliseconds, fileVersionId },
             );
 
             // Create a selection at the very beginning of the input box for the timestamp
-            const selectionAtStart = SelectionState.createEmpty(currentContent.getFirstBlock().getKey()).merge({
+            const selectionAtStart = SelectionState.createEmpty(
+                contentWithTimestampEntity.getFirstBlock().getKey(),
+            ).merge({
                 anchorOffset: 0,
                 focusOffset: 0,
             });
 
             // First insert the timestamp text followed by a space
-            updatedContent = Modifier.insertText(currentContent, selectionAtStart, `${timestampText} `);
+            updatedContent = Modifier.insertText(contentWithTimestampEntity, selectionAtStart, `${timestampText} `);
 
             // Then select the timestamp text not including the space
             const selectionWithTimestamp = SelectionState.createEmpty(updatedContent.getFirstBlock().getKey()).merge({
@@ -229,7 +264,7 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
             });
 
             // Get the entity key for the timestamp entity
-            const entityKey = timestampEntity.getLastCreatedEntityKey();
+            const entityKey = contentWithTimestampEntity.getLastCreatedEntityKey();
 
             // Apply the timestamp entity to selected timestamp text. This will ensure that the timestamp is uneditable and that
             // the decorator will apply the proper styling to the timestamp.
@@ -238,7 +273,7 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
             newIsTimestampToggledOn = true;
         } else {
             // Create a selection range for the timestamp text and space so that we know what to remove and
-            // remove it from the beginning of the input box. This usess the timestsamp length that we calculated earlier.
+            // remove it from the beginning of the input box. This uses the timestsamp length that we calculated earlier.
             const selectionToRemove = SelectionState.createEmpty(currentContent.getFirstBlock().getKey()).merge({
                 anchorOffset: 0,
                 focusOffset: timestampLengthIncludingSpace,
@@ -339,14 +374,20 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
         }
     };
 
+    getIsTimestampEntityPresent = (currentContent: ContentState): boolean => {
+        return this.getTimestampLength(currentContent) > 0;
+    };
+
     /**
      * Calculates the length of the timestamp entity in the current block
      * @param {ContentState} currentContent The current content state
      * @param {ContentBlock} block The content block to analyze
      * @returns {number} The length of the timestamp entity (including the space after it)
      */
-    getTimestampLength = (currentContent: ContentState, block: any): number => {
-        if (!block || !currentContent) {
+    getTimestampLength = (currentContent: ContentState): number => {
+        // $FlowFixMe
+        const block = currentContent?.getFirstBlock();
+        if (!currentContent || !block) {
             return 0;
         }
         let timestampLength = 0;
@@ -381,7 +422,7 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
         if (this.getIsVideoTimestampEnabled() && isTimestampToggledOn) {
             const currentContent = nextEditorState.getCurrentContent();
             const firstBlock = currentContent.getFirstBlock();
-            const timestampLength = this.getTimestampLength(currentContent, firstBlock);
+            const timestampLength = this.getTimestampLength(currentContent);
             const timestampEntityFound = timestampLength > 0;
             // If timestamp entity is no longer present, update the state
             if (!timestampEntityFound) {
@@ -421,19 +462,22 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
         this.handleValidityStateUpdateHandler();
     };
 
-    getVideoTimestamp = () => {
+    getVideoTimestamp = (): videoTimestamp => {
         const mediaDashContainer: ?HTMLElement = document.querySelector('.bp-media-dash');
         // $FlowFixMe
         const video: ?HTMLVideoElement = mediaDashContainer?.querySelector('video');
 
-        // $FlowFixMe
-        const totalSeconds = Math.floor(video?.currentTime || 0);
+        const currentTime = video?.currentTime || 0;
 
-        const hours = Math.floor(totalSeconds / 3600);
-        const minutes = Math.floor((totalSeconds % 3600) / 60);
-        const seconds = totalSeconds % 60;
+        // We need to get the nubmer of seconds in HMMSS format to display in the timestamp button
+        // and the timestamp in milliseconds to use when the comment form is submitted. This is because
+        // milliseconds are more precise than seconds and we need to make sure that we go to the right frame
+        // when the comment timestamp is clicked in the sidebar.
+        const totalSeconds = Math.floor(currentTime);
+        const timestampToDisplay = convertSecondsToHMMSS(totalSeconds);
+        const timestampInMilliseconds = Math.floor(currentTime * 1000);
 
-        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        return { timestamp: timestampToDisplay, timestampInMilliseconds };
     };
 
     render() {
@@ -496,6 +540,7 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
                     {isRequired && this.getIsVideoTimestampEnabled() && (
                         <Toggle
                             className="bcs-CommentTimestamp-toggle"
+                            data-target-id="Toggle-CommentTimestamp"
                             // $FlowFixMe - timestampLabel is guaranteed to be defined when getIsVideoTimestampEnabled() returns true
                             label={timestampLabel}
                             isOn={timestampToggledOn}
 
@@ -1,7 +1,7 @@
 @import '../../../styles/variables';
 
 .bcs-CommentTimestamp-entity {
-    color: $bdl-box-blue-80;
+    color: var(--box-blue-110, #0057c0);
     font-size: $bdl-fontSize--dejaBlue;
     line-height: $bdl-line-height;
     border-radius: $bdl-border-radius-size;
 
@@ -39,9 +39,7 @@ The component hierarchy from topmost to bottommost is:
 
 ### Restoring Editor State
 
-Use `createMentionSelectorState(tagged_message)` instead of `EditorState.createFromContent()` when restoring content that already contains mentions.
-
-This will parse the tagged message and create `type: MENTION` entities. It returns an EditorState instance.
+Use `createMentionTimestampSelectorState(tagged_message)` instead of `EditorState.createFromContent()` when restoring content that already contains mentions or timestamps. This will parse the tagged message and create `type: MENTION` or `type: UNEDITABLE_TIMESTAMP_TEXT` entities. It returns an EditorState instance.
 
 ### Examples
 
 
@@ -67,7 +67,7 @@ describe('bcomponents/form-elements/draft-js-mention-selector/DraftJSMentionSele
             expect(instance.state.isTimestampToggledOn).toEqual(true);
             expect(wrapper.find('Toggle').length).toEqual(1);
             expect(wrapper.find('Toggle').prop('isOn')).toEqual(true);
-            expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).toContain('00:01:10');
+            expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).toContain('0:01:10');
         });
     });
 
@@ -470,7 +470,9 @@ describe('bcomponents/form-elements/draft-js-mention-selector/DraftJSMentionSele
             });
             const wrapper = shallow(<DraftJSMentionSelector {...requiredProps} />);
             const instance = wrapper.instance();
-            expect(instance.getVideoTimestamp()).toEqual('00:01:10');
+            const { timestamp, timestampInMilliseconds } = instance.getVideoTimestamp();
+            expect(timestamp).toEqual('0:01:10');
+            expect(timestampInMilliseconds).toEqual(70000);
         });
 
         test('should return the correct videoe timestamp if it has not been started yet', () => {
@@ -483,10 +485,12 @@ describe('bcomponents/form-elements/draft-js-mention-selector/DraftJSMentionSele
                 };
             });
             const instance = wrapper.instance();
-            expect(instance.getVideoTimestamp()).toEqual('00:00:00');
+            const { timestamp, timestampInMilliseconds } = instance.getVideoTimestamp();
+            expect(timestamp).toEqual('0:00:00');
+            expect(timestampInMilliseconds).toEqual(0);
         });
 
-        test('shoudl return 00:00:00 if the video is not found', () => {
+        test('should return 0:00:00 if the video is not found', () => {
             jest.spyOn(document, 'querySelector').mockImplementation(() => {
                 return {
                     querySelector: () => {
@@ -496,7 +500,9 @@ describe('bcomponents/form-elements/draft-js-mention-selector/DraftJSMentionSele
             });
             const wrapper = shallow(<DraftJSMentionSelector {...requiredProps} />);
             const instance = wrapper.instance();
-            expect(instance.getVideoTimestamp()).toEqual('00:00:00');
+            const { timestamp, timestampInMilliseconds } = instance.getVideoTimestamp();
+            expect(timestamp).toEqual('0:00:00');
+            expect(timestampInMilliseconds).toEqual(0);
         });
 
         test('should return the correct precision of the timestamp', () => {
@@ -509,12 +515,19 @@ describe('bcomponents/form-elements/draft-js-mention-selector/DraftJSMentionSele
             });
             const wrapper = shallow(<DraftJSMentionSelector {...requiredProps} />);
             const instance = wrapper.instance();
-            expect(instance.getVideoTimestamp()).toEqual('00:02:56');
+            const { timestamp, timestampInMilliseconds } = instance.getVideoTimestamp();
+            expect(timestamp).toEqual('0:02:56');
+            expect(timestampInMilliseconds).toEqual(176340);
         });
     });
     describe('video timestamp toggle', () => {
         const getTimestampedEnableComponent = () => {
-            const props = { ...requiredProps, timestampLabel: 'Toggle Timestamp', isRequired: true };
+            const props = {
+                ...requiredProps,
+                timestampLabel: 'Toggle Timestamp',
+                isRequired: true,
+                fileVersionId: '123',
+            };
             return shallow(<DraftJSMentionSelector {...props} />);
         };
 
@@ -536,17 +549,17 @@ describe('bcomponents/form-elements/draft-js-mention-selector/DraftJSMentionSele
             const wrapper = getTimestampedEnableComponent();
             const instance = wrapper.instance();
             wrapper.find('Toggle').simulate('change', { target: { checked: true } });
-            expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).toContain('00:01:10');
+            expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).toContain('0:01:10');
             expect(instance.state.isTimestampToggledOn).toEqual(true);
         });
 
         test('should remove timestamp from the editor state when the toggle is clicked off', () => {
             const wrapper = getTimestampedEnableComponent();
             const instance = wrapper.instance();
             wrapper.find('Toggle').simulate('change', { target: { checked: true } });
-            expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).toContain('00:01:10');
+            expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).toContain('0:01:10');
             wrapper.find('Toggle').simulate('change', { target: { checked: false } });
-            expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).not.toContain('00:01:10');
+            expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).not.toContain('0:01:10');
             expect(instance.state.isTimestampToggledOn).toEqual(false);
         });
 
@@ -558,7 +571,7 @@ describe('bcomponents/form-elements/draft-js-mention-selector/DraftJSMentionSele
             });
             wrapper.find('Toggle').simulate('change', { target: { checked: true } });
             expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).toContain(
-                '00:01:10 this is coool!!!',
+                '0:01:10 this is coool!!!',
             );
         });
 
@@ -569,7 +582,7 @@ describe('bcomponents/form-elements/draft-js-mention-selector/DraftJSMentionSele
                 internalEditorState: EditorState.createWithContent(ContentState.createFromText('this is coool!!!')),
             });
             wrapper.find('Toggle').simulate('change', { target: { checked: true } });
-            expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).toContain('00:01:10');
+            expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).toContain('0:01:10');
             wrapper.find('Toggle').simulate('change', { target: { checked: false } });
             expect(instance.state.internalEditorState.getCurrentContent().getPlainText()).toEqual('this is coool!!!');
         });
@@ -584,7 +597,8 @@ describe('bcomponents/form-elements/draft-js-mention-selector/DraftJSMentionSele
             const rawContentState = convertToRaw(instance.state.internalEditorState.getCurrentContent());
             const entity = rawContentState.entityMap[0];
             expect(entity.type).toEqual('UNEDITABLE_TIMESTAMP_TEXT');
-            expect(entity.data.timestamp).toEqual('00:01:10');
+            expect(entity.data.timestampInMilliseconds).toEqual(70000);
+            expect(entity.data.fileVersionId).toEqual('123');
         });
 
         test('should remove the UNEDITABLE_TIMESTAMP_TEXT entity from the editor state when the toggle is clicked off', () => {