box-ui-elements 25.1.0-beta.2 → 25.1.0-beta.4

package/es/constants.js

@@ -236,7 +236,7 @@ export const CLIENT_NAME_CONTENT_SIDEBAR = 'ContentSidebar';
 export const CLIENT_NAME_CONTENT_UPLOADER = 'ContentUploader';
 export const CLIENT_NAME_FILE_PICKER = 'FilePicker';
 export const CLIENT_NAME_FOLDER_PICKER = 'FolderPicker';
-export const CLIENT_VERSION = '25.1.0-beta.2';
+export const CLIENT_VERSION = '25.1.0-beta.4';
 
 /* ---------------------- Statuses -------------------------- */
 export const STATUS_PENDING = 'pending';

package/es/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js

@@ -24,6 +24,7 @@ import UserLink from '../common/user-link';
 import { ACTIVITY_TARGETS } from '../../../common/interactionTargets';
 import { COMMENT_STATUS_RESOLVED, PLACEHOLDER_USER } from '../../../../constants';
 import IconAnnotation from '../../../../icons/two-toned/IconAnnotation';
+import { convertMillisecondsToHMMSS } from '../../../../utils/timestamp';
 import './AnnotationActivity.scss';
 const AnnotationActivity = ({
   currentUser,
@@ -124,6 +125,8 @@ const AnnotationActivity = ({
     }],
     targetAttachment: 'bottom right'
   };
+  const isVideoAnnotation = target?.location?.type === 'frame';
+  const annotationsMillisecondTimestampInHMMSS = isVideoAnnotation ? convertMillisecondsToHMMSS(target.location.value) : null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectableActivityCard, {
     className: "bcs-AnnotationActivity",
     "data-resin-feature": "annotations",
@@ -154,7 +157,7 @@ const AnnotationActivity = ({
     className: "bcs-AnnotationActivity-timestamp"
   }, /*#__PURE__*/React.createElement(ActivityTimestamp, {
     date: createdAtTimestamp
-  }), hasVersions && /*#__PURE__*/React.createElement(AnnotationActivityLink, {
+  }), hasVersions && !isVideoAnnotation && /*#__PURE__*/React.createElement(AnnotationActivityLink, {
     className: "bcs-AnnotationActivity-link",
     "data-resin-target": "annotationLink",
     id: id,
@@ -179,6 +182,8 @@ const AnnotationActivity = ({
   }) : /*#__PURE__*/React.createElement(ActivityMessage, {
     getUserProfileUrl: getUserProfileUrl,
     id: id,
+    annotationsMillisecondTimestamp: annotationsMillisecondTimestampInHMMSS,
+    onClick: handleSelect,
     isEdited: isEdited && !isResolved,
     tagged_message: message
   }))), error ? /*#__PURE__*/React.createElement(ActivityError, error) : null), /*#__PURE__*/React.createElement(TetherComponent, tetherProps, isMenuVisible && /*#__PURE__*/React.createElement(AnnotationActivityMenu, {

package/es/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js.flow

@@ -24,6 +24,7 @@ import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../commo
 import type { SelectorItems, User, BoxItem } from '../../../../common/types/core';
 
 import IconAnnotation from '../../../../icons/two-toned/IconAnnotation';
+import { convertMillisecondsToHMMSS } from '../../../../utils/timestamp';
 
 import './AnnotationActivity.scss';
 
@@ -127,6 +128,11 @@ const AnnotationActivity = ({
         targetAttachment: 'bottom right',
     };
 
+    const isVideoAnnotation = target?.location?.type === 'frame';
+    const annotationsMillisecondTimestampInHMMSS = isVideoAnnotation
+        ? convertMillisecondsToHMMSS(target.location.value)
+        : null;
+
     return (
         <>
             <SelectableActivityCard
@@ -158,7 +164,7 @@ const AnnotationActivity = ({
                         </div>
                         <div className="bcs-AnnotationActivity-timestamp">
                             <ActivityTimestamp date={createdAtTimestamp} />
-                            {hasVersions && (
+                            {hasVersions && !isVideoAnnotation && (
                                 <AnnotationActivityLink
                                     className="bcs-AnnotationActivity-link"
                                     data-resin-target="annotationLink"
@@ -189,6 +195,8 @@ const AnnotationActivity = ({
                             <ActivityMessage
                                 getUserProfileUrl={getUserProfileUrl}
                                 id={id}
+                                annotationsMillisecondTimestamp={annotationsMillisecondTimestampInHMMSS}
+                                onClick={handleSelect}
                                 isEdited={isEdited && !isResolved}
                                 tagged_message={message}
                             />

package/es/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationActivity.js","names":["React","classNames","getProp","noop","TetherComponent","ActivityError","ActivityMessage","ActivityStatus","ActivityTimestamp","AnnotationActivityLink","AnnotationActivityMenu","Avatar","CommentForm","DeleteConfirmation","Media","messages","SelectableActivityCard","UserLink","ACTIVITY_TARGETS","COMMENT_STATUS_RESOLVED","PLACEHOLDER_USER","IconAnnotation","AnnotationActivity","currentUser","item","file","getAvatarUrl","getMentionWithQuery","getUserProfileUrl","hasVersions","isCurrentVersion","mentionSelectorContacts","onDelete","onEdit","onSelect","onStatusChange","isConfirmingDelete","setIsConfirmingDelete","useState","isEditing","setIsEditing","isMenuOpen","setIsMenuOpen","created_at","created_by","description","error","file_version","id","isPending","modified_at","permissions","status","target","can_delete","canDelete","can_edit","canEdit","can_resolve","canResolve","isEdited","undefined","isFileVersionUnavailable","isCardDisabled","isMenuVisible","isResolved","handleDelete","handleDeleteCancel","handleDeleteConfirm","handleEdit","handleFormCancel","handleFormSubmit","text","handleMenuClose","handleMenuOpen","handleMouseDown","event","stopPropagation","handleSelect","handleStatusChange","newStatus","createdAtTimestamp","Date","getTime","createdByUser","linkMessage","annotationActivityPageItem","annotationActivityVersionLink","linkValue","location","value","message","activityLinkMessage","annotationActivityVersionUnavailable","_objectSpread","values","number","tetherProps","attachment","className","constraints","to","targetAttachment","createElement","Fragment","isDisabled","onMouseDown","Figure","user","badgeIcon","Body","PROFILE","name","date","onClick","entityId","isOpen","onCancel","updateComment","tagged_message","onMenuClose","onMenuOpen","ANNOTATION_OPTIONS","annotationActivityDeletePrompt","onDeleteCancel","onDeleteConfirm"],"sources":["../../../../../src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport getProp from 'lodash/get';\nimport noop from 'lodash/noop';\nimport TetherComponent from 'react-tether';\nimport ActivityError from '../common/activity-error';\nimport ActivityMessage from '../common/activity-message';\nimport ActivityStatus from '../common/activity-status';\nimport ActivityTimestamp from '../common/activity-timestamp';\nimport AnnotationActivityLink from './AnnotationActivityLink';\nimport AnnotationActivityMenu from './AnnotationActivityMenu';\nimport Avatar from '../Avatar';\nimport CommentForm from '../comment-form/CommentForm';\nimport DeleteConfirmation from '../common/delete-confirmation';\nimport Media from '../../../../components/media';\nimport messages from './messages';\nimport SelectableActivityCard from '../SelectableActivityCard';\nimport UserLink from '../common/user-link';\nimport { ACTIVITY_TARGETS } from '../../../common/interactionTargets';\nimport { COMMENT_STATUS_RESOLVED, PLACEHOLDER_USER } from '../../../../constants';\nimport type { Annotation, AnnotationPermission, FeedItemStatus } from '../../../../common/types/feed';\nimport type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';\nimport type { SelectorItems, User, BoxItem } from '../../../../common/types/core';\n\nimport IconAnnotation from '../../../../icons/two-toned/IconAnnotation';\n\nimport './AnnotationActivity.scss';\n\nimport type { OnAnnotationEdit, OnAnnotationStatusChange } from '../comment/types';\n\ntype Props = {\n    currentUser?: User,\n    file?: BoxItem,\n    getAvatarUrl: GetAvatarUrlCallback,\n    getMentionWithQuery?: (searchStr: string) => void,\n    getUserProfileUrl?: GetProfileUrlCallback,\n    hasVersions?: boolean,\n    isCurrentVersion: boolean,\n    item: Annotation,\n    mentionSelectorContacts?: SelectorItems<User>,\n    onDelete?: ({ id: string, permissions: AnnotationPermission }) => any,\n    onEdit?: OnAnnotationEdit,\n    onSelect?: (annotation: Annotation) => any,\n    onStatusChange?: OnAnnotationStatusChange,\n};\n\nconst AnnotationActivity = ({\n    currentUser,\n    item,\n    file,\n    getAvatarUrl,\n    getMentionWithQuery,\n    getUserProfileUrl,\n    hasVersions,\n    isCurrentVersion,\n    mentionSelectorContacts,\n    onDelete = noop,\n    onEdit = noop,\n    onSelect = noop,\n    onStatusChange = noop,\n}: Props) => {\n    const [isConfirmingDelete, setIsConfirmingDelete] = React.useState(false);\n    const [isEditing, setIsEditing] = React.useState(false);\n    const [isMenuOpen, setIsMenuOpen] = React.useState(false);\n    const {\n        created_at,\n        created_by,\n        description,\n        error,\n        file_version,\n        id,\n        isPending,\n        modified_at,\n        permissions = {},\n        status,\n        target,\n    } = item;\n    const { can_delete: canDelete, can_edit: canEdit, can_resolve: canResolve } = permissions;\n    const isEdited = modified_at !== undefined && modified_at !== created_at;\n    const isFileVersionUnavailable = file_version === null;\n    const isCardDisabled = !!error || isConfirmingDelete || isMenuOpen || isEditing || isFileVersionUnavailable;\n    const isMenuVisible = (canDelete || canEdit || canResolve) && !isPending;\n    const isResolved = status === COMMENT_STATUS_RESOLVED;\n\n    const handleDelete = (): void => setIsConfirmingDelete(true);\n    const handleDeleteCancel = (): void => setIsConfirmingDelete(false);\n    const handleDeleteConfirm = (): void => {\n        setIsConfirmingDelete(false);\n        onDelete({ id, permissions });\n    };\n\n    const handleEdit = (): void => setIsEditing(true);\n    const handleFormCancel = (): void => setIsEditing(false);\n    const handleFormSubmit = ({ text }): void => {\n        setIsEditing(false);\n        onEdit({ id, text, permissions });\n    };\n    const handleMenuClose = (): void => setIsMenuOpen(false);\n    const handleMenuOpen = (): void => setIsMenuOpen(true);\n    const handleMouseDown = (event: MouseEvent) => {\n        if (isCardDisabled) {\n            return;\n        }\n\n        // Prevents document event handlers from executing because box-annotations relies on\n        // detecting mouse events on the document outside of annotation targets to determine when to\n        // deselect annotations\n        event.stopPropagation();\n    };\n    const handleSelect = () => onSelect(item);\n\n    const handleStatusChange = (newStatus: FeedItemStatus) => onStatusChange({ id, status: newStatus, permissions });\n\n    const createdAtTimestamp = new Date(created_at).getTime();\n    const createdByUser = created_by || PLACEHOLDER_USER;\n    const linkMessage = isCurrentVersion ? messages.annotationActivityPageItem : messages.annotationActivityVersionLink;\n    const linkValue = isCurrentVersion ? target.location.value : getProp(file_version, 'version_number');\n    const message = (description && description.message) || '';\n    const activityLinkMessage = isFileVersionUnavailable\n        ? messages.annotationActivityVersionUnavailable\n        : { ...linkMessage, values: { number: linkValue } };\n    const tetherProps = {\n        attachment: 'top right',\n        className: 'bcs-AnnotationActivity-deleteConfirmationModal',\n        constraints: [{ to: 'scrollParent', attachment: 'together' }],\n        targetAttachment: 'bottom right',\n    };\n\n    return (\n        <>\n            <SelectableActivityCard\n                className=\"bcs-AnnotationActivity\"\n                data-resin-feature=\"annotations\"\n                data-resin-iscurrent={isCurrentVersion}\n                data-resin-itemid={id}\n                data-resin-target=\"annotationButton\"\n                isDisabled={isCardDisabled}\n                onMouseDown={handleMouseDown}\n                onSelect={handleSelect}\n            >\n                <Media\n                    className={classNames('bcs-AnnotationActivity-media', {\n                        'bcs-is-pending': isPending || error,\n                    })}\n                >\n                    <Media.Figure className=\"bcs-AnnotationActivity-avatar\">\n                        <Avatar getAvatarUrl={getAvatarUrl} user={createdByUser} badgeIcon={<IconAnnotation />} />\n                    </Media.Figure>\n                    <Media.Body>\n                        <div className=\"bcs-AnnotationActivity-headline\">\n                            <UserLink\n                                data-resin-target={ACTIVITY_TARGETS.PROFILE}\n                                getUserProfileUrl={getUserProfileUrl}\n                                id={createdByUser.id}\n                                name={createdByUser.name}\n                            />\n                        </div>\n                        <div className=\"bcs-AnnotationActivity-timestamp\">\n                            <ActivityTimestamp date={createdAtTimestamp} />\n                            {hasVersions && (\n                                <AnnotationActivityLink\n                                    className=\"bcs-AnnotationActivity-link\"\n                                    data-resin-target=\"annotationLink\"\n                                    id={id}\n                                    isDisabled={isFileVersionUnavailable}\n                                    message={activityLinkMessage}\n                                    onClick={handleSelect}\n                                />\n                            )}\n                        </div>\n                        <ActivityStatus status={status} />\n                        {isEditing && currentUser ? (\n                            <CommentForm\n                                className=\"bcs-AnnotationActivity-editor\"\n                                entityId={id}\n                                file={file}\n                                getAvatarUrl={getAvatarUrl}\n                                getMentionWithQuery={getMentionWithQuery}\n                                isEditing={isEditing}\n                                isOpen={isEditing}\n                                mentionSelectorContacts={mentionSelectorContacts}\n                                onCancel={handleFormCancel}\n                                updateComment={handleFormSubmit}\n                                user={currentUser}\n                                tagged_message={message}\n                            />\n                        ) : (\n                            <ActivityMessage\n                                getUserProfileUrl={getUserProfileUrl}\n                                id={id}\n                                isEdited={isEdited && !isResolved}\n                                tagged_message={message}\n                            />\n                        )}\n                    </Media.Body>\n                </Media>\n                {/* $FlowFixMe */}\n                {error ? <ActivityError {...error} /> : null}\n            </SelectableActivityCard>\n            <TetherComponent {...tetherProps}>\n                {isMenuVisible && (\n                    <AnnotationActivityMenu\n                        canDelete={canDelete}\n                        canEdit={canEdit}\n                        canResolve={canResolve}\n                        className=\"bcs-AnnotationActivity-menu\"\n                        id={id}\n                        isDisabled={isConfirmingDelete}\n                        status={status}\n                        onDelete={handleDelete}\n                        onEdit={handleEdit}\n                        onMenuClose={handleMenuClose}\n                        onMenuOpen={handleMenuOpen}\n                        onStatusChange={handleStatusChange}\n                    />\n                )}\n                {isConfirmingDelete && (\n                    <DeleteConfirmation\n                        data-resin-component={ACTIVITY_TARGETS.ANNOTATION_OPTIONS}\n                        isOpen={isConfirmingDelete}\n                        message={messages.annotationActivityDeletePrompt}\n                        onDeleteCancel={handleDeleteCancel}\n                        onDeleteConfirm={handleDeleteConfirm}\n                    />\n                )}\n            </TetherComponent>\n        </>\n    );\n};\n\nexport default AnnotationActivity;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AnnotationActivity.js","names":["React","classNames","getProp","noop","TetherComponent","ActivityError","ActivityMessage","ActivityStatus","ActivityTimestamp","AnnotationActivityLink","AnnotationActivityMenu","Avatar","CommentForm","DeleteConfirmation","Media","messages","SelectableActivityCard","UserLink","ACTIVITY_TARGETS","COMMENT_STATUS_RESOLVED","PLACEHOLDER_USER","IconAnnotation","convertMillisecondsToHMMSS","AnnotationActivity","currentUser","item","file","getAvatarUrl","getMentionWithQuery","getUserProfileUrl","hasVersions","isCurrentVersion","mentionSelectorContacts","onDelete","onEdit","onSelect","onStatusChange","isConfirmingDelete","setIsConfirmingDelete","useState","isEditing","setIsEditing","isMenuOpen","setIsMenuOpen","created_at","created_by","description","error","file_version","id","isPending","modified_at","permissions","status","target","can_delete","canDelete","can_edit","canEdit","can_resolve","canResolve","isEdited","undefined","isFileVersionUnavailable","isCardDisabled","isMenuVisible","isResolved","handleDelete","handleDeleteCancel","handleDeleteConfirm","handleEdit","handleFormCancel","handleFormSubmit","text","handleMenuClose","handleMenuOpen","handleMouseDown","event","stopPropagation","handleSelect","handleStatusChange","newStatus","createdAtTimestamp","Date","getTime","createdByUser","linkMessage","annotationActivityPageItem","annotationActivityVersionLink","linkValue","location","value","message","activityLinkMessage","annotationActivityVersionUnavailable","_objectSpread","values","number","tetherProps","attachment","className","constraints","to","targetAttachment","isVideoAnnotation","type","annotationsMillisecondTimestampInHMMSS","createElement","Fragment","isDisabled","onMouseDown","Figure","user","badgeIcon","Body","PROFILE","name","date","onClick","entityId","isOpen","onCancel","updateComment","tagged_message","annotationsMillisecondTimestamp","onMenuClose","onMenuOpen","ANNOTATION_OPTIONS","annotationActivityDeletePrompt","onDeleteCancel","onDeleteConfirm"],"sources":["../../../../../src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport getProp from 'lodash/get';\nimport noop from 'lodash/noop';\nimport TetherComponent from 'react-tether';\nimport ActivityError from '../common/activity-error';\nimport ActivityMessage from '../common/activity-message';\nimport ActivityStatus from '../common/activity-status';\nimport ActivityTimestamp from '../common/activity-timestamp';\nimport AnnotationActivityLink from './AnnotationActivityLink';\nimport AnnotationActivityMenu from './AnnotationActivityMenu';\nimport Avatar from '../Avatar';\nimport CommentForm from '../comment-form/CommentForm';\nimport DeleteConfirmation from '../common/delete-confirmation';\nimport Media from '../../../../components/media';\nimport messages from './messages';\nimport SelectableActivityCard from '../SelectableActivityCard';\nimport UserLink from '../common/user-link';\nimport { ACTIVITY_TARGETS } from '../../../common/interactionTargets';\nimport { COMMENT_STATUS_RESOLVED, PLACEHOLDER_USER } from '../../../../constants';\nimport type { Annotation, AnnotationPermission, FeedItemStatus } from '../../../../common/types/feed';\nimport type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';\nimport type { SelectorItems, User, BoxItem } from '../../../../common/types/core';\n\nimport IconAnnotation from '../../../../icons/two-toned/IconAnnotation';\nimport { convertMillisecondsToHMMSS } from '../../../../utils/timestamp';\n\nimport './AnnotationActivity.scss';\n\nimport type { OnAnnotationEdit, OnAnnotationStatusChange } from '../comment/types';\n\ntype Props = {\n    currentUser?: User,\n    file?: BoxItem,\n    getAvatarUrl: GetAvatarUrlCallback,\n    getMentionWithQuery?: (searchStr: string) => void,\n    getUserProfileUrl?: GetProfileUrlCallback,\n    hasVersions?: boolean,\n    isCurrentVersion: boolean,\n    item: Annotation,\n    mentionSelectorContacts?: SelectorItems<User>,\n    onDelete?: ({ id: string, permissions: AnnotationPermission }) => any,\n    onEdit?: OnAnnotationEdit,\n    onSelect?: (annotation: Annotation) => any,\n    onStatusChange?: OnAnnotationStatusChange,\n};\n\nconst AnnotationActivity = ({\n    currentUser,\n    item,\n    file,\n    getAvatarUrl,\n    getMentionWithQuery,\n    getUserProfileUrl,\n    hasVersions,\n    isCurrentVersion,\n    mentionSelectorContacts,\n    onDelete = noop,\n    onEdit = noop,\n    onSelect = noop,\n    onStatusChange = noop,\n}: Props) => {\n    const [isConfirmingDelete, setIsConfirmingDelete] = React.useState(false);\n    const [isEditing, setIsEditing] = React.useState(false);\n    const [isMenuOpen, setIsMenuOpen] = React.useState(false);\n    const {\n        created_at,\n        created_by,\n        description,\n        error,\n        file_version,\n        id,\n        isPending,\n        modified_at,\n        permissions = {},\n        status,\n        target,\n    } = item;\n    const { can_delete: canDelete, can_edit: canEdit, can_resolve: canResolve } = permissions;\n    const isEdited = modified_at !== undefined && modified_at !== created_at;\n    const isFileVersionUnavailable = file_version === null;\n    const isCardDisabled = !!error || isConfirmingDelete || isMenuOpen || isEditing || isFileVersionUnavailable;\n    const isMenuVisible = (canDelete || canEdit || canResolve) && !isPending;\n    const isResolved = status === COMMENT_STATUS_RESOLVED;\n\n    const handleDelete = (): void => setIsConfirmingDelete(true);\n    const handleDeleteCancel = (): void => setIsConfirmingDelete(false);\n    const handleDeleteConfirm = (): void => {\n        setIsConfirmingDelete(false);\n        onDelete({ id, permissions });\n    };\n\n    const handleEdit = (): void => setIsEditing(true);\n    const handleFormCancel = (): void => setIsEditing(false);\n    const handleFormSubmit = ({ text }): void => {\n        setIsEditing(false);\n        onEdit({ id, text, permissions });\n    };\n    const handleMenuClose = (): void => setIsMenuOpen(false);\n    const handleMenuOpen = (): void => setIsMenuOpen(true);\n    const handleMouseDown = (event: MouseEvent) => {\n        if (isCardDisabled) {\n            return;\n        }\n\n        // Prevents document event handlers from executing because box-annotations relies on\n        // detecting mouse events on the document outside of annotation targets to determine when to\n        // deselect annotations\n        event.stopPropagation();\n    };\n    const handleSelect = () => onSelect(item);\n\n    const handleStatusChange = (newStatus: FeedItemStatus) => onStatusChange({ id, status: newStatus, permissions });\n\n    const createdAtTimestamp = new Date(created_at).getTime();\n    const createdByUser = created_by || PLACEHOLDER_USER;\n    const linkMessage = isCurrentVersion ? messages.annotationActivityPageItem : messages.annotationActivityVersionLink;\n    const linkValue = isCurrentVersion ? target.location.value : getProp(file_version, 'version_number');\n    const message = (description && description.message) || '';\n    const activityLinkMessage = isFileVersionUnavailable\n        ? messages.annotationActivityVersionUnavailable\n        : { ...linkMessage, values: { number: linkValue } };\n    const tetherProps = {\n        attachment: 'top right',\n        className: 'bcs-AnnotationActivity-deleteConfirmationModal',\n        constraints: [{ to: 'scrollParent', attachment: 'together' }],\n        targetAttachment: 'bottom right',\n    };\n\n    const isVideoAnnotation = target?.location?.type === 'frame';\n    const annotationsMillisecondTimestampInHMMSS = isVideoAnnotation\n        ? convertMillisecondsToHMMSS(target.location.value)\n        : null;\n\n    return (\n        <>\n            <SelectableActivityCard\n                className=\"bcs-AnnotationActivity\"\n                data-resin-feature=\"annotations\"\n                data-resin-iscurrent={isCurrentVersion}\n                data-resin-itemid={id}\n                data-resin-target=\"annotationButton\"\n                isDisabled={isCardDisabled}\n                onMouseDown={handleMouseDown}\n                onSelect={handleSelect}\n            >\n                <Media\n                    className={classNames('bcs-AnnotationActivity-media', {\n                        'bcs-is-pending': isPending || error,\n                    })}\n                >\n                    <Media.Figure className=\"bcs-AnnotationActivity-avatar\">\n                        <Avatar getAvatarUrl={getAvatarUrl} user={createdByUser} badgeIcon={<IconAnnotation />} />\n                    </Media.Figure>\n                    <Media.Body>\n                        <div className=\"bcs-AnnotationActivity-headline\">\n                            <UserLink\n                                data-resin-target={ACTIVITY_TARGETS.PROFILE}\n                                getUserProfileUrl={getUserProfileUrl}\n                                id={createdByUser.id}\n                                name={createdByUser.name}\n                            />\n                        </div>\n                        <div className=\"bcs-AnnotationActivity-timestamp\">\n                            <ActivityTimestamp date={createdAtTimestamp} />\n                            {hasVersions && !isVideoAnnotation && (\n                                <AnnotationActivityLink\n                                    className=\"bcs-AnnotationActivity-link\"\n                                    data-resin-target=\"annotationLink\"\n                                    id={id}\n                                    isDisabled={isFileVersionUnavailable}\n                                    message={activityLinkMessage}\n                                    onClick={handleSelect}\n                                />\n                            )}\n                        </div>\n                        <ActivityStatus status={status} />\n                        {isEditing && currentUser ? (\n                            <CommentForm\n                                className=\"bcs-AnnotationActivity-editor\"\n                                entityId={id}\n                                file={file}\n                                getAvatarUrl={getAvatarUrl}\n                                getMentionWithQuery={getMentionWithQuery}\n                                isEditing={isEditing}\n                                isOpen={isEditing}\n                                mentionSelectorContacts={mentionSelectorContacts}\n                                onCancel={handleFormCancel}\n                                updateComment={handleFormSubmit}\n                                user={currentUser}\n                                tagged_message={message}\n                            />\n                        ) : (\n                            <ActivityMessage\n                                getUserProfileUrl={getUserProfileUrl}\n                                id={id}\n                                annotationsMillisecondTimestamp={annotationsMillisecondTimestampInHMMSS}\n                                onClick={handleSelect}\n                                isEdited={isEdited && !isResolved}\n                                tagged_message={message}\n                            />\n                        )}\n                    </Media.Body>\n                </Media>\n                {/* $FlowFixMe */}\n                {error ? <ActivityError {...error} /> : null}\n            </SelectableActivityCard>\n            <TetherComponent {...tetherProps}>\n                {isMenuVisible && (\n                    <AnnotationActivityMenu\n                        canDelete={canDelete}\n                        canEdit={canEdit}\n                        canResolve={canResolve}\n                        className=\"bcs-AnnotationActivity-menu\"\n                        id={id}\n                        isDisabled={isConfirmingDelete}\n                        status={status}\n                        onDelete={handleDelete}\n                        onEdit={handleEdit}\n                        onMenuClose={handleMenuClose}\n                        onMenuOpen={handleMenuOpen}\n                        onStatusChange={handleStatusChange}\n                    />\n                )}\n                {isConfirmingDelete && (\n                    <DeleteConfirmation\n                        data-resin-component={ACTIVITY_TARGETS.ANNOTATION_OPTIONS}\n                        isOpen={isConfirmingDelete}\n                        message={messages.annotationActivityDeletePrompt}\n                        onDeleteCancel={handleDeleteCancel}\n                        onDeleteConfirm={handleDeleteConfirm}\n                    />\n                )}\n            </TetherComponent>\n        </>\n    );\n};\n\nexport default AnnotationActivity;\n"],"mappings":"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","ignoreList":[]}

package/es/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.js

@@ -8,7 +8,7 @@ import CollapsableMessage from './CollapsableMessage';
 import LoadingIndicator, { LoadingIndicatorSize } from '../../../../../components/loading-indicator';
 import ShowOriginalButton from './ShowOriginalButton';
 import TranslateButton from './TranslateButton';
-import formatTaggedMessage from '../../utils/formatTaggedMessage';
+import formatTaggedMessage, { renderTimestampWithText } from '../../utils/formatTaggedMessage';
 import { withFeatureConsumer, isFeatureEnabled } from '../../../../common/feature-checking';
 import messages from './messages';
 import './ActivityMessage.scss';
@@ -85,6 +85,8 @@ class ActivityMessage extends React.Component {
       id,
       intl,
       isEdited,
+      onClick = noop,
+      annotationsMillisecondTimestamp,
       tagged_message,
       translatedTaggedMessage,
       translationEnabled
@@ -101,7 +103,7 @@ class ActivityMessage extends React.Component {
       size: LoadingIndicatorSize.SMALL
     })) : /*#__PURE__*/React.createElement("div", {
       className: "bcs-ActivityMessage"
-    }, /*#__PURE__*/React.createElement(MessageWrapper, null, formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl, intl), isEdited && /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement(MessageWrapper, null, annotationsMillisecondTimestamp ? renderTimestampWithText(annotationsMillisecondTimestamp, onClick, intl, ` ${commentToDisplay}`) : formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl, intl), isEdited && /*#__PURE__*/React.createElement("span", {
       className: "bcs-ActivityMessage-edited"
     }, /*#__PURE__*/React.createElement(FormattedMessage, messages.activityMessageEdited))), translationEnabled ? this.getButton(isTranslation) : null);
   }

package/es/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityMessage.js","names":["React","noop","FormattedMessage","injectIntl","CollapsableMessage","LoadingIndicator","LoadingIndicatorSize","ShowOriginalButton","TranslateButton","formatTaggedMessage","withFeatureConsumer","isFeatureEnabled","messages","ActivityMessage","Component","constructor","args","_defineProperty","isLoading","isTranslation","event","id","tagged_message","onTranslate","translatedTaggedMessage","props","setState","preventDefault","componentDidUpdate","prevProps","translationFailed","prevTaggedMessage","prevTranslationFailed","getButton","button","createElement","handleShowOriginal","handleTranslate","render","features","getUserProfileUrl","intl","isEdited","translationEnabled","state","commentToDisplay","MessageWrapper","Fragment","className","size","SMALL","activityMessageEdited"],"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.tsx"],"sourcesContent":["import * as React from 'react';\nimport noop from 'lodash/noop';\nimport { FormattedMessage, injectIntl, WrappedComponentProps } from 'react-intl';\n\nimport CollapsableMessage from './CollapsableMessage';\nimport LoadingIndicator, { LoadingIndicatorSize } from '../../../../../components/loading-indicator';\nimport ShowOriginalButton from './ShowOriginalButton';\nimport TranslateButton from './TranslateButton';\n\nimport formatTaggedMessage from '../../utils/formatTaggedMessage';\nimport { withFeatureConsumer, isFeatureEnabled } from '../../../../common/feature-checking';\n\nimport messages from './messages';\n\nimport type { GetProfileUrlCallback } from '../../../../common/flowTypes';\nimport type { FeatureConfig } from '../../../../common/feature-checking';\n\nimport './ActivityMessage.scss';\n\nexport interface ActivityMessageProps extends WrappedComponentProps {\n    features: FeatureConfig;\n    getUserProfileUrl?: GetProfileUrlCallback;\n    id: string;\n    isEdited?: boolean;\n    onTranslate?: ({ id, tagged_message }: { id: string; tagged_message: string }) => void;\n    tagged_message: string;\n    translatedTaggedMessage?: string;\n    translationEnabled?: boolean;\n    translationFailed?: boolean | null;\n}\n\ntype State = {\n    isLoading?: boolean;\n    isTranslation?: boolean;\n};\n\nclass ActivityMessage extends React.Component<ActivityMessageProps, State> {\n    static readonly defaultProps = {\n        isEdited: false,\n        translationEnabled: false,\n    };\n\n    state = {\n        isLoading: false,\n        isTranslation: false,\n    };\n\n    componentDidUpdate(prevProps: ActivityMessageProps): void {\n        const { translatedTaggedMessage, translationFailed } = this.props;\n        const { translatedTaggedMessage: prevTaggedMessage, translationFailed: prevTranslationFailed } = prevProps;\n\n        if (prevTaggedMessage === translatedTaggedMessage || prevTranslationFailed === translationFailed) {\n            return;\n        }\n\n        if (translatedTaggedMessage || translationFailed) {\n            this.setState({ isLoading: false });\n        }\n    }\n\n    getButton(isTranslation?: boolean): React.ReactNode {\n        let button = null;\n        if (isTranslation) {\n            button = <ShowOriginalButton handleShowOriginal={this.handleShowOriginal} />;\n        } else {\n            button = <TranslateButton handleTranslate={this.handleTranslate} />;\n        }\n\n        return button;\n    }\n\n    handleTranslate = (event: React.MouseEvent): void => {\n        const { id, tagged_message, onTranslate = noop, translatedTaggedMessage } = this.props;\n        if (!translatedTaggedMessage) {\n            this.setState({ isLoading: true });\n            onTranslate({ id, tagged_message });\n        }\n\n        this.setState({ isTranslation: true });\n        event.preventDefault();\n    };\n\n    handleShowOriginal = (event: React.MouseEvent): void => {\n        this.setState({ isTranslation: false });\n        event.preventDefault();\n    };\n\n    render(): React.ReactNode {\n        const {\n            features,\n            getUserProfileUrl,\n            id,\n            intl,\n            isEdited,\n            tagged_message,\n            translatedTaggedMessage,\n            translationEnabled,\n        } = this.props;\n        const { isLoading, isTranslation } = this.state;\n        const commentToDisplay =\n            translationEnabled && isTranslation && translatedTaggedMessage ? translatedTaggedMessage : tagged_message;\n        const MessageWrapper = isFeatureEnabled(features, 'activityFeed.collapsableMessages.enabled')\n            ? CollapsableMessage\n            : React.Fragment;\n\n        return isLoading ? (\n            <div className=\"bcs-ActivityMessageLoading\">\n                <LoadingIndicator size={LoadingIndicatorSize.SMALL} />\n            </div>\n        ) : (\n            <div className=\"bcs-ActivityMessage\">\n                <MessageWrapper>\n                    {formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl, intl)}\n                    {isEdited && (\n                        <span className=\"bcs-ActivityMessage-edited\">\n                            <FormattedMessage {...messages.activityMessageEdited} />\n                        </span>\n                    )}\n                </MessageWrapper>\n                {translationEnabled ? this.getButton(isTranslation) : null}\n            </div>\n        );\n    }\n}\n\nexport { ActivityMessage };\nexport default withFeatureConsumer(injectIntl(ActivityMessage));\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActivityMessage.js","names":["React","noop","FormattedMessage","injectIntl","CollapsableMessage","LoadingIndicator","LoadingIndicatorSize","ShowOriginalButton","TranslateButton","formatTaggedMessage","renderTimestampWithText","withFeatureConsumer","isFeatureEnabled","messages","ActivityMessage","Component","constructor","args","_defineProperty","isLoading","isTranslation","event","id","tagged_message","onTranslate","translatedTaggedMessage","props","setState","preventDefault","componentDidUpdate","prevProps","translationFailed","prevTaggedMessage","prevTranslationFailed","getButton","button","createElement","handleShowOriginal","handleTranslate","render","features","getUserProfileUrl","intl","isEdited","onClick","annotationsMillisecondTimestamp","translationEnabled","state","commentToDisplay","MessageWrapper","Fragment","className","size","SMALL","activityMessageEdited"],"sources":["../../../../../../src/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.tsx"],"sourcesContent":["import * as React from 'react';\nimport noop from 'lodash/noop';\nimport { FormattedMessage, injectIntl, WrappedComponentProps } from 'react-intl';\n\nimport CollapsableMessage from './CollapsableMessage';\nimport LoadingIndicator, { LoadingIndicatorSize } from '../../../../../components/loading-indicator';\nimport ShowOriginalButton from './ShowOriginalButton';\nimport TranslateButton from './TranslateButton';\n\nimport formatTaggedMessage, { renderTimestampWithText } from '../../utils/formatTaggedMessage';\nimport { withFeatureConsumer, isFeatureEnabled } from '../../../../common/feature-checking';\n\nimport messages from './messages';\n\nimport type { GetProfileUrlCallback } from '../../../../common/flowTypes';\nimport type { FeatureConfig } from '../../../../common/feature-checking';\n\nimport './ActivityMessage.scss';\n\nexport interface ActivityMessageProps extends WrappedComponentProps {\n    features: FeatureConfig;\n    getUserProfileUrl?: GetProfileUrlCallback;\n    id: string;\n    isEdited?: boolean;\n    onClick?: () => void;\n    onTranslate?: ({ id, tagged_message }: { id: string; tagged_message: string }) => void;\n    tagged_message: string;\n    translatedTaggedMessage?: string;\n    translationEnabled?: boolean;\n    translationFailed?: boolean | null;\n    annotationsMillisecondTimestamp?: string | null;\n}\n\ntype State = {\n    isLoading?: boolean;\n    isTranslation?: boolean;\n};\n\nclass ActivityMessage extends React.Component<ActivityMessageProps, State> {\n    static readonly defaultProps = {\n        isEdited: false,\n        translationEnabled: false,\n    };\n\n    state = {\n        isLoading: false,\n        isTranslation: false,\n    };\n\n    componentDidUpdate(prevProps: ActivityMessageProps): void {\n        const { translatedTaggedMessage, translationFailed } = this.props;\n        const { translatedTaggedMessage: prevTaggedMessage, translationFailed: prevTranslationFailed } = prevProps;\n\n        if (prevTaggedMessage === translatedTaggedMessage || prevTranslationFailed === translationFailed) {\n            return;\n        }\n\n        if (translatedTaggedMessage || translationFailed) {\n            this.setState({ isLoading: false });\n        }\n    }\n\n    getButton(isTranslation?: boolean): React.ReactNode {\n        let button = null;\n        if (isTranslation) {\n            button = <ShowOriginalButton handleShowOriginal={this.handleShowOriginal} />;\n        } else {\n            button = <TranslateButton handleTranslate={this.handleTranslate} />;\n        }\n\n        return button;\n    }\n\n    handleTranslate = (event: React.MouseEvent): void => {\n        const { id, tagged_message, onTranslate = noop, translatedTaggedMessage } = this.props;\n        if (!translatedTaggedMessage) {\n            this.setState({ isLoading: true });\n            onTranslate({ id, tagged_message });\n        }\n\n        this.setState({ isTranslation: true });\n        event.preventDefault();\n    };\n\n    handleShowOriginal = (event: React.MouseEvent): void => {\n        this.setState({ isTranslation: false });\n        event.preventDefault();\n    };\n\n    render(): React.ReactNode {\n        const {\n            features,\n            getUserProfileUrl,\n            id,\n            intl,\n            isEdited,\n            onClick = noop,\n            annotationsMillisecondTimestamp,\n            tagged_message,\n            translatedTaggedMessage,\n            translationEnabled,\n        } = this.props;\n        const { isLoading, isTranslation } = this.state;\n        const commentToDisplay =\n            translationEnabled && isTranslation && translatedTaggedMessage ? translatedTaggedMessage : tagged_message;\n        const MessageWrapper = isFeatureEnabled(features, 'activityFeed.collapsableMessages.enabled')\n            ? CollapsableMessage\n            : React.Fragment;\n\n        return isLoading ? (\n            <div className=\"bcs-ActivityMessageLoading\">\n                <LoadingIndicator size={LoadingIndicatorSize.SMALL} />\n            </div>\n        ) : (\n            <div className=\"bcs-ActivityMessage\">\n                <MessageWrapper>\n                    {annotationsMillisecondTimestamp\n                        ? renderTimestampWithText(\n                              annotationsMillisecondTimestamp,\n                              onClick,\n                              intl,\n                              ` ${commentToDisplay}`,\n                          )\n                        : formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl, intl)}\n                    {isEdited && (\n                        <span className=\"bcs-ActivityMessage-edited\">\n                            <FormattedMessage {...messages.activityMessageEdited} />\n                        </span>\n                    )}\n                </MessageWrapper>\n                {translationEnabled ? this.getButton(isTranslation) : null}\n            </div>\n        );\n    }\n}\n\nexport { ActivityMessage };\nexport default withFeatureConsumer(injectIntl(ActivityMessage));\n"],"mappings":"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","ignoreList":[]}

package/es/elements/content-sidebar/activity-feed/utils/formatTaggedMessage.js

@@ -10,6 +10,22 @@ import UserLink from '../common/user-link';
 import messages from '../common/activity-message/messages';
 import { convertTimestampToSeconds, convertMillisecondsToHMMSS } from '../../../../utils/timestamp';
 
+/**
+ * Renders the timestamp button and remaining text
+ * @param timestampInHHMMSS The formatted timestamp string (HH:MM:SS)
+ * @param timestampLabel The aria label for the timestamp button
+ * @param handleClick The click handler for the timestamp button
+ * @param textAfterTimestamp The text that comes after the timestamp
+ * @returns A React Fragment with timestamp button and text
+ */
+export const renderTimestampWithText = (timestampInHHMMSS, handleClick, intl, textAfterTimestamp) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  className: "bcs-ActivityMessage-timestamp"
+}, /*#__PURE__*/React.createElement("button", {
+  "aria-label": intl.formatMessage(messages.activityMessageTimestampLabel),
+  type: "button",
+  onClick: handleClick
+}, timestampInHHMMSS)), textAfterTimestamp);
+
 /**
  * Formats text containing a timestamp by wrapping the timestamp in a Link component
  * @param text The text containing the timestamp
@@ -47,14 +63,7 @@ const formatTimestamp = (text, timestamp, intl) => {
       }
     }
   };
-  const timestampLabel = intl.formatMessage(messages.activityMessageTimestampLabel);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "bcs-ActivityMessage-timestamp"
-  }, /*#__PURE__*/React.createElement("button", {
-    "aria-label": timestampLabel,
-    type: "button",
-    onClick: handleClick
-  }, timestampInHHMMSS)), textAfterTimestamp);
+  return renderTimestampWithText(timestampInHHMMSS, handleClick, intl, textAfterTimestamp);
 };
 
 // this regex matches one of the following regular expressions:

package/es/elements/content-sidebar/activity-feed/utils/formatTaggedMessage.js.flow

@@ -11,6 +11,34 @@ import UserLink from '../common/user-link';
 import messages from '../common/activity-message/messages';
 import { convertTimestampToSeconds, convertMillisecondsToHMMSS } from '../../../../utils/timestamp';
 
+/**
+ * Renders the timestamp button and remaining text
+ * @param timestampInHHMMSS The formatted timestamp string (HH:MM:SS)
+ * @param timestampLabel The aria label for the timestamp button
+ * @param handleClick The click handler for the timestamp button
+ * @param textAfterTimestamp The text that comes after the timestamp
+ * @returns A React Fragment with timestamp button and text
+ */
+export const renderTimestampWithText = (
+    timestampInHHMMSS: string,
+    handleClick: (e: SyntheticMouseEvent<HTMLButtonElement>) => void,
+    intl: IntlShape,
+    textAfterTimestamp: string,
+): React$Element<any> => (
+    <>
+        <div className="bcs-ActivityMessage-timestamp">
+            <button
+                aria-label={intl.formatMessage(messages.activityMessageTimestampLabel)}
+                type="button"
+                onClick={handleClick}
+            >
+                {timestampInHHMMSS}
+            </button>
+        </div>
+        {textAfterTimestamp}
+    </>
+);
+
 /**
  * Formats text containing a timestamp by wrapping the timestamp in a Link component
  * @param text The text containing the timestamp
@@ -51,17 +79,7 @@ const formatTimestamp = (text: string, timestamp: string, intl: IntlShape): Reac
         }
     };
 
-    const timestampLabel = intl.formatMessage(messages.activityMessageTimestampLabel);
-    return (
-        <>
-            <div className="bcs-ActivityMessage-timestamp">
-                <button aria-label={timestampLabel} type="button" onClick={handleClick}>
-                    {timestampInHHMMSS}
-                </button>
-            </div>
-            {textAfterTimestamp}
-        </>
-    );
+    return renderTimestampWithText(timestampInHHMMSS, handleClick, intl, textAfterTimestamp);
 };
 
 // this regex matches one of the following regular expressions:

package/es/elements/content-sidebar/activity-feed/utils/formatTaggedMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatTaggedMessage.js","names":["React","Link","ACTIVITY_TARGETS","UserLink","messages","convertTimestampToSeconds","convertMillisecondsToHMMSS","formatTimestamp","text","timestamp","intl","textAfterTimestamp","replace","strippedTimestamp","timestampSection","exec","timestampValue","split","timestampInMilliseconds","parseInt","Number","isNaN","timestampInHHMMSS","handleClick","e","preventDefault","videoContainer","document","querySelector","video","totalSeconds","currentTime","pause","timestampLabel","formatMessage","activityMessageTimestampLabel","createElement","Fragment","className","type","onClick","splitRegex","formatTaggedMessage","tagged_message","itemID","shouldReturnString","getUserProfileUrl","contentItems","map","contentIndex","contentKey","mentionMatch","match","trigger","id","name","key","MENTION","timestampMatch","urlMatch","url","href","join"],"sources":["../../../../../src/elements/content-sidebar/activity-feed/utils/formatTaggedMessage.js"],"sourcesContent":["/**\n * @flow\n * @file Util for formatting tagged messages\n */\n\nimport * as React from 'react';\nimport type { IntlShape } from 'react-intl';\nimport { Link } from '../../../../components/link';\nimport { ACTIVITY_TARGETS } from '../../../common/interactionTargets';\nimport UserLink from '../common/user-link';\nimport messages from '../common/activity-message/messages';\nimport { convertTimestampToSeconds, convertMillisecondsToHMMSS } from '../../../../utils/timestamp';\n\n/**\n * Formats text containing a timestamp by wrapping the timestamp in a Link component\n * @param text The text containing the timestamp\n * @param timestamp The timestamp string\n * @param intl The intl object method to add the timestamp aria label\n * @returns A React Fragment with formatted timestamp\n */\nconst formatTimestamp = (text: string, timestamp: string, intl: IntlShape): React$Element<any> | string => {\n    if (!timestamp || typeof timestamp !== 'string') {\n        return text;\n    }\n    const textAfterTimestamp = text.replace(timestamp ?? '', '');\n    const strippedTimestamp = timestamp.replace(/#\\[|\\]/g, '');\n    if (!strippedTimestamp) {\n        return text;\n    }\n\n    const timestampSection = /timestamp:\\d+/.exec(timestamp);\n    const timestampValue = timestampSection && timestampSection[0] ? timestampSection[0].split(':')[1] : null;\n    const timestampInMilliseconds = parseInt(timestampValue, 10);\n    if (Number.isNaN(timestampInMilliseconds)) {\n        return textAfterTimestamp;\n    }\n    // convert milliseconds to HH:MM:SS\n    const timestampInHHMMSS = convertMillisecondsToHMMSS(timestampInMilliseconds);\n\n    const handleClick = (e: SyntheticMouseEvent<HTMLButtonElement>): void => {\n        e.preventDefault();\n        const videoContainer = document.querySelector('.bp-media-dash');\n        if (videoContainer) {\n            // $FlowFixMe: querySelector('video') returns an HTMLVideoElement\n            const video: ?HTMLVideoElement = videoContainer.querySelector('video');\n            if (video) {\n                const totalSeconds = convertTimestampToSeconds(timestampInMilliseconds);\n                video.currentTime = totalSeconds;\n                video.pause();\n            }\n        }\n    };\n\n    const timestampLabel = intl.formatMessage(messages.activityMessageTimestampLabel);\n    return (\n        <>\n            <div className=\"bcs-ActivityMessage-timestamp\">\n                <button aria-label={timestampLabel} type=\"button\" onClick={handleClick}>\n                    {timestampInHHMMSS}\n                </button>\n            </div>\n            {textAfterTimestamp}\n        </>\n    );\n};\n\n// this regex matches one of the following regular expressions:\n// mentions: ([@＠﹫]\\[[0-9]+:[^\\]]+])\n// urls: (?:\\b)((?:(?:ht|f)tps?:\\/\\/)[\\w\\._\\-]+(:\\d+)?(\\/[\\w\\-_\\.~\\+\\/#\\?&%=:\\[\\]@!$'\\(\\)\\*;,]*)?)\n// NOTE: There are useless escapes in the regex below, should probably remove them when safe\n/* eslint-disable no-useless-escape */\nconst splitRegex =\n    /((?:[@＠﹫]\\[[0-9]+:[^\\]]+])|(?:\\b(?:(?:ht|f)tps?:\\/\\/)[\\w\\._\\-]+(?::\\d+)?(?:\\/[\\w\\-_\\.~\\+\\/#\\?&%=:\\[\\]@!$'\\(\\)\\*;,]*)?))/gim;\n// eslint-enable no-useless-escape\n/**\n * Formats a message a string and replaces the following:\n * - all occurrence of mention patterns with a UserLink component\n * - all occurrence of urls with a Link component\n * Ex mention format: @[123:Hello World]\n * @param {String} tagged_message The message string to format\n * @param {String} itemID The id of the tagged message\n * @param {Boolean} shouldReturnString The boolean value whether it should return string\n * @param {Function} [getUserProfileUrl] The method to generate a user profile url\n * @param {IntlShape} intl The intl object method to add the timestamp aria label\n * @returns {String|Array<React.Node|String>}\n */\nconst formatTaggedMessage = (\n    tagged_message: string,\n    itemID: string,\n    shouldReturnString: boolean,\n    getUserProfileUrl?: Function,\n    intl: IntlShape,\n): string | Array<React.Node | string> => {\n    const contentItems = tagged_message.split(splitRegex).map((text: string, contentIndex: number) => {\n        const contentKey = `${contentIndex}-${itemID}`;\n        // attempt mention match\n        const mentionMatch = text.match(/([@＠﹫])\\[([0-9]+):([^\\]]+)]/i);\n        if (mentionMatch) {\n            const [, trigger, id, name] = mentionMatch;\n            if (shouldReturnString) {\n                return `${trigger}${name}`;\n            }\n\n            return (\n                <UserLink\n                    key={contentKey}\n                    className=\"bcs-comment-mention\"\n                    data-resin-target={ACTIVITY_TARGETS.MENTION}\n                    getUserProfileUrl={getUserProfileUrl}\n                    id={id}\n                    name={`${trigger}${name}`}\n                />\n            );\n        }\n\n        // Check for timestamp in first item only\n        if (contentIndex === 0 && !shouldReturnString) {\n            const timestampMatch = text.match(/#\\[timestamp:\\d+,versionId:\\d+\\]/);\n            const timestamp = timestampMatch && timestampMatch[0];\n            if (timestamp) {\n                return formatTimestamp(text, timestamp, intl);\n            }\n        }\n\n        if (!shouldReturnString) {\n            // attempt url match\n            // NOTE: There are useless escapes in the regex below, should probably remove them when safe\n            const urlMatch = text.match(\n                // eslint-disable-next-line no-useless-escape\n                /((?:(?:ht|f)tps?:\\/\\/)[\\w\\._\\-]+(?::\\d+)?(?:\\/[\\w\\-_\\.~\\+\\/#\\?&%=:\\[\\]@!$'\\(\\)\\*;,]*)?)/i,\n            );\n            if (urlMatch) {\n                const [, url] = urlMatch;\n                return (\n                    <Link key={contentKey} href={url}>\n                        {url}\n                    </Link>\n                );\n            }\n        }\n\n        return text;\n    });\n\n    if (shouldReturnString) {\n        return contentItems.join('');\n    }\n\n    return contentItems;\n};\n\nexport default formatTaggedMessage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"formatTaggedMessage.js","names":["React","Link","ACTIVITY_TARGETS","UserLink","messages","convertTimestampToSeconds","convertMillisecondsToHMMSS","renderTimestampWithText","timestampInHHMMSS","handleClick","intl","textAfterTimestamp","createElement","Fragment","className","formatMessage","activityMessageTimestampLabel","type","onClick","formatTimestamp","text","timestamp","replace","strippedTimestamp","timestampSection","exec","timestampValue","split","timestampInMilliseconds","parseInt","Number","isNaN","e","preventDefault","videoContainer","document","querySelector","video","totalSeconds","currentTime","pause","splitRegex","formatTaggedMessage","tagged_message","itemID","shouldReturnString","getUserProfileUrl","contentItems","map","contentIndex","contentKey","mentionMatch","match","trigger","id","name","key","MENTION","timestampMatch","urlMatch","url","href","join"],"sources":["../../../../../src/elements/content-sidebar/activity-feed/utils/formatTaggedMessage.js"],"sourcesContent":["/**\n * @flow\n * @file Util for formatting tagged messages\n */\n\nimport * as React from 'react';\nimport type { IntlShape } from 'react-intl';\nimport { Link } from '../../../../components/link';\nimport { ACTIVITY_TARGETS } from '../../../common/interactionTargets';\nimport UserLink from '../common/user-link';\nimport messages from '../common/activity-message/messages';\nimport { convertTimestampToSeconds, convertMillisecondsToHMMSS } from '../../../../utils/timestamp';\n\n/**\n * Renders the timestamp button and remaining text\n * @param timestampInHHMMSS The formatted timestamp string (HH:MM:SS)\n * @param timestampLabel The aria label for the timestamp button\n * @param handleClick The click handler for the timestamp button\n * @param textAfterTimestamp The text that comes after the timestamp\n * @returns A React Fragment with timestamp button and text\n */\nexport const renderTimestampWithText = (\n    timestampInHHMMSS: string,\n    handleClick: (e: SyntheticMouseEvent<HTMLButtonElement>) => void,\n    intl: IntlShape,\n    textAfterTimestamp: string,\n): React$Element<any> => (\n    <>\n        <div className=\"bcs-ActivityMessage-timestamp\">\n            <button\n                aria-label={intl.formatMessage(messages.activityMessageTimestampLabel)}\n                type=\"button\"\n                onClick={handleClick}\n            >\n                {timestampInHHMMSS}\n            </button>\n        </div>\n        {textAfterTimestamp}\n    </>\n);\n\n/**\n * Formats text containing a timestamp by wrapping the timestamp in a Link component\n * @param text The text containing the timestamp\n * @param timestamp The timestamp string\n * @param intl The intl object method to add the timestamp aria label\n * @returns A React Fragment with formatted timestamp\n */\nconst formatTimestamp = (text: string, timestamp: string, intl: IntlShape): React$Element<any> | string => {\n    if (!timestamp || typeof timestamp !== 'string') {\n        return text;\n    }\n    const textAfterTimestamp = text.replace(timestamp ?? '', '');\n    const strippedTimestamp = timestamp.replace(/#\\[|\\]/g, '');\n    if (!strippedTimestamp) {\n        return text;\n    }\n\n    const timestampSection = /timestamp:\\d+/.exec(timestamp);\n    const timestampValue = timestampSection && timestampSection[0] ? timestampSection[0].split(':')[1] : null;\n    const timestampInMilliseconds = parseInt(timestampValue, 10);\n    if (Number.isNaN(timestampInMilliseconds)) {\n        return textAfterTimestamp;\n    }\n    // convert milliseconds to HH:MM:SS\n    const timestampInHHMMSS = convertMillisecondsToHMMSS(timestampInMilliseconds);\n\n    const handleClick = (e: SyntheticMouseEvent<HTMLButtonElement>): void => {\n        e.preventDefault();\n        const videoContainer = document.querySelector('.bp-media-dash');\n        if (videoContainer) {\n            // $FlowFixMe: querySelector('video') returns an HTMLVideoElement\n            const video: ?HTMLVideoElement = videoContainer.querySelector('video');\n            if (video) {\n                const totalSeconds = convertTimestampToSeconds(timestampInMilliseconds);\n                video.currentTime = totalSeconds;\n                video.pause();\n            }\n        }\n    };\n\n    return renderTimestampWithText(timestampInHHMMSS, handleClick, intl, textAfterTimestamp);\n};\n\n// this regex matches one of the following regular expressions:\n// mentions: ([@＠﹫]\\[[0-9]+:[^\\]]+])\n// urls: (?:\\b)((?:(?:ht|f)tps?:\\/\\/)[\\w\\._\\-]+(:\\d+)?(\\/[\\w\\-_\\.~\\+\\/#\\?&%=:\\[\\]@!$'\\(\\)\\*;,]*)?)\n// NOTE: There are useless escapes in the regex below, should probably remove them when safe\n/* eslint-disable no-useless-escape */\nconst splitRegex =\n    /((?:[@＠﹫]\\[[0-9]+:[^\\]]+])|(?:\\b(?:(?:ht|f)tps?:\\/\\/)[\\w\\._\\-]+(?::\\d+)?(?:\\/[\\w\\-_\\.~\\+\\/#\\?&%=:\\[\\]@!$'\\(\\)\\*;,]*)?))/gim;\n// eslint-enable no-useless-escape\n/**\n * Formats a message a string and replaces the following:\n * - all occurrence of mention patterns with a UserLink component\n * - all occurrence of urls with a Link component\n * Ex mention format: @[123:Hello World]\n * @param {String} tagged_message The message string to format\n * @param {String} itemID The id of the tagged message\n * @param {Boolean} shouldReturnString The boolean value whether it should return string\n * @param {Function} [getUserProfileUrl] The method to generate a user profile url\n * @param {IntlShape} intl The intl object method to add the timestamp aria label\n * @returns {String|Array<React.Node|String>}\n */\nconst formatTaggedMessage = (\n    tagged_message: string,\n    itemID: string,\n    shouldReturnString: boolean,\n    getUserProfileUrl?: Function,\n    intl: IntlShape,\n): string | Array<React.Node | string> => {\n    const contentItems = tagged_message.split(splitRegex).map((text: string, contentIndex: number) => {\n        const contentKey = `${contentIndex}-${itemID}`;\n        // attempt mention match\n        const mentionMatch = text.match(/([@＠﹫])\\[([0-9]+):([^\\]]+)]/i);\n        if (mentionMatch) {\n            const [, trigger, id, name] = mentionMatch;\n            if (shouldReturnString) {\n                return `${trigger}${name}`;\n            }\n\n            return (\n                <UserLink\n                    key={contentKey}\n                    className=\"bcs-comment-mention\"\n                    data-resin-target={ACTIVITY_TARGETS.MENTION}\n                    getUserProfileUrl={getUserProfileUrl}\n                    id={id}\n                    name={`${trigger}${name}`}\n                />\n            );\n        }\n\n        // Check for timestamp in first item only\n        if (contentIndex === 0 && !shouldReturnString) {\n            const timestampMatch = text.match(/#\\[timestamp:\\d+,versionId:\\d+\\]/);\n            const timestamp = timestampMatch && timestampMatch[0];\n            if (timestamp) {\n                return formatTimestamp(text, timestamp, intl);\n            }\n        }\n\n        if (!shouldReturnString) {\n            // attempt url match\n            // NOTE: There are useless escapes in the regex below, should probably remove them when safe\n            const urlMatch = text.match(\n                // eslint-disable-next-line no-useless-escape\n                /((?:(?:ht|f)tps?:\\/\\/)[\\w\\._\\-]+(?::\\d+)?(?:\\/[\\w\\-_\\.~\\+\\/#\\?&%=:\\[\\]@!$'\\(\\)\\*;,]*)?)/i,\n            );\n            if (urlMatch) {\n                const [, url] = urlMatch;\n                return (\n                    <Link key={contentKey} href={url}>\n                        {url}\n                    </Link>\n                );\n            }\n        }\n\n        return text;\n    });\n\n    if (shouldReturnString) {\n        return contentItems.join('');\n    }\n\n    return contentItems;\n};\n\nexport default formatTaggedMessage;\n"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,IAAI,QAAQ,6BAA6B;AAClD,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,QAAQ,MAAM,qCAAqC;AAC1D,SAASC,yBAAyB,EAAEC,0BAA0B,QAAQ,6BAA6B;;AAEnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,uBAAuB,GAAGA,CACnCC,iBAAyB,EACzBC,WAAgE,EAChEC,IAAe,EACfC,kBAA0B,kBAE1BX,KAAA,CAAAY,aAAA,CAAAZ,KAAA,CAAAa,QAAA,qBACIb,KAAA,CAAAY,aAAA;EAAKE,SAAS,EAAC;AAA+B,gBAC1Cd,KAAA,CAAAY,aAAA;EACI,cAAYF,IAAI,CAACK,aAAa,CAACX,QAAQ,CAACY,6BAA6B,CAAE;EACvEC,IAAI,EAAC,QAAQ;EACbC,OAAO,EAAET;AAAY,GAEpBD,iBACG,CACP,CAAC,EACLG,kBACH,CACL;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMQ,eAAe,GAAGA,CAACC,IAAY,EAAEC,SAAiB,EAAEX,IAAe,KAAkC;EACvG,IAAI,CAACW,SAAS,IAAI,OAAOA,SAAS,KAAK,QAAQ,EAAE;IAC7C,OAAOD,IAAI;EACf;EACA,MAAMT,kBAAkB,GAAGS,IAAI,CAACE,OAAO,CAACD,SAAS,IAAI,EAAE,EAAE,EAAE,CAAC;EAC5D,MAAME,iBAAiB,GAAGF,SAAS,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC;EAC1D,IAAI,CAACC,iBAAiB,EAAE;IACpB,OAAOH,IAAI;EACf;EAEA,MAAMI,gBAAgB,GAAG,eAAe,CAACC,IAAI,CAACJ,SAAS,CAAC;EACxD,MAAMK,cAAc,GAAGF,gBAAgB,IAAIA,gBAAgB,CAAC,CAAC,CAAC,GAAGA,gBAAgB,CAAC,CAAC,CAAC,CAACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;EACzG,MAAMC,uBAAuB,GAAGC,QAAQ,CAACH,cAAc,EAAE,EAAE,CAAC;EAC5D,IAAII,MAAM,CAACC,KAAK,CAACH,uBAAuB,CAAC,EAAE;IACvC,OAAOjB,kBAAkB;EAC7B;EACA;EACA,MAAMH,iBAAiB,GAAGF,0BAA0B,CAACsB,uBAAuB,CAAC;EAE7E,MAAMnB,WAAW,GAAIuB,CAAyC,IAAW;IACrEA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClB,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa,CAAC,gBAAgB,CAAC;IAC/D,IAAIF,cAAc,EAAE;MAChB;MACA,MAAMG,KAAwB,GAAGH,cAAc,CAACE,aAAa,CAAC,OAAO,CAAC;MACtE,IAAIC,KAAK,EAAE;QACP,MAAMC,YAAY,GAAGjC,yBAAyB,CAACuB,uBAAuB,CAAC;QACvES,KAAK,CAACE,WAAW,GAAGD,YAAY;QAChCD,KAAK,CAACG,KAAK,CAAC,CAAC;MACjB;IACJ;EACJ,CAAC;EAED,OAAOjC,uBAAuB,CAACC,iBAAiB,EAAEC,WAAW,EAAEC,IAAI,EAAEC,kBAAkB,CAAC;AAC5F,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAM8B,UAAU,GACZ,4HAA4H;AAChI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAGA,CACxBC,cAAsB,EACtBC,MAAc,EACdC,kBAA2B,EAC3BC,iBAA4B,EAC5BpC,IAAe,KACuB;EACtC,MAAMqC,YAAY,GAAGJ,cAAc,CAAChB,KAAK,CAACc,UAAU,CAAC,CAACO,GAAG,CAAC,CAAC5B,IAAY,EAAE6B,YAAoB,KAAK;IAC9F,MAAMC,UAAU,GAAG,GAAGD,YAAY,IAAIL,MAAM,EAAE;IAC9C;IACA,MAAMO,YAAY,GAAG/B,IAAI,CAACgC,KAAK,CAAC,8BAA8B,CAAC;IAC/D,IAAID,YAAY,EAAE;MACd,MAAM,GAAGE,OAAO,EAAEC,EAAE,EAAEC,IAAI,CAAC,GAAGJ,YAAY;MAC1C,IAAIN,kBAAkB,EAAE;QACpB,OAAO,GAAGQ,OAAO,GAAGE,IAAI,EAAE;MAC9B;MAEA,oBACIvD,KAAA,CAAAY,aAAA,CAACT,QAAQ;QACLqD,GAAG,EAAEN,UAAW;QAChBpC,SAAS,EAAC,qBAAqB;QAC/B,qBAAmBZ,gBAAgB,CAACuD,OAAQ;QAC5CX,iBAAiB,EAAEA,iBAAkB;QACrCQ,EAAE,EAAEA,EAAG;QACPC,IAAI,EAAE,GAAGF,OAAO,GAAGE,IAAI;MAAG,CAC7B,CAAC;IAEV;;IAEA;IACA,IAAIN,YAAY,KAAK,CAAC,IAAI,CAACJ,kBAAkB,EAAE;MAC3C,MAAMa,cAAc,GAAGtC,IAAI,CAACgC,KAAK,CAAC,kCAAkC,CAAC;MACrE,MAAM/B,SAAS,GAAGqC,cAAc,IAAIA,cAAc,CAAC,CAAC,CAAC;MACrD,IAAIrC,SAAS,EAAE;QACX,OAAOF,eAAe,CAACC,IAAI,EAAEC,SAAS,EAAEX,IAAI,CAAC;MACjD;IACJ;IAEA,IAAI,CAACmC,kBAAkB,EAAE;MACrB;MACA;MACA,MAAMc,QAAQ,GAAGvC,IAAI,CAACgC,KAAK;MACvB;MACA,0FACJ,CAAC;MACD,IAAIO,QAAQ,EAAE;QACV,MAAM,GAAGC,GAAG,CAAC,GAAGD,QAAQ;QACxB,oBACI3D,KAAA,CAAAY,aAAA,CAACX,IAAI;UAACuD,GAAG,EAAEN,UAAW;UAACW,IAAI,EAAED;QAAI,GAC5BA,GACC,CAAC;MAEf;IACJ;IAEA,OAAOxC,IAAI;EACf,CAAC,CAAC;EAEF,IAAIyB,kBAAkB,EAAE;IACpB,OAAOE,YAAY,CAACe,IAAI,CAAC,EAAE,CAAC;EAChC;EAEA,OAAOf,YAAY;AACvB,CAAC;AAED,eAAeL,mBAAmB","ignoreList":[]}

package/es/features/security-cloud-game/DragCloud.js

@@ -46,6 +46,7 @@ const DragCloud = ({
   updateLiveText,
   updatePosition
 }) => {
+  const nodeRef = React.useRef({});
   const [isMoving, setIsMoving] = useState(false);
   const dragCloudClasses = classNames('bdl-DragCloud', {
     'is-moving': isMoving
@@ -156,12 +157,14 @@ const DragCloud = ({
     trailing: true
   });
   return /*#__PURE__*/React.createElement(Draggable, {
+    nodeRef: nodeRef,
     bounds: "parent",
     disabled: disabled,
     onDrag: onDrag,
     onStop: onDrop,
     position: position
   }, /*#__PURE__*/React.createElement("div", {
+    ref: nodeRef,
     className: dragCloudClasses,
     onBlur: onBlur,
     onKeyDown: onKeyDown,

package/es/features/security-cloud-game/DragCloud.js.flow

@@ -33,6 +33,7 @@ const DragCloud = ({
     updateLiveText,
     updatePosition,
 }) => {
+    const nodeRef = React.useRef({});
     const [isMoving, setIsMoving] = useState(false);
 
     const dragCloudClasses = classNames('bdl-DragCloud', {
@@ -137,8 +138,22 @@ const DragCloud = ({
     const onDrag = throttle((e, { x, y }) => updatePosition({ x, y }), 100, { leading: true, trailing: true });
 
     return (
-        <Draggable bounds="parent" disabled={disabled} onDrag={onDrag} onStop={onDrop} position={position}>
-            <div className={dragCloudClasses} onBlur={onBlur} onKeyDown={onKeyDown} role="button" tabIndex={0}>
+        <Draggable
+            nodeRef={nodeRef}
+            bounds="parent"
+            disabled={disabled}
+            onDrag={onDrag}
+            onStop={onDrop}
+            position={position}
+        >
+            <div
+                ref={nodeRef}
+                className={dragCloudClasses}
+                onBlur={onBlur}
+                onKeyDown={onKeyDown}
+                role="button"
+                tabIndex={0}
+            >
                 <IconCloud
                     filter={{ id: 'drop-shadow', definition: <DropShadowFilter /> }}
                     height={cloudSize}

package/es/features/security-cloud-game/DragCloud.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragCloud.js","names":["PropTypes","React","useState","injectIntl","classNames","throttle","Draggable","IconCloud","messages","getGridPosition","DropShadowFilter","createElement","id","in","stdDeviation","dx","dy","result","floodColor","floodOpacity","in2","operator","DragCloud","cloudSize","disabled","gameBoardSize","height","width","gridTrackSize","intl","formatMessage","onDrop","position","updateLiveText","updatePosition","isMoving","setIsMoving","dragCloudClasses","moveLeft","newX","x","_objectSpread","Math","max","reachLeftEdge","moveRight","maxX","min","reachRightEdge","moveUp","newY","y","reachTopEdge","moveDown","maxY","reachBottomEdge","handleSpacebar","cloudStatusText","cloudDropped","cloudGrabbed","currentPositionText","currentPosition","onKeyDown","event","preventDefault","stopPropagation","key","onBlur","onDrag","e","leading","trailing","bounds","onStop","className","role","tabIndex","filter","definition","title","cloudObject","displayName","propTypes","number","bool","objectOf","any","isRequired","func","DragCloudBase"],"sources":["../../../src/features/security-cloud-game/DragCloud.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\nimport { injectIntl } from 'react-intl';\nimport classNames from 'classnames';\nimport throttle from 'lodash/throttle';\nimport Draggable from 'react-draggable';\n\nimport IconCloud from '../../icons/general/IconCloud';\nimport messages from './messages';\nimport { getGridPosition } from './utils';\n\nconst DropShadowFilter = () => (\n    <filter id=\"drop-shadow\">\n        <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"2\" />\n        <feOffset dx=\"2\" dy=\"2\" result=\"offsetblur\" />\n        <feFlood floodColor=\"black\" floodOpacity=\"0.3\" />\n        <feComposite in2=\"offsetblur\" operator=\"in\" />\n        <feMerge>\n            <feMergeNode />\n            <feMergeNode in=\"SourceGraphic\" />\n        </feMerge>\n    </filter>\n);\n\nconst DragCloud = ({\n    cloudSize,\n    disabled,\n    gameBoardSize: { height, width },\n    gridTrackSize,\n    intl: { formatMessage },\n    onDrop,\n    position,\n    updateLiveText,\n    updatePosition,\n}) => {\n    const [isMoving, setIsMoving] = useState(false);\n\n    const dragCloudClasses = classNames('bdl-DragCloud', {\n        'is-moving': isMoving,\n    });\n\n    const moveLeft = () => {\n        const newX = position.x - gridTrackSize;\n        updatePosition({ ...position, x: Math.max(newX, 0) }, true);\n        if (newX < 0) {\n            updateLiveText(formatMessage(messages.reachLeftEdge));\n        }\n    };\n\n    const moveRight = () => {\n        const maxX = width - cloudSize;\n        const newX = position.x + gridTrackSize;\n        updatePosition({ ...position, x: Math.min(newX, maxX) }, true);\n        if (newX > maxX) {\n            updateLiveText(formatMessage(messages.reachRightEdge));\n        }\n    };\n\n    const moveUp = () => {\n        const newY = position.y - gridTrackSize;\n        updatePosition({ ...position, y: Math.max(newY, 0) }, true);\n        if (newY < 0) {\n            updateLiveText(formatMessage(messages.reachTopEdge));\n        }\n    };\n\n    const moveDown = () => {\n        const maxY = height - cloudSize;\n        const newY = position.y + gridTrackSize;\n        updatePosition({ ...position, y: Math.min(newY, maxY) }, true);\n        if (newY > maxY) {\n            updateLiveText(formatMessage(messages.reachBottomEdge));\n        }\n    };\n\n    const handleSpacebar = () => {\n        const cloudStatusText = formatMessage(isMoving ? messages.cloudDropped : messages.cloudGrabbed);\n        const currentPositionText = formatMessage(messages.currentPosition, getGridPosition(position, gridTrackSize));\n        updateLiveText(`${cloudStatusText} ${currentPositionText}`, true);\n\n        if (isMoving) {\n            onDrop();\n        }\n\n        setIsMoving(!isMoving);\n    };\n\n    /**\n     * DragCloud keyboard event handler. Supports Up/Down/Left/Right arrow keys and Spacebar\n     * @param {KeyboardEvent} event - The drag event\n     * @returns {void}\n     */\n    const onKeyDown = event => {\n        if (disabled) {\n            return;\n        }\n\n        if (isMoving) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n\n        if (event.key === ' ') {\n            handleSpacebar();\n        } else if (isMoving) {\n            switch (event.key) {\n                case 'ArrowUp':\n                    moveUp();\n                    break;\n                case 'ArrowDown':\n                    moveDown();\n                    break;\n                case 'ArrowLeft':\n                    moveLeft();\n                    break;\n                case 'ArrowRight':\n                    moveRight();\n                    break;\n                default:\n                    break;\n            }\n        }\n    };\n\n    /**\n     * Reset isMoving state when DragCloud loses focus\n     * @returns {void}\n     */\n    const onBlur = () => setIsMoving(false);\n\n    /**\n     * DragCloud drag event handler. Updates current position.\n     * @param {MouseEvent} e - The drag event\n     * @param {object} { x, y } - Object which contains x and y coordinate of the drag event.\n     * @returns {void}\n     */\n    const onDrag = throttle((e, { x, y }) => updatePosition({ x, y }), 100, { leading: true, trailing: true });\n\n    return (\n        <Draggable bounds=\"parent\" disabled={disabled} onDrag={onDrag} onStop={onDrop} position={position}>\n            <div className={dragCloudClasses} onBlur={onBlur} onKeyDown={onKeyDown} role=\"button\" tabIndex={0}>\n                <IconCloud\n                    filter={{ id: 'drop-shadow', definition: <DropShadowFilter /> }}\n                    height={cloudSize}\n                    title={formatMessage(messages.cloudObject)}\n                    width={cloudSize}\n                />\n            </div>\n        </Draggable>\n    );\n};\n\nDragCloud.displayName = 'DragCloud';\n\nDragCloud.propTypes = {\n    cloudSize: PropTypes.number,\n    disabled: PropTypes.bool,\n    gameBoardSize: PropTypes.objectOf(PropTypes.number),\n    gridTrackSize: PropTypes.number,\n    intl: PropTypes.any,\n    position: PropTypes.objectOf(PropTypes.number).isRequired,\n    onDrop: PropTypes.func,\n    updateLiveText: PropTypes.func,\n    updatePosition: PropTypes.func,\n};\n\n// Actual export\nexport { DragCloud as DragCloudBase };\nexport default injectIntl(DragCloud);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DragCloud.js","names":["PropTypes","React","useState","injectIntl","classNames","throttle","Draggable","IconCloud","messages","getGridPosition","DropShadowFilter","createElement","id","in","stdDeviation","dx","dy","result","floodColor","floodOpacity","in2","operator","DragCloud","cloudSize","disabled","gameBoardSize","height","width","gridTrackSize","intl","formatMessage","onDrop","position","updateLiveText","updatePosition","nodeRef","useRef","isMoving","setIsMoving","dragCloudClasses","moveLeft","newX","x","_objectSpread","Math","max","reachLeftEdge","moveRight","maxX","min","reachRightEdge","moveUp","newY","y","reachTopEdge","moveDown","maxY","reachBottomEdge","handleSpacebar","cloudStatusText","cloudDropped","cloudGrabbed","currentPositionText","currentPosition","onKeyDown","event","preventDefault","stopPropagation","key","onBlur","onDrag","e","leading","trailing","bounds","onStop","ref","className","role","tabIndex","filter","definition","title","cloudObject","displayName","propTypes","number","bool","objectOf","any","isRequired","func","DragCloudBase"],"sources":["../../../src/features/security-cloud-game/DragCloud.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\nimport { injectIntl } from 'react-intl';\nimport classNames from 'classnames';\nimport throttle from 'lodash/throttle';\nimport Draggable from 'react-draggable';\n\nimport IconCloud from '../../icons/general/IconCloud';\nimport messages from './messages';\nimport { getGridPosition } from './utils';\n\nconst DropShadowFilter = () => (\n    <filter id=\"drop-shadow\">\n        <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"2\" />\n        <feOffset dx=\"2\" dy=\"2\" result=\"offsetblur\" />\n        <feFlood floodColor=\"black\" floodOpacity=\"0.3\" />\n        <feComposite in2=\"offsetblur\" operator=\"in\" />\n        <feMerge>\n            <feMergeNode />\n            <feMergeNode in=\"SourceGraphic\" />\n        </feMerge>\n    </filter>\n);\n\nconst DragCloud = ({\n    cloudSize,\n    disabled,\n    gameBoardSize: { height, width },\n    gridTrackSize,\n    intl: { formatMessage },\n    onDrop,\n    position,\n    updateLiveText,\n    updatePosition,\n}) => {\n    const nodeRef = React.useRef({});\n    const [isMoving, setIsMoving] = useState(false);\n\n    const dragCloudClasses = classNames('bdl-DragCloud', {\n        'is-moving': isMoving,\n    });\n\n    const moveLeft = () => {\n        const newX = position.x - gridTrackSize;\n        updatePosition({ ...position, x: Math.max(newX, 0) }, true);\n        if (newX < 0) {\n            updateLiveText(formatMessage(messages.reachLeftEdge));\n        }\n    };\n\n    const moveRight = () => {\n        const maxX = width - cloudSize;\n        const newX = position.x + gridTrackSize;\n        updatePosition({ ...position, x: Math.min(newX, maxX) }, true);\n        if (newX > maxX) {\n            updateLiveText(formatMessage(messages.reachRightEdge));\n        }\n    };\n\n    const moveUp = () => {\n        const newY = position.y - gridTrackSize;\n        updatePosition({ ...position, y: Math.max(newY, 0) }, true);\n        if (newY < 0) {\n            updateLiveText(formatMessage(messages.reachTopEdge));\n        }\n    };\n\n    const moveDown = () => {\n        const maxY = height - cloudSize;\n        const newY = position.y + gridTrackSize;\n        updatePosition({ ...position, y: Math.min(newY, maxY) }, true);\n        if (newY > maxY) {\n            updateLiveText(formatMessage(messages.reachBottomEdge));\n        }\n    };\n\n    const handleSpacebar = () => {\n        const cloudStatusText = formatMessage(isMoving ? messages.cloudDropped : messages.cloudGrabbed);\n        const currentPositionText = formatMessage(messages.currentPosition, getGridPosition(position, gridTrackSize));\n        updateLiveText(`${cloudStatusText} ${currentPositionText}`, true);\n\n        if (isMoving) {\n            onDrop();\n        }\n\n        setIsMoving(!isMoving);\n    };\n\n    /**\n     * DragCloud keyboard event handler. Supports Up/Down/Left/Right arrow keys and Spacebar\n     * @param {KeyboardEvent} event - The drag event\n     * @returns {void}\n     */\n    const onKeyDown = event => {\n        if (disabled) {\n            return;\n        }\n\n        if (isMoving) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n\n        if (event.key === ' ') {\n            handleSpacebar();\n        } else if (isMoving) {\n            switch (event.key) {\n                case 'ArrowUp':\n                    moveUp();\n                    break;\n                case 'ArrowDown':\n                    moveDown();\n                    break;\n                case 'ArrowLeft':\n                    moveLeft();\n                    break;\n                case 'ArrowRight':\n                    moveRight();\n                    break;\n                default:\n                    break;\n            }\n        }\n    };\n\n    /**\n     * Reset isMoving state when DragCloud loses focus\n     * @returns {void}\n     */\n    const onBlur = () => setIsMoving(false);\n\n    /**\n     * DragCloud drag event handler. Updates current position.\n     * @param {MouseEvent} e - The drag event\n     * @param {object} { x, y } - Object which contains x and y coordinate of the drag event.\n     * @returns {void}\n     */\n    const onDrag = throttle((e, { x, y }) => updatePosition({ x, y }), 100, { leading: true, trailing: true });\n\n    return (\n        <Draggable\n            nodeRef={nodeRef}\n            bounds=\"parent\"\n            disabled={disabled}\n            onDrag={onDrag}\n            onStop={onDrop}\n            position={position}\n        >\n            <div\n                ref={nodeRef}\n                className={dragCloudClasses}\n                onBlur={onBlur}\n                onKeyDown={onKeyDown}\n                role=\"button\"\n                tabIndex={0}\n            >\n                <IconCloud\n                    filter={{ id: 'drop-shadow', definition: <DropShadowFilter /> }}\n                    height={cloudSize}\n                    title={formatMessage(messages.cloudObject)}\n                    width={cloudSize}\n                />\n            </div>\n        </Draggable>\n    );\n};\n\nDragCloud.displayName = 'DragCloud';\n\nDragCloud.propTypes = {\n    cloudSize: PropTypes.number,\n    disabled: PropTypes.bool,\n    gameBoardSize: PropTypes.objectOf(PropTypes.number),\n    gridTrackSize: PropTypes.number,\n    intl: PropTypes.any,\n    position: PropTypes.objectOf(PropTypes.number).isRequired,\n    onDrop: PropTypes.func,\n    updateLiveText: PropTypes.func,\n    updatePosition: PropTypes.func,\n};\n\n// Actual export\nexport { DragCloud as DragCloudBase };\nexport default injectIntl(DragCloud);\n"],"mappings":";;;;;AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU,QAAQ,YAAY;AACvC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,QAAQ,MAAM,iBAAiB;AACtC,OAAOC,SAAS,MAAM,iBAAiB;AAEvC,OAAOC,SAAS,MAAM,+BAA+B;AACrD,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAASC,eAAe,QAAQ,SAAS;AAEzC,MAAMC,gBAAgB,GAAGA,CAAA,kBACrBT,KAAA,CAAAU,aAAA;EAAQC,EAAE,EAAC;AAAa,gBACpBX,KAAA,CAAAU,aAAA;EAAgBE,EAAE,EAAC,aAAa;EAACC,YAAY,EAAC;AAAG,CAAE,CAAC,eACpDb,KAAA,CAAAU,aAAA;EAAUI,EAAE,EAAC,GAAG;EAACC,EAAE,EAAC,GAAG;EAACC,MAAM,EAAC;AAAY,CAAE,CAAC,eAC9ChB,KAAA,CAAAU,aAAA;EAASO,UAAU,EAAC,OAAO;EAACC,YAAY,EAAC;AAAK,CAAE,CAAC,eACjDlB,KAAA,CAAAU,aAAA;EAAaS,GAAG,EAAC,YAAY;EAACC,QAAQ,EAAC;AAAI,CAAE,CAAC,eAC9CpB,KAAA,CAAAU,aAAA,+BACIV,KAAA,CAAAU,aAAA,oBAAc,CAAC,eACfV,KAAA,CAAAU,aAAA;EAAaE,EAAE,EAAC;AAAe,CAAE,CAC5B,CACL,CACX;AAED,MAAMS,SAAS,GAAGA,CAAC;EACfC,SAAS;EACTC,QAAQ;EACRC,aAAa,EAAE;IAAEC,MAAM;IAAEC;EAAM,CAAC;EAChCC,aAAa;EACbC,IAAI,EAAE;IAAEC;EAAc,CAAC;EACvBC,MAAM;EACNC,QAAQ;EACRC,cAAc;EACdC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGlC,KAAK,CAACmC,MAAM,CAAC,CAAC,CAAC,CAAC;EAChC,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGpC,QAAQ,CAAC,KAAK,CAAC;EAE/C,MAAMqC,gBAAgB,GAAGnC,UAAU,CAAC,eAAe,EAAE;IACjD,WAAW,EAAEiC;EACjB,CAAC,CAAC;EAEF,MAAMG,QAAQ,GAAGA,CAAA,KAAM;IACnB,MAAMC,IAAI,GAAGT,QAAQ,CAACU,CAAC,GAAGd,aAAa;IACvCM,cAAc,CAAAS,aAAA,CAAAA,aAAA,KAAMX,QAAQ;MAAEU,CAAC,EAAEE,IAAI,CAACC,GAAG,CAACJ,IAAI,EAAE,CAAC;IAAC,IAAI,IAAI,CAAC;IAC3D,IAAIA,IAAI,GAAG,CAAC,EAAE;MACVR,cAAc,CAACH,aAAa,CAACtB,QAAQ,CAACsC,aAAa,CAAC,CAAC;IACzD;EACJ,CAAC;EAED,MAAMC,SAAS,GAAGA,CAAA,KAAM;IACpB,MAAMC,IAAI,GAAGrB,KAAK,GAAGJ,SAAS;IAC9B,MAAMkB,IAAI,GAAGT,QAAQ,CAACU,CAAC,GAAGd,aAAa;IACvCM,cAAc,CAAAS,aAAA,CAAAA,aAAA,KAAMX,QAAQ;MAAEU,CAAC,EAAEE,IAAI,CAACK,GAAG,CAACR,IAAI,EAAEO,IAAI;IAAC,IAAI,IAAI,CAAC;IAC9D,IAAIP,IAAI,GAAGO,IAAI,EAAE;MACbf,cAAc,CAACH,aAAa,CAACtB,QAAQ,CAAC0C,cAAc,CAAC,CAAC;IAC1D;EACJ,CAAC;EAED,MAAMC,MAAM,GAAGA,CAAA,KAAM;IACjB,MAAMC,IAAI,GAAGpB,QAAQ,CAACqB,CAAC,GAAGzB,aAAa;IACvCM,cAAc,CAAAS,aAAA,CAAAA,aAAA,KAAMX,QAAQ;MAAEqB,CAAC,EAAET,IAAI,CAACC,GAAG,CAACO,IAAI,EAAE,CAAC;IAAC,IAAI,IAAI,CAAC;IAC3D,IAAIA,IAAI,GAAG,CAAC,EAAE;MACVnB,cAAc,CAACH,aAAa,CAACtB,QAAQ,CAAC8C,YAAY,CAAC,CAAC;IACxD;EACJ,CAAC;EAED,MAAMC,QAAQ,GAAGA,CAAA,KAAM;IACnB,MAAMC,IAAI,GAAG9B,MAAM,GAAGH,SAAS;IAC/B,MAAM6B,IAAI,GAAGpB,QAAQ,CAACqB,CAAC,GAAGzB,aAAa;IACvCM,cAAc,CAAAS,aAAA,CAAAA,aAAA,KAAMX,QAAQ;MAAEqB,CAAC,EAAET,IAAI,CAACK,GAAG,CAACG,IAAI,EAAEI,IAAI;IAAC,IAAI,IAAI,CAAC;IAC9D,IAAIJ,IAAI,GAAGI,IAAI,EAAE;MACbvB,cAAc,CAACH,aAAa,CAACtB,QAAQ,CAACiD,eAAe,CAAC,CAAC;IAC3D;EACJ,CAAC;EAED,MAAMC,cAAc,GAAGA,CAAA,KAAM;IACzB,MAAMC,eAAe,GAAG7B,aAAa,CAACO,QAAQ,GAAG7B,QAAQ,CAACoD,YAAY,GAAGpD,QAAQ,CAACqD,YAAY,CAAC;IAC/F,MAAMC,mBAAmB,GAAGhC,aAAa,CAACtB,QAAQ,CAACuD,eAAe,EAAEtD,eAAe,CAACuB,QAAQ,EAAEJ,aAAa,CAAC,CAAC;IAC7GK,cAAc,CAAC,GAAG0B,eAAe,IAAIG,mBAAmB,EAAE,EAAE,IAAI,CAAC;IAEjE,IAAIzB,QAAQ,EAAE;MACVN,MAAM,CAAC,CAAC;IACZ;IAEAO,WAAW,CAAC,CAACD,QAAQ,CAAC;EAC1B,CAAC;;EAED;AACJ;AACA;AACA;AACA;EACI,MAAM2B,SAAS,GAAGC,KAAK,IAAI;IACvB,IAAIzC,QAAQ,EAAE;MACV;IACJ;IAEA,IAAIa,QAAQ,EAAE;MACV4B,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAIF,KAAK,CAACG,GAAG,KAAK,GAAG,EAAE;MACnBV,cAAc,CAAC,CAAC;IACpB,CAAC,MAAM,IAAIrB,QAAQ,EAAE;MACjB,QAAQ4B,KAAK,CAACG,GAAG;QACb,KAAK,SAAS;UACVjB,MAAM,CAAC,CAAC;UACR;QACJ,KAAK,WAAW;UACZI,QAAQ,CAAC,CAAC;UACV;QACJ,KAAK,WAAW;UACZf,QAAQ,CAAC,CAAC;UACV;QACJ,KAAK,YAAY;UACbO,SAAS,CAAC,CAAC;UACX;QACJ;UACI;MACR;IACJ;EACJ,CAAC;;EAED;AACJ;AACA;AACA;EACI,MAAMsB,MAAM,GAAGA,CAAA,KAAM/B,WAAW,CAAC,KAAK,CAAC;;EAEvC;AACJ;AACA;AACA;AACA;AACA;EACI,MAAMgC,MAAM,GAAGjE,QAAQ,CAAC,CAACkE,CAAC,EAAE;IAAE7B,CAAC;IAAEW;EAAE,CAAC,KAAKnB,cAAc,CAAC;IAAEQ,CAAC;IAAEW;EAAE,CAAC,CAAC,EAAE,GAAG,EAAE;IAAEmB,OAAO,EAAE,IAAI;IAAEC,QAAQ,EAAE;EAAK,CAAC,CAAC;EAE1G,oBACIxE,KAAA,CAAAU,aAAA,CAACL,SAAS;IACN6B,OAAO,EAAEA,OAAQ;IACjBuC,MAAM,EAAC,QAAQ;IACflD,QAAQ,EAAEA,QAAS;IACnB8C,MAAM,EAAEA,MAAO;IACfK,MAAM,EAAE5C,MAAO;IACfC,QAAQ,EAAEA;EAAS,gBAEnB/B,KAAA,CAAAU,aAAA;IACIiE,GAAG,EAAEzC,OAAQ;IACb0C,SAAS,EAAEtC,gBAAiB;IAC5B8B,MAAM,EAAEA,MAAO;IACfL,SAAS,EAAEA,SAAU;IACrBc,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE;EAAE,gBAEZ9E,KAAA,CAAAU,aAAA,CAACJ,SAAS;IACNyE,MAAM,EAAE;MAAEpE,EAAE,EAAE,aAAa;MAAEqE,UAAU,eAAEhF,KAAA,CAAAU,aAAA,CAACD,gBAAgB,MAAE;IAAE,CAAE;IAChEgB,MAAM,EAAEH,SAAU;IAClB2D,KAAK,EAAEpD,aAAa,CAACtB,QAAQ,CAAC2E,WAAW,CAAE;IAC3CxD,KAAK,EAAEJ;EAAU,CACpB,CACA,CACE,CAAC;AAEpB,CAAC;AAEDD,SAAS,CAAC8D,WAAW,GAAG,WAAW;AAEnC9D,SAAS,CAAC+D,SAAS,GAAG;EAClB9D,SAAS,EAAEvB,SAAS,CAACsF,MAAM;EAC3B9D,QAAQ,EAAExB,SAAS,CAACuF,IAAI;EACxB9D,aAAa,EAAEzB,SAAS,CAACwF,QAAQ,CAACxF,SAAS,CAACsF,MAAM,CAAC;EACnD1D,aAAa,EAAE5B,SAAS,CAACsF,MAAM;EAC/BzD,IAAI,EAAE7B,SAAS,CAACyF,GAAG;EACnBzD,QAAQ,EAAEhC,SAAS,CAACwF,QAAQ,CAACxF,SAAS,CAACsF,MAAM,CAAC,CAACI,UAAU;EACzD3D,MAAM,EAAE/B,SAAS,CAAC2F,IAAI;EACtB1D,cAAc,EAAEjC,SAAS,CAAC2F,IAAI;EAC9BzD,cAAc,EAAElC,SAAS,CAAC2F;AAC9B,CAAC;;AAED;AACA,SAASrE,SAAS,IAAIsE,aAAa;AACnC,eAAezF,UAAU,CAACmB,SAAS,CAAC","ignoreList":[]}

package/es/src/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.d.ts

@@ -8,6 +8,7 @@ export interface ActivityMessageProps extends WrappedComponentProps {
     getUserProfileUrl?: GetProfileUrlCallback;
     id: string;
     isEdited?: boolean;
+    onClick?: () => void;
     onTranslate?: ({ id, tagged_message }: {
         id: string;
         tagged_message: string;
@@ -16,6 +17,7 @@ export interface ActivityMessageProps extends WrappedComponentProps {
     translatedTaggedMessage?: string;
     translationEnabled?: boolean;
     translationFailed?: boolean | null;
+    annotationsMillisecondTimestamp?: string | null;
 }
 type State = {
     isLoading?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "25.1.0-beta.2",
+    "version": "25.1.0-beta.4",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -260,7 +260,7 @@
         "react-docgen-typescript": "^1.16.1",
         "react-docgen-typescript-loader": "^3.6.0",
         "react-dom": "^18.3.1",
-        "react-draggable": "^4.4.6",
+        "react-draggable": "^4.5.0",
         "react-immutable-proptypes": "^2.1.0",
         "react-intl": "^6.6.8",
         "react-measure": "^2.3.0",
@@ -341,7 +341,7 @@
         "react-aria-components": "^1.10.1",
         "react-beautiful-dnd": "^13.1.1",
         "react-dom": "^17.0.1 || ^18.0.0",
-        "react-draggable": "^4.4.6",
+        "react-draggable": "^4.5.0",
         "react-immutable-proptypes": "^2.1.0",
         "react-intl": ">=2.9.0",
         "react-measure": "^2.3.0",

package/src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js

@@ -24,6 +24,7 @@ import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../commo
 import type { SelectorItems, User, BoxItem } from '../../../../common/types/core';
 
 import IconAnnotation from '../../../../icons/two-toned/IconAnnotation';
+import { convertMillisecondsToHMMSS } from '../../../../utils/timestamp';
 
 import './AnnotationActivity.scss';
 
@@ -127,6 +128,11 @@ const AnnotationActivity = ({
         targetAttachment: 'bottom right',
     };
 
+    const isVideoAnnotation = target?.location?.type === 'frame';
+    const annotationsMillisecondTimestampInHMMSS = isVideoAnnotation
+        ? convertMillisecondsToHMMSS(target.location.value)
+        : null;
+
     return (
         <>
             <SelectableActivityCard
@@ -158,7 +164,7 @@ const AnnotationActivity = ({
                         </div>
                         <div className="bcs-AnnotationActivity-timestamp">
                             <ActivityTimestamp date={createdAtTimestamp} />
-                            {hasVersions && (
+                            {hasVersions && !isVideoAnnotation && (
                                 <AnnotationActivityLink
                                     className="bcs-AnnotationActivity-link"
                                     data-resin-target="annotationLink"
@@ -189,6 +195,8 @@ const AnnotationActivity = ({
                             <ActivityMessage
                                 getUserProfileUrl={getUserProfileUrl}
                                 id={id}
+                                annotationsMillisecondTimestamp={annotationsMillisecondTimestampInHMMSS}
+                                onClick={handleSelect}
                                 isEdited={isEdited && !isResolved}
                                 tagged_message={message}
                             />