npm - box-content-preview - Versions diffs - 3.87.0 → 3.89.0 - Mend

box-content-preview 3.87.0 → 3.89.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
 [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
-[![version](https://img.shields.io/badge/version-v3.87.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
+[![version](https://img.shields.io/badge/version-v3.89.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
 [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
 # [Box Content Preview](https://developer.box.com/docs/box-content-preview)
@@ -22,11 +22,11 @@ We encourage all users to update their applications to utilize modern browsers f
 ## Current Version
-- Version: v3.87.0
+- Version: v3.89.0
 - Locale: en-US
-https://cdn01.boxcdn.net/platform/preview/3.87.0/en-US/preview.js
-https://cdn01.boxcdn.net/platform/preview/3.87.0/en-US/preview.css
+https://cdn01.boxcdn.net/platform/preview/3.89.0/en-US/preview.js
+https://cdn01.boxcdn.net/platform/preview/3.89.0/en-US/preview.css
 ## Supported Locales
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
     <title>Box Content Preview Demo</title>
     <!-- Latest version of Preview SDK for your locale -->
-    <script src="https://cdn01.boxcdn.net/platform/preview/3.87.0/en-US/preview.js"></script>
+    <script src="https://cdn01.boxcdn.net/platform/preview/3.89.0/en-US/preview.js"></script>
     <link
       rel="stylesheet"
-      href="https://cdn01.boxcdn.net/platform/preview/3.87.0/en-US/preview.css"
+      href="https://cdn01.boxcdn.net/platform/preview/3.89.0/en-US/preview.css"
     />
   </head>
   <body>
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
 1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
-- Check out a specific version with `git checkout v3.87.0`
+- Check out a specific version with `git checkout v3.89.0`
 - Download a specific version as a zip from https://github.com/box/box-content-preview/releases
 2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`

package/dist/lib/index.css CHANGED Viewed

@@ -57,12 +57,12 @@
 .bp-TimestampControl{position:relative;display:flex;align-items:center}.bp-TimestampControl-button,.bp-TimestampControl-static{display:flex;gap:4px;align-items:center;padding:6px 12px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;-webkit-user-select:none;user-select:none}.bp-TimestampControl-button{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;margin:0;background:transparent;border:0;border-radius:25px;cursor:pointer}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-TimestampControl-button:focus:not(:disabled) svg,.bp-TimestampControl-button:hover:not(:disabled) svg,.bp-TimestampControl-button.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-TimestampControl-button.bp-is-active,.bp-TimestampControl-button:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-TimestampControl-button.bp-is-active:focus:not(:disabled),.bp-TimestampControl-button.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-TimestampControl-button:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus:not(:focus-visible){box-shadow:none}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button.bp-is-open{background:transparent}.bp-TimestampControl-button:hover:not(:disabled){background:rgba(255,255,255,.08)}.bp-TimestampControl-separator,.bp-TimestampControl-duration{color:rgba(255,255,255,.8)}.bp-TimestampControl-chevron{width:16px;height:16px;margin-left:2px;fill:rgba(255,255,255,.8)}.bp-TimestampControl-flyout{position:absolute;bottom:calc(100% + 12px);left:50%;z-index:1;min-width:250px;padding:12px 8px;background:#fff;border-radius:16px;box-shadow:0 4px 12px 0 rgba(0,0,0,.15);transform:translateX(-50%)}.bp-TimestampControl-header{padding:6px 14px;color:#767676;font-weight:bold;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;-webkit-user-select:none;user-select:none}.bp-TimestampControl-listitem{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:6px 14px;color:#000;font-size:16px;font-family:Lato,Arial,sans-serif;line-height:24px;white-space:nowrap;border-radius:8px;outline:none;cursor:pointer}.bp-TimestampControl-listitem:hover,.bp-TimestampControl-listitem:focus{background:#f4f4f4}.bp-TimestampControl-check{flex:none;fill:#000}
 .bp-VolumeControls{position:relative;display:flex;align-items:center}.bp-VolumeControls-flyout{position:absolute;top:-40px;left:-5px;display:none;flex:0 0 auto;max-width:0;height:40px;overflow:hidden;transition:max-width 200ms ease-in-out}.bp-VolumeControls-flyout.bp-is-open{display:block;overflow:visible}.bp-media--v2 .bp-VolumeControls-flyout{z-index:10}.bp-VolumeControls-slider{width:15px;height:100%;margin-right:6px;margin-left:6px}.bp-VolumeControls-toggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-VolumeControls-toggle:focus:not(:disabled),.bp-VolumeControls-toggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-VolumeControls-toggle:focus:not(:disabled) svg,.bp-VolumeControls-toggle:hover:not(:disabled) svg,.bp-VolumeControls-toggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-VolumeControls-toggle.bp-is-active,.bp-VolumeControls-toggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-VolumeControls-toggle.bp-is-active:focus:not(:disabled),.bp-VolumeControls-toggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-VolumeControls-toggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VolumeControls-toggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VolumeControls-toggle:focus:not(:focus-visible){box-shadow:none}.bp-VolumeControls-toggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-VolumeControls-toggle svg{width:32px;height:32px;padding:5px}
 .bp-VolumeSliderControl{outline:0;position:relative;cursor:pointer}.bp-VolumeSliderControl:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VolumeSliderControl:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VolumeSliderControl:focus:not(:focus-visible){box-shadow:none}.bp-VolumeVerticalSliderControl{outline:0;position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;height:140px;margin:auto;padding:16px;background:rgba(34,34,34,.9);border:1px solid rgba(255,255,255,.13);border-radius:16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.25);cursor:pointer}.bp-VolumeVerticalSliderControl:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VolumeVerticalSliderControl:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VolumeVerticalSliderControl:focus:not(:focus-visible){box-shadow:none}.bp-VolumeSliderControl-thumb{position:absolute;top:calc(50% - 6px);width:10px;height:12px;margin-left:-6px;background:#0061d5;border:0;border-radius:12px;cursor:pointer}.bp-VolumeSliderControl-track{position:absolute;inset:0;height:3px;margin:auto 3px;background:transparent linear-gradient(#fff, #fff) no-repeat center border-box}.bp-VolumeVerticalSliderControl-track-container{position:relative;width:8px;height:108px}.bp-VolumeVerticalSliderControl-track-background{position:relative;left:0;width:8px;height:108px;background-color:#55554f;border-radius:20px}.bp-VolumeVerticalSliderControl-track{position:absolute;bottom:0;left:0;width:8px;background:#fff;border-radius:20px}
-.bp-MarkerAvatar{position:absolute;bottom:calc(100% + 4px);left:50%;width:12px;height:12px;overflow:hidden;border:0;border-radius:50%;outline:2px solid rgba(0,0,0,.5);box-shadow:0 0 0 0 #fff;transform:translate(-50%, 0);transform-origin:bottom center;transition:transform 150ms,box-shadow 150ms,outline 150ms}.bp-MarkerAvatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.bp-MarkerAvatar-initial{display:grid;width:100%;height:100%;font-weight:bold;font-size:7px;line-height:1;text-align:center;text-transform:uppercase;place-items:center}.bp-MarkerAvatar-anonymousIcon{width:100%;height:100%;color:#222}
-.bp-MarkerAvatarStack{position:absolute;bottom:calc(100% + 4px);left:50%;display:flex;align-items:center;transform:translateX(-50%)}.bp-MarkerAvatarStack-item{position:relative;flex-shrink:0;padding:0;background:none;border:0;cursor:pointer;transition:margin 150ms}.bp-MarkerAvatarStack-item:not(:first-child){margin-left:var(--bp-marker-stack-overlap, -6px)}.bp-MarkerAvatarStack-item .bp-MarkerAvatar{position:relative;bottom:auto;left:auto;display:block;transform:none}.bp-MarkerAvatarStack-item:hover,.bp-MarkerAvatarStack-item:focus-visible{z-index:1}.bp-MarkerAvatarStack-item:hover .bp-MarkerAvatar,.bp-MarkerAvatarStack-item:focus-visible .bp-MarkerAvatar{outline:0 solid transparent;box-shadow:0 0 0 2px #fff}.bp-TimeControlsV2-marker--group:hover .bp-MarkerAvatarStack-item:not(:first-child),.bp-TimeControlsV2-marker--group:focus-visible .bp-MarkerAvatarStack-item:not(:first-child),.bp-MarkerCluster:hover .bp-MarkerAvatarStack-item:not(:first-child),.bp-MarkerCluster:focus-within .bp-MarkerAvatarStack-item:not(:first-child){margin-left:2px}.bp-MarkerAvatarStack-overflow{cursor:pointer}.bp-MarkerAvatarStack-overflowBadge{background-color:#6f6f6f}
-.bp-WaveformCommentMarkers{position:absolute;top:-2px;right:0;left:0;z-index:4;box-sizing:border-box;height:24px;padding:0 60px;overflow:visible;pointer-events:auto}.bp-WaveformCommentMarkers--zoomed{padding:0;overflow:clip visible}.bp-WaveformCommentMarkers-track{position:relative;width:100%;height:100%;overflow:visible}.bp-WaveformCommentMarkers--zoomed .bp-WaveformCommentMarkers-track{overflow:clip visible}.bp-WaveformCommentMarkers-marker{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:none;border:0;border-radius:50%;transform:translate(-50%, -50%);cursor:pointer;appearance:none;pointer-events:auto;transition:transform 150ms,box-shadow 150ms}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar{position:relative;bottom:auto;left:auto;overflow:hidden;isolation:isolate;outline:none;box-shadow:none;transform:none;transform-origin:center center;cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar img,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar img{cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar::after{position:absolute;z-index:1;inset:0;background:#000;border-radius:50%;opacity:.4;pointer-events:none;content:"";transition:opacity 150ms}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar:not(.bp-MarkerAvatarStack-overflowBadge),.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar:not(.bp-MarkerAvatarStack-overflowBadge){background-color:#000}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar-initial{font-size:11px}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack{position:relative;bottom:auto;left:auto;transform:none}.bp-WaveformCommentMarkers-marker--group{width:auto}.bp-WaveformCommentMarkers-marker--group:hover .bp-MarkerAvatarStack-item:not(:first-child),.bp-WaveformCommentMarkers-marker--group:focus-within .bp-MarkerAvatarStack-item:not(:first-child){margin-left:2px}.bp-WaveformCommentMarkers:hover .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group).bp-WaveformCommentMarkers-marker--selected .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item--selected .bp-MarkerAvatar::after{opacity:0}.bp-WaveformCommentMarkers-marker--selected{z-index:3}.bp-WaveformCommentMarkers-marker:hover,.bp-WaveformCommentMarkers-marker:focus-within{z-index:4}.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group):hover,.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group):focus-visible{transform:translate(-50%, -50%) scale(1.2)}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item{border-radius:50%;transform-origin:center center;cursor:pointer;transition:margin 150ms,transform 150ms,box-shadow 150ms}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:hover,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:focus-visible{z-index:2;transform:scale(1.2)}.bp-WaveformCommentMarkers-marker--selected:not(.bp-WaveformCommentMarkers-marker--group){box-shadow:0 0 0 2px #fff}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item--selected{z-index:2;box-shadow:0 0 0 2px #fff}@media(prefers-reduced-motion: reduce){.bp-WaveformCommentMarkers-marker,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after{transition:none}.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group):hover,.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group):focus-visible{transform:translate(-50%, -50%)}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:hover,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:focus-visible{transform:none}}
+.bp-MarkerAvatar{position:absolute;bottom:calc(100% + 4px);left:50%;width:var(--bp-marker-avatar-size, 20px);height:var(--bp-marker-avatar-size, 20px);overflow:visible;border:0;border-radius:50%;outline:none;box-shadow:0 0 0 1px #101010;transform:translate(-50%, 0);transform-origin:bottom center;transition:width 150ms,height 150ms,box-shadow 150ms}.bp-MarkerAvatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}.bp-MarkerAvatar-initial{display:grid;width:100%;height:100%;font-weight:bold;font-size:10px;line-height:1;text-align:center;text-transform:uppercase;place-items:center}.bp-MarkerAvatar-anonymousIcon{width:100%;height:100%;color:#222}:is(.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group),.bp-TimeControlsV2-marker:not(.bp-TimeControlsV2-marker--group),.bp-MarkerAvatarStack-item):is(:hover,:focus-visible) .bp-MarkerAvatar{width:24px;height:24px;box-shadow:0 0 0 1px #fff}:is(.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group),.bp-TimeControlsV2-marker:not(.bp-TimeControlsV2-marker--group),.bp-MarkerAvatarStack-item):is(:hover,:focus-visible) .bp-MarkerAvatar .bp-MarkerAvatar-initial{font-size:12px}:is(.bp-WaveformCommentMarkers-marker--selected:not(.bp-WaveformCommentMarkers-marker--group),.bp-TimeControlsV2-marker--selected:not(.bp-TimeControlsV2-marker--group),.bp-MarkerAvatarStack-item--selected) .bp-MarkerAvatar,:is(.bp-WaveformCommentMarkers-marker--selected:not(.bp-WaveformCommentMarkers-marker--group),.bp-TimeControlsV2-marker--selected:not(.bp-TimeControlsV2-marker--group),.bp-MarkerAvatarStack-item--selected):is(:hover,:focus-visible) .bp-MarkerAvatar{width:24px;height:24px;box-shadow:0 0 0 2px #fff,0 0 0 3px #101010}:is(.bp-WaveformCommentMarkers-marker--selected:not(.bp-WaveformCommentMarkers-marker--group),.bp-TimeControlsV2-marker--selected:not(.bp-TimeControlsV2-marker--group),.bp-MarkerAvatarStack-item--selected) .bp-MarkerAvatar .bp-MarkerAvatar-initial,:is(.bp-WaveformCommentMarkers-marker--selected:not(.bp-WaveformCommentMarkers-marker--group),.bp-TimeControlsV2-marker--selected:not(.bp-TimeControlsV2-marker--group),.bp-MarkerAvatarStack-item--selected):is(:hover,:focus-visible) .bp-MarkerAvatar .bp-MarkerAvatar-initial{font-size:12px}
+.bp-MarkerAvatarStack{position:absolute;bottom:calc(100% + 4px);left:50%;display:flex;align-items:center;transform:translateX(-50%)}.bp-MarkerAvatarStack-item{position:relative;flex-shrink:0;box-sizing:content-box;width:20px;height:20px;padding:0;background:none;border:0;border-radius:50%;outline:none;overflow:visible;cursor:pointer;appearance:none;transition:margin 150ms}.bp-MarkerAvatarStack-item:focus,.bp-MarkerAvatarStack-item:focus-visible{outline:none}.bp-MarkerAvatarStack-item:not(:first-child){margin-left:var(--bp-marker-stack-overlap, -10px)}.bp-MarkerAvatarStack-item .bp-MarkerAvatar{position:absolute;top:50%;bottom:auto;left:50%;display:block;transform:translate(-50%, -50%);transform-origin:center center}.bp-MarkerAvatarStack-item:hover,.bp-MarkerAvatarStack-item:focus-visible{z-index:3}:is(.bp-WaveformCommentMarkers-marker--group,.bp-TimeControlsV2-marker--group,.bp-MarkerCluster):is(:hover,:has(.bp-MarkerAvatarStack-item:focus-visible)) .bp-MarkerAvatarStack-item:not(:first-child){margin-left:2px}.bp-MarkerAvatarStack-overflow{cursor:pointer}.bp-MarkerAvatarStack-overflowBadge{background-color:#383838;color:#fff}.bp-MarkerAvatarStack-overflowBadge .bp-MarkerAvatar-initial{color:#fff}
+.bp-WaveformCommentMarkers{position:absolute;top:-2px;right:0;left:0;z-index:4;box-sizing:border-box;height:24px;padding:0 60px;overflow:visible;pointer-events:auto}.bp-WaveformCommentMarkers--zoomed{padding:0;overflow:clip visible}.bp-WaveformCommentMarkers-track{position:relative;width:100%;height:100%;overflow:visible}.bp-WaveformCommentMarkers--zoomed .bp-WaveformCommentMarkers-track{overflow:clip visible}.bp-WaveformCommentMarkers-marker{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:auto;height:auto;padding:0;background:none;border:0;border-radius:50%;transform:translate(-50%, -50%);cursor:pointer;appearance:none;pointer-events:auto;overflow:visible;outline:none;transition:box-shadow 150ms}.bp-WaveformCommentMarkers-marker:focus,.bp-WaveformCommentMarkers-marker:focus-visible{outline:none}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar{overflow:visible;isolation:isolate;cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar img{cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after{position:absolute;z-index:1;inset:0;background:#000;border-radius:50%;opacity:.4;pointer-events:none;content:"";transition:opacity 150ms}.bp-WaveformCommentMarkers-marker>.bp-MarkerAvatar{position:relative;bottom:auto;left:auto;transform:none;transform-origin:center center}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar:not(.bp-MarkerAvatarStack-overflowBadge),.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar:not(.bp-MarkerAvatarStack-overflowBadge){background-color:#000}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack{position:relative;bottom:auto;left:auto;transform:none}.bp-WaveformCommentMarkers-marker--group{width:auto}.bp-WaveformView:hover~.bp-WaveformCommentMarkers .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers:hover .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers:has(:focus-visible) .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group).bp-WaveformCommentMarkers-marker--selected .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item--selected .bp-MarkerAvatar::after{opacity:0}.bp-WaveformCommentMarkers-marker--selected{z-index:3}.bp-WaveformCommentMarkers-marker:hover,.bp-WaveformCommentMarkers-marker:focus-within{z-index:4}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item{cursor:pointer;transition:margin 150ms}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:hover,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:focus-visible{z-index:3}@media(prefers-reduced-motion: reduce){.bp-WaveformCommentMarkers-marker,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after{transition:none}}
 .bp-WaveformView{box-sizing:border-box;width:100%;height:206px;min-height:206px;padding:0 60px;overflow:visible;background:none}.bp-WaveformView.bp-WaveformView--zoomed{padding:0;touch-action:none}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas{overflow:hidden;mask-image:linear-gradient(to right, transparent, #000 92px, #000 calc(100% - 92px), transparent)}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas>*::part(scroll){overscroll-behavior-x:none}.bp-WaveformView-track{position:relative;display:flex;align-items:center;width:100%;height:100%;cursor:pointer}.bp-WaveformView-canvas{z-index:0;width:100%;height:140px}.bp-WaveformView-playhead{position:absolute;top:50%;left:0;z-index:1;width:2px;height:150px;pointer-events:none;background:linear-gradient(#2487ff, #006bed);border-radius:1px;box-shadow:0 0 0 1px #222,0 0 10px 0 rgba(36,135,255,.3);transform:translate(-50%, -50%)}.bp-WaveformView-hover{position:absolute;top:100%;z-index:2;margin-top:4px;pointer-events:none;transform:translateX(-50%)}.bp-WaveformView-hoverTime{padding:4px 10px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:rgba(34,34,34,.92);border:1px solid rgba(255,255,255,.18);border-radius:8px}.bp-WaveformView--inert{pointer-events:none}.bp-WaveformView--inert .bp-WaveformView-track{cursor:default}
 .bp-SliderControl{outline:0;position:relative;cursor:pointer}.bp-SliderControl:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SliderControl:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SliderControl:focus:not(:focus-visible){box-shadow:none}.bp-SliderControl-thumb{position:absolute;top:calc(50% - 6px);width:12px;height:12px;margin-left:-6px;background:#0061d5;border:0;border-radius:12px;cursor:pointer}.bp-SliderControl-track{position:absolute;inset:0;height:3px;margin:auto 3px;background:transparent linear-gradient(#fff, #fff) no-repeat center border-box}
-.bp-WaveformZoomControl{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:flex-end;width:48px;height:48px;padding:4px;overflow:hidden;background:rgba(255,255,255,.1);border-radius:32px;box-shadow:0 2px 12px rgba(0,0,0,.08);backdrop-filter:blur(60px);transition:width 150ms ease-out,gap 150ms ease-out}.bp-WaveformZoomControl.bp-is-open{gap:8px;width:178px}.bp-WaveformZoomControl-flyout{flex:0 0 auto;width:0;height:8px;overflow:hidden;transition:width 150ms ease-out}.bp-WaveformZoomControl-flyout.bp-is-open{width:103px}.bp-WaveformZoomControl-slider{width:103px;height:8px}.bp-WaveformZoomControl-slider .bp-SliderControl-track{height:8px;margin:0;background:rgba(255,255,255,.3);background-image:none;border-radius:20px}.bp-WaveformZoomControl-slider .bp-SliderControl-track::after{position:absolute;top:0;left:0;width:calc(8px + 95px * var(--bp-zoom-t, 0));height:8px;background:rgba(255,255,255,.9);border-radius:20px;content:""}.bp-WaveformZoomControl-slider .bp-SliderControl-thumb{display:none}.bp-WaveformZoomControl-toggle{position:relative;z-index:1;display:flex;flex:0 0 40px;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:rgba(255,255,255,.8);background:transparent;border:0;border-radius:50%;cursor:pointer}.bp-WaveformZoomControl-toggle svg{width:24px;height:24px;padding:0}@media(prefers-reduced-motion: reduce){.bp-WaveformZoomControl,.bp-WaveformZoomControl-flyout{transition:none}}
+.bp-WaveformZoomControl{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:flex-end;width:48px;height:48px;padding:4px;overflow:hidden;background:rgba(255,255,255,.1);border-radius:32px;box-shadow:0 2px 12px rgba(0,0,0,.08);backdrop-filter:blur(60px);transition:width 150ms ease-out,gap 150ms ease-out}.bp-WaveformZoomControl.bp-is-open{gap:8px;width:207px}.bp-WaveformZoomControl-flyout{display:flex;flex:0 0 auto;order:-1;gap:8px;align-items:center;width:0;height:40px;overflow:hidden;transition:width 150ms ease-out}.bp-WaveformZoomControl-flyout.bp-is-open{width:151px}.bp-WaveformZoomControl-slider{width:103px;height:8px}.bp-WaveformZoomControl-slider .bp-SliderControl-track{height:8px;margin:0;background:rgba(255,255,255,.3);background-image:none;border-radius:20px}.bp-WaveformZoomControl-slider .bp-SliderControl-track::after{position:absolute;top:0;left:0;width:calc(8px + 95px * var(--bp-zoom-t, 0));height:8px;background:rgba(255,255,255,.9);border-radius:20px;content:""}.bp-WaveformZoomControl-slider .bp-SliderControl-thumb{display:none}.bp-WaveformZoomControl-button{position:relative;z-index:1;display:flex;flex:0 0 40px;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:#fff;background:transparent;border:0;border-radius:50%;cursor:pointer}.bp-WaveformZoomControl-button[aria-disabled=true]{cursor:default;opacity:.3}.bp-WaveformZoomControl-button svg{width:20px;height:20px;padding:0}@media(prefers-reduced-motion: reduce){.bp-WaveformZoomControl,.bp-WaveformZoomControl-flyout{transition:none}}
 .bp-MP3ControlsRoot:has(.bp-MP3ControlsV2){position:absolute;inset:0;width:100%;height:100%;transform:none;pointer-events:none}.bp-MP3ControlsV2{position:relative;width:100%;max-width:none;height:100%;background:transparent;pointer-events:none}.bp-MP3ControlsV2-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:0;pointer-events:none}.bp-MP3ControlsV2-stage .bp-WaveformView,.bp-MP3ControlsV2-stage .bp-MP3ControlsV2-waveform,.bp-MP3ControlsV2-stage .bp-WaveformCommentMarkers{pointer-events:auto}.bp-MP3ControlsV2-waveform{position:relative;width:100%;overflow:visible}.bp-MP3ControlsV2-waveformZoom{position:absolute;top:48px;right:48px;z-index:3;pointer-events:none}.bp-MP3ControlsV2-waveformZoom .bp-WaveformZoomControl{pointer-events:auto}.bp-MP3ControlsV2-playOverlay{position:absolute;top:50%;left:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:0;background:rgba(0,0,0,.5);border:0;border-radius:50%;transform:translate(-50%, -50%);cursor:pointer;pointer-events:auto}.bp-MP3ControlsV2-playOverlay svg{width:48px;height:48px;fill:#fff}.bp-MP3ControlsV2-stage .bp-media-buffering-spinner{z-index:2;pointer-events:none}.bp-MP3ControlsV2-bar{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:30px 58px 25px;background:linear-gradient(to top, black, rgba(0, 0, 0, 0));pointer-events:auto}.bp-MP3ControlsV2-group{display:flex;gap:12px;align-items:center}.bp-MP3ControlsV2-divider{width:1px;height:24px;background-color:rgba(255,255,255,.1);border-radius:1px}.bp-MP3ControlsV2 .bp-MP3Controls-settings{position:relative}.bp-MP3ControlsV2 .bp-MP3Controls-settings .bp-SettingsFlyout{right:15px}.bp-MP3ControlsV2 .bp-MP3Controls-settings .bp-SettingsToggle-button{width:36px;height:40px}
 .bp-Filmstrip{position:absolute;bottom:100%;overflow:hidden;background:transparent;box-shadow:0 0 1px #464a4f;visibility:hidden}.bp-Filmstrip.bp-is-shown{visibility:visible}.bp-Filmstrip-frame{display:flex;align-items:center;justify-content:center}.bp-Filmstrip-time{height:20px;color:#fff;font-size:13px;line-height:20px;text-align:center;background-color:#222}
 .bp-TimeControls{position:relative;margin-right:10px;margin-left:10px}.bp-TimeControls-slider{height:18px}.bp-TimeControls-slider .bp-SliderControl-thumb{transform:scale(0);transition:transform 100ms ease;will-change:transform}.bp-TimeControls-slider .bp-SliderControl-track{backface-visibility:hidden;transition:transform 100ms ease;will-change:transform}.bp-TimeControls-slider.bp-is-scrubbing .bp-SliderControl-thumb,.bp-TimeControls-slider:focus .bp-SliderControl-thumb,.bp-TimeControls-slider:hover .bp-SliderControl-thumb{transform:scale(1)}.bp-TimeControls-slider.bp-is-scrubbing .bp-SliderControl-track,.bp-TimeControls-slider:focus .bp-SliderControl-track,.bp-TimeControls-slider:hover .bp-SliderControl-track{transform:scaleY(2)}
@@ -73,8 +73,8 @@
 .bp-SubtitlesToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-SubtitlesToggle:focus:not(:disabled),.bp-SubtitlesToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-SubtitlesToggle:focus:not(:disabled) svg,.bp-SubtitlesToggle:hover:not(:disabled) svg,.bp-SubtitlesToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-SubtitlesToggle.bp-is-active,.bp-SubtitlesToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-SubtitlesToggle.bp-is-active:focus:not(:disabled),.bp-SubtitlesToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-SubtitlesToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SubtitlesToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SubtitlesToggle:focus:not(:focus-visible){box-shadow:none}.bp-SubtitlesToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-SubtitlesToggle svg{width:32px;height:32px;padding:5px}.bp-SubtitlesToggle[aria-pressed=true] .bp-SubtitlesToggle-text{color:#fff;background-color:#0061d5}.bp-SubtitlesToggle-text{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#fff;font-weight:bold;font-size:12px;letter-spacing:.1em;background-color:rgba(0,0,0,.3);border-radius:4px}
 .bp-VideoControls{display:flex;flex-direction:column;width:100%;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);padding:40px 20px 8px}.bp-VideoControls .bp-FullscreenToggle{width:36px;height:40px}.bp-VideoControls-bar{display:flex;padding:0 10px 5px;display:grid;align-items:center}.bp-VideoControls-bar.bp-VideoControls-bar--two-groups{justify-content:flex-end}.bp-VideoControls-bar.bp-VideoControls-bar--two-groups .bp-VideoControls-group--play-pause{position:absolute;left:50%;transform:translateX(-50%)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups{grid-template-columns:repeat(3, 1fr)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups.bp-VideoControls-bar--narrow-video{grid-template-columns:repeat(2, 1fr)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--annotations{justify-self:flex-start}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--play-pause{justify-self:center}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--media-controls{justify-self:flex-end}.bp-VideoControls-group{display:flex;align-items:center}.bp-VideoControls-settings{position:relative}.bp-VideoControls-settings .bp-SettingsFlyout{right:15px}.bp-VideoControls-settings .bp-SettingsToggle-button{width:36px;height:40px}
 .bp-FilmstripV2{position:absolute;bottom:calc(100% + 12px);padding:12px;padding-bottom:8px;background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.15);visibility:hidden}.bp-FilmstripV2.bp-is-shown{visibility:visible}.bp-FilmstripV2-frame{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px}.bp-FilmstripV2-frameImage{position:absolute;top:0;left:0;overflow:hidden;background-repeat:no-repeat;transform-origin:top left}.bp-FilmstripV2-frame .bp-crawler{position:relative;z-index:1}.bp-FilmstripV2-time{margin-top:8px;color:#000;font-size:13px;line-height:20px;text-align:center}
-.bp-MarkerCluster{position:absolute;top:50%;z-index:1;height:8px;transform:translate(-2px, -50%);transition:transform 150ms}.bp-MarkerCluster:hover,.bp-MarkerCluster:focus-within{z-index:2;transform:translate(-2px, -50%) scale(1.5)}.bp-MarkerCluster:hover .bp-MarkerCluster-tick,.bp-MarkerCluster:focus-within .bp-MarkerCluster-tick{transform:none}.bp-MarkerCluster-tick{display:block;width:100%;height:100%;padding:0;background:#6f6f6f;border:1px solid #fff;border-radius:2px;cursor:pointer;transition:transform 150ms}
-.bp-TimeControlsV2{position:relative;margin-right:10px;margin-left:10px}.bp-TimeControlsV2-scrubber{position:relative}.bp-TimeControlsV2-slider{height:20px}.bp-TimeControlsV2-slider .bp-SliderControl-track{height:6px;margin:auto 0;border-radius:5px;backface-visibility:hidden;mask-image:var(--bp-track-mask, none)}.bp-TimeControlsV2-slider .bp-SliderControl-thumb{top:50%;z-index:3;width:3px;height:16px;margin-left:-1.5px;background:#fff;border:0;border-radius:2px;transform:translateY(-50%);cursor:ew-resize}.bp-TimeControlsV2-marker{position:absolute;top:50%;z-index:1;width:2px;height:8px;padding:0;background:#fff;border:0;border-radius:2px;transform:translate(-50%, -50%);cursor:pointer;transition:transform 150ms}.bp-TimeControlsV2-marker:hover,.bp-TimeControlsV2-marker:focus-visible{z-index:2;transform:translate(-50%, -50%) scale(1.7)}.bp-TimeControlsV2-marker:hover>.bp-MarkerAvatar,.bp-TimeControlsV2-marker:focus-visible>.bp-MarkerAvatar{outline:0 solid transparent;box-shadow:0 0 0 2px #fff;transform:translate(-50%, calc(5px / 1.7))}.bp-TimeControlsV2-marker:focus-visible{outline:2px solid #fff;outline-offset:2px}.bp-TimeControlsV2-marker--group:hover,.bp-TimeControlsV2-marker--group:focus-visible{transform:translate(-50%, -50%) scale(1.5)}
+.bp-MarkerCluster{position:absolute;top:50%;z-index:1;height:8px;transform:translate(-2px, -50%);transition:transform 150ms}.bp-MarkerCluster:hover,.bp-MarkerCluster:focus-within{z-index:2}.bp-MarkerCluster-tick{display:block;width:100%;height:100%;padding:0;background:#6f6f6f;border:1px solid #fff;border-radius:2px;cursor:pointer;transition:transform 150ms}
+.bp-TimeControlsV2{position:relative;margin-right:10px;margin-left:10px}.bp-TimeControlsV2-scrubber{position:relative}.bp-TimeControlsV2-slider{height:20px}.bp-TimeControlsV2-slider .bp-SliderControl-track{height:6px;margin:auto 0;border-radius:5px;backface-visibility:hidden;mask-image:var(--bp-track-mask, none)}.bp-TimeControlsV2-slider .bp-SliderControl-thumb{top:50%;z-index:3;width:3px;height:16px;margin-left:-1.5px;background:#fff;border:0;border-radius:2px;transform:translateY(-50%);cursor:ew-resize}.bp-TimeControlsV2-marker{position:absolute;top:50%;z-index:1;width:2px;height:8px;padding:0;background:#fff;border:0;border-radius:2px;transform:translate(-50%, -50%);cursor:pointer}.bp-TimeControlsV2-marker:hover,.bp-TimeControlsV2-marker:focus-visible,.bp-TimeControlsV2-marker:has(:focus-visible),.bp-TimeControlsV2-marker--selected{z-index:2}.bp-TimeControlsV2-marker:focus-visible{outline:none}.bp-TimeControlsV2-marker>.bp-MarkerAvatar{transform:translate(-50%, 0)}.bp-TimeControlsV2-marker--group{background:none}.bp-TimeControlsV2-marker-tick{display:block;width:100%;height:100%;padding:0;background:#fff;border:0;border-radius:2px;cursor:pointer;appearance:none}.bp-TimeControlsV2-marker-tick:focus,.bp-TimeControlsV2-marker-tick:focus-visible{outline:none}
 .bp-VideoFullscreenButton{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;color:#fff;background:rgba(0,0,0,.6);border:none;border-radius:50%;box-shadow:0 2px 12px 0 rgba(0,0,0,.8);cursor:pointer;backdrop-filter:blur(60px);pointer-events:auto}.bp-VideoFullscreenButton svg{width:20px;height:20px}
 .bp-VideoControlsRoot:has(.bp-VideoControlsV2){position:absolute;inset:0;width:100%;pointer-events:none}.bp-VideoControlsRoot:has(.bp-VideoControlsV2) .bp-ControlsLayer{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;pointer-events:none}.bp-VideoControlsV2{display:flex;flex-direction:column;width:100%;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);padding:30px 48px 20px;background:linear-gradient(to top, black, rgba(0, 0, 0, 0));pointer-events:auto}.bp-VideoControlsV2 .bp-FullscreenToggle{width:36px;height:40px}.bp-VideoControlsV2-bar{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:0 10px 5px}.bp-VideoControlsV2-group{display:flex;gap:4px;align-items:center}.bp-VideoControlsV2-group .bp-VideoControlsV2-divider{margin:0 8px}.bp-VideoControlsV2-playPause{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-VideoControlsV2-playPause:focus:not(:disabled),.bp-VideoControlsV2-playPause:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-VideoControlsV2-playPause:focus:not(:disabled) svg,.bp-VideoControlsV2-playPause:hover:not(:disabled) svg,.bp-VideoControlsV2-playPause.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-VideoControlsV2-playPause.bp-is-active,.bp-VideoControlsV2-playPause:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-VideoControlsV2-playPause.bp-is-active:focus:not(:disabled),.bp-VideoControlsV2-playPause.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-VideoControlsV2-playPause:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-playPause:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-playPause:focus:not(:focus-visible){box-shadow:none}.bp-VideoControlsV2-playPause:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-VideoControlsV2-playPause svg{width:32px;height:32px;padding:5px}.bp-VideoControlsV2-skipBtn{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-VideoControlsV2-skipBtn:focus:not(:disabled),.bp-VideoControlsV2-skipBtn:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-VideoControlsV2-skipBtn:focus:not(:disabled) svg,.bp-VideoControlsV2-skipBtn:hover:not(:disabled) svg,.bp-VideoControlsV2-skipBtn.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-VideoControlsV2-skipBtn.bp-is-active,.bp-VideoControlsV2-skipBtn:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-VideoControlsV2-skipBtn.bp-is-active:focus:not(:disabled),.bp-VideoControlsV2-skipBtn.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-VideoControlsV2-skipBtn:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-skipBtn:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-skipBtn:focus:not(:focus-visible){box-shadow:none}.bp-VideoControlsV2-skipBtn:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-VideoControlsV2-skipBtn svg{width:32px;height:32px;padding:5px}.bp-VideoControlsV2-divider{width:1px;height:24px;background-color:rgba(255,255,255,.1);border-radius:1px}.bp-VideoControlsV2 .bp-AnnotationsControls{gap:4px;padding-left:0;border-left:none}
 .bp-media-scrubber-container{position:relative;width:100%;height:16px}.bp-media-scrubber-wrapper{position:absolute;top:0;left:50%;width:100%;height:100%}.bp-media-scrubber{position:absolute;top:7px;left:-50%;width:100%;height:3px}.bp-media-scrubber-converted,.bp-media-scrubber-buffered,.bp-media-scrubber-played,.bp-media-scrubber-underlay{position:absolute;height:3px;transition:transform .1s ease-in-out}.bp-media-scrubber-converted{background-color:rgba(255,255,255,.5);cursor:pointer}.bp-media-scrubber-buffered{position:absolute;height:3px;background-color:#fff}.bp-media-scrubber-played{background-color:#0061d5;cursor:pointer}.bp-media-scrubber-underlay{width:100%;cursor:not-allowed}.bp-media-scrubber-handle{position:absolute;top:-4.25px;width:12px;height:12px;margin-left:-6px;background-color:#0061d5;border-radius:6px;transform:scale(0);cursor:pointer;transition:transform .05s ease-in-out}.bp-media-scrubber-container:hover .bp-media-scrubber-handle,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-handle{transform:scale(1)}.bp-media-scrubber-container:hover .bp-media-scrubber-converted,.bp-media-scrubber-container:hover .bp-media-scrubber-buffered,.bp-media-scrubber-container:hover .bp-media-scrubber-played,.bp-media-scrubber-container:hover .bp-media-scrubber-underlay,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-converted,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-buffered,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-played,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-underlay{transform:scaleY(2)}.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-handle{transform:scale(1)}.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-converted,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-buffered,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-played,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-underlay{transform:scaleY(2)}.bp-media-settings{position:absolute;right:16px;bottom:60px;display:inline-block;max-width:400px;max-height:210px;padding:8px;overflow:hidden auto;color:#444;font-size:10px;line-height:0;background-color:#fff;border:1px solid #bdc3c7;border-radius:2px;visibility:hidden;transition:width .2s,height .2s;-ms-overflow-style:-ms-autohiding-scrollbar}.bp-media-settings-is-open .bp-media-settings{visibility:visible}.bp-media-mp3 .bp-media-settings{right:0;bottom:65px}.bp-media-settings-in-transition{overflow:hidden}.bp-media-settings-menu{display:table}.bp-media-settings-menu-autoplay,.bp-media-settings-menu-quality,.bp-media-settings-menu-speed,.bp-media-settings-menu-subtitles,.bp-media-settings-menu-audiotracks,.bp-media-settings-show-autoplay .bp-media-settings-menu-main,.bp-media-settings-show-speed .bp-media-settings-menu-main,.bp-media-settings-show-quality .bp-media-settings-menu-main,.bp-media-settings-show-subtitles .bp-media-settings-menu-main,.bp-media-settings-show-audiotracks .bp-media-settings-menu-main{display:none}.bp-media-settings-show-autoplay .bp-media-settings-menu-autoplay,.bp-media-settings-show-speed .bp-media-settings-menu-speed,.bp-media-settings-show-quality .bp-media-settings-menu-quality,.bp-media-settings-show-subtitles .bp-media-settings-menu-subtitles,.bp-media-settings-show-audiotracks .bp-media-settings-menu-audiotracks{display:table}.bp-media-mp4 .bp-media-settings-item-quality,.bp-media-mp4 .bp-media-settings-item-subtitles,.bp-media-mp4 .bp-media-settings-item-audiotracks,.bp-media-mp3 .bp-media-settings-item-quality,.bp-media-mp3 .bp-media-settings-item-subtitles,.bp-media-mp3 .bp-media-settings-item-audiotracks{display:none}.bp-media-settings-item,.bp-media-settings-sub-item{display:table-row;height:26px;padding:4px;overflow:hidden;white-space:nowrap;outline:0 none;cursor:pointer}.bp-media-settings-item:hover,.bp-media-settings-sub-item:hover{background-color:#f6fafd}.bp-media-settings-item:hover .bp-media-settings-icon svg,.bp-media-settings-sub-item:hover .bp-media-settings-icon svg{fill:#2c3e50}.bp-media-settings-item:hover .bp-media-settings-label,.bp-media-settings-sub-item:hover .bp-media-settings-label{color:#aabed1}.bp-media-settings-item:hover .bp-media-settings-value,.bp-media-settings-sub-item:hover .bp-media-settings-value{color:#2c3e50}.bp-has-keyboard-focus .bp-media-settings-item:focus,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus{background-color:#0061d5}.bp-has-keyboard-focus .bp-media-settings-item:focus .bp-media-settings-label,.bp-has-keyboard-focus .bp-media-settings-item:focus .bp-media-settings-value,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus .bp-media-settings-label,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus .bp-media-settings-value{color:#fff}.bp-has-keyboard-focus .bp-media-settings-item:focus svg,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus svg{fill:#fff}.bp-media-settings-subtitles-unavailable .bp-media-settings-item-subtitles,.bp-media-settings-subtitles-unavailable .bp-media-settings-menu-subtitles{display:none}.bp-media-settings-autoplay-unavailable .bp-media-settings-item-autoplay,.bp-media-settings-autoplay-unavailable .bp-media-settings-menu-autoplay{display:none}.bp-media-settings-audiotracks-unavailable .bp-media-settings-item-audiotracks,.bp-media-settings-audiotracks-unavailable .bp-media-settings-menu-audiotracks{display:none}.bp-media-settings-hd-unavailable .bp-media-settings-menu-quality{display:none}.bp-media-settings-hd-unavailable .bp-media-settings-item-quality{pointer-events:none}.bp-media-settings-hd-unavailable .bp-media-settings-item-quality .bp-media-settings-arrow{display:none}.bp-media-settings-label,.bp-media-settings-value{display:table-cell;padding:4px;vertical-align:middle}.bp-media-settings-label{color:#999ea4;font-weight:normal;font-size:11px;text-transform:uppercase}.bp-media-settings-item .bp-media-settings-label{text-align:left}.bp-media-settings-sub-item .bp-media-settings-label{text-align:center}.bp-media-settings-value{padding-left:10px;color:#464a4f;font-size:12px;text-align:left}.bp-media-settings-selected .bp-media-settings-value{color:#0061d5}.bp-media-settings-arrow{display:table-cell;vertical-align:middle}.bp-media-settings-arrow svg{width:18px;height:18px}.bp-media-settings-icon{display:table-cell;text-align:center;vertical-align:middle}.bp-media-settings-icon svg{width:16px;height:16px;visibility:hidden}.bp-media-settings-selected .bp-media-settings-icon svg{visibility:visible}.bp-media-controls-is-visible .bp-media-controls-wrapper,.bp-media-controls-wrapper:active,.bp-media-controls-wrapper:focus{visibility:visible;opacity:1}.bp-media-controls-wrapper{position:absolute;right:0;bottom:0;left:0;width:100%;height:60px;margin:auto;overflow:hidden;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);visibility:hidden;opacity:0;transition:visibility .3s,opacity .3s}.bp-media-time-scrubber-container{outline:0 none}.bp-media-volume-scrubber-container-wrapper{display:inline-block;width:0;height:40px;overflow:hidden;transition:width .2s ease-in-out}.bp-media-controls-volume-scrubber-expand{width:96px}.bp-media-volume-scrubber-container{position:relative;display:inline-block;width:96px;height:40px;padding:10px 8px 0;outline:0 none}.bp-media-volume-scrubber-container .bp-media-scrubber-handle{transform:scale(1)}.bp-media-volume-scrubber-container .bp-media-scrubber-converted,.bp-media-volume-scrubber-container .bp-media-scrubber-buffered,.bp-media-volume-scrubber-container .bp-media-scrubber-played,.bp-media-volume-scrubber-container .bp-media-scrubber-underlay{transform:scaleY(1) !important}.bp-media-controls-container{height:40px;margin:0;padding:0 10px;text-align:left}.bp-media-controls-label,.bp-media-controls-btn{display:inline-block;width:45px;height:40px;margin:0;padding:0;color:#fff;font-weight:normal;font-size:12px;text-align:center;vertical-align:top;background-color:transparent;border:none;outline:0 none;cursor:pointer;opacity:.7}.bp-media-controls-label:hover,.bp-media-controls-btn:hover{opacity:1}.bp-media-volume-icon{position:relative;display:inline-block;width:36px;height:40px;vertical-align:top}.bp-is-mobile .bp-media-volume-icon{display:none}.bp-media-controls-label{display:inline-block;width:auto;margin:0 4px;line-height:40px;vertical-align:top;cursor:default}.bp-media-controls-timecode{margin-left:13px}.bp-media-controls-volume-control{display:inline-block;width:45px;height:40px;vertical-align:top}.bp-is-mobile .bp-media-controls-volume-control{display:none}.bp-is-fullscreen .bp-media-fullscreen-icon .bp-exit-fullscreen-icon{display:inline-block}.bp-media-fullscreen-icon{position:absolute;right:10px}.bp-media-gear-icon{position:absolute;right:55px}.bp-media-gear-icon svg path{transform-origin:50%;transition:all .3s}.bp-media-settings-is-open .bp-media-gear-icon svg path{transform:rotateZ(60deg)}.bp-media-cc-icon{position:absolute;right:100px;visibility:visible}.bp-media-settings-subtitles-unavailable .bp-media-cc-icon{visibility:hidden}.bp-media-controls-cc-icon-text{display:inline-block;width:24px;height:24px;padding:0 0 0 1px;color:#fff;font-weight:bold;font-size:12px;line-height:24px;letter-spacing:.1em;background-color:rgba(0,0,0,.3);border-radius:4px}.bp-media-settings-subtitles-on .bp-media-controls-cc-icon-text{color:#fff;background-color:#0061d5}.bp-media-controls-hd{position:absolute;left:22px;display:none;padding:2px 2px 2px 3px;font-weight:bold;font-size:8px;line-height:8px;letter-spacing:.1em;background-color:#0061d5;border-radius:3px}.bp-media-controls-is-hd .bp-media-controls-hd{display:inline}.bp-media-play-icon{display:inline}.bp-media-is-playing .bp-media-play-icon{display:none}.bp-media-pause-icon{display:none}.bp-media-is-playing .bp-media-pause-icon{display:inline}.bp-media-volume-icon-mute,.bp-media-volume-icon-low,.bp-media-volume-icon-medium,.bp-media-volume-icon-high{position:absolute;left:6px;display:none}.bp-media-volume-icon-is-mute .bp-media-volume-icon-mute,.bp-media-volume-icon-is-low .bp-media-volume-icon-low,.bp-media-volume-icon-is-medium .bp-media-volume-icon-medium,.bp-media-volume-icon-is-high .bp-media-volume-icon-high{display:inline}.bp-media{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;border:0 none;visibility:hidden}.bp-media.bp-is-visible{visibility:visible}.bp-media-container{position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:360px;min-height:0;outline:0 none;-webkit-user-select:none;user-select:none}.bp-media-play-button{padding:0;color:inherit;font:inherit;background:none;border:none;cursor:pointer;position:absolute;top:50%;left:50%;width:80px;height:80px;color:#fff;font-size:40px;text-align:center;background:rgba(0,0,0,.5);border:4px solid #fff;border-radius:40px;transform:translate(-50%, -50%);cursor:pointer;transition:all .2s}.bp-media-play-button:hover{background:#000}.bp-media-overlay-play-container{position:absolute;top:50%;left:50%;display:flex;gap:28px;align-items:center;justify-content:center;color:#fff;font-size:40px;text-align:center;transform:translate(-50%, -50%);cursor:pointer;transition:all .2s}.bp-media-overlay-play-container button{padding:0;color:inherit;font:inherit;background:none;border:none;cursor:pointer;width:40px;height:40px;font-size:40px;text-align:center;background:#000;border-radius:40px;cursor:pointer;transition:all .2s}.bp-media-overlay-play-container .bp-media-overlay-play-button{width:60px;height:60px}.bp-has-keyboard-focus .bp-media-time-scrubber-container:focus,.bp-has-keyboard-focus .bp-media-volume-scrubber-container:focus,.bp-has-keyboard-focus .bp-media-controls-btn:focus{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.1)}.bp-dark .bp-error{color:#fff}.bp-dark .bp-icon{opacity:.9}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper{display:flex}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper .bp-crawler-wrapper{display:block}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper .bp-icon{display:none}@keyframes bp-spinner-rotate{to{transform:rotate(360deg)}}.bp-media-buffering-spinner{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border:4px solid rgba(0,97,213,.3);border-top-color:#0061d5;border-radius:40px;animation:bp-spinner-rotate .8s linear infinite}.bp-is-mobile *::-webkit-media-controls-start-playback-button{display:none}.bp-VideoControlsRoot{position:relative;right:auto;bottom:auto;left:auto;z-index:1;align-self:stretch;width:100%}.bp-media--v2{background:radial-gradient(ellipse at center, #2a2a2a 0%, #000 100%)}.bp-media-container--v2{padding:48px}.bp-media-container--v2 video{border:1px solid rgba(255,255,255,.12)}.bp-media-container--v2 .bp-video-preload-wrapper{inset:48px auto 48px 50%;transform:translateX(-50%)}.bp-media-container--v2 .bp-video-preload-wrapper .bp-preload{transform:none}.bp-media-container--v2 .bp-video-preload-wrapper .bp-preload-content{border:1px solid rgba(255,255,255,.12)}.bp-media-stage--v2{display:flex;flex:1 1 0;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:0;padding:48px}.bp-is-fullscreen .bp-media-stage--v2{padding:0}.bp-media-stage--v2 .bp-media-container--v2{flex:0 0 auto;width:auto;min-width:0;height:auto;padding:0}.bp-media-stage--v2 .bp-media-container--v2 video{width:100%;max-width:none;height:100%;max-height:none;object-fit:contain;border:1px solid rgba(255,255,255,.12)}.bp-media-stage--v2 .bp-media-container--v2 .bp-video-preload-wrapper{inset:0;transform:none}.bp-media-stage--v2 .bp-media-container--v2 .bp-video-preload-wrapper .bp-preload{transform:none}.bp-media-stage--v2 .bp-media-container--v2 .bp-video-preload-wrapper .bp-preload-content{object-fit:contain;border:1px solid rgba(255,255,255,.12)}.bp-video-360 .bp-VideoControlsRoot{position:absolute;right:0;bottom:-1px;left:0;width:100%}.bp-video-preload-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden;background-color:transparent;opacity:1;transition:opacity .5s}.bp-video-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-video-preload-wrapper.bp-is-transparent{opacity:0}.bp-video-preload-wrapper .bp-preload{position:absolute;inset:0;width:100%;height:100%;transform:translateY(-60px)}.bp-video-preload-wrapper .bp-preload-content{width:100%;height:100%;object-fit:contain}.bp-video-preload-wrapper .bp-preload-placeholder{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.bp-video-preload-wrapper .bp-video-preload-play-overlay{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:rgba(0,0,0,.5);border-radius:50%;transform:translate(-50%, -50%);pointer-events:none}.bp-video-preload-wrapper .bp-video-preload-play-overlay svg{width:48px;height:48px;fill:#fff}.bp-media-mp4 video{display:block;width:100%;max-width:100%;max-height:100%;margin-right:auto;margin-left:auto;cursor:none}.bp-media-mp4 .bp-media-controls-is-visible video{cursor:pointer}.bp-is-fullscreen .bp-media-mp4 .bp-media-container{width:100%}.bp-media-mp4 .bp-media-settings-item-quality,.bp-media-mp4 .bp-image-switch-360-icon{display:none}.bp-media-mp4 .bp-media-controls-label,.bp-media-mp4 .bp-media-controls-btn{opacity:.9}.bp-media-mp4 .bp-media-controls-label:hover,.bp-media-mp4 .bp-media-controls-btn:hover{opacity:1}

package/dist/lib/index.js CHANGED Viewed

@@ -1010,7 +1010,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
 const CLIENT_NAME_KEY = 'box_client_name';
 const CLIENT_VERSION_KEY = 'box_client_version';
-const CLIENT_VERSION = "3.87.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.89.0"; // eslint-disable-line no-undef
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
 const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
 const PROMISE_MAP = {};
@@ -2135,204 +2135,6 @@ function DurationLabels({
 /***/ },
-/***/ 3524
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  A: () => (/* binding */ MarkerAvatar)
-});
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(1649);
-;// ./src/lib/viewers/controls/media/MarkerAvatar.scss
-// extracted by mini-css-extract-plugin
-;// ./src/lib/viewers/controls/media/MarkerAvatar.tsx
-const AVATAR_PALETTE = [{
-  bg: '#7fb0ea',
-  fg: '#222'
-}, {
-  bg: '#003c84',
-  fg: '#fff'
-}, {
-  bg: '#ffeb7f',
-  fg: '#222'
-}, {
-  bg: '#92e0c0',
-  fg: '#222'
-}, {
-  bg: '#fad98d',
-  fg: '#222'
-}, {
-  bg: '#91c2fd',
-  fg: '#222'
-}, {
-  bg: '#f69bab',
-  fg: '#222'
-}, {
-  bg: '#cf9ff6',
-  fg: '#222'
-}, {
-  bg: '#f8c08c',
-  fg: '#222'
-}, {
-  bg: '#a392e0',
-  fg: '#222'
-}];
-function AnonymousAvatarIcon() {
-  return /*#__PURE__*/external_react_["default"].createElement("svg", {
-    "aria-hidden": "true",
-    className: "bp-MarkerAvatar-anonymousIcon",
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, /*#__PURE__*/external_react_["default"].createElement("path", {
-    d: "M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 1.5c-2.5 0-5 1.25-5 3.75V14h10v-.75c0-2.5-2.5-3.75-5-3.75Z",
-    fill: "currentColor"
-  }));
-}
-function MarkerAvatar({
-  avatarUrl,
-  colorIndex = 0,
-  initial,
-  size
-}) {
-  const safeIndex = Number.isFinite(colorIndex) ? Math.abs(colorIndex) % AVATAR_PALETTE.length : 0;
-  const {
-    bg: bgColor,
-    fg: textColor
-  } = AVATAR_PALETTE[safeIndex];
-  const [imgFailed, setImgFailed] = external_react_["default"].useState(false);
-  const [loadedUrl, setLoadedUrl] = external_react_["default"].useState(null);
-  const imgRef = external_react_["default"].useRef(null);
-  // Keep initial + palette until onLoad (and for cached complete). Shared with video ticks.
-  const showImage = Boolean(avatarUrl) && !imgFailed && loadedUrl === avatarUrl;
-  external_react_["default"].useEffect(() => {
-    setImgFailed(false);
-  }, [avatarUrl]);
-  external_react_["default"].useLayoutEffect(() => {
-    const img = imgRef.current;
-    if (avatarUrl && img?.complete && img.naturalWidth > 0) {
-      setLoadedUrl(avatarUrl);
-    }
-  }, [avatarUrl]);
-  let fallback = /*#__PURE__*/external_react_["default"].createElement(AnonymousAvatarIcon, null);
-  if (initial) {
-    fallback = /*#__PURE__*/external_react_["default"].createElement("span", {
-      className: "bp-MarkerAvatar-initial",
-      style: {
-        color: textColor
-      }
-    }, initial);
-  }
-  const style = {};
-  if (!showImage) {
-    style.backgroundColor = bgColor;
-  }
-  if (size) {
-    style.width = size;
-    style.height = size;
-  }
-  return /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-MarkerAvatar",
-    style: Object.keys(style).length > 0 ? style : undefined
-  }, avatarUrl && !imgFailed && /*#__PURE__*/external_react_["default"].createElement("img", {
-    ref: imgRef,
-    alt: "",
-    onError: () => {
-      setImgFailed(true);
-    },
-    onLoad: () => {
-      if (avatarUrl) {
-        setLoadedUrl(avatarUrl);
-      }
-    },
-    src: avatarUrl
-  }), !showImage && fallback);
-}
-/***/ },
-/***/ 9232
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  A: () => (/* binding */ MarkerAvatarStack)
-});
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(1649);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MarkerAvatar.tsx + 1 modules
-var MarkerAvatar = __webpack_require__(3524);
-;// ./src/lib/viewers/controls/media/MarkerAvatarStack.scss
-// extracted by mini-css-extract-plugin
-;// ./src/lib/viewers/controls/media/MarkerAvatarStack.tsx
-const MAX_VISIBLE_AVATARS = 4;
-function MarkerAvatarStack({
-  markers,
-  onMarkerClick,
-  overlapPx,
-  selectedId,
-  size
-}) {
-  const hasOverflow = markers.length > MAX_VISIBLE_AVATARS;
-  const visibleMarkers = hasOverflow ? markers.slice(0, MAX_VISIBLE_AVATARS - 1) : markers;
-  const overflowMarkers = hasOverflow ? markers.slice(MAX_VISIBLE_AVATARS - 1) : [];
-  const isOverflowSelected = overflowMarkers.some(marker => marker.id === selectedId);
-  const style = overlapPx != null ? {
-    '--bp-marker-stack-overlap': `-${overlapPx}px`
-  } : undefined;
-  return /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-MarkerAvatarStack",
-    style: style
-  }, visibleMarkers.map(marker => /*#__PURE__*/external_react_["default"].createElement("button", {
-    key: marker.id,
-    "aria-label": "Comment marker",
-    "aria-pressed": marker.id === selectedId,
-    className: `bp-MarkerAvatarStack-item${marker.id === selectedId ? ' bp-MarkerAvatarStack-item--selected' : ''}`,
-    "data-resin-target": "commentMarkerStackAvatar",
-    onClick: e => {
-      e.stopPropagation();
-      onMarkerClick?.(marker);
-    },
-    type: "button"
-  }, /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar/* default */.A, {
-    avatarUrl: marker.avatarUrl,
-    colorIndex: marker.colorIndex,
-    initial: marker.initial,
-    size: size
-  }))), hasOverflow && /*#__PURE__*/external_react_["default"].createElement("button", {
-    "aria-label": "Comment marker",
-    "aria-pressed": isOverflowSelected,
-    className: `bp-MarkerAvatarStack-item bp-MarkerAvatarStack-overflow${isOverflowSelected ? ' bp-MarkerAvatarStack-item--selected' : ''}`,
-    "data-resin-target": "commentMarkerStackAvatarOverflow",
-    onClick: e => {
-      e.stopPropagation();
-      onMarkerClick?.(markers[MAX_VISIBLE_AVATARS - 1]);
-    },
-    type: "button"
-  }, /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-MarkerAvatar bp-MarkerAvatarStack-overflowBadge",
-    style: size ? {
-      width: size,
-      height: size
-    } : undefined
-  }, /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-MarkerAvatar-initial"
-  }, "+", markers.length - (MAX_VISIBLE_AVATARS - 1)))));
-}
-/***/ },
 /***/ 6929
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
@@ -3443,7 +3245,209 @@ function VolumeControls({
 /***/ },
-/***/ 2400
+/***/ 2040
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ MarkerAvatar)
+});
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(1649);
+;// ./src/lib/viewers/controls/media/markers/MarkerAvatar.scss
+// extracted by mini-css-extract-plugin
+;// ./src/lib/viewers/controls/media/markers/MarkerAvatar.tsx
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const AVATAR_PALETTE = [{
+  bg: '#7fb0ea',
+  fg: '#222'
+}, {
+  bg: '#003c84',
+  fg: '#fff'
+}, {
+  bg: '#ffeb7f',
+  fg: '#222'
+}, {
+  bg: '#92e0c0',
+  fg: '#222'
+}, {
+  bg: '#fad98d',
+  fg: '#222'
+}, {
+  bg: '#91c2fd',
+  fg: '#222'
+}, {
+  bg: '#f69bab',
+  fg: '#222'
+}, {
+  bg: '#cf9ff6',
+  fg: '#222'
+}, {
+  bg: '#f8c08c',
+  fg: '#222'
+}, {
+  bg: '#a392e0',
+  fg: '#222'
+}];
+function AnonymousAvatarIcon() {
+  return /*#__PURE__*/external_react_["default"].createElement("svg", {
+    "aria-hidden": "true",
+    className: "bp-MarkerAvatar-anonymousIcon",
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/external_react_["default"].createElement("path", {
+    d: "M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 1.5c-2.5 0-5 1.25-5 3.75V14h10v-.75c0-2.5-2.5-3.75-5-3.75Z",
+    fill: "currentColor"
+  }));
+}
+function MarkerAvatar({
+  avatarUrl,
+  colorIndex = 0,
+  initial,
+  size
+}) {
+  const safeIndex = Number.isFinite(colorIndex) ? Math.abs(colorIndex) % AVATAR_PALETTE.length : 0;
+  const {
+    bg: bgColor,
+    fg: textColor
+  } = AVATAR_PALETTE[safeIndex];
+  const [imgFailed, setImgFailed] = external_react_["default"].useState(false);
+  const [loadedUrl, setLoadedUrl] = external_react_["default"].useState(null);
+  const imgRef = external_react_["default"].useRef(null);
+  // Keep initial + palette until onLoad (and for cached complete). Shared with video ticks.
+  const showImage = Boolean(avatarUrl) && !imgFailed && loadedUrl === avatarUrl;
+  external_react_["default"].useEffect(() => {
+    setImgFailed(false);
+  }, [avatarUrl]);
+  external_react_["default"].useLayoutEffect(() => {
+    const img = imgRef.current;
+    if (avatarUrl && img?.complete && img.naturalWidth > 0) {
+      setLoadedUrl(avatarUrl);
+    }
+  }, [avatarUrl]);
+  let fallback = /*#__PURE__*/external_react_["default"].createElement(AnonymousAvatarIcon, null);
+  if (initial) {
+    fallback = /*#__PURE__*/external_react_["default"].createElement("span", {
+      className: "bp-MarkerAvatar-initial",
+      style: {
+        color: textColor
+      }
+    }, initial);
+  }
+  const style = {};
+  if (!showImage) {
+    style.backgroundColor = bgColor;
+  }
+  if (size) {
+    _extends(style, {
+      '--bp-marker-avatar-size': `${size}px`
+    });
+  }
+  return /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-MarkerAvatar",
+    style: Object.keys(style).length > 0 ? style : undefined
+  }, avatarUrl && !imgFailed && /*#__PURE__*/external_react_["default"].createElement("img", {
+    ref: imgRef,
+    alt: "",
+    onError: () => {
+      setImgFailed(true);
+    },
+    onLoad: () => {
+      if (avatarUrl) {
+        setLoadedUrl(avatarUrl);
+      }
+    },
+    src: avatarUrl
+  }), !showImage && fallback);
+}
+/***/ },
+/***/ 308
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ MarkerAvatarStack)
+});
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(1649);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatar.tsx + 1 modules
+var MarkerAvatar = __webpack_require__(2040);
+;// ./src/lib/viewers/controls/media/markers/MarkerAvatarStack.scss
+// extracted by mini-css-extract-plugin
+;// ./src/lib/viewers/controls/media/markers/MarkerAvatarStack.tsx
+const MAX_VISIBLE_AVATARS = 4;
+function MarkerAvatarStack({
+  markers,
+  onMarkerClick,
+  overlapPx,
+  selectedId,
+  size
+}) {
+  const hasOverflow = markers.length > MAX_VISIBLE_AVATARS;
+  const visibleMarkers = hasOverflow ? markers.slice(0, MAX_VISIBLE_AVATARS - 1) : markers;
+  const overflowMarkers = hasOverflow ? markers.slice(MAX_VISIBLE_AVATARS - 1) : [];
+  const isOverflowSelected = overflowMarkers.some(marker => marker.id === selectedId);
+  const style = overlapPx != null ? {
+    '--bp-marker-stack-overlap': `-${overlapPx}px`
+  } : undefined;
+  return /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-MarkerAvatarStack",
+    style: style
+  }, visibleMarkers.map(marker => /*#__PURE__*/external_react_["default"].createElement("button", {
+    key: marker.id,
+    "aria-label": "Comment marker",
+    "aria-pressed": marker.id === selectedId,
+    className: `bp-MarkerAvatarStack-item${marker.id === selectedId ? ' bp-MarkerAvatarStack-item--selected' : ''}`,
+    "data-bp-marker-selected": marker.id === selectedId ? '' : undefined,
+    "data-resin-target": "commentMarkerStackAvatar",
+    onClick: e => {
+      e.stopPropagation();
+      onMarkerClick?.(marker);
+    },
+    type: "button"
+  }, /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar/* default */.A, {
+    avatarUrl: marker.avatarUrl,
+    colorIndex: marker.colorIndex,
+    initial: marker.initial,
+    size: size
+  }))), hasOverflow && /*#__PURE__*/external_react_["default"].createElement("button", {
+    "aria-label": "Comment marker",
+    "aria-pressed": isOverflowSelected,
+    className: `bp-MarkerAvatarStack-item bp-MarkerAvatarStack-overflow${isOverflowSelected ? ' bp-MarkerAvatarStack-item--selected' : ''}`,
+    "data-bp-marker-selected": isOverflowSelected ? '' : undefined,
+    "data-resin-target": "commentMarkerStackAvatarOverflow",
+    onClick: e => {
+      e.stopPropagation();
+      const overflowTarget = overflowMarkers.find(marker => marker.id === selectedId) ?? overflowMarkers[0];
+      onMarkerClick?.(overflowTarget);
+    },
+    type: "button"
+  }, /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-MarkerAvatar bp-MarkerAvatarStack-overflowBadge",
+    style: size ? {
+      '--bp-marker-avatar-size': `${size}px`
+    } : undefined
+  }, /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-MarkerAvatar-initial"
+  }, "+", markers.length - (MAX_VISIBLE_AVATARS - 1)))));
+}
+/***/ },
+/***/ 5510
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
@@ -3496,6 +3500,97 @@ function buildClusters(markers, durationValue, trackWidth, thresholdPx = CLUSTER
 /***/ },
+/***/ 2378
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (/* binding */ useDismissableMarkerSelection)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
+function eventTargetElement(target) {
+  if (target instanceof Element) {
+    return target;
+  }
+  if (target instanceof Text) {
+    return target.parentElement;
+  }
+  return null;
+}
+/**
+ * Optimistic comment-badge selection that clears on pointerdown outside the
+ * selected avatar or its cluster. Host `hostSelectedId` can restore a different
+ * id; acking the dismissed id must not bring the ring back.
+ */
+function useDismissableMarkerSelection(hostSelectedId = null) {
+  const containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  const dismissedIdRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  const [optimisticSelectedId, setOptimisticSelectedId] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  const [isSelectionDismissed, setIsSelectionDismissed] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  const selectedId = optimisticSelectedId ?? (isSelectionDismissed ? null : hostSelectedId);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    setOptimisticSelectedId(null);
+    if (dismissedIdRef.current && hostSelectedId === dismissedIdRef.current) {
+      return;
+    }
+    dismissedIdRef.current = null;
+    setIsSelectionDismissed(false);
+  }, [hostSelectedId]);
+  const selectMarker = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(id => {
+    dismissedIdRef.current = null;
+    setIsSelectionDismissed(false);
+    setOptimisticSelectedId(id);
+  }, []);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (!selectedId) {
+      return undefined;
+    }
+    const isEventInsideSelectedBadge = target => {
+      const container = containerRef.current;
+      if (!container) {
+        return true;
+      }
+      const selected = container.querySelector('[data-bp-marker-selected]');
+      if (!selected) {
+        return true;
+      }
+      const el = eventTargetElement(target);
+      if (!el) {
+        return true;
+      }
+      if (selected.contains(el)) {
+        return true;
+      }
+      const group = el.closest('[data-bp-marker-group]');
+      return Boolean(group && group.contains(selected));
+    };
+    const onDocumentPointerDown = event => {
+      if (isEventInsideSelectedBadge(event.target)) {
+        return;
+      }
+      dismissedIdRef.current = selectedId;
+      setOptimisticSelectedId(null);
+      setIsSelectionDismissed(true);
+      const active = document.activeElement;
+      if (active instanceof HTMLElement && containerRef.current?.contains(active)) {
+        active.blur();
+      }
+    };
+    document.addEventListener('pointerdown', onDocumentPointerDown, true);
+    return () => {
+      document.removeEventListener('pointerdown', onDocumentPointerDown, true);
+    };
+  }, [selectedId]);
+  return {
+    containerRef,
+    selectMarker,
+    selectedId
+  };
+}
+/***/ },
 /***/ 5346
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
@@ -4385,7 +4480,7 @@ function getPdfjsWorkerSrc() {
 /***/ },
-/***/ 9286
+/***/ 6180
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
@@ -4748,12 +4843,14 @@ function getPlayheadCameraAction({
     type: 'none'
   };
 }
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/buildClusters.ts
-var buildClusters = __webpack_require__(2400);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MarkerAvatar.tsx + 1 modules
-var MarkerAvatar = __webpack_require__(3524);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MarkerAvatarStack.tsx + 1 modules
-var MarkerAvatarStack = __webpack_require__(9232);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/helpers/useDismissableMarkerSelection.ts
+var useDismissableMarkerSelection = __webpack_require__(2378);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/helpers/buildClusters.ts
+var buildClusters = __webpack_require__(5510);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatarStack.tsx + 1 modules
+var MarkerAvatarStack = __webpack_require__(308);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatar.tsx + 1 modules
+var MarkerAvatar = __webpack_require__(2040);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
 var utils = __webpack_require__(5346);
 ;// ./src/lib/viewers/media/waveform/WaveformCommentMarkers.scss
@@ -4765,8 +4862,6 @@ var utils = __webpack_require__(5346);
 const WAVEFORM_MARKER_SIZE_PX = 20;
 function hasMappedWindow(viewport) {
   return !!viewport && Number.isFinite(viewport.startSec) && viewport.endSec > viewport.startSec;
@@ -4809,25 +4904,16 @@ function WaveformCommentMarkers({
   selectedId: hostSelectedId = null,
   viewport = null
 }) {
-  const overlayRef = (0,external_react_.useRef)(null);
   const trackRef = (0,external_react_.useRef)(null);
-  const dismissedIdRef = (0,external_react_.useRef)(null);
+  const {
+    containerRef,
+    selectMarker,
+    selectedId
+  } = (0,useDismissableMarkerSelection/* default */.A)(hostSelectedId);
   const [trackWidth, setTrackWidth] = (0,external_react_.useState)(0);
-  const [optimisticSelectedId, setOptimisticSelectedId] = (0,external_react_.useState)(null);
-  const [isSelectionDismissed, setIsSelectionDismissed] = (0,external_react_.useState)(false);
-  const selectedId = optimisticSelectedId ?? (isSelectionDismissed ? null : hostSelectedId);
   const canShowTrack = durationSec > 0 && commentMarkers.length > 0;
   const zoomLevel = viewport?.zoomLevel ?? constants/* WAVEFORM_ZOOM_MIN */.LW;
   const isZoomed = hasMappedWindow(viewport) && viewport.zoomLevel > constants/* WAVEFORM_ZOOM_MIN */.LW;
-  (0,external_react_.useEffect)(() => {
-    setOptimisticSelectedId(null);
-    // Host ack of the dismissed id must not bring the ring back.
-    if (dismissedIdRef.current && hostSelectedId === dismissedIdRef.current) {
-      return;
-    }
-    dismissedIdRef.current = null;
-    setIsSelectionDismissed(false);
-  }, [hostSelectedId]);
   (0,external_react_.useLayoutEffect)(() => {
     if (!canShowTrack) {
       setTrackWidth(0);
@@ -4855,44 +4941,14 @@ function WaveformCommentMarkers({
   }, [commentMarkers, durationSec, trackWidth, zoomLevel]);
   const handleMarkerClick = (0,external_react_.useCallback)((marker, event) => {
     event?.stopPropagation();
-    dismissedIdRef.current = null;
-    setIsSelectionDismissed(false);
-    setOptimisticSelectedId(marker.id);
+    selectMarker(marker.id);
     onCommentMarkerClick?.(marker);
-  }, [onCommentMarkerClick]);
-  (0,external_react_.useEffect)(() => {
-    if (!selectedId) {
-      return undefined;
-    }
-    const isEventInsideSelectedBadge = target => {
-      if (!(target instanceof Element) || !overlayRef.current) {
-        return false;
-      }
-      const selected = overlayRef.current.querySelector('.bp-WaveformCommentMarkers-marker--selected, .bp-MarkerAvatarStack-item--selected');
-      return Boolean(selected && selected.contains(target));
-    };
-    const onDocumentPointerDown = event => {
-      if (isEventInsideSelectedBadge(event.target)) {
-        return;
-      }
-      dismissedIdRef.current = selectedId;
-      setOptimisticSelectedId(null);
-      setIsSelectionDismissed(true);
-      const active = document.activeElement;
-      if (active instanceof HTMLElement && overlayRef.current?.contains(active)) {
-        active.blur();
-      }
-    };
-    document.addEventListener('pointerdown', onDocumentPointerDown, true);
-    return () => {
-      document.removeEventListener('pointerdown', onDocumentPointerDown, true);
-    };
-  }, [selectedId]);
+  }, [onCommentMarkerClick, selectMarker]);
   if (!(durationSec > 0) || commentMarkers.length === 0) {
     return null;
   }
   return /*#__PURE__*/external_react_["default"].createElement("div", {
-    ref: overlayRef,
+    ref: containerRef,
     className: `bp-WaveformCommentMarkers${isZoomed ? ' bp-WaveformCommentMarkers--zoomed' : ''}`,
     "data-testid": "bp-waveform-comment-markers"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
@@ -4908,6 +4964,7 @@ function WaveformCommentMarkers({
       return /*#__PURE__*/external_react_["default"].createElement("div", {
         key: cluster.id,
         className: className,
+        "data-bp-marker-group": "",
         "data-testid": "bp-waveform-comment-marker",
         style: {
           left
@@ -4916,8 +4973,7 @@ function WaveformCommentMarkers({
         markers: cluster.markers,
         onMarkerClick: handleMarkerClick,
         overlapPx: WAVEFORM_MARKER_SIZE_PX / 2,
-        selectedId: selectedId,
-        size: WAVEFORM_MARKER_SIZE_PX
+        selectedId: selectedId
       }));
     }
     return /*#__PURE__*/external_react_["default"].createElement("button", {
@@ -4925,6 +4981,7 @@ function WaveformCommentMarkers({
       "aria-label": "Comment marker",
       "aria-pressed": isSelected,
       className: className,
+      "data-bp-marker-selected": isSelected ? '' : undefined,
       "data-resin-target": "commentMarker",
       "data-testid": "bp-waveform-comment-marker",
       onClick: event => handleMarkerClick(marker, event),
@@ -4935,8 +4992,7 @@ function WaveformCommentMarkers({
     }, /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar/* default */.A, {
       avatarUrl: marker.avatarUrl,
       colorIndex: marker.colorIndex,
-      initial: marker.initial,
-      size: WAVEFORM_MARKER_SIZE_PX
+      initial: marker.initial
     }));
   })));
 }
@@ -6105,24 +6161,66 @@ function WaveformView({
 // EXTERNAL MODULE: ./node_modules/classnames/index.js
 var classnames = __webpack_require__(2485);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
-;// ./src/lib/viewers/controls/icons/IconZoom24.tsx
+;// ./src/lib/viewers/controls/icons/IconZoomIn24.tsx
-function IconZoom24() {
+function IconZoomIn24() {
   return /*#__PURE__*/external_react_.createElement("svg", {
     focusable: false,
     height: 24,
     viewBox: "0 0 24 24",
     width: 24
-  }, /*#__PURE__*/external_react_.createElement("path", {
-    d: "M2 12h20M6 8l-4 4 4 4M18 8l4 4-4 4",
+  }, /*#__PURE__*/external_react_.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    fill: "none",
+    r: "6.25",
+    stroke: "currentColor",
+    strokeWidth: "1.75"
+  }), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M14.5 14.5 20 20",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "2"
+    strokeWidth: "1.75"
+  }), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M10 7.25v5.5M7.25 10h5.5",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: "1.75"
   }));
 }
-/* harmony default export */ const icons_IconZoom24 = (IconZoom24);
+/* harmony default export */ const icons_IconZoomIn24 = (IconZoomIn24);
+;// ./src/lib/viewers/controls/icons/IconZoomOut24.tsx
+function IconZoomOut24() {
+  return /*#__PURE__*/external_react_.createElement("svg", {
+    focusable: false,
+    height: 24,
+    viewBox: "0 0 24 24",
+    width: 24
+  }, /*#__PURE__*/external_react_.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    fill: "none",
+    r: "6.25",
+    stroke: "currentColor",
+    strokeWidth: "1.75"
+  }), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M14.5 14.5 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: "1.75"
+  }), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M7.25 10h5.5",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: "1.75"
+  }));
+}
+/* harmony default export */ const icons_IconZoomOut24 = (IconZoomOut24);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
 var MediaToggle = __webpack_require__(8997);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/slider/SliderControl.tsx + 1 modules
@@ -6139,6 +6237,7 @@ var SliderControl = __webpack_require__(4937);
 function WaveformZoomControl({
   isRevealed = false,
   maxZoom,
@@ -6148,39 +6247,25 @@ function WaveformZoomControl({
   const [isHovered, setHovered] = (0,external_react_.useState)(false);
   const [isFocused, setFocused] = (0,external_react_.useState)(false);
   const dismissTimerRef = (0,external_react_.useRef)(0);
-  const flyoutRef = (0,external_react_.useRef)(null);
-  const shouldFocusSliderRef = (0,external_react_.useRef)(false);
   const sliderId = `bp-waveform-zoom-slider${(0,external_react_.useId)()}`;
   const zoom = clampWaveformZoom(zoomLevel, maxZoom);
   const zoomValue = Math.round(sliderValueFromZoom(zoom, maxZoom));
   const isOpen = isHovered || isFocused || isRevealed;
+  const isAtMinZoom = zoomValue <= 0;
+  const isAtMaxZoom = zoomValue >= constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh;
   const clearDismiss = (0,external_react_.useCallback)(() => {
     window.clearTimeout(dismissTimerRef.current);
     dismissTimerRef.current = 0;
   }, []);
   (0,external_react_.useEffect)(() => () => window.clearTimeout(dismissTimerRef.current), []);
-  (0,external_react_.useLayoutEffect)(() => {
-    if (!isOpen || !shouldFocusSliderRef.current) {
-      return;
-    }
-    shouldFocusSliderRef.current = false;
-    flyoutRef.current?.querySelector('[role="slider"]')?.focus();
-  }, [isOpen]);
   const handleSlider = (0,external_react_.useCallback)(newValue => {
     onZoomChange(zoomFromSliderValue(newValue, maxZoom));
   }, [maxZoom, onZoomChange]);
-  const handleToggleClick = (0,external_react_.useCallback)(() => {
-    clearDismiss();
-    if (isOpen) {
-      shouldFocusSliderRef.current = false;
-      setFocused(false);
-      setHovered(false);
-      return;
-    }
-    shouldFocusSliderRef.current = true;
-    setFocused(true);
-  }, [clearDismiss, isOpen]);
+  const handleStep = (0,external_react_.useCallback)(delta => {
+    onZoomChange(zoomFromSliderValue(zoomValue + delta, maxZoom));
+  }, [maxZoom, onZoomChange, zoomValue]);
   return /*#__PURE__*/external_react_["default"].createElement("div", {
+    "aria-label": "Zoom",
     className: classnames_default()('bp-WaveformZoomControl', {
       'bp-is-open': isOpen
     }),
@@ -6204,14 +6289,37 @@ function WaveformZoomControl({
       dismissTimerRef.current = window.setTimeout(() => {
         setHovered(false);
       }, constants/* WAVEFORM_ZOOM_DISMISS_MS */.m6);
-    }
-  }, /*#__PURE__*/external_react_["default"].createElement("div", {
-    ref: flyoutRef,
+    },
+    role: "group"
+  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+    "aria-disabled": isAtMaxZoom,
+    className: "bp-WaveformZoomControl-button",
+    "data-resin-target": "waveformZoomIn",
+    "data-testid": "bp-waveform-zoom-in",
+    onClick: () => {
+      if (!isAtMaxZoom) {
+        handleStep(constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD);
+      }
+    },
+    title: "Zoom in"
+  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconZoomIn24, null)), /*#__PURE__*/external_react_["default"].createElement("div", {
     "aria-hidden": !isOpen,
     className: classnames_default()('bp-WaveformZoomControl-flyout', {
       'bp-is-open': isOpen
     })
-  }, /*#__PURE__*/external_react_["default"].createElement(SliderControl/* default */.A, {
+  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+    "aria-disabled": isAtMinZoom,
+    className: "bp-WaveformZoomControl-button",
+    "data-resin-target": "waveformZoomOut",
+    "data-testid": "bp-waveform-zoom-out",
+    onClick: () => {
+      if (!isAtMinZoom) {
+        handleStep(-constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD);
+      }
+    },
+    tabIndex: isOpen ? 0 : -1,
+    title: "Zoom out"
+  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconZoomOut24, null)), /*#__PURE__*/external_react_["default"].createElement(SliderControl/* default */.A, {
     "aria-hidden": !isOpen,
     className: "bp-WaveformZoomControl-slider",
     "data-resin-target": "waveformZoomSlider",
@@ -6226,14 +6334,7 @@ function WaveformZoomControl({
     tabIndex: isOpen ? 0 : -1,
     title: "Zoom Slider",
     value: zoomValue
-  })), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
-    "aria-controls": sliderId,
-    "aria-expanded": isOpen,
-    className: "bp-WaveformZoomControl-toggle",
-    "data-resin-target": "waveformZoom",
-    onClick: handleToggleClick,
-    title: "Zoom"
-  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconZoom24, null)));
+  })));
 }
 ;// ./src/lib/viewers/media/MP3ControlsV2.scss
 // extracted by mini-css-extract-plugin
@@ -6489,6 +6590,7 @@ function isFpsAvailable(player) {
 /* harmony export */   LW: () => (/* binding */ WAVEFORM_ZOOM_MIN),
 /* harmony export */   Lu: () => (/* binding */ WAVEFORM_BAR_GAP),
 /* harmony export */   NM: () => (/* binding */ WAVEFORM_FOLLOW_INSET_PX),
+/* harmony export */   QD: () => (/* binding */ WAVEFORM_ZOOM_BUTTON_STEP),
 /* harmony export */   XS: () => (/* binding */ WAVEFORM_BAR_MIN_HEIGHT),
 /* harmony export */   Zs: () => (/* binding */ WAVEFORM_FOLLOW_SCROLL_SETTLE_MS),
 /* harmony export */   f3: () => (/* binding */ CLIENT_DECODE_PEAK_COUNT),
@@ -6532,6 +6634,8 @@ const WAVEFORM_ZOOM_MAX = 24;
 /** Visible window never shorter than this. */
 const WAVEFORM_MIN_VIEW_WINDOW_SEC = 4;
 const WAVEFORM_ZOOM_SLIDER_MAX = 100;
+/** One click on zoom in/out moves this many units on the 0–100 slider. */
+const WAVEFORM_ZOOM_BUTTON_STEP = 10;
 const WAVEFORM_ZOOM_DISMISS_MS = 250;
 const WAVEFORM_FOLLOW_INSET_PX = 200;
 const WAVEFORM_PLAYHEAD_JUMP_MS = 400;
@@ -22920,7 +23024,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.87.0";
+const CLIENT_VERSION = "3.89.0";
 /* eslint-enable no-undef */
 class Logger {
@@ -35771,7 +35875,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @return {Promise<{ default: Function }>} MP3ControlsV2 module
    */
   importV2Controls() {
-    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 9286));
+    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 6180));
   }
   /**
@@ -37670,8 +37774,6 @@ function VideoControls({
 }
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 1 modules
 var TimestampControl = __webpack_require__(3904);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/buildClusters.ts
-var buildClusters = __webpack_require__(2400);
 // EXTERNAL MODULE: ./src/lib/viewers/media/formatTimecode.ts
 var formatTimecode = __webpack_require__(4179);
 ;// ./src/lib/viewers/controls/media/FilmstripV2.scss
@@ -37752,18 +37854,89 @@ function FilmstripV2({
     "data-testid": "bp-FilmstripV2-time"
   }, fps ? (0,formatTimecode/* default */.A)(time, fps) : (0,DurationLabels/* formatTime */.f)(time)));
 }
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MarkerAvatarStack.tsx + 1 modules
-var MarkerAvatarStack = __webpack_require__(9232);
-;// ./src/lib/viewers/controls/media/MarkerCluster.scss
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/helpers/useDismissableMarkerSelection.ts
+var useDismissableMarkerSelection = __webpack_require__(2378);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/helpers/buildClusters.ts
+var buildClusters = __webpack_require__(5510);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatar.tsx + 1 modules
+var MarkerAvatar = __webpack_require__(2040);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatarStack.tsx + 1 modules
+var MarkerAvatarStack = __webpack_require__(308);
+;// ./src/lib/viewers/controls/media/markers/helpers/onMarkerGroupTickClick.ts
+/** Click the range/group tick: first member, unless one is already selected. */
+function onMarkerGroupTickClick(event, markers, selectedId, onMarkerClick) {
+  event.stopPropagation();
+  if (selectedId && markers.some(marker => marker.id === selectedId)) {
+    return;
+  }
+  onMarkerClick?.(markers[0]);
+}
+;// ./src/lib/viewers/controls/media/markers/MarkerTick.tsx
+function MarkerTick({
+  markers,
+  onMarkerClick,
+  position,
+  selectedId
+}) {
+  const isGroup = markers.length > 1;
+  const isSelected = !isGroup && markers[0].id === selectedId;
+  const className = `bp-TimeControlsV2-marker${isGroup ? ' bp-TimeControlsV2-marker--group' : ''}${isSelected ? ' bp-TimeControlsV2-marker--selected' : ''}`;
+  const style = {
+    left: `${position}%`
+  };
+  if (isGroup) {
+    return /*#__PURE__*/external_react_["default"].createElement("div", {
+      className: className,
+      "data-bp-marker-group": "",
+      "data-testid": "bp-time-controls-marker",
+      style: style
+    }, /*#__PURE__*/external_react_["default"].createElement("button", {
+      "aria-label": "Comment marker",
+      className: "bp-TimeControlsV2-marker-tick",
+      "data-resin-target": "commentMarkerGroup",
+      onClick: e => onMarkerGroupTickClick(e, markers, selectedId, onMarkerClick),
+      type: "button"
+    }), /*#__PURE__*/external_react_["default"].createElement(MarkerAvatarStack/* default */.A, {
+      markers: markers,
+      onMarkerClick: onMarkerClick,
+      selectedId: selectedId
+    }));
+  }
+  return /*#__PURE__*/external_react_["default"].createElement("button", {
+    "aria-label": "Comment marker",
+    "aria-pressed": isSelected,
+    className: className,
+    "data-bp-marker-selected": isSelected ? '' : undefined,
+    "data-resin-target": "commentMarker",
+    "data-testid": "bp-time-controls-marker",
+    onClick: e => {
+      e.stopPropagation();
+      onMarkerClick?.(markers[0]);
+    },
+    style: style,
+    type: "button"
+  }, /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar/* default */.A, {
+    avatarUrl: markers[0].avatarUrl,
+    colorIndex: markers[0].colorIndex,
+    initial: markers[0].initial
+  }));
+}
+;// ./src/lib/viewers/controls/media/markers/MarkerCluster.scss
 // extracted by mini-css-extract-plugin
-;// ./src/lib/viewers/controls/media/MarkerCluster.tsx
+;// ./src/lib/viewers/controls/media/markers/MarkerCluster.tsx
 function MarkerCluster({
   cluster,
-  onMarkerClick
+  onMarkerClick,
+  selectedId
 }) {
   const {
     markers,
@@ -37776,54 +37949,19 @@ function MarkerCluster({
   };
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MarkerCluster",
+    "data-bp-marker-group": "",
     "data-testid": "bp-marker-cluster",
     style: style
   }, /*#__PURE__*/external_react_["default"].createElement("button", {
     "aria-label": "Comment marker",
     className: "bp-MarkerCluster-tick",
     "data-resin-target": "commentMarkerCluster",
-    onClick: e => {
-      e.stopPropagation();
-      onMarkerClick?.(markers[0]);
-    },
+    onClick: e => onMarkerGroupTickClick(e, markers, selectedId, onMarkerClick),
     type: "button"
   }), /*#__PURE__*/external_react_["default"].createElement(MarkerAvatarStack/* default */.A, {
     markers: markers,
-    onMarkerClick: onMarkerClick
-  }));
-}
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MarkerAvatar.tsx + 1 modules
-var MarkerAvatar = __webpack_require__(3524);
-;// ./src/lib/viewers/controls/media/MarkerTick.tsx
-function MarkerTick({
-  markers,
-  onMarkerClick,
-  position
-}) {
-  const isGroup = markers.length > 1;
-  return /*#__PURE__*/external_react_["default"].createElement("button", {
-    "aria-label": "Comment marker",
-    className: `bp-TimeControlsV2-marker${isGroup ? ' bp-TimeControlsV2-marker--group' : ''}`,
-    "data-resin-target": "commentMarker",
-    "data-testid": "bp-time-controls-marker",
-    onClick: e => {
-      e.stopPropagation();
-      onMarkerClick?.(markers[0]);
-    },
-    style: {
-      left: `${position}%`
-    },
-    type: "button"
-  }, isGroup ? /*#__PURE__*/external_react_["default"].createElement(MarkerAvatarStack/* default */.A, {
-    markers: markers,
-    onMarkerClick: onMarkerClick
-  }) : /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar/* default */.A, {
-    avatarUrl: markers[0].avatarUrl,
-    colorIndex: markers[0].colorIndex,
-    initial: markers[0].initial
+    onMarkerClick: onMarkerClick,
+    selectedId: selectedId
   }));
 }
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
@@ -37841,8 +37979,6 @@ var utils = __webpack_require__(5346);
 const TRACK_COLOR_BUFFERED = 'rgb(127, 127, 127)';
 const TRACK_COLOR_UNPLAYED = 'rgb(85, 85, 85)';
 function TimeControlsV2({
@@ -37863,6 +37999,12 @@ function TimeControlsV2({
   const [hoverTime, setHoverTime] = external_react_["default"].useState(0);
   const [trackWidth, setTrackWidth] = external_react_["default"].useState(0);
   const scrubberRef = external_react_["default"].useRef(null);
+  const hostSelectedId = external_react_["default"].useMemo(() => commentMarkers.find(marker => marker.isSelected)?.id ?? null, [commentMarkers]);
+  const {
+    containerRef,
+    selectMarker,
+    selectedId
+  } = (0,useDismissableMarkerSelection/* default */.A)(hostSelectedId);
   const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
   const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
   const currentPercentage = (0,utils/* percent */.K)(currentValue, durationValue);
@@ -37880,6 +38022,10 @@ function TimeControlsV2({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
+  const handleMarkerClick = external_react_["default"].useCallback(marker => {
+    selectMarker(marker.id);
+    onCommentMarkerClick?.(marker);
+  }, [onCommentMarkerClick, selectMarker]);
   const clusters = external_react_["default"].useMemo(() => (0,buildClusters/* default */.A)(commentMarkers, durationValue, trackWidth), [commentMarkers, durationValue, trackWidth]);
   const trackMask = external_react_["default"].useMemo(() => {
     if (durationValue <= 0 || clusters.length === 0) return undefined;
@@ -37907,6 +38053,7 @@ function TimeControlsV2({
     setHoverTime(newTime);
   };
   return /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: containerRef,
     className: "bp-TimeControlsV2",
     "data-testid": "bp-time-controls-v2"
   }, !!filmstripInterval && /*#__PURE__*/external_react_["default"].createElement(FilmstripV2, {
@@ -37942,12 +38089,14 @@ function TimeControlsV2({
   }), durationValue > 0 && clusters.map(cluster => cluster.isSinglePoint ? /*#__PURE__*/external_react_["default"].createElement(MarkerTick, {
     key: cluster.id,
     markers: cluster.markers,
-    onMarkerClick: onCommentMarkerClick,
-    position: cluster.leftPercent
+    onMarkerClick: handleMarkerClick,
+    position: cluster.leftPercent,
+    selectedId: selectedId
   }) : /*#__PURE__*/external_react_["default"].createElement(MarkerCluster, {
     key: cluster.id,
     cluster: cluster,
-    onMarkerClick: onCommentMarkerClick
+    onMarkerClick: handleMarkerClick,
+    selectedId: selectedId
   }))));
 }
 ;// ./src/lib/viewers/controls/media/VideoFullscreenButton.scss

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "box-content-preview",
-    "version": "3.87.0",
+    "version": "3.89.0",
     "description": "Box Content Preview UI Element",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",