box-content-preview 3.124.0 → 3.126.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.
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.124.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
5
+ [![version](https://img.shields.io/badge/version-v3.126.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.124.0
25
+ - Version: v3.126.0
26
26
  - Locale: en-US
27
27
 
28
- https://cdn01.boxcdn.net/platform/preview/3.124.0/en-US/preview.js
29
- https://cdn01.boxcdn.net/platform/preview/3.124.0/en-US/preview.css
28
+ https://cdn01.boxcdn.net/platform/preview/3.126.0/en-US/preview.js
29
+ https://cdn01.boxcdn.net/platform/preview/3.126.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.124.0/en-US/preview.js"></script>
55
+ <script src="https://cdn01.boxcdn.net/platform/preview/3.126.0/en-US/preview.js"></script>
56
56
  <link
57
57
  rel="stylesheet"
58
- href="https://cdn01.boxcdn.net/platform/preview/3.124.0/en-US/preview.css"
58
+ href="https://cdn01.boxcdn.net/platform/preview/3.126.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.124.0`
79
+ - Check out a specific version with `git checkout v3.126.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`
@@ -40,16 +40,19 @@
40
40
  .bp-ZoomControls{display:flex;align-items:center;padding:0 6px;border-radius:46px}.bp-ZoomControls-button{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);margin-top:-6px;margin-bottom:-6px}.bp-ZoomControls-button:focus:not(:disabled),.bp-ZoomControls-button:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.bp-ZoomControls-button:focus:not(:disabled) svg,.bp-ZoomControls-button:hover:not(:disabled) svg,.bp-ZoomControls-button.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-ZoomControls-button.bp-is-active,.bp-ZoomControls-button:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-ZoomControls-button.bp-is-active:focus:not(:disabled),.bp-ZoomControls-button.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-ZoomControls-button:focus:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-ZoomControls-button:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-ZoomControls-button:focus:not(:focus-visible){box-shadow:none}.bp-ZoomControls-button:disabled{pointer-events:none;cursor:default;opacity:.2}.bp-ZoomControls-button svg{width:32px;height:32px;padding:5px}.bp-ZoomControls-button svg{width:24px;height:24px}.bp-ZoomControls-current{-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;min-width:44px;padding-right:3px;padding-left:3px;font-size:13px;line-height:1;color:#fff;white-space:nowrap;opacity:.9}
41
41
  .bp-AnnotationsControls-exitBtn{display:none}
42
42
  .bp-ToggleTooltipV2{display:flex}
43
+ .bp-ControlsBarV2--large[data-color-scheme]{--toolbar-root-padding: calc(var(--bp-space-020) - var(--bp-border-01));--toolbar-root-border-radius: var(--bp-radius-12)}.bp-ControlsBarV2--large[data-color-scheme] [role=separator]{margin-inline:var(--bp-space-010)}
43
44
  .bp-AnnotationsPaletteV2{position:absolute;right:0;bottom:100%;width:max-content;padding-bottom:var(--bp-space-020)}
44
45
  .bp-ColorPickerControlV2{display:flex}.bp-ColorPickerControlV2 .bp-ColorPickerControlV2-swatch{--select-menu-grid-option-circle-background-color: transparent;--select-menu-grid-option-circle-background-color-hover: var(--bp-surface-cta-surface-icon-on-dark-hover);--select-menu-grid-option-circle-border: var(--bp-border-01) solid transparent;--select-menu-grid-option-circle-box-shadow-focus-active: 0 0 0 var(--bp-border-01) var(--bp-gray-100), 0 0 0 var(--bp-border-03) var(--bp-border-input-border-focus)}
45
46
  .bp-ControlsOverflowMenuV2{--blueprint-web-dropdown-content-min-width: 184px}
46
47
  .bp-ResponsiveControlsBarV2-item{display:flex;flex:none;gap:inherit;align-items:center}
47
48
  .bp-ControlsMenuItemV2.bp-ControlsMenuItemV2{gap:var(--bp-space-020)}.bp-ControlsMenuItemV2.bp-ControlsMenuItemV2>:nth-child(3){margin-inline-start:var(--bp-space-020)}
49
+ .bp-ControlsPillV2{--controls-pill-text-spacing: calc(var(--bp-space-010) + var(--bp-space-005));display:flex;flex:none;align-items:center;padding:var(--bp-space-010);border-radius:var(--bp-radius-10);background:var(--bp-white-opacity-04)}.bp-ControlsPillV2 .bp-ControlsPillV2-button,.bp-ControlsPillV2 .bp-ControlsPillV2-label{--toolbar-item-min-height: var(--bp-size-060);--toolbar-item-border-radius: var(--bp-radius-06)}.bp-ControlsPillV2 .bp-ControlsPillV2-button{--toolbar-item-min-width: var(--bp-size-060);--toolbar-icon-width: var(--bp-size-040);--toolbar-icon-height: var(--bp-size-040)}.bp-ControlsPillV2 .bp-ControlsPillV2-button svg{width:100%;height:100%}.bp-ControlsPillV2 .bp-ControlsPillV2-label{--toolbar-item-min-width: 0;--toolbar-item-padding-inline: calc(var(--controls-pill-text-spacing) - var(--bp-border-01));--toolbar-item-text-indent: 0}.bp-ControlsPillV2 .bp-ControlsPillV2-text{--text-color-on-dark-default: var(--bp-icon-cta-icon-on-dark);padding-inline:var(--controls-pill-text-spacing);white-space:nowrap}.bp-ControlsPillV2 .bp-ControlsPillV2-label .bp-ControlsPillV2-text{padding-inline:0;color:inherit}
50
+ .bp-TabularDigit{display:inline-block;width:1ch;text-align:center}.bp-TabularDigits-text{-webkit-user-select:none;user-select:none;position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;clip-path:inset(50%)}
48
51
  .bp-ZoomMenuItemsV2-scale{padding-block:calc(var(--dropdown-menu-item-padding) - var(--dropdown-menu-item-border-width));padding-inline:calc(var(--dropdown-menu-item-padding) - var(--dropdown-menu-item-border-width));text-align:start}
49
52
  .bp-image{position:absolute;inset:0;overflow:auto;width:100%;height:100%;margin:0;padding:0;border:0 none;text-align:center;white-space:nowrap}.bp-image::before{content:"";display:inline-block;height:100%;vertical-align:middle}.bp-image img{position:absolute;vertical-align:middle}.bp-image .pannable,.bp-image .panning{cursor:move}.bp-image .zoomable{cursor:pointer;cursor:zoom-in}.bp-images-wrapper{cursor:pointer;cursor:zoom-in;margin:0 auto;padding:0;border:0 none}.bp-images img{display:block;width:100%}.bp-content.bp-annotations-create--region.bp-annotations-ftux-image-cursor-seen .ba-PopupCursor{display:none}.bp-prefetched-image{position:absolute;width:1px;height:1px;visibility:hidden}
50
53
  .bp-PageControlsForm input[type=number].bp-PageControlsForm-input{width:44px;height:32px;padding:6px;border:1px solid var(--bp-gray-100);border-radius:0;font-size:13px;-webkit-font-smoothing:antialiased;color:var(--bp-gray-100);text-align:center;-moz-appearance:textfield;transition:border-color linear .15s}.bp-PageControlsForm input[type=number].bp-PageControlsForm-input::-webkit-outer-spin-button,.bp-PageControlsForm input[type=number].bp-PageControlsForm-input::-webkit-inner-spin-button{-webkit-appearance:none}.bp-PageControlsForm input[type=number].bp-PageControlsForm-input:focus{border:1px solid var(--bp-box-blue-100);outline:0;box-shadow:none}.bp-PageControlsForm-button{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);margin-top:-6px;margin-bottom:-6px}.bp-PageControlsForm-button:focus:not(:disabled),.bp-PageControlsForm-button:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.bp-PageControlsForm-button:focus:not(:disabled) svg,.bp-PageControlsForm-button:hover:not(:disabled) svg,.bp-PageControlsForm-button.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-PageControlsForm-button.bp-is-active,.bp-PageControlsForm-button:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-PageControlsForm-button.bp-is-active:focus:not(:disabled),.bp-PageControlsForm-button.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-PageControlsForm-button:focus:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-PageControlsForm-button:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-PageControlsForm-button:focus:not(:focus-visible){box-shadow:none}.bp-PageControlsForm-button:disabled{pointer-events:none;cursor:default;opacity:.2}.bp-PageControlsForm-button svg{width:32px;height:32px;padding:5px}.bp-PageControlsForm-button-label{-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;min-width:44px;padding-right:3px;padding-left:3px;font-size:13px;line-height:1;color:#fff;white-space:nowrap;opacity:.9}@media(max-width: 767px){.bp-PageControlsForm-input,.bp-PageControlsForm-button-label{min-width:56px}}
51
54
  .bp-PageControls{display:flex;align-items:center;padding:0 6px}.bp-PageControls svg{width:24px;height:24px}.bp-PageControls-button{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);margin-top:-6px;margin-bottom:-6px}.bp-PageControls-button:focus:not(:disabled),.bp-PageControls-button:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.bp-PageControls-button:focus:not(:disabled) svg,.bp-PageControls-button:hover:not(:disabled) svg,.bp-PageControls-button.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-PageControls-button.bp-is-active,.bp-PageControls-button:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-PageControls-button.bp-is-active:focus:not(:disabled),.bp-PageControls-button.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-PageControls-button:focus:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-PageControls-button:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-PageControls-button:focus:not(:focus-visible){box-shadow:none}.bp-PageControls-button:disabled{pointer-events:none;cursor:default;opacity:.2}.bp-PageControls-button svg{width:32px;height:32px;padding:5px}.bp-PageControls-button svg{width:24px;height:24px}@media(max-width: 767px){.bp-PageControls-button{display:none}}
52
- .bp-PageControlsFormV2{display:flex;flex:none;align-items:center}.bp-PageControlsFormV2-input{display:flex;width:var(--bp-size-140)}.bp-PageControlsFormV2-button-label{white-space:nowrap}
55
+ .bp-PageControlsFormV2{display:flex;flex:none;align-items:center}.bp-PageControlsFormV2-input{display:flex;flex:none;width:var(--bp-size-140)}.bp-PageControlsFormV2 .bp-PageControlsFormV2-input>*{--toolbar-input-height: 100%;--toolbar-input-padding-block: 0;--toolbar-input-padding-inline: var(--bp-space-010)}.bp-PageControlsFormV2 .bp-PageControlsFormV2-input input[type=text]{color:var(--toolbar-input-color);text-align:center;background-color:var(--toolbar-input-background)}.bp-PageControlsFormV2-button-label{white-space:nowrap}
53
56
  .bp-images-wrapper{cursor:default;position:absolute;inset:0;overflow:auto;width:100%;height:100%;margin:0 auto;padding:0;border:0 none;text-align:center;white-space:nowrap}.bp-images.pannable{cursor:move;cursor:grab}.bp-images.panning{cursor:move;cursor:grabbing}.bp-images.zoomable{cursor:pointer;cursor:zoom-in}.bp-images{margin:0 auto;padding:0;border:0 none}.bp-images img{display:block;width:100%;margin-bottom:10px}
54
57
  @media(max-width: 510px){.bp-box3d .bp-pullup{right:0}}@media(max-height: 550px){.bp-box3d .bp-pullup{overflow:scroll;height:250px}}
55
58
  .bp-is-mobile .bp-box3d .bp-controls{z-index:1;opacity:1 !important}.bp-box3d{-webkit-user-select:none;user-select:none;position:absolute;top:0;left:0;display:flex;width:100%;height:100%;margin:0;padding:0;border:0 none;-webkit-touch-callout:none}.bp-box3d.vr-enabled .bp-ControlsRoot,.bp-box3d.vr-enabled .bp-controls{opacity:0 !important}.bp-box3d canvas{cursor:move;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.bp-box3d.bp-invisible{visibility:hidden}.bp-box3d canvas:active{cursor:grabbing}.bp-box3d .bp-overlay-panel{position:absolute;z-index:2;margin:auto;border:1px solid #caccd0;font-size:13px;font-weight:normal;color:#484848;background:#fff;outline:0}.bp-box3d .bp-overlay-panel span{position:relative;top:5px;display:inline-block;opacity:.7}.bp-box3d .bp-toggle-overlay .bp-menu{min-width:196px}.bp-box3d li,.bp-box3d ul{margin:0;padding:0;list-style:none}.bp-box3d input[type=checkbox]{opacity:1}
@@ -71,7 +74,6 @@
71
74
  .bp-SettingsToggleV2{position:relative;display:inline-flex}.bp-SettingsToggleV2-badge{pointer-events:none;position:absolute;top:50%;left:50%;transform:translateY(-100%);display:flex;align-items:center}
72
75
  .bp-MediaSettingsV2{min-width:240px}.bp-MediaSettingsV2-value{display:flex;gap:4px;align-items:center}
73
76
  .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 color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-PlayPauseToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),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}
74
- .bp-TabularDigit{display:inline-block;width:1ch;text-align:center}
75
77
  .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)}
