react-iiif-vault 0.9.8 → 0.9.9
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/dist/cjs/index.js +979 -271
- package/dist/esm/index.mjs +917 -219
- package/dist/index.d.ts +97 -26
- package/dist/index.umd.js +27573 -26870
- package/package.json +13 -10
package/dist/esm/index.mjs
CHANGED
|
@@ -1,23 +1,215 @@
|
|
|
1
|
-
import React, { useContext, useMemo, useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, Fragment } from 'react';
|
|
1
|
+
import React$1, { useContext, useMemo, useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, Fragment, useReducer } from 'react';
|
|
2
|
+
import { AtlasAuto as AtlasAuto$1, mergeStyles, RegionHighlight, TileSet as TileSet$1 } from '@atlas-viewer/atlas';
|
|
2
3
|
import { globalVault, Vault } from '@iiif/vault';
|
|
3
|
-
import { AtlasAuto, mergeStyles, RegionHighlight, TileSet as TileSet$1 } from '@atlas-viewer/atlas';
|
|
4
4
|
import { createAction } from 'typesafe-actions';
|
|
5
|
+
import require$$0 from 'react-dom';
|
|
5
6
|
import { createEventsHelper, createStylesHelper, createThumbnailHelper } from '@iiif/vault-helpers';
|
|
6
7
|
import { ImageServiceLoader, getImageServices } from '@atlas-viewer/iiif-image-api';
|
|
7
8
|
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
10
|
+
|
|
11
|
+
var reactErrorBoundary_umd = {exports: {}};
|
|
12
|
+
|
|
13
|
+
(function (module, exports) {
|
|
14
|
+
(function (global, factory) {
|
|
15
|
+
factory(exports, React$1) ;
|
|
16
|
+
})(commonjsGlobal, (function (exports, React) {
|
|
17
|
+
function _interopNamespace(e) {
|
|
18
|
+
if (e && e.__esModule) return e;
|
|
19
|
+
var n = Object.create(null);
|
|
20
|
+
if (e) {
|
|
21
|
+
Object.keys(e).forEach(function (k) {
|
|
22
|
+
if (k !== 'default') {
|
|
23
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
24
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () { return e[k]; }
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
n["default"] = e;
|
|
32
|
+
return Object.freeze(n);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
36
|
+
|
|
37
|
+
function _setPrototypeOf(o, p) {
|
|
38
|
+
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
|
39
|
+
o.__proto__ = p;
|
|
40
|
+
return o;
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
return _setPrototypeOf(o, p);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function _inheritsLoose(subClass, superClass) {
|
|
47
|
+
subClass.prototype = Object.create(superClass.prototype);
|
|
48
|
+
subClass.prototype.constructor = subClass;
|
|
49
|
+
_setPrototypeOf(subClass, superClass);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
var changedArray = function changedArray(a, b) {
|
|
53
|
+
if (a === void 0) {
|
|
54
|
+
a = [];
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
if (b === void 0) {
|
|
58
|
+
b = [];
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
return a.length !== b.length || a.some(function (item, index) {
|
|
62
|
+
return !Object.is(item, b[index]);
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
var initialState = {
|
|
67
|
+
error: null
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
71
|
+
_inheritsLoose(ErrorBoundary, _React$Component);
|
|
72
|
+
|
|
73
|
+
function ErrorBoundary() {
|
|
74
|
+
var _this;
|
|
75
|
+
|
|
76
|
+
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
77
|
+
_args[_key] = arguments[_key];
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
_this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
|
|
81
|
+
_this.state = initialState;
|
|
82
|
+
|
|
83
|
+
_this.resetErrorBoundary = function () {
|
|
84
|
+
var _this$props;
|
|
85
|
+
|
|
86
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
87
|
+
args[_key2] = arguments[_key2];
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
_this.props.onReset == null ? void 0 : (_this$props = _this.props).onReset.apply(_this$props, args);
|
|
91
|
+
|
|
92
|
+
_this.reset();
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
return _this;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {
|
|
99
|
+
return {
|
|
100
|
+
error: error
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
var _proto = ErrorBoundary.prototype;
|
|
105
|
+
|
|
106
|
+
_proto.reset = function reset() {
|
|
107
|
+
this.setState(initialState);
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
_proto.componentDidCatch = function componentDidCatch(error, info) {
|
|
111
|
+
var _this$props$onError, _this$props2;
|
|
112
|
+
|
|
113
|
+
(_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
|
117
|
+
var error = this.state.error;
|
|
118
|
+
var resetKeys = this.props.resetKeys; // There's an edge case where if the thing that triggered the error
|
|
119
|
+
// happens to *also* be in the resetKeys array, we'd end up resetting
|
|
120
|
+
// the error boundary immediately. This would likely trigger a second
|
|
121
|
+
// error to be thrown.
|
|
122
|
+
// So we make sure that we don't check the resetKeys on the first call
|
|
123
|
+
// of cDU after the error is set
|
|
124
|
+
|
|
125
|
+
if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
|
|
126
|
+
var _this$props$onResetKe, _this$props3;
|
|
127
|
+
|
|
128
|
+
(_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);
|
|
129
|
+
this.reset();
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
_proto.render = function render() {
|
|
134
|
+
var error = this.state.error;
|
|
135
|
+
var _this$props4 = this.props,
|
|
136
|
+
fallbackRender = _this$props4.fallbackRender,
|
|
137
|
+
FallbackComponent = _this$props4.FallbackComponent,
|
|
138
|
+
fallback = _this$props4.fallback;
|
|
139
|
+
|
|
140
|
+
if (error !== null) {
|
|
141
|
+
var _props = {
|
|
142
|
+
error: error,
|
|
143
|
+
resetErrorBoundary: this.resetErrorBoundary
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
if ( /*#__PURE__*/React__namespace.isValidElement(fallback)) {
|
|
147
|
+
return fallback;
|
|
148
|
+
} else if (typeof fallbackRender === 'function') {
|
|
149
|
+
return fallbackRender(_props);
|
|
150
|
+
} else if (FallbackComponent) {
|
|
151
|
+
return /*#__PURE__*/React__namespace.createElement(FallbackComponent, _props);
|
|
152
|
+
} else {
|
|
153
|
+
throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
return this.props.children;
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
return ErrorBoundary;
|
|
161
|
+
}(React__namespace.Component);
|
|
162
|
+
|
|
163
|
+
function withErrorBoundary(Component, errorBoundaryProps) {
|
|
164
|
+
var Wrapped = function Wrapped(props) {
|
|
165
|
+
return /*#__PURE__*/React__namespace.createElement(ErrorBoundary, errorBoundaryProps, /*#__PURE__*/React__namespace.createElement(Component, props));
|
|
166
|
+
}; // Format for display in DevTools
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
var name = Component.displayName || Component.name || 'Unknown';
|
|
170
|
+
Wrapped.displayName = "withErrorBoundary(" + name + ")";
|
|
171
|
+
return Wrapped;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
function useErrorHandler(givenError) {
|
|
175
|
+
var _React$useState = React__namespace.useState(null),
|
|
176
|
+
error = _React$useState[0],
|
|
177
|
+
setError = _React$useState[1];
|
|
178
|
+
|
|
179
|
+
if (givenError != null) throw givenError;
|
|
180
|
+
if (error != null) throw error;
|
|
181
|
+
return setError;
|
|
182
|
+
}
|
|
183
|
+
/*
|
|
184
|
+
eslint
|
|
185
|
+
@typescript-eslint/sort-type-union-intersection-members: "off",
|
|
186
|
+
@typescript-eslint/no-throw-literal: "off",
|
|
187
|
+
@typescript-eslint/prefer-nullish-coalescing: "off"
|
|
188
|
+
*/
|
|
189
|
+
|
|
190
|
+
exports.ErrorBoundary = ErrorBoundary;
|
|
191
|
+
exports.useErrorHandler = useErrorHandler;
|
|
192
|
+
exports.withErrorBoundary = withErrorBoundary;
|
|
193
|
+
|
|
194
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
195
|
+
|
|
196
|
+
}));
|
|
197
|
+
|
|
198
|
+
}(reactErrorBoundary_umd, reactErrorBoundary_umd.exports));
|
|
199
|
+
|
|
200
|
+
var __defProp$a = Object.defineProperty;
|
|
201
|
+
var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
|
|
202
|
+
var __hasOwnProp$a = Object.prototype.hasOwnProperty;
|
|
203
|
+
var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
|
|
204
|
+
var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
205
|
+
var __spreadValues$a = (a, b) => {
|
|
14
206
|
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp$
|
|
16
|
-
__defNormalProp$
|
|
17
|
-
if (__getOwnPropSymbols$
|
|
18
|
-
for (var prop of __getOwnPropSymbols$
|
|
19
|
-
if (__propIsEnum$
|
|
20
|
-
__defNormalProp$
|
|
207
|
+
if (__hasOwnProp$a.call(b, prop))
|
|
208
|
+
__defNormalProp$a(a, prop, b[prop]);
|
|
209
|
+
if (__getOwnPropSymbols$a)
|
|
210
|
+
for (var prop of __getOwnPropSymbols$a(b)) {
|
|
211
|
+
if (__propIsEnum$a.call(b, prop))
|
|
212
|
+
__defNormalProp$a(a, prop, b[prop]);
|
|
21
213
|
}
|
|
22
214
|
return a;
|
|
23
215
|
};
|
|
@@ -28,26 +220,32 @@ const defaultResourceContext = {
|
|
|
28
220
|
canvas: void 0,
|
|
29
221
|
annotation: void 0
|
|
30
222
|
};
|
|
31
|
-
const ResourceReactContext = React.createContext(defaultResourceContext);
|
|
223
|
+
const ResourceReactContext = React$1.createContext(defaultResourceContext);
|
|
32
224
|
const useResourceContext = () => {
|
|
33
225
|
return useContext(ResourceReactContext);
|
|
34
226
|
};
|
|
35
|
-
|
|
227
|
+
function ResourceProvider({ value, children }) {
|
|
36
228
|
const parentContext = useResourceContext();
|
|
37
229
|
const newContext = useMemo(() => {
|
|
38
|
-
return __spreadValues$
|
|
230
|
+
return __spreadValues$a(__spreadValues$a({}, parentContext), value);
|
|
39
231
|
}, [value, parentContext]);
|
|
40
|
-
return /* @__PURE__ */ React.createElement(ResourceReactContext.Provider, {
|
|
232
|
+
return /* @__PURE__ */ React$1.createElement(ResourceReactContext.Provider, {
|
|
41
233
|
value: newContext
|
|
42
234
|
}, children);
|
|
43
|
-
}
|
|
235
|
+
}
|
|
44
236
|
|
|
45
|
-
const ReactVaultContext = React.createContext({
|
|
237
|
+
const ReactVaultContext = React$1.createContext({
|
|
46
238
|
vault: null,
|
|
47
239
|
setVaultInstance: (vault) => {
|
|
48
240
|
}
|
|
49
241
|
});
|
|
50
|
-
|
|
242
|
+
function VaultProvider({
|
|
243
|
+
vault,
|
|
244
|
+
vaultOptions,
|
|
245
|
+
useGlobal,
|
|
246
|
+
resources,
|
|
247
|
+
children
|
|
248
|
+
}) {
|
|
51
249
|
const [vaultInstance, setVaultInstance] = useState(() => {
|
|
52
250
|
if (vault) {
|
|
53
251
|
return vault;
|
|
@@ -60,12 +258,12 @@ const VaultProvider = ({ vault, vaultOptions, useGlobal, resources, children })
|
|
|
60
258
|
}
|
|
61
259
|
return new Vault();
|
|
62
260
|
});
|
|
63
|
-
return /* @__PURE__ */ React.createElement(ReactVaultContext.Provider, {
|
|
261
|
+
return /* @__PURE__ */ React$1.createElement(ReactVaultContext.Provider, {
|
|
64
262
|
value: { vault: vaultInstance, setVaultInstance }
|
|
65
|
-
}, /* @__PURE__ */ React.createElement(ResourceProvider, {
|
|
263
|
+
}, /* @__PURE__ */ React$1.createElement(ResourceProvider, {
|
|
66
264
|
value: resources || {}
|
|
67
265
|
}, children));
|
|
68
|
-
}
|
|
266
|
+
}
|
|
69
267
|
|
|
70
268
|
const useVault = () => {
|
|
71
269
|
const { vault } = useContext(ReactVaultContext);
|
|
@@ -133,28 +331,30 @@ function useExternalManifest(idOrRef, options) {
|
|
|
133
331
|
return { id, isLoaded, error, manifest: resource, requestId, cached };
|
|
134
332
|
}
|
|
135
333
|
|
|
136
|
-
|
|
137
|
-
return /* @__PURE__ */ React.createElement(ResourceProvider, {
|
|
334
|
+
function ManifestContext({ manifest, children }) {
|
|
335
|
+
return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
|
|
138
336
|
value: { manifest }
|
|
139
337
|
}, children);
|
|
140
|
-
}
|
|
338
|
+
}
|
|
141
339
|
|
|
142
|
-
|
|
143
|
-
return /* @__PURE__ */ React.createElement(ResourceProvider, {
|
|
340
|
+
function CanvasContext({ canvas, children }) {
|
|
341
|
+
return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
|
|
144
342
|
value: { canvas }
|
|
145
343
|
}, children);
|
|
146
|
-
}
|
|
344
|
+
}
|
|
147
345
|
|
|
148
346
|
function useVaultSelector(selector, deps = []) {
|
|
149
347
|
const vault = useVault();
|
|
150
348
|
const [selectedState, setSelectedState] = useState(() => selector(vault.getState(), vault));
|
|
151
349
|
useEffect(() => {
|
|
152
|
-
return vault.subscribe((s) => selector(s, vault),
|
|
350
|
+
return vault.subscribe((s) => selector(s, vault), (s) => {
|
|
351
|
+
setSelectedState(s);
|
|
352
|
+
}, false);
|
|
153
353
|
}, deps);
|
|
154
354
|
return selectedState;
|
|
155
355
|
}
|
|
156
356
|
|
|
157
|
-
const VisibleCanvasReactContext = React.createContext([]);
|
|
357
|
+
const VisibleCanvasReactContext = React$1.createContext([]);
|
|
158
358
|
function useVisibleCanvases() {
|
|
159
359
|
const ids = useContext(VisibleCanvasReactContext);
|
|
160
360
|
return useVaultSelector((state) => {
|
|
@@ -173,7 +373,7 @@ const SimpleViewerReactContext = createContext({
|
|
|
173
373
|
totalCanvases: 0,
|
|
174
374
|
pagingView: true
|
|
175
375
|
});
|
|
176
|
-
|
|
376
|
+
function SimpleViewerProvider(props) {
|
|
177
377
|
const manifest = useExternalManifest(props.manifest);
|
|
178
378
|
const [currentCanvasId, setCurrentCanvasId] = useState("");
|
|
179
379
|
const [visible, setVisible] = useState([]);
|
|
@@ -256,21 +456,21 @@ const SimpleViewerProvider = (props) => {
|
|
|
256
456
|
}), [nextCanvas, previousCanvas, currentCanvasIndex, canvasList, setCurrentCanvasIndex, internalSetCurrentCanvasId]);
|
|
257
457
|
if (!manifest.manifest) {
|
|
258
458
|
console.warn("The manifest passed to the provider is not a valid IIIF manifest.");
|
|
259
|
-
return /* @__PURE__ */ React.createElement("div", null, "Sorry, something went wrong.");
|
|
459
|
+
return /* @__PURE__ */ React$1.createElement("div", null, "Sorry, something went wrong.");
|
|
260
460
|
}
|
|
261
461
|
if (!manifest.isLoaded) {
|
|
262
|
-
return /* @__PURE__ */ React.createElement("div", null, "Loading...");
|
|
462
|
+
return /* @__PURE__ */ React$1.createElement("div", null, "Loading...");
|
|
263
463
|
}
|
|
264
|
-
return /* @__PURE__ */ React.createElement(SimpleViewerReactContext.Provider, {
|
|
464
|
+
return /* @__PURE__ */ React$1.createElement(SimpleViewerReactContext.Provider, {
|
|
265
465
|
value: ctx
|
|
266
|
-
}, /* @__PURE__ */ React.createElement(VisibleCanvasReactContext.Provider, {
|
|
466
|
+
}, /* @__PURE__ */ React$1.createElement(VisibleCanvasReactContext.Provider, {
|
|
267
467
|
value: visible
|
|
268
|
-
}, /* @__PURE__ */ React.createElement(ManifestContext, {
|
|
468
|
+
}, /* @__PURE__ */ React$1.createElement(ManifestContext, {
|
|
269
469
|
manifest: manifest.manifest.id
|
|
270
|
-
}, /* @__PURE__ */ React.createElement(CanvasContext, {
|
|
470
|
+
}, /* @__PURE__ */ React$1.createElement(CanvasContext, {
|
|
271
471
|
canvas: currentCanvasId
|
|
272
472
|
}, props.children))));
|
|
273
|
-
}
|
|
473
|
+
}
|
|
274
474
|
function useSimpleViewer() {
|
|
275
475
|
return useContext(SimpleViewerReactContext);
|
|
276
476
|
}
|
|
@@ -283,16 +483,16 @@ function useContextBridge() {
|
|
|
283
483
|
VisibleCanvasReactContext: useContext(VisibleCanvasReactContext)
|
|
284
484
|
};
|
|
285
485
|
}
|
|
286
|
-
|
|
287
|
-
return /* @__PURE__ */ React.createElement(VaultProvider, {
|
|
486
|
+
function ContextBridge(props) {
|
|
487
|
+
return /* @__PURE__ */ React$1.createElement(VaultProvider, {
|
|
288
488
|
vault: props.bridge.VaultContext.vault || void 0,
|
|
289
489
|
resources: props.bridge.ResourceContext
|
|
290
|
-
}, /* @__PURE__ */ React.createElement(VisibleCanvasReactContext.Provider, {
|
|
490
|
+
}, /* @__PURE__ */ React$1.createElement(VisibleCanvasReactContext.Provider, {
|
|
291
491
|
value: props.bridge.VisibleCanvasReactContext
|
|
292
|
-
}, /* @__PURE__ */ React.createElement(SimpleViewerReactContext.Provider, {
|
|
492
|
+
}, /* @__PURE__ */ React$1.createElement(SimpleViewerReactContext.Provider, {
|
|
293
493
|
value: props.bridge.SimpleViewerReactContext
|
|
294
494
|
}, props.children)));
|
|
295
|
-
}
|
|
495
|
+
}
|
|
296
496
|
|
|
297
497
|
const IMPORT_ENTITIES = "@iiif/IMPORT_ENTITIES";
|
|
298
498
|
const MODIFY_ENTITY_FIELD = "@iiif/MODIFY_ENTITY_FIELD";
|
|
@@ -456,49 +656,152 @@ function useVirtualAnnotationPageContext() {
|
|
|
456
656
|
}
|
|
457
657
|
function VirtualAnnotationProvider({ children }) {
|
|
458
658
|
const [fullPage, { addAnnotation, removeAnnotation }] = useVirtualAnnotationPage();
|
|
459
|
-
return /* @__PURE__ */ React.createElement(VirtualAnnotationPageContext.Provider, {
|
|
659
|
+
return /* @__PURE__ */ React$1.createElement(VirtualAnnotationPageContext.Provider, {
|
|
460
660
|
value: useMemo(() => ({ fullPage, addAnnotation, removeAnnotation }), [fullPage])
|
|
461
661
|
}, children);
|
|
462
662
|
}
|
|
463
663
|
|
|
464
|
-
var __defProp$
|
|
465
|
-
var
|
|
466
|
-
var
|
|
467
|
-
var
|
|
468
|
-
var
|
|
469
|
-
var
|
|
664
|
+
var __defProp$9 = Object.defineProperty;
|
|
665
|
+
var __defProps$7 = Object.defineProperties;
|
|
666
|
+
var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
|
|
667
|
+
var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
|
|
668
|
+
var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
|
|
669
|
+
var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
|
|
670
|
+
var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
671
|
+
var __spreadValues$9 = (a, b) => {
|
|
470
672
|
for (var prop in b || (b = {}))
|
|
471
|
-
if (__hasOwnProp$
|
|
472
|
-
__defNormalProp$
|
|
473
|
-
if (__getOwnPropSymbols$
|
|
474
|
-
for (var prop of __getOwnPropSymbols$
|
|
475
|
-
if (__propIsEnum$
|
|
476
|
-
__defNormalProp$
|
|
673
|
+
if (__hasOwnProp$9.call(b, prop))
|
|
674
|
+
__defNormalProp$9(a, prop, b[prop]);
|
|
675
|
+
if (__getOwnPropSymbols$9)
|
|
676
|
+
for (var prop of __getOwnPropSymbols$9(b)) {
|
|
677
|
+
if (__propIsEnum$9.call(b, prop))
|
|
678
|
+
__defNormalProp$9(a, prop, b[prop]);
|
|
679
|
+
}
|
|
680
|
+
return a;
|
|
681
|
+
};
|
|
682
|
+
var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
|
|
683
|
+
function DefaultCanvasFallback({ width, style, height }) {
|
|
684
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
685
|
+
style: __spreadProps$7(__spreadValues$9({ width, height, minHeight: 500 }, style || {}), { background: "#f9f9f9" })
|
|
686
|
+
}, "Unknown error");
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
var createRoot;
|
|
690
|
+
|
|
691
|
+
var m = require$$0;
|
|
692
|
+
{
|
|
693
|
+
var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
|
694
|
+
createRoot = function(c, o) {
|
|
695
|
+
i.usingClientEntryPoint = true;
|
|
696
|
+
try {
|
|
697
|
+
return m.createRoot(c, o);
|
|
698
|
+
} finally {
|
|
699
|
+
i.usingClientEntryPoint = false;
|
|
700
|
+
}
|
|
701
|
+
};
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
const ViewerPresetContext = createContext(null);
|
|
705
|
+
function useViewerPreset() {
|
|
706
|
+
return useContext(ViewerPresetContext);
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
const PortalContext = React$1.createContext(null);
|
|
710
|
+
const OverlayPortalContext = React$1.createContext(null);
|
|
711
|
+
function CanvasPortal({ children, overlay }) {
|
|
712
|
+
const htmlElement = useContext(overlay ? OverlayPortalContext : PortalContext);
|
|
713
|
+
const root = useMemo(() => htmlElement ? createRoot(htmlElement) : null, [htmlElement]);
|
|
714
|
+
const preset = useViewerPreset();
|
|
715
|
+
useLayoutEffect(() => {
|
|
716
|
+
return () => root == null ? void 0 : root.unmount();
|
|
717
|
+
}, [root]);
|
|
718
|
+
useLayoutEffect(() => {
|
|
719
|
+
if (root) {
|
|
720
|
+
root.render(/* @__PURE__ */ React$1.createElement(ViewerPresetContext.Provider, {
|
|
721
|
+
value: preset
|
|
722
|
+
}, children));
|
|
723
|
+
}
|
|
724
|
+
}, [children, preset]);
|
|
725
|
+
return null;
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
var __defProp$8 = Object.defineProperty;
|
|
729
|
+
var __defProps$6 = Object.defineProperties;
|
|
730
|
+
var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
|
|
731
|
+
var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
|
|
732
|
+
var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
|
|
733
|
+
var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
|
|
734
|
+
var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
735
|
+
var __spreadValues$8 = (a, b) => {
|
|
736
|
+
for (var prop in b || (b = {}))
|
|
737
|
+
if (__hasOwnProp$8.call(b, prop))
|
|
738
|
+
__defNormalProp$8(a, prop, b[prop]);
|
|
739
|
+
if (__getOwnPropSymbols$8)
|
|
740
|
+
for (var prop of __getOwnPropSymbols$8(b)) {
|
|
741
|
+
if (__propIsEnum$8.call(b, prop))
|
|
742
|
+
__defNormalProp$8(a, prop, b[prop]);
|
|
477
743
|
}
|
|
478
744
|
return a;
|
|
479
745
|
};
|
|
746
|
+
var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
|
|
480
747
|
var __objRest = (source, exclude) => {
|
|
481
748
|
var target = {};
|
|
482
749
|
for (var prop in source)
|
|
483
|
-
if (__hasOwnProp$
|
|
750
|
+
if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
484
751
|
target[prop] = source[prop];
|
|
485
|
-
if (source != null && __getOwnPropSymbols$
|
|
486
|
-
for (var prop of __getOwnPropSymbols$
|
|
487
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum$
|
|
752
|
+
if (source != null && __getOwnPropSymbols$8)
|
|
753
|
+
for (var prop of __getOwnPropSymbols$8(source)) {
|
|
754
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
|
|
488
755
|
target[prop] = source[prop];
|
|
489
756
|
}
|
|
490
757
|
return target;
|
|
491
758
|
};
|
|
759
|
+
const AtlasAuto = AtlasAuto$1;
|
|
492
760
|
function Viewer(_a) {
|
|
493
761
|
var _b = _a, {
|
|
494
|
-
children
|
|
762
|
+
children,
|
|
763
|
+
errorFallback,
|
|
764
|
+
outerContainerProps = {}
|
|
495
765
|
} = _b, props = __objRest(_b, [
|
|
496
|
-
"children"
|
|
766
|
+
"children",
|
|
767
|
+
"errorFallback",
|
|
768
|
+
"outerContainerProps"
|
|
497
769
|
]);
|
|
770
|
+
const portal = useRef(null);
|
|
771
|
+
const [portalElement, setPortalElement] = useState();
|
|
772
|
+
const [viewerPreset, setViewerPreset] = useState();
|
|
773
|
+
const overlayPortal = useRef(null);
|
|
774
|
+
const [overlayPortalElement, setOverlayPortalElement] = useState();
|
|
498
775
|
const bridge = useContextBridge();
|
|
499
|
-
|
|
776
|
+
const ErrorFallback = errorFallback || DefaultCanvasFallback;
|
|
777
|
+
useLayoutEffect(() => {
|
|
778
|
+
setPortalElement(portal.current);
|
|
779
|
+
setOverlayPortalElement(overlayPortal.current);
|
|
780
|
+
}, []);
|
|
781
|
+
return /* @__PURE__ */ React$1.createElement(reactErrorBoundary_umd.exports.ErrorBoundary, {
|
|
782
|
+
fallbackRender: () => /* @__PURE__ */ React$1.createElement(ErrorFallback, __spreadValues$8({}, props))
|
|
783
|
+
}, /* @__PURE__ */ React$1.createElement("div", __spreadValues$8({
|
|
784
|
+
style: { position: "relative" }
|
|
785
|
+
}, outerContainerProps), /* @__PURE__ */ React$1.createElement(AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
|
|
786
|
+
onCreated: (preset) => {
|
|
787
|
+
setViewerPreset(preset);
|
|
788
|
+
if (props.onCreated) {
|
|
789
|
+
props.onCreated(preset);
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
}), /* @__PURE__ */ React$1.createElement(ViewerPresetContext.Provider, {
|
|
793
|
+
value: viewerPreset
|
|
794
|
+
}, /* @__PURE__ */ React$1.createElement(PortalContext.Provider, {
|
|
795
|
+
value: portalElement
|
|
796
|
+
}, /* @__PURE__ */ React$1.createElement(OverlayPortalContext.Provider, {
|
|
797
|
+
value: overlayPortalElement
|
|
798
|
+
}, /* @__PURE__ */ React$1.createElement(ContextBridge, {
|
|
500
799
|
bridge
|
|
501
|
-
}, /* @__PURE__ */ React.createElement(VirtualAnnotationProvider, null, children)))
|
|
800
|
+
}, /* @__PURE__ */ React$1.createElement(VirtualAnnotationProvider, null, children)))))), /* @__PURE__ */ React$1.createElement("div", {
|
|
801
|
+
ref: overlayPortal
|
|
802
|
+
})), /* @__PURE__ */ React$1.createElement("div", {
|
|
803
|
+
ref: portal
|
|
804
|
+
}));
|
|
502
805
|
}
|
|
503
806
|
|
|
504
807
|
function useResourceEvents(resource, scope) {
|
|
@@ -616,25 +919,25 @@ function parseSelector(source) {
|
|
|
616
919
|
};
|
|
617
920
|
}
|
|
618
921
|
|
|
619
|
-
var __defProp$
|
|
620
|
-
var __defProps$
|
|
621
|
-
var __getOwnPropDescs$
|
|
622
|
-
var __getOwnPropSymbols$
|
|
623
|
-
var __hasOwnProp$
|
|
624
|
-
var __propIsEnum$
|
|
625
|
-
var __defNormalProp$
|
|
626
|
-
var __spreadValues$
|
|
922
|
+
var __defProp$7 = Object.defineProperty;
|
|
923
|
+
var __defProps$5 = Object.defineProperties;
|
|
924
|
+
var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
|
|
925
|
+
var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
|
|
926
|
+
var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
|
|
927
|
+
var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
|
|
928
|
+
var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
929
|
+
var __spreadValues$7 = (a, b) => {
|
|
627
930
|
for (var prop in b || (b = {}))
|
|
628
|
-
if (__hasOwnProp$
|
|
629
|
-
__defNormalProp$
|
|
630
|
-
if (__getOwnPropSymbols$
|
|
631
|
-
for (var prop of __getOwnPropSymbols$
|
|
632
|
-
if (__propIsEnum$
|
|
633
|
-
__defNormalProp$
|
|
931
|
+
if (__hasOwnProp$7.call(b, prop))
|
|
932
|
+
__defNormalProp$7(a, prop, b[prop]);
|
|
933
|
+
if (__getOwnPropSymbols$7)
|
|
934
|
+
for (var prop of __getOwnPropSymbols$7(b)) {
|
|
935
|
+
if (__propIsEnum$7.call(b, prop))
|
|
936
|
+
__defNormalProp$7(a, prop, b[prop]);
|
|
634
937
|
}
|
|
635
938
|
return a;
|
|
636
939
|
};
|
|
637
|
-
var __spreadProps$
|
|
940
|
+
var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
|
|
638
941
|
function expandTarget(target, options = {}) {
|
|
639
942
|
if (Array.isArray(target)) {
|
|
640
943
|
return expandTarget(target[0]);
|
|
@@ -691,7 +994,7 @@ function expandTarget(target, options = {}) {
|
|
|
691
994
|
if (!fragment) {
|
|
692
995
|
return {
|
|
693
996
|
type: "SpecificResource",
|
|
694
|
-
source: __spreadProps$
|
|
997
|
+
source: __spreadProps$5(__spreadValues$7({}, target), {
|
|
695
998
|
id
|
|
696
999
|
}),
|
|
697
1000
|
selector: null,
|
|
@@ -700,7 +1003,7 @@ function expandTarget(target, options = {}) {
|
|
|
700
1003
|
}
|
|
701
1004
|
return expandTarget({
|
|
702
1005
|
type: "SpecificResource",
|
|
703
|
-
source: __spreadProps$
|
|
1006
|
+
source: __spreadProps$5(__spreadValues$7({}, target), {
|
|
704
1007
|
id
|
|
705
1008
|
}),
|
|
706
1009
|
selector: {
|
|
@@ -717,25 +1020,25 @@ function expandTarget(target, options = {}) {
|
|
|
717
1020
|
};
|
|
718
1021
|
}
|
|
719
1022
|
|
|
720
|
-
var __defProp$
|
|
721
|
-
var __defProps$
|
|
722
|
-
var __getOwnPropDescs$
|
|
723
|
-
var __getOwnPropSymbols$
|
|
724
|
-
var __hasOwnProp$
|
|
725
|
-
var __propIsEnum$
|
|
726
|
-
var __defNormalProp$
|
|
727
|
-
var __spreadValues$
|
|
1023
|
+
var __defProp$6 = Object.defineProperty;
|
|
1024
|
+
var __defProps$4 = Object.defineProperties;
|
|
1025
|
+
var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
|
|
1026
|
+
var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
|
|
1027
|
+
var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
|
|
1028
|
+
var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
|
|
1029
|
+
var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1030
|
+
var __spreadValues$6 = (a, b) => {
|
|
728
1031
|
for (var prop in b || (b = {}))
|
|
729
|
-
if (__hasOwnProp$
|
|
730
|
-
__defNormalProp$
|
|
731
|
-
if (__getOwnPropSymbols$
|
|
732
|
-
for (var prop of __getOwnPropSymbols$
|
|
733
|
-
if (__propIsEnum$
|
|
734
|
-
__defNormalProp$
|
|
1032
|
+
if (__hasOwnProp$6.call(b, prop))
|
|
1033
|
+
__defNormalProp$6(a, prop, b[prop]);
|
|
1034
|
+
if (__getOwnPropSymbols$6)
|
|
1035
|
+
for (var prop of __getOwnPropSymbols$6(b)) {
|
|
1036
|
+
if (__propIsEnum$6.call(b, prop))
|
|
1037
|
+
__defNormalProp$6(a, prop, b[prop]);
|
|
735
1038
|
}
|
|
736
1039
|
return a;
|
|
737
1040
|
};
|
|
738
|
-
var __spreadProps$
|
|
1041
|
+
var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
|
|
739
1042
|
function useAnnotation(options = {}, deps = []) {
|
|
740
1043
|
const { id, selector } = options;
|
|
741
1044
|
const ctx = useResourceContext();
|
|
@@ -747,7 +1050,7 @@ function useAnnotation(options = {}, deps = []) {
|
|
|
747
1050
|
if (!annotation) {
|
|
748
1051
|
return void 0;
|
|
749
1052
|
}
|
|
750
|
-
const newAnnotation = __spreadProps$
|
|
1053
|
+
const newAnnotation = __spreadProps$4(__spreadValues$6({}, annotation), {
|
|
751
1054
|
body,
|
|
752
1055
|
target: expandTarget(annotation.target, { typeMap: vault.getState().iiif.mapping })
|
|
753
1056
|
});
|
|
@@ -774,19 +1077,19 @@ function useCanvas(options = {}, deps = []) {
|
|
|
774
1077
|
}, [canvas, selector, ...deps]);
|
|
775
1078
|
}
|
|
776
1079
|
|
|
777
|
-
var __defProp$
|
|
778
|
-
var __getOwnPropSymbols$
|
|
779
|
-
var __hasOwnProp$
|
|
780
|
-
var __propIsEnum$
|
|
781
|
-
var __defNormalProp$
|
|
782
|
-
var __spreadValues$
|
|
1080
|
+
var __defProp$5 = Object.defineProperty;
|
|
1081
|
+
var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
|
|
1082
|
+
var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
|
|
1083
|
+
var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
|
|
1084
|
+
var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1085
|
+
var __spreadValues$5 = (a, b) => {
|
|
783
1086
|
for (var prop in b || (b = {}))
|
|
784
|
-
if (__hasOwnProp$
|
|
785
|
-
__defNormalProp$
|
|
786
|
-
if (__getOwnPropSymbols$
|
|
787
|
-
for (var prop of __getOwnPropSymbols$
|
|
788
|
-
if (__propIsEnum$
|
|
789
|
-
__defNormalProp$
|
|
1087
|
+
if (__hasOwnProp$5.call(b, prop))
|
|
1088
|
+
__defNormalProp$5(a, prop, b[prop]);
|
|
1089
|
+
if (__getOwnPropSymbols$5)
|
|
1090
|
+
for (var prop of __getOwnPropSymbols$5(b)) {
|
|
1091
|
+
if (__propIsEnum$5.call(b, prop))
|
|
1092
|
+
__defNormalProp$5(a, prop, b[prop]);
|
|
790
1093
|
}
|
|
791
1094
|
return a;
|
|
792
1095
|
};
|
|
@@ -808,7 +1111,7 @@ const RenderAnnotation = ({
|
|
|
808
1111
|
if (!isValid) {
|
|
809
1112
|
return null;
|
|
810
1113
|
}
|
|
811
|
-
return /* @__PURE__ */ React.createElement(RegionHighlight, __spreadValues$
|
|
1114
|
+
return /* @__PURE__ */ React$1.createElement(RegionHighlight, __spreadValues$5({
|
|
812
1115
|
id: annotation.id,
|
|
813
1116
|
isEditing: true,
|
|
814
1117
|
region: annotation.target.selector.spatial,
|
|
@@ -829,8 +1132,8 @@ const RenderAnnotationPage = ({
|
|
|
829
1132
|
const style = useStyles(page, "atlas");
|
|
830
1133
|
const html = useStyles(page, "html");
|
|
831
1134
|
useVaultSelector((state) => page.id ? state.iiif.entities.AnnotationPage[page.id] : null, []);
|
|
832
|
-
return /* @__PURE__ */ React.createElement(Fragment, null, (_a = page.items) == null ? void 0 : _a.map((annotation) => {
|
|
833
|
-
return /* @__PURE__ */ React.createElement(RenderAnnotation, {
|
|
1135
|
+
return /* @__PURE__ */ React$1.createElement(Fragment, null, (_a = page.items) == null ? void 0 : _a.map((annotation) => {
|
|
1136
|
+
return /* @__PURE__ */ React$1.createElement(RenderAnnotation, {
|
|
834
1137
|
key: annotation.id,
|
|
835
1138
|
id: annotation.id,
|
|
836
1139
|
style,
|
|
@@ -847,23 +1150,24 @@ function RenderImage({
|
|
|
847
1150
|
isStatic,
|
|
848
1151
|
x = 0,
|
|
849
1152
|
y = 0,
|
|
850
|
-
annotations
|
|
1153
|
+
annotations,
|
|
1154
|
+
children
|
|
851
1155
|
}) {
|
|
852
1156
|
var _a, _b, _c, _d;
|
|
853
|
-
return /* @__PURE__ */ React.createElement(Fragment, {
|
|
1157
|
+
return /* @__PURE__ */ React$1.createElement(Fragment, {
|
|
854
1158
|
key: id
|
|
855
|
-
}, !image.service ? /* @__PURE__ */ React.createElement(Fragment, {
|
|
1159
|
+
}, !image.service ? /* @__PURE__ */ React$1.createElement(Fragment, {
|
|
856
1160
|
key: "no-service"
|
|
857
|
-
}, /* @__PURE__ */ React.createElement("world-image", {
|
|
1161
|
+
}, /* @__PURE__ */ React$1.createElement("world-image", {
|
|
858
1162
|
uri: image.id,
|
|
859
1163
|
target: image.target.spatial,
|
|
860
1164
|
display: image.width && image.height ? {
|
|
861
1165
|
width: image.width,
|
|
862
1166
|
height: image.height
|
|
863
1167
|
} : void 0
|
|
864
|
-
}), annotations) : /* @__PURE__ */ React.createElement(Fragment, {
|
|
1168
|
+
}), annotations, children) : /* @__PURE__ */ React$1.createElement(Fragment, {
|
|
865
1169
|
key: "service"
|
|
866
|
-
}, /* @__PURE__ */ React.createElement(TileSet, {
|
|
1170
|
+
}, /* @__PURE__ */ React$1.createElement(TileSet, {
|
|
867
1171
|
viewport: isStatic,
|
|
868
1172
|
tiles: {
|
|
869
1173
|
id: image.service.id || image.service["@id"],
|
|
@@ -876,7 +1180,7 @@ function RenderImage({
|
|
|
876
1180
|
y: ((_b = image.target) == null ? void 0 : _b.spatial.y) + y,
|
|
877
1181
|
width: (_c = image.target) == null ? void 0 : _c.spatial.width,
|
|
878
1182
|
height: (_d = image.target) == null ? void 0 : _d.spatial.height
|
|
879
|
-
}), annotations));
|
|
1183
|
+
}), annotations, children));
|
|
880
1184
|
}
|
|
881
1185
|
|
|
882
1186
|
function parseSpecificResource(resource) {
|
|
@@ -1016,25 +1320,25 @@ function flattenAnnotationPageIds({
|
|
|
1016
1320
|
return foundIds;
|
|
1017
1321
|
}
|
|
1018
1322
|
|
|
1019
|
-
var __defProp$
|
|
1020
|
-
var __defProps$
|
|
1021
|
-
var __getOwnPropDescs$
|
|
1022
|
-
var __getOwnPropSymbols$
|
|
1023
|
-
var __hasOwnProp$
|
|
1024
|
-
var __propIsEnum$
|
|
1025
|
-
var __defNormalProp$
|
|
1026
|
-
var __spreadValues$
|
|
1323
|
+
var __defProp$4 = Object.defineProperty;
|
|
1324
|
+
var __defProps$3 = Object.defineProperties;
|
|
1325
|
+
var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
|
|
1326
|
+
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
1327
|
+
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
1328
|
+
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
1329
|
+
var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1330
|
+
var __spreadValues$4 = (a, b) => {
|
|
1027
1331
|
for (var prop in b || (b = {}))
|
|
1028
|
-
if (__hasOwnProp$
|
|
1029
|
-
__defNormalProp$
|
|
1030
|
-
if (__getOwnPropSymbols$
|
|
1031
|
-
for (var prop of __getOwnPropSymbols$
|
|
1032
|
-
if (__propIsEnum$
|
|
1033
|
-
__defNormalProp$
|
|
1332
|
+
if (__hasOwnProp$4.call(b, prop))
|
|
1333
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
1334
|
+
if (__getOwnPropSymbols$4)
|
|
1335
|
+
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
1336
|
+
if (__propIsEnum$4.call(b, prop))
|
|
1337
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
1034
1338
|
}
|
|
1035
1339
|
return a;
|
|
1036
1340
|
};
|
|
1037
|
-
var __spreadProps$
|
|
1341
|
+
var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
|
|
1038
1342
|
function getMeta(state, resourceId) {
|
|
1039
1343
|
var _a;
|
|
1040
1344
|
const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
|
|
@@ -1065,7 +1369,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
|
|
|
1065
1369
|
if (existingResources && !existingResources[resourceId]) {
|
|
1066
1370
|
return existingResources;
|
|
1067
1371
|
}
|
|
1068
|
-
return __spreadProps$
|
|
1372
|
+
return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
|
|
1069
1373
|
[resourceId]: false
|
|
1070
1374
|
});
|
|
1071
1375
|
});
|
|
@@ -1092,7 +1396,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
|
|
|
1092
1396
|
if (existingResources && existingResources[resourceId]) {
|
|
1093
1397
|
return existingResources;
|
|
1094
1398
|
}
|
|
1095
|
-
return __spreadProps$
|
|
1399
|
+
return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
|
|
1096
1400
|
[resourceId]: true
|
|
1097
1401
|
});
|
|
1098
1402
|
});
|
|
@@ -1109,30 +1413,30 @@ function useResources(ids, type) {
|
|
|
1109
1413
|
return useVaultSelector((state, vault) => vault.get(ids.map((id) => ({ id, type }))), [ids, type]);
|
|
1110
1414
|
}
|
|
1111
1415
|
|
|
1112
|
-
const ImageServiceLoaderContext = React.createContext(new ImageServiceLoader());
|
|
1416
|
+
const ImageServiceLoaderContext = React$1.createContext(new ImageServiceLoader());
|
|
1113
1417
|
function useImageServiceLoader() {
|
|
1114
1418
|
return useContext(ImageServiceLoaderContext);
|
|
1115
1419
|
}
|
|
1116
1420
|
|
|
1117
|
-
var __defProp$
|
|
1118
|
-
var __defProps$
|
|
1119
|
-
var __getOwnPropDescs$
|
|
1120
|
-
var __getOwnPropSymbols$
|
|
1121
|
-
var __hasOwnProp$
|
|
1122
|
-
var __propIsEnum$
|
|
1123
|
-
var __defNormalProp$
|
|
1124
|
-
var __spreadValues$
|
|
1421
|
+
var __defProp$3 = Object.defineProperty;
|
|
1422
|
+
var __defProps$2 = Object.defineProperties;
|
|
1423
|
+
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
1424
|
+
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
1425
|
+
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
1426
|
+
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
1427
|
+
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1428
|
+
var __spreadValues$3 = (a, b) => {
|
|
1125
1429
|
for (var prop in b || (b = {}))
|
|
1126
|
-
if (__hasOwnProp$
|
|
1127
|
-
__defNormalProp$
|
|
1128
|
-
if (__getOwnPropSymbols$
|
|
1129
|
-
for (var prop of __getOwnPropSymbols$
|
|
1130
|
-
if (__propIsEnum$
|
|
1131
|
-
__defNormalProp$
|
|
1430
|
+
if (__hasOwnProp$3.call(b, prop))
|
|
1431
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
1432
|
+
if (__getOwnPropSymbols$3)
|
|
1433
|
+
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
1434
|
+
if (__propIsEnum$3.call(b, prop))
|
|
1435
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
1132
1436
|
}
|
|
1133
1437
|
return a;
|
|
1134
1438
|
};
|
|
1135
|
-
var __spreadProps$
|
|
1439
|
+
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
1136
1440
|
function useLoadImageService() {
|
|
1137
1441
|
const loader = useImageServiceLoader();
|
|
1138
1442
|
const [imageServiceStatus, setImageServiceStatus] = useState({});
|
|
@@ -1148,14 +1452,15 @@ function useLoadImageService() {
|
|
|
1148
1452
|
const syncLoaded = loader.loadServiceSync({
|
|
1149
1453
|
id: imageServiceId,
|
|
1150
1454
|
width: imageService.width || width,
|
|
1151
|
-
height: imageService.height || height
|
|
1455
|
+
height: imageService.height || height,
|
|
1456
|
+
source: imageService
|
|
1152
1457
|
});
|
|
1153
1458
|
if (syncLoaded) {
|
|
1154
1459
|
imageService = syncLoaded;
|
|
1155
1460
|
} else if (!imageServiceStatus[imageServiceId]) {
|
|
1156
1461
|
if (!didUnmount.current) {
|
|
1157
1462
|
setImageServiceStatus((r) => {
|
|
1158
|
-
return __spreadProps$
|
|
1463
|
+
return __spreadProps$2(__spreadValues$3({}, r), {
|
|
1159
1464
|
[imageServiceId]: "loading"
|
|
1160
1465
|
});
|
|
1161
1466
|
});
|
|
@@ -1167,7 +1472,7 @@ function useLoadImageService() {
|
|
|
1167
1472
|
}).then(() => {
|
|
1168
1473
|
if (!didUnmount.current) {
|
|
1169
1474
|
setImageServiceStatus((r) => {
|
|
1170
|
-
return __spreadProps$
|
|
1475
|
+
return __spreadProps$2(__spreadValues$3({}, r), {
|
|
1171
1476
|
[imageServiceId]: "done"
|
|
1172
1477
|
});
|
|
1173
1478
|
});
|
|
@@ -1316,37 +1621,126 @@ function getImageStrategy(canvas, paintables, loadImageService) {
|
|
|
1316
1621
|
const supportedFormats = ["model/gltf-binary"];
|
|
1317
1622
|
function get3dStrategy(canvas, paintables) {
|
|
1318
1623
|
const first = paintables.items[0];
|
|
1319
|
-
|
|
1624
|
+
const resource = first.resource;
|
|
1625
|
+
if (!resource.format) {
|
|
1320
1626
|
return unsupportedStrategy("Unknown format");
|
|
1321
1627
|
}
|
|
1322
|
-
if (supportedFormats.indexOf(
|
|
1323
|
-
return unsupportedStrategy(`3D format: ${
|
|
1628
|
+
if (supportedFormats.indexOf(resource.format) === -1) {
|
|
1629
|
+
return unsupportedStrategy(`3D format: ${resource.format} is unsupported`);
|
|
1324
1630
|
}
|
|
1325
1631
|
return {
|
|
1326
1632
|
type: "3d-model",
|
|
1327
|
-
model:
|
|
1633
|
+
model: resource
|
|
1328
1634
|
};
|
|
1329
1635
|
}
|
|
1330
1636
|
|
|
1331
|
-
|
|
1332
|
-
var
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1637
|
+
function getAudioStrategy(canvas, paintables) {
|
|
1638
|
+
var _a;
|
|
1639
|
+
if (!canvas.duration) {
|
|
1640
|
+
return unsupportedStrategy("No duration on canvas");
|
|
1641
|
+
}
|
|
1642
|
+
if (paintables.items.length > 1) {
|
|
1643
|
+
return unsupportedStrategy("Only one audio source supported");
|
|
1644
|
+
}
|
|
1645
|
+
const audioResource = (_a = paintables.items[0]) == null ? void 0 : _a.resource;
|
|
1646
|
+
if (!audioResource) {
|
|
1647
|
+
return unsupportedStrategy("Unknown audio");
|
|
1648
|
+
}
|
|
1649
|
+
if (!audioResource.format) {
|
|
1650
|
+
return unsupportedStrategy("Audio does not have format");
|
|
1651
|
+
}
|
|
1652
|
+
return {
|
|
1653
|
+
type: "media",
|
|
1654
|
+
media: {
|
|
1655
|
+
duration: canvas.duration,
|
|
1656
|
+
url: audioResource.id,
|
|
1657
|
+
type: "Sound",
|
|
1658
|
+
target: {
|
|
1659
|
+
type: "TemporalSelector",
|
|
1660
|
+
temporal: {
|
|
1661
|
+
startTime: 0,
|
|
1662
|
+
endTime: canvas.duration
|
|
1663
|
+
}
|
|
1664
|
+
},
|
|
1665
|
+
format: audioResource.format,
|
|
1666
|
+
selector: {
|
|
1667
|
+
type: "TemporalSelector",
|
|
1668
|
+
temporal: {
|
|
1669
|
+
startTime: 0,
|
|
1670
|
+
endTime: canvas.duration
|
|
1671
|
+
}
|
|
1672
|
+
}
|
|
1673
|
+
},
|
|
1674
|
+
annotations: {
|
|
1675
|
+
pages: []
|
|
1676
|
+
}
|
|
1677
|
+
};
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
function getVideoStrategy(canvas, paintables) {
|
|
1681
|
+
var _a;
|
|
1682
|
+
const videoPaintables = paintables.items.filter((t) => t.type === "video");
|
|
1683
|
+
if (!canvas.duration) {
|
|
1684
|
+
return unsupportedStrategy("No duration on canvas");
|
|
1685
|
+
}
|
|
1686
|
+
if (videoPaintables.length > 1) {
|
|
1687
|
+
return unsupportedStrategy("Only one video source supported");
|
|
1688
|
+
}
|
|
1689
|
+
const audioResource = (_a = videoPaintables[0]) == null ? void 0 : _a.resource;
|
|
1690
|
+
if (!audioResource) {
|
|
1691
|
+
return unsupportedStrategy("Unknown video");
|
|
1692
|
+
}
|
|
1693
|
+
if (!audioResource.format) {
|
|
1694
|
+
return unsupportedStrategy("Video does not have format");
|
|
1695
|
+
}
|
|
1696
|
+
return {
|
|
1697
|
+
type: "media",
|
|
1698
|
+
media: {
|
|
1699
|
+
duration: canvas.duration,
|
|
1700
|
+
url: audioResource.id,
|
|
1701
|
+
type: "Video",
|
|
1702
|
+
items: [],
|
|
1703
|
+
target: {
|
|
1704
|
+
type: "TemporalSelector",
|
|
1705
|
+
temporal: {
|
|
1706
|
+
startTime: 0,
|
|
1707
|
+
endTime: canvas.duration
|
|
1708
|
+
}
|
|
1709
|
+
},
|
|
1710
|
+
format: audioResource.format,
|
|
1711
|
+
selector: {
|
|
1712
|
+
type: "TemporalSelector",
|
|
1713
|
+
temporal: {
|
|
1714
|
+
startTime: 0,
|
|
1715
|
+
endTime: canvas.duration
|
|
1716
|
+
}
|
|
1717
|
+
}
|
|
1718
|
+
},
|
|
1719
|
+
annotations: {
|
|
1720
|
+
pages: []
|
|
1721
|
+
}
|
|
1722
|
+
};
|
|
1723
|
+
}
|
|
1724
|
+
|
|
1725
|
+
var __defProp$2 = Object.defineProperty;
|
|
1726
|
+
var __defProps$1 = Object.defineProperties;
|
|
1727
|
+
var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
|
|
1728
|
+
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
1729
|
+
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
1730
|
+
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
1731
|
+
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1732
|
+
var __spreadValues$2 = (a, b) => {
|
|
1339
1733
|
for (var prop in b || (b = {}))
|
|
1340
|
-
if (__hasOwnProp$
|
|
1341
|
-
__defNormalProp$
|
|
1342
|
-
if (__getOwnPropSymbols$
|
|
1343
|
-
for (var prop of __getOwnPropSymbols$
|
|
1344
|
-
if (__propIsEnum$
|
|
1345
|
-
__defNormalProp$
|
|
1734
|
+
if (__hasOwnProp$2.call(b, prop))
|
|
1735
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
1736
|
+
if (__getOwnPropSymbols$2)
|
|
1737
|
+
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
1738
|
+
if (__propIsEnum$2.call(b, prop))
|
|
1739
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
1346
1740
|
}
|
|
1347
1741
|
return a;
|
|
1348
1742
|
};
|
|
1349
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
1743
|
+
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
|
|
1350
1744
|
function useRenderingStrategy(options) {
|
|
1351
1745
|
const manifest = useManifest();
|
|
1352
1746
|
const canvas = useCanvas();
|
|
@@ -1363,10 +1757,14 @@ function useRenderingStrategy(options) {
|
|
|
1363
1757
|
return unknownResponse;
|
|
1364
1758
|
}
|
|
1365
1759
|
if (paintables.types.length !== 1) {
|
|
1366
|
-
if (
|
|
1367
|
-
|
|
1760
|
+
if (paintables.types.length === 2 && paintables.types.indexOf("text") !== -1) {
|
|
1761
|
+
paintables.types = paintables.types.filter((t) => t !== "text");
|
|
1762
|
+
} else {
|
|
1763
|
+
if (supports.indexOf("complex-timeline") === -1) {
|
|
1764
|
+
return unsupportedStrategy("Complex timeline not supported");
|
|
1765
|
+
}
|
|
1766
|
+
return unsupportedStrategy("ComplexTimelineStrategy not yet supported");
|
|
1368
1767
|
}
|
|
1369
|
-
return unsupportedStrategy("ComplexTimelineStrategy not yet supported");
|
|
1370
1768
|
}
|
|
1371
1769
|
const mainType = paintables.types[0];
|
|
1372
1770
|
if (mainType === "image") {
|
|
@@ -1375,23 +1773,23 @@ function useRenderingStrategy(options) {
|
|
|
1375
1773
|
}
|
|
1376
1774
|
return getImageStrategy(canvas, paintables, loadImageService);
|
|
1377
1775
|
}
|
|
1378
|
-
if (mainType === "Model") {
|
|
1776
|
+
if (mainType === "Model" || mainType === "model") {
|
|
1379
1777
|
if (supports.indexOf("3d-model") === -1) {
|
|
1380
1778
|
return unsupportedStrategy("3D not supported");
|
|
1381
1779
|
}
|
|
1382
1780
|
return get3dStrategy(canvas, paintables);
|
|
1383
1781
|
}
|
|
1384
|
-
if (mainType === "audio") {
|
|
1782
|
+
if (mainType === "sound" || mainType === "audio") {
|
|
1385
1783
|
if (supports.indexOf("media") === -1) {
|
|
1386
1784
|
return unsupportedStrategy("Media not supported");
|
|
1387
1785
|
}
|
|
1388
|
-
return
|
|
1786
|
+
return getAudioStrategy(canvas, paintables);
|
|
1389
1787
|
}
|
|
1390
1788
|
if (mainType === "video") {
|
|
1391
1789
|
if (supports.indexOf("media") === -1) {
|
|
1392
1790
|
return unsupportedStrategy("Media not supported");
|
|
1393
1791
|
}
|
|
1394
|
-
return
|
|
1792
|
+
return getVideoStrategy(canvas, paintables);
|
|
1395
1793
|
}
|
|
1396
1794
|
return unknownResponse;
|
|
1397
1795
|
}, [canvas, paintables, vault, actions.makeChoice]);
|
|
@@ -1400,7 +1798,7 @@ function useRenderingStrategy(options) {
|
|
|
1400
1798
|
return [strategy, emptyActions];
|
|
1401
1799
|
}
|
|
1402
1800
|
return [
|
|
1403
|
-
__spreadProps(__spreadValues$
|
|
1801
|
+
__spreadProps$1(__spreadValues$2({}, strategy), {
|
|
1404
1802
|
annotations: { pages: enabledPages }
|
|
1405
1803
|
}),
|
|
1406
1804
|
actions
|
|
@@ -1442,6 +1840,283 @@ function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
|
|
|
1442
1840
|
return thumbnail;
|
|
1443
1841
|
}
|
|
1444
1842
|
|
|
1843
|
+
var __defProp$1 = Object.defineProperty;
|
|
1844
|
+
var __defProps = Object.defineProperties;
|
|
1845
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
1846
|
+
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
|
|
1847
|
+
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
|
|
1848
|
+
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
|
|
1849
|
+
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1850
|
+
var __spreadValues$1 = (a, b) => {
|
|
1851
|
+
for (var prop in b || (b = {}))
|
|
1852
|
+
if (__hasOwnProp$1.call(b, prop))
|
|
1853
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
1854
|
+
if (__getOwnPropSymbols$1)
|
|
1855
|
+
for (var prop of __getOwnPropSymbols$1(b)) {
|
|
1856
|
+
if (__propIsEnum$1.call(b, prop))
|
|
1857
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
1858
|
+
}
|
|
1859
|
+
return a;
|
|
1860
|
+
};
|
|
1861
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
1862
|
+
function getDefaultState(duration) {
|
|
1863
|
+
return { isMuted: false, playRequested: false, isPlaying: false, isFinished: false, volume: 100, duration };
|
|
1864
|
+
}
|
|
1865
|
+
function reducer(state, action) {
|
|
1866
|
+
switch (action.type) {
|
|
1867
|
+
case "FINISHED":
|
|
1868
|
+
return __spreadProps(__spreadValues$1({}, state), { isFinished: true, isPlaying: false, playRequested: false });
|
|
1869
|
+
case "PLAY_PAUSE":
|
|
1870
|
+
return __spreadProps(__spreadValues$1({}, state), { isFinished: false, isPlaying: !state.isPlaying });
|
|
1871
|
+
case "PLAY_REQUESTED":
|
|
1872
|
+
return __spreadProps(__spreadValues$1({}, state), { isFinished: false, playRequested: true });
|
|
1873
|
+
case "PAUSE":
|
|
1874
|
+
return __spreadProps(__spreadValues$1({}, state), { isPlaying: false });
|
|
1875
|
+
case "PLAY":
|
|
1876
|
+
return __spreadProps(__spreadValues$1({}, state), { isFinished: false, playRequested: false, isPlaying: true });
|
|
1877
|
+
case "MUTE":
|
|
1878
|
+
return __spreadProps(__spreadValues$1({}, state), { isMuted: true });
|
|
1879
|
+
case "SET_VOLUME":
|
|
1880
|
+
return __spreadProps(__spreadValues$1({}, state), { volume: action.volume, isMuted: action.volume === 0 });
|
|
1881
|
+
case "TOGGLE_MUTE":
|
|
1882
|
+
return __spreadProps(__spreadValues$1({}, state), { isMuted: !state.isMuted });
|
|
1883
|
+
case "UNMUTE":
|
|
1884
|
+
return __spreadProps(__spreadValues$1({}, state), { isMuted: false });
|
|
1885
|
+
}
|
|
1886
|
+
return state;
|
|
1887
|
+
}
|
|
1888
|
+
function formatTime(time) {
|
|
1889
|
+
const seconds = Math.round(time);
|
|
1890
|
+
return `${Math.floor(seconds / 60)}:${`${seconds % 60}`.padStart(2, "0")}`;
|
|
1891
|
+
}
|
|
1892
|
+
function useSimpleMediaPlayer(props) {
|
|
1893
|
+
const [state, dispatch] = useReducer(reducer, getDefaultState(props.duration));
|
|
1894
|
+
const media = useRef(null);
|
|
1895
|
+
const currentTime = useRef(null);
|
|
1896
|
+
const progress = useRef(null);
|
|
1897
|
+
const _isMuted = useRef(false);
|
|
1898
|
+
const _updateCurrentTime = useCallback(() => {
|
|
1899
|
+
if (currentTime.current && media.current) {
|
|
1900
|
+
currentTime.current.innerHTML = formatTime(media.current.currentTime);
|
|
1901
|
+
if (progress.current) {
|
|
1902
|
+
progress.current.style.width = `${media.current.currentTime / props.duration * 100}%`;
|
|
1903
|
+
}
|
|
1904
|
+
if (_isMuted.current !== media.current.muted) {
|
|
1905
|
+
_isMuted.current = media.current.muted;
|
|
1906
|
+
dispatch(media.current.muted ? { type: "MUTE" } : { type: "UNMUTE" });
|
|
1907
|
+
}
|
|
1908
|
+
}
|
|
1909
|
+
}, [props.duration]);
|
|
1910
|
+
const play = useCallback(() => {
|
|
1911
|
+
if (media.current) {
|
|
1912
|
+
dispatch({ type: "PLAY_REQUESTED" });
|
|
1913
|
+
media.current.play().then(() => {
|
|
1914
|
+
dispatch({ type: "PLAY" });
|
|
1915
|
+
});
|
|
1916
|
+
_updateCurrentTime();
|
|
1917
|
+
}
|
|
1918
|
+
}, [_updateCurrentTime]);
|
|
1919
|
+
const playPause = useCallback(() => {
|
|
1920
|
+
if (media.current) {
|
|
1921
|
+
if (media.current.duration > 0 && media.current.paused) {
|
|
1922
|
+
play();
|
|
1923
|
+
} else {
|
|
1924
|
+
pause();
|
|
1925
|
+
}
|
|
1926
|
+
}
|
|
1927
|
+
}, [_updateCurrentTime]);
|
|
1928
|
+
const pause = useCallback(() => {
|
|
1929
|
+
if (media.current) {
|
|
1930
|
+
media.current.pause();
|
|
1931
|
+
dispatch({ type: "PAUSE" });
|
|
1932
|
+
_updateCurrentTime();
|
|
1933
|
+
}
|
|
1934
|
+
}, [_updateCurrentTime]);
|
|
1935
|
+
const toggleMute = useCallback(() => {
|
|
1936
|
+
if (media.current) {
|
|
1937
|
+
media.current.muted = !media.current.muted;
|
|
1938
|
+
dispatch(media.current.muted ? { type: "MUTE" } : { type: "UNMUTE" });
|
|
1939
|
+
}
|
|
1940
|
+
}, []);
|
|
1941
|
+
const mute = useCallback(() => {
|
|
1942
|
+
if (media.current) {
|
|
1943
|
+
media.current.muted = true;
|
|
1944
|
+
dispatch({ type: "MUTE" });
|
|
1945
|
+
}
|
|
1946
|
+
}, []);
|
|
1947
|
+
const unmute = useCallback(() => {
|
|
1948
|
+
if (media.current) {
|
|
1949
|
+
media.current.muted = false;
|
|
1950
|
+
dispatch({ type: "UNMUTE" });
|
|
1951
|
+
}
|
|
1952
|
+
}, []);
|
|
1953
|
+
const setVolume = useCallback((newVolume) => {
|
|
1954
|
+
if (media.current) {
|
|
1955
|
+
media.current.muted = false;
|
|
1956
|
+
media.current.volume = newVolume / 100;
|
|
1957
|
+
dispatch({ type: "SET_VOLUME", volume: newVolume });
|
|
1958
|
+
}
|
|
1959
|
+
}, []);
|
|
1960
|
+
const setDurationPercent = useCallback((percent) => {
|
|
1961
|
+
if (media.current) {
|
|
1962
|
+
media.current.currentTime = Math.max(0, Math.min(percent * props.duration, props.duration));
|
|
1963
|
+
_updateCurrentTime();
|
|
1964
|
+
}
|
|
1965
|
+
}, []);
|
|
1966
|
+
const setTime = useCallback((time) => {
|
|
1967
|
+
if (media.current) {
|
|
1968
|
+
media.current.currentTime = Math.max(0, Math.min(time, props.duration));
|
|
1969
|
+
_updateCurrentTime();
|
|
1970
|
+
}
|
|
1971
|
+
}, []);
|
|
1972
|
+
useEffect(() => {
|
|
1973
|
+
const interval = setInterval(() => {
|
|
1974
|
+
_updateCurrentTime();
|
|
1975
|
+
}, 350);
|
|
1976
|
+
return () => clearInterval(interval);
|
|
1977
|
+
}, [_updateCurrentTime, props.duration]);
|
|
1978
|
+
useEffect(() => {
|
|
1979
|
+
const ended = () => {
|
|
1980
|
+
dispatch({ type: "FINISHED" });
|
|
1981
|
+
};
|
|
1982
|
+
const _media = media.current;
|
|
1983
|
+
_media == null ? void 0 : _media.addEventListener("ended", ended);
|
|
1984
|
+
return () => _media == null ? void 0 : _media.removeEventListener("ended", ended);
|
|
1985
|
+
}, []);
|
|
1986
|
+
return [
|
|
1987
|
+
{ element: media, currentTime, progress },
|
|
1988
|
+
state,
|
|
1989
|
+
{
|
|
1990
|
+
play,
|
|
1991
|
+
pause,
|
|
1992
|
+
playPause,
|
|
1993
|
+
mute,
|
|
1994
|
+
unmute,
|
|
1995
|
+
toggleMute,
|
|
1996
|
+
setVolume,
|
|
1997
|
+
setDurationPercent,
|
|
1998
|
+
setTime
|
|
1999
|
+
}
|
|
2000
|
+
];
|
|
2001
|
+
}
|
|
2002
|
+
|
|
2003
|
+
const MediaReactContextState = createContext(null);
|
|
2004
|
+
const MediaReactContextActions = createContext(null);
|
|
2005
|
+
const MediaReactContextElements = createContext(null);
|
|
2006
|
+
function useMediaState() {
|
|
2007
|
+
const ctx = useContext(MediaReactContextState);
|
|
2008
|
+
if (!ctx) {
|
|
2009
|
+
throw new Error("Ctx not found");
|
|
2010
|
+
}
|
|
2011
|
+
return ctx;
|
|
2012
|
+
}
|
|
2013
|
+
function useMediaActions() {
|
|
2014
|
+
const ctx = useContext(MediaReactContextActions);
|
|
2015
|
+
if (!ctx) {
|
|
2016
|
+
throw new Error("Ctx not found");
|
|
2017
|
+
}
|
|
2018
|
+
return ctx;
|
|
2019
|
+
}
|
|
2020
|
+
function useMediaElements() {
|
|
2021
|
+
const ctx = useContext(MediaReactContextElements);
|
|
2022
|
+
if (!ctx) {
|
|
2023
|
+
throw new Error("Ctx not found");
|
|
2024
|
+
}
|
|
2025
|
+
return ctx;
|
|
2026
|
+
}
|
|
2027
|
+
function MediaPlayerProvider({
|
|
2028
|
+
actions,
|
|
2029
|
+
state,
|
|
2030
|
+
children,
|
|
2031
|
+
currentTime,
|
|
2032
|
+
progress,
|
|
2033
|
+
element
|
|
2034
|
+
}) {
|
|
2035
|
+
return /* @__PURE__ */ React.createElement(MediaReactContextElements.Provider, {
|
|
2036
|
+
value: { currentTime, progress, element }
|
|
2037
|
+
}, /* @__PURE__ */ React.createElement(MediaReactContextActions.Provider, {
|
|
2038
|
+
value: actions
|
|
2039
|
+
}, /* @__PURE__ */ React.createElement(MediaReactContextState.Provider, {
|
|
2040
|
+
value: state
|
|
2041
|
+
}, children)));
|
|
2042
|
+
}
|
|
2043
|
+
|
|
2044
|
+
function Audio({ media, children }) {
|
|
2045
|
+
const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration: media.duration });
|
|
2046
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CanvasPortal, null, /* @__PURE__ */ React.createElement(MediaPlayerProvider, {
|
|
2047
|
+
state,
|
|
2048
|
+
actions,
|
|
2049
|
+
currentTime,
|
|
2050
|
+
progress,
|
|
2051
|
+
element
|
|
2052
|
+
}, /* @__PURE__ */ React.createElement("audio", {
|
|
2053
|
+
ref: element,
|
|
2054
|
+
src: media.url
|
|
2055
|
+
}), children)));
|
|
2056
|
+
}
|
|
2057
|
+
|
|
2058
|
+
function Video({ media, children }) {
|
|
2059
|
+
const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration: media.duration });
|
|
2060
|
+
const Component = "div";
|
|
2061
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CanvasPortal, {
|
|
2062
|
+
overlay: true
|
|
2063
|
+
}, /* @__PURE__ */ React.createElement("style", null, `
|
|
2064
|
+
.video-container {
|
|
2065
|
+
position: absolute;
|
|
2066
|
+
top: 0;
|
|
2067
|
+
bottom: 0;
|
|
2068
|
+
left: 0;
|
|
2069
|
+
right: 0;
|
|
2070
|
+
background: #000;
|
|
2071
|
+
z-index: 13;
|
|
2072
|
+
display: flex;
|
|
2073
|
+
justify-content: center;
|
|
2074
|
+
pointer-events: visible;
|
|
2075
|
+
}
|
|
2076
|
+
`), /* @__PURE__ */ React.createElement(Component, {
|
|
2077
|
+
className: "video-container",
|
|
2078
|
+
part: "video-container",
|
|
2079
|
+
onClick: () => actions.playPause()
|
|
2080
|
+
}, /* @__PURE__ */ React.createElement("video", {
|
|
2081
|
+
ref: element,
|
|
2082
|
+
src: media.url,
|
|
2083
|
+
style: { width: "100%", objectFit: "contain" }
|
|
2084
|
+
}))), /* @__PURE__ */ React.createElement(CanvasPortal, null, /* @__PURE__ */ React.createElement(MediaPlayerProvider, {
|
|
2085
|
+
state,
|
|
2086
|
+
actions,
|
|
2087
|
+
currentTime,
|
|
2088
|
+
progress,
|
|
2089
|
+
element
|
|
2090
|
+
}, children)));
|
|
2091
|
+
}
|
|
2092
|
+
|
|
2093
|
+
function Model({ model }) {
|
|
2094
|
+
return /* @__PURE__ */ React.createElement(CanvasPortal, {
|
|
2095
|
+
overlay: true
|
|
2096
|
+
}, /* @__PURE__ */ React.createElement("style", null, `
|
|
2097
|
+
.model-container {
|
|
2098
|
+
position: absolute;
|
|
2099
|
+
top: 0;
|
|
2100
|
+
bottom: 0;
|
|
2101
|
+
left: 0;
|
|
2102
|
+
right: 0;
|
|
2103
|
+
background: #000;
|
|
2104
|
+
z-index: 13;
|
|
2105
|
+
display: flex;
|
|
2106
|
+
justify-content: center;
|
|
2107
|
+
pointer-events: visible;
|
|
2108
|
+
}
|
|
2109
|
+
`), /* @__PURE__ */ React.createElement("div", {
|
|
2110
|
+
className: "model-container"
|
|
2111
|
+
}, /* @__PURE__ */ React.createElement("model-viewer", {
|
|
2112
|
+
"interaction-prompt": "none",
|
|
2113
|
+
style: { width: "100%", height: "100%" },
|
|
2114
|
+
"camera-controls": "",
|
|
2115
|
+
"ar-status": "not-presenting",
|
|
2116
|
+
src: model.id
|
|
2117
|
+
})));
|
|
2118
|
+
}
|
|
2119
|
+
|
|
1445
2120
|
var __defProp = Object.defineProperty;
|
|
1446
2121
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
1447
2122
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
@@ -1458,14 +2133,25 @@ var __spreadValues = (a, b) => {
|
|
|
1458
2133
|
}
|
|
1459
2134
|
return a;
|
|
1460
2135
|
};
|
|
1461
|
-
function RenderCanvas({
|
|
2136
|
+
function RenderCanvas({
|
|
2137
|
+
x,
|
|
2138
|
+
y,
|
|
2139
|
+
onChoiceChange,
|
|
2140
|
+
registerActions,
|
|
2141
|
+
defaultChoices,
|
|
2142
|
+
isStatic,
|
|
2143
|
+
renderViewerControls,
|
|
2144
|
+
renderMediaControls,
|
|
2145
|
+
strategies,
|
|
2146
|
+
children
|
|
2147
|
+
}) {
|
|
1462
2148
|
const canvas = useCanvas();
|
|
1463
2149
|
const elementProps = useResourceEvents(canvas, ["deep-zoom"]);
|
|
1464
2150
|
const [virtualPage] = useVirtualAnnotationPageContext();
|
|
1465
2151
|
const vault = useVault();
|
|
1466
2152
|
const helper = useMemo(() => createStylesHelper(vault), [vault]);
|
|
1467
2153
|
const [strategy, actions] = useRenderingStrategy({
|
|
1468
|
-
strategies: ["images"],
|
|
2154
|
+
strategies: strategies || ["images"],
|
|
1469
2155
|
defaultChoices: defaultChoices == null ? void 0 : defaultChoices.map(({ id }) => id)
|
|
1470
2156
|
});
|
|
1471
2157
|
const choice = strategy.type === "images" ? strategy.choice : void 0;
|
|
@@ -1494,40 +2180,42 @@ function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, i
|
|
|
1494
2180
|
if (!canvas) {
|
|
1495
2181
|
return null;
|
|
1496
2182
|
}
|
|
2183
|
+
const accompanyingCanvas = canvas.accompanyingCanvas;
|
|
2184
|
+
const thumbnailFallbackImage = thumbnail && thumbnail.type === "fixed" ? /* @__PURE__ */ React$1.createElement("world-object", {
|
|
2185
|
+
height: canvas.height,
|
|
2186
|
+
width: canvas.width,
|
|
2187
|
+
x,
|
|
2188
|
+
y
|
|
2189
|
+
}, /* @__PURE__ */ React$1.createElement("world-image", {
|
|
2190
|
+
uri: thumbnail.id,
|
|
2191
|
+
target: { x: 0, y: 0, width: canvas.width, height: canvas.height },
|
|
2192
|
+
display: thumbnail.width && thumbnail.height ? {
|
|
2193
|
+
width: thumbnail.width,
|
|
2194
|
+
height: thumbnail.height
|
|
2195
|
+
} : void 0
|
|
2196
|
+
})) : null;
|
|
1497
2197
|
if (strategy.type === "unknown") {
|
|
1498
|
-
if (
|
|
1499
|
-
return
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
x,
|
|
1503
|
-
y
|
|
1504
|
-
}, /* @__PURE__ */ React.createElement("world-image", {
|
|
1505
|
-
uri: thumbnail.id,
|
|
1506
|
-
target: { x: 0, y: 0, width: canvas.width, height: canvas.height },
|
|
1507
|
-
display: thumbnail.width && thumbnail.height ? {
|
|
1508
|
-
width: thumbnail.width,
|
|
1509
|
-
height: thumbnail.height
|
|
1510
|
-
} : void 0
|
|
1511
|
-
}));
|
|
1512
|
-
}
|
|
1513
|
-
throw new Error("Unknown image strategy");
|
|
2198
|
+
if (thumbnailFallbackImage) {
|
|
2199
|
+
return thumbnailFallbackImage;
|
|
2200
|
+
}
|
|
2201
|
+
throw new Error(strategy.reason || "Unknown image strategy");
|
|
1514
2202
|
}
|
|
1515
|
-
const annotations = /* @__PURE__ */ React.createElement(Fragment, null, virtualPage ? /* @__PURE__ */ React.createElement(RenderAnnotationPage, {
|
|
2203
|
+
const annotations = /* @__PURE__ */ React$1.createElement(Fragment, null, virtualPage ? /* @__PURE__ */ React$1.createElement(RenderAnnotationPage, {
|
|
1516
2204
|
page: virtualPage
|
|
1517
2205
|
}) : null, strategy.annotations && strategy.annotations.pages ? strategy.annotations.pages.map((page) => {
|
|
1518
|
-
return /* @__PURE__ */ React.createElement(RenderAnnotationPage, {
|
|
2206
|
+
return /* @__PURE__ */ React$1.createElement(RenderAnnotationPage, {
|
|
1519
2207
|
key: page.id,
|
|
1520
2208
|
page
|
|
1521
2209
|
});
|
|
1522
|
-
}) : null);
|
|
1523
|
-
return /* @__PURE__ */ React.createElement("world-object", __spreadValues({
|
|
2210
|
+
}) : null, children);
|
|
2211
|
+
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("world-object", __spreadValues({
|
|
1524
2212
|
key: strategy.type,
|
|
1525
2213
|
height: canvas.height,
|
|
1526
2214
|
width: canvas.width,
|
|
1527
2215
|
x,
|
|
1528
2216
|
y
|
|
1529
|
-
}, elementProps), strategy.type === "images" ? strategy.images.map((image, idx) => {
|
|
1530
|
-
return /* @__PURE__ */ React.createElement(RenderImage, {
|
|
2217
|
+
}, elementProps), strategy.type === "images" ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, strategy.images.map((image, idx) => {
|
|
2218
|
+
return /* @__PURE__ */ React$1.createElement(RenderImage, {
|
|
1531
2219
|
isStatic,
|
|
1532
2220
|
key: image.id,
|
|
1533
2221
|
image,
|
|
@@ -1535,7 +2223,17 @@ function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, i
|
|
|
1535
2223
|
thumbnail: idx === 0 ? thumbnail : void 0,
|
|
1536
2224
|
annotations
|
|
1537
2225
|
});
|
|
1538
|
-
})
|
|
2226
|
+
}), renderViewerControls ? /* @__PURE__ */ React$1.createElement(CanvasPortal, {
|
|
2227
|
+
overlay: true
|
|
2228
|
+
}, renderViewerControls(strategy)) : null) : null, strategy.type === "3d-model" ? /* @__PURE__ */ React$1.createElement(Model, {
|
|
2229
|
+
model: strategy.model
|
|
2230
|
+
}) : null, strategy.type === "media" ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, strategy.media.type === "Sound" ? /* @__PURE__ */ React$1.createElement(Audio, {
|
|
2231
|
+
media: strategy.media
|
|
2232
|
+
}, thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null) : strategy.media.type === "Video" ? /* @__PURE__ */ React$1.createElement(Video, {
|
|
2233
|
+
media: strategy.media
|
|
2234
|
+
}, thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null) : null) : null), strategy.type === "media" && strategy.media.type === "Sound" && accompanyingCanvas ? /* @__PURE__ */ React$1.createElement(CanvasContext, {
|
|
2235
|
+
canvas: accompanyingCanvas.id
|
|
2236
|
+
}, /* @__PURE__ */ React$1.createElement(RenderCanvas, null)) : null);
|
|
1539
2237
|
}
|
|
1540
2238
|
|
|
1541
2239
|
const CanvasPanel = {
|
|
@@ -1546,23 +2244,23 @@ const CanvasPanel = {
|
|
|
1546
2244
|
Viewer
|
|
1547
2245
|
};
|
|
1548
2246
|
|
|
1549
|
-
|
|
1550
|
-
return /* @__PURE__ */ React.createElement(ResourceProvider, {
|
|
2247
|
+
function AnnotationContext({ annotation, children }) {
|
|
2248
|
+
return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
|
|
1551
2249
|
value: { annotation }
|
|
1552
2250
|
}, children);
|
|
1553
|
-
}
|
|
2251
|
+
}
|
|
1554
2252
|
|
|
1555
|
-
|
|
1556
|
-
return /* @__PURE__ */ React.createElement(ResourceProvider, {
|
|
2253
|
+
function CollectionContext({ collection, children }) {
|
|
2254
|
+
return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
|
|
1557
2255
|
value: { collection }
|
|
1558
2256
|
}, children);
|
|
1559
|
-
}
|
|
2257
|
+
}
|
|
1560
2258
|
|
|
1561
|
-
|
|
1562
|
-
return /* @__PURE__ */ React.createElement(ResourceProvider, {
|
|
2259
|
+
function RangeContext({ range, children }) {
|
|
2260
|
+
return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
|
|
1563
2261
|
value: { range }
|
|
1564
2262
|
}, children);
|
|
1565
|
-
}
|
|
2263
|
+
}
|
|
1566
2264
|
|
|
1567
2265
|
function useAnnotationsAtTime(time, options = {}) {
|
|
1568
2266
|
const allAnnotations = usePaintingAnnotations(options);
|
|
@@ -1749,4 +2447,4 @@ function useStyleHelper() {
|
|
|
1749
2447
|
return useMemo(() => createStylesHelper(vault), [vault]);
|
|
1750
2448
|
}
|
|
1751
2449
|
|
|
1752
|
-
export { AnnotationContext, CanvasContext, CanvasPanel, CollectionContext, ContextBridge, ImageServiceLoaderContext, ManifestContext, RangeContext, ReactVaultContext, ResourceProvider, ResourceReactContext, SimpleViewerProvider, SimpleViewerReactContext, VaultProvider, VirtualAnnotationProvider, VisibleCanvasReactContext, emptyActions, expandTarget, flattenAnnotationPageIds, getImageStrategy, getPaintables, parseSelector, parseSpecificResource, unknownResponse, unsupportedStrategy, useAnnotation, useAnnotationPageManager, useAnnotationsAtTime, useCanvas, useCanvasClock, useCollection, useContextBridge, useDispatch, useEventListener, useExistingVault, useExternalCollection, useExternalManifest, useExternalResource, useImageService, useImageServiceLoader, useImageTile, useLoadImageService, useManifest, usePaintables, usePaintingAnnotations, useRange, useRenderingStrategy, useResourceContext, useResourceEvents, useResources, useSearchService, useSimpleViewer, useStyleHelper, useStyles, useThumbnail, useVault, useVaultEffect, useVaultSelector, useVirtualAnnotationPage, useVirtualAnnotationPageContext, useVisibleCanvases };
|
|
2450
|
+
export { AnnotationContext, CanvasContext, CanvasPanel, CanvasPortal, CollectionContext, ContextBridge, ImageServiceLoaderContext, ManifestContext, MediaPlayerProvider, OverlayPortalContext, PortalContext, RangeContext, ReactVaultContext, ResourceProvider, ResourceReactContext, SimpleViewerProvider, SimpleViewerReactContext, VaultProvider, VirtualAnnotationProvider, VisibleCanvasReactContext, emptyActions, expandTarget, flattenAnnotationPageIds, formatTime, getImageStrategy, getPaintables, parseSelector, parseSpecificResource, unknownResponse, unsupportedStrategy, useAnnotation, useAnnotationPageManager, useAnnotationsAtTime, useCanvas, useCanvasClock, useCollection, useContextBridge, useDispatch, useEventListener, useExistingVault, useExternalCollection, useExternalManifest, useExternalResource, useImageService, useImageServiceLoader, useImageTile, useLoadImageService, useManifest, useMediaActions, useMediaElements, useMediaState, usePaintables, usePaintingAnnotations, useRange, useRenderingStrategy, useResourceContext, useResourceEvents, useResources, useSearchService, useSimpleMediaPlayer, useSimpleViewer, useStyleHelper, useStyles, useThumbnail, useVault, useVaultEffect, useVaultSelector, useVirtualAnnotationPage, useVirtualAnnotationPageContext, useVisibleCanvases };
|