box-content-preview 3.52.0 → 3.54.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/dist/lib/index.css +4 -2
- package/dist/lib/index.js +1110 -858
- 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.54.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.54.0/en-US/preview.js
|
|
29
|
+
https://cdn01.boxcdn.net/platform/preview/3.54.0/en-US/preview.css
|
|
30
30
|
|
|
31
31
|
## Supported Locales
|
|
32
32
|
|
|
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
|
|
|
52
52
|
<title>Box Content Preview Demo</title>
|
|
53
53
|
|
|
54
54
|
<!-- Latest version of Preview SDK for your locale -->
|
|
55
|
-
<script src="https://cdn01.boxcdn.net/platform/preview/3.
|
|
55
|
+
<script src="https://cdn01.boxcdn.net/platform/preview/3.54.0/en-US/preview.js"></script>
|
|
56
56
|
<link
|
|
57
57
|
rel="stylesheet"
|
|
58
|
-
href="https://cdn01.boxcdn.net/platform/preview/3.
|
|
58
|
+
href="https://cdn01.boxcdn.net/platform/preview/3.54.0/en-US/preview.css"
|
|
59
59
|
/>
|
|
60
60
|
</head>
|
|
61
61
|
<body>
|
|
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
|
|
|
76
76
|
|
|
77
77
|
1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
|
|
78
78
|
|
|
79
|
-
- Check out a specific version with `git checkout v3.
|
|
79
|
+
- Check out a specific version with `git checkout v3.54.0`
|
|
80
80
|
- Download a specific version as a zip from https://github.com/box/box-content-preview/releases
|
|
81
81
|
|
|
82
82
|
2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`
|
package/dist/lib/index.css
CHANGED
|
@@ -69,8 +69,10 @@
|
|
|
69
69
|
.bp-media-scrubber-container{position:relative;width:100%;height:16px}.bp-media-scrubber-wrapper{position:absolute;top:0;left:50%;width:100%;height:100%}.bp-media-scrubber{position:absolute;top:7px;left:-50%;width:100%;height:3px}.bp-media-scrubber-converted,.bp-media-scrubber-buffered,.bp-media-scrubber-played,.bp-media-scrubber-underlay{position:absolute;height:3px;transition:transform .1s ease-in-out}.bp-media-scrubber-converted{background-color:rgba(255,255,255,.5);cursor:pointer}.bp-media-scrubber-buffered{position:absolute;height:3px;background-color:#fff}.bp-media-scrubber-played{background-color:#0061d5;cursor:pointer}.bp-media-scrubber-underlay{width:100%;cursor:not-allowed}.bp-media-scrubber-handle{position:absolute;top:-4.25px;width:12px;height:12px;margin-left:-6px;background-color:#0061d5;border-radius:6px;transform:scale(0);cursor:pointer;transition:transform .05s ease-in-out}.bp-media-scrubber-container:hover .bp-media-scrubber-handle,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-handle{transform:scale(1)}.bp-media-scrubber-container:hover .bp-media-scrubber-converted,.bp-media-scrubber-container:hover .bp-media-scrubber-buffered,.bp-media-scrubber-container:hover .bp-media-scrubber-played,.bp-media-scrubber-container:hover .bp-media-scrubber-underlay,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-converted,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-buffered,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-played,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-underlay{transform:scaleY(2)}.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-handle{transform:scale(1)}.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-converted,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-buffered,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-played,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-underlay{transform:scaleY(2)}.bp-media-settings{position:absolute;right:16px;bottom:60px;display:inline-block;max-width:400px;max-height:210px;padding:8px;overflow-x:hidden;overflow-y:auto;color:#444;font-size:10px;line-height:0;background-color:#fff;border:1px solid #bdc3c7;border-radius:2px;visibility:hidden;transition:width .2s,height .2s;-ms-overflow-style:-ms-autohiding-scrollbar}.bp-media-settings-is-open .bp-media-settings{visibility:visible}.bp-media-mp3 .bp-media-settings{right:0;bottom:65px}.bp-media-settings-in-transition{overflow:hidden}.bp-media-settings-menu{display:table}.bp-media-settings-menu-autoplay,.bp-media-settings-menu-quality,.bp-media-settings-menu-speed,.bp-media-settings-menu-subtitles,.bp-media-settings-menu-audiotracks,.bp-media-settings-show-autoplay .bp-media-settings-menu-main,.bp-media-settings-show-speed .bp-media-settings-menu-main,.bp-media-settings-show-quality .bp-media-settings-menu-main,.bp-media-settings-show-subtitles .bp-media-settings-menu-main,.bp-media-settings-show-audiotracks .bp-media-settings-menu-main{display:none}.bp-media-settings-show-autoplay .bp-media-settings-menu-autoplay,.bp-media-settings-show-speed .bp-media-settings-menu-speed,.bp-media-settings-show-quality .bp-media-settings-menu-quality,.bp-media-settings-show-subtitles .bp-media-settings-menu-subtitles,.bp-media-settings-show-audiotracks .bp-media-settings-menu-audiotracks{display:table}.bp-media-mp4 .bp-media-settings-item-quality,.bp-media-mp4 .bp-media-settings-item-subtitles,.bp-media-mp4 .bp-media-settings-item-audiotracks,.bp-media-mp3 .bp-media-settings-item-quality,.bp-media-mp3 .bp-media-settings-item-subtitles,.bp-media-mp3 .bp-media-settings-item-audiotracks{display:none}.bp-media-settings-item,.bp-media-settings-sub-item{display:table-row;height:26px;padding:4px;overflow:hidden;white-space:nowrap;outline:0 none;cursor:pointer}.bp-media-settings-item:hover,.bp-media-settings-sub-item:hover{background-color:#f6fafd}.bp-media-settings-item:hover .bp-media-settings-icon svg,.bp-media-settings-sub-item:hover .bp-media-settings-icon svg{fill:#2c3e50}.bp-media-settings-item:hover .bp-media-settings-label,.bp-media-settings-sub-item:hover .bp-media-settings-label{color:#aabed1}.bp-media-settings-item:hover .bp-media-settings-value,.bp-media-settings-sub-item:hover .bp-media-settings-value{color:#2c3e50}.bp-has-keyboard-focus .bp-media-settings-item:focus,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus{background-color:#0061d5}.bp-has-keyboard-focus .bp-media-settings-item:focus .bp-media-settings-label,.bp-has-keyboard-focus .bp-media-settings-item:focus .bp-media-settings-value,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus .bp-media-settings-label,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus .bp-media-settings-value{color:#fff}.bp-has-keyboard-focus .bp-media-settings-item:focus svg,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus svg{fill:#fff}.bp-media-settings-subtitles-unavailable .bp-media-settings-item-subtitles,.bp-media-settings-subtitles-unavailable .bp-media-settings-menu-subtitles{display:none}.bp-media-settings-autoplay-unavailable .bp-media-settings-item-autoplay,.bp-media-settings-autoplay-unavailable .bp-media-settings-menu-autoplay{display:none}.bp-media-settings-audiotracks-unavailable .bp-media-settings-item-audiotracks,.bp-media-settings-audiotracks-unavailable .bp-media-settings-menu-audiotracks{display:none}.bp-media-settings-hd-unavailable .bp-media-settings-menu-quality{display:none}.bp-media-settings-hd-unavailable .bp-media-settings-item-quality{pointer-events:none}.bp-media-settings-hd-unavailable .bp-media-settings-item-quality .bp-media-settings-arrow{display:none}.bp-media-settings-label,.bp-media-settings-value{display:table-cell;padding:4px;vertical-align:middle}.bp-media-settings-label{color:#999ea4;font-weight:normal;font-size:11px;text-transform:uppercase}.bp-media-settings-item .bp-media-settings-label{text-align:left}.bp-media-settings-sub-item .bp-media-settings-label{text-align:center}.bp-media-settings-value{padding-left:10px;color:#464a4f;font-size:12px;text-align:left}.bp-media-settings-selected .bp-media-settings-value{color:#0061d5}.bp-media-settings-arrow{display:table-cell;vertical-align:middle}.bp-media-settings-arrow svg{width:18px;height:18px}.bp-media-settings-icon{display:table-cell;text-align:center;vertical-align:middle}.bp-media-settings-icon svg{width:16px;height:16px;visibility:hidden}.bp-media-settings-selected .bp-media-settings-icon svg{visibility:visible}.bp-media-controls-is-visible .bp-media-controls-wrapper,.bp-media-controls-wrapper:active,.bp-media-controls-wrapper:focus{visibility:visible;opacity:1}.bp-media-controls-wrapper{position:absolute;right:0;bottom:0;left:0;width:100%;height:60px;margin:auto;overflow:hidden;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);visibility:hidden;opacity:0;transition:visibility .3s,opacity .3s}.bp-media-time-scrubber-container{outline:0 none}.bp-media-volume-scrubber-container-wrapper{display:inline-block;width:0;height:40px;overflow:hidden;transition:width .2s ease-in-out}.bp-media-controls-volume-scrubber-expand{width:96px}.bp-media-volume-scrubber-container{position:relative;display:inline-block;width:96px;height:40px;padding:10px 8px 0;outline:0 none}.bp-media-volume-scrubber-container .bp-media-scrubber-handle{transform:scale(1)}.bp-media-volume-scrubber-container .bp-media-scrubber-converted,.bp-media-volume-scrubber-container .bp-media-scrubber-buffered,.bp-media-volume-scrubber-container .bp-media-scrubber-played,.bp-media-volume-scrubber-container .bp-media-scrubber-underlay{transform:scaleY(1) !important}.bp-media-controls-container{height:40px;margin:0;padding:0 10px;text-align:left}.bp-media-controls-label,.bp-media-controls-btn{display:inline-block;width:45px;height:40px;margin:0;padding:0;color:#fff;font-weight:normal;font-size:12px;text-align:center;vertical-align:top;background-color:transparent;border:none;outline:0 none;cursor:pointer;opacity:.7}.bp-media-controls-label:hover,.bp-media-controls-btn:hover{opacity:1}.bp-media-volume-icon{position:relative;display:inline-block;width:36px;height:40px;vertical-align:top}.bp-is-mobile .bp-media-volume-icon{display:none}.bp-media-controls-label{display:inline-block;width:auto;margin:0 4px;line-height:40px;vertical-align:top;cursor:default}.bp-media-controls-timecode{margin-left:13px}.bp-media-controls-volume-control{display:inline-block;width:45px;height:40px;vertical-align:top}.bp-is-mobile .bp-media-controls-volume-control{display:none}.bp-is-fullscreen .bp-media-fullscreen-icon .bp-exit-fullscreen-icon{display:inline-block}.bp-media-fullscreen-icon{position:absolute;right:10px}.bp-media-gear-icon{position:absolute;right:55px}.bp-media-gear-icon svg path{transform-origin:50%;transition:all .3s}.bp-media-settings-is-open .bp-media-gear-icon svg path{transform:rotateZ(60deg)}.bp-media-cc-icon{position:absolute;right:100px;visibility:visible}.bp-media-settings-subtitles-unavailable .bp-media-cc-icon{visibility:hidden}.bp-media-controls-cc-icon-text{display:inline-block;width:24px;height:24px;padding:0 0 0 1px;color:#fff;font-weight:bold;font-size:12px;line-height:24px;letter-spacing:.1em;background-color:rgba(0,0,0,.3);border-radius:4px}.bp-media-settings-subtitles-on .bp-media-controls-cc-icon-text{color:#fff;background-color:#0061d5}.bp-media-controls-hd{position:absolute;left:22px;display:none;padding:2px 2px 2px 3px;font-weight:bold;font-size:8px;line-height:8px;letter-spacing:.1em;background-color:#0061d5;border-radius:3px}.bp-media-controls-is-hd .bp-media-controls-hd{display:inline}.bp-media-play-icon{display:inline}.bp-media-is-playing .bp-media-play-icon{display:none}.bp-media-pause-icon{display:none}.bp-media-is-playing .bp-media-pause-icon{display:inline}.bp-media-volume-icon-mute,.bp-media-volume-icon-low,.bp-media-volume-icon-medium,.bp-media-volume-icon-high{position:absolute;left:6px;display:none}.bp-media-volume-icon-is-mute .bp-media-volume-icon-mute,.bp-media-volume-icon-is-low .bp-media-volume-icon-low,.bp-media-volume-icon-is-medium .bp-media-volume-icon-medium,.bp-media-volume-icon-is-high .bp-media-volume-icon-high{display:inline}.bp-media{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;border:0 none;visibility:hidden}.bp-media.bp-is-visible{visibility:visible}.bp-media-container{position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:360px;min-height:0;outline:0 none;-webkit-user-select:none;user-select:none}.bp-media-play-button{padding:0;color:inherit;font:inherit;background:none;border:none;cursor:pointer;position:absolute;top:50%;left:50%;width:80px;height:80px;color:#fff;font-size:40px;text-align:center;background:rgba(0,0,0,.5);border:4px solid #fff;border-radius:40px;transform:translate(-50%, -50%);cursor:pointer;transition:all .2s}.bp-media-play-button:hover{background:#000}.bp-media-overlay-play-container{position:absolute;top:50%;left:50%;display:flex;gap:28px;align-items:center;justify-content:center;color:#fff;font-size:40px;text-align:center;transform:translate(-50%, -50%);cursor:pointer;transition:all .2s}.bp-media-overlay-play-container button{padding:0;color:inherit;font:inherit;background:none;border:none;cursor:pointer;width:40px;height:40px;font-size:40px;text-align:center;background:#000;border-radius:40px;cursor:pointer;transition:all .2s}.bp-media-overlay-play-container .bp-media-overlay-play-button{width:60px;height:60px}.bp-has-keyboard-focus .bp-media-time-scrubber-container:focus,.bp-has-keyboard-focus .bp-media-volume-scrubber-container:focus,.bp-has-keyboard-focus .bp-media-controls-btn:focus{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.1)}.bp-dark .bp-error{color:#fff}.bp-dark .bp-icon{opacity:.9}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper{display:flex}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper .bp-crawler-wrapper{display:block}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper .bp-icon{display:none}@keyframes bp-spinner-rotate{to{transform:rotate(360deg)}}.bp-media-buffering-spinner{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border:4px solid rgba(0,97,213,.3);border-top-color:#0061d5;border-radius:40px;animation:bp-spinner-rotate .8s linear infinite}.bp-is-mobile *::-webkit-media-controls-start-playback-button{display:none}.bp-VideoControlsRoot{position:relative;right:auto;bottom:auto;left:auto;z-index:1;align-self:stretch;width:100%}.bp-media--v2{background:radial-gradient(ellipse at center, #2a2a2a 0%, #000 100%)}.bp-media-container--v2{padding:48px}.bp-media-container--v2 video{border:1px solid rgba(255,255,255,.12)}.bp-media-container--v2 .bp-video-preload-wrapper{top:48px;right:auto;bottom:48px;left:50%;transform:translateX(-50%)}.bp-media-container--v2 .bp-video-preload-wrapper .bp-preload{transform:none}.bp-media-container--v2 .bp-video-preload-wrapper .bp-preload-content{border:1px solid rgba(255,255,255,.12)}.bp-video-360 .bp-VideoControlsRoot{position:absolute;right:0;bottom:-1px;left:0;width:100%}.bp-video-preload-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden;background-color:transparent;opacity:1;transition:opacity .5s}.bp-video-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-video-preload-wrapper.bp-is-transparent{opacity:0}.bp-video-preload-wrapper .bp-preload{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:translateY(-60px)}.bp-video-preload-wrapper .bp-preload-content{width:100%;height:100%;object-fit:contain}.bp-video-preload-wrapper .bp-preload-placeholder{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.bp-video-preload-wrapper .bp-video-preload-play-overlay{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:rgba(0,0,0,.5);border-radius:50%;transform:translate(-50%, -50%);pointer-events:none}.bp-video-preload-wrapper .bp-video-preload-play-overlay svg{width:48px;height:48px;fill:#fff}.bp-media-dash video{display:block;width:100%;max-width:100%;max-height:100%;margin-right:auto;margin-left:auto;cursor:none}.bp-media-dash .bp-media-controls-label,.bp-media-dash .bp-media-controls-btn{opacity:.9}.bp-media-dash .bp-media-controls-label:hover,.bp-media-dash .bp-media-controls-btn:hover{opacity:1}.bp-media-dash .bp-media-controls-is-visible video{cursor:pointer}.bp-media-filmstrip-container{position:absolute;bottom:60px;left:0;display:none;width:160px;height:110px;overflow:hidden;border:1px solid #464a4f}.bp-media-filmstrip{position:relative}.bp-media-filmstrip-timecode{position:absolute;bottom:0;z-index:1;width:100%;color:#fff;font-size:13px;line-height:18px;text-align:center;background-color:#222}.bp-media-crawler-wrapper{position:relative;top:50%;left:50%;z-index:1;width:10px;margin:-15px 0 0 -5px}.bp-media-dash-stats{position:absolute;top:20px;right:20px;color:#fff;font-size:24px}
|
|
70
70
|
.bp-TimestampControl{position:relative;display:flex;align-items:center}.bp-TimestampControl-button{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;gap:4px;align-items:center;margin:0;padding:6px 12px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-TimestampControl-button:focus:not(:disabled) svg,.bp-TimestampControl-button:hover:not(:disabled) svg,.bp-TimestampControl-button.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-TimestampControl-button.bp-is-active,.bp-TimestampControl-button:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-TimestampControl-button.bp-is-active:focus:not(:disabled),.bp-TimestampControl-button.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-TimestampControl-button:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus:not(:focus-visible){box-shadow:none}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button.bp-is-open{background:transparent}.bp-TimestampControl-button:hover:not(:disabled){background:rgba(255,255,255,.08)}.bp-TimestampControl-separator,.bp-TimestampControl-duration{color:rgba(255,255,255,.8)}.bp-TimestampControl-chevron{width:16px;height:16px;margin-left:2px;fill:rgba(255,255,255,.8)}.bp-TimestampControl-flyout{position:absolute;bottom:calc(100% + 12px);left:50%;z-index:1;min-width:250px;padding:12px 8px;background:#fff;border-radius:16px;box-shadow:0 4px 12px 0 rgba(0,0,0,.15);transform:translateX(-50%)}.bp-TimestampControl-header{padding:6px 14px;color:#767676;font-weight:bold;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;-webkit-user-select:none;user-select:none}.bp-TimestampControl-listitem{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:6px 14px;color:#000;font-size:16px;font-family:Lato,Arial,sans-serif;line-height:24px;white-space:nowrap;border-radius:8px;outline:none;cursor:pointer}.bp-TimestampControl-listitem:hover,.bp-TimestampControl-listitem:focus{background:#f4f4f4}.bp-TimestampControl-check{flex:none;fill:#000}
|
|
71
71
|
.bp-FilmstripV2{position:absolute;bottom:calc(100% + 12px);padding:12px;padding-bottom:8px;background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.15);visibility:hidden}.bp-FilmstripV2.bp-is-shown{visibility:visible}.bp-FilmstripV2-frame{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px}.bp-FilmstripV2-time{margin-top:8px;color:#000;font-size:13px;line-height:20px;text-align:center}
|
|
72
|
-
.bp-MarkerAvatar{position:absolute;bottom:calc(100% + 4px);left:50%;width:12px;height:12px;overflow:hidden;border:0;border-radius:50%;box-shadow:0 0 0 0 #fff;transform:translate(-50%, 0);transform-origin:bottom center;transition:transform 150ms,box-shadow 150ms}.bp-MarkerAvatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.bp-MarkerAvatar-initial{display:grid;width:100%;height:100%;font-weight:bold;font-size:7px;line-height:1;text-align:center;text-transform:uppercase;place-items:center}.bp-MarkerAvatar-anonymousIcon{width:100%;height:100%;color:#222}
|
|
73
|
-
.bp-
|
|
72
|
+
.bp-MarkerAvatar{position:absolute;bottom:calc(100% + 4px);left:50%;width:12px;height:12px;overflow:hidden;border:0;border-radius:50%;outline:2px solid rgba(0,0,0,.5);box-shadow:0 0 0 0 #fff;transform:translate(-50%, 0);transform-origin:bottom center;transition:transform 150ms,box-shadow 150ms,outline 150ms}.bp-MarkerAvatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.bp-MarkerAvatar-initial{display:grid;width:100%;height:100%;font-weight:bold;font-size:7px;line-height:1;text-align:center;text-transform:uppercase;place-items:center}.bp-MarkerAvatar-anonymousIcon{width:100%;height:100%;color:#222}
|
|
73
|
+
.bp-MarkerAvatarStack{position:absolute;bottom:calc(100% + 4px);left:50%;display:flex;align-items:center;transform:translateX(-50%)}.bp-MarkerAvatarStack-item{position:relative;flex-shrink:0;padding:0;background:none;border:0;cursor:pointer;transition:margin 150ms}.bp-MarkerAvatarStack-item:not(:first-child){margin-left:-6px}.bp-MarkerAvatarStack-item .bp-MarkerAvatar{position:relative;bottom:auto;left:auto;display:block;transform:none}.bp-MarkerAvatarStack-item:hover,.bp-MarkerAvatarStack-item:focus-visible{z-index:1}.bp-MarkerAvatarStack-item:hover .bp-MarkerAvatar,.bp-MarkerAvatarStack-item:focus-visible .bp-MarkerAvatar{outline:0 solid transparent;box-shadow:0 0 0 2px #fff}.bp-TimeControlsV2-marker--group:hover .bp-MarkerAvatarStack-item:not(:first-child),.bp-TimeControlsV2-marker--group:focus-visible .bp-MarkerAvatarStack-item:not(:first-child),.bp-MarkerCluster:hover .bp-MarkerAvatarStack-item:not(:first-child),.bp-MarkerCluster:focus-within .bp-MarkerAvatarStack-item:not(:first-child){margin-left:2px}.bp-MarkerAvatarStack-overflow{cursor:pointer}.bp-MarkerAvatarStack-overflowBadge{background-color:#6f6f6f}
|
|
74
|
+
.bp-MarkerCluster{position:absolute;top:50%;z-index:1;height:8px;transform:translate(-2px, -50%);transition:transform 150ms}.bp-MarkerCluster:hover,.bp-MarkerCluster:focus-within{z-index:2;transform:translate(-2px, -50%) scale(1.5)}.bp-MarkerCluster:hover .bp-MarkerCluster-tick,.bp-MarkerCluster:focus-within .bp-MarkerCluster-tick{transform:none}.bp-MarkerCluster-tick{display:block;width:100%;height:100%;padding:0;background:#6f6f6f;border:1px solid #fff;border-radius:2px;cursor:pointer;transition:transform 150ms}
|
|
75
|
+
.bp-TimeControlsV2{position:relative;margin-right:10px;margin-left:10px}.bp-TimeControlsV2-scrubber{position:relative}.bp-TimeControlsV2-slider{height:20px}.bp-TimeControlsV2-slider .bp-SliderControl-track{height:6px;margin:auto 0;border-radius:5px;backface-visibility:hidden;mask-image:var(--bp-track-mask, none)}.bp-TimeControlsV2-slider .bp-SliderControl-thumb{top:50%;z-index:3;width:3px;height:16px;margin-left:-1.5px;background:#fff;border:0;border-radius:2px;transform:translateY(-50%);cursor:ew-resize}.bp-TimeControlsV2-marker{position:absolute;top:50%;z-index:1;width:2px;height:8px;padding:0;background:#fff;border:0;border-radius:2px;transform:translate(-50%, -50%);cursor:pointer;transition:transform 150ms}.bp-TimeControlsV2-marker:hover,.bp-TimeControlsV2-marker:focus-visible{z-index:2;transform:translate(-50%, -50%) scale(1.7)}.bp-TimeControlsV2-marker:hover>.bp-MarkerAvatar,.bp-TimeControlsV2-marker:focus-visible>.bp-MarkerAvatar{outline:0 solid transparent;box-shadow:0 0 0 2px #fff;transform:translate(-50%, calc(5px / 1.7))}.bp-TimeControlsV2-marker:focus-visible{outline:2px solid #fff;outline-offset:2px}.bp-TimeControlsV2-marker--group:hover,.bp-TimeControlsV2-marker--group:focus-visible{transform:translate(-50%, -50%) scale(1.5)}
|
|
74
76
|
.bp-VideoFullscreenButton{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;color:#fff;background:rgba(0,0,0,.6);border:none;border-radius:50%;box-shadow:0 2px 12px 0 rgba(0,0,0,.8);cursor:pointer;backdrop-filter:blur(60px);pointer-events:auto}.bp-VideoFullscreenButton svg{width:20px;height:20px}
|
|
75
77
|
.bp-VideoControlsRoot:has(.bp-VideoControlsV2){position:absolute;top:0;right:0;bottom:0;left:0;width:100%;pointer-events:none}.bp-VideoControlsRoot:has(.bp-VideoControlsV2) .bp-ControlsLayer{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;pointer-events:none}.bp-VideoControlsV2{display:flex;flex-direction:column;width:100%;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);padding:30px 48px 20px 48px;pointer-events:auto}.bp-VideoControlsV2 .bp-FullscreenToggle{width:36px;height:40px}.bp-VideoControlsV2-bar{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:0 10px 5px}.bp-VideoControlsV2-group{display:flex;gap:4px;align-items:center}.bp-VideoControlsV2-group .bp-VideoControlsV2-divider{margin:0 8px}.bp-VideoControlsV2-playPause{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-VideoControlsV2-playPause:focus:not(:disabled),.bp-VideoControlsV2-playPause:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-VideoControlsV2-playPause:focus:not(:disabled) svg,.bp-VideoControlsV2-playPause:hover:not(:disabled) svg,.bp-VideoControlsV2-playPause.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-VideoControlsV2-playPause.bp-is-active,.bp-VideoControlsV2-playPause:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-VideoControlsV2-playPause.bp-is-active:focus:not(:disabled),.bp-VideoControlsV2-playPause.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-VideoControlsV2-playPause:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-playPause:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-playPause:focus:not(:focus-visible){box-shadow:none}.bp-VideoControlsV2-playPause:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-VideoControlsV2-playPause svg{width:32px;height:32px;padding:5px}.bp-VideoControlsV2-skipBtn{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-VideoControlsV2-skipBtn:focus:not(:disabled),.bp-VideoControlsV2-skipBtn:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-VideoControlsV2-skipBtn:focus:not(:disabled) svg,.bp-VideoControlsV2-skipBtn:hover:not(:disabled) svg,.bp-VideoControlsV2-skipBtn.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-VideoControlsV2-skipBtn.bp-is-active,.bp-VideoControlsV2-skipBtn:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-VideoControlsV2-skipBtn.bp-is-active:focus:not(:disabled),.bp-VideoControlsV2-skipBtn.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-VideoControlsV2-skipBtn:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-skipBtn:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-skipBtn:focus:not(:focus-visible){box-shadow:none}.bp-VideoControlsV2-skipBtn:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-VideoControlsV2-skipBtn svg{width:32px;height:32px;padding:5px}.bp-VideoControlsV2-divider{width:1px;height:24px;background-color:rgba(255,255,255,.1);border-radius:1px}.bp-VideoControlsV2 .bp-AnnotationsControls{gap:4px;padding-left:0;border-left:none}
|
|
76
78
|
.bp-VideoGuidesOverlay{position:absolute;pointer-events:none}.bp-VideoGuidesOverlay-svg{display:block;width:100%;height:100%;overflow:visible}.bp-VideoGuidesOverlay-cas{fill:none;stroke:#000;stroke-opacity:.5;stroke-width:3;vector-effect:non-scaling-stroke}.bp-VideoGuidesOverlay-ln{fill:none;stroke:#fff;stroke-width:1.25;vector-effect:non-scaling-stroke}
|