box-content-preview 3.53.0 → 3.54.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
  1. package/README.md +7 -7
  2. package/dist/lib/index.css +4 -2
  3. package/dist/lib/index.js +209 -39
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
  [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
3
3
  [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
4
4
  [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
5
- [![version](https://img.shields.io/badge/version-v3.53.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
5
+ [![version](https://img.shields.io/badge/version-v3.54.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
6
6
  [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
7
7
 
8
8
  # [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
22
22
 
23
23
  ## Current Version
24
24
 
25
- - Version: v3.53.0
25
+ - Version: v3.54.0
26
26
  - Locale: en-US
27
27
 
28
- https://cdn01.boxcdn.net/platform/preview/3.53.0/en-US/preview.js
29
- https://cdn01.boxcdn.net/platform/preview/3.53.0/en-US/preview.css
28
+ https://cdn01.boxcdn.net/platform/preview/3.54.0/en-US/preview.js
29
+ https://cdn01.boxcdn.net/platform/preview/3.54.0/en-US/preview.css
30
30
 
31
31
  ## Supported Locales
32
32
 
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
52
52
  <title>Box Content Preview Demo</title>
53
53
 
54
54
  <!-- Latest version of Preview SDK for your locale -->
55
- <script src="https://cdn01.boxcdn.net/platform/preview/3.53.0/en-US/preview.js"></script>
55
+ <script src="https://cdn01.boxcdn.net/platform/preview/3.54.0/en-US/preview.js"></script>
56
56
  <link
57
57
  rel="stylesheet"
58
- href="https://cdn01.boxcdn.net/platform/preview/3.53.0/en-US/preview.css"
58
+ href="https://cdn01.boxcdn.net/platform/preview/3.54.0/en-US/preview.css"
59
59
  />
60
60
  </head>
61
61
  <body>
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
76
76
 
77
77
  1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
78
78
 
79
- - Check out a specific version with `git checkout v3.53.0`
79
+ - Check out a specific version with `git checkout v3.54.0`
80
80
  - Download a specific version as a zip from https://github.com/box/box-content-preview/releases
81
81
 
82
82
  2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`
package/dist/lib/index.css CHANGED
@@ -69,8 +69,10 @@
69
69
  .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-x:hidden;overflow-y: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;top:0;right:0;bottom:0;left: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{top:48px;right:auto;bottom:48px;left: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-video-360 .bp-VideoControlsRoot{position:absolute;right:0;bottom:-1px;left:0;width:100%}.bp-video-preload-wrapper{position:absolute;top:0;right:0;bottom:0;left: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;top:0;right:0;bottom:0;left: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-dash video{display:block;width:100%;max-width:100%;max-height:100%;margin-right:auto;margin-left:auto;cursor:none}.bp-media-dash .bp-media-controls-label,.bp-media-dash .bp-media-controls-btn{opacity:.9}.bp-media-dash .bp-media-controls-label:hover,.bp-media-dash .bp-media-controls-btn:hover{opacity:1}.bp-media-dash .bp-media-controls-is-visible video{cursor:pointer}.bp-media-filmstrip-container{position:absolute;bottom:60px;left:0;display:none;width:160px;height:110px;overflow:hidden;border:1px solid #464a4f}.bp-media-filmstrip{position:relative}.bp-media-filmstrip-timecode{position:absolute;bottom:0;z-index:1;width:100%;color:#fff;font-size:13px;line-height:18px;text-align:center;background-color:#222}.bp-media-crawler-wrapper{position:relative;top:50%;left:50%;z-index:1;width:10px;margin:-15px 0 0 -5px}.bp-media-dash-stats{position:absolute;top:20px;right:20px;color:#fff;font-size:24px}
70
70
  .bp-TimestampControl{position:relative;display:flex;align-items:center}.bp-TimestampControl-button{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;gap:4px;align-items:center;margin:0;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;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none}.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}
71
71
  .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{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px}.bp-FilmstripV2-time{margin-top:8px;color:#000;font-size:13px;line-height:20px;text-align:center}
72
- .bp-MarkerAvatar{position:absolute;bottom:calc(100% + 4px);left:50%;width:12px;height:12px;overflow:hidden;border:0;border-radius:50%;box-shadow:0 0 0 0 #fff;transform:translate(-50%, 0);transform-origin:bottom center;transition:transform 150ms,box-shadow 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}
73
- .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%;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{transform:translate(-50%, -50%) scale(1.7)}.bp-TimeControlsV2-marker:hover .bp-MarkerAvatar,.bp-TimeControlsV2-marker:focus-visible .bp-MarkerAvatar{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}
72
+ .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}
73
+ .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:-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}
74
+ .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}
75
+ .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)}
74
76
  .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}
75
77
  .bp-VideoControlsRoot:has(.bp-VideoControlsV2){position:absolute;top:0;right:0;bottom:0;left: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 48px;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}
76
78
  .bp-VideoGuidesOverlay{position:absolute;pointer-events:none}.bp-VideoGuidesOverlay-svg{display:block;width:100%;height:100%;overflow:visible}.bp-VideoGuidesOverlay-cas{fill:none;stroke:#000;stroke-opacity:.5;stroke-width:3;vector-effect:non-scaling-stroke}.bp-VideoGuidesOverlay-ln{fill:none;stroke:#fff;stroke-width:1.25;vector-effect:non-scaling-stroke}
package/dist/lib/index.js CHANGED
@@ -9340,7 +9340,7 @@ function util_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
9340
9340
  const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
9341
9341
  const CLIENT_NAME_KEY = 'box_client_name';
9342
9342
  const CLIENT_VERSION_KEY = 'box_client_version';
9343
- const CLIENT_VERSION = "3.53.0"; // eslint-disable-line no-undef
9343
+ const CLIENT_VERSION = "3.54.0"; // eslint-disable-line no-undef
9344
9344
  const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
9345
9345
  const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
9346
9346
  const PROMISE_MAP = {};
@@ -11065,7 +11065,7 @@ class Browser {
11065
11065
  ;// ./src/lib/Logger.js
11066
11066
  /* eslint-disable no-undef */
11067
11067
  const Logger_CLIENT_NAME = "box-content-preview";
11068
- const Logger_CLIENT_VERSION = "3.53.0";
11068
+ const Logger_CLIENT_VERSION = "3.54.0";
11069
11069
  /* eslint-enable no-undef */
11070
11070
 
11071
11071
  class Logger {
@@ -27650,6 +27650,57 @@ function TimestampControl(_ref) {
27650
27650
  }));
27651
27651
  })));
27652
27652
  }
27653
+ ;// ./src/lib/viewers/controls/media/utils.ts
27654
+ const utils_round = value => {
27655
+ return +value.toFixed(4);
27656
+ };
27657
+ const utils_percent = (value1, value2) => {
27658
+ return utils_round(value1 / value2 * 100);
27659
+ };
27660
+ ;// ./src/lib/viewers/controls/media/buildClusters.ts
27661
+
27662
+
27663
+ /** Max pixel distance between adjacent markers (sorted by time) for them to be grouped into a single cluster. */
27664
+ const CLUSTER_THRESHOLD_PX = 2;
27665
+
27666
+ /** Converts a group of markers into a ClusterData object with computed positions and metadata. */
27667
+ function finalizeCluster(group, durationValue) {
27668
+ const leftPercent = utils_percent(group[0].time, durationValue);
27669
+ const rightPercent = utils_percent(group[group.length - 1].time, durationValue);
27670
+ const isSinglePoint = leftPercent === rightPercent;
27671
+ return {
27672
+ id: group.map(m => m.id).join('|'),
27673
+ isSinglePoint,
27674
+ leftPercent,
27675
+ markers: group,
27676
+ rightPercent
27677
+ };
27678
+ }
27679
+
27680
+ /**
27681
+ * Groups comment markers into clusters based on their pixel proximity on the scrubber track.
27682
+ * Markers are sorted by time, then chained: each marker that is within CLUSTER_THRESHOLD_PX
27683
+ * of its neighbor joins the same cluster. This means distant markers can end up in one cluster
27684
+ * if intermediate markers bridge the gap.
27685
+ */
27686
+ function buildClusters(markers, durationValue, trackWidth) {
27687
+ if (durationValue <= 0 || markers.length === 0 || trackWidth <= 0) return [];
27688
+ const sorted = [...markers].sort((a, b) => a.time - b.time);
27689
+ const clusters = [];
27690
+ let currentGroup = [sorted[0]];
27691
+ for (let i = 1; i < sorted.length; i += 1) {
27692
+ const prevPx = sorted[i - 1].time / durationValue * trackWidth;
27693
+ const currPx = sorted[i].time / durationValue * trackWidth;
27694
+ if (currPx - prevPx <= CLUSTER_THRESHOLD_PX) {
27695
+ currentGroup.push(sorted[i]);
27696
+ } else {
27697
+ clusters.push(finalizeCluster(currentGroup, durationValue));
27698
+ currentGroup = [sorted[i]];
27699
+ }
27700
+ }
27701
+ clusters.push(finalizeCluster(currentGroup, durationValue));
27702
+ return clusters;
27703
+ }
27653
27704
  ;// ./src/lib/viewers/controls/media/FilmstripV2.scss
27654
27705
  // extracted by mini-css-extract-plugin
27655
27706
 
@@ -27805,6 +27856,118 @@ function MarkerAvatar(_ref) {
27805
27856
  } : undefined
27806
27857
  }, avatar);
27807
27858
  }
27859
+ ;// ./src/lib/viewers/controls/media/MarkerAvatarStack.scss
27860
+ // extracted by mini-css-extract-plugin
27861
+
27862
+ ;// ./src/lib/viewers/controls/media/MarkerAvatarStack.tsx
27863
+
27864
+
27865
+
27866
+ const MAX_VISIBLE_AVATARS = 4;
27867
+ function MarkerAvatarStack(_ref) {
27868
+ let {
27869
+ markers,
27870
+ onMarkerClick
27871
+ } = _ref;
27872
+ const hasOverflow = markers.length > MAX_VISIBLE_AVATARS;
27873
+ const visibleMarkers = hasOverflow ? markers.slice(0, MAX_VISIBLE_AVATARS - 1) : markers;
27874
+ return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
27875
+ className: "bp-MarkerAvatarStack"
27876
+ }, visibleMarkers.map(marker => /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
27877
+ key: marker.id,
27878
+ className: "bp-MarkerAvatarStack-item",
27879
+ onClick: e => {
27880
+ e.stopPropagation();
27881
+ onMarkerClick?.(marker);
27882
+ },
27883
+ type: "button"
27884
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatar, {
27885
+ avatarUrl: marker.avatarUrl,
27886
+ colorIndex: marker.colorIndex,
27887
+ initial: marker.initial
27888
+ }))), hasOverflow && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
27889
+ className: "bp-MarkerAvatarStack-item bp-MarkerAvatarStack-overflow",
27890
+ onClick: e => {
27891
+ e.stopPropagation();
27892
+ onMarkerClick?.(markers[MAX_VISIBLE_AVATARS - 1]);
27893
+ },
27894
+ type: "button"
27895
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
27896
+ className: "bp-MarkerAvatar bp-MarkerAvatarStack-overflowBadge"
27897
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
27898
+ className: "bp-MarkerAvatar-initial"
27899
+ }, "+", markers.length - (MAX_VISIBLE_AVATARS - 1)))));
27900
+ }
27901
+ ;// ./src/lib/viewers/controls/media/MarkerCluster.scss
27902
+ // extracted by mini-css-extract-plugin
27903
+
27904
+ ;// ./src/lib/viewers/controls/media/MarkerCluster.tsx
27905
+
27906
+
27907
+
27908
+ function MarkerCluster(_ref) {
27909
+ let {
27910
+ cluster,
27911
+ onMarkerClick
27912
+ } = _ref;
27913
+ const {
27914
+ markers,
27915
+ leftPercent,
27916
+ rightPercent
27917
+ } = cluster;
27918
+ const style = {
27919
+ left: `${leftPercent}%`,
27920
+ width: `calc(${rightPercent - leftPercent}% + 4px)`
27921
+ };
27922
+ return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
27923
+ className: "bp-MarkerCluster",
27924
+ "data-testid": "bp-marker-cluster",
27925
+ style: style
27926
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
27927
+ "aria-label": "Comment marker",
27928
+ className: "bp-MarkerCluster-tick",
27929
+ onClick: e => {
27930
+ e.stopPropagation();
27931
+ onMarkerClick?.(markers[0]);
27932
+ },
27933
+ type: "button"
27934
+ }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatarStack, {
27935
+ markers: markers,
27936
+ onMarkerClick: onMarkerClick
27937
+ }));
27938
+ }
27939
+ ;// ./src/lib/viewers/controls/media/MarkerTick.tsx
27940
+
27941
+
27942
+
27943
+ function MarkerTick(_ref) {
27944
+ let {
27945
+ markers,
27946
+ onMarkerClick,
27947
+ position
27948
+ } = _ref;
27949
+ const isGroup = markers.length > 1;
27950
+ return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
27951
+ "aria-label": "Comment marker",
27952
+ className: `bp-TimeControlsV2-marker${isGroup ? ' bp-TimeControlsV2-marker--group' : ''}`,
27953
+ "data-testid": "bp-time-controls-marker",
27954
+ onClick: e => {
27955
+ e.stopPropagation();
27956
+ onMarkerClick?.(markers[0]);
27957
+ },
27958
+ style: {
27959
+ left: `${position}%`
27960
+ },
27961
+ type: "button"
27962
+ }, isGroup ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatarStack, {
27963
+ markers: markers,
27964
+ onMarkerClick: onMarkerClick
27965
+ }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatar, {
27966
+ avatarUrl: markers[0].avatarUrl,
27967
+ colorIndex: markers[0].colorIndex,
27968
+ initial: markers[0].initial
27969
+ }));
27970
+ }
27808
27971
  ;// ./src/lib/viewers/controls/media/TimeControlsV2.scss
27809
27972
  // extracted by mini-css-extract-plugin
27810
27973
 
@@ -27817,12 +27980,9 @@ function MarkerAvatar(_ref) {
27817
27980
 
27818
27981
 
27819
27982
 
27820
- const TimeControlsV2_round = value => {
27821
- return +value.toFixed(4);
27822
- };
27823
- const TimeControlsV2_percent = (value1, value2) => {
27824
- return TimeControlsV2_round(value1 / value2 * 100);
27825
- };
27983
+
27984
+
27985
+
27826
27986
  function TimeControlsV2(_ref) {
27827
27987
  let {
27828
27988
  aspectRatio,
@@ -27832,7 +27992,6 @@ function TimeControlsV2(_ref) {
27832
27992
  filmstripInterval,
27833
27993
  filmstripUrl,
27834
27994
  fps,
27835
- mediaEl,
27836
27995
  onCommentMarkerClick,
27837
27996
  onTimeChange
27838
27997
  } = _ref;
@@ -27840,26 +27999,45 @@ function TimeControlsV2(_ref) {
27840
27999
  const [hoverPosition, setHoverPosition] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
27841
28000
  const [hoverPositionMax, setHoverPositionMax] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
27842
28001
  const [hoverTime, setHoverTime] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
28002
+ const [trackWidth, setTrackWidth] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
28003
+ const scrubberRef = __WEBPACK_EXTERNAL_MODULE_react_default__.useRef(null);
27843
28004
  const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
27844
28005
  const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
27845
- const currentPercentage = TimeControlsV2_percent(currentValue, durationValue);
27846
- const markerTimesKey = commentMarkers.map(m => m.time).join('|');
28006
+ const currentPercentage = utils_percent(currentValue, durationValue);
28007
+ __WEBPACK_EXTERNAL_MODULE_react_default__.useLayoutEffect(() => {
28008
+ const el = scrubberRef.current;
28009
+ if (!el) return undefined;
28010
+ setTrackWidth(el.clientWidth);
28011
+ const observer = new ResizeObserver(entries => {
28012
+ entries.forEach(entry => {
28013
+ setTrackWidth(entry.contentRect.width);
28014
+ });
28015
+ });
28016
+ observer.observe(el);
28017
+ return () => observer.disconnect();
28018
+ }, []);
28019
+ const clusters = __WEBPACK_EXTERNAL_MODULE_react_default__.useMemo(() => buildClusters(commentMarkers, durationValue, trackWidth), [commentMarkers, durationValue, trackWidth]);
27847
28020
  const trackMask = __WEBPACK_EXTERNAL_MODULE_react_default__.useMemo(() => {
27848
- if (durationValue <= 0 || commentMarkers.length === 0) return undefined;
28021
+ if (durationValue <= 0 || clusters.length === 0) return undefined;
27849
28022
  const HALF_GAP = 2;
27850
28023
  const stops = [];
27851
- const sorted = commentMarkers.map(m => TimeControlsV2_percent(m.time, durationValue)).sort((a, b) => a - b);
27852
28024
  stops.push('black 0%');
27853
- sorted.forEach(pos => {
27854
- stops.push(`black calc(${pos}% - ${HALF_GAP}px)`);
27855
- stops.push(`transparent calc(${pos}% - ${HALF_GAP}px)`);
27856
- stops.push(`transparent calc(${pos}% + ${HALF_GAP}px)`);
27857
- stops.push(`black calc(${pos}% + ${HALF_GAP}px)`);
28025
+ clusters.forEach(_ref2 => {
28026
+ let {
28027
+ leftPercent,
28028
+ rightPercent
28029
+ } = _ref2;
28030
+ const isRange = leftPercent !== rightPercent;
28031
+ const leftPad = isRange ? HALF_GAP + 1 : HALF_GAP;
28032
+ const rightPad = isRange ? HALF_GAP + 1 : HALF_GAP;
28033
+ stops.push(`black calc(${leftPercent}% - ${leftPad}px)`);
28034
+ stops.push(`transparent calc(${leftPercent}% - ${leftPad}px)`);
28035
+ stops.push(`transparent calc(${rightPercent}% + ${rightPad}px)`);
28036
+ stops.push(`black calc(${rightPercent}% + ${rightPad}px)`);
27858
28037
  });
27859
28038
  stops.push('black 100%');
27860
28039
  return `linear-gradient(to right, ${stops.join(', ')})`;
27861
- // eslint-disable-next-line react-hooks/exhaustive-deps
27862
- }, [markerTimesKey, durationValue]);
28040
+ }, [durationValue, clusters]);
27863
28041
  const handleMouseMove = (newTime, newPosition, width) => {
27864
28042
  setHoverPosition(newPosition);
27865
28043
  setHoverPositionMax(width);
@@ -27878,6 +28056,7 @@ function TimeControlsV2(_ref) {
27878
28056
  positionMax: hoverPositionMax,
27879
28057
  time: hoverTime
27880
28058
  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
28059
+ ref: scrubberRef,
27881
28060
  className: "bp-TimeControlsV2-scrubber",
27882
28061
  style: trackMask ? {
27883
28062
  '--bp-track-mask': trackMask
@@ -27897,24 +28076,16 @@ function TimeControlsV2(_ref) {
27897
28076
  title: "Media Slider",
27898
28077
  track: `linear-gradient(to right, ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_white__} calc(${currentPercentage}% - 2.5px), transparent calc(${currentPercentage}% - 2.5px), transparent calc(${currentPercentage}% + 2.5px), ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__} calc(${currentPercentage}% + 2.5px), ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__} 100%)`,
27899
28078
  value: currentValue
27900
- }), durationValue > 0 && commentMarkers.map(marker => /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
27901
- key: marker.id,
27902
- "aria-label": "Comment marker",
27903
- className: "bp-TimeControlsV2-marker",
27904
- "data-testid": "bp-time-controls-marker",
27905
- onClick: e => {
27906
- e.stopPropagation();
27907
- onCommentMarkerClick?.(marker);
27908
- },
27909
- style: {
27910
- left: `${TimeControlsV2_percent(marker.time, durationValue)}%`
27911
- },
27912
- type: "button"
27913
- }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatar, {
27914
- avatarUrl: marker.avatarUrl,
27915
- colorIndex: marker.colorIndex,
27916
- initial: marker.initial
27917
- })))));
28079
+ }), durationValue > 0 && clusters.map(cluster => cluster.isSinglePoint ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerTick, {
28080
+ key: cluster.id,
28081
+ markers: cluster.markers,
28082
+ onMarkerClick: onCommentMarkerClick,
28083
+ position: cluster.leftPercent
28084
+ }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerCluster, {
28085
+ key: cluster.id,
28086
+ cluster: cluster,
28087
+ onMarkerClick: onCommentMarkerClick
28088
+ }))));
27918
28089
  }
27919
28090
  ;// ./src/lib/viewers/controls/media/VideoFullscreenButton.scss
27920
28091
  // extracted by mini-css-extract-plugin
@@ -28068,7 +28239,6 @@ function VideoControlsV2(_ref) {
28068
28239
  filmstripInterval: filmstripInterval,
28069
28240
  filmstripUrl: filmstripUrl,
28070
28241
  fps: fps,
28071
- mediaEl: mediaEl,
28072
28242
  onCommentMarkerClick: onCommentMarkerClick,
28073
28243
  onTimeChange: onTimeChange
28074
28244
  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "box-content-preview",
3
- "version": "3.53.0",
3
+ "version": "3.54.0",
4
4
  "description": "Box Content Preview UI Element",
5
5
  "author": "Box (https://www.box.com/)",
6
6
  "license": "SEE LICENSE IN LICENSE",