box-content-preview 3.112.0 → 3.113.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 -2
  3. package/dist/lib/index.js +410 -221
  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.112.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
5
+ [![version](https://img.shields.io/badge/version-v3.113.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.112.0
25
+ - Version: v3.113.0
26
26
  - Locale: en-US
27
27
 
28
- https://cdn01.boxcdn.net/platform/preview/3.112.0/en-US/preview.js
29
- https://cdn01.boxcdn.net/platform/preview/3.112.0/en-US/preview.css
28
+ https://cdn01.boxcdn.net/platform/preview/3.113.0/en-US/preview.js
29
+ https://cdn01.boxcdn.net/platform/preview/3.113.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.112.0/en-US/preview.js"></script>
55
+ <script src="https://cdn01.boxcdn.net/platform/preview/3.113.0/en-US/preview.js"></script>
56
56
  <link
57
57
  rel="stylesheet"
58
- href="https://cdn01.boxcdn.net/platform/preview/3.112.0/en-US/preview.css"
58
+ href="https://cdn01.boxcdn.net/platform/preview/3.113.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.112.0`
79
+ - Check out a specific version with `git checkout v3.113.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
@@ -55,7 +55,7 @@
55
55
  .bp-PlayPauseToggle{will-change:opacity;opacity:.9;transition:opacity 150ms,background-color 150ms;outline:0;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;zoom:1;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:25px;color:#fff;background:rgba(0,0,0,0)}.bp-PlayPauseToggle:focus:not(:disabled),.bp-PlayPauseToggle:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.bp-PlayPauseToggle:focus:not(:disabled) svg,.bp-PlayPauseToggle:hover:not(:disabled) svg,.bp-PlayPauseToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-PlayPauseToggle.bp-is-active,.bp-PlayPauseToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-PlayPauseToggle.bp-is-active:focus:not(:disabled),.bp-PlayPauseToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-PlayPauseToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-PlayPauseToggle: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-PlayPauseToggle:focus:not(:focus-visible){box-shadow:none}.bp-PlayPauseToggle:disabled{pointer-events:none;cursor:default;opacity:.2}.bp-PlayPauseToggle svg{width:32px;height:32px;padding:5px}
56
56
  .bp-DurationLabels{display:flex;align-items:center;justify-content:space-between;margin-right:5px;margin-left:5px}.bp-DurationLabels .bp-DurationLabels-label{font-family:Lato,Arial,sans-serif;font-size:14px;font-weight:normal;font-style:normal;line-height:20px;color:rgba(255,255,255,.8);letter-spacing:.3px}.bp-DurationLabels-label{will-change:opacity;opacity:.9;transition:opacity 150ms,background-color 150ms;cursor:default;padding-right:4px;padding-left:4px;font-size:12px;line-height:12px;color:#fff}.bp-DurationLabels-label:focus:not(:disabled),.bp-DurationLabels-label:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.bp-DurationLabels-label:focus:not(:disabled) svg,.bp-DurationLabels-label:hover:not(:disabled) svg,.bp-DurationLabels-label.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-DurationLabels-label.bp-is-active,.bp-DurationLabels-label:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-DurationLabels-label.bp-is-active:focus:not(:disabled),.bp-DurationLabels-label.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}
57
57
  .bp-TimestampControl{position:relative;display:flex;align-items:center}.bp-TimestampControl-button,.bp-TimestampControl-static{-webkit-user-select:none;user-select:none;display:flex;gap:4px;align-items:center;padding:6px 12px;font-family:Lato,Arial,sans-serif;font-size:14px;font-weight:normal;line-height:20px;color:#fff;letter-spacing:.3px;white-space:nowrap}.bp-TimestampControl-button{will-change:opacity;opacity:.9;transition:opacity 150ms,background-color 150ms;outline:0;cursor:pointer;margin:0;border:0;border-radius:25px;background:rgba(0,0,0,0)}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.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:rgba(0,0,0,0)}.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;z-index:1;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:250px;padding:12px 8px;border-radius:16px;background:#fff;box-shadow:0 4px 12px 0 rgba(0,0,0,.15)}.bp-TimestampControl-header{-webkit-user-select:none;user-select:none;padding:6px 14px;font-family:Lato,Arial,sans-serif;font-size:14px;font-weight:bold;line-height:20px;color:#767676;letter-spacing:.3px}.bp-TimestampControl-listitem{cursor:pointer;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:6px 14px;border-radius:8px;font-family:Lato,Arial,sans-serif;font-size:16px;line-height:24px;color:#000;white-space:nowrap;outline:none}.bp-TimestampControl-listitem:hover,.bp-TimestampControl-listitem:focus{background:#f4f4f4}.bp-TimestampControl-check{flex:none;fill:#000}
58
- .bp-VolumeControls{position:relative;display:flex;align-items:center}.bp-VolumeControls-flyout{position:absolute;top:-40px;left:-5px;overflow:hidden;display:none;flex:0 0 auto;max-width:0;height:40px;transition:max-width 200ms ease-in-out}.bp-VolumeControls-flyout.bp-is-open{overflow:visible;display:block}.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{will-change:opacity;opacity:.9;transition:opacity 150ms,background-color 150ms;outline:0;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;zoom:1;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:25px;color:#fff;background:rgba(0,0,0,0)}.bp-VolumeControls-toggle:focus:not(:disabled),.bp-VolumeControls-toggle:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.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{pointer-events:none;cursor:default;opacity:.2}.bp-VolumeControls-toggle svg{width:32px;height:32px;padding:5px}
58
+ .bp-VolumeControls{position:relative;display:flex;align-items:center}.bp-VolumeControls-flyout{position:absolute;top:-40px;left:-5px;overflow:hidden;display:none;flex:0 0 auto;max-width:0;height:40px;transition:max-width 200ms ease-in-out}.bp-VolumeControls-flyout.bp-is-open{overflow:visible;display:block}.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{will-change:opacity;opacity:.9;transition:opacity 150ms,background-color 150ms;outline:0;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;zoom:1;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:25px;color:#fff;background:rgba(0,0,0,0)}.bp-VolumeControls-toggle:focus:not(:disabled),.bp-VolumeControls-toggle:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.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{pointer-events:none;cursor:default;opacity:.2}.bp-VolumeControls-toggle svg{width:32px;height:32px;padding:5px}.bp-VolumeControls--blueprint .bp-VolumeControls-flyout{right:0;left:0;max-width:none}.bp-VolumeControls--blueprint .bp-VolumeControls-slider{margin-right:auto;margin-left:auto}
59
59
  .bp-VolumeSliderControl{outline:0;cursor:pointer;position:relative}.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;cursor:pointer;position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;height:140px;margin:auto;padding:16px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(34,34,34,.9);box-shadow:0 2px 5px 0 rgba(0,0,0,.25)}.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{cursor:pointer;position:absolute;top:calc(50% - 6px);width:10px;height:12px;margin-left:-6px;border:0;border-radius:12px;background:#0061d5}.bp-VolumeSliderControl-track{position:absolute;inset:0;height:3px;margin:auto 3px;background:rgba(0,0,0,0) 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;border-radius:20px;background-color:#55554f}.bp-VolumeVerticalSliderControl-track{position:absolute;bottom:0;left:0;width:8px;border-radius:20px;background:#fff}
60
60
  .bp-MarkerAvatar{position:absolute;bottom:calc(100% + 4px);left:50%;transform-origin:bottom center;transform:translate(-50%, 0);overflow:visible;width:var(--bp-marker-avatar-size, 20px);height:var(--bp-marker-avatar-size, 20px);border:0;border-radius:50%;outline:none;box-shadow:0 0 0 1px #101010;transition:width 150ms,height 150ms,box-shadow 150ms}.bp-MarkerAvatar img{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center}.bp-MarkerAvatar-initial{display:grid;place-items:center;width:100%;height:100%;font-size:10px;font-weight:bold;line-height:1;text-align:center;text-transform:uppercase}.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}
61
61
  .bp-MarkerAvatarStack{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);display:flex;align-items:center}.bp-MarkerAvatarStack-item{cursor:pointer;position:relative;overflow:visible;flex-shrink:0;box-sizing:content-box;width:20px;height:20px;padding:0;border:0;border-radius:50%;appearance:none;background:none;outline: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%;transform-origin:center center;transform:translate(-50%, -50%);display:block}.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{color:#fff;background-color:#383838}.bp-MarkerAvatarStack-overflowBadge .bp-MarkerAvatar-initial{color:#fff}
@@ -78,7 +78,7 @@
78
78
  .bp-FilmstripV2{position:absolute;bottom:calc(100% + 12px);padding:12px;padding-bottom:8px;border-radius:16px;visibility:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}.bp-FilmstripV2.bp-is-shown{visibility:visible}.bp-FilmstripV2-frame{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:10px}.bp-FilmstripV2-frameImage{position:absolute;top:0;left:0;transform-origin:top left;overflow:hidden;background-repeat:no-repeat}.bp-FilmstripV2-frame .bp-crawler{position:relative;z-index:1}.bp-FilmstripV2-time{margin-top:8px;font-size:13px;line-height:20px;color:#000;text-align:center}
79
79
  .bp-MarkerCluster{position:absolute;z-index:1;top:50%;transform:translate(-2px, -50%);height:8px;transition:transform 150ms}.bp-MarkerCluster:hover,.bp-MarkerCluster:focus-within{z-index:2}.bp-MarkerCluster-tick{cursor:pointer;display:block;width:100%;height:100%;padding:0;border:1px solid #fff;border-radius:2px;background:#6f6f6f;transition:transform 150ms}
80
80
  .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{cursor:ew-resize;z-index:3;top:50%;transform:translateY(-50%);width:3px;height:16px;margin-left:-1.5px;border:0;border-radius:2px;background:#fff}.bp-TimeControlsV2-marker{cursor:pointer;position:absolute;z-index:1;top:50%;transform:translate(-50%, -50%);width:2px;height:8px;padding:0;border:0;border-radius:2px;background:#fff}.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{cursor:pointer;display:block;width:100%;height:100%;padding:0;border:0;border-radius:2px;appearance:none;background:#fff}.bp-TimeControlsV2-marker-tick:focus,.bp-TimeControlsV2-marker-tick:focus-visible{outline:none}
81
- .bp-VideoFullscreenButton{pointer-events:auto;cursor:pointer;position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:none;border-radius:50%;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(60px);box-shadow:0 2px 12px 0 rgba(0,0,0,.8)}.bp-VideoFullscreenButton svg{width:20px;height:20px}
81
+ .bp-VideoFullscreenButton-position{pointer-events:auto;position:absolute}.bp-VideoFullscreenButton{pointer-events:auto;cursor:pointer;position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:none;border-radius:50%;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(60px);box-shadow:0 2px 12px 0 rgba(0,0,0,.8)}.bp-VideoFullscreenButton svg{width:20px;height:20px}
82
82
  .bp-VideoControlsRoot:has(.bp-VideoControlsV2){pointer-events:none;position:absolute;inset:0;width:100%}.bp-VideoControlsRoot:has(.bp-VideoControlsV2) .bp-ControlsLayer{pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%}.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%);pointer-events:auto;padding:30px 48px 20px;background:linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0))}.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{will-change:opacity;opacity:.9;transition:opacity 150ms,background-color 150ms;outline:0;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;zoom:1;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:25px;color:#fff;background:rgba(0,0,0,0)}.bp-VideoControlsV2-playPause:focus:not(:disabled),.bp-VideoControlsV2-playPause:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.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{pointer-events:none;cursor:default;opacity:.2}.bp-VideoControlsV2-playPause svg{width:32px;height:32px;padding:5px}.bp-VideoControlsV2-skipBtn{will-change:opacity;opacity:.9;transition:opacity 150ms,background-color 150ms;outline:0;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;zoom:1;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:25px;color:#fff;background:rgba(0,0,0,0)}.bp-VideoControlsV2-skipBtn:focus:not(:disabled),.bp-VideoControlsV2-skipBtn:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.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{pointer-events:none;cursor:default;opacity:.2}.bp-VideoControlsV2-skipBtn svg{width:32px;height:32px;padding:5px}.bp-VideoControlsV2-divider{width:1px;height:24px;border-radius:1px;background-color:rgba(255,255,255,.1)}.bp-VideoControlsV2 .bp-AnnotationsControls{gap:4px;padding-left:0;border-left:none}
83
83
  .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{cursor:pointer;background-color:rgba(255,255,255,.5)}.bp-media-scrubber-buffered{position:absolute;height:3px;background-color:#fff}.bp-media-scrubber-played{cursor:pointer;background-color:#0061d5}.bp-media-scrubber-underlay{cursor:not-allowed;width:100%}.bp-media-scrubber-handle{cursor:pointer;position:absolute;top:-4.25px;transform:scale(0);width:12px;height:12px;margin-left:-6px;border-radius:6px;background-color:#0061d5;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;overflow:hidden auto;display:inline-block;max-width:400px;max-height:210px;padding:8px;border:1px solid #bdc3c7;border-radius:2px;font-size:10px;line-height:0;color:#444;visibility:hidden;background-color:#fff;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{cursor:pointer;overflow:hidden;display:table-row;height:26px;padding:4px;white-space:nowrap;outline:0 none}.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{font-size:11px;font-weight:normal;color:#999ea4;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;font-size:12px;color:#464a4f;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;overflow:hidden;width:100%;height:60px;margin:auto;visibility:hidden;opacity:0;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);transition:visibility .3s,opacity .3s}.bp-media-time-scrubber-container{outline:0 none}.bp-media-volume-scrubber-container-wrapper{overflow:hidden;display:inline-block;width:0;height:40px;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{cursor:pointer;display:inline-block;width:45px;height:40px;margin:0;padding:0;border:none;font-size:12px;font-weight:normal;color:#fff;text-align:center;vertical-align:top;opacity:.7;background-color:rgba(0,0,0,0);outline:0 none}.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{cursor:default;display:inline-block;width:auto;margin:0 4px;line-height:40px;vertical-align:top}.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;border-radius:4px;font-size:12px;font-weight:bold;line-height:24px;color:#fff;letter-spacing:.1em;background-color:rgba(0,0,0,.3)}.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;border-radius:3px;font-size:8px;font-weight:bold;line-height:8px;letter-spacing:.1em;background-color:#0061d5}.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{-webkit-user-select:none;user-select:none;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}.bp-media-play-button{cursor:pointer;padding:0;border:none;font:inherit;color:inherit;background:none;cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:80px;height:80px;border:4px solid #fff;border-radius:40px;font-size:40px;color:#fff;text-align:center;background:rgba(0,0,0,.5);transition:all .2s}.bp-media-play-button:hover{background:#000}.bp-media-overlay-play-container{cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;gap:28px;align-items:center;justify-content:center;font-size:40px;color:#fff;text-align:center;transition:all .2s}.bp-media-overlay-play-container button{cursor:pointer;padding:0;border:none;font:inherit;color:inherit;background:none;cursor:pointer;width:40px;height:40px;border-radius:40px;font-size:40px;text-align:center;background:#000;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;z-index:1;right:auto;bottom:auto;left:auto;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;border:1px solid rgba(255,255,255,.12);object-fit:contain}.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{border:1px solid rgba(255,255,255,.12);object-fit:contain}.bp-video-360 .bp-VideoControlsRoot{position:absolute;right:0;bottom:-1px;left:0;width:100%}.bp-video-preload-wrapper{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:0;opacity:1;background-color:rgba(0,0,0,0);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;transform:translateY(-60px);width:100%;height:100%}.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{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:rgba(0,0,0,.5)}.bp-video-preload-wrapper .bp-video-preload-play-overlay svg{width:48px;height:48px;fill:#fff}.bp-media-mp4 video{cursor:none;display:block;width:100%;max-width:100%;max-height:100%;margin-right:auto;margin-left:auto}.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}
84
84
  .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{cursor:pointer;background-color:rgba(255,255,255,.5)}.bp-media-scrubber-buffered{position:absolute;height:3px;background-color:#fff}.bp-media-scrubber-played{cursor:pointer;background-color:#0061d5}.bp-media-scrubber-underlay{cursor:not-allowed;width:100%}.bp-media-scrubber-handle{cursor:pointer;position:absolute;top:-4.25px;transform:scale(0);width:12px;height:12px;margin-left:-6px;border-radius:6px;background-color:#0061d5;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;overflow:hidden auto;display:inline-block;max-width:400px;max-height:210px;padding:8px;border:1px solid #bdc3c7;border-radius:2px;font-size:10px;line-height:0;color:#444;visibility:hidden;background-color:#fff;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{cursor:pointer;overflow:hidden;display:table-row;height:26px;padding:4px;white-space:nowrap;outline:0 none}.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{font-size:11px;font-weight:normal;color:#999ea4;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;font-size:12px;color:#464a4f;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;overflow:hidden;width:100%;height:60px;margin:auto;visibility:hidden;opacity:0;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);transition:visibility .3s,opacity .3s}.bp-media-time-scrubber-container{outline:0 none}.bp-media-volume-scrubber-container-wrapper{overflow:hidden;display:inline-block;width:0;height:40px;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{cursor:pointer;display:inline-block;width:45px;height:40px;margin:0;padding:0;border:none;font-size:12px;font-weight:normal;color:#fff;text-align:center;vertical-align:top;opacity:.7;background-color:rgba(0,0,0,0);outline:0 none}.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{cursor:default;display:inline-block;width:auto;margin:0 4px;line-height:40px;vertical-align:top}.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;border-radius:4px;font-size:12px;font-weight:bold;line-height:24px;color:#fff;letter-spacing:.1em;background-color:rgba(0,0,0,.3)}.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;border-radius:3px;font-size:8px;font-weight:bold;line-height:8px;letter-spacing:.1em;background-color:#0061d5}.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{-webkit-user-select:none;user-select:none;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}.bp-media-play-button{cursor:pointer;padding:0;border:none;font:inherit;color:inherit;background:none;cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:80px;height:80px;border:4px solid #fff;border-radius:40px;font-size:40px;color:#fff;text-align:center;background:rgba(0,0,0,.5);transition:all .2s}.bp-media-play-button:hover{background:#000}.bp-media-overlay-play-container{cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;gap:28px;align-items:center;justify-content:center;font-size:40px;color:#fff;text-align:center;transition:all .2s}.bp-media-overlay-play-container button{cursor:pointer;padding:0;border:none;font:inherit;color:inherit;background:none;cursor:pointer;width:40px;height:40px;border-radius:40px;font-size:40px;text-align:center;background:#000;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;z-index:1;right:auto;bottom:auto;left:auto;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;border:1px solid rgba(255,255,255,.12);object-fit:contain}.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{border:1px solid rgba(255,255,255,.12);object-fit:contain}.bp-video-360 .bp-VideoControlsRoot{position:absolute;right:0;bottom:-1px;left:0;width:100%}.bp-video-preload-wrapper{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:0;opacity:1;background-color:rgba(0,0,0,0);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;transform:translateY(-60px);width:100%;height:100%}.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{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:rgba(0,0,0,.5)}.bp-video-preload-wrapper .bp-video-preload-play-overlay svg{width:48px;height:48px;fill:#fff}.bp-media-dash video{cursor:none;display:block;width:100%;max-width:100%;max-height:100%;margin-right:auto;margin-left:auto}.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;overflow:hidden;display:none;width:160px;height:110px;border:1px solid #464a4f}.bp-media-filmstrip{position:relative}.bp-media-filmstrip-timecode{position:absolute;z-index:1;bottom:0;width:100%;font-size:13px;line-height:18px;color:#fff;text-align:center;background-color:#222}.bp-media-crawler-wrapper{position:relative;z-index:1;top:50%;left:50%;width:10px;margin:-15px 0 0 -5px}.bp-media-dash-stats{position:absolute;top:20px;right:20px;font-size:24px;color:#fff}
package/dist/lib/index.js CHANGED
@@ -21,12 +21,14 @@
21
21
  * and limitations under the license.
22
22
  */
23
23
  import { decode as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_utils_keys_d752524f_decode__ } from "box-ui-elements/es/utils/keys";
24
+ import { Pause as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Pause__, Play as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Play__ } from "@box/blueprint-web-assets/icons/MediumFilled";
24
25
  import { createPortal as __WEBPACK_EXTERNAL_MODULE_react_dom_7dac9eee_createPortal__ } from "react-dom";
26
+ import * as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__ from "@box/blueprint-web";
27
+ import * as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__ from "@box/blueprint-web-assets/icons/Medium";
25
28
  import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
26
29
  import { default as __WEBPACK_EXTERNAL_MODULE_axios_default__ } from "axios";
27
30
  import { bdlBoxBlue as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlBoxBlue__, bdlGray65 as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__, bdlGreenLight as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGreenLight__, bdlGrimace as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGrimace__, bdlWatermelonRed as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlWatermelonRed__, bdlYellorange as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlYellorange__, bdlYellow as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlYellow__, white as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_white__ } from "box-ui-elements/es/styles/variables";
28
31
  import { createRoot as __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__ } from "react-dom/client";
29
- import { BlueprintProvider as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_BlueprintProvider__, Toolbar as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_Toolbar__, TooltipProvider as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_TooltipProvider__, useNoopTreatment as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_useNoopTreatment__ } from "@box/blueprint-web";
30
32
  import { default as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_tooltip_Tooltip_97b5ae91_default__ } from "box-ui-elements/es/components/tooltip/Tooltip";
31
33
  import { withTargetedClickThrough as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_features_targeting_hocs_e326fa91_withTargetedClickThrough__ } from "box-ui-elements/es/features/targeting/hocs";
32
34
  import { PreviewLoading as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_preview_386c8d2b_PreviewLoading__, getIcon as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_preview_386c8d2b_getIcon__ } from "box-ui-elements/es/components/preview";
@@ -1037,7 +1039,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
1037
1039
  const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
1038
1040
  const CLIENT_NAME_KEY = 'box_client_name';
1039
1041
  const CLIENT_VERSION_KEY = 'box_client_version';
1040
- const CLIENT_VERSION = "3.112.0"; // eslint-disable-line no-undef
1042
+ const CLIENT_VERSION = "3.113.0"; // eslint-disable-line no-undef
1041
1043
  const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
1042
1044
  const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
1043
1045
  const PROMISE_MAP = {};
@@ -1903,58 +1905,6 @@ function useClickOutside(element, callback) {
1903
1905
 
1904
1906
  /***/ },
1905
1907
 
1906
- /***/ 5827
1907
- (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1908
-
1909
- /* harmony export */ __webpack_require__.d(__webpack_exports__, {
1910
- /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
1911
- /* harmony export */ });
1912
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
1913
- 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); }
1914
-
1915
- function IconArrowCurveBack24(props) {
1916
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
1917
- "data-testid": "IconArrowCurveBack24",
1918
- fill: "none",
1919
- focusable: "false",
1920
- height: 24,
1921
- viewBox: "0 0 24 24",
1922
- width: 24
1923
- }, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
1924
- d: "M12.707 2.29346C12.3165 1.90293 11.6835 1.90293 11.293 2.29346L8.64648 4.93994C8.06097 5.52574 8.06083 6.47534 8.64648 7.06104L11.293 9.70752C11.6834 10.0976 12.3166 10.0976 12.707 9.70752C13.0974 9.3171 13.0972 8.68399 12.707 8.29346L11.4131 6.99951H12C15.3136 6.99951 17.9998 9.68597 18 12.9995C18 16.3132 15.3137 18.9995 12 18.9995C10.7239 18.9995 9.54372 18.6019 8.57227 17.9243C8.11945 17.6086 7.49569 17.7198 7.17969 18.1724C6.8638 18.6252 6.97502 19.2489 7.42773 19.5649C8.72394 20.4691 10.3016 20.9995 12 20.9995C16.4183 20.9995 20 17.4178 20 12.9995C19.9998 8.5814 16.4182 4.99951 12 4.99951H11.415L12.707 3.70752C13.0975 3.31707 13.0973 2.684 12.707 2.29346ZM3.2793 8.99951C2.67882 8.99951 2.32725 9.26833 2.27832 9.9126L2.09277 12.3882V12.4126C2.06348 12.8862 2.33203 13.2964 2.92285 13.2964C3.31348 13.2964 3.49414 13.2085 3.76758 12.9692C3.99217 12.7691 4.29991 12.5933 4.68555 12.5933C5.35925 12.5933 5.83283 13.0476 5.83301 13.6919C5.83301 14.3511 5.33984 14.8394 4.6709 14.8394C4.10449 14.8394 3.7627 14.5708 3.48926 14.1606C3.27447 13.8923 3.05948 13.7798 2.72266 13.7798C2.26868 13.7798 2.00015 14.0437 2 14.4829C2 14.6537 2.04404 14.8199 2.12207 14.9761C2.4834 15.6938 3.51855 16.2212 4.68555 16.2212C6.36035 16.2212 7.52246 15.2007 7.52246 13.6528C7.52229 12.3151 6.56531 11.3774 5.23242 11.3774C4.49526 11.3774 3.92389 11.6852 3.65039 12.1489H3.61621L3.75293 10.3765H6.44824C6.87793 10.3765 7.15137 10.1079 7.15137 9.68799C7.15121 9.26828 6.87292 8.99951 6.44824 8.99951H3.2793Z",
1925
- fill: "#fff"
1926
- }));
1927
- }
1928
- /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IconArrowCurveBack24);
1929
-
1930
- /***/ },
1931
-
1932
- /***/ 4419
1933
- (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1934
-
1935
- /* harmony export */ __webpack_require__.d(__webpack_exports__, {
1936
- /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
1937
- /* harmony export */ });
1938
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
1939
- 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); }
1940
-
1941
- function IconArrowCurveForward24(props) {
1942
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
1943
- "data-testid": "IconArrowCurveForward24",
1944
- fill: "none",
1945
- focusable: "false",
1946
- height: 24,
1947
- viewBox: "0 0 24 24",
1948
- width: 24
1949
- }, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
1950
- d: "M11.293 2.29346C11.6835 1.90293 12.3165 1.90293 12.707 2.29346L15.3535 4.93994C15.939 5.52574 15.9392 6.47535 15.3535 7.06104L12.707 9.70752C12.3166 10.0976 11.6834 10.0976 11.293 9.70752C10.9026 9.31711 10.9028 8.684 11.293 8.29346L12.5869 6.99951H12C8.68642 6.99951 6.00021 9.68598 6 12.9995C6 16.3132 8.68629 18.9995 12 18.9995C13.2761 18.9995 14.4563 18.6019 15.4277 17.9243C15.8805 17.6086 16.5043 17.7198 16.8203 18.1724C17.1362 18.6252 17.025 19.2489 16.5723 19.5649C15.2761 20.4691 13.6984 20.9995 12 20.9995C7.58172 20.9995 4 17.4178 4 12.9995C4.00021 8.58141 7.58185 4.99951 12 4.99951H12.585L11.293 3.70752C10.9025 3.31708 10.9027 2.684 11.293 2.29346ZM20.9258 8.99951C21.3505 8.99951 21.6287 9.26828 21.6289 9.68799C21.6289 10.1079 21.3555 10.3765 20.9258 10.3765H18.2305L18.0938 12.1489H18.1279C18.4014 11.6852 18.9728 11.3774 19.71 11.3774C21.0428 11.3774 21.9998 12.3151 22 13.6528C22 15.2007 20.8379 16.2212 19.1631 16.2212C17.9961 16.2212 16.9609 15.6938 16.5996 14.9761C16.5216 14.8199 16.4775 14.6537 16.4775 14.4829C16.4777 14.0437 16.7462 13.7798 17.2002 13.7798C17.537 13.7798 17.752 13.8923 17.9668 14.1606C18.2402 14.5708 18.582 14.8394 19.1484 14.8394C19.8174 14.8394 20.3105 14.3511 20.3105 13.6919C20.3104 13.0476 19.8368 12.5933 19.1631 12.5933C18.7774 12.5933 18.4697 12.7691 18.2451 12.9692C17.9717 13.2085 17.791 13.2964 17.4004 13.2964C16.8096 13.2964 16.541 12.8862 16.5703 12.4126V12.3882L16.7559 9.9126C16.8048 9.26833 17.1564 8.99951 17.7568 8.99951H20.9258Z",
1951
- fill: "white"
1952
- }));
1953
- }
1954
- /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IconArrowCurveForward24);
1955
-
1956
- /***/ },
1957
-
1958
1908
  /***/ 6815
1959
1909
  (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1960
1910
 
@@ -2058,56 +2008,6 @@ function IconExit24(props) {
2058
2008
 
2059
2009
  /***/ },
2060
2010
 
2061
- /***/ 7502
2062
- (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2063
-
2064
- /* harmony export */ __webpack_require__.d(__webpack_exports__, {
2065
- /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
2066
- /* harmony export */ });
2067
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
2068
- 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); }
2069
-
2070
- function IconPause24(props) {
2071
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
2072
- "data-testid": "IconPause24",
2073
- focusable: false,
2074
- height: 24,
2075
- viewBox: "0 0 24 24",
2076
- width: 24
2077
- }, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
2078
- d: "M7 2C8.10457 2 9 2.89543 9 4V20C9 21.1046 8.10457 22 7 22C5.89543 22 5 21.1046 5 20V4C5 2.89543 5.89543 2 7 2ZM17 2C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20V4C15 2.89543 15.8954 2 17 2Z",
2079
- fill: "#fff"
2080
- }));
2081
- }
2082
- /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IconPause24);
2083
-
2084
- /***/ },
2085
-
2086
- /***/ 4684
2087
- (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2088
-
2089
- /* harmony export */ __webpack_require__.d(__webpack_exports__, {
2090
- /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
2091
- /* harmony export */ });
2092
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
2093
- 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); }
2094
-
2095
- function IconPlay24(props) {
2096
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
2097
- "data-testid": "IconPlay24",
2098
- focusable: false,
2099
- height: 24,
2100
- viewBox: "0 0 24 24",
2101
- width: 24
2102
- }, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
2103
- d: "M6 19.619V4.38098C6 3.16745 7.36603 2.45622 8.3602 3.15214L19.2445 10.7712C20.0976 11.3683 20.0976 12.6317 19.2445 13.2288L8.36019 20.8479C7.36603 21.5438 6 20.8326 6 19.619Z",
2104
- fill: "#fff"
2105
- }));
2106
- }
2107
- /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IconPlay24);
2108
-
2109
- /***/ },
2110
-
2111
2011
  /***/ 820
2112
2012
  (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2113
2013
 
@@ -2674,25 +2574,111 @@ function MediaSettingsMenuGuides({
2674
2574
  /* harmony export */ A: () => (/* binding */ MediaToggle)
2675
2575
  /* harmony export */ });
2676
2576
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
2677
- /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4410);
2577
+ /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5346);
2678
2578
  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); }
2679
2579
 
2680
2580
 
2681
2581
  function MediaToggle(props) {
2682
- const handleKeydown = event => {
2683
- const key = (0,_util__WEBPACK_IMPORTED_MODULE_1__/* .decodeKeydown */ .wU)(event);
2684
- if (key === 'Enter' || key === 'Space') {
2685
- event.stopPropagation();
2686
- }
2687
- };
2688
2582
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement("button", _extends({
2689
- onKeyDown: handleKeydown,
2583
+ onKeyDown: _utils__WEBPACK_IMPORTED_MODULE_1__/* .stopActivationKeyPropagation */ .My,
2690
2584
  type: "button"
2691
2585
  }, props));
2692
2586
  }
2693
2587
 
2694
2588
  /***/ },
2695
2589
 
2590
+ /***/ 2677
2591
+ (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2592
+
2593
+
2594
+ // EXPORTS
2595
+ __webpack_require__.d(__webpack_exports__, {
2596
+ A: () => (/* binding */ PlayPauseButton)
2597
+ });
2598
+
2599
+ // EXTERNAL MODULE: external "react"
2600
+ var external_react_ = __webpack_require__(1649);
2601
+ // EXTERNAL MODULE: external "@box/blueprint-web"
2602
+ var blueprint_web_ = __webpack_require__(8912);
2603
+ ;// external "@box/blueprint-web-assets/icons/MediumFilled"
2604
+
2605
+ ;// ./src/lib/viewers/controls/icons/IconPause24.tsx
2606
+ 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); }
2607
+
2608
+ function IconPause24(props) {
2609
+ return /*#__PURE__*/external_react_.createElement("svg", _extends({
2610
+ "data-testid": "IconPause24",
2611
+ focusable: false,
2612
+ height: 24,
2613
+ viewBox: "0 0 24 24",
2614
+ width: 24
2615
+ }, props), /*#__PURE__*/external_react_.createElement("path", {
2616
+ d: "M7 2C8.10457 2 9 2.89543 9 4V20C9 21.1046 8.10457 22 7 22C5.89543 22 5 21.1046 5 20V4C5 2.89543 5.89543 2 7 2ZM17 2C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20V4C15 2.89543 15.8954 2 17 2Z",
2617
+ fill: "#fff"
2618
+ }));
2619
+ }
2620
+ /* harmony default export */ const icons_IconPause24 = (IconPause24);
2621
+ ;// ./src/lib/viewers/controls/icons/IconPlay24.tsx
2622
+ function IconPlay24_extends() { return IconPlay24_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; }, IconPlay24_extends.apply(null, arguments); }
2623
+
2624
+ function IconPlay24(props) {
2625
+ return /*#__PURE__*/external_react_.createElement("svg", IconPlay24_extends({
2626
+ "data-testid": "IconPlay24",
2627
+ focusable: false,
2628
+ height: 24,
2629
+ viewBox: "0 0 24 24",
2630
+ width: 24
2631
+ }, props), /*#__PURE__*/external_react_.createElement("path", {
2632
+ d: "M6 19.619V4.38098C6 3.16745 7.36603 2.45622 8.3602 3.15214L19.2445 10.7712C20.0976 11.3683 20.0976 12.6317 19.2445 13.2288L8.36019 20.8479C7.36603 21.5438 6 20.8326 6 19.619Z",
2633
+ fill: "#fff"
2634
+ }));
2635
+ }
2636
+ /* harmony default export */ const icons_IconPlay24 = (IconPlay24);
2637
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
2638
+ var MediaToggle = __webpack_require__(8997);
2639
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
2640
+ var utils = __webpack_require__(5346);
2641
+ ;// ./src/lib/viewers/controls/media/PlayPauseButton.tsx
2642
+
2643
+
2644
+
2645
+
2646
+
2647
+
2648
+
2649
+ function PlayPauseButton({
2650
+ className,
2651
+ isPlaying,
2652
+ onPlayPause,
2653
+ isBlueprintEnabled = false
2654
+ }) {
2655
+ const title = isPlaying ? "Pause" : "Play";
2656
+ const handleClick = () => onPlayPause(!isPlaying);
2657
+ if (isBlueprintEnabled) {
2658
+ return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
2659
+ content: title
2660
+ }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
2661
+ "aria-label": title,
2662
+ "data-resin-target": "playPause",
2663
+ "data-target-id": "PlayPauseButton-playPause",
2664
+ icon: isPlaying ? __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Pause__ : __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Play__,
2665
+ onClick: handleClick,
2666
+ onKeyDown: utils/* stopActivationKeyPropagation */.My,
2667
+ size: "large",
2668
+ variant: "on-dark"
2669
+ }));
2670
+ }
2671
+ const Icon = isPlaying ? icons_IconPause24 : icons_IconPlay24;
2672
+ return /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
2673
+ className: className,
2674
+ "data-resin-target": "playPause",
2675
+ onClick: handleClick,
2676
+ title: title
2677
+ }, /*#__PURE__*/external_react_["default"].createElement(Icon, null));
2678
+ }
2679
+
2680
+ /***/ },
2681
+
2696
2682
  /***/ 6321
2697
2683
  (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2698
2684
 
@@ -2707,18 +2693,10 @@ var external_react_ = __webpack_require__(1649);
2707
2693
  // EXTERNAL MODULE: ./node_modules/lodash/noop.js
2708
2694
  var noop = __webpack_require__(3950);
2709
2695
  var noop_default = /*#__PURE__*/__webpack_require__.n(noop);
2710
- // EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconPlay24.tsx
2711
- var IconPlay24 = __webpack_require__(4684);
2712
- // EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconPause24.tsx
2713
- var IconPause24 = __webpack_require__(7502);
2714
- // EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconArrowCurveForward24.tsx
2715
- var IconArrowCurveForward24 = __webpack_require__(4419);
2716
- // EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconArrowCurveBack24.tsx
2717
- var IconArrowCurveBack24 = __webpack_require__(5827);
2718
- // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
2719
- var MediaToggle = __webpack_require__(8997);
2720
- // EXTERNAL MODULE: ./src/lib/constants.js
2721
- var constants = __webpack_require__(9130);
2696
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseButton.tsx + 3 modules
2697
+ var PlayPauseButton = __webpack_require__(2677);
2698
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/SkipButton.tsx + 2 modules
2699
+ var SkipButton = __webpack_require__(2659);
2722
2700
  ;// ./src/lib/viewers/controls/media/PlayPauseToggle.scss
2723
2701
  // extracted by mini-css-extract-plugin
2724
2702
 
@@ -2728,42 +2706,128 @@ var constants = __webpack_require__(9130);
2728
2706
 
2729
2707
 
2730
2708
 
2731
-
2732
-
2733
-
2734
-
2735
2709
  function PlayPauseToggle({
2736
2710
  isPlaying,
2737
2711
  onPlayPause = (noop_default()),
2738
2712
  movePlayback = (noop_default()),
2739
- hasSkipButtons = true
2713
+ hasSkipButtons = true,
2714
+ isBlueprintEnabled = false
2740
2715
  }) {
2741
- const PlayPauseIcon = isPlaying ? IconPause24/* default */.A : IconPlay24/* default */.A;
2742
- const title = isPlaying ? "Pause" : "Play";
2743
- const skipForwardTitle = "Skip forward";
2744
- const skipBackwardTitle = "Skip backward";
2745
- const moveForward = () => {
2746
- movePlayback(true, constants/* MEDIA_PLAYBACK_SKIP_DURATION */.uN);
2747
- };
2748
- const moveBackward = () => {
2749
- movePlayback(false, constants/* MEDIA_PLAYBACK_SKIP_DURATION */.uN);
2750
- };
2751
- return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, hasSkipButtons && /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
2716
+ return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, hasSkipButtons && /*#__PURE__*/external_react_["default"].createElement(SkipButton/* default */.A, {
2752
2717
  className: "bp-PlayPauseToggle",
2753
- "data-resin-target": "skipBackward",
2754
- onClick: moveBackward,
2755
- title: skipBackwardTitle
2756
- }, /*#__PURE__*/external_react_["default"].createElement(IconArrowCurveBack24/* default */.A, null)), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
2718
+ direction: "backward",
2719
+ movePlayback: movePlayback,
2720
+ isBlueprintEnabled: isBlueprintEnabled
2721
+ }), /*#__PURE__*/external_react_["default"].createElement(PlayPauseButton/* default */.A, {
2757
2722
  className: "bp-PlayPauseToggle",
2758
- "data-resin-target": "playPause",
2759
- onClick: () => onPlayPause(!isPlaying),
2760
- title: title
2761
- }, /*#__PURE__*/external_react_["default"].createElement(PlayPauseIcon, null)), hasSkipButtons && /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
2723
+ isPlaying: isPlaying,
2724
+ onPlayPause: onPlayPause,
2725
+ isBlueprintEnabled: isBlueprintEnabled
2726
+ }), hasSkipButtons && /*#__PURE__*/external_react_["default"].createElement(SkipButton/* default */.A, {
2762
2727
  className: "bp-PlayPauseToggle",
2763
- "data-resin-target": "skipForward",
2764
- onClick: moveForward,
2765
- title: skipForwardTitle
2766
- }, /*#__PURE__*/external_react_["default"].createElement(IconArrowCurveForward24/* default */.A, null)));
2728
+ direction: "forward",
2729
+ movePlayback: movePlayback,
2730
+ isBlueprintEnabled: isBlueprintEnabled
2731
+ }));
2732
+ }
2733
+
2734
+ /***/ },
2735
+
2736
+ /***/ 2659
2737
+ (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2738
+
2739
+
2740
+ // EXPORTS
2741
+ __webpack_require__.d(__webpack_exports__, {
2742
+ A: () => (/* binding */ SkipButton)
2743
+ });
2744
+
2745
+ // EXTERNAL MODULE: external "react"
2746
+ var external_react_ = __webpack_require__(1649);
2747
+ // EXTERNAL MODULE: external "@box/blueprint-web"
2748
+ var blueprint_web_ = __webpack_require__(8912);
2749
+ // EXTERNAL MODULE: external "@box/blueprint-web-assets/icons/Medium"
2750
+ var Medium_ = __webpack_require__(9747);
2751
+ ;// ./src/lib/viewers/controls/icons/IconArrowCurveBack24.tsx
2752
+ 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); }
2753
+
2754
+ function IconArrowCurveBack24(props) {
2755
+ return /*#__PURE__*/external_react_.createElement("svg", _extends({
2756
+ "data-testid": "IconArrowCurveBack24",
2757
+ fill: "none",
2758
+ focusable: "false",
2759
+ height: 24,
2760
+ viewBox: "0 0 24 24",
2761
+ width: 24
2762
+ }, props), /*#__PURE__*/external_react_.createElement("path", {
2763
+ d: "M12.707 2.29346C12.3165 1.90293 11.6835 1.90293 11.293 2.29346L8.64648 4.93994C8.06097 5.52574 8.06083 6.47534 8.64648 7.06104L11.293 9.70752C11.6834 10.0976 12.3166 10.0976 12.707 9.70752C13.0974 9.3171 13.0972 8.68399 12.707 8.29346L11.4131 6.99951H12C15.3136 6.99951 17.9998 9.68597 18 12.9995C18 16.3132 15.3137 18.9995 12 18.9995C10.7239 18.9995 9.54372 18.6019 8.57227 17.9243C8.11945 17.6086 7.49569 17.7198 7.17969 18.1724C6.8638 18.6252 6.97502 19.2489 7.42773 19.5649C8.72394 20.4691 10.3016 20.9995 12 20.9995C16.4183 20.9995 20 17.4178 20 12.9995C19.9998 8.5814 16.4182 4.99951 12 4.99951H11.415L12.707 3.70752C13.0975 3.31707 13.0973 2.684 12.707 2.29346ZM3.2793 8.99951C2.67882 8.99951 2.32725 9.26833 2.27832 9.9126L2.09277 12.3882V12.4126C2.06348 12.8862 2.33203 13.2964 2.92285 13.2964C3.31348 13.2964 3.49414 13.2085 3.76758 12.9692C3.99217 12.7691 4.29991 12.5933 4.68555 12.5933C5.35925 12.5933 5.83283 13.0476 5.83301 13.6919C5.83301 14.3511 5.33984 14.8394 4.6709 14.8394C4.10449 14.8394 3.7627 14.5708 3.48926 14.1606C3.27447 13.8923 3.05948 13.7798 2.72266 13.7798C2.26868 13.7798 2.00015 14.0437 2 14.4829C2 14.6537 2.04404 14.8199 2.12207 14.9761C2.4834 15.6938 3.51855 16.2212 4.68555 16.2212C6.36035 16.2212 7.52246 15.2007 7.52246 13.6528C7.52229 12.3151 6.56531 11.3774 5.23242 11.3774C4.49526 11.3774 3.92389 11.6852 3.65039 12.1489H3.61621L3.75293 10.3765H6.44824C6.87793 10.3765 7.15137 10.1079 7.15137 9.68799C7.15121 9.26828 6.87292 8.99951 6.44824 8.99951H3.2793Z",
2764
+ fill: "#fff"
2765
+ }));
2766
+ }
2767
+ /* harmony default export */ const icons_IconArrowCurveBack24 = (IconArrowCurveBack24);
2768
+ ;// ./src/lib/viewers/controls/icons/IconArrowCurveForward24.tsx
2769
+ function IconArrowCurveForward24_extends() { return IconArrowCurveForward24_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; }, IconArrowCurveForward24_extends.apply(null, arguments); }
2770
+
2771
+ function IconArrowCurveForward24(props) {
2772
+ return /*#__PURE__*/external_react_.createElement("svg", IconArrowCurveForward24_extends({
2773
+ "data-testid": "IconArrowCurveForward24",
2774
+ fill: "none",
2775
+ focusable: "false",
2776
+ height: 24,
2777
+ viewBox: "0 0 24 24",
2778
+ width: 24
2779
+ }, props), /*#__PURE__*/external_react_.createElement("path", {
2780
+ d: "M11.293 2.29346C11.6835 1.90293 12.3165 1.90293 12.707 2.29346L15.3535 4.93994C15.939 5.52574 15.9392 6.47535 15.3535 7.06104L12.707 9.70752C12.3166 10.0976 11.6834 10.0976 11.293 9.70752C10.9026 9.31711 10.9028 8.684 11.293 8.29346L12.5869 6.99951H12C8.68642 6.99951 6.00021 9.68598 6 12.9995C6 16.3132 8.68629 18.9995 12 18.9995C13.2761 18.9995 14.4563 18.6019 15.4277 17.9243C15.8805 17.6086 16.5043 17.7198 16.8203 18.1724C17.1362 18.6252 17.025 19.2489 16.5723 19.5649C15.2761 20.4691 13.6984 20.9995 12 20.9995C7.58172 20.9995 4 17.4178 4 12.9995C4.00021 8.58141 7.58185 4.99951 12 4.99951H12.585L11.293 3.70752C10.9025 3.31708 10.9027 2.684 11.293 2.29346ZM20.9258 8.99951C21.3505 8.99951 21.6287 9.26828 21.6289 9.68799C21.6289 10.1079 21.3555 10.3765 20.9258 10.3765H18.2305L18.0938 12.1489H18.1279C18.4014 11.6852 18.9728 11.3774 19.71 11.3774C21.0428 11.3774 21.9998 12.3151 22 13.6528C22 15.2007 20.8379 16.2212 19.1631 16.2212C17.9961 16.2212 16.9609 15.6938 16.5996 14.9761C16.5216 14.8199 16.4775 14.6537 16.4775 14.4829C16.4777 14.0437 16.7462 13.7798 17.2002 13.7798C17.537 13.7798 17.752 13.8923 17.9668 14.1606C18.2402 14.5708 18.582 14.8394 19.1484 14.8394C19.8174 14.8394 20.3105 14.3511 20.3105 13.6919C20.3104 13.0476 19.8368 12.5933 19.1631 12.5933C18.7774 12.5933 18.4697 12.7691 18.2451 12.9692C17.9717 13.2085 17.791 13.2964 17.4004 13.2964C16.8096 13.2964 16.541 12.8862 16.5703 12.4126V12.3882L16.7559 9.9126C16.8048 9.26833 17.1564 8.99951 17.7568 8.99951H20.9258Z",
2781
+ fill: "white"
2782
+ }));
2783
+ }
2784
+ /* harmony default export */ const icons_IconArrowCurveForward24 = (IconArrowCurveForward24);
2785
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
2786
+ var MediaToggle = __webpack_require__(8997);
2787
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
2788
+ var utils = __webpack_require__(5346);
2789
+ // EXTERNAL MODULE: ./src/lib/constants.js
2790
+ var constants = __webpack_require__(9130);
2791
+ ;// ./src/lib/viewers/controls/media/SkipButton.tsx
2792
+
2793
+
2794
+
2795
+
2796
+
2797
+
2798
+
2799
+
2800
+ function SkipButton({
2801
+ className,
2802
+ direction,
2803
+ movePlayback,
2804
+ isBlueprintEnabled = false
2805
+ }) {
2806
+ const isForward = direction === 'forward';
2807
+ const resinTarget = isForward ? 'skipForward' : 'skipBackward';
2808
+ const title = isForward ? "Skip forward" : "Skip backward";
2809
+ const handleClick = () => movePlayback(isForward, constants/* MEDIA_PLAYBACK_SKIP_DURATION */.uN);
2810
+ if (isBlueprintEnabled) {
2811
+ return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
2812
+ content: title
2813
+ }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
2814
+ "aria-label": title,
2815
+ "data-resin-target": resinTarget,
2816
+ "data-target-id": `SkipButton-${resinTarget}`,
2817
+ icon: isForward ? Medium_.ArrowCurveForward5 : Medium_.ArrowCurveBack5,
2818
+ onClick: handleClick,
2819
+ onKeyDown: utils/* stopActivationKeyPropagation */.My,
2820
+ size: "large",
2821
+ variant: "on-dark"
2822
+ }));
2823
+ }
2824
+ const Icon = isForward ? icons_IconArrowCurveForward24 : icons_IconArrowCurveBack24;
2825
+ return /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
2826
+ className: className,
2827
+ "data-resin-target": resinTarget,
2828
+ onClick: handleClick,
2829
+ title: title
2830
+ }, /*#__PURE__*/external_react_["default"].createElement(Icon, null));
2767
2831
  }
2768
2832
 
2769
2833
  /***/ },
@@ -3008,9 +3072,13 @@ __webpack_require__.d(__webpack_exports__, {
3008
3072
 
3009
3073
  // EXTERNAL MODULE: external "react"
3010
3074
  var external_react_ = __webpack_require__(1649);
3075
+ // EXTERNAL MODULE: external "@box/blueprint-web"
3076
+ var blueprint_web_ = __webpack_require__(8912);
3011
3077
  // EXTERNAL MODULE: ./node_modules/classnames/index.js
3012
3078
  var classnames = __webpack_require__(2485);
3013
3079
  var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
3080
+ // EXTERNAL MODULE: external "@box/blueprint-web-assets/icons/Medium"
3081
+ var Medium_ = __webpack_require__(9747);
3014
3082
  ;// ./src/lib/viewers/controls/icons/IconVolumeMed24.tsx
3015
3083
  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); }
3016
3084
 
@@ -3062,6 +3130,8 @@ function IconVolumeMuted24(props) {
3062
3130
  }));
3063
3131
  }
3064
3132
  /* harmony default export */ const icons_IconVolumeMuted24 = (IconVolumeMuted24);
3133
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
3134
+ var utils = __webpack_require__(5346);
3065
3135
  // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
3066
3136
  var MediaToggle = __webpack_require__(8997);
3067
3137
  ;// ./src/lib/viewers/controls/hooks/useAttention.ts
@@ -3309,9 +3379,24 @@ function VolumeSliderControl(_ref) {
3309
3379
 
3310
3380
 
3311
3381
 
3382
+
3383
+
3384
+
3312
3385
  /** Keyboard volume keeps the flyout open longer than the 200ms max-width transition. */
3313
3386
  const VOLUME_FLYOUT_DISMISS_MS = 1000;
3314
- function getIcon(volume) {
3387
+ function getIcon(volume, isBlueprintEnabled = false) {
3388
+ if (isBlueprintEnabled) {
3389
+ if (volume >= 0.66) {
3390
+ return Medium_.Volume2;
3391
+ }
3392
+ if (volume >= 0.33) {
3393
+ return Medium_.Volume1;
3394
+ }
3395
+ if (volume >= 0.01) {
3396
+ return Medium_.Volume0;
3397
+ }
3398
+ return Medium_.VolumeX;
3399
+ }
3315
3400
  let Icon = icons_IconVolumeMuted24;
3316
3401
  if (volume >= 0.66) {
3317
3402
  Icon = icons_IconVolumeMax24;
@@ -3326,6 +3411,7 @@ function VolumeControls({
3326
3411
  keyboardVolumeStep = 0,
3327
3412
  onMuteChange,
3328
3413
  onVolumeChange,
3414
+ isBlueprintEnabled = false,
3329
3415
  volume = 1
3330
3416
  }) {
3331
3417
  const [isActive, handlers, resetAttention] = useAttention();
@@ -3335,7 +3421,7 @@ function VolumeControls({
3335
3421
  const volumeControlElRef = (0,external_react_.useRef)(null); // root; outside pointerdown unpins the flyout
3336
3422
  const revealTimerRef = (0,external_react_.useRef)(0);
3337
3423
  const isMuted = !volume;
3338
- const Icon = isMuted ? icons_IconVolumeMuted24 : getIcon(volume);
3424
+ const Icon = getIcon(volume, isBlueprintEnabled);
3339
3425
  const title = isMuted ? "Unmute" : "Mute";
3340
3426
  const value = Math.round(volume * 100);
3341
3427
  const isOpen = isActive || isRevealed || isPinned;
@@ -3388,7 +3474,9 @@ function VolumeControls({
3388
3474
  }, [isMuted, onMuteChange]);
3389
3475
  return /*#__PURE__*/external_react_["default"].createElement("div", {
3390
3476
  ref: volumeControlElRef,
3391
- className: "bp-VolumeControls",
3477
+ className: classnames_default()('bp-VolumeControls', {
3478
+ 'bp-VolumeControls--blueprint': isBlueprintEnabled
3479
+ }),
3392
3480
  "data-testid": "bp-volume-controls",
3393
3481
  onBlur: event => {
3394
3482
  handlers.onBlur(event);
@@ -3403,7 +3491,20 @@ function VolumeControls({
3403
3491
  onFocus: handlers.onFocus,
3404
3492
  onMouseOut: handlers.onMouseOut,
3405
3493
  onMouseOver: handlers.onMouseOver
3406
- }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
3494
+ }, isBlueprintEnabled ? /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
3495
+ content: title,
3496
+ side: "left"
3497
+ }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
3498
+ "aria-label": title,
3499
+ "data-resin-target": "volumeToggle",
3500
+ "data-target-id": "VolumeControls-volumeToggle",
3501
+ icon: Icon,
3502
+ onClick: handleToggleClick,
3503
+ onKeyDown: utils/* stopActivationKeyPropagation */.My,
3504
+ onPointerDown: handleTogglePointerDown,
3505
+ size: "large",
3506
+ variant: "on-dark"
3507
+ })) : /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
3407
3508
  className: "bp-VolumeControls-toggle",
3408
3509
  "data-resin-target": "volumeToggle",
3409
3510
  onClick: handleToggleClick,
@@ -3645,8 +3746,8 @@ const CLUSTER_THRESHOLD_PX = 2;
3645
3746
 
3646
3747
  /** Converts a group of markers into a ClusterData object with computed positions and metadata. */
3647
3748
  function finalizeCluster(group, durationValue) {
3648
- const leftPercent = (0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .percent */ .K)(group[0].time, durationValue);
3649
- const rightPercent = (0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .percent */ .K)(group[group.length - 1].time, durationValue);
3749
+ const leftPercent = (0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .percent */ .KN)(group[0].time, durationValue);
3750
+ const rightPercent = (0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .percent */ .KN)(group[group.length - 1].time, durationValue);
3650
3751
  const isSinglePoint = leftPercent === rightPercent;
3651
3752
  return {
3652
3753
  id: group.map(m => m.id).join('|'),
@@ -3787,9 +3888,12 @@ function useDismissableMarkerSelection(hostSelectedId = null, selectionSeq = nul
3787
3888
  (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
3788
3889
 
3789
3890
  /* harmony export */ __webpack_require__.d(__webpack_exports__, {
3790
- /* harmony export */ K: () => (/* binding */ percent)
3891
+ /* harmony export */ KN: () => (/* binding */ percent),
3892
+ /* harmony export */ My: () => (/* binding */ stopActivationKeyPropagation)
3791
3893
  /* harmony export */ });
3792
3894
  /* unused harmony export round */
3895
+ /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4410);
3896
+
3793
3897
  const round = value => {
3794
3898
  return +value.toFixed(4);
3795
3899
  };
@@ -3797,6 +3901,14 @@ const percent = (value1, value2) => {
3797
3901
  return round(value1 / value2 * 100);
3798
3902
  };
3799
3903
 
3904
+ // Activation keys must not reach the viewer's keydown handler, which toggles playback on Space.
3905
+ const stopActivationKeyPropagation = event => {
3906
+ const key = (0,_util__WEBPACK_IMPORTED_MODULE_0__/* .decodeKeydown */ .wU)(event);
3907
+ if (key === 'Enter' || key === 'Space') {
3908
+ event.stopPropagation();
3909
+ }
3910
+ };
3911
+
3800
3912
  /***/ },
3801
3913
 
3802
3914
  /***/ 709
@@ -4858,7 +4970,7 @@ function markerLeftPercent(time, durationSec, viewport) {
4858
4970
  const mapped = hasMappedWindow(viewport);
4859
4971
  const origin = mapped ? viewport.startSec : 0;
4860
4972
  const span = mapped ? viewport.endSec - viewport.startSec : durationSec;
4861
- return (0,utils/* percent */.K)(time - origin, span);
4973
+ return (0,utils/* percent */.KN)(time - origin, span);
4862
4974
  }
4863
4975
 
4864
4976
  /** Width is unknown until layout. Still place badges, and stack exact same timestamps. */
@@ -4874,8 +4986,8 @@ function clustersByExactTime(markers, durationSec) {
4874
4986
  }
4875
4987
  });
4876
4988
  return groups.map(group => {
4877
- const leftPercent = (0,utils/* percent */.K)(group[0].time, durationSec);
4878
- const rightPercent = (0,utils/* percent */.K)(group[group.length - 1].time, durationSec);
4989
+ const leftPercent = (0,utils/* percent */.KN)(group[0].time, durationSec);
4990
+ const rightPercent = (0,utils/* percent */.KN)(group[group.length - 1].time, durationSec);
4879
4991
  return {
4880
4992
  id: group.map(m => m.id).join('|'),
4881
4993
  isSinglePoint: leftPercent === rightPercent,
@@ -7911,6 +8023,7 @@ function MP3ControlsV2({
7911
8023
  rate,
7912
8024
  shuttleDirection = null,
7913
8025
  shuttleRate = 0,
8026
+ isBlueprintEnabled = false,
7914
8027
  volume
7915
8028
  }) {
7916
8029
  const durationValue = typeof durationTime === 'number' && isFinite_default()(durationTime) ? durationTime : 0;
@@ -8113,7 +8226,8 @@ function MP3ControlsV2({
8113
8226
  }, /*#__PURE__*/external_react_["default"].createElement(PlayPauseToggle/* default */.A, {
8114
8227
  hasSkipButtons: false,
8115
8228
  isPlaying: isPlaying,
8116
- onPlayPause: onPlayPause
8229
+ onPlayPause: onPlayPause,
8230
+ isBlueprintEnabled: isBlueprintEnabled
8117
8231
  }), /*#__PURE__*/external_react_["default"].createElement("div", {
8118
8232
  className: "bp-MP3ControlsV2-divider"
8119
8233
  }), /*#__PURE__*/external_react_["default"].createElement(TimestampControl/* default */.Ay, {
@@ -8125,6 +8239,7 @@ function MP3ControlsV2({
8125
8239
  keyboardVolumeStep: keyboardVolumeStep,
8126
8240
  onMuteChange: onMuteChange,
8127
8241
  onVolumeChange: onVolumeChange,
8242
+ isBlueprintEnabled: isBlueprintEnabled,
8128
8243
  volume: volume
8129
8244
  }), /*#__PURE__*/external_react_["default"].createElement(MediaSettings/* default */.A, {
8130
8245
  autoplay: autoplay,
@@ -16511,6 +16626,28 @@ module.exports = "<svg fill=\"#fff\" height=\"48\" viewBox=\"0 0 24 24\" width=\
16511
16626
 
16512
16627
  /***/ },
16513
16628
 
16629
+ /***/ 8912
16630
+ (module, __unused_webpack_exports, __webpack_require__) {
16631
+
16632
+ var x = (y) => {
16633
+ var x = {}; __webpack_require__.d(x, y); return x
16634
+ }
16635
+ var y = (x) => (() => (x))
16636
+ module.exports = x({ ["BlueprintProvider"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.BlueprintProvider), ["IconButton"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.IconButton), ["Toolbar"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Toolbar), ["Tooltip"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Tooltip), ["TooltipProvider"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.TooltipProvider), ["useNoopTreatment"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.useNoopTreatment) });
16637
+
16638
+ /***/ },
16639
+
16640
+ /***/ 9747
16641
+ (module, __unused_webpack_exports, __webpack_require__) {
16642
+
16643
+ var x = (y) => {
16644
+ var x = {}; __webpack_require__.d(x, y); return x
16645
+ }
16646
+ var y = (x) => (() => (x))
16647
+ module.exports = x({ ["ArrowCurveBack5"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowCurveBack5), ["ArrowCurveForward5"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowCurveForward5), ["ArrowsMaximize"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowsMaximize), ["ArrowsMinimize"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowsMinimize), ["Volume0"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume0), ["Volume1"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume1), ["Volume2"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume2), ["VolumeX"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.VolumeX) });
16648
+
16649
+ /***/ },
16650
+
16514
16651
  /***/ 1649
16515
16652
  (module, __unused_webpack_exports, __webpack_require__) {
16516
16653
 
@@ -25412,7 +25549,7 @@ class Browser {
25412
25549
  ;// ./src/lib/Logger.js
25413
25550
  /* eslint-disable no-undef */
25414
25551
  const CLIENT_NAME = "box-content-preview";
25415
- const CLIENT_VERSION = "3.112.0";
25552
+ const CLIENT_VERSION = "3.113.0";
25416
25553
  /* eslint-enable no-undef */
25417
25554
 
25418
25555
  class Logger {
@@ -27878,6 +28015,7 @@ function ArchiveViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) retur
27878
28015
 
27879
28016
 
27880
28017
 
28018
+
27881
28019
  const JS = ['archive.js'];
27882
28020
  const src_CSS = ['archive.css'];
27883
28021
  class ArchiveViewer extends viewers_BaseViewer {
@@ -27888,20 +28026,37 @@ class ArchiveViewer extends viewers_BaseViewer {
27888
28026
  *
27889
28027
  * @private
27890
28028
  * @param {Array<Object>} data - archive data collection
27891
- * @return {void}
28029
+ * @return {Promise<void>|undefined} pending only when the v2 chunk is loading
27892
28030
  */
27893
28031
  ArchiveViewer_defineProperty(this, "finishLoading", data => {
27894
28032
  if (this.isDestroyed()) {
27895
- return;
28033
+ return undefined;
27896
28034
  }
27897
28035
  try {
27898
28036
  /* global BoxArchive loaded from archive.js */
27899
- this.archiveComponent = new BoxArchive(this.archiveEl, this.options.file.name, data);
28037
+ this.archiveComponent = new BoxArchive(this.archiveEl, this.options.file.name, data, {
28038
+ isArchiveV2Enabled: this.isBlueprintEnabled() && this.featureEnabled(constants/* BLUEPRINT_MIGRATION_ARCHIVE */.cA),
28039
+ resin: this.options.resin
28040
+ });
27900
28041
  } catch (error) {
27901
28042
  throw new PreviewError/* default */.A(lib_events/* ERROR_CODE */.bo.LOAD_VIEWER, "This preview didn’t load. Please try to open or download the file to view.", error);
27902
28043
  }
27903
- this.loaded = true;
27904
- this.emit(lib_events/* VIEWER_EVENT */.Oi.load);
28044
+ const {
28045
+ ready
28046
+ } = this.archiveComponent;
28047
+ if (!ready) {
28048
+ this.finishRender();
28049
+ return undefined;
28050
+ }
28051
+
28052
+ // Flag on: hold `load` until the v2 chunk has loaded and rendered
28053
+ return ready.then(() => {
28054
+ if (!this.isDestroyed()) {
28055
+ this.finishRender();
28056
+ }
28057
+ }, error => {
28058
+ throw new PreviewError/* default */.A(lib_events/* ERROR_CODE */.bo.LOAD_VIEWER, "This preview didn’t load. Please try to open or download the file to view.", error);
28059
+ });
27905
28060
  });
27906
28061
  }
27907
28062
  /**
@@ -27949,6 +28104,16 @@ class ArchiveViewer extends viewers_BaseViewer {
27949
28104
  });
27950
28105
  }).then(this.finishLoading).catch(this.handleAssetError);
27951
28106
  }
28107
+ /**
28108
+ * Marks the viewer loaded once the archive has rendered
28109
+ *
28110
+ * @private
28111
+ * @return {void}
28112
+ */
28113
+ finishRender() {
28114
+ this.loaded = true;
28115
+ this.emit(lib_events/* VIEWER_EVENT */.Oi.load);
28116
+ }
27952
28117
  }
27953
28118
  /* harmony default export */ const archive_ArchiveViewer = (ArchiveViewer);
27954
28119
  ;// ./src/lib/viewers/archive/ArchiveLoader.js
@@ -27977,8 +28142,8 @@ var external_react_ = __webpack_require__(1649);
27977
28142
  // EXTERNAL MODULE: ./node_modules/lodash/noop.js
27978
28143
  var noop = __webpack_require__(3950);
27979
28144
  var noop_default = /*#__PURE__*/__webpack_require__.n(noop);
27980
- ;// external "@box/blueprint-web"
27981
-
28145
+ // EXTERNAL MODULE: external "@box/blueprint-web"
28146
+ var blueprint_web_ = __webpack_require__(8912);
27982
28147
  ;// ./src/lib/BlueprintProviders.tsx
27983
28148
 
27984
28149
 
@@ -27987,9 +28152,9 @@ function BlueprintProviders({
27987
28152
  children,
27988
28153
  container
27989
28154
  }) {
27990
- return /*#__PURE__*/external_react_["default"].createElement(__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_BlueprintProvider__, {
27991
- useTreatment: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_useNoopTreatment__
27992
- }, /*#__PURE__*/external_react_["default"].createElement(__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_TooltipProvider__, {
28155
+ return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.BlueprintProvider, {
28156
+ useTreatment: blueprint_web_.useNoopTreatment
28157
+ }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.TooltipProvider, {
27993
28158
  container: container
27994
28159
  }, children));
27995
28160
  }
@@ -37178,6 +37343,16 @@ class MediaBaseViewer extends viewers_BaseViewer {
37178
37343
  isPlayNextEnabled() {
37179
37344
  return this.cache.get(MEDIA_PLAY_NEXT_CACHE_KEY) === 'Enabled';
37180
37345
  }
37346
+
37347
+ /**
37348
+ * Determines if the media controls render their Blueprint versions
37349
+ *
37350
+ * @protected
37351
+ * @return {boolean} Indicates if the Blueprint media controls flag is on
37352
+ */
37353
+ isBlueprintMediaControlsEnabled() {
37354
+ return this.featureEnabled(constants/* BLUEPRINT_MIGRATION_MEDIA_CONTROLS */.dR);
37355
+ }
37181
37356
  /**
37182
37357
  * Loads the controls
37183
37358
  *
@@ -39661,7 +39836,8 @@ class MP3Viewer extends media_MediaBaseViewer {
39661
39836
  peaks: this.waveformPeaks,
39662
39837
  playNext: this.isPlayNextEnabled(),
39663
39838
  shuttleDirection: this.shuttleDirection,
39664
- shuttleRate: this.shuttleRate
39839
+ shuttleRate: this.shuttleRate,
39840
+ isBlueprintEnabled: this.isBlueprintMediaControlsEnabled()
39665
39841
  })));
39666
39842
  return;
39667
39843
  }
@@ -41287,6 +41463,10 @@ function VideoControls({
41287
41463
  onFullscreenToggle: onFullscreenToggle
41288
41464
  })))));
41289
41465
  }
41466
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseButton.tsx + 3 modules
41467
+ var PlayPauseButton = __webpack_require__(2677);
41468
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/SkipButton.tsx + 2 modules
41469
+ var SkipButton = __webpack_require__(2659);
41290
41470
  // EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 1 modules
41291
41471
  var TimestampControl = __webpack_require__(3904);
41292
41472
  // EXTERNAL MODULE: ./src/lib/viewers/media/formatTimecode.ts
@@ -41523,9 +41703,9 @@ function TimeControlsV2({
41523
41703
  } = (0,useDismissableMarkerSelection/* default */.A)(hostSelectedId, selectedMarker?.selectionSeq ?? null);
41524
41704
  const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
41525
41705
  const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
41526
- const currentPercentage = (0,utils/* percent */.K)(currentValue, durationValue);
41706
+ const currentPercentage = (0,utils/* percent */.KN)(currentValue, durationValue);
41527
41707
  const bufferedAmount = bufferedRange && bufferedRange.length ? bufferedRange.end(bufferedRange.length - 1) : 0;
41528
- const bufferedPercentage = (0,utils/* percent */.K)(bufferedAmount, durationValue);
41708
+ const bufferedPercentage = (0,utils/* percent */.KN)(bufferedAmount, durationValue);
41529
41709
  external_react_["default"].useLayoutEffect(() => {
41530
41710
  const el = scrubberRef.current;
41531
41711
  if (!el) return undefined;
@@ -41615,6 +41795,8 @@ function TimeControlsV2({
41615
41795
  selectedId: selectedId
41616
41796
  }))));
41617
41797
  }
41798
+ // EXTERNAL MODULE: external "@box/blueprint-web-assets/icons/Medium"
41799
+ var Medium_ = __webpack_require__(9747);
41618
41800
  ;// ./src/lib/viewers/controls/media/VideoFullscreenButton.scss
41619
41801
  // extracted by mini-css-extract-plugin
41620
41802
 
@@ -41624,9 +41806,13 @@ function TimeControlsV2({
41624
41806
 
41625
41807
 
41626
41808
 
41809
+
41810
+
41811
+
41627
41812
  function VideoFullscreenButton({
41628
41813
  mediaEl,
41629
- onFullscreenToggle
41814
+ onFullscreenToggle,
41815
+ isBlueprintEnabled = false
41630
41816
  }) {
41631
41817
  const isFullscreen = useFullscreen();
41632
41818
  const title = isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
@@ -41666,27 +41852,38 @@ function VideoFullscreenButton({
41666
41852
  }) => {
41667
41853
  onFullscreenToggle(!isFullscreen, target);
41668
41854
  };
41855
+ const positionStyle = position ? {
41856
+ top: position.top,
41857
+ right: position.right
41858
+ } : undefined;
41859
+ if (isBlueprintEnabled) {
41860
+ return /*#__PURE__*/external_react_["default"].createElement("div", {
41861
+ ref: ref,
41862
+ className: "bp-VideoFullscreenButton-position",
41863
+ style: positionStyle
41864
+ }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
41865
+ content: title
41866
+ }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
41867
+ "aria-label": title,
41868
+ "data-resin-target": "videoFullscreen",
41869
+ "data-target-id": "VideoFullscreenButton-toggle",
41870
+ icon: isFullscreen ? Medium_.ArrowsMinimize : Medium_.ArrowsMaximize,
41871
+ onClick: handleClick,
41872
+ onKeyDown: utils/* stopActivationKeyPropagation */.My,
41873
+ size: "large",
41874
+ variant: "on-dark"
41875
+ })));
41876
+ }
41669
41877
  return /*#__PURE__*/external_react_["default"].createElement("button", {
41670
41878
  ref: ref,
41671
41879
  className: "bp-VideoFullscreenButton",
41672
41880
  "data-resin-target": "videoFullscreen",
41673
41881
  onClick: handleClick,
41674
- style: position ? {
41675
- top: position.top,
41676
- right: position.right
41677
- } : undefined,
41882
+ style: positionStyle,
41678
41883
  title: title,
41679
41884
  type: "button"
41680
41885
  }, isFullscreen ? /*#__PURE__*/external_react_["default"].createElement(icons_IconArrowsMinimizeMedium24, null) : /*#__PURE__*/external_react_["default"].createElement(icons_IconArrowsMaximizeMedium24, null));
41681
41886
  }
41682
- // EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconPlay24.tsx
41683
- var IconPlay24 = __webpack_require__(4684);
41684
- // EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconPause24.tsx
41685
- var IconPause24 = __webpack_require__(7502);
41686
- // EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconArrowCurveForward24.tsx
41687
- var IconArrowCurveForward24 = __webpack_require__(4419);
41688
- // EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconArrowCurveBack24.tsx
41689
- var IconArrowCurveBack24 = __webpack_require__(5827);
41690
41887
  ;// ./src/lib/viewers/media/VideoControlsV2.scss
41691
41888
  // extracted by mini-css-extract-plugin
41692
41889
 
@@ -41705,9 +41902,6 @@ var IconArrowCurveBack24 = __webpack_require__(5827);
41705
41902
 
41706
41903
 
41707
41904
 
41708
-
41709
-
41710
-
41711
41905
  function VideoControlsV2({
41712
41906
  annotationColor,
41713
41907
  annotationMode,
@@ -41756,19 +41950,10 @@ function VideoControlsV2({
41756
41950
  rate,
41757
41951
  subtitle,
41758
41952
  subtitles = [],
41953
+ isBlueprintEnabled = false,
41759
41954
  videoAnnotationsEnabled = false,
41760
41955
  volume
41761
41956
  }) {
41762
- const PlayPauseIcon = isPlaying ? IconPause24/* default */.A : IconPlay24/* default */.A;
41763
- const playPauseTitle = isPlaying ? "Pause" : "Play";
41764
- const skipForwardTitle = "Skip forward";
41765
- const skipBackwardTitle = "Skip backward";
41766
- const moveForward = () => {
41767
- movePlayback(true, constants/* MEDIA_PLAYBACK_SKIP_DURATION */.uN);
41768
- };
41769
- const moveBackward = () => {
41770
- movePlayback(false, constants/* MEDIA_PLAYBACK_SKIP_DURATION */.uN);
41771
- };
41772
41957
  return /*#__PURE__*/external_react_["default"].createElement(ExperiencesProvider, {
41773
41958
  experiences: experiences
41774
41959
  }, /*#__PURE__*/external_react_["default"].createElement("div", {
@@ -41776,7 +41961,8 @@ function VideoControlsV2({
41776
41961
  "data-testid": "media-controls-wrapper-v2"
41777
41962
  }, /*#__PURE__*/external_react_["default"].createElement(VideoFullscreenButton, {
41778
41963
  mediaEl: mediaEl,
41779
- onFullscreenToggle: onFullscreenToggle
41964
+ onFullscreenToggle: onFullscreenToggle,
41965
+ isBlueprintEnabled: isBlueprintEnabled
41780
41966
  }), /*#__PURE__*/external_react_["default"].createElement(TimeControlsV2, {
41781
41967
  aspectRatio: aspectRatio,
41782
41968
  bufferedRange: bufferedRange,
@@ -41792,24 +41978,24 @@ function VideoControlsV2({
41792
41978
  className: "bp-VideoControlsV2-bar"
41793
41979
  }, /*#__PURE__*/external_react_["default"].createElement("div", {
41794
41980
  className: "bp-VideoControlsV2-group bp-VideoControlsV2-group--left"
41795
- }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
41981
+ }, /*#__PURE__*/external_react_["default"].createElement(PlayPauseButton/* default */.A, {
41796
41982
  className: "bp-VideoControlsV2-playPause",
41797
- "data-resin-target": "playPause",
41798
- onClick: () => onPlayPause(!isPlaying),
41799
- title: playPauseTitle
41800
- }, /*#__PURE__*/external_react_["default"].createElement(PlayPauseIcon, null)), !isNarrowVideo && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement("div", {
41983
+ isPlaying: isPlaying,
41984
+ onPlayPause: onPlayPause,
41985
+ isBlueprintEnabled: isBlueprintEnabled
41986
+ }), !isNarrowVideo && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement("div", {
41801
41987
  className: "bp-VideoControlsV2-divider"
41802
- }), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
41988
+ }), /*#__PURE__*/external_react_["default"].createElement(SkipButton/* default */.A, {
41803
41989
  className: "bp-VideoControlsV2-skipBtn",
41804
- "data-resin-target": "skipBackward",
41805
- onClick: moveBackward,
41806
- title: skipBackwardTitle
41807
- }, /*#__PURE__*/external_react_["default"].createElement(IconArrowCurveBack24/* default */.A, null)), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
41990
+ direction: "backward",
41991
+ movePlayback: movePlayback,
41992
+ isBlueprintEnabled: isBlueprintEnabled
41993
+ }), /*#__PURE__*/external_react_["default"].createElement(SkipButton/* default */.A, {
41808
41994
  className: "bp-VideoControlsV2-skipBtn",
41809
- "data-resin-target": "skipForward",
41810
- onClick: moveForward,
41811
- title: skipForwardTitle
41812
- }, /*#__PURE__*/external_react_["default"].createElement(IconArrowCurveForward24/* default */.A, null)), /*#__PURE__*/external_react_["default"].createElement("div", {
41995
+ direction: "forward",
41996
+ movePlayback: movePlayback,
41997
+ isBlueprintEnabled: isBlueprintEnabled
41998
+ }), /*#__PURE__*/external_react_["default"].createElement("div", {
41813
41999
  className: "bp-VideoControlsV2-divider"
41814
42000
  })), /*#__PURE__*/external_react_["default"].createElement(TimestampControl/* default */.Ay, {
41815
42001
  canChangeTimeFormat: canChangeTimeFormat,
@@ -41823,6 +42009,7 @@ function VideoControlsV2({
41823
42009
  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
41824
42010
  onMuteChange: onMuteChange,
41825
42011
  onVolumeChange: onVolumeChange,
42012
+ isBlueprintEnabled: isBlueprintEnabled,
41826
42013
  volume: volume
41827
42014
  }), /*#__PURE__*/external_react_["default"].createElement(SubtitlesToggle, {
41828
42015
  isAutoGeneratedSubtitles: isAutoGeneratedSubtitles,
@@ -42004,7 +42191,8 @@ class MP4Viewer extends media_VideoBaseViewer {
42004
42191
  if (this.isVideoPlayerV2) {
42005
42192
  this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControlsV2, MP4Viewer_extends({}, sharedProps, {
42006
42193
  onPlayNextChange: this.setPlayNext,
42007
- playNext: this.isPlayNextEnabled()
42194
+ playNext: this.isPlayNextEnabled(),
42195
+ isBlueprintEnabled: this.isBlueprintMediaControlsEnabled()
42008
42196
  })));
42009
42197
  return;
42010
42198
  }
@@ -43503,7 +43691,8 @@ class DashViewer extends media_VideoBaseViewer {
43503
43691
  onCommentMarkerClick: this.handleCommentMarkerClick
43504
43692
  }, sharedProps, {
43505
43693
  onPlayNextChange: this.setPlayNext,
43506
- playNext: this.isPlayNextEnabled()
43694
+ playNext: this.isPlayNextEnabled(),
43695
+ isBlueprintEnabled: this.isBlueprintMediaControlsEnabled()
43507
43696
  })));
43508
43697
  return;
43509
43698
  }
@@ -44442,7 +44631,7 @@ function ControlsBarV2(_ref) {
44442
44631
  if (!children) {
44443
44632
  return null;
44444
44633
  }
44445
- return /*#__PURE__*/external_react_["default"].createElement(__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9_Toolbar__.Root, ControlsBarV2_extends({
44634
+ return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Root, ControlsBarV2_extends({
44446
44635
  "data-testid": "bp-ControlsBar"
44447
44636
  }, rest), children);
44448
44637
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "box-content-preview",
3
- "version": "3.112.0",
3
+ "version": "3.113.0",
4
4
  "description": "Box Content Preview UI Element",
5
5
  "author": "Box (https://www.box.com/)",
6
6
  "license": "SEE LICENSE IN LICENSE",