box-content-preview 3.50.0 → 3.52.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 +2 -1
  3. package/dist/lib/index.js +177 -11
  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.50.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
5
+ [![version](https://img.shields.io/badge/version-v3.52.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.50.0
25
+ - Version: v3.52.0
26
26
  - Locale: en-US
27
27
 
28
- https://cdn01.boxcdn.net/platform/preview/3.50.0/en-US/preview.js
29
- https://cdn01.boxcdn.net/platform/preview/3.50.0/en-US/preview.css
28
+ https://cdn01.boxcdn.net/platform/preview/3.52.0/en-US/preview.js
29
+ https://cdn01.boxcdn.net/platform/preview/3.52.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.50.0/en-US/preview.js"></script>
55
+ <script src="https://cdn01.boxcdn.net/platform/preview/3.52.0/en-US/preview.js"></script>
56
56
  <link
57
57
  rel="stylesheet"
58
- href="https://cdn01.boxcdn.net/platform/preview/3.50.0/en-US/preview.css"
58
+ href="https://cdn01.boxcdn.net/platform/preview/3.52.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.50.0`
79
+ - Check out a specific version with `git checkout v3.52.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,7 +69,8 @@
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-TimeControlsV2{position:relative;margin-right:10px;margin-left:10px}.bp-TimeControlsV2-slider{height:20px}.bp-TimeControlsV2-slider .bp-SliderControl-track{height:6px;margin:auto 0;border-radius:5px;backface-visibility:hidden}.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}
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}
73
74
  .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}
74
75
  .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}
75
76
  .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.50.0"; // eslint-disable-line no-undef
9343
+ const CLIENT_VERSION = "3.52.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 = {};
@@ -9611,14 +9611,21 @@ function appendAuthParamsV2(url) {
9611
9611
  * @public
9612
9612
  * @param {string} template - URL template to attach param to
9613
9613
  * @param {string|void} [asset] - Optional asset name needed to access file
9614
+ * @param {boolean} [resolveCacheBuster] - Re-resolve the _cache_buster marker per request
9615
+ * (needed only when auth is header-based; the in-URL token otherwise varies the cache key).
9614
9616
  * @return {string} Content url
9615
9617
  */
9616
9618
  function createContentUrl(template, asset) {
9619
+ let resolveCacheBuster = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
9617
9620
  if (lib_DownloadReachability.isDownloadHostBlocked()) {
9618
9621
  // eslint-disable-next-line
9619
9622
  template = lib_DownloadReachability.replaceDownloadHostWithDefault(template);
9620
9623
  }
9621
- return template.replace('{+asset_path}', asset || '');
9624
+ const url = template.replace('{+asset_path}', asset || '');
9625
+ if (!resolveCacheBuster) {
9626
+ return url;
9627
+ }
9628
+ return url.replace(/([?&]_cache_buster=)[^&]*/, `$1${Date.now().toString(36)}`);
9622
9629
  }
9623
9630
 
9624
9631
  /**
@@ -11058,7 +11065,7 @@ class Browser {
11058
11065
  ;// ./src/lib/Logger.js
11059
11066
  /* eslint-disable no-undef */
11060
11067
  const Logger_CLIENT_NAME = "box-content-preview";
11061
- const Logger_CLIENT_VERSION = "3.50.0";
11068
+ const Logger_CLIENT_VERSION = "3.52.0";
11062
11069
  /* eslint-enable no-undef */
11063
11070
 
11064
11071
  class Logger {
@@ -12553,11 +12560,15 @@ class BaseViewer extends (events_default()) {
12553
12560
  template = this.api.reachability.constructor.replaceDownloadHostWithDefault(template);
12554
12561
  }
12555
12562
 
12563
+ // Cache-buster only needed when auth is header-based; the in-URL token otherwise
12564
+ // varies the cache key on its own.
12565
+ const resolveCacheBuster = this.featureEnabled('migrateAccessTokenToHeader');
12566
+
12556
12567
  // Append optional query params
12557
12568
  const {
12558
12569
  queryParams
12559
12570
  } = this.options;
12560
- return appendQueryParams(createContentUrl(template, asset), queryParams);
12571
+ return appendQueryParams(createContentUrl(template, asset, resolveCacheBuster), queryParams);
12561
12572
  }
12562
12573
 
12563
12574
  /**
@@ -19173,7 +19184,10 @@ function addOriginalRepresentation(file) {
19173
19184
  return;
19174
19185
  }
19175
19186
  const queryParams = {
19176
- preview: 'true'
19187
+ preview: 'true',
19188
+ // Cache-buster marker; createContentUrl() re-resolves it per request when auth is
19189
+ // header-based. Stamped unconditionally since the file is cached before that flag is known.
19190
+ _cache_buster: Date.now().toString(36)
19177
19191
  };
19178
19192
  if (file.file_version) {
19179
19193
  queryParams.version = file.file_version.id;
@@ -26332,9 +26346,10 @@ class VideoBaseViewer extends media_MediaBaseViewer {
26332
26346
  * @inheritdoc
26333
26347
  */
26334
26348
  constructor(options) {
26335
- super(options);
26336
-
26349
+ var _this;
26337
26350
  // Bind context for handlers
26351
+ super(options);
26352
+ _this = this;
26338
26353
  VideoBaseViewer_defineProperty(this, "videoAnnotationsEnabled", false);
26339
26354
  /** @property {VideoPreloader} - Video preloader instance */
26340
26355
  VideoBaseViewer_defineProperty(this, "preloader", void 0);
@@ -26353,6 +26368,25 @@ class VideoBaseViewer extends media_MediaBaseViewer {
26353
26368
  VideoBaseViewer_defineProperty(this, "handleControlsShow", () => {
26354
26369
  this.mediaContainerEl.classList.add('bp-media-controls-is-visible');
26355
26370
  });
26371
+ VideoBaseViewer_defineProperty(this, "handleCommentMarkersUpdated", function () {
26372
+ let markers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
26373
+ _this.commentMarkers = markers;
26374
+ _this.renderUI();
26375
+ });
26376
+ VideoBaseViewer_defineProperty(this, "handleCommentMarkerClick", marker => {
26377
+ if (this.mediaEl) {
26378
+ this.mediaEl.pause();
26379
+ this.mediaEl.currentTime = marker.time;
26380
+ }
26381
+ if (marker.type === 'annotation' && this.annotator) {
26382
+ this.annotator.emit('annotations_active_set', marker.id);
26383
+ }
26384
+ this.emit('comment_marker_select', {
26385
+ id: marker.id,
26386
+ time: marker.time
26387
+ });
26388
+ this.renderUI();
26389
+ });
26356
26390
  this.handleControlsHide = this.handleControlsHide.bind(this);
26357
26391
  this.handleControlsShow = this.handleControlsShow.bind(this);
26358
26392
  this.handlePlayRequest = this.handlePlayRequest.bind(this);
@@ -26708,6 +26742,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
26708
26742
  onShow: this.handleControlsShow
26709
26743
  });
26710
26744
  this.addListener('annotator_create', () => this.renderUI());
26745
+ this.addListener('comment_markers', this.handleCommentMarkersUpdated);
26711
26746
  this.renderUI();
26712
26747
  }
26713
26748
 
@@ -27073,7 +27108,6 @@ class VideoBaseViewer extends media_MediaBaseViewer {
27073
27108
  this.annotator.emit('annotations_active_set', id);
27074
27109
  }
27075
27110
  }
27076
-
27077
27111
  /**
27078
27112
  * Handles the 'scrolltoannotation' event and calls the annotator scroll method
27079
27113
  * @param {string | Object} event - Annotation Event
@@ -27688,6 +27722,89 @@ function FilmstripV2(_ref) {
27688
27722
  "data-testid": "bp-FilmstripV2-time"
27689
27723
  }, formatTimecode(time, fps)));
27690
27724
  }
27725
+ ;// ./src/lib/viewers/controls/media/MarkerAvatar.scss
27726
+ // extracted by mini-css-extract-plugin
27727
+
27728
+ ;// ./src/lib/viewers/controls/media/MarkerAvatar.tsx
27729
+
27730
+
27731
+ const AVATAR_PALETTE = [{
27732
+ bg: '#7fb0ea',
27733
+ fg: '#222'
27734
+ }, {
27735
+ bg: '#003c84',
27736
+ fg: '#fff'
27737
+ }, {
27738
+ bg: '#ffeb7f',
27739
+ fg: '#222'
27740
+ }, {
27741
+ bg: '#92e0c0',
27742
+ fg: '#222'
27743
+ }, {
27744
+ bg: '#fad98d',
27745
+ fg: '#222'
27746
+ }, {
27747
+ bg: '#91c2fd',
27748
+ fg: '#222'
27749
+ }, {
27750
+ bg: '#f69bab',
27751
+ fg: '#222'
27752
+ }, {
27753
+ bg: '#cf9ff6',
27754
+ fg: '#222'
27755
+ }, {
27756
+ bg: '#f8c08c',
27757
+ fg: '#222'
27758
+ }, {
27759
+ bg: '#a392e0',
27760
+ fg: '#222'
27761
+ }];
27762
+ function AnonymousAvatarIcon() {
27763
+ return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("svg", {
27764
+ "aria-hidden": "true",
27765
+ className: "bp-MarkerAvatar-anonymousIcon",
27766
+ focusable: "false",
27767
+ viewBox: "0 0 16 16"
27768
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("path", {
27769
+ 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",
27770
+ fill: "currentColor"
27771
+ }));
27772
+ }
27773
+ function MarkerAvatar(_ref) {
27774
+ let {
27775
+ avatarUrl,
27776
+ colorIndex = 0,
27777
+ initial
27778
+ } = _ref;
27779
+ const safeIndex = Number.isFinite(colorIndex) ? Math.abs(colorIndex) % AVATAR_PALETTE.length : 0;
27780
+ const {
27781
+ bg: bgColor,
27782
+ fg: textColor
27783
+ } = AVATAR_PALETTE[safeIndex];
27784
+ const [imgFailed, setImgFailed] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(false);
27785
+ const showImage = Boolean(avatarUrl) && !imgFailed;
27786
+ let avatar = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(AnonymousAvatarIcon, null);
27787
+ if (showImage) {
27788
+ avatar = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("img", {
27789
+ alt: "",
27790
+ onError: () => setImgFailed(true),
27791
+ src: avatarUrl
27792
+ });
27793
+ } else if (initial) {
27794
+ avatar = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
27795
+ className: "bp-MarkerAvatar-initial",
27796
+ style: {
27797
+ color: textColor
27798
+ }
27799
+ }, initial);
27800
+ }
27801
+ return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
27802
+ className: "bp-MarkerAvatar",
27803
+ style: !showImage ? {
27804
+ backgroundColor: bgColor
27805
+ } : undefined
27806
+ }, avatar);
27807
+ }
27691
27808
  ;// ./src/lib/viewers/controls/media/TimeControlsV2.scss
27692
27809
  // extracted by mini-css-extract-plugin
27693
27810
 
@@ -27699,6 +27816,7 @@ function FilmstripV2(_ref) {
27699
27816
 
27700
27817
 
27701
27818
 
27819
+
27702
27820
  const TimeControlsV2_round = value => {
27703
27821
  return +value.toFixed(4);
27704
27822
  };
@@ -27708,12 +27826,14 @@ const TimeControlsV2_percent = (value1, value2) => {
27708
27826
  function TimeControlsV2(_ref) {
27709
27827
  let {
27710
27828
  aspectRatio,
27829
+ commentMarkers = [],
27711
27830
  currentTime = 0,
27712
27831
  durationTime = 0,
27713
27832
  filmstripInterval,
27714
27833
  filmstripUrl,
27715
27834
  fps,
27716
27835
  mediaEl,
27836
+ onCommentMarkerClick,
27717
27837
  onTimeChange
27718
27838
  } = _ref;
27719
27839
  const [isSliderHovered, setIsSliderHovered] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(false);
@@ -27723,6 +27843,23 @@ function TimeControlsV2(_ref) {
27723
27843
  const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
27724
27844
  const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
27725
27845
  const currentPercentage = TimeControlsV2_percent(currentValue, durationValue);
27846
+ const markerTimesKey = commentMarkers.map(m => m.time).join('|');
27847
+ const trackMask = __WEBPACK_EXTERNAL_MODULE_react_default__.useMemo(() => {
27848
+ if (durationValue <= 0 || commentMarkers.length === 0) return undefined;
27849
+ const HALF_GAP = 2;
27850
+ const stops = [];
27851
+ const sorted = commentMarkers.map(m => TimeControlsV2_percent(m.time, durationValue)).sort((a, b) => a - b);
27852
+ 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)`);
27858
+ });
27859
+ stops.push('black 100%');
27860
+ return `linear-gradient(to right, ${stops.join(', ')})`;
27861
+ // eslint-disable-next-line react-hooks/exhaustive-deps
27862
+ }, [markerTimesKey, durationValue]);
27726
27863
  const handleMouseMove = (newTime, newPosition, width) => {
27727
27864
  setHoverPosition(newPosition);
27728
27865
  setHoverPositionMax(width);
@@ -27740,7 +27877,12 @@ function TimeControlsV2(_ref) {
27740
27877
  position: hoverPosition,
27741
27878
  positionMax: hoverPositionMax,
27742
27879
  time: hoverTime
27743
- }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(SliderControl, {
27880
+ }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
27881
+ className: "bp-TimeControlsV2-scrubber",
27882
+ style: trackMask ? {
27883
+ '--bp-track-mask': trackMask
27884
+ } : undefined
27885
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(SliderControl, {
27744
27886
  className: "bp-TimeControlsV2-slider",
27745
27887
  "data-resin-target": "timeScrubber",
27746
27888
  max: durationValue,
@@ -27755,7 +27897,24 @@ function TimeControlsV2(_ref) {
27755
27897
  title: "Media Slider",
27756
27898
  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%)`,
27757
27899
  value: currentValue
27758
- }));
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
+ })))));
27759
27918
  }
27760
27919
  ;// ./src/lib/viewers/controls/media/VideoFullscreenButton.scss
27761
27920
  // extracted by mini-css-extract-plugin
@@ -27843,6 +28002,7 @@ function VideoControlsV2(_ref) {
27843
28002
  audioTrack,
27844
28003
  audioTracks,
27845
28004
  autoplay,
28005
+ commentMarkers,
27846
28006
  currentTime = 0,
27847
28007
  durationTime = 0,
27848
28008
  experiences,
@@ -27859,6 +28019,7 @@ function VideoControlsV2(_ref) {
27859
28019
  isPlaying,
27860
28020
  mediaEl,
27861
28021
  movePlayback,
28022
+ onCommentMarkerClick,
27862
28023
  onFullscreenToggle,
27863
28024
  onAnnotationColorChange,
27864
28025
  onAnnotationModeClick,
@@ -27901,12 +28062,14 @@ function VideoControlsV2(_ref) {
27901
28062
  onFullscreenToggle: onFullscreenToggle
27902
28063
  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(TimeControlsV2, {
27903
28064
  aspectRatio: aspectRatio,
28065
+ commentMarkers: commentMarkers,
27904
28066
  currentTime: currentTime,
27905
28067
  durationTime: durationTime,
27906
28068
  filmstripInterval: filmstripInterval,
27907
28069
  filmstripUrl: filmstripUrl,
27908
28070
  fps: fps,
27909
28071
  mediaEl: mediaEl,
28072
+ onCommentMarkerClick: onCommentMarkerClick,
27910
28073
  onTimeChange: onTimeChange
27911
28074
  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
27912
28075
  className: "bp-VideoControlsV2-bar"
@@ -29431,7 +29594,10 @@ class DashViewer extends media_VideoBaseViewer {
29431
29594
  }));
29432
29595
  }
29433
29596
  if (this.isVideoPlayerV2) {
29434
- this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VideoControlsV2, sharedProps));
29597
+ this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VideoControlsV2, DashViewer_extends({
29598
+ commentMarkers: this.commentMarkers,
29599
+ onCommentMarkerClick: this.handleCommentMarkerClick
29600
+ }, sharedProps)));
29435
29601
  return;
29436
29602
  }
29437
29603
  this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VideoControls, DashViewer_extends({}, sharedProps, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "box-content-preview",
3
- "version": "3.50.0",
3
+ "version": "3.52.0",
4
4
  "description": "Box Content Preview UI Element",
5
5
  "author": "Box (https://www.box.com/)",
6
6
  "license": "SEE LICENSE IN LICENSE",