box-content-preview 3.85.0 → 3.86.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 +1 -1
- package/dist/lib/index.js +39 -14
- 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.86.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.86.0/en-US/preview.js
|
|
29
|
+
https://cdn01.boxcdn.net/platform/preview/3.86.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.86.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.86.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.86.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
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
.bp-VideoControls{display:flex;flex-direction:column;width:100%;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);padding:40px 20px 8px}.bp-VideoControls .bp-FullscreenToggle{width:36px;height:40px}.bp-VideoControls-bar{display:flex;padding:0 10px 5px;display:grid;align-items:center}.bp-VideoControls-bar.bp-VideoControls-bar--two-groups{justify-content:flex-end}.bp-VideoControls-bar.bp-VideoControls-bar--two-groups .bp-VideoControls-group--play-pause{position:absolute;left:50%;transform:translateX(-50%)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups{grid-template-columns:repeat(3, 1fr)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups.bp-VideoControls-bar--narrow-video{grid-template-columns:repeat(2, 1fr)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--annotations{justify-self:flex-start}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--play-pause{justify-self:center}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--media-controls{justify-self:flex-end}.bp-VideoControls-group{display:flex;align-items:center}.bp-VideoControls-settings{position:relative}.bp-VideoControls-settings .bp-SettingsFlyout{right:15px}.bp-VideoControls-settings .bp-SettingsToggle-button{width:36px;height:40px}
|
|
72
72
|
.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{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px}.bp-FilmstripV2-frameImage{position:absolute;top:0;left:0;overflow:hidden;background-repeat:no-repeat;transform-origin:top left}.bp-FilmstripV2-frame .bp-crawler{position:relative;z-index:1}.bp-FilmstripV2-time{margin-top:8px;color:#000;font-size:13px;line-height:20px;text-align:center}
|
|
73
73
|
.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}
|
|
74
|
-
.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
|
|
74
|
+
.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:var(--bp-marker-stack-overlap, -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}
|
|
75
75
|
.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}
|
|
76
76
|
.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)}
|
|
77
77
|
.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}
|
package/dist/lib/index.js
CHANGED
|
@@ -1010,7 +1010,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
|
|
|
1010
1010
|
const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
|
|
1011
1011
|
const CLIENT_NAME_KEY = 'box_client_name';
|
|
1012
1012
|
const CLIENT_VERSION_KEY = 'box_client_version';
|
|
1013
|
-
const CLIENT_VERSION = "3.
|
|
1013
|
+
const CLIENT_VERSION = "3.86.0"; // eslint-disable-line no-undef
|
|
1014
1014
|
const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
|
|
1015
1015
|
const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
|
|
1016
1016
|
const PROMISE_MAP = {};
|
|
@@ -22321,7 +22321,7 @@ class Browser {
|
|
|
22321
22321
|
;// ./src/lib/Logger.js
|
|
22322
22322
|
/* eslint-disable no-undef */
|
|
22323
22323
|
const CLIENT_NAME = "box-content-preview";
|
|
22324
|
-
const CLIENT_VERSION = "3.
|
|
22324
|
+
const CLIENT_VERSION = "3.86.0";
|
|
22325
22325
|
/* eslint-enable no-undef */
|
|
22326
22326
|
|
|
22327
22327
|
class Logger {
|
|
@@ -37035,7 +37035,7 @@ function finalizeCluster(group, durationValue) {
|
|
|
37035
37035
|
* of its neighbor joins the same cluster. This means distant markers can end up in one cluster
|
|
37036
37036
|
* if intermediate markers bridge the gap.
|
|
37037
37037
|
*/
|
|
37038
|
-
function buildClusters(markers, durationValue, trackWidth) {
|
|
37038
|
+
function buildClusters(markers, durationValue, trackWidth, thresholdPx = CLUSTER_THRESHOLD_PX) {
|
|
37039
37039
|
if (durationValue <= 0 || markers.length === 0 || trackWidth <= 0) return [];
|
|
37040
37040
|
const sorted = [...markers].sort((a, b) => a.time - b.time);
|
|
37041
37041
|
const clusters = [];
|
|
@@ -37043,7 +37043,7 @@ function buildClusters(markers, durationValue, trackWidth) {
|
|
|
37043
37043
|
for (let i = 1; i < sorted.length; i += 1) {
|
|
37044
37044
|
const prevPx = sorted[i - 1].time / durationValue * trackWidth;
|
|
37045
37045
|
const currPx = sorted[i].time / durationValue * trackWidth;
|
|
37046
|
-
if (currPx - prevPx <=
|
|
37046
|
+
if (currPx - prevPx <= thresholdPx) {
|
|
37047
37047
|
currentGroup.push(sorted[i]);
|
|
37048
37048
|
} else {
|
|
37049
37049
|
clusters.push(finalizeCluster(currentGroup, durationValue));
|
|
@@ -37184,7 +37184,8 @@ function AnonymousAvatarIcon() {
|
|
|
37184
37184
|
function MarkerAvatar({
|
|
37185
37185
|
avatarUrl,
|
|
37186
37186
|
colorIndex = 0,
|
|
37187
|
-
initial
|
|
37187
|
+
initial,
|
|
37188
|
+
size
|
|
37188
37189
|
}) {
|
|
37189
37190
|
const safeIndex = Number.isFinite(colorIndex) ? Math.abs(colorIndex) % AVATAR_PALETTE.length : 0;
|
|
37190
37191
|
const {
|
|
@@ -37208,11 +37209,17 @@ function MarkerAvatar({
|
|
|
37208
37209
|
}
|
|
37209
37210
|
}, initial);
|
|
37210
37211
|
}
|
|
37212
|
+
const style = {};
|
|
37213
|
+
if (!showImage) {
|
|
37214
|
+
style.backgroundColor = bgColor;
|
|
37215
|
+
}
|
|
37216
|
+
if (size) {
|
|
37217
|
+
style.width = size;
|
|
37218
|
+
style.height = size;
|
|
37219
|
+
}
|
|
37211
37220
|
return /*#__PURE__*/external_react_["default"].createElement("span", {
|
|
37212
37221
|
className: "bp-MarkerAvatar",
|
|
37213
|
-
style:
|
|
37214
|
-
backgroundColor: bgColor
|
|
37215
|
-
} : undefined
|
|
37222
|
+
style: Object.keys(style).length > 0 ? style : undefined
|
|
37216
37223
|
}, avatar);
|
|
37217
37224
|
}
|
|
37218
37225
|
;// ./src/lib/viewers/controls/media/MarkerAvatarStack.scss
|
|
@@ -37225,15 +37232,26 @@ function MarkerAvatar({
|
|
|
37225
37232
|
const MAX_VISIBLE_AVATARS = 4;
|
|
37226
37233
|
function MarkerAvatarStack({
|
|
37227
37234
|
markers,
|
|
37228
|
-
onMarkerClick
|
|
37235
|
+
onMarkerClick,
|
|
37236
|
+
overlapPx,
|
|
37237
|
+
selectedId,
|
|
37238
|
+
size
|
|
37229
37239
|
}) {
|
|
37230
37240
|
const hasOverflow = markers.length > MAX_VISIBLE_AVATARS;
|
|
37231
37241
|
const visibleMarkers = hasOverflow ? markers.slice(0, MAX_VISIBLE_AVATARS - 1) : markers;
|
|
37242
|
+
const overflowMarkers = hasOverflow ? markers.slice(MAX_VISIBLE_AVATARS - 1) : [];
|
|
37243
|
+
const isOverflowSelected = overflowMarkers.some(marker => marker.id === selectedId);
|
|
37244
|
+
const style = overlapPx != null ? {
|
|
37245
|
+
'--bp-marker-stack-overlap': `-${overlapPx}px`
|
|
37246
|
+
} : undefined;
|
|
37232
37247
|
return /*#__PURE__*/external_react_["default"].createElement("span", {
|
|
37233
|
-
className: "bp-MarkerAvatarStack"
|
|
37248
|
+
className: "bp-MarkerAvatarStack",
|
|
37249
|
+
style: style
|
|
37234
37250
|
}, visibleMarkers.map(marker => /*#__PURE__*/external_react_["default"].createElement("button", {
|
|
37235
37251
|
key: marker.id,
|
|
37236
|
-
|
|
37252
|
+
"aria-label": "Comment marker",
|
|
37253
|
+
"aria-pressed": marker.id === selectedId,
|
|
37254
|
+
className: `bp-MarkerAvatarStack-item${marker.id === selectedId ? ' bp-MarkerAvatarStack-item--selected' : ''}`,
|
|
37237
37255
|
"data-resin-target": "commentMarkerStackAvatar",
|
|
37238
37256
|
onClick: e => {
|
|
37239
37257
|
e.stopPropagation();
|
|
@@ -37243,9 +37261,12 @@ function MarkerAvatarStack({
|
|
|
37243
37261
|
}, /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar, {
|
|
37244
37262
|
avatarUrl: marker.avatarUrl,
|
|
37245
37263
|
colorIndex: marker.colorIndex,
|
|
37246
|
-
initial: marker.initial
|
|
37264
|
+
initial: marker.initial,
|
|
37265
|
+
size: size
|
|
37247
37266
|
}))), hasOverflow && /*#__PURE__*/external_react_["default"].createElement("button", {
|
|
37248
|
-
|
|
37267
|
+
"aria-label": "Comment marker",
|
|
37268
|
+
"aria-pressed": isOverflowSelected,
|
|
37269
|
+
className: `bp-MarkerAvatarStack-item bp-MarkerAvatarStack-overflow${isOverflowSelected ? ' bp-MarkerAvatarStack-item--selected' : ''}`,
|
|
37249
37270
|
"data-resin-target": "commentMarkerStackAvatarOverflow",
|
|
37250
37271
|
onClick: e => {
|
|
37251
37272
|
e.stopPropagation();
|
|
@@ -37253,7 +37274,11 @@ function MarkerAvatarStack({
|
|
|
37253
37274
|
},
|
|
37254
37275
|
type: "button"
|
|
37255
37276
|
}, /*#__PURE__*/external_react_["default"].createElement("span", {
|
|
37256
|
-
className: "bp-MarkerAvatar bp-MarkerAvatarStack-overflowBadge"
|
|
37277
|
+
className: "bp-MarkerAvatar bp-MarkerAvatarStack-overflowBadge",
|
|
37278
|
+
style: size ? {
|
|
37279
|
+
width: size,
|
|
37280
|
+
height: size
|
|
37281
|
+
} : undefined
|
|
37257
37282
|
}, /*#__PURE__*/external_react_["default"].createElement("span", {
|
|
37258
37283
|
className: "bp-MarkerAvatar-initial"
|
|
37259
37284
|
}, "+", markers.length - (MAX_VISIBLE_AVATARS - 1)))));
|