76
78
  .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;font-variant-numeric:tabular-nums;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 color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),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:var(--bp-gray-05)}.bp-TimestampControl-check{flex:none;fill:#000}
77
79
  .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 color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-VolumeControls-toggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),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}
@@ -91,6 +93,7 @@
91
93
  .bp-MP3Controls{display:flex;flex-direction:column;width:360px;background-color:#000}.bp-MP3Controls-bar{display:flex;justify-content:space-between;padding:0 10px 5px}.bp-MP3Controls-group{display:flex;align-items:center}.bp-MP3Controls-settings{position:relative}.bp-MP3Controls-settings .bp-SettingsFlyout{right:15px}.bp-MP3Controls-settings .bp-SettingsToggle-button{width:36px;height:40px}
92
94
  .bp-MP3ControlsRoot{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
93
95
  .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-video-preload-wrapper .bp-video-preload-play-overlay--blueprint{pointer-events:auto;width:auto;height:auto;background:none}.bp-video-preload-wrapper .bp-video-preload-play-overlay--blueprint svg{fill:revert}.bp-video-preload-wrapper .bp-video-preload-play-overlay .bp-video-preload-play-button{--icon-button-radius: 50%;--icon-button-size-large: 80px;--icon-button-surface-on-dark: rgb(0 0 0 / 50%)}.bp-is-fullscreen .bp-navigate,.bp-is-gallery-open .bp-navigate{display:none}.bp-navigate{pointer-events:all;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);overflow:hidden;display:block;width:50px;height:64px;margin:0;border:0 none;text-decoration:none;white-space:nowrap;opacity:0;background-repeat:no-repeat;transition:opacity .5s ease}.bp-navigate:hover,.bp-navigate:focus{opacity:1}.bp-navigate:focus{height:64px;outline:1px solid #999ea4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.1)}.bp-navigate:active{outline:none;box-shadow:none}.bp-is-navigation-visible .bp-navigate{opacity:.8}.bp-is-navigation-visible .bp-navigate:hover{opacity:1}.bp-navigate-left{left:20px;border-radius:0 2px 2px 0}.bp-navigate-right{right:20px;border-radius:2px 0 0 2px}.bp-has-navigation .bp-media-mp3 .bp-media-container{width:calc(100% - 100px)}.bp-media-mp3 .bp-media-container{overflow:visible;width:100%;max-width:360px;height:60px;outline:0 none}.bp-media-mp3 .bp-media-fullscreen-icon{display:none}.bp-media-mp3 .bp-media-gear-icon{position:absolute;right:10px}.bp-media-mp3.bp-media--v2 .bp-media-container,.bp-media-mp3.bp-media--v2 .bp-media-container--v2{width:100%;max-width:none;height:100%;min-height:0;padding:0}.bp-media-mp3.bp-media--v2 audio{display:none}.bp-media-mp3 .bp-media-controls-wrapper{visibility:visible;opacity:1;background:#000}.bp-media-mp3 .bp-media-settings-item-quality,.bp-media-mp3 .bp-image-switch-360-icon{display:none}
96
+ .bp-VideoPlaySeekOverlay{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;gap:28px;align-items:center;justify-content:center}.bp-VideoPlaySeekOverlay button{--icon-button-radius: 50%;--icon-button-surface-on-dark: rgb(0 0 0 / 50%)}.bp-VideoPlaySeekOverlay .bp-VideoPlaySeekOverlay-play{--icon-button-radius: 50%;--icon-button-size-large: 80px;--icon-button-surface-on-dark: rgb(0 0 0 / 50%)}
94
97
  .bp-HDBadge{padding:2px 2px 2px 3px;border-radius:3px;font-size:8px;font-weight:bold;color:#fff;letter-spacing:.1em;background-color:var(--bp-box-blue-100)}
95
98
  .bp-SubtitlesToggle{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-SubtitlesToggle:focus:not(:disabled),.bp-SubtitlesToggle:hover:not(:disabled){opacity:1;background-color:rgba(255,255,255,.08)}.bp-SubtitlesToggle:focus:not(:disabled) svg,.bp-SubtitlesToggle:hover:not(:disabled) svg,.bp-SubtitlesToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-SubtitlesToggle.bp-is-active,.bp-SubtitlesToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-SubtitlesToggle.bp-is-active:focus:not(:disabled),.bp-SubtitlesToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-SubtitlesToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-SubtitlesToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bp-gray-20) 50%, transparent),0 1px 2px rgba(0,0,0,.1)}.bp-SubtitlesToggle:focus:not(:focus-visible){box-shadow:none}.bp-SubtitlesToggle:disabled{pointer-events:none;cursor:default;opacity:.2}.bp-SubtitlesToggle svg{width:32px;height:32px;padding:5px}.bp-SubtitlesToggle[aria-pressed=true] .bp-SubtitlesToggle-text{color:#fff;background-color:#0061d5}.bp-SubtitlesToggle-text{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;font-size:12px;font-weight:bold;color:#fff;letter-spacing:.1em;background-color:rgba(0,0,0,.3)}.bp-SubtitlesToggleV2[aria-pressed]{--icon-toggle-button-off-color: var(--bp-text-text-on-dark);--icon-toggle-button-off-background: var(--bp-surface-cta-surface-icon-on-dark);--icon-toggle-button-off-background-hover: var(--bp-surface-cta-surface-icon-on-dark-hover);--icon-toggle-button-off-background-pressed: var(--bp-surface-cta-surface-icon-on-dark-pressed);--icon-toggle-button-off-icon-color: var(--bp-icon-cta-icon-on-dark);--icon-toggle-button-on-background: var(--bp-light-blue-opacity-12);--icon-toggle-button-on-background-hover: var(--bp-light-blue-opacity-16);--icon-toggle-button-on-background-pressed: var(--bp-light-blue-opacity-20);--icon-toggle-button-on-border: var(--bp-border-01) solid var(--bp-light-blue-opacity-20);--icon-toggle-button-on-border-focus: var(--bp-border-01) solid var(--bp-light-blue-opacity-30);--icon-toggle-button-on-icon-color: var(--bp-light-blue-100);--icon-toggle-button-focus-outline: var(--bp-border-02) solid var(--bp-outline-focus-on-dark)}
96
99
  .bp-VideoControls{display:flex;flex-direction:column;width:100%;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);padding:40px 20px 8px}.bp-VideoControls .bp-FullscreenToggle{width:36px;height:40px}.bp-VideoControls-bar{display:flex;padding:0 10px 5px;display:grid;align-items:center}.bp-VideoControls-bar.bp-VideoControls-bar--two-groups{justify-content:flex-end}.bp-VideoControls-bar.bp-VideoControls-bar--two-groups .bp-VideoControls-group--play-pause{position:absolute;left:50%;transform:translateX(-50%)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups{grid-template-columns:repeat(3, 1fr)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups.bp-VideoControls-bar--narrow-video{grid-template-columns:repeat(2, 1fr)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--annotations{justify-self:flex-start}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--play-pause{justify-self:center}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--media-controls{justify-self:flex-end}.bp-VideoControls-group{display:flex;align-items:center}.bp-VideoControls-settings{position:relative}.bp-VideoControls-settings .bp-SettingsFlyout{right:15px}.bp-VideoControls-settings .bp-SettingsToggle-button{width:36px;height:40px}
package/dist/lib/index.js CHANGED
@@ -423,7 +423,7 @@ __webpack_require__.d(__webpack_exports__, {
423
423
  k7: () => (/* binding */ renderTabularDigits)
424
424
  });
425
425
 
426
- // UNUSED EXPORTS: TABULAR_DIGIT_CLASS
426
+ // UNUSED EXPORTS: TABULAR_DIGITS_BOXES_CLASS, TABULAR_DIGITS_TEXT_CLASS, TABULAR_DIGIT_CLASS
427
427
 
428
428
  // EXTERNAL MODULE: external "react"
429
429
  var external_react_ = __webpack_require__(1649);
@@ -438,20 +438,51 @@ var external_react_ = __webpack_require__(1649);
438
438
  // has no effect. Wrapping each digit in a 1ch box keeps changing numbers, and whatever follows them,
439
439
  // from shifting as they update.
440
440
  const TABULAR_DIGIT_CLASS = 'bp-TabularDigit';
441
+ const TABULAR_DIGITS_BOXES_CLASS = 'bp-TabularDigits-boxes';
442
+ const TABULAR_DIGITS_TEXT_CLASS = 'bp-TabularDigits-text';
441
443
  const isDigit = char => char >= '0' && char <= '9';
442
444
  const isDigitNode = node => node.nodeType === Node.ELEMENT_NODE;
443
445
 
446
+ // Screen readers would read the boxed digits one by one, so the boxes are hidden from them and a visually
447
+ // hidden copy gives them the whole text
448
+ const getParts = el => {
449
+ const boxesEl = el.firstElementChild;
450
+ const textEl = el.lastElementChild;
451
+ if (el.childNodes.length === 2 && boxesEl?.classList.contains(TABULAR_DIGITS_BOXES_CLASS) && textEl?.classList.contains(TABULAR_DIGITS_TEXT_CLASS)) {
452
+ return {
453
+ boxesEl,
454
+ textEl
455
+ };
456
+ }
457
+ const newBoxesEl = document.createElement('span');
458
+ newBoxesEl.className = TABULAR_DIGITS_BOXES_CLASS;
459
+ newBoxesEl.setAttribute('aria-hidden', 'true');
460
+ const newTextEl = document.createElement('span');
461
+ newTextEl.className = TABULAR_DIGITS_TEXT_CLASS;
462
+ el.replaceChildren(newBoxesEl, newTextEl);
463
+ return {
464
+ boxesEl: newBoxesEl,
465
+ textEl: newTextEl
466
+ };
467
+ };
468
+
444
469
  /**
445
- * Writes `text` into `el` with each digit in a fixed-width box. For labels updated outside React,
446
- * e.g. on animation frames. Unchanged characters are left in place, so a ticking clock only touches
447
- * the digits that changed.
470
+ * Writes `text` into `el` with each digit in a fixed-width box, plus a visually hidden copy of `text` for
471
+ * screen readers. For labels updated outside React, e.g. on animation frames. This replaces the children
472
+ * of `el`, so `el` must not hold other content. Unchanged characters are left in place, so a ticking clock
473
+ * only touches the digits that changed.
448
474
  */
449
475
  function renderTabularDigits(el, text) {
450
- if (el.textContent === text) {
476
+ const {
477
+ boxesEl,
478
+ textEl
479
+ } = getParts(el);
480
+ if (textEl.textContent === text) {
451
481
  return;
452
482
  }
483
+ textEl.textContent = text;
453
484
  const chars = Array.from(text);
454
- const nodes = el.childNodes;
485
+ const nodes = boxesEl.childNodes;
455
486
  const canPatch = nodes.length === chars.length && chars.every((char, index) => isDigit(char) === isDigitNode(nodes[index]));
456
487
  if (canPatch) {
457
488
  chars.forEach((char, index) => {
@@ -472,7 +503,7 @@ function renderTabularDigits(el, text) {
472
503
  fragment.appendChild(document.createTextNode(char));
473
504
  }
474
505
  });
475
- el.replaceChildren(fragment);
506
+ boxesEl.replaceChildren(fragment);
476
507
  }
477
508
  /**
478
509
  * Renders `children` with each digit in a fixed-width box. Place it inside the element that
@@ -1297,7 +1328,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
1297
1328
  const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
1298
1329
  const CLIENT_NAME_KEY = 'box_client_name';
1299
1330
  const CLIENT_VERSION_KEY = 'box_client_version';
1300
- const CLIENT_VERSION = "3.124.0"; // eslint-disable-line no-undef
1331
+ const CLIENT_VERSION = "3.126.0"; // eslint-disable-line no-undef
1301
1332
  const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
1302
1333
  const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
1303
1334
  const PROMISE_MAP = {};
@@ -37273,7 +37304,7 @@ var isNpmBuild = __webpack_require__(8080);
37273
37304
  ;// ./src/lib/Logger.js
37274
37305
  /* eslint-disable no-undef */
37275
37306
  const CLIENT_NAME = "box-content-preview";
37276
- const CLIENT_VERSION = "3.124.0";
37307
+ const CLIENT_VERSION = "3.126.0";
37277
37308
  /* eslint-enable no-undef */
37278
37309
 
37279
37310
  class Logger {
@@ -39919,6 +39950,7 @@ var BlueprintProviders = __webpack_require__(2758);
39919
39950
 
39920
39951
 
39921
39952
  /* harmony default export */ const ControlsLayerContext = (/*#__PURE__*/external_react_["default"].createContext({
39953
+ setIsEditing: (noop_default()),
39922
39954
  setIsForced: (noop_default())
39923
39955
  }));
39924
39956
  ;// ./src/lib/viewers/controls/controls-layer/ControlsLayer.scss
@@ -39941,7 +39973,9 @@ function ControlsLayer({
39941
39973
  const [isShown, setIsShown] = external_react_["default"].useState(false);
39942
39974
  const hasFocusRef = external_react_["default"].useRef(false);
39943
39975
  const hasCursorRef = external_react_["default"].useRef(false);
39976
+ const isEditingRef = external_react_["default"].useRef(false);
39944
39977
  const hideTimeoutRef = external_react_["default"].useRef();
39978
+ const layerElRef = external_react_["default"].useRef(null);
39945
39979
 
39946
39980
  // Visibility helpers
39947
39981
  const helpersRef = external_react_["default"].useRef({
@@ -39985,7 +40019,7 @@ function ControlsLayer({
39985
40019
  const handleMouseLeave = event => {
39986
40020
  hasCursorRef.current = false;
39987
40021
  const layerEl = event.currentTarget;
39988
- if (document.activeElement && layerEl.contains(document.activeElement)) {
40022
+ if (!isEditingRef.current && document.activeElement && layerEl.contains(document.activeElement)) {
39989
40023
  document.activeElement.blur();
39990
40024
  }
39991
40025
  helpersRef.current.hide();
@@ -40007,12 +40041,26 @@ function ControlsLayer({
40007
40041
  helpersRef.current.reset();
40008
40042
  setIsForced(value);
40009
40043
  }, []);
40044
+ const setIsEditing = external_react_["default"].useCallback(value => {
40045
+ const wasEditing = isEditingRef.current;
40046
+ isEditingRef.current = value;
40047
+
40048
+ // Ending an edit can remove the focused field without a blur, so check where focus is now and hide
40049
+ // once neither focus nor the cursor is on the layer. The layer is already gone if the edit ended
40050
+ // because the controls unmounted.
40051
+ if (wasEditing && !value && layerElRef.current) {
40052
+ hasFocusRef.current = !!layerElRef.current?.contains(document.activeElement);
40053
+ helpersRef.current.hide();
40054
+ }
40055
+ }, []);
40010
40056
  const contextValue = external_react_["default"].useMemo(() => ({
40057
+ setIsEditing,
40011
40058
  setIsForced: setIsForcedWithReset
40012
- }), [setIsForcedWithReset]);
40059
+ }), [setIsEditing, setIsForcedWithReset]);
40013
40060
  return /*#__PURE__*/external_react_["default"].createElement(ControlsLayerContext.Provider, {
40014
40061
  value: contextValue
40015
40062
  }, /*#__PURE__*/external_react_["default"].createElement("div", {
40063
+ ref: layerElRef,
40016
40064
  className: `bp-ControlsLayer ${isShown || isForced ? SHOW_CLASSNAME : ''}`,
40017
40065
  "data-testid": "bp-ControlsLayer",
40018
40066
  onBlur: handleFocusOut,
@@ -41614,16 +41662,24 @@ const ANNOTATION_MODE_ICONS = {
41614
41662
  [AnnotationMode.REGION]: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_SquarePlus_c11758f1_default__
41615
41663
  };
41616
41664
  /* harmony default export */ const annotationModeIcons = (ANNOTATION_MODE_ICONS);
41665
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
41666
+ var utils = __webpack_require__(5346);
41667
+ ;// ./src/lib/viewers/controls/controls-bar/ControlsBarV2.scss
41668
+ // extracted by mini-css-extract-plugin
41669
+
41617
41670
  ;// ./src/lib/viewers/controls/controls-bar/ControlsBarV2.tsx
41618
- const ControlsBarV2_excluded = ["children"];
41671
+ const ControlsBarV2_excluded = ["children", "size"];
41619
41672
  function ControlsBarV2_extends() { return ControlsBarV2_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; }, ControlsBarV2_extends.apply(null, arguments); }
41620
41673
  function ControlsBarV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = ControlsBarV2_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
41621
41674
  function ControlsBarV2_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
41622
41675
 
41623
41676
 
41677
+
41678
+
41624
41679
  function ControlsBarV2(_ref, ref) {
41625
41680
  let {
41626
- children
41681
+ children,
41682
+ size = 'large'
41627
41683
  } = _ref,
41628
41684
  rest = ControlsBarV2_objectWithoutProperties(_ref, ControlsBarV2_excluded);
41629
41685
  if (!children) {
@@ -41631,9 +41687,12 @@ function ControlsBarV2(_ref, ref) {
41631
41687
  }
41632
41688
  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Root, ControlsBarV2_extends({
41633
41689
  ref: ref,
41690
+ className: `bp-ControlsBarV2 bp-ControlsBarV2--${size}`,
41634
41691
  colorScheme: "dark",
41635
41692
  "data-testid": "bp-ControlsBar"
41636
- }, rest), children);
41693
+ }, rest, {
41694
+ onKeyDown: utils/* stopToolbarKeyPropagation */.B9
41695
+ }), children);
41637
41696
  }
41638
41697
  /* harmony default export */ const controls_bar_ControlsBarV2 = (/*#__PURE__*/external_react_["default"].forwardRef(ControlsBarV2));
41639
41698
  ;// ./src/lib/viewers/controls/annotations/AnnotationsPaletteV2.scss
@@ -41656,7 +41715,9 @@ function AnnotationsPaletteV2({
41656
41715
  return /*#__PURE__*/external_react_["default"].createElement("div", {
41657
41716
  className: "bp-AnnotationsPaletteV2",
41658
41717
  "data-testid": "bp-AnnotationsPaletteV2"
41659
- }, /*#__PURE__*/external_react_["default"].createElement(controls_bar_ControlsBarV2, null, children));
41718
+ }, /*#__PURE__*/external_react_["default"].createElement(controls_bar_ControlsBarV2, {
41719
+ size: "small"
41720
+ }, children));
41660
41721
  }
41661
41722
  function Modes({
41662
41723
  annotationMode,
@@ -42257,6 +42318,24 @@ function RotateMenuItemV2({
42257
42318
 
42258
42319
  ;// external "@box/blueprint-web-assets/icons/Medium/Plus"
42259
42320
 
42321
+ ;// ./src/lib/viewers/controls/controls-bar/ControlsPillV2.scss
42322
+ // extracted by mini-css-extract-plugin
42323
+
42324
+ ;// ./src/lib/viewers/controls/controls-bar/ControlsPillV2.tsx
42325
+
42326
+
42327
+ // Groups the parts of one control, like page or zoom, on a shared background. Buttons inside take the
42328
+ // bp-ControlsPillV2-button class, and a text button takes bp-ControlsPillV2-label.
42329
+ function ControlsPillV2({
42330
+ children
42331
+ }) {
42332
+ return /*#__PURE__*/external_react_["default"].createElement("div", {
42333
+ className: "bp-ControlsPillV2",
42334
+ "data-testid": "bp-ControlsPill"
42335
+ }, children);
42336
+ }
42337
+ // EXTERNAL MODULE: ./src/lib/TabularDigits.tsx + 1 modules
42338
+ var TabularDigits = __webpack_require__(2459);
42260
42339
  ;// ./src/lib/viewers/controls/zoom/ZoomControlsV2.tsx
42261
42340
  /* provided dependency */ var ZoomControlsV2_ = __webpack_require__(441)["Tl"];
42262
42341
 
@@ -42265,6 +42344,8 @@ function RotateMenuItemV2({
42265
42344
 
42266
42345
 
42267
42346
 
42347
+
42348
+
42268
42349
  function getZoomState({
42269
42350
  maxScale = MAX_SCALE,
42270
42351
  minScale = MIN_SCALE,
@@ -42297,9 +42378,10 @@ function ZoomControlsV2({
42297
42378
  minScale,
42298
42379
  scale
42299
42380
  });
42300
- return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
42381
+ return /*#__PURE__*/external_react_["default"].createElement(ControlsPillV2, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
42301
42382
  content: ZoomControlsV2_('zoom_out')
42302
42383
  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
42384
+ className: "bp-ControlsPillV2-button",
42303
42385
  "aria-label": ZoomControlsV2_('zoom_out'),
42304
42386
  "data-resin-target": resinTargetZoomOut,
42305
42387
  "data-testid": "bp-ZoomControls-out",
@@ -42309,13 +42391,15 @@ function ZoomControlsV2({
42309
42391
  icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Minus_cc9df143_default__
42310
42392
  }))), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
42311
42393
  as: "span",
42394
+ className: "bp-ControlsPillV2-text",
42312
42395
  color: "textOnDarkDefault",
42313
42396
  "data-testid": "bp-ZoomControls-current",
42314
42397
  title: ZoomControlsV2_('zoom_current_scale'),
42315
- variant: "bodyDefaultSemibold"
42316
- }, `${Math.round(currentScale * 100)}%`), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
42398
+ variant: "bodyDefault"
42399
+ }, /*#__PURE__*/external_react_["default"].createElement(TabularDigits/* default */.Ay, null, `${Math.round(currentScale * 100)}%`)), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
42317
42400
  content: ZoomControlsV2_('zoom_in')
42318
42401
  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
42402
+ className: "bp-ControlsPillV2-button",
42319
42403
  "aria-label": ZoomControlsV2_('zoom_in'),
42320
42404
  "data-resin-target": resinTargetZoomIn,
42321
42405
  "data-testid": "bp-ZoomControls-in",
@@ -43293,14 +43377,21 @@ function MultiImageControls({
43293
43377
 
43294
43378
 
43295
43379
 
43380
+
43381
+
43296
43382
  function PageControlsFormV2({
43297
43383
  onPageSubmit,
43298
43384
  pageNumber,
43299
43385
  pageCount
43300
43386
  }) {
43387
+ const {
43388
+ setIsEditing
43389
+ } = external_react_["default"].useContext(ControlsLayerContext);
43301
43390
  const [isInputShown, setIsInputShown] = external_react_["default"].useState(false);
43302
43391
  // A string because Toolbar.Input only supports text types, so a parsed number would show "NaN" once cleared
43303
43392
  const [inputValue, setInputValue] = external_react_["default"].useState(pageNumber.toString());
43393
+ // The input takes the button's size, so the bar keeps its width and height while the page number is edited
43394
+ const [inputSize, setInputSize] = external_react_["default"].useState();
43304
43395
  const buttonElRef = external_react_["default"].useRef(null);
43305
43396
  const inputElRef = external_react_["default"].useRef(null);
43306
43397
  const isRetryRef = external_react_["default"].useRef(false);
@@ -43317,6 +43408,14 @@ function PageControlsFormV2({
43317
43408
  }
43318
43409
  setIsInputShown(false);
43319
43410
  };
43411
+ const handleButtonClick = () => {
43412
+ const rect = buttonElRef.current?.getBoundingClientRect();
43413
+ setInputSize(rect?.width ? {
43414
+ height: rect.height,
43415
+ width: rect.width
43416
+ } : undefined);
43417
+ setIsInputShown(true);
43418
+ };
43320
43419
  const handleNumInputChange = event => {
43321
43420
  setInputValue(event.target.value);
43322
43421
  };
@@ -43345,6 +43444,12 @@ function PageControlsFormV2({
43345
43444
  external_react_["default"].useEffect(() => {
43346
43445
  setInputValue(pageNumber.toString()); // Keep internal state in sync with prop as it changes
43347
43446
  }, [pageNumber]);
43447
+
43448
+ // Keeps the bar and the input up while typing, even once the cursor leaves the bar
43449
+ external_react_["default"].useEffect(() => {
43450
+ setIsEditing(isInputShown);
43451
+ return () => setIsEditing(false);
43452
+ }, [isInputShown, setIsEditing]);
43348
43453
  external_react_["default"].useLayoutEffect(() => {
43349
43454
  if (inputElRef.current && isInputShown) {
43350
43455
  inputElRef.current.select();
@@ -43360,7 +43465,8 @@ function PageControlsFormV2({
43360
43465
  className: "bp-PageControlsFormV2",
43361
43466
  "data-testid": "bp-PageControlsForm"
43362
43467
  }, isInputShown ? /*#__PURE__*/external_react_["default"].createElement("div", {
43363
- className: "bp-PageControlsFormV2-input"
43468
+ className: "bp-PageControlsFormV2-input",
43469
+ style: inputSize
43364
43470
  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Input, {
43365
43471
  ref: inputElRef,
43366
43472
  "aria-label": PageControlsFormV2_('enter_page_num'),
@@ -43377,17 +43483,20 @@ function PageControlsFormV2({
43377
43483
  content: PageControlsFormV2_('enter_page_num')
43378
43484
  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
43379
43485
  ref: buttonElRef,
43486
+ className: "bp-ControlsPillV2-label",
43380
43487
  "data-resin-target": "pageNumberOpen",
43381
43488
  "data-testid": "bp-PageControlsForm-button",
43382
43489
  disabled: pageCount <= 1,
43383
- onClick: () => setIsInputShown(true)
43490
+ onClick: handleButtonClick
43384
43491
  }, /*#__PURE__*/external_react_["default"].createElement("span", {
43385
43492
  className: "bp-PageControlsFormV2-button-label",
43386
43493
  "data-testid": "bp-PageControlsForm-button-label"
43387
43494
  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
43388
43495
  as: "span",
43389
- color: "textOnDarkDefault"
43390
- }, `${pageNumber} / ${pageCount}`)))));
43496
+ className: "bp-ControlsPillV2-text",
43497
+ color: "textOnDarkDefault",
43498
+ variant: "bodyDefaultSemibold"
43499
+ }, /*#__PURE__*/external_react_["default"].createElement(TabularDigits/* default */.Ay, null, `${pageNumber} / ${pageCount}`))))));
43391
43500
  }
43392
43501
  ;// ./src/lib/viewers/controls/page/PageControlsV2.tsx
43393
43502
  /* provided dependency */ var PageControlsV2_ = __webpack_require__(441)["Tl"];
@@ -43396,6 +43505,7 @@ function PageControlsFormV2({
43396
43505
 
43397
43506
 
43398
43507
 
43508
+
43399
43509
  function PageControlsV2({
43400
43510
  onPageChange,
43401
43511
  onPageSubmit,
@@ -43405,9 +43515,10 @@ function PageControlsV2({
43405
43515
  if (pageCount <= 1) {
43406
43516
  return null;
43407
43517
  }
43408
- return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
43518
+ return /*#__PURE__*/external_react_["default"].createElement(ControlsPillV2, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
43409
43519
  content: PageControlsV2_('previous_page')
43410
43520
  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
43521
+ className: "bp-ControlsPillV2-button",
43411
43522
  "aria-label": PageControlsV2_('previous_page'),
43412
43523
  "data-resin-target": "pagePrevious",
43413
43524
  "data-testid": "bp-PageControls-previous",
@@ -43422,6 +43533,7 @@ function PageControlsV2({
43422
43533
  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
43423
43534
  content: PageControlsV2_('next_page')
43424
43535
  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
43536
+ className: "bp-ControlsPillV2-button",
43425
43537
  "aria-label": PageControlsV2_('next_page'),
43426
43538
  "data-resin-target": "pageNext",
43427
43539
  "data-testid": "bp-PageControls-next",
@@ -45743,8 +45855,6 @@ function Image360Controls({
45743
45855
  }
45744
45856
  ;// external "@box/blueprint-web-assets/icons/Medium/VrGoggles"
45745
45857
 
45746
- // EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
45747
- var utils = __webpack_require__(5346);
45748
45858
  ;// ./src/lib/viewers/controls/box3d/VrToggleControlV2.tsx
45749
45859
  /* provided dependency */ var VrToggleControlV2_ = __webpack_require__(441)["Tl"];
45750
45860
  const VrToggleControlV2_excluded = ["buttonType", "isVrShown", "onVrToggle"];
@@ -47351,6 +47461,68 @@ class PrintModalRoot {
47351
47461
  }
47352
47462
  ;// ./src/lib/icons/print_checkmark.svg
47353
47463
  const print_checkmark_namespaceObject = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" focusable=\"false\">\n <path d=\"M4.187 6.48L3.067 7.6l3.6 3.6 8-8-1.12-1.12-6.88 6.88-2.48-2.48zM14.4 8c0 3.52-2.88 6.4-6.4 6.4-3.52 0-6.4-2.88-6.4-6.4 0-3.52 2.88-6.4 6.4-6.4.64 0 1.2.08 1.76.24L11.04.56C10.08.24 9.04 0 8 0 3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8h-1.6z\" fill=\"#22A7F0\" fill-rule=\"evenodd\"/>\n</svg>\n";
47464
+ ;// ./src/lib/viewers/text/printStyles.ts
47465
+ // The PlainText.scss and Markdown.scss rules that can match inside the print iframe, which holds only
47466
+ // the text element. Keep them in sync with those files; printStyles-test.ts fails when they drift.
47467
+ const PLAIN_TEXT_PRINT_STYLES = `
47468
+ .bp-text-plain {
47469
+ position: absolute;
47470
+ inset: 0;
47471
+ overflow: auto;
47472
+ margin: 0;
47473
+ line-height: 1.5;
47474
+ text-align: left;
47475
+ word-wrap: break-word;
47476
+ white-space: pre-wrap;
47477
+ background-color: #fff;
47478
+ }
47479
+
47480
+ .bp-text-plain ul {
47481
+ list-style: disc;
47482
+ }
47483
+
47484
+ .bp-text-plain ol {
47485
+ list-style: decimal;
47486
+ }
47487
+
47488
+ .bp-text-plain ol ul,
47489
+ .bp-text-plain ul ul {
47490
+ list-style: circle;
47491
+ }
47492
+
47493
+ .bp-text-truncated {
47494
+ padding-bottom: 75px;
47495
+ font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
47496
+ text-align: center;
47497
+ }
47498
+
47499
+ .bp-text-truncated p {
47500
+ margin: 10px 0;
47501
+ }
47502
+
47503
+ @media print {
47504
+ .bp-text-plain {
47505
+ position: static;
47506
+ overflow: visible;
47507
+ margin: 0;
47508
+ padding: 0;
47509
+ word-wrap: break-word;
47510
+ }
47511
+
47512
+ .bp-text-truncated .bp-btn-download {
47513
+ display: none;
47514
+ }
47515
+ }
47516
+ `;
47517
+ const MARKDOWN_PRINT_STYLES = `${PLAIN_TEXT_PRINT_STYLES}
47518
+ .markdown-body {
47519
+ white-space: normal;
47520
+ }
47521
+
47522
+ .markdown-body ul li {
47523
+ list-style: disc;
47524
+ }
47525
+ `;
47354
47526
  ;// ./src/lib/viewers/text/PlainText.scss
47355
47527
  // extracted by mini-css-extract-plugin
47356
47528
 
@@ -47371,6 +47543,8 @@ function PlainTextViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) ret
47371
47543
 
47372
47544
 
47373
47545
 
47546
+
47547
+
47374
47548
  // Inline web worker JS
47375
47549
  const HIGHLIGHT_WORKER_JS = 'onmessage=function(e){importScripts(e.data.highlightSrc);postMessage(self.hljs.highlightAuto(e.data.text).value)};';
47376
47550
 
@@ -47499,7 +47673,7 @@ class PlainTextViewer extends text_TextBaseViewer {
47499
47673
  */
47500
47674
  print() {
47501
47675
  if (!this.printReady) {
47502
- this.preparePrint(this.getCSS().concat('preview.css'));
47676
+ this.preparePrint(this.getCSS());
47503
47677
  this.printPopup.show(PlainTextViewer_('print_loading'), PlainTextViewer_('print'), () => {
47504
47678
  this.printPopup.hide();
47505
47679
  this.printIframe();
@@ -47556,6 +47730,15 @@ class PlainTextViewer extends text_TextBaseViewer {
47556
47730
  return src_CSS;
47557
47731
  }
47558
47732
 
47733
+ /**
47734
+ * Returns the viewer styles that npm builds inject into the print iframe
47735
+ *
47736
+ * @return {string} CSS text
47737
+ */
47738
+ getPrintStyles() {
47739
+ return PLAIN_TEXT_PRINT_STYLES;
47740
+ }
47741
+
47559
47742
  /**
47560
47743
  * Finishes loading after text is highlighted.
47561
47744
  *
@@ -47644,19 +47827,30 @@ class PlainTextViewer extends text_TextBaseViewer {
47644
47827
  }
47645
47828
 
47646
47829
  /**
47647
- * Sets up the print iframe - uses a web worker to insert text content and
47648
- * styles into an iframe that can be printed.
47830
+ * Writes the text element into a printable iframe and attaches its print styles.
47649
47831
  *
47650
47832
  * @private
47651
- * @param {string[]} stylesheets - Stylesheets needed for print
47833
+ * @param {string[]} stylesheets - Third-party stylesheets needed for print, before the viewer's own styles
47652
47834
  * @return {void}
47653
47835
  */
47654
47836
  preparePrint(stylesheets) {
47655
47837
  const assetUrlCreator = (0,util/* createAssetUrlCreator */.my)(this.options.location);
47656
47838
  this.printframe = (0,util/* openContentInsideIframe */.G9)(this.textEl.outerHTML);
47839
+ const {
47840
+ head
47841
+ } = this.printframe.contentDocument;
47657
47842
  stylesheets.forEach(stylesheet => {
47658
- this.printframe.contentDocument.head.appendChild((0,util/* createStylesheet */.fX)(assetUrlCreator(stylesheet)));
47843
+ head.appendChild((0,util/* createStylesheet */.fX)(assetUrlCreator(stylesheet)));
47659
47844
  });
47845
+
47846
+ // npm consumers bundle the viewer CSS themselves and host no preview.css to link to.
47847
+ if ((0,isNpmBuild/* isNpmBuild */.w)()) {
47848
+ const printStyleEl = document.createElement('style');
47849
+ printStyleEl.textContent = this.getPrintStyles();
47850
+ head.appendChild(printStyleEl);
47851
+ } else {
47852
+ head.appendChild((0,util/* createStylesheet */.fX)(assetUrlCreator('preview.css')));
47853
+ }
47660
47854
  setTimeout(() => {
47661
47855
  if (this.printPopup instanceof PrintModalRoot) {
47662
47856
  this.printPopup.showReady(PlainTextViewer_('print_ready'));
@@ -47751,6 +47945,7 @@ function MarkdownControlsV2({
47751
47945
 
47752
47946
 
47753
47947
 
47948
+
47754
47949
  const MarkdownViewer_STATIC_URI = `third-party/text/${constants/* TEXT_STATIC_ASSETS_VERSION */.cR}/`;
47755
47950
  class MarkdownViewer extends text_PlainTextViewer {
47756
47951
  /**
@@ -47789,6 +47984,13 @@ class MarkdownViewer extends text_PlainTextViewer {
47789
47984
  return super.getCSS().concat(`${MarkdownViewer_STATIC_URI}github-markdown.min.css`);
47790
47985
  }
47791
47986
 
47987
+ /**
47988
+ * @inheritdoc
47989
+ */
47990
+ getPrintStyles() {
47991
+ return MARKDOWN_PRINT_STYLES;
47992
+ }
47993
+
47792
47994
  /**
47793
47995
  * Prints text using an an iframe. Adds Github Markdown CSS to print styles.
47794
47996
  *
@@ -47797,7 +47999,7 @@ class MarkdownViewer extends text_PlainTextViewer {
47797
47999
  */
47798
48000
  print() {
47799
48001
  if (!this.printReady) {
47800
- this.preparePrint(this.getCSS().concat('preview.css'));
48002
+ this.preparePrint(this.getCSS());
47801
48003
  this.printPopup.show(MarkdownViewer_('print_loading'), MarkdownViewer_('print'), () => {
47802
48004
  this.printPopup.hide();
47803
48005
  this.printIframe();
@@ -53165,6 +53367,45 @@ const arrow_curved_forward_24px_namespaceObject = "<svg width=\"24\" height=\"24
53165
53367
  var MediaLoadingIndicator = __webpack_require__(4301);
53166
53368
  // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayOverlayIcon.tsx
53167
53369
  var PlayOverlayIcon = __webpack_require__(2048);
53370
+ // EXTERNAL MODULE: ./src/lib/viewers/controls/media/SkipButton.tsx + 2 modules
53371
+ var SkipButton = __webpack_require__(2659);
53372
+ ;// ./src/lib/viewers/controls/media/VideoPlaySeekOverlay.scss
53373
+ // extracted by mini-css-extract-plugin
53374
+
53375
+ ;// ./src/lib/viewers/controls/media/VideoPlaySeekOverlay.tsx
53376
+ /* provided dependency */ var VideoPlaySeekOverlay_ = __webpack_require__(441)["Tl"];
53377
+
53378
+
53379
+
53380
+
53381
+
53382
+
53383
+ function VideoPlaySeekOverlay({
53384
+ movePlayback,
53385
+ onPlay
53386
+ }) {
53387
+ return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(SkipButton/* default */.A, {
53388
+ direction: "backward",
53389
+ isBlueprintEnabled: true,
53390
+ movePlayback: movePlayback
53391
+ }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
53392
+ content: VideoPlaySeekOverlay_('media_play')
53393
+ }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
53394
+ "aria-label": VideoPlaySeekOverlay_('media_play'),
53395
+ className: "bp-VideoPlaySeekOverlay-play",
53396
+ "data-resin-target": "playOverlay",
53397
+ "data-target-id": "VideoPlaySeekOverlay-play",
53398
+ icon: PlayOverlayIcon/* default */.A,
53399
+ onClick: onPlay,
53400
+ onKeyDown: utils/* stopActivationKeyPropagation */.My,
53401
+ size: "large",
53402
+ variant: "on-dark"
53403
+ })), /*#__PURE__*/external_react_["default"].createElement(SkipButton/* default */.A, {
53404
+ direction: "forward",
53405
+ isBlueprintEnabled: true,
53406
+ movePlayback: movePlayback
53407
+ }));
53408
+ }
53168
53409
  ;// ./src/lib/viewers/media/fitFrameToViewport.js
53169
53410
  /**
53170
53411
  * Contain-fits a frame into the viewport (same model as object-fit: contain).
@@ -53781,11 +54022,14 @@ function VideoBaseViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) ret
53781
54022
 
53782
54023
 
53783
54024
 
54025
+
54026
+
53784
54027
  const MOUSE_MOVE_TIMEOUT_IN_MILLIS = 1000;
53785
54028
  const CLASS_PLAY_BUTTON = 'bp-media-play-button';
53786
54029
  const CLASS_PLAY_CONTAINER = 'bp-media-overlay-play-container';
53787
54030
  const CLASS_PLAY_CONTAINER_PLAY_BUTTON = 'bp-media-overlay-play-button';
53788
54031
  const CLASS_SEEK_BUTTON = 'bp-media-overlay-seek-button';
54032
+ const CLASS_PLAY_SEEK_OVERLAY = 'bp-VideoPlaySeekOverlay';
53789
54033
  const SMALL_VIDEO_WIDTH_THRESHOLD = 580;
53790
54034
  const SPINNER_HALF_SIZE = 40; // Half of the 80px spinner height (_mediaBase.scss and MediaLoadingIndicator.scss)
53791
54035
  const VIDEO_ANNOTATIONS_ENABLED = 'videoAnnotations.enabled';
@@ -54103,6 +54347,10 @@ class VideoBaseViewer extends media_MediaBaseViewer {
54103
54347
  });
54104
54348
  }
54105
54349
  buildPlayButtonWithSeekButtons() {
54350
+ if (this.isBlueprintMediaControlsEnabled()) {
54351
+ this.buildBlueprintPlaySeekOverlay();
54352
+ return;
54353
+ }
54106
54354
  this.playContainerEl = this.mediaContainerEl.appendChild(document.createElement('div'));
54107
54355
  this.playContainerEl.classList.add(CLASS_PLAY_CONTAINER);
54108
54356
  this.playContainerEl.classList.add(constants/* CLASS_HIDDEN */.zX);
@@ -54129,7 +54377,38 @@ class VideoBaseViewer extends media_MediaBaseViewer {
54129
54377
  this.seekBackwardButtonEl.addEventListener('click', () => this.movePlayback(false, 5));
54130
54378
  }
54131
54379
  }
54380
+
54381
+ /**
54382
+ * Renders the narrow-video play/seek cluster with Blueprint buttons. The container stays on
54383
+ * playContainerEl so the shared show/hide and narrow-width logic treats both versions the same.
54384
+ *
54385
+ * @private
54386
+ * @return {void}
54387
+ */
54388
+ buildBlueprintPlaySeekOverlay() {
54389
+ this.playContainerEl = this.mediaContainerEl.appendChild(document.createElement('div'));
54390
+ this.playContainerEl.classList.add(CLASS_PLAY_SEEK_OVERLAY);
54391
+ this.playContainerEl.classList.add(constants/* CLASS_HIDDEN */.zX);
54392
+ const handlePlay = () => {
54393
+ // The cluster hides once playback starts; keep focus in the player so Space still reaches it.
54394
+ if (this.playContainerEl?.contains(document.activeElement)) {
54395
+ this.mediaContainerEl.focus();
54396
+ }
54397
+ this.handlePlayRequest();
54398
+ };
54399
+ this.playSeekOverlayRoot = (0,client_.createRoot)(this.playContainerEl);
54400
+ this.playSeekOverlayRoot.render(/*#__PURE__*/external_react_["default"].createElement(BlueprintProviders/* default */.A, {
54401
+ container: this.containerEl
54402
+ }, /*#__PURE__*/external_react_["default"].createElement(VideoPlaySeekOverlay, {
54403
+ movePlayback: this.movePlayback,
54404
+ onPlay: handlePlay
54405
+ })));
54406
+ }
54132
54407
  removePlayButtonWithSeekButtons() {
54408
+ if (this.playSeekOverlayRoot) {
54409
+ this.playSeekOverlayRoot.unmount();
54410
+ this.playSeekOverlayRoot = undefined;
54411
+ }
54133
54412
  if (this.playContainerEl) {
54134
54413
  if (this.seekForwardButtonEl) {
54135
54414
  this.seekForwardButtonEl.removeEventListener('click', () => this.movePlayback(true, 5));
@@ -54181,6 +54460,10 @@ class VideoBaseViewer extends media_MediaBaseViewer {
54181
54460
  if (this.seekBackwardButtonEl) {
54182
54461
  this.seekBackwardButtonEl.removeEventListener('click', () => this.movePlayback(false, 5));
54183
54462
  }
54463
+ if (this.playSeekOverlayRoot) {
54464
+ this.playSeekOverlayRoot.unmount();
54465
+ this.playSeekOverlayRoot = undefined;
54466
+ }
54184
54467
  if (this.bufferingSpinnerRoot) {
54185
54468
  this.bufferingSpinnerRoot.unmount();
54186
54469
  this.bufferingSpinnerRoot = undefined;
@@ -54934,8 +55217,6 @@ function VideoControls({
54934
55217
  var MediaSettingsV2 = __webpack_require__(4027);
54935
55218
  // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseButton.tsx + 2 modules
54936
55219
  var PlayPauseButton = __webpack_require__(5760);
54937
- // EXTERNAL MODULE: ./src/lib/viewers/controls/media/SkipButton.tsx + 2 modules
54938
- var SkipButton = __webpack_require__(2659);
54939
55220
  // EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 1 modules
54940
55221
  var TimestampControl = __webpack_require__(3904);
54941
55222
  // EXTERNAL MODULE: ./src/lib/viewers/media/formatTimecode.ts
@@ -59080,8 +59361,6 @@ class DocFindBar extends (events_default()) {
59080
59361
  /* harmony default export */ const doc_DocFindBar = (DocFindBar);
59081
59362
  ;// external "@box/blueprint-web-assets/icons/Fill"
59082
59363
 
59083
- // EXTERNAL MODULE: ./src/lib/TabularDigits.tsx + 1 modules
59084
- var TabularDigits = __webpack_require__(2459);
59085
59364
  ;// ./src/lib/viewers/doc/DocFindBarV2.scss
59086
59365
  // extracted by mini-css-extract-plugin
59087
59366
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "box-content-preview",
3
- "version": "3.124.0",
3
+ "version": "3.126.0",
4
4
  "description": "Box Content Preview UI Element",
5
5
  "author": "Box (https://www.box.com/)",
6
6
  "license": "SEE LICENSE IN LICENSE",