box-content-preview 3.49.0 → 3.51.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 +7 -7
- package/dist/lib/index.css +6 -2
- package/dist/lib/index.js +651 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
[](https://mergify.io)
|
|
3
3
|
[](https://github.com/prettier/prettier)
|
|
4
4
|
[](https://travis-ci.org/box/box-content-preview)
|
|
5
|
-
[](https://github.com/box/box-content-preview)
|
|
6
6
|
[](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.
|
|
25
|
+
- Version: v3.51.0
|
|
26
26
|
- Locale: en-US
|
|
27
27
|
|
|
28
|
-
https://cdn01.boxcdn.net/platform/preview/3.
|
|
29
|
-
https://cdn01.boxcdn.net/platform/preview/3.
|
|
28
|
+
https://cdn01.boxcdn.net/platform/preview/3.51.0/en-US/preview.js
|
|
29
|
+
https://cdn01.boxcdn.net/platform/preview/3.51.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.
|
|
55
|
+
<script src="https://cdn01.boxcdn.net/platform/preview/3.51.0/en-US/preview.js"></script>
|
|
56
56
|
<link
|
|
57
57
|
rel="stylesheet"
|
|
58
|
-
href="https://cdn01.boxcdn.net/platform/preview/3.
|
|
58
|
+
href="https://cdn01.boxcdn.net/platform/preview/3.51.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.
|
|
79
|
+
- Check out a specific version with `git checkout v3.51.0`
|
|
80
80
|
- Download a specific version as a zip from https://github.com/box/box-content-preview/releases
|
|
81
81
|
|
|
82
82
|
2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`
|
package/dist/lib/index.css
CHANGED
|
@@ -69,12 +69,16 @@
|
|
|
69
69
|
.bp-media-scrubber-container{position:relative;width:100%;height:16px}.bp-media-scrubber-wrapper{position:absolute;top:0;left:50%;width:100%;height:100%}.bp-media-scrubber{position:absolute;top:7px;left:-50%;width:100%;height:3px}.bp-media-scrubber-converted,.bp-media-scrubber-buffered,.bp-media-scrubber-played,.bp-media-scrubber-underlay{position:absolute;height:3px;transition:transform .1s ease-in-out}.bp-media-scrubber-converted{background-color:rgba(255,255,255,.5);cursor:pointer}.bp-media-scrubber-buffered{position:absolute;height:3px;background-color:#fff}.bp-media-scrubber-played{background-color:#0061d5;cursor:pointer}.bp-media-scrubber-underlay{width:100%;cursor:not-allowed}.bp-media-scrubber-handle{position:absolute;top:-4.25px;width:12px;height:12px;margin-left:-6px;background-color:#0061d5;border-radius:6px;transform:scale(0);cursor:pointer;transition:transform .05s ease-in-out}.bp-media-scrubber-container:hover .bp-media-scrubber-handle,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-handle{transform:scale(1)}.bp-media-scrubber-container:hover .bp-media-scrubber-converted,.bp-media-scrubber-container:hover .bp-media-scrubber-buffered,.bp-media-scrubber-container:hover .bp-media-scrubber-played,.bp-media-scrubber-container:hover .bp-media-scrubber-underlay,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-converted,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-buffered,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-played,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-underlay{transform:scaleY(2)}.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-handle{transform:scale(1)}.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-converted,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-buffered,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-played,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-underlay{transform:scaleY(2)}.bp-media-settings{position:absolute;right:16px;bottom:60px;display:inline-block;max-width:400px;max-height:210px;padding:8px;overflow-x:hidden;overflow-y:auto;color:#444;font-size:10px;line-height:0;background-color:#fff;border:1px solid #bdc3c7;border-radius:2px;visibility:hidden;transition:width .2s,height .2s;-ms-overflow-style:-ms-autohiding-scrollbar}.bp-media-settings-is-open .bp-media-settings{visibility:visible}.bp-media-mp3 .bp-media-settings{right:0;bottom:65px}.bp-media-settings-in-transition{overflow:hidden}.bp-media-settings-menu{display:table}.bp-media-settings-menu-autoplay,.bp-media-settings-menu-quality,.bp-media-settings-menu-speed,.bp-media-settings-menu-subtitles,.bp-media-settings-menu-audiotracks,.bp-media-settings-show-autoplay .bp-media-settings-menu-main,.bp-media-settings-show-speed .bp-media-settings-menu-main,.bp-media-settings-show-quality .bp-media-settings-menu-main,.bp-media-settings-show-subtitles .bp-media-settings-menu-main,.bp-media-settings-show-audiotracks .bp-media-settings-menu-main{display:none}.bp-media-settings-show-autoplay .bp-media-settings-menu-autoplay,.bp-media-settings-show-speed .bp-media-settings-menu-speed,.bp-media-settings-show-quality .bp-media-settings-menu-quality,.bp-media-settings-show-subtitles .bp-media-settings-menu-subtitles,.bp-media-settings-show-audiotracks .bp-media-settings-menu-audiotracks{display:table}.bp-media-mp4 .bp-media-settings-item-quality,.bp-media-mp4 .bp-media-settings-item-subtitles,.bp-media-mp4 .bp-media-settings-item-audiotracks,.bp-media-mp3 .bp-media-settings-item-quality,.bp-media-mp3 .bp-media-settings-item-subtitles,.bp-media-mp3 .bp-media-settings-item-audiotracks{display:none}.bp-media-settings-item,.bp-media-settings-sub-item{display:table-row;height:26px;padding:4px;overflow:hidden;white-space:nowrap;outline:0 none;cursor:pointer}.bp-media-settings-item:hover,.bp-media-settings-sub-item:hover{background-color:#f6fafd}.bp-media-settings-item:hover .bp-media-settings-icon svg,.bp-media-settings-sub-item:hover .bp-media-settings-icon svg{fill:#2c3e50}.bp-media-settings-item:hover .bp-media-settings-label,.bp-media-settings-sub-item:hover .bp-media-settings-label{color:#aabed1}.bp-media-settings-item:hover .bp-media-settings-value,.bp-media-settings-sub-item:hover .bp-media-settings-value{color:#2c3e50}.bp-has-keyboard-focus .bp-media-settings-item:focus,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus{background-color:#0061d5}.bp-has-keyboard-focus .bp-media-settings-item:focus .bp-media-settings-label,.bp-has-keyboard-focus .bp-media-settings-item:focus .bp-media-settings-value,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus .bp-media-settings-label,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus .bp-media-settings-value{color:#fff}.bp-has-keyboard-focus .bp-media-settings-item:focus svg,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus svg{fill:#fff}.bp-media-settings-subtitles-unavailable .bp-media-settings-item-subtitles,.bp-media-settings-subtitles-unavailable .bp-media-settings-menu-subtitles{display:none}.bp-media-settings-autoplay-unavailable .bp-media-settings-item-autoplay,.bp-media-settings-autoplay-unavailable .bp-media-settings-menu-autoplay{display:none}.bp-media-settings-audiotracks-unavailable .bp-media-settings-item-audiotracks,.bp-media-settings-audiotracks-unavailable .bp-media-settings-menu-audiotracks{display:none}.bp-media-settings-hd-unavailable .bp-media-settings-menu-quality{display:none}.bp-media-settings-hd-unavailable .bp-media-settings-item-quality{pointer-events:none}.bp-media-settings-hd-unavailable .bp-media-settings-item-quality .bp-media-settings-arrow{display:none}.bp-media-settings-label,.bp-media-settings-value{display:table-cell;padding:4px;vertical-align:middle}.bp-media-settings-label{color:#999ea4;font-weight:normal;font-size:11px;text-transform:uppercase}.bp-media-settings-item .bp-media-settings-label{text-align:left}.bp-media-settings-sub-item .bp-media-settings-label{text-align:center}.bp-media-settings-value{padding-left:10px;color:#464a4f;font-size:12px;text-align:left}.bp-media-settings-selected .bp-media-settings-value{color:#0061d5}.bp-media-settings-arrow{display:table-cell;vertical-align:middle}.bp-media-settings-arrow svg{width:18px;height:18px}.bp-media-settings-icon{display:table-cell;text-align:center;vertical-align:middle}.bp-media-settings-icon svg{width:16px;height:16px;visibility:hidden}.bp-media-settings-selected .bp-media-settings-icon svg{visibility:visible}.bp-media-controls-is-visible .bp-media-controls-wrapper,.bp-media-controls-wrapper:active,.bp-media-controls-wrapper:focus{visibility:visible;opacity:1}.bp-media-controls-wrapper{position:absolute;right:0;bottom:0;left:0;width:100%;height:60px;margin:auto;overflow:hidden;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);visibility:hidden;opacity:0;transition:visibility .3s,opacity .3s}.bp-media-time-scrubber-container{outline:0 none}.bp-media-volume-scrubber-container-wrapper{display:inline-block;width:0;height:40px;overflow:hidden;transition:width .2s ease-in-out}.bp-media-controls-volume-scrubber-expand{width:96px}.bp-media-volume-scrubber-container{position:relative;display:inline-block;width:96px;height:40px;padding:10px 8px 0;outline:0 none}.bp-media-volume-scrubber-container .bp-media-scrubber-handle{transform:scale(1)}.bp-media-volume-scrubber-container .bp-media-scrubber-converted,.bp-media-volume-scrubber-container .bp-media-scrubber-buffered,.bp-media-volume-scrubber-container .bp-media-scrubber-played,.bp-media-volume-scrubber-container .bp-media-scrubber-underlay{transform:scaleY(1) !important}.bp-media-controls-container{height:40px;margin:0;padding:0 10px;text-align:left}.bp-media-controls-label,.bp-media-controls-btn{display:inline-block;width:45px;height:40px;margin:0;padding:0;color:#fff;font-weight:normal;font-size:12px;text-align:center;vertical-align:top;background-color:transparent;border:none;outline:0 none;cursor:pointer;opacity:.7}.bp-media-controls-label:hover,.bp-media-controls-btn:hover{opacity:1}.bp-media-volume-icon{position:relative;display:inline-block;width:36px;height:40px;vertical-align:top}.bp-is-mobile .bp-media-volume-icon{display:none}.bp-media-controls-label{display:inline-block;width:auto;margin:0 4px;line-height:40px;vertical-align:top;cursor:default}.bp-media-controls-timecode{margin-left:13px}.bp-media-controls-volume-control{display:inline-block;width:45px;height:40px;vertical-align:top}.bp-is-mobile .bp-media-controls-volume-control{display:none}.bp-is-fullscreen .bp-media-fullscreen-icon .bp-exit-fullscreen-icon{display:inline-block}.bp-media-fullscreen-icon{position:absolute;right:10px}.bp-media-gear-icon{position:absolute;right:55px}.bp-media-gear-icon svg path{transform-origin:50%;transition:all .3s}.bp-media-settings-is-open .bp-media-gear-icon svg path{transform:rotateZ(60deg)}.bp-media-cc-icon{position:absolute;right:100px;visibility:visible}.bp-media-settings-subtitles-unavailable .bp-media-cc-icon{visibility:hidden}.bp-media-controls-cc-icon-text{display:inline-block;width:24px;height:24px;padding:0 0 0 1px;color:#fff;font-weight:bold;font-size:12px;line-height:24px;letter-spacing:.1em;background-color:rgba(0,0,0,.3);border-radius:4px}.bp-media-settings-subtitles-on .bp-media-controls-cc-icon-text{color:#fff;background-color:#0061d5}.bp-media-controls-hd{position:absolute;left:22px;display:none;padding:2px 2px 2px 3px;font-weight:bold;font-size:8px;line-height:8px;letter-spacing:.1em;background-color:#0061d5;border-radius:3px}.bp-media-controls-is-hd .bp-media-controls-hd{display:inline}.bp-media-play-icon{display:inline}.bp-media-is-playing .bp-media-play-icon{display:none}.bp-media-pause-icon{display:none}.bp-media-is-playing .bp-media-pause-icon{display:inline}.bp-media-volume-icon-mute,.bp-media-volume-icon-low,.bp-media-volume-icon-medium,.bp-media-volume-icon-high{position:absolute;left:6px;display:none}.bp-media-volume-icon-is-mute .bp-media-volume-icon-mute,.bp-media-volume-icon-is-low .bp-media-volume-icon-low,.bp-media-volume-icon-is-medium .bp-media-volume-icon-medium,.bp-media-volume-icon-is-high .bp-media-volume-icon-high{display:inline}.bp-media{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;border:0 none;visibility:hidden}.bp-media.bp-is-visible{visibility:visible}.bp-media-container{position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:360px;min-height:0;outline:0 none;-webkit-user-select:none;user-select:none}.bp-media-play-button{padding:0;color:inherit;font:inherit;background:none;border:none;cursor:pointer;position:absolute;top:50%;left:50%;width:80px;height:80px;color:#fff;font-size:40px;text-align:center;background:rgba(0,0,0,.5);border:4px solid #fff;border-radius:40px;transform:translate(-50%, -50%);cursor:pointer;transition:all .2s}.bp-media-play-button:hover{background:#000}.bp-media-overlay-play-container{position:absolute;top:50%;left:50%;display:flex;gap:28px;align-items:center;justify-content:center;color:#fff;font-size:40px;text-align:center;transform:translate(-50%, -50%);cursor:pointer;transition:all .2s}.bp-media-overlay-play-container button{padding:0;color:inherit;font:inherit;background:none;border:none;cursor:pointer;width:40px;height:40px;font-size:40px;text-align:center;background:#000;border-radius:40px;cursor:pointer;transition:all .2s}.bp-media-overlay-play-container .bp-media-overlay-play-button{width:60px;height:60px}.bp-has-keyboard-focus .bp-media-time-scrubber-container:focus,.bp-has-keyboard-focus .bp-media-volume-scrubber-container:focus,.bp-has-keyboard-focus .bp-media-controls-btn:focus{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.1)}.bp-dark .bp-error{color:#fff}.bp-dark .bp-icon{opacity:.9}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper{display:flex}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper .bp-crawler-wrapper{display:block}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper .bp-icon{display:none}@keyframes bp-spinner-rotate{to{transform:rotate(360deg)}}.bp-media-buffering-spinner{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border:4px solid rgba(0,97,213,.3);border-top-color:#0061d5;border-radius:40px;animation:bp-spinner-rotate .8s linear infinite}.bp-is-mobile *::-webkit-media-controls-start-playback-button{display:none}.bp-VideoControlsRoot{position:relative;right:auto;bottom:auto;left:auto;z-index:1;align-self:stretch;width:100%}.bp-media--v2{background:radial-gradient(ellipse at center, #2a2a2a 0%, #000 100%)}.bp-media-container--v2{padding:48px}.bp-media-container--v2 video{border:1px solid rgba(255,255,255,.12)}.bp-media-container--v2 .bp-video-preload-wrapper{top:48px;right:auto;bottom:48px;left:50%;transform:translateX(-50%)}.bp-media-container--v2 .bp-video-preload-wrapper .bp-preload{transform:none}.bp-media-container--v2 .bp-video-preload-wrapper .bp-preload-content{border:1px solid rgba(255,255,255,.12)}.bp-video-360 .bp-VideoControlsRoot{position:absolute;right:0;bottom:-1px;left:0;width:100%}.bp-video-preload-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden;background-color:transparent;opacity:1;transition:opacity .5s}.bp-video-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-video-preload-wrapper.bp-is-transparent{opacity:0}.bp-video-preload-wrapper .bp-preload{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:translateY(-60px)}.bp-video-preload-wrapper .bp-preload-content{width:100%;height:100%;object-fit:contain}.bp-video-preload-wrapper .bp-preload-placeholder{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.bp-video-preload-wrapper .bp-video-preload-play-overlay{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:rgba(0,0,0,.5);border-radius:50%;transform:translate(-50%, -50%);pointer-events:none}.bp-video-preload-wrapper .bp-video-preload-play-overlay svg{width:48px;height:48px;fill:#fff}.bp-media-dash video{display:block;width:100%;max-width:100%;max-height:100%;margin-right:auto;margin-left:auto;cursor:none}.bp-media-dash .bp-media-controls-label,.bp-media-dash .bp-media-controls-btn{opacity:.9}.bp-media-dash .bp-media-controls-label:hover,.bp-media-dash .bp-media-controls-btn:hover{opacity:1}.bp-media-dash .bp-media-controls-is-visible video{cursor:pointer}.bp-media-filmstrip-container{position:absolute;bottom:60px;left:0;display:none;width:160px;height:110px;overflow:hidden;border:1px solid #464a4f}.bp-media-filmstrip{position:relative}.bp-media-filmstrip-timecode{position:absolute;bottom:0;z-index:1;width:100%;color:#fff;font-size:13px;line-height:18px;text-align:center;background-color:#222}.bp-media-crawler-wrapper{position:relative;top:50%;left:50%;z-index:1;width:10px;margin:-15px 0 0 -5px}.bp-media-dash-stats{position:absolute;top:20px;right:20px;color:#fff;font-size:24px}
|
|
70
70
|
.bp-TimestampControl{position:relative;display:flex;align-items:center}.bp-TimestampControl-button{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;gap:4px;align-items:center;margin:0;padding:6px 12px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-TimestampControl-button:focus:not(:disabled) svg,.bp-TimestampControl-button:hover:not(:disabled) svg,.bp-TimestampControl-button.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-TimestampControl-button.bp-is-active,.bp-TimestampControl-button:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-TimestampControl-button.bp-is-active:focus:not(:disabled),.bp-TimestampControl-button.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-TimestampControl-button:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus:not(:focus-visible){box-shadow:none}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button.bp-is-open{background:transparent}.bp-TimestampControl-button:hover:not(:disabled){background:rgba(255,255,255,.08)}.bp-TimestampControl-separator,.bp-TimestampControl-duration{color:rgba(255,255,255,.8)}.bp-TimestampControl-chevron{width:16px;height:16px;margin-left:2px;fill:rgba(255,255,255,.8)}.bp-TimestampControl-flyout{position:absolute;bottom:calc(100% + 12px);left:50%;z-index:1;min-width:250px;padding:12px 8px;background:#fff;border-radius:16px;box-shadow:0 4px 12px 0 rgba(0,0,0,.15);transform:translateX(-50%)}.bp-TimestampControl-header{padding:6px 14px;color:#767676;font-weight:bold;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;-webkit-user-select:none;user-select:none}.bp-TimestampControl-listitem{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:6px 14px;color:#000;font-size:16px;font-family:Lato,Arial,sans-serif;line-height:24px;white-space:nowrap;border-radius:8px;outline:none;cursor:pointer}.bp-TimestampControl-listitem:hover,.bp-TimestampControl-listitem:focus{background:#f4f4f4}.bp-TimestampControl-check{flex:none;fill:#000}
|
|
71
71
|
.bp-FilmstripV2{position:absolute;bottom:calc(100% + 12px);padding:12px;padding-bottom:8px;background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.15);visibility:hidden}.bp-FilmstripV2.bp-is-shown{visibility:visible}.bp-FilmstripV2-frame{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px}.bp-FilmstripV2-time{margin-top:8px;color:#000;font-size:13px;line-height:20px;text-align:center}
|
|
72
|
-
.bp-
|
|
73
|
-
.bp-
|
|
72
|
+
.bp-MarkerAvatar{position:absolute;bottom:calc(100% + 4px);left:50%;width:12px;height:12px;overflow:hidden;border:0;border-radius:50%;box-shadow:0 0 0 0 #fff;transform:translate(-50%, 0);transform-origin:bottom center;transition:transform 150ms,box-shadow 150ms}.bp-MarkerAvatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.bp-MarkerAvatar-initial{display:grid;width:100%;height:100%;font-weight:bold;font-size:7px;line-height:1;text-align:center;text-transform:uppercase;place-items:center}.bp-MarkerAvatar-anonymousIcon{width:100%;height:100%;color:#222}
|
|
73
|
+
.bp-TimeControlsV2{position:relative;margin-right:10px;margin-left:10px}.bp-TimeControlsV2-scrubber{position:relative}.bp-TimeControlsV2-slider{height:20px}.bp-TimeControlsV2-slider .bp-SliderControl-track{height:6px;margin:auto 0;border-radius:5px;backface-visibility:hidden;mask-image:var(--bp-track-mask, none)}.bp-TimeControlsV2-slider .bp-SliderControl-thumb{top:50%;width:3px;height:16px;margin-left:-1.5px;background:#fff;border:0;border-radius:2px;transform:translateY(-50%);cursor:ew-resize}.bp-TimeControlsV2-marker{position:absolute;top:50%;z-index:1;width:2px;height:8px;padding:0;background:#fff;border:0;border-radius:2px;transform:translate(-50%, -50%);cursor:pointer;transition:transform 150ms}.bp-TimeControlsV2-marker:hover,.bp-TimeControlsV2-marker:focus-visible{transform:translate(-50%, -50%) scale(1.7)}.bp-TimeControlsV2-marker:hover .bp-MarkerAvatar,.bp-TimeControlsV2-marker:focus-visible .bp-MarkerAvatar{box-shadow:0 0 0 2px #fff;transform:translate(-50%, calc(5px / 1.7))}.bp-TimeControlsV2-marker:focus-visible{outline:2px solid #fff;outline-offset:2px}
|
|
74
|
+
.bp-VideoFullscreenButton{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;color:#fff;background:rgba(0,0,0,.6);border:none;border-radius:50%;box-shadow:0 2px 12px 0 rgba(0,0,0,.8);cursor:pointer;backdrop-filter:blur(60px);pointer-events:auto}.bp-VideoFullscreenButton svg{width:20px;height:20px}
|
|
75
|
+
.bp-VideoControlsRoot:has(.bp-VideoControlsV2){position:absolute;top:0;right:0;bottom:0;left:0;width:100%;pointer-events:none}.bp-VideoControlsRoot:has(.bp-VideoControlsV2) .bp-ControlsLayer{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;pointer-events:none}.bp-VideoControlsV2{display:flex;flex-direction:column;width:100%;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);padding:30px 48px 20px 48px;pointer-events:auto}.bp-VideoControlsV2 .bp-FullscreenToggle{width:36px;height:40px}.bp-VideoControlsV2-bar{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:0 10px 5px}.bp-VideoControlsV2-group{display:flex;gap:4px;align-items:center}.bp-VideoControlsV2-group .bp-VideoControlsV2-divider{margin:0 8px}.bp-VideoControlsV2-playPause{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-VideoControlsV2-playPause:focus:not(:disabled),.bp-VideoControlsV2-playPause:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-VideoControlsV2-playPause:focus:not(:disabled) svg,.bp-VideoControlsV2-playPause:hover:not(:disabled) svg,.bp-VideoControlsV2-playPause.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-VideoControlsV2-playPause.bp-is-active,.bp-VideoControlsV2-playPause:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-VideoControlsV2-playPause.bp-is-active:focus:not(:disabled),.bp-VideoControlsV2-playPause.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-VideoControlsV2-playPause:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-playPause:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-playPause:focus:not(:focus-visible){box-shadow:none}.bp-VideoControlsV2-playPause:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-VideoControlsV2-playPause svg{width:32px;height:32px;padding:5px}.bp-VideoControlsV2-skipBtn{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-VideoControlsV2-skipBtn:focus:not(:disabled),.bp-VideoControlsV2-skipBtn:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-VideoControlsV2-skipBtn:focus:not(:disabled) svg,.bp-VideoControlsV2-skipBtn:hover:not(:disabled) svg,.bp-VideoControlsV2-skipBtn.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-VideoControlsV2-skipBtn.bp-is-active,.bp-VideoControlsV2-skipBtn:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-VideoControlsV2-skipBtn.bp-is-active:focus:not(:disabled),.bp-VideoControlsV2-skipBtn.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-VideoControlsV2-skipBtn:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-skipBtn:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-skipBtn:focus:not(:focus-visible){box-shadow:none}.bp-VideoControlsV2-skipBtn:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-VideoControlsV2-skipBtn svg{width:32px;height:32px;padding:5px}.bp-VideoControlsV2-divider{width:1px;height:24px;background-color:rgba(255,255,255,.1);border-radius:1px}.bp-VideoControlsV2 .bp-AnnotationsControls{gap:4px;padding-left:0;border-left:none}
|
|
74
76
|
.bp-VideoGuidesOverlay{position:absolute;pointer-events:none}.bp-VideoGuidesOverlay-svg{display:block;width:100%;height:100%;overflow:visible}.bp-VideoGuidesOverlay-cas{fill:none;stroke:#000;stroke-opacity:.5;stroke-width:3;vector-effect:non-scaling-stroke}.bp-VideoGuidesOverlay-ln{fill:none;stroke:#fff;stroke-width:1.25;vector-effect:non-scaling-stroke}
|
|
75
77
|
.bp-media-scrubber-container{position:relative;width:100%;height:16px}.bp-media-scrubber-wrapper{position:absolute;top:0;left:50%;width:100%;height:100%}.bp-media-scrubber{position:absolute;top:7px;left:-50%;width:100%;height:3px}.bp-media-scrubber-converted,.bp-media-scrubber-buffered,.bp-media-scrubber-played,.bp-media-scrubber-underlay{position:absolute;height:3px;transition:transform .1s ease-in-out}.bp-media-scrubber-converted{background-color:rgba(255,255,255,.5);cursor:pointer}.bp-media-scrubber-buffered{position:absolute;height:3px;background-color:#fff}.bp-media-scrubber-played{background-color:#0061d5;cursor:pointer}.bp-media-scrubber-underlay{width:100%;cursor:not-allowed}.bp-media-scrubber-handle{position:absolute;top:-4.25px;width:12px;height:12px;margin-left:-6px;background-color:#0061d5;border-radius:6px;transform:scale(0);cursor:pointer;transition:transform .05s ease-in-out}.bp-media-scrubber-container:hover .bp-media-scrubber-handle,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-handle{transform:scale(1)}.bp-media-scrubber-container:hover .bp-media-scrubber-converted,.bp-media-scrubber-container:hover .bp-media-scrubber-buffered,.bp-media-scrubber-container:hover .bp-media-scrubber-played,.bp-media-scrubber-container:hover .bp-media-scrubber-underlay,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-converted,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-buffered,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-played,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-underlay{transform:scaleY(2)}.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-handle{transform:scale(1)}.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-converted,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-buffered,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-played,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-underlay{transform:scaleY(2)}.bp-media-settings{position:absolute;right:16px;bottom:60px;display:inline-block;max-width:400px;max-height:210px;padding:8px;overflow-x:hidden;overflow-y:auto;color:#444;font-size:10px;line-height:0;background-color:#fff;border:1px solid #bdc3c7;border-radius:2px;visibility:hidden;transition:width .2s,height .2s;-ms-overflow-style:-ms-autohiding-scrollbar}.bp-media-settings-is-open .bp-media-settings{visibility:visible}.bp-media-mp3 .bp-media-settings{right:0;bottom:65px}.bp-media-settings-in-transition{overflow:hidden}.bp-media-settings-menu{display:table}.bp-media-settings-menu-autoplay,.bp-media-settings-menu-quality,.bp-media-settings-menu-speed,.bp-media-settings-menu-subtitles,.bp-media-settings-menu-audiotracks,.bp-media-settings-show-autoplay .bp-media-settings-menu-main,.bp-media-settings-show-speed .bp-media-settings-menu-main,.bp-media-settings-show-quality .bp-media-settings-menu-main,.bp-media-settings-show-subtitles .bp-media-settings-menu-main,.bp-media-settings-show-audiotracks .bp-media-settings-menu-main{display:none}.bp-media-settings-show-autoplay .bp-media-settings-menu-autoplay,.bp-media-settings-show-speed .bp-media-settings-menu-speed,.bp-media-settings-show-quality .bp-media-settings-menu-quality,.bp-media-settings-show-subtitles .bp-media-settings-menu-subtitles,.bp-media-settings-show-audiotracks .bp-media-settings-menu-audiotracks{display:table}.bp-media-mp4 .bp-media-settings-item-quality,.bp-media-mp4 .bp-media-settings-item-subtitles,.bp-media-mp4 .bp-media-settings-item-audiotracks,.bp-media-mp3 .bp-media-settings-item-quality,.bp-media-mp3 .bp-media-settings-item-subtitles,.bp-media-mp3 .bp-media-settings-item-audiotracks{display:none}.bp-media-settings-item,.bp-media-settings-sub-item{display:table-row;height:26px;padding:4px;overflow:hidden;white-space:nowrap;outline:0 none;cursor:pointer}.bp-media-settings-item:hover,.bp-media-settings-sub-item:hover{background-color:#f6fafd}.bp-media-settings-item:hover .bp-media-settings-icon svg,.bp-media-settings-sub-item:hover .bp-media-settings-icon svg{fill:#2c3e50}.bp-media-settings-item:hover .bp-media-settings-label,.bp-media-settings-sub-item:hover .bp-media-settings-label{color:#aabed1}.bp-media-settings-item:hover .bp-media-settings-value,.bp-media-settings-sub-item:hover .bp-media-settings-value{color:#2c3e50}.bp-has-keyboard-focus .bp-media-settings-item:focus,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus{background-color:#0061d5}.bp-has-keyboard-focus .bp-media-settings-item:focus .bp-media-settings-label,.bp-has-keyboard-focus .bp-media-settings-item:focus .bp-media-settings-value,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus .bp-media-settings-label,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus .bp-media-settings-value{color:#fff}.bp-has-keyboard-focus .bp-media-settings-item:focus svg,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus svg{fill:#fff}.bp-media-settings-subtitles-unavailable .bp-media-settings-item-subtitles,.bp-media-settings-subtitles-unavailable .bp-media-settings-menu-subtitles{display:none}.bp-media-settings-autoplay-unavailable .bp-media-settings-item-autoplay,.bp-media-settings-autoplay-unavailable .bp-media-settings-menu-autoplay{display:none}.bp-media-settings-audiotracks-unavailable .bp-media-settings-item-audiotracks,.bp-media-settings-audiotracks-unavailable .bp-media-settings-menu-audiotracks{display:none}.bp-media-settings-hd-unavailable .bp-media-settings-menu-quality{display:none}.bp-media-settings-hd-unavailable .bp-media-settings-item-quality{pointer-events:none}.bp-media-settings-hd-unavailable .bp-media-settings-item-quality .bp-media-settings-arrow{display:none}.bp-media-settings-label,.bp-media-settings-value{display:table-cell;padding:4px;vertical-align:middle}.bp-media-settings-label{color:#999ea4;font-weight:normal;font-size:11px;text-transform:uppercase}.bp-media-settings-item .bp-media-settings-label{text-align:left}.bp-media-settings-sub-item .bp-media-settings-label{text-align:center}.bp-media-settings-value{padding-left:10px;color:#464a4f;font-size:12px;text-align:left}.bp-media-settings-selected .bp-media-settings-value{color:#0061d5}.bp-media-settings-arrow{display:table-cell;vertical-align:middle}.bp-media-settings-arrow svg{width:18px;height:18px}.bp-media-settings-icon{display:table-cell;text-align:center;vertical-align:middle}.bp-media-settings-icon svg{width:16px;height:16px;visibility:hidden}.bp-media-settings-selected .bp-media-settings-icon svg{visibility:visible}.bp-media-controls-is-visible .bp-media-controls-wrapper,.bp-media-controls-wrapper:active,.bp-media-controls-wrapper:focus{visibility:visible;opacity:1}.bp-media-controls-wrapper{position:absolute;right:0;bottom:0;left:0;width:100%;height:60px;margin:auto;overflow:hidden;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);visibility:hidden;opacity:0;transition:visibility .3s,opacity .3s}.bp-media-time-scrubber-container{outline:0 none}.bp-media-volume-scrubber-container-wrapper{display:inline-block;width:0;height:40px;overflow:hidden;transition:width .2s ease-in-out}.bp-media-controls-volume-scrubber-expand{width:96px}.bp-media-volume-scrubber-container{position:relative;display:inline-block;width:96px;height:40px;padding:10px 8px 0;outline:0 none}.bp-media-volume-scrubber-container .bp-media-scrubber-handle{transform:scale(1)}.bp-media-volume-scrubber-container .bp-media-scrubber-converted,.bp-media-volume-scrubber-container .bp-media-scrubber-buffered,.bp-media-volume-scrubber-container .bp-media-scrubber-played,.bp-media-volume-scrubber-container .bp-media-scrubber-underlay{transform:scaleY(1) !important}.bp-media-controls-container{height:40px;margin:0;padding:0 10px;text-align:left}.bp-media-controls-label,.bp-media-controls-btn{display:inline-block;width:45px;height:40px;margin:0;padding:0;color:#fff;font-weight:normal;font-size:12px;text-align:center;vertical-align:top;background-color:transparent;border:none;outline:0 none;cursor:pointer;opacity:.7}.bp-media-controls-label:hover,.bp-media-controls-btn:hover{opacity:1}.bp-media-volume-icon{position:relative;display:inline-block;width:36px;height:40px;vertical-align:top}.bp-is-mobile .bp-media-volume-icon{display:none}.bp-media-controls-label{display:inline-block;width:auto;margin:0 4px;line-height:40px;vertical-align:top;cursor:default}.bp-media-controls-timecode{margin-left:13px}.bp-media-controls-volume-control{display:inline-block;width:45px;height:40px;vertical-align:top}.bp-is-mobile .bp-media-controls-volume-control{display:none}.bp-is-fullscreen .bp-media-fullscreen-icon .bp-exit-fullscreen-icon{display:inline-block}.bp-media-fullscreen-icon{position:absolute;right:10px}.bp-media-gear-icon{position:absolute;right:55px}.bp-media-gear-icon svg path{transform-origin:50%;transition:all .3s}.bp-media-settings-is-open .bp-media-gear-icon svg path{transform:rotateZ(60deg)}.bp-media-cc-icon{position:absolute;right:100px;visibility:visible}.bp-media-settings-subtitles-unavailable .bp-media-cc-icon{visibility:hidden}.bp-media-controls-cc-icon-text{display:inline-block;width:24px;height:24px;padding:0 0 0 1px;color:#fff;font-weight:bold;font-size:12px;line-height:24px;letter-spacing:.1em;background-color:rgba(0,0,0,.3);border-radius:4px}.bp-media-settings-subtitles-on .bp-media-controls-cc-icon-text{color:#fff;background-color:#0061d5}.bp-media-controls-hd{position:absolute;left:22px;display:none;padding:2px 2px 2px 3px;font-weight:bold;font-size:8px;line-height:8px;letter-spacing:.1em;background-color:#0061d5;border-radius:3px}.bp-media-controls-is-hd .bp-media-controls-hd{display:inline}.bp-media-play-icon{display:inline}.bp-media-is-playing .bp-media-play-icon{display:none}.bp-media-pause-icon{display:none}.bp-media-is-playing .bp-media-pause-icon{display:inline}.bp-media-volume-icon-mute,.bp-media-volume-icon-low,.bp-media-volume-icon-medium,.bp-media-volume-icon-high{position:absolute;left:6px;display:none}.bp-media-volume-icon-is-mute .bp-media-volume-icon-mute,.bp-media-volume-icon-is-low .bp-media-volume-icon-low,.bp-media-volume-icon-is-medium .bp-media-volume-icon-medium,.bp-media-volume-icon-is-high .bp-media-volume-icon-high{display:inline}.bp-media{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;border:0 none;visibility:hidden}.bp-media.bp-is-visible{visibility:visible}.bp-media-container{position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:360px;min-height:0;outline:0 none;-webkit-user-select:none;user-select:none}.bp-media-play-button{padding:0;color:inherit;font:inherit;background:none;border:none;cursor:pointer;position:absolute;top:50%;left:50%;width:80px;height:80px;color:#fff;font-size:40px;text-align:center;background:rgba(0,0,0,.5);border:4px solid #fff;border-radius:40px;transform:translate(-50%, -50%);cursor:pointer;transition:all .2s}.bp-media-play-button:hover{background:#000}.bp-media-overlay-play-container{position:absolute;top:50%;left:50%;display:flex;gap:28px;align-items:center;justify-content:center;color:#fff;font-size:40px;text-align:center;transform:translate(-50%, -50%);cursor:pointer;transition:all .2s}.bp-media-overlay-play-container button{padding:0;color:inherit;font:inherit;background:none;border:none;cursor:pointer;width:40px;height:40px;font-size:40px;text-align:center;background:#000;border-radius:40px;cursor:pointer;transition:all .2s}.bp-media-overlay-play-container .bp-media-overlay-play-button{width:60px;height:60px}.bp-has-keyboard-focus .bp-media-time-scrubber-container:focus,.bp-has-keyboard-focus .bp-media-volume-scrubber-container:focus,.bp-has-keyboard-focus .bp-media-controls-btn:focus{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.1)}.bp-dark .bp-error{color:#fff}.bp-dark .bp-icon{opacity:.9}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper{display:flex}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper .bp-crawler-wrapper{display:block}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper .bp-icon{display:none}@keyframes bp-spinner-rotate{to{transform:rotate(360deg)}}.bp-media-buffering-spinner{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border:4px solid rgba(0,97,213,.3);border-top-color:#0061d5;border-radius:40px;animation:bp-spinner-rotate .8s linear infinite}.bp-is-mobile *::-webkit-media-controls-start-playback-button{display:none}.bp-VideoControlsRoot{position:relative;right:auto;bottom:auto;left:auto;z-index:1;align-self:stretch;width:100%}.bp-media--v2{background:radial-gradient(ellipse at center, #2a2a2a 0%, #000 100%)}.bp-media-container--v2{padding:48px}.bp-media-container--v2 video{border:1px solid rgba(255,255,255,.12)}.bp-media-container--v2 .bp-video-preload-wrapper{top:48px;right:auto;bottom:48px;left:50%;transform:translateX(-50%)}.bp-media-container--v2 .bp-video-preload-wrapper .bp-preload{transform:none}.bp-media-container--v2 .bp-video-preload-wrapper .bp-preload-content{border:1px solid rgba(255,255,255,.12)}.bp-video-360 .bp-VideoControlsRoot{position:absolute;right:0;bottom:-1px;left:0;width:100%}.bp-video-preload-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden;background-color:transparent;opacity:1;transition:opacity .5s}.bp-video-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-video-preload-wrapper.bp-is-transparent{opacity:0}.bp-video-preload-wrapper .bp-preload{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:translateY(-60px)}.bp-video-preload-wrapper .bp-preload-content{width:100%;height:100%;object-fit:contain}.bp-video-preload-wrapper .bp-preload-placeholder{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.bp-video-preload-wrapper .bp-video-preload-play-overlay{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:rgba(0,0,0,.5);border-radius:50%;transform:translate(-50%, -50%);pointer-events:none}.bp-video-preload-wrapper .bp-video-preload-play-overlay svg{width:48px;height:48px;fill:#fff}.bp-media-dash video{display:block;width:100%;max-width:100%;max-height:100%;margin-right:auto;margin-left:auto;cursor:none}.bp-media-dash .bp-media-controls-label,.bp-media-dash .bp-media-controls-btn{opacity:.9}.bp-media-dash .bp-media-controls-label:hover,.bp-media-dash .bp-media-controls-btn:hover{opacity:1}.bp-media-dash .bp-media-controls-is-visible video{cursor:pointer}.bp-media-filmstrip-container{position:absolute;bottom:60px;left:0;display:none;width:160px;height:110px;overflow:hidden;border:1px solid #464a4f}.bp-media-filmstrip{position:relative}.bp-media-filmstrip-timecode{position:absolute;bottom:0;z-index:1;width:100%;color:#fff;font-size:13px;line-height:18px;text-align:center;background-color:#222}.bp-media-crawler-wrapper{position:relative;top:50%;left:50%;z-index:1;width:10px;margin:-15px 0 0 -5px}.bp-media-dash-stats{position:absolute;top:20px;right:20px;color:#fff;font-size:24px}.bp-video-360 .bp-media-container{display:flex}.bp-is-mobile .bp-video-360 .bp-media-container .bp-media-controls-wrapper{visibility:visible !important;opacity:1 !important}.bp-video-360 canvas{cursor:move;cursor:grab}
|
|
76
78
|
.bp-FindBarToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-FindBarToggle:focus:not(:disabled),.bp-FindBarToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-FindBarToggle:focus:not(:disabled) svg,.bp-FindBarToggle:hover:not(:disabled) svg,.bp-FindBarToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-FindBarToggle.bp-is-active,.bp-FindBarToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-FindBarToggle.bp-is-active:focus:not(:disabled),.bp-FindBarToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-FindBarToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-FindBarToggle: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-FindBarToggle:focus:not(:focus-visible){box-shadow:none}.bp-FindBarToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-FindBarToggle svg{width:32px;height:32px;padding:5px}
|
|
79
|
+
.bp-GalleryToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-GalleryToggle:focus:not(:disabled),.bp-GalleryToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-GalleryToggle:focus:not(:disabled) svg,.bp-GalleryToggle:hover:not(:disabled) svg,.bp-GalleryToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-GalleryToggle.bp-is-active,.bp-GalleryToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-GalleryToggle.bp-is-active:focus:not(:disabled),.bp-GalleryToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-GalleryToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-GalleryToggle: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-GalleryToggle:focus:not(:focus-visible){box-shadow:none}.bp-GalleryToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-GalleryToggle svg{width:32px;height:32px;padding:5px}
|
|
77
80
|
.bp-ThumbnailsToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-ThumbnailsToggle:focus:not(:disabled),.bp-ThumbnailsToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-ThumbnailsToggle:focus:not(:disabled) svg,.bp-ThumbnailsToggle:hover:not(:disabled) svg,.bp-ThumbnailsToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-ThumbnailsToggle.bp-is-active,.bp-ThumbnailsToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-ThumbnailsToggle.bp-is-active:focus:not(:disabled),.bp-ThumbnailsToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-ThumbnailsToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-ThumbnailsToggle: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-ThumbnailsToggle:focus:not(:focus-visible){box-shadow:none}.bp-ThumbnailsToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-ThumbnailsToggle svg{width:32px;height:32px;padding:5px}
|
|
81
|
+
.bp-gallery-grid{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:16px;align-items:start;padding:40px;padding-bottom:100px;overflow-y:auto;background-color:#fff}.bp-gallery-tile{position:relative;padding:0;background:#f5f5f5;border:none;border-radius:12px;box-shadow:0 0 0 1px #eaeaea;cursor:pointer;transition:box-shadow .2s ease-in-out}.bp-gallery-tile:hover{box-shadow:0 0 0 3px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp-gallery-tile:hover .bp-gallery-tile-badge{opacity:1}.bp-gallery-tile:focus{outline:none}.bp-gallery-tile img{display:block;width:100%;height:auto;border-radius:12px}.bp-gallery-tile--selected{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected:hover,.bp-gallery-tile--selected:focus{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected .bp-gallery-tile-badge{background:#0061d5;opacity:1}.bp-gallery-tile-badge{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 4px;color:#fff;font-size:13px;line-height:1;background:#767676;border-radius:12px 0 12px 0;opacity:0;transition:opacity .15s}.bp-gallery-tile-placeholder{display:block;width:100%;padding-top:129%}
|
|
78
82
|
.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #222,0 4px 5px 0 rgba(0,0,0,.08)}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#222}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#222}.bp .bp-ThumbnailsToggle{display:none}.bp .bp-thumbnails-container{position:absolute;top:0;bottom:0;left:0;display:none;flex:0 0 auto;width:191px}.bp .bp-thumbnails-container:focus{outline:none}.bp .bp-thumbnail{position:relative;display:flex;margin-right:20px;margin-left:20px;cursor:pointer;transition:transform .2s ease-in-out}.bp .bp-thumbnail:focus,.bp .bp-thumbnail:hover{transform:translateY(-1px) scale(1.02)}.bp .bp-thumbnail:focus .bp-thumbnail-page-number,.bp .bp-thumbnail:hover .bp-thumbnail-page-number{background:#767676;opacity:1}.bp .bp-thumbnail:focus .bp-thumbnail-nav,.bp .bp-thumbnail:hover .bp-thumbnail-nav{box-shadow:0 0 0 1px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp .bp-thumbnail:focus.bp-thumbnail-image-loaded .bp-thumbnail-nav,.bp .bp-thumbnail:hover.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#767676}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#0061d5;opacity:1}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#0061d5}.bp .bp-thumbnail:not(.bp-thumbnail-image-loaded) .bp-thumbnail-nav{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp .bp-thumbnail-nav{flex:0 0 150px;overflow:hidden;background-color:#d8d8d8;border-radius:6px;box-shadow:0 0 0 1px #e8e8e8,0 1px 4px 0 rgba(0,0,0,.08);transition:box-shadow .2s ease-in-out}.bp .bp-thumbnail-page-number{position:absolute;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding-right:3px;padding-left:3px;color:#fff;font-size:13px;border-radius:3px 0 6px 0;box-shadow:1px 1px 2px 0 rgba(0,0,0,.2);opacity:0}.bp .bp-thumbnail-image{background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}.bp .bp-thumbnails-container--dark{background-color:#444;border-right-color:#000}.bp .bp-thumbnails-container--dark .bp-thumbnail-page-number{background-color:#444}.bp .bp-thumbnails-container--dark .bp-thumbnail-nav{border-color:#444}@keyframes bp-thumbnails-open{0%{display:none;transform:translateX(-191px)}1%{display:flex;transform:translateX(-191px)}100%{transform:translateX(0)}}@media(min-width: 768px){.bp.bp-loaded.bp-thumbnails-open-active .bp-content,.bp.bp-loaded.bp-thumbnails-close-active .bp-content{transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container{display:none;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container,.bp.bp-thumbnails-close .bp-thumbnails-container,.bp.bp-thumbnails-close-active .bp-thumbnails-container{transform:translateX(-191px)}.bp.bp-thumbnails-close .bp-thumbnails-container{display:none}.bp.bp-thumbnails-close-active .bp-thumbnails-container{display:flex}.bp.bp-thumbnails-open .bp-content{left:191px}.bp.bp-thumbnails-open .bp-content.bp-is-fullscreen{left:0}.bp.bp-thumbnails-open .bp-thumbnails-container{display:flex;transform:translateX(0)}.bp.bp-thumbnails-open-active .bp-thumbnails-container{animation:bp-thumbnails-open 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-ThumbnailsToggle{display:flex}}@media(max-width: 767px){.bp-is-mobile .bp-ZoomControls{display:none}}.bp-theme-dark .bp .bp-thumbnails-container{border-right-color:#222}.bp-doc{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;overflow:hidden;letter-spacing:normal;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bp-doc [hidden]{display:none !important}.bp-doc.bp-is-scrollable{overflow:auto}.bp-doc .pdfViewer.pinching{visibility:hidden}.bp-doc .pdfViewer .page{position:relative;display:block;box-sizing:content-box !important;margin:0 auto;padding:15px 0;overflow:visible;border:0;border-image:none}.bp-doc .pdfViewer .page:not(.bp-is-invisible)::before{box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:absolute;top:15px;right:0;bottom:15px;left:0;display:block;content:""}.bp-doc .pdfViewer .page:not(.bp-is-invisible) .loadingIcon:first-child{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp-doc .pdfViewer .page .loadingIcon{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page.loadingIcon::after{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page .textAnnotation>img{opacity:0}.bp-doc .pdfViewer .page.pinch-page{padding:0;visibility:visible}.bp-doc .pdfViewer .page.pinch-page .textLayer{display:none}.bp-doc .pdfViewer.pdfViewer--viewOnly .textLayer span{cursor:unset;-webkit-user-select:none;user-select:none}.bp-doc .textLayer{top:15px;bottom:auto;z-index:1;opacity:1;caret-color:#000}.bp-doc .textLayer>div{-webkit-user-select:text;user-select:text}.bp-doc .textLayer .highlight{display:inline-block;background-color:rgba(180,0,170,.2)}.bp-doc .textLayer .highlight.selected{background-color:rgba(0,100,0,.2)}.bp-doc .textLayer .rangy-highlight{opacity:.2}.bp-doc .textLayer ::selection{background-color:rgba(0,97,213,.1)}.bp-doc input,.bp-doc p,.bp-doc span{-webkit-user-select:text;user-select:text}.bp-doc .annotationLayer h1,.bp-doc .annotationLayer h2,.bp-doc .annotationLayer h3,.bp-doc .annotationLayer h4,.bp-doc .annotationLayer h5,.bp-doc .annotationLayer h6,.bp-doc .annotationLayer p{margin:0}.bp-doc .annotationLayer h1{font-size:1em}.bp-doc .annotationLayer section{margin-top:15px}.bp-doc .annotationLayer .popup{font-size:inherit}.bp-doc .annotationLayer .popup .header{height:unset;padding:unset !important;background-color:unset}.bp-print-notification{display:none;font-size:24px}@media print{.bp-doc{display:none}.bp-print-notification{display:block}}.bp-content.bp-annotations-discoverable .ba-PopupCursor{display:none}.bp-content.bp-annotations-discoverable .textLayer{pointer-events:none}.bp-content.bp-annotations-discoverable .textLayer span{pointer-events:auto}@media(max-width: 767px){.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-AnnotationsControls-exitBtn{display:block}.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls){display:none}}.bp-content.bp-annotations-create--highlight .ba-PopupCursor,.bp-content.bp-annotations-create--region .ba-PopupCursor{display:block}.bp-content.bp-annotations-create--highlight .annotationLayer,.bp-content.bp-annotations-create--region .annotationLayer{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget,.bp-content.bp-annotations-create--region .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect,.bp-content.bp-annotations-create--region .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation,.bp-content.bp-annotations-create--region .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation{pointer-events:none}.bp-content.bp-annotations-create--region.bp-annotations-ftux-document-cursor-seen .ba-PopupCursor{display:none}.bp-content.bp-annotations-create--region .textLayer,.bp-content.bp-annotations-create--region .textLayer span{pointer-events:none}.bp-content.bp-is-fullscreen .bp-ThumbnailsToggle{display:none}.bp-find-bar{position:absolute;top:0;right:17px;z-index:3;display:flex;align-items:center;padding:6px;font-size:12px;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;border:1px solid #e8e8e8}.bp-find-bar ::-ms-clear{display:none}.bp-find-bar .bp-doc-find-field{width:200px;height:34px;padding:6px 6px 6px 25px;color:#494949;line-height:20px;border:1px solid #e8e8e8;border-radius:2px 0 0 2px;outline-style:none;transition-timing-function:ease;transition-duration:150ms;transition-property:border-color}.bp-find-bar .bp-doc-find-field:focus,.bp-find-bar .bp-doc-find-field:hover{border-color:#0061d5}.bp-find-bar .bp-doc-find-results-count{position:absolute;top:37%;right:120px;margin:0;padding:0;color:rgba(73,73,73,.25);line-height:1;text-align:right;cursor:default;-webkit-user-select:none;user-select:none}.bp-find-bar .bp-doc-find-search,.bp-find-bar .bp-doc-find-prev,.bp-find-bar .bp-doc-find-next,.bp-find-bar .bp-doc-find-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;line-height:1;vertical-align:middle;background:none;border:1px solid #e8e8e8;border-left:0;cursor:pointer}.bp-find-bar .bp-doc-find-search svg,.bp-find-bar .bp-doc-find-prev svg,.bp-find-bar .bp-doc-find-next svg,.bp-find-bar .bp-doc-find-close svg{width:17px}.bp-find-bar .bp-doc-find-search .icon,.bp-find-bar .bp-doc-find-prev .icon,.bp-find-bar .bp-doc-find-next .icon,.bp-find-bar .bp-doc-find-close .icon{fill:rgba(73,73,73,.75)}.bp-find-bar .bp-doc-find-prev:hover .icon,.bp-find-bar .bp-doc-find-next:hover .icon,.bp-find-bar .bp-doc-find-close:hover .icon{fill:#494949}.bp-find-bar .bp-doc-find-search{position:absolute;top:15%;left:5px;margin:0;line-height:1;text-align:left;border:0;pointer-events:none}.bp-find-bar .bp-doc-find-search svg{width:12px;height:12px}.bp-find-bar .bp-doc-find-close{border:0}.bp-find-bar .bp-doc-find-close svg{width:22px}.bp-find-bar .bp-find-match-not-found,.bp-find-bar .bp-find-match-not-found:hover,.bp-find-bar .bp-find-match-not-found:focus{border-color:rgba(239,72,54,.5)}.bp-find-bar .bp-doc-find-controls{display:flex}.bp .bp-doc.bp-doc-document{overflow-y:scroll}.bp-document-preload-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;margin:0;overflow-y:scroll;scrollbar-gutter:stable;background-color:#f5f5f5;opacity:1;transition:opacity .5s}.bp-document-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-document-preload-wrapper.bp-is-transparent{opacity:0}.bp-theme-dark .bp-document-preload-wrapper{background-color:#464a4f}.bp-document-preload-wrapper .bp-preload-content,.bp-document-preload-wrapper .bp-preload-overlay,.bp-document-preload-wrapper .bp-preload-placeholder::before{position:absolute;top:0;right:0;bottom:0;left:0}.bp-document-preload-wrapper .bp-preload-content{width:100%}.bp-document-preload-wrapper .bp-preload-overlay{background-color:rgba(255,255,255,.4)}.bp-document-preload-wrapper .bp-preload-placeholder{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%;box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:relative;margin:15px auto 30px}.bp-document-preload-wrapper .bp-preload-placeholder img.doc-first-image{width:100%;height:100%}.bp-document-preload-wrapper .bp-preload-placeholder img.loaded{visibility:visible}
|
|
79
83
|
.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #222,0 4px 5px 0 rgba(0,0,0,.08)}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#222}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#222}.bp .bp-ThumbnailsToggle{display:none}.bp .bp-thumbnails-container{position:absolute;top:0;bottom:0;left:0;display:none;flex:0 0 auto;width:191px}.bp .bp-thumbnails-container:focus{outline:none}.bp .bp-thumbnail{position:relative;display:flex;margin-right:20px;margin-left:20px;cursor:pointer;transition:transform .2s ease-in-out}.bp .bp-thumbnail:focus,.bp .bp-thumbnail:hover{transform:translateY(-1px) scale(1.02)}.bp .bp-thumbnail:focus .bp-thumbnail-page-number,.bp .bp-thumbnail:hover .bp-thumbnail-page-number{background:#767676;opacity:1}.bp .bp-thumbnail:focus .bp-thumbnail-nav,.bp .bp-thumbnail:hover .bp-thumbnail-nav{box-shadow:0 0 0 1px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp .bp-thumbnail:focus.bp-thumbnail-image-loaded .bp-thumbnail-nav,.bp .bp-thumbnail:hover.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#767676}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#0061d5;opacity:1}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#0061d5}.bp .bp-thumbnail:not(.bp-thumbnail-image-loaded) .bp-thumbnail-nav{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp .bp-thumbnail-nav{flex:0 0 150px;overflow:hidden;background-color:#d8d8d8;border-radius:6px;box-shadow:0 0 0 1px #e8e8e8,0 1px 4px 0 rgba(0,0,0,.08);transition:box-shadow .2s ease-in-out}.bp .bp-thumbnail-page-number{position:absolute;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding-right:3px;padding-left:3px;color:#fff;font-size:13px;border-radius:3px 0 6px 0;box-shadow:1px 1px 2px 0 rgba(0,0,0,.2);opacity:0}.bp .bp-thumbnail-image{background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}.bp .bp-thumbnails-container--dark{background-color:#444;border-right-color:#000}.bp .bp-thumbnails-container--dark .bp-thumbnail-page-number{background-color:#444}.bp .bp-thumbnails-container--dark .bp-thumbnail-nav{border-color:#444}@keyframes bp-thumbnails-open{0%{display:none;transform:translateX(-191px)}1%{display:flex;transform:translateX(-191px)}100%{transform:translateX(0)}}@media(min-width: 768px){.bp.bp-loaded.bp-thumbnails-open-active .bp-content,.bp.bp-loaded.bp-thumbnails-close-active .bp-content{transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container{display:none;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container,.bp.bp-thumbnails-close .bp-thumbnails-container,.bp.bp-thumbnails-close-active .bp-thumbnails-container{transform:translateX(-191px)}.bp.bp-thumbnails-close .bp-thumbnails-container{display:none}.bp.bp-thumbnails-close-active .bp-thumbnails-container{display:flex}.bp.bp-thumbnails-open .bp-content{left:191px}.bp.bp-thumbnails-open .bp-content.bp-is-fullscreen{left:0}.bp.bp-thumbnails-open .bp-thumbnails-container{display:flex;transform:translateX(0)}.bp.bp-thumbnails-open-active .bp-thumbnails-container{animation:bp-thumbnails-open 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-ThumbnailsToggle{display:flex}}@media(max-width: 767px){.bp-is-mobile .bp-ZoomControls{display:none}}.bp-theme-dark .bp .bp-thumbnails-container{border-right-color:#222}.bp-doc{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;overflow:hidden;letter-spacing:normal;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bp-doc [hidden]{display:none !important}.bp-doc.bp-is-scrollable{overflow:auto}.bp-doc .pdfViewer.pinching{visibility:hidden}.bp-doc .pdfViewer .page{position:relative;display:block;box-sizing:content-box !important;margin:0 auto;padding:15px 0;overflow:visible;border:0;border-image:none}.bp-doc .pdfViewer .page:not(.bp-is-invisible)::before{box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:absolute;top:15px;right:0;bottom:15px;left:0;display:block;content:""}.bp-doc .pdfViewer .page:not(.bp-is-invisible) .loadingIcon:first-child{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp-doc .pdfViewer .page .loadingIcon{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page.loadingIcon::after{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page .textAnnotation>img{opacity:0}.bp-doc .pdfViewer .page.pinch-page{padding:0;visibility:visible}.bp-doc .pdfViewer .page.pinch-page .textLayer{display:none}.bp-doc .pdfViewer.pdfViewer--viewOnly .textLayer span{cursor:unset;-webkit-user-select:none;user-select:none}.bp-doc .textLayer{top:15px;bottom:auto;z-index:1;opacity:1;caret-color:#000}.bp-doc .textLayer>div{-webkit-user-select:text;user-select:text}.bp-doc .textLayer .highlight{display:inline-block;background-color:rgba(180,0,170,.2)}.bp-doc .textLayer .highlight.selected{background-color:rgba(0,100,0,.2)}.bp-doc .textLayer .rangy-highlight{opacity:.2}.bp-doc .textLayer ::selection{background-color:rgba(0,97,213,.1)}.bp-doc input,.bp-doc p,.bp-doc span{-webkit-user-select:text;user-select:text}.bp-doc .annotationLayer h1,.bp-doc .annotationLayer h2,.bp-doc .annotationLayer h3,.bp-doc .annotationLayer h4,.bp-doc .annotationLayer h5,.bp-doc .annotationLayer h6,.bp-doc .annotationLayer p{margin:0}.bp-doc .annotationLayer h1{font-size:1em}.bp-doc .annotationLayer section{margin-top:15px}.bp-doc .annotationLayer .popup{font-size:inherit}.bp-doc .annotationLayer .popup .header{height:unset;padding:unset !important;background-color:unset}.bp-print-notification{display:none;font-size:24px}@media print{.bp-doc{display:none}.bp-print-notification{display:block}}.bp-content.bp-annotations-discoverable .ba-PopupCursor{display:none}.bp-content.bp-annotations-discoverable .textLayer{pointer-events:none}.bp-content.bp-annotations-discoverable .textLayer span{pointer-events:auto}@media(max-width: 767px){.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-AnnotationsControls-exitBtn{display:block}.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls){display:none}}.bp-content.bp-annotations-create--highlight .ba-PopupCursor,.bp-content.bp-annotations-create--region .ba-PopupCursor{display:block}.bp-content.bp-annotations-create--highlight .annotationLayer,.bp-content.bp-annotations-create--region .annotationLayer{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget,.bp-content.bp-annotations-create--region .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect,.bp-content.bp-annotations-create--region .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation,.bp-content.bp-annotations-create--region .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation{pointer-events:none}.bp-content.bp-annotations-create--region.bp-annotations-ftux-document-cursor-seen .ba-PopupCursor{display:none}.bp-content.bp-annotations-create--region .textLayer,.bp-content.bp-annotations-create--region .textLayer span{pointer-events:none}.bp-content.bp-is-fullscreen .bp-ThumbnailsToggle{display:none}.bp-find-bar{position:absolute;top:0;right:17px;z-index:3;display:flex;align-items:center;padding:6px;font-size:12px;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;border:1px solid #e8e8e8}.bp-find-bar ::-ms-clear{display:none}.bp-find-bar .bp-doc-find-field{width:200px;height:34px;padding:6px 6px 6px 25px;color:#494949;line-height:20px;border:1px solid #e8e8e8;border-radius:2px 0 0 2px;outline-style:none;transition-timing-function:ease;transition-duration:150ms;transition-property:border-color}.bp-find-bar .bp-doc-find-field:focus,.bp-find-bar .bp-doc-find-field:hover{border-color:#0061d5}.bp-find-bar .bp-doc-find-results-count{position:absolute;top:37%;right:120px;margin:0;padding:0;color:rgba(73,73,73,.25);line-height:1;text-align:right;cursor:default;-webkit-user-select:none;user-select:none}.bp-find-bar .bp-doc-find-search,.bp-find-bar .bp-doc-find-prev,.bp-find-bar .bp-doc-find-next,.bp-find-bar .bp-doc-find-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;line-height:1;vertical-align:middle;background:none;border:1px solid #e8e8e8;border-left:0;cursor:pointer}.bp-find-bar .bp-doc-find-search svg,.bp-find-bar .bp-doc-find-prev svg,.bp-find-bar .bp-doc-find-next svg,.bp-find-bar .bp-doc-find-close svg{width:17px}.bp-find-bar .bp-doc-find-search .icon,.bp-find-bar .bp-doc-find-prev .icon,.bp-find-bar .bp-doc-find-next .icon,.bp-find-bar .bp-doc-find-close .icon{fill:rgba(73,73,73,.75)}.bp-find-bar .bp-doc-find-prev:hover .icon,.bp-find-bar .bp-doc-find-next:hover .icon,.bp-find-bar .bp-doc-find-close:hover .icon{fill:#494949}.bp-find-bar .bp-doc-find-search{position:absolute;top:15%;left:5px;margin:0;line-height:1;text-align:left;border:0;pointer-events:none}.bp-find-bar .bp-doc-find-search svg{width:12px;height:12px}.bp-find-bar .bp-doc-find-close{border:0}.bp-find-bar .bp-doc-find-close svg{width:22px}.bp-find-bar .bp-find-match-not-found,.bp-find-bar .bp-find-match-not-found:hover,.bp-find-bar .bp-find-match-not-found:focus{border-color:rgba(239,72,54,.5)}.bp-find-bar .bp-doc-find-controls{display:flex}.bp-doc.bp-doc-presentation{overflow:hidden}.bp-doc.bp-doc-presentation .pdfViewer .page{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.bp-doc.bp-doc-presentation .pdfViewer .page.bp-is-invisible{opacity:0}.bp-doc.bp-doc-presentation.overflow-x{overflow-x:scroll}.bp-doc.bp-doc-presentation.overflow-y{overflow-y:scroll}.bp-doc.bp-doc-presentation.overflow-y .pdfViewer .page{margin-top:5px}.bp-presentation-preload-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;align-content:center;margin:0;background-color:#f5f5f5;transition:opacity .5s}.bp-presentation-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-presentation-preload-wrapper.bp-is-transparent{opacity:0}.bp-theme-dark .bp-presentation-preload-wrapper{background-color:#464a4f}.bp-presentation-preload-wrapper .bp-preload-content,.bp-presentation-preload-wrapper .bp-preload-overlay,.bp-presentation-preload-wrapper .bp-preload-placeholder::before{position:absolute;top:0;right:0;bottom:0;left:0}.bp-presentation-preload-wrapper .bp-preload-content{width:100%}.bp-presentation-preload-wrapper .bp-preload-overlay{background-color:rgba(255,255,255,.4)}.bp-presentation-preload-wrapper .bp-preload-placeholder{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%;box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:relative;margin:auto;padding-top:5px}.bp-presentation-preload-wrapper .bp-preload-placeholder img.doc-first-image{width:100%;height:100%}.bp-presentation-preload-wrapper .bp-preload-placeholder img.loaded{visibility:visible}
|
|
80
84
|
.bp-AnimationClipsToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-AnimationClipsToggle:focus:not(:disabled),.bp-AnimationClipsToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-AnimationClipsToggle:focus:not(:disabled) svg,.bp-AnimationClipsToggle:hover:not(:disabled) svg,.bp-AnimationClipsToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-AnimationClipsToggle.bp-is-active,.bp-AnimationClipsToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-AnimationClipsToggle.bp-is-active:focus:not(:disabled),.bp-AnimationClipsToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-AnimationClipsToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-AnimationClipsToggle: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-AnimationClipsToggle:focus:not(:focus-visible){box-shadow:none}.bp-AnimationClipsToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-AnimationClipsToggle svg{width:32px;height:32px;padding:5px}
|
package/dist/lib/index.js
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
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
24
|
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";
|
|
25
|
-
import { createElement as __WEBPACK_EXTERNAL_MODULE_react_createElement__, default as __WEBPACK_EXTERNAL_MODULE_react_default__, useEffect as __WEBPACK_EXTERNAL_MODULE_react_useEffect__, useRef as __WEBPACK_EXTERNAL_MODULE_react_useRef__, useState as __WEBPACK_EXTERNAL_MODULE_react_useState__ } from "react";
|
|
25
|
+
import { createElement as __WEBPACK_EXTERNAL_MODULE_react_createElement__, default as __WEBPACK_EXTERNAL_MODULE_react_default__, useCallback as __WEBPACK_EXTERNAL_MODULE_react_useCallback__, useEffect as __WEBPACK_EXTERNAL_MODULE_react_useEffect__, useRef as __WEBPACK_EXTERNAL_MODULE_react_useRef__, useState as __WEBPACK_EXTERNAL_MODULE_react_useState__ } from "react";
|
|
26
26
|
import { createRoot as __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__ } from "react-dom/client";
|
|
27
27
|
import { default as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_tooltip_Tooltip_97b5ae91_default__ } from "box-ui-elements/es/components/tooltip/Tooltip";
|
|
28
28
|
import { withTargetedClickThrough as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_features_targeting_hocs_e326fa91_withTargetedClickThrough__ } from "box-ui-elements/es/features/targeting/hocs";
|
|
@@ -9340,7 +9340,7 @@ function util_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
|
|
|
9340
9340
|
const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
|
|
9341
9341
|
const CLIENT_NAME_KEY = 'box_client_name';
|
|
9342
9342
|
const CLIENT_VERSION_KEY = 'box_client_version';
|
|
9343
|
-
const CLIENT_VERSION = "3.
|
|
9343
|
+
const CLIENT_VERSION = "3.51.0"; // eslint-disable-line no-undef
|
|
9344
9344
|
const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
|
|
9345
9345
|
const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
|
|
9346
9346
|
const PROMISE_MAP = {};
|
|
@@ -11058,7 +11058,7 @@ class Browser {
|
|
|
11058
11058
|
;// ./src/lib/Logger.js
|
|
11059
11059
|
/* eslint-disable no-undef */
|
|
11060
11060
|
const Logger_CLIENT_NAME = "box-content-preview";
|
|
11061
|
-
const Logger_CLIENT_VERSION = "3.
|
|
11061
|
+
const Logger_CLIENT_VERSION = "3.51.0";
|
|
11062
11062
|
/* eslint-enable no-undef */
|
|
11063
11063
|
|
|
11064
11064
|
class Logger {
|
|
@@ -13706,8 +13706,12 @@ function ControlsLayer(_ref) {
|
|
|
13706
13706
|
hasCursorRef.current = true;
|
|
13707
13707
|
helpersRef.current.show();
|
|
13708
13708
|
};
|
|
13709
|
-
const handleMouseLeave =
|
|
13709
|
+
const handleMouseLeave = event => {
|
|
13710
13710
|
hasCursorRef.current = false;
|
|
13711
|
+
const layerEl = event.currentTarget;
|
|
13712
|
+
if (document.activeElement && layerEl.contains(document.activeElement)) {
|
|
13713
|
+
document.activeElement.blur();
|
|
13714
|
+
}
|
|
13711
13715
|
helpersRef.current.hide();
|
|
13712
13716
|
};
|
|
13713
13717
|
|
|
@@ -26328,9 +26332,10 @@ class VideoBaseViewer extends media_MediaBaseViewer {
|
|
|
26328
26332
|
* @inheritdoc
|
|
26329
26333
|
*/
|
|
26330
26334
|
constructor(options) {
|
|
26331
|
-
|
|
26332
|
-
|
|
26335
|
+
var _this;
|
|
26333
26336
|
// Bind context for handlers
|
|
26337
|
+
super(options);
|
|
26338
|
+
_this = this;
|
|
26334
26339
|
VideoBaseViewer_defineProperty(this, "videoAnnotationsEnabled", false);
|
|
26335
26340
|
/** @property {VideoPreloader} - Video preloader instance */
|
|
26336
26341
|
VideoBaseViewer_defineProperty(this, "preloader", void 0);
|
|
@@ -26349,6 +26354,25 @@ class VideoBaseViewer extends media_MediaBaseViewer {
|
|
|
26349
26354
|
VideoBaseViewer_defineProperty(this, "handleControlsShow", () => {
|
|
26350
26355
|
this.mediaContainerEl.classList.add('bp-media-controls-is-visible');
|
|
26351
26356
|
});
|
|
26357
|
+
VideoBaseViewer_defineProperty(this, "handleCommentMarkersUpdated", function () {
|
|
26358
|
+
let markers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
26359
|
+
_this.commentMarkers = markers;
|
|
26360
|
+
_this.renderUI();
|
|
26361
|
+
});
|
|
26362
|
+
VideoBaseViewer_defineProperty(this, "handleCommentMarkerClick", marker => {
|
|
26363
|
+
if (this.mediaEl) {
|
|
26364
|
+
this.mediaEl.pause();
|
|
26365
|
+
this.mediaEl.currentTime = marker.time;
|
|
26366
|
+
}
|
|
26367
|
+
if (marker.type === 'annotation' && this.annotator) {
|
|
26368
|
+
this.annotator.emit('annotations_active_set', marker.id);
|
|
26369
|
+
}
|
|
26370
|
+
this.emit('comment_marker_select', {
|
|
26371
|
+
id: marker.id,
|
|
26372
|
+
time: marker.time
|
|
26373
|
+
});
|
|
26374
|
+
this.renderUI();
|
|
26375
|
+
});
|
|
26352
26376
|
this.handleControlsHide = this.handleControlsHide.bind(this);
|
|
26353
26377
|
this.handleControlsShow = this.handleControlsShow.bind(this);
|
|
26354
26378
|
this.handlePlayRequest = this.handlePlayRequest.bind(this);
|
|
@@ -26704,6 +26728,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
|
|
|
26704
26728
|
onShow: this.handleControlsShow
|
|
26705
26729
|
});
|
|
26706
26730
|
this.addListener('annotator_create', () => this.renderUI());
|
|
26731
|
+
this.addListener('comment_markers', this.handleCommentMarkersUpdated);
|
|
26707
26732
|
this.renderUI();
|
|
26708
26733
|
}
|
|
26709
26734
|
|
|
@@ -26976,6 +27001,13 @@ class VideoBaseViewer extends media_MediaBaseViewer {
|
|
|
26976
27001
|
this.rootEl.classList.add(CLASS_DARK);
|
|
26977
27002
|
}
|
|
26978
27003
|
}
|
|
27004
|
+
handleFullscreenEnter() {
|
|
27005
|
+
super.handleFullscreenEnter();
|
|
27006
|
+
if (this.controls?.controlsLayer?.reset) {
|
|
27007
|
+
this.controls.controlsLayer.reset();
|
|
27008
|
+
this.showAndHideReactControls();
|
|
27009
|
+
}
|
|
27010
|
+
}
|
|
26979
27011
|
/**
|
|
26980
27012
|
* Hides the create region cursor popup for a document
|
|
26981
27013
|
*
|
|
@@ -27062,7 +27094,6 @@ class VideoBaseViewer extends media_MediaBaseViewer {
|
|
|
27062
27094
|
this.annotator.emit('annotations_active_set', id);
|
|
27063
27095
|
}
|
|
27064
27096
|
}
|
|
27065
|
-
|
|
27066
27097
|
/**
|
|
27067
27098
|
* Handles the 'scrolltoannotation' event and calls the annotator scroll method
|
|
27068
27099
|
* @param {string | Object} event - Annotation Event
|
|
@@ -27677,6 +27708,89 @@ function FilmstripV2(_ref) {
|
|
|
27677
27708
|
"data-testid": "bp-FilmstripV2-time"
|
|
27678
27709
|
}, formatTimecode(time, fps)));
|
|
27679
27710
|
}
|
|
27711
|
+
;// ./src/lib/viewers/controls/media/MarkerAvatar.scss
|
|
27712
|
+
// extracted by mini-css-extract-plugin
|
|
27713
|
+
|
|
27714
|
+
;// ./src/lib/viewers/controls/media/MarkerAvatar.tsx
|
|
27715
|
+
|
|
27716
|
+
|
|
27717
|
+
const AVATAR_PALETTE = [{
|
|
27718
|
+
bg: '#7fb0ea',
|
|
27719
|
+
fg: '#222'
|
|
27720
|
+
}, {
|
|
27721
|
+
bg: '#003c84',
|
|
27722
|
+
fg: '#fff'
|
|
27723
|
+
}, {
|
|
27724
|
+
bg: '#ffeb7f',
|
|
27725
|
+
fg: '#222'
|
|
27726
|
+
}, {
|
|
27727
|
+
bg: '#92e0c0',
|
|
27728
|
+
fg: '#222'
|
|
27729
|
+
}, {
|
|
27730
|
+
bg: '#fad98d',
|
|
27731
|
+
fg: '#222'
|
|
27732
|
+
}, {
|
|
27733
|
+
bg: '#91c2fd',
|
|
27734
|
+
fg: '#222'
|
|
27735
|
+
}, {
|
|
27736
|
+
bg: '#f69bab',
|
|
27737
|
+
fg: '#222'
|
|
27738
|
+
}, {
|
|
27739
|
+
bg: '#cf9ff6',
|
|
27740
|
+
fg: '#222'
|
|
27741
|
+
}, {
|
|
27742
|
+
bg: '#f8c08c',
|
|
27743
|
+
fg: '#222'
|
|
27744
|
+
}, {
|
|
27745
|
+
bg: '#a392e0',
|
|
27746
|
+
fg: '#222'
|
|
27747
|
+
}];
|
|
27748
|
+
function AnonymousAvatarIcon() {
|
|
27749
|
+
return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("svg", {
|
|
27750
|
+
"aria-hidden": "true",
|
|
27751
|
+
className: "bp-MarkerAvatar-anonymousIcon",
|
|
27752
|
+
focusable: "false",
|
|
27753
|
+
viewBox: "0 0 16 16"
|
|
27754
|
+
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("path", {
|
|
27755
|
+
d: "M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 1.5c-2.5 0-5 1.25-5 3.75V14h10v-.75c0-2.5-2.5-3.75-5-3.75Z",
|
|
27756
|
+
fill: "currentColor"
|
|
27757
|
+
}));
|
|
27758
|
+
}
|
|
27759
|
+
function MarkerAvatar(_ref) {
|
|
27760
|
+
let {
|
|
27761
|
+
avatarUrl,
|
|
27762
|
+
colorIndex = 0,
|
|
27763
|
+
initial
|
|
27764
|
+
} = _ref;
|
|
27765
|
+
const safeIndex = Number.isFinite(colorIndex) ? Math.abs(colorIndex) % AVATAR_PALETTE.length : 0;
|
|
27766
|
+
const {
|
|
27767
|
+
bg: bgColor,
|
|
27768
|
+
fg: textColor
|
|
27769
|
+
} = AVATAR_PALETTE[safeIndex];
|
|
27770
|
+
const [imgFailed, setImgFailed] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(false);
|
|
27771
|
+
const showImage = Boolean(avatarUrl) && !imgFailed;
|
|
27772
|
+
let avatar = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(AnonymousAvatarIcon, null);
|
|
27773
|
+
if (showImage) {
|
|
27774
|
+
avatar = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("img", {
|
|
27775
|
+
alt: "",
|
|
27776
|
+
onError: () => setImgFailed(true),
|
|
27777
|
+
src: avatarUrl
|
|
27778
|
+
});
|
|
27779
|
+
} else if (initial) {
|
|
27780
|
+
avatar = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
|
|
27781
|
+
className: "bp-MarkerAvatar-initial",
|
|
27782
|
+
style: {
|
|
27783
|
+
color: textColor
|
|
27784
|
+
}
|
|
27785
|
+
}, initial);
|
|
27786
|
+
}
|
|
27787
|
+
return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
|
|
27788
|
+
className: "bp-MarkerAvatar",
|
|
27789
|
+
style: !showImage ? {
|
|
27790
|
+
backgroundColor: bgColor
|
|
27791
|
+
} : undefined
|
|
27792
|
+
}, avatar);
|
|
27793
|
+
}
|
|
27680
27794
|
;// ./src/lib/viewers/controls/media/TimeControlsV2.scss
|
|
27681
27795
|
// extracted by mini-css-extract-plugin
|
|
27682
27796
|
|
|
@@ -27688,6 +27802,7 @@ function FilmstripV2(_ref) {
|
|
|
27688
27802
|
|
|
27689
27803
|
|
|
27690
27804
|
|
|
27805
|
+
|
|
27691
27806
|
const TimeControlsV2_round = value => {
|
|
27692
27807
|
return +value.toFixed(4);
|
|
27693
27808
|
};
|
|
@@ -27697,12 +27812,14 @@ const TimeControlsV2_percent = (value1, value2) => {
|
|
|
27697
27812
|
function TimeControlsV2(_ref) {
|
|
27698
27813
|
let {
|
|
27699
27814
|
aspectRatio,
|
|
27815
|
+
commentMarkers = [],
|
|
27700
27816
|
currentTime = 0,
|
|
27701
27817
|
durationTime = 0,
|
|
27702
27818
|
filmstripInterval,
|
|
27703
27819
|
filmstripUrl,
|
|
27704
27820
|
fps,
|
|
27705
27821
|
mediaEl,
|
|
27822
|
+
onCommentMarkerClick,
|
|
27706
27823
|
onTimeChange
|
|
27707
27824
|
} = _ref;
|
|
27708
27825
|
const [isSliderHovered, setIsSliderHovered] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(false);
|
|
@@ -27712,6 +27829,23 @@ function TimeControlsV2(_ref) {
|
|
|
27712
27829
|
const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
|
|
27713
27830
|
const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
|
|
27714
27831
|
const currentPercentage = TimeControlsV2_percent(currentValue, durationValue);
|
|
27832
|
+
const markerTimesKey = commentMarkers.map(m => m.time).join('|');
|
|
27833
|
+
const trackMask = __WEBPACK_EXTERNAL_MODULE_react_default__.useMemo(() => {
|
|
27834
|
+
if (durationValue <= 0 || commentMarkers.length === 0) return undefined;
|
|
27835
|
+
const HALF_GAP = 2;
|
|
27836
|
+
const stops = [];
|
|
27837
|
+
const sorted = commentMarkers.map(m => TimeControlsV2_percent(m.time, durationValue)).sort((a, b) => a - b);
|
|
27838
|
+
stops.push('black 0%');
|
|
27839
|
+
sorted.forEach(pos => {
|
|
27840
|
+
stops.push(`black calc(${pos}% - ${HALF_GAP}px)`);
|
|
27841
|
+
stops.push(`transparent calc(${pos}% - ${HALF_GAP}px)`);
|
|
27842
|
+
stops.push(`transparent calc(${pos}% + ${HALF_GAP}px)`);
|
|
27843
|
+
stops.push(`black calc(${pos}% + ${HALF_GAP}px)`);
|
|
27844
|
+
});
|
|
27845
|
+
stops.push('black 100%');
|
|
27846
|
+
return `linear-gradient(to right, ${stops.join(', ')})`;
|
|
27847
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
27848
|
+
}, [markerTimesKey, durationValue]);
|
|
27715
27849
|
const handleMouseMove = (newTime, newPosition, width) => {
|
|
27716
27850
|
setHoverPosition(newPosition);
|
|
27717
27851
|
setHoverPositionMax(width);
|
|
@@ -27729,7 +27863,12 @@ function TimeControlsV2(_ref) {
|
|
|
27729
27863
|
position: hoverPosition,
|
|
27730
27864
|
positionMax: hoverPositionMax,
|
|
27731
27865
|
time: hoverTime
|
|
27732
|
-
}), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(
|
|
27866
|
+
}), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
|
|
27867
|
+
className: "bp-TimeControlsV2-scrubber",
|
|
27868
|
+
style: trackMask ? {
|
|
27869
|
+
'--bp-track-mask': trackMask
|
|
27870
|
+
} : undefined
|
|
27871
|
+
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(SliderControl, {
|
|
27733
27872
|
className: "bp-TimeControlsV2-slider",
|
|
27734
27873
|
"data-resin-target": "timeScrubber",
|
|
27735
27874
|
max: durationValue,
|
|
@@ -27744,7 +27883,81 @@ function TimeControlsV2(_ref) {
|
|
|
27744
27883
|
title: "Media Slider",
|
|
27745
27884
|
track: `linear-gradient(to right, ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_white__} calc(${currentPercentage}% - 2.5px), transparent calc(${currentPercentage}% - 2.5px), transparent calc(${currentPercentage}% + 2.5px), ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__} calc(${currentPercentage}% + 2.5px), ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__} 100%)`,
|
|
27746
27885
|
value: currentValue
|
|
27747
|
-
})
|
|
27886
|
+
}), durationValue > 0 && commentMarkers.map(marker => /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
|
|
27887
|
+
key: marker.id,
|
|
27888
|
+
"aria-label": "Comment marker",
|
|
27889
|
+
className: "bp-TimeControlsV2-marker",
|
|
27890
|
+
"data-testid": "bp-time-controls-marker",
|
|
27891
|
+
onClick: e => {
|
|
27892
|
+
e.stopPropagation();
|
|
27893
|
+
onCommentMarkerClick?.(marker);
|
|
27894
|
+
},
|
|
27895
|
+
style: {
|
|
27896
|
+
left: `${TimeControlsV2_percent(marker.time, durationValue)}%`
|
|
27897
|
+
},
|
|
27898
|
+
type: "button"
|
|
27899
|
+
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatar, {
|
|
27900
|
+
avatarUrl: marker.avatarUrl,
|
|
27901
|
+
colorIndex: marker.colorIndex,
|
|
27902
|
+
initial: marker.initial
|
|
27903
|
+
})))));
|
|
27904
|
+
}
|
|
27905
|
+
;// ./src/lib/viewers/controls/media/VideoFullscreenButton.scss
|
|
27906
|
+
// extracted by mini-css-extract-plugin
|
|
27907
|
+
|
|
27908
|
+
;// ./src/lib/viewers/controls/media/VideoFullscreenButton.tsx
|
|
27909
|
+
|
|
27910
|
+
|
|
27911
|
+
|
|
27912
|
+
|
|
27913
|
+
|
|
27914
|
+
function VideoFullscreenButton(_ref) {
|
|
27915
|
+
let {
|
|
27916
|
+
mediaEl,
|
|
27917
|
+
onFullscreenToggle
|
|
27918
|
+
} = _ref;
|
|
27919
|
+
const isFullscreen = useFullscreen();
|
|
27920
|
+
const title = isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
|
|
27921
|
+
const ref = __WEBPACK_EXTERNAL_MODULE_react_default__.useRef(null);
|
|
27922
|
+
const [position, setPosition] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(null);
|
|
27923
|
+
__WEBPACK_EXTERNAL_MODULE_react_default__.useEffect(() => {
|
|
27924
|
+
if (!mediaEl) return undefined;
|
|
27925
|
+
const update = () => {
|
|
27926
|
+
const parent = ref.current?.offsetParent;
|
|
27927
|
+
if (!parent) return;
|
|
27928
|
+
const videoRect = mediaEl.getBoundingClientRect();
|
|
27929
|
+
const parentRect = parent.getBoundingClientRect();
|
|
27930
|
+
setPosition({
|
|
27931
|
+
top: videoRect.top - parentRect.top + 24,
|
|
27932
|
+
right: parentRect.right - videoRect.right + 24
|
|
27933
|
+
});
|
|
27934
|
+
};
|
|
27935
|
+
update();
|
|
27936
|
+
const resizeObserver = new ResizeObserver(update);
|
|
27937
|
+
resizeObserver.observe(mediaEl);
|
|
27938
|
+
window.addEventListener('resize', update);
|
|
27939
|
+
return () => {
|
|
27940
|
+
resizeObserver.disconnect();
|
|
27941
|
+
window.removeEventListener('resize', update);
|
|
27942
|
+
};
|
|
27943
|
+
}, [mediaEl]);
|
|
27944
|
+
const handleClick = _ref2 => {
|
|
27945
|
+
let {
|
|
27946
|
+
target
|
|
27947
|
+
} = _ref2;
|
|
27948
|
+
onFullscreenToggle(!isFullscreen, target);
|
|
27949
|
+
};
|
|
27950
|
+
return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
|
|
27951
|
+
ref: ref,
|
|
27952
|
+
className: "bp-VideoFullscreenButton",
|
|
27953
|
+
onClick: handleClick,
|
|
27954
|
+
style: position ? {
|
|
27955
|
+
top: position.top,
|
|
27956
|
+
right: position.right
|
|
27957
|
+
} : undefined,
|
|
27958
|
+
title: title,
|
|
27959
|
+
type: "button"
|
|
27960
|
+
}, isFullscreen ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(icons_IconArrowsMinimizeMedium24, null) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(icons_IconArrowsMaximizeMedium24, null));
|
|
27748
27961
|
}
|
|
27749
27962
|
;// ./src/lib/viewers/media/VideoControlsV2.scss
|
|
27750
27963
|
// extracted by mini-css-extract-plugin
|
|
@@ -27765,6 +27978,8 @@ function TimeControlsV2(_ref) {
|
|
|
27765
27978
|
|
|
27766
27979
|
|
|
27767
27980
|
|
|
27981
|
+
|
|
27982
|
+
|
|
27768
27983
|
function VideoControlsV2(_ref) {
|
|
27769
27984
|
let {
|
|
27770
27985
|
annotationColor,
|
|
@@ -27773,8 +27988,10 @@ function VideoControlsV2(_ref) {
|
|
|
27773
27988
|
audioTrack,
|
|
27774
27989
|
audioTracks,
|
|
27775
27990
|
autoplay,
|
|
27991
|
+
commentMarkers,
|
|
27776
27992
|
currentTime = 0,
|
|
27777
27993
|
durationTime = 0,
|
|
27994
|
+
experiences,
|
|
27778
27995
|
filmstripInterval,
|
|
27779
27996
|
filmstripUrl,
|
|
27780
27997
|
fps,
|
|
@@ -27788,6 +28005,8 @@ function VideoControlsV2(_ref) {
|
|
|
27788
28005
|
isPlaying,
|
|
27789
28006
|
mediaEl,
|
|
27790
28007
|
movePlayback,
|
|
28008
|
+
onCommentMarkerClick,
|
|
28009
|
+
onFullscreenToggle,
|
|
27791
28010
|
onAnnotationColorChange,
|
|
27792
28011
|
onAnnotationModeClick,
|
|
27793
28012
|
onAnnotationModeEscape,
|
|
@@ -27819,17 +28038,24 @@ function VideoControlsV2(_ref) {
|
|
|
27819
28038
|
const moveBackward = () => {
|
|
27820
28039
|
movePlayback(false, MEDIA_PLAYBACK_SKIP_DURATION);
|
|
27821
28040
|
};
|
|
27822
|
-
return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(
|
|
28041
|
+
return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ExperiencesProvider, {
|
|
28042
|
+
experiences: experiences
|
|
28043
|
+
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
|
|
27823
28044
|
className: "bp-VideoControlsV2",
|
|
27824
28045
|
"data-testid": "media-controls-wrapper-v2"
|
|
27825
|
-
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(
|
|
28046
|
+
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VideoFullscreenButton, {
|
|
28047
|
+
mediaEl: mediaEl,
|
|
28048
|
+
onFullscreenToggle: onFullscreenToggle
|
|
28049
|
+
}), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(TimeControlsV2, {
|
|
27826
28050
|
aspectRatio: aspectRatio,
|
|
28051
|
+
commentMarkers: commentMarkers,
|
|
27827
28052
|
currentTime: currentTime,
|
|
27828
28053
|
durationTime: durationTime,
|
|
27829
28054
|
filmstripInterval: filmstripInterval,
|
|
27830
28055
|
filmstripUrl: filmstripUrl,
|
|
27831
28056
|
fps: fps,
|
|
27832
28057
|
mediaEl: mediaEl,
|
|
28058
|
+
onCommentMarkerClick: onCommentMarkerClick,
|
|
27833
28059
|
onTimeChange: onTimeChange
|
|
27834
28060
|
}), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
|
|
27835
28061
|
className: "bp-VideoControlsV2-bar"
|
|
@@ -27903,7 +28129,7 @@ function VideoControlsV2(_ref) {
|
|
|
27903
28129
|
annotationColor: annotationColor,
|
|
27904
28130
|
annotationMode: annotationMode,
|
|
27905
28131
|
onAnnotationColorChange: onAnnotationColorChange
|
|
27906
|
-
})))));
|
|
28132
|
+
}))))));
|
|
27907
28133
|
}
|
|
27908
28134
|
;// ./src/lib/viewers/controls/media/VideoGuidesOverlay.scss
|
|
27909
28135
|
// extracted by mini-css-extract-plugin
|
|
@@ -29311,6 +29537,7 @@ class DashViewer extends media_VideoBaseViewer {
|
|
|
29311
29537
|
autoplay: this.isAutoplayEnabled(),
|
|
29312
29538
|
currentTime: this.mediaEl.currentTime,
|
|
29313
29539
|
durationTime: this.mediaEl.duration,
|
|
29540
|
+
experiences: this.experiences,
|
|
29314
29541
|
filmstripInterval: this.filmstripInterval,
|
|
29315
29542
|
filmstripUrl: this.filmstripUrl,
|
|
29316
29543
|
fps: this.getFps(),
|
|
@@ -29329,6 +29556,7 @@ class DashViewer extends media_VideoBaseViewer {
|
|
|
29329
29556
|
onAnnotationModeEscape: this.handleAnnotationControlsEscape,
|
|
29330
29557
|
onAudioTrackChange: this.setAudioTrack,
|
|
29331
29558
|
onAutoplayChange: this.setAutoplay,
|
|
29559
|
+
onFullscreenToggle: this.toggleFullscreen,
|
|
29332
29560
|
onGuideChange: this.setGuide,
|
|
29333
29561
|
onMuteChange: this.toggleMute,
|
|
29334
29562
|
onPlayPause: this.handlePlayRequest,
|
|
@@ -29352,15 +29580,16 @@ class DashViewer extends media_VideoBaseViewer {
|
|
|
29352
29580
|
}));
|
|
29353
29581
|
}
|
|
29354
29582
|
if (this.isVideoPlayerV2) {
|
|
29355
|
-
this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VideoControlsV2,
|
|
29583
|
+
this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VideoControlsV2, DashViewer_extends({
|
|
29584
|
+
commentMarkers: this.commentMarkers,
|
|
29585
|
+
onCommentMarkerClick: this.handleCommentMarkerClick
|
|
29586
|
+
}, sharedProps)));
|
|
29356
29587
|
return;
|
|
29357
29588
|
}
|
|
29358
29589
|
this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(VideoControls, DashViewer_extends({}, sharedProps, {
|
|
29359
29590
|
bufferedRange: this.mediaEl.buffered,
|
|
29360
|
-
experiences: this.experiences,
|
|
29361
29591
|
hasHighlight: false,
|
|
29362
|
-
isPlayingHD: this.isPlayingHD()
|
|
29363
|
-
onFullscreenToggle: this.toggleFullscreen
|
|
29592
|
+
isPlayingHD: this.isPlayingHD()
|
|
29364
29593
|
})));
|
|
29365
29594
|
}
|
|
29366
29595
|
}
|
|
@@ -30079,6 +30308,48 @@ function FindBarToggle(_ref) {
|
|
|
30079
30308
|
type: "button"
|
|
30080
30309
|
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(icons_IconSearchMedium24, null));
|
|
30081
30310
|
}
|
|
30311
|
+
;// ./src/lib/viewers/controls/icons/IconGridView24.tsx
|
|
30312
|
+
function IconGridView24_extends() { return IconGridView24_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; }, IconGridView24_extends.apply(null, arguments); }
|
|
30313
|
+
|
|
30314
|
+
function IconGridView24(props) {
|
|
30315
|
+
return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_createElement__("svg", IconGridView24_extends({
|
|
30316
|
+
"data-testid": "IconGridView24",
|
|
30317
|
+
focusable: "false",
|
|
30318
|
+
height: "1em",
|
|
30319
|
+
role: "img",
|
|
30320
|
+
viewBox: "0 0 24 24",
|
|
30321
|
+
width: "1em"
|
|
30322
|
+
}, props), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_createElement__("path", {
|
|
30323
|
+
d: "M8 13a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h2Zm10 0a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h2ZM6 15a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H6Zm10 0a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2ZM8 3a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2Zm10 0a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2ZM6 5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6Zm10 0a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2Z",
|
|
30324
|
+
fill: "#fff",
|
|
30325
|
+
fillRule: "evenodd"
|
|
30326
|
+
}));
|
|
30327
|
+
}
|
|
30328
|
+
/* harmony default export */ const icons_IconGridView24 = (IconGridView24);
|
|
30329
|
+
;// ./src/lib/viewers/controls/gallery/GalleryToggle.scss
|
|
30330
|
+
// extracted by mini-css-extract-plugin
|
|
30331
|
+
|
|
30332
|
+
;// ./src/lib/viewers/controls/gallery/GalleryToggle.tsx
|
|
30333
|
+
|
|
30334
|
+
|
|
30335
|
+
|
|
30336
|
+
function GalleryToggle(_ref) {
|
|
30337
|
+
let {
|
|
30338
|
+
onGalleryToggle,
|
|
30339
|
+
isGalleryOpen
|
|
30340
|
+
} = _ref;
|
|
30341
|
+
if (!onGalleryToggle) {
|
|
30342
|
+
return null;
|
|
30343
|
+
}
|
|
30344
|
+
return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
|
|
30345
|
+
"aria-pressed": isGalleryOpen,
|
|
30346
|
+
className: `bp-GalleryToggle${isGalleryOpen ? ' bp-is-active' : ''}`,
|
|
30347
|
+
"data-resin-target": "galleryView",
|
|
30348
|
+
onClick: onGalleryToggle,
|
|
30349
|
+
title: "Gallery view",
|
|
30350
|
+
type: "button"
|
|
30351
|
+
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(icons_IconGridView24, null));
|
|
30352
|
+
}
|
|
30082
30353
|
;// ./src/lib/viewers/controls/icons/IconNavMedium24.tsx
|
|
30083
30354
|
function IconNavMedium24_extends() { return IconNavMedium24_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; }, IconNavMedium24_extends.apply(null, arguments); }
|
|
30084
30355
|
|
|
@@ -30155,6 +30426,7 @@ function ThumbnailsToggle(_ref) {
|
|
|
30155
30426
|
|
|
30156
30427
|
|
|
30157
30428
|
|
|
30429
|
+
|
|
30158
30430
|
function DocControls(_ref) {
|
|
30159
30431
|
let {
|
|
30160
30432
|
annotationColor,
|
|
@@ -30163,6 +30435,7 @@ function DocControls(_ref) {
|
|
|
30163
30435
|
hasDrawing,
|
|
30164
30436
|
hasHighlight,
|
|
30165
30437
|
hasRegion,
|
|
30438
|
+
isGalleryOpen,
|
|
30166
30439
|
isThumbnailsOpen,
|
|
30167
30440
|
maxScale,
|
|
30168
30441
|
minScale,
|
|
@@ -30171,6 +30444,7 @@ function DocControls(_ref) {
|
|
|
30171
30444
|
onAnnotationModeEscape,
|
|
30172
30445
|
onFindBarToggle,
|
|
30173
30446
|
onFullscreenToggle,
|
|
30447
|
+
onGalleryToggle,
|
|
30174
30448
|
onPageChange,
|
|
30175
30449
|
onPageSubmit,
|
|
30176
30450
|
onRotateLeft,
|
|
@@ -30183,7 +30457,12 @@ function DocControls(_ref) {
|
|
|
30183
30457
|
} = _ref;
|
|
30184
30458
|
return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ExperiencesProvider, {
|
|
30185
30459
|
experiences: experiences
|
|
30186
|
-
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBar, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(
|
|
30460
|
+
}, isGalleryOpen ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBar, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryToggle, {
|
|
30461
|
+
isGalleryOpen: isGalleryOpen,
|
|
30462
|
+
onGalleryToggle: onGalleryToggle
|
|
30463
|
+
}), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(FullscreenToggle, {
|
|
30464
|
+
onFullscreenToggle: onFullscreenToggle
|
|
30465
|
+
}))) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(__WEBPACK_EXTERNAL_MODULE_react_default__.Fragment, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBar, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ThumbnailsToggle, {
|
|
30187
30466
|
isThumbnailsOpen: isThumbnailsOpen,
|
|
30188
30467
|
onThumbnailsToggle: onThumbnailsToggle
|
|
30189
30468
|
}), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(FindBarToggle, {
|
|
@@ -30205,7 +30484,10 @@ function DocControls(_ref) {
|
|
|
30205
30484
|
scale: scale
|
|
30206
30485
|
})), onRotateLeft && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(RotateControl, {
|
|
30207
30486
|
onRotateLeft: onRotateLeft
|
|
30208
|
-
})), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(
|
|
30487
|
+
})), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryToggle, {
|
|
30488
|
+
isGalleryOpen: isGalleryOpen,
|
|
30489
|
+
onGalleryToggle: onGalleryToggle
|
|
30490
|
+
}), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(FullscreenToggle, {
|
|
30209
30491
|
onFullscreenToggle: onFullscreenToggle
|
|
30210
30492
|
}), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(AnnotationsControls, {
|
|
30211
30493
|
annotationColor: annotationColor,
|
|
@@ -30219,7 +30501,7 @@ function DocControls(_ref) {
|
|
|
30219
30501
|
annotationColor: annotationColor,
|
|
30220
30502
|
annotationMode: annotationMode,
|
|
30221
30503
|
onAnnotationColorChange: onAnnotationColorChange
|
|
30222
|
-
})));
|
|
30504
|
+
}))));
|
|
30223
30505
|
}
|
|
30224
30506
|
;// ./src/lib/icons/search.svg
|
|
30225
30507
|
const search_namespaceObject = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 15 14\" focusable=\"false\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M-2-3h20v20H-2z\"/>\n <path class=\"icon\" fill=\"#FFF\" d=\"M6.931 0a5.994 5.994 0 0 1 4.907 9.438l2.806 2.807a1 1 0 0 1 0 1.415l-.047.047a1 1 0 0 1-1.414 0L10.375 10.9A5.994 5.994 0 1 1 6.931 0zm0 1.998a3.996 3.996 0 1 0 0 7.992 3.996 3.996 0 0 0 0-7.992z\"/>\n </g>\n</svg>\n";
|
|
@@ -30655,6 +30937,233 @@ class DocFindBar extends (events_default()) {
|
|
|
30655
30937
|
}
|
|
30656
30938
|
}
|
|
30657
30939
|
/* harmony default export */ const doc_DocFindBar = (DocFindBar);
|
|
30940
|
+
;// ./src/lib/viewers/gallery/GalleryGrid.scss
|
|
30941
|
+
// extracted by mini-css-extract-plugin
|
|
30942
|
+
|
|
30943
|
+
;// ./src/lib/viewers/gallery/GalleryGrid.tsx
|
|
30944
|
+
function GalleryGrid_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
30945
|
+
function GalleryGrid_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? GalleryGrid_ownKeys(Object(t), !0).forEach(function (r) { GalleryGrid_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : GalleryGrid_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
30946
|
+
function GalleryGrid_defineProperty(e, r, t) { return (r = GalleryGrid_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
30947
|
+
function GalleryGrid_toPropertyKey(t) { var i = GalleryGrid_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
30948
|
+
function GalleryGrid_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
30949
|
+
|
|
30950
|
+
|
|
30951
|
+
|
|
30952
|
+
const GALLERY_THUMB_MAX_WIDTH = 440;
|
|
30953
|
+
const INITIAL_LOAD_BUFFER = 40;
|
|
30954
|
+
const CONCURRENT_LOADS = 4;
|
|
30955
|
+
const SCROLL_THROTTLE_MS = 200;
|
|
30956
|
+
function GalleryGrid(_ref) {
|
|
30957
|
+
let {
|
|
30958
|
+
pageCount,
|
|
30959
|
+
currentPage,
|
|
30960
|
+
onClose,
|
|
30961
|
+
onFocusChange,
|
|
30962
|
+
onPageNavigate,
|
|
30963
|
+
thumbnail
|
|
30964
|
+
} = _ref;
|
|
30965
|
+
const [loadedImages, setLoadedImages] = __WEBPACK_EXTERNAL_MODULE_react_useState__({});
|
|
30966
|
+
const [focusedPage, setFocusedPage] = __WEBPACK_EXTERNAL_MODULE_react_useState__(currentPage);
|
|
30967
|
+
const gridRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
|
|
30968
|
+
const queueRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__([]);
|
|
30969
|
+
const isProcessingRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
|
|
30970
|
+
const isMountedRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(true);
|
|
30971
|
+
const initialLoadDoneRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
|
|
30972
|
+
const initialLoadCountRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(0);
|
|
30973
|
+
function processQueue() {
|
|
30974
|
+
if (!isMountedRef.current || !thumbnail || queueRef.current.length === 0) {
|
|
30975
|
+
isProcessingRef.current = false;
|
|
30976
|
+
return;
|
|
30977
|
+
}
|
|
30978
|
+
const batchSize = initialLoadDoneRef.current ? CONCURRENT_LOADS : 1;
|
|
30979
|
+
const batch = queueRef.current.slice(0, batchSize);
|
|
30980
|
+
queueRef.current = queueRef.current.slice(batchSize);
|
|
30981
|
+
requestAnimationFrame(() => {
|
|
30982
|
+
if (!isMountedRef.current || !thumbnail) {
|
|
30983
|
+
isProcessingRef.current = false;
|
|
30984
|
+
return;
|
|
30985
|
+
}
|
|
30986
|
+
let completed = 0;
|
|
30987
|
+
const onComplete = () => {
|
|
30988
|
+
completed += 1;
|
|
30989
|
+
if (completed < batch.length) return;
|
|
30990
|
+
if (!isMountedRef.current) {
|
|
30991
|
+
isProcessingRef.current = false;
|
|
30992
|
+
return;
|
|
30993
|
+
}
|
|
30994
|
+
if (!initialLoadDoneRef.current) {
|
|
30995
|
+
initialLoadCountRef.current += batch.length;
|
|
30996
|
+
if (initialLoadCountRef.current >= INITIAL_LOAD_BUFFER) {
|
|
30997
|
+
initialLoadDoneRef.current = true;
|
|
30998
|
+
isProcessingRef.current = false;
|
|
30999
|
+
return;
|
|
31000
|
+
}
|
|
31001
|
+
}
|
|
31002
|
+
processQueue();
|
|
31003
|
+
};
|
|
31004
|
+
batch.forEach(pageNum => {
|
|
31005
|
+
thumbnail.createThumbnailImage(pageNum - 1, {
|
|
31006
|
+
createImgTag: true,
|
|
31007
|
+
thumbMaxWidth: GALLERY_THUMB_MAX_WIDTH
|
|
31008
|
+
}).then(imageEl => {
|
|
31009
|
+
if (isMountedRef.current && imageEl && imageEl.src) {
|
|
31010
|
+
setLoadedImages(prev => GalleryGrid_objectSpread(GalleryGrid_objectSpread({}, prev), {}, {
|
|
31011
|
+
[pageNum]: imageEl.src
|
|
31012
|
+
}));
|
|
31013
|
+
}
|
|
31014
|
+
onComplete();
|
|
31015
|
+
}).catch(() => {
|
|
31016
|
+
onComplete();
|
|
31017
|
+
});
|
|
31018
|
+
});
|
|
31019
|
+
});
|
|
31020
|
+
}
|
|
31021
|
+
function startProcessing() {
|
|
31022
|
+
if (!isProcessingRef.current && queueRef.current.length > 0) {
|
|
31023
|
+
isProcessingRef.current = true;
|
|
31024
|
+
processQueue();
|
|
31025
|
+
}
|
|
31026
|
+
}
|
|
31027
|
+
function getUnloadedNearViewport() {
|
|
31028
|
+
const grid = gridRef.current;
|
|
31029
|
+
if (!grid) return [];
|
|
31030
|
+
const {
|
|
31031
|
+
scrollTop,
|
|
31032
|
+
clientHeight
|
|
31033
|
+
} = grid;
|
|
31034
|
+
const bufferZone = clientHeight * 3;
|
|
31035
|
+
const viewportTop = scrollTop - bufferZone;
|
|
31036
|
+
const viewportBottom = scrollTop + clientHeight + bufferZone;
|
|
31037
|
+
const nearbyUnloaded = [];
|
|
31038
|
+
const tiles = grid.querySelectorAll('[data-page]');
|
|
31039
|
+
tiles.forEach(tile => {
|
|
31040
|
+
const el = tile;
|
|
31041
|
+
if (!el.dataset.page) return;
|
|
31042
|
+
const pageNum = parseInt(el.dataset.page, 10);
|
|
31043
|
+
const tileTop = el.offsetTop;
|
|
31044
|
+
const tileBottom = tileTop + el.offsetHeight;
|
|
31045
|
+
if (tileBottom > viewportTop && tileTop < viewportBottom && !el.querySelector('img')) {
|
|
31046
|
+
nearbyUnloaded.push(pageNum);
|
|
31047
|
+
}
|
|
31048
|
+
});
|
|
31049
|
+
return nearbyUnloaded;
|
|
31050
|
+
}
|
|
31051
|
+
const handleScrollRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(throttle_default()(() => {
|
|
31052
|
+
const nearbyUnloaded = getUnloadedNearViewport();
|
|
31053
|
+
if (nearbyUnloaded.length > 0) {
|
|
31054
|
+
const currentQueue = queueRef.current;
|
|
31055
|
+
const toAdd = nearbyUnloaded.filter(p => !currentQueue.includes(p));
|
|
31056
|
+
queueRef.current = [...toAdd, ...currentQueue];
|
|
31057
|
+
startProcessing();
|
|
31058
|
+
}
|
|
31059
|
+
}, SCROLL_THROTTLE_MS));
|
|
31060
|
+
__WEBPACK_EXTERNAL_MODULE_react_useEffect__(() => {
|
|
31061
|
+
const throttledScroll = handleScrollRef.current;
|
|
31062
|
+
if (gridRef.current) {
|
|
31063
|
+
const tile = gridRef.current.querySelector(`[data-page="${currentPage}"]`);
|
|
31064
|
+
if (tile) {
|
|
31065
|
+
tile.scrollIntoView({
|
|
31066
|
+
block: 'center'
|
|
31067
|
+
});
|
|
31068
|
+
tile.focus();
|
|
31069
|
+
}
|
|
31070
|
+
}
|
|
31071
|
+
const initialImages = {};
|
|
31072
|
+
const uncachedPages = [];
|
|
31073
|
+
for (let i = 1; i <= pageCount; i += 1) {
|
|
31074
|
+
const cached = thumbnail.getImageFromCache(i - 1);
|
|
31075
|
+
if (cached && cached.image && cached.image.src) {
|
|
31076
|
+
initialImages[i] = cached.image.src;
|
|
31077
|
+
initialLoadCountRef.current += 1;
|
|
31078
|
+
} else {
|
|
31079
|
+
uncachedPages.push(i);
|
|
31080
|
+
}
|
|
31081
|
+
}
|
|
31082
|
+
if (Object.keys(initialImages).length > 0) {
|
|
31083
|
+
setLoadedImages(initialImages);
|
|
31084
|
+
}
|
|
31085
|
+
uncachedPages.sort((a, b) => Math.abs(a - currentPage) - Math.abs(b - currentPage));
|
|
31086
|
+
queueRef.current = uncachedPages;
|
|
31087
|
+
thumbnail.init().then(() => {
|
|
31088
|
+
if (!isMountedRef.current) return;
|
|
31089
|
+
isProcessingRef.current = true;
|
|
31090
|
+
processQueue();
|
|
31091
|
+
});
|
|
31092
|
+
return () => {
|
|
31093
|
+
isMountedRef.current = false;
|
|
31094
|
+
queueRef.current = [];
|
|
31095
|
+
isProcessingRef.current = false;
|
|
31096
|
+
throttledScroll.cancel();
|
|
31097
|
+
};
|
|
31098
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
31099
|
+
}, []);
|
|
31100
|
+
const handleTileFocus = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(pageNum => {
|
|
31101
|
+
setFocusedPage(pageNum);
|
|
31102
|
+
if (onFocusChange) {
|
|
31103
|
+
onFocusChange(pageNum);
|
|
31104
|
+
}
|
|
31105
|
+
}, [onFocusChange]);
|
|
31106
|
+
const handleGridFocus = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(event => {
|
|
31107
|
+
if (event.target === gridRef.current && gridRef.current) {
|
|
31108
|
+
const tile = gridRef.current.querySelector(`[data-page="${focusedPage}"]`);
|
|
31109
|
+
if (tile) {
|
|
31110
|
+
tile.focus();
|
|
31111
|
+
}
|
|
31112
|
+
}
|
|
31113
|
+
}, [focusedPage]);
|
|
31114
|
+
const handleGridKeyDown = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(event => {
|
|
31115
|
+
if (event.key === 'Escape') {
|
|
31116
|
+
event.preventDefault();
|
|
31117
|
+
event.stopPropagation();
|
|
31118
|
+
onClose();
|
|
31119
|
+
return;
|
|
31120
|
+
}
|
|
31121
|
+
if (event.key === 'Tab' && gridRef.current) {
|
|
31122
|
+
const buttons = gridRef.current.querySelectorAll('button');
|
|
31123
|
+
const first = buttons[0];
|
|
31124
|
+
const last = buttons[buttons.length - 1];
|
|
31125
|
+
if (event.shiftKey && document.activeElement === first) {
|
|
31126
|
+
event.preventDefault();
|
|
31127
|
+
last.focus();
|
|
31128
|
+
} else if (!event.shiftKey && document.activeElement === last) {
|
|
31129
|
+
event.preventDefault();
|
|
31130
|
+
first.focus();
|
|
31131
|
+
}
|
|
31132
|
+
}
|
|
31133
|
+
}, [onClose]);
|
|
31134
|
+
const tiles = [];
|
|
31135
|
+
for (let i = 1; i <= pageCount; i += 1) {
|
|
31136
|
+
const isFocused = i === focusedPage;
|
|
31137
|
+
tiles.push( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
|
|
31138
|
+
key: i,
|
|
31139
|
+
"aria-label": `Page ${i}${isFocused ? ', current page' : ''}`,
|
|
31140
|
+
className: `bp-gallery-tile${isFocused ? ' bp-gallery-tile--selected' : ''}`,
|
|
31141
|
+
"data-page": i,
|
|
31142
|
+
onClick: () => onPageNavigate(i),
|
|
31143
|
+
onFocus: () => handleTileFocus(i),
|
|
31144
|
+
type: "button"
|
|
31145
|
+
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
|
|
31146
|
+
className: "bp-gallery-tile-badge"
|
|
31147
|
+
}, i), loadedImages[i] ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("img", {
|
|
31148
|
+
alt: `Page ${i}`,
|
|
31149
|
+
src: loadedImages[i]
|
|
31150
|
+
}) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
|
|
31151
|
+
className: "bp-gallery-tile-placeholder"
|
|
31152
|
+
})));
|
|
31153
|
+
}
|
|
31154
|
+
return (
|
|
31155
|
+
/*#__PURE__*/
|
|
31156
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
31157
|
+
__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
|
|
31158
|
+
ref: gridRef,
|
|
31159
|
+
className: "bp-gallery-grid",
|
|
31160
|
+
onFocus: handleGridFocus,
|
|
31161
|
+
onKeyDown: handleGridKeyDown,
|
|
31162
|
+
onScroll: handleScrollRef.current,
|
|
31163
|
+
tabIndex: -1
|
|
31164
|
+
}, tiles)
|
|
31165
|
+
);
|
|
31166
|
+
}
|
|
30658
31167
|
;// ./src/lib/logUtils.js
|
|
30659
31168
|
|
|
30660
31169
|
|
|
@@ -32466,6 +32975,8 @@ function DocBaseViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) retur
|
|
|
32466
32975
|
|
|
32467
32976
|
|
|
32468
32977
|
|
|
32978
|
+
|
|
32979
|
+
|
|
32469
32980
|
|
|
32470
32981
|
|
|
32471
32982
|
|
|
@@ -32501,6 +33012,7 @@ const RANGE_CHUNK_SIZE_US = 1048576; // 1MB
|
|
|
32501
33012
|
const RANGE_REQUEST_MINIMUM_SIZE = 26214400; // 25MB
|
|
32502
33013
|
const SAFARI_PRINT_TIMEOUT_MS = 1000; // Wait 1s before trying to print
|
|
32503
33014
|
const SCROLL_EVENT_THROTTLE_INTERVAL = 200;
|
|
33015
|
+
const GALLERY_MAX_PAGES = 200; // Hide gallery toggle for files above this page count, will increase in V2
|
|
32504
33016
|
const THUMBNAILS_SIDEBAR_TRANSITION_TIME = 301; // 301ms
|
|
32505
33017
|
const THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY = 'doc-thumbnails-toggled-map';
|
|
32506
33018
|
const MAX_OPERATIONS = 320000; // Block PDFs with more than 320,000 drawing operations
|
|
@@ -32530,6 +33042,18 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
32530
33042
|
//--------------------------------------------------------------------------
|
|
32531
33043
|
/** @property {Thumbnail} - Thumbnail reference */
|
|
32532
33044
|
DocBaseViewer_defineProperty(this, "advancedInsightsThumbs", void 0);
|
|
33045
|
+
/** @property {number} - Page focused in gallery via Tab */
|
|
33046
|
+
DocBaseViewer_defineProperty(this, "galleryFocusedPage", null);
|
|
33047
|
+
/** @property {number} - Pending setTimeout ID for delayed gallery mount */
|
|
33048
|
+
DocBaseViewer_defineProperty(this, "galleryMountTimeoutId", null);
|
|
33049
|
+
/** @property {number} - Pending setTimeout ID for delayed sidebar setCurrentPage after gallery exit */
|
|
33050
|
+
DocBaseViewer_defineProperty(this, "gallerySidebarTimeoutId", null);
|
|
33051
|
+
/** @property {Thumbnail} - Dedicated gallery thumbnail instance (persists between opens) */
|
|
33052
|
+
DocBaseViewer_defineProperty(this, "galleryThumbnail", void 0);
|
|
33053
|
+
/** @property {boolean} - Whether gallery mode is active */
|
|
33054
|
+
DocBaseViewer_defineProperty(this, "isGalleryOpen", false);
|
|
33055
|
+
/** @property {boolean} - Whether sidebar was open before entering gallery */
|
|
33056
|
+
DocBaseViewer_defineProperty(this, "sidebarWasOpen", false);
|
|
32533
33057
|
/** @property {PageTracker} - PageTracker instance */
|
|
32534
33058
|
DocBaseViewer_defineProperty(this, "pageTracker", void 0);
|
|
32535
33059
|
DocBaseViewer_defineProperty(this, "doc", void 0);
|
|
@@ -32550,6 +33074,7 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
32550
33074
|
this.handleAnnotationCreateEvent = this.handleAnnotationCreateEvent.bind(this);
|
|
32551
33075
|
this.handleAnnotationCreatorChangeEvent = this.handleAnnotationCreatorChangeEvent.bind(this);
|
|
32552
33076
|
this.handleDocElKeydown = this.handleDocElKeydown.bind(this);
|
|
33077
|
+
this.handleGalleryNavigate = this.handleGalleryNavigate.bind(this);
|
|
32553
33078
|
this.handlePageSubmit = this.handlePageSubmit.bind(this);
|
|
32554
33079
|
this.onThumbnailSelectHandler = this.onThumbnailSelectHandler.bind(this);
|
|
32555
33080
|
this.pagechangingHandler = this.pagechangingHandler.bind(this);
|
|
@@ -32564,6 +33089,7 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
32564
33089
|
this.setPage = this.setPage.bind(this);
|
|
32565
33090
|
this.throttledScrollHandler = this.getScrollHandler().bind(this);
|
|
32566
33091
|
this.toggleFindBar = this.toggleFindBar.bind(this);
|
|
33092
|
+
this.toggleGallery = this.toggleGallery.bind(this);
|
|
32567
33093
|
this.toggleThumbnails = this.toggleThumbnails.bind(this);
|
|
32568
33094
|
this.updateExperiences = this.updateExperiences.bind(this);
|
|
32569
33095
|
this.updateDiscoverabilityResinTag = this.updateDiscoverabilityResinTag.bind(this);
|
|
@@ -32643,6 +33169,28 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
32643
33169
|
this.findBar.destroy();
|
|
32644
33170
|
}
|
|
32645
33171
|
|
|
33172
|
+
// Cancel any pending gallery setTimeouts so they don't fire after teardown
|
|
33173
|
+
if (this.galleryMountTimeoutId !== null) {
|
|
33174
|
+
clearTimeout(this.galleryMountTimeoutId);
|
|
33175
|
+
this.galleryMountTimeoutId = null;
|
|
33176
|
+
}
|
|
33177
|
+
if (this.gallerySidebarTimeoutId !== null) {
|
|
33178
|
+
clearTimeout(this.gallerySidebarTimeoutId);
|
|
33179
|
+
this.gallerySidebarTimeoutId = null;
|
|
33180
|
+
}
|
|
33181
|
+
if (this.galleryRoot) {
|
|
33182
|
+
this.galleryRoot.unmount();
|
|
33183
|
+
this.galleryRoot = null;
|
|
33184
|
+
}
|
|
33185
|
+
if (this.galleryEl) {
|
|
33186
|
+
this.galleryEl.remove();
|
|
33187
|
+
this.galleryEl = null;
|
|
33188
|
+
}
|
|
33189
|
+
if (this.galleryThumbnail) {
|
|
33190
|
+
this.galleryThumbnail.destroy();
|
|
33191
|
+
this.galleryThumbnail = null;
|
|
33192
|
+
}
|
|
33193
|
+
|
|
32646
33194
|
// Clean up PDF network requests
|
|
32647
33195
|
if (this.pdfLoadingTask) {
|
|
32648
33196
|
try {
|
|
@@ -33248,6 +33796,10 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
33248
33796
|
if (this.thumbnailsSidebar) {
|
|
33249
33797
|
this.thumbnailsSidebar.refresh();
|
|
33250
33798
|
}
|
|
33799
|
+
if (this.galleryThumbnail) {
|
|
33800
|
+
this.galleryThumbnail.destroy();
|
|
33801
|
+
this.galleryThumbnail = null;
|
|
33802
|
+
}
|
|
33251
33803
|
this.renderUI();
|
|
33252
33804
|
|
|
33253
33805
|
// Emit scale with rotation angle so annotations transform to match rotated content
|
|
@@ -33812,6 +34364,7 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
33812
34364
|
const canDownload = checkPermission(this.options.file, PERMISSION_DOWNLOAD);
|
|
33813
34365
|
const isAnnotationsMode = this.currentAnnotatorViewMode === ANNOTATOR_VIEW_MODES.ANNOTATIONS;
|
|
33814
34366
|
const canRotate = this.featureEnabled('rotate.enabled');
|
|
34367
|
+
const canGallery = isFeatureEnabled(this.options.features, 'galleryView.enabled') && this.pdfViewer.pagesCount > 1 && this.pdfViewer.pagesCount <= GALLERY_MAX_PAGES;
|
|
33815
34368
|
this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(DocControls, {
|
|
33816
34369
|
annotationColor: this.annotationModule.getColor(),
|
|
33817
34370
|
annotationMode: this.annotationControlsFSM.getMode(),
|
|
@@ -33819,6 +34372,7 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
33819
34372
|
hasDrawing: canAnnotate && showAnnotationsDrawingCreate && isAnnotationsMode,
|
|
33820
34373
|
hasHighlight: canAnnotate && canDownload && isAnnotationsMode,
|
|
33821
34374
|
hasRegion: canAnnotate && isAnnotationsMode,
|
|
34375
|
+
isGalleryOpen: this.isGalleryOpen,
|
|
33822
34376
|
isThumbnailsOpen: this.thumbnailsSidebar && this.thumbnailsSidebar.isOpen,
|
|
33823
34377
|
maxScale: DocBaseViewer_MAX_SCALE,
|
|
33824
34378
|
minScale: DocBaseViewer_MIN_SCALE,
|
|
@@ -33827,6 +34381,7 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
33827
34381
|
onAnnotationModeEscape: this.handleAnnotationControlsEscape,
|
|
33828
34382
|
onFindBarToggle: !this.isFindDisabled() ? this.toggleFindBar : undefined,
|
|
33829
34383
|
onFullscreenToggle: this.toggleFullscreen,
|
|
34384
|
+
onGalleryToggle: canGallery ? this.toggleGallery : undefined,
|
|
33830
34385
|
onPageChange: this.setPage,
|
|
33831
34386
|
onPageSubmit: this.handlePageSubmit,
|
|
33832
34387
|
onRotateLeft: canRotate ? this.rotateLeft : undefined,
|
|
@@ -34060,6 +34615,10 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
34060
34615
|
*/
|
|
34061
34616
|
handleDocElKeydown(event) {
|
|
34062
34617
|
const key = decodeKeydown(event);
|
|
34618
|
+
if (key === 'Escape' && this.isGalleryOpen) {
|
|
34619
|
+
this.toggleGallery();
|
|
34620
|
+
return;
|
|
34621
|
+
}
|
|
34063
34622
|
if (event.altKey && key.includes('Arrow')) {
|
|
34064
34623
|
event.stopPropagation(); // Prevent collection/page navigation for caret navigation users
|
|
34065
34624
|
}
|
|
@@ -34310,6 +34869,79 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
34310
34869
|
this.rootEl.classList.remove(CLASS_BOX_PREVIEW_THUMBNAILS_OPEN_ACTIVE);
|
|
34311
34870
|
}, THUMBNAILS_SIDEBAR_TRANSITION_TIME);
|
|
34312
34871
|
}
|
|
34872
|
+
mountGalleryGrid() {
|
|
34873
|
+
if (this.galleryRoot) {
|
|
34874
|
+
return;
|
|
34875
|
+
}
|
|
34876
|
+
if (!this.galleryThumbnail) {
|
|
34877
|
+
this.galleryThumbnail = new lib_Thumbnail(this.pdfViewer, this.preloader);
|
|
34878
|
+
}
|
|
34879
|
+
this.galleryEl = document.createElement('div');
|
|
34880
|
+
this.containerEl.appendChild(this.galleryEl);
|
|
34881
|
+
this.galleryRoot = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.galleryEl);
|
|
34882
|
+
this.galleryFocusedPage = this.pdfViewer.currentPageNumber;
|
|
34883
|
+
this.galleryRoot.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryGrid, {
|
|
34884
|
+
currentPage: this.pdfViewer.currentPageNumber,
|
|
34885
|
+
onClose: this.toggleGallery,
|
|
34886
|
+
onFocusChange: pageNum => {
|
|
34887
|
+
this.galleryFocusedPage = pageNum;
|
|
34888
|
+
},
|
|
34889
|
+
onPageNavigate: this.handleGalleryNavigate,
|
|
34890
|
+
pageCount: this.pdfViewer.pagesCount,
|
|
34891
|
+
thumbnail: this.galleryThumbnail
|
|
34892
|
+
}));
|
|
34893
|
+
}
|
|
34894
|
+
toggleGallery() {
|
|
34895
|
+
this.isGalleryOpen = !this.isGalleryOpen;
|
|
34896
|
+
if (this.isGalleryOpen) {
|
|
34897
|
+
if (this.gallerySidebarTimeoutId !== null) {
|
|
34898
|
+
clearTimeout(this.gallerySidebarTimeoutId);
|
|
34899
|
+
this.gallerySidebarTimeoutId = null;
|
|
34900
|
+
}
|
|
34901
|
+
this.sidebarWasOpen = !!(this.thumbnailsSidebar && this.thumbnailsSidebar.isOpen);
|
|
34902
|
+
if (this.sidebarWasOpen) {
|
|
34903
|
+
this.toggleThumbnails();
|
|
34904
|
+
this.galleryMountTimeoutId = setTimeout(() => {
|
|
34905
|
+
this.galleryMountTimeoutId = null;
|
|
34906
|
+
this.mountGalleryGrid();
|
|
34907
|
+
}, THUMBNAILS_SIDEBAR_TRANSITION_TIME / 2);
|
|
34908
|
+
} else {
|
|
34909
|
+
this.mountGalleryGrid();
|
|
34910
|
+
}
|
|
34911
|
+
} else {
|
|
34912
|
+
if (this.galleryMountTimeoutId !== null) {
|
|
34913
|
+
clearTimeout(this.galleryMountTimeoutId);
|
|
34914
|
+
this.galleryMountTimeoutId = null;
|
|
34915
|
+
}
|
|
34916
|
+
const navigateToPage = this.galleryFocusedPage && this.galleryFocusedPage !== this.pdfViewer.currentPageNumber ? this.galleryFocusedPage : null;
|
|
34917
|
+
if (this.galleryRoot) {
|
|
34918
|
+
this.galleryRoot.unmount();
|
|
34919
|
+
this.galleryRoot = null;
|
|
34920
|
+
}
|
|
34921
|
+
if (this.galleryEl) {
|
|
34922
|
+
this.galleryEl.remove();
|
|
34923
|
+
this.galleryEl = null;
|
|
34924
|
+
}
|
|
34925
|
+
this.galleryFocusedPage = null;
|
|
34926
|
+
if (this.sidebarWasOpen && this.thumbnailsSidebar && !this.thumbnailsSidebar.isOpen) {
|
|
34927
|
+
this.toggleThumbnails();
|
|
34928
|
+
}
|
|
34929
|
+
if (navigateToPage) {
|
|
34930
|
+
this.setPage(navigateToPage);
|
|
34931
|
+
if (this.sidebarWasOpen && this.thumbnailsSidebar) {
|
|
34932
|
+
this.gallerySidebarTimeoutId = setTimeout(() => {
|
|
34933
|
+
this.gallerySidebarTimeoutId = null;
|
|
34934
|
+
this.thumbnailsSidebar.setCurrentPage(navigateToPage);
|
|
34935
|
+
}, THUMBNAILS_SIDEBAR_TRANSITION_TIME);
|
|
34936
|
+
}
|
|
34937
|
+
}
|
|
34938
|
+
}
|
|
34939
|
+
this.renderUI();
|
|
34940
|
+
}
|
|
34941
|
+
handleGalleryNavigate(pageNum) {
|
|
34942
|
+
this.galleryFocusedPage = pageNum;
|
|
34943
|
+
this.toggleGallery();
|
|
34944
|
+
}
|
|
34313
34945
|
|
|
34314
34946
|
/**
|
|
34315
34947
|
* Overrides the base method
|