react-iiif-vault 0.9.7 → 0.9.10
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 +1007 -267
- package/dist/esm/index.mjs +945 -215
- package/dist/index.d.ts +108 -29
- package/dist/index.umd.js +27592 -26855
- package/package.json +14 -11
package/dist/esm/index.mjs
CHANGED
|
@@ -1,23 +1,215 @@
|
|
|
1
|
-
import React, { useContext, useMemo, useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, Fragment } from 'react';
|
|
2
|
-
import { globalVault, Vault } from '@iiif/vault';
|
|
1
|
+
import React$1, { useContext, useMemo, useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, Fragment, useReducer } from 'react';
|
|
3
2
|
import { AtlasAuto, mergeStyles, RegionHighlight, TileSet as TileSet$1 } from '@atlas-viewer/atlas';
|
|
3
|
+
import { globalVault, Vault } from '@iiif/vault';
|
|
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,160 @@ 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]);
|
|
477
679
|
}
|
|
478
680
|
return a;
|
|
479
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 rootRef = useRef(null);
|
|
714
|
+
const preset = useViewerPreset();
|
|
715
|
+
useLayoutEffect(() => {
|
|
716
|
+
if (!rootRef.current) {
|
|
717
|
+
rootRef.current = htmlElement ? createRoot(htmlElement) : null;
|
|
718
|
+
}
|
|
719
|
+
}, []);
|
|
720
|
+
useLayoutEffect(() => {
|
|
721
|
+
return () => {
|
|
722
|
+
var _a;
|
|
723
|
+
(_a = rootRef.current) == null ? void 0 : _a.unmount();
|
|
724
|
+
rootRef.current = null;
|
|
725
|
+
};
|
|
726
|
+
}, []);
|
|
727
|
+
useLayoutEffect(() => {
|
|
728
|
+
if (rootRef.current) {
|
|
729
|
+
rootRef.current.render(/* @__PURE__ */ React$1.createElement(ViewerPresetContext.Provider, {
|
|
730
|
+
value: preset
|
|
731
|
+
}, children));
|
|
732
|
+
}
|
|
733
|
+
}, [children, preset]);
|
|
734
|
+
return null;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
var __defProp$8 = Object.defineProperty;
|
|
738
|
+
var __defProps$6 = Object.defineProperties;
|
|
739
|
+
var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
|
|
740
|
+
var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
|
|
741
|
+
var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
|
|
742
|
+
var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
|
|
743
|
+
var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
744
|
+
var __spreadValues$8 = (a, b) => {
|
|
745
|
+
for (var prop in b || (b = {}))
|
|
746
|
+
if (__hasOwnProp$8.call(b, prop))
|
|
747
|
+
__defNormalProp$8(a, prop, b[prop]);
|
|
748
|
+
if (__getOwnPropSymbols$8)
|
|
749
|
+
for (var prop of __getOwnPropSymbols$8(b)) {
|
|
750
|
+
if (__propIsEnum$8.call(b, prop))
|
|
751
|
+
__defNormalProp$8(a, prop, b[prop]);
|
|
752
|
+
}
|
|
753
|
+
return a;
|
|
754
|
+
};
|
|
755
|
+
var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
|
|
480
756
|
var __objRest = (source, exclude) => {
|
|
481
757
|
var target = {};
|
|
482
758
|
for (var prop in source)
|
|
483
|
-
if (__hasOwnProp$
|
|
759
|
+
if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
484
760
|
target[prop] = source[prop];
|
|
485
|
-
if (source != null && __getOwnPropSymbols$
|
|
486
|
-
for (var prop of __getOwnPropSymbols$
|
|
487
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum$
|
|
761
|
+
if (source != null && __getOwnPropSymbols$8)
|
|
762
|
+
for (var prop of __getOwnPropSymbols$8(source)) {
|
|
763
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
|
|
488
764
|
target[prop] = source[prop];
|
|
489
765
|
}
|
|
490
766
|
return target;
|
|
491
767
|
};
|
|
492
768
|
function Viewer(_a) {
|
|
493
769
|
var _b = _a, {
|
|
494
|
-
children
|
|
770
|
+
children,
|
|
771
|
+
errorFallback,
|
|
772
|
+
outerContainerProps = {}
|
|
495
773
|
} = _b, props = __objRest(_b, [
|
|
496
|
-
"children"
|
|
774
|
+
"children",
|
|
775
|
+
"errorFallback",
|
|
776
|
+
"outerContainerProps"
|
|
497
777
|
]);
|
|
778
|
+
const portal = useRef(null);
|
|
779
|
+
const [portalElement, setPortalElement] = useState();
|
|
780
|
+
const [viewerPreset, setViewerPreset] = useState();
|
|
781
|
+
const overlayPortal = useRef(null);
|
|
782
|
+
const [overlayPortalElement, setOverlayPortalElement] = useState();
|
|
498
783
|
const bridge = useContextBridge();
|
|
499
|
-
|
|
784
|
+
const ErrorFallback = errorFallback || DefaultCanvasFallback;
|
|
785
|
+
useLayoutEffect(() => {
|
|
786
|
+
setPortalElement(portal.current);
|
|
787
|
+
setOverlayPortalElement(overlayPortal.current);
|
|
788
|
+
}, []);
|
|
789
|
+
return /* @__PURE__ */ React$1.createElement(reactErrorBoundary_umd.exports.ErrorBoundary, {
|
|
790
|
+
fallbackRender: () => /* @__PURE__ */ React$1.createElement(ErrorFallback, __spreadValues$8({}, props))
|
|
791
|
+
}, /* @__PURE__ */ React$1.createElement(AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
|
|
792
|
+
containerProps: __spreadValues$8({ style: { position: "relative" } }, props.containerProps || {}),
|
|
793
|
+
htmlChildren: /* @__PURE__ */ React$1.createElement("div", {
|
|
794
|
+
ref: overlayPortal
|
|
795
|
+
}),
|
|
796
|
+
onCreated: (preset) => {
|
|
797
|
+
setViewerPreset(preset);
|
|
798
|
+
if (props.onCreated) {
|
|
799
|
+
props.onCreated(preset);
|
|
800
|
+
}
|
|
801
|
+
}
|
|
802
|
+
}), /* @__PURE__ */ React$1.createElement(ViewerPresetContext.Provider, {
|
|
803
|
+
value: viewerPreset
|
|
804
|
+
}, /* @__PURE__ */ React$1.createElement(PortalContext.Provider, {
|
|
805
|
+
value: portalElement
|
|
806
|
+
}, /* @__PURE__ */ React$1.createElement(OverlayPortalContext.Provider, {
|
|
807
|
+
value: overlayPortalElement
|
|
808
|
+
}, /* @__PURE__ */ React$1.createElement(ContextBridge, {
|
|
500
809
|
bridge
|
|
501
|
-
}, /* @__PURE__ */ React.createElement(VirtualAnnotationProvider, null, children)))
|
|
810
|
+
}, /* @__PURE__ */ React$1.createElement(VirtualAnnotationProvider, null, children)))))), /* @__PURE__ */ React$1.createElement("div", {
|
|
811
|
+
ref: portal
|
|
812
|
+
}));
|
|
502
813
|
}
|
|
503
814
|
|
|
504
815
|
function useResourceEvents(resource, scope) {
|
|
@@ -616,25 +927,25 @@ function parseSelector(source) {
|
|
|
616
927
|
};
|
|
617
928
|
}
|
|
618
929
|
|
|
619
|
-
var __defProp$
|
|
620
|
-
var __defProps$
|
|
621
|
-
var __getOwnPropDescs$
|
|
622
|
-
var __getOwnPropSymbols$
|
|
623
|
-
var __hasOwnProp$
|
|
624
|
-
var __propIsEnum$
|
|
625
|
-
var __defNormalProp$
|
|
626
|
-
var __spreadValues$
|
|
930
|
+
var __defProp$7 = Object.defineProperty;
|
|
931
|
+
var __defProps$5 = Object.defineProperties;
|
|
932
|
+
var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
|
|
933
|
+
var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
|
|
934
|
+
var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
|
|
935
|
+
var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
|
|
936
|
+
var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
937
|
+
var __spreadValues$7 = (a, b) => {
|
|
627
938
|
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$
|
|
939
|
+
if (__hasOwnProp$7.call(b, prop))
|
|
940
|
+
__defNormalProp$7(a, prop, b[prop]);
|
|
941
|
+
if (__getOwnPropSymbols$7)
|
|
942
|
+
for (var prop of __getOwnPropSymbols$7(b)) {
|
|
943
|
+
if (__propIsEnum$7.call(b, prop))
|
|
944
|
+
__defNormalProp$7(a, prop, b[prop]);
|
|
634
945
|
}
|
|
635
946
|
return a;
|
|
636
947
|
};
|
|
637
|
-
var __spreadProps$
|
|
948
|
+
var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
|
|
638
949
|
function expandTarget(target, options = {}) {
|
|
639
950
|
if (Array.isArray(target)) {
|
|
640
951
|
return expandTarget(target[0]);
|
|
@@ -691,7 +1002,7 @@ function expandTarget(target, options = {}) {
|
|
|
691
1002
|
if (!fragment) {
|
|
692
1003
|
return {
|
|
693
1004
|
type: "SpecificResource",
|
|
694
|
-
source: __spreadProps$
|
|
1005
|
+
source: __spreadProps$5(__spreadValues$7({}, target), {
|
|
695
1006
|
id
|
|
696
1007
|
}),
|
|
697
1008
|
selector: null,
|
|
@@ -700,7 +1011,7 @@ function expandTarget(target, options = {}) {
|
|
|
700
1011
|
}
|
|
701
1012
|
return expandTarget({
|
|
702
1013
|
type: "SpecificResource",
|
|
703
|
-
source: __spreadProps$
|
|
1014
|
+
source: __spreadProps$5(__spreadValues$7({}, target), {
|
|
704
1015
|
id
|
|
705
1016
|
}),
|
|
706
1017
|
selector: {
|
|
@@ -717,25 +1028,25 @@ function expandTarget(target, options = {}) {
|
|
|
717
1028
|
};
|
|
718
1029
|
}
|
|
719
1030
|
|
|
720
|
-
var __defProp$
|
|
721
|
-
var __defProps$
|
|
722
|
-
var __getOwnPropDescs$
|
|
723
|
-
var __getOwnPropSymbols$
|
|
724
|
-
var __hasOwnProp$
|
|
725
|
-
var __propIsEnum$
|
|
726
|
-
var __defNormalProp$
|
|
727
|
-
var __spreadValues$
|
|
1031
|
+
var __defProp$6 = Object.defineProperty;
|
|
1032
|
+
var __defProps$4 = Object.defineProperties;
|
|
1033
|
+
var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
|
|
1034
|
+
var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
|
|
1035
|
+
var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
|
|
1036
|
+
var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
|
|
1037
|
+
var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1038
|
+
var __spreadValues$6 = (a, b) => {
|
|
728
1039
|
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$
|
|
1040
|
+
if (__hasOwnProp$6.call(b, prop))
|
|
1041
|
+
__defNormalProp$6(a, prop, b[prop]);
|
|
1042
|
+
if (__getOwnPropSymbols$6)
|
|
1043
|
+
for (var prop of __getOwnPropSymbols$6(b)) {
|
|
1044
|
+
if (__propIsEnum$6.call(b, prop))
|
|
1045
|
+
__defNormalProp$6(a, prop, b[prop]);
|
|
735
1046
|
}
|
|
736
1047
|
return a;
|
|
737
1048
|
};
|
|
738
|
-
var __spreadProps$
|
|
1049
|
+
var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
|
|
739
1050
|
function useAnnotation(options = {}, deps = []) {
|
|
740
1051
|
const { id, selector } = options;
|
|
741
1052
|
const ctx = useResourceContext();
|
|
@@ -747,7 +1058,7 @@ function useAnnotation(options = {}, deps = []) {
|
|
|
747
1058
|
if (!annotation) {
|
|
748
1059
|
return void 0;
|
|
749
1060
|
}
|
|
750
|
-
const newAnnotation = __spreadProps$
|
|
1061
|
+
const newAnnotation = __spreadProps$4(__spreadValues$6({}, annotation), {
|
|
751
1062
|
body,
|
|
752
1063
|
target: expandTarget(annotation.target, { typeMap: vault.getState().iiif.mapping })
|
|
753
1064
|
});
|
|
@@ -774,19 +1085,19 @@ function useCanvas(options = {}, deps = []) {
|
|
|
774
1085
|
}, [canvas, selector, ...deps]);
|
|
775
1086
|
}
|
|
776
1087
|
|
|
777
|
-
var __defProp$
|
|
778
|
-
var __getOwnPropSymbols$
|
|
779
|
-
var __hasOwnProp$
|
|
780
|
-
var __propIsEnum$
|
|
781
|
-
var __defNormalProp$
|
|
782
|
-
var __spreadValues$
|
|
1088
|
+
var __defProp$5 = Object.defineProperty;
|
|
1089
|
+
var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
|
|
1090
|
+
var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
|
|
1091
|
+
var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
|
|
1092
|
+
var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1093
|
+
var __spreadValues$5 = (a, b) => {
|
|
783
1094
|
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$
|
|
1095
|
+
if (__hasOwnProp$5.call(b, prop))
|
|
1096
|
+
__defNormalProp$5(a, prop, b[prop]);
|
|
1097
|
+
if (__getOwnPropSymbols$5)
|
|
1098
|
+
for (var prop of __getOwnPropSymbols$5(b)) {
|
|
1099
|
+
if (__propIsEnum$5.call(b, prop))
|
|
1100
|
+
__defNormalProp$5(a, prop, b[prop]);
|
|
790
1101
|
}
|
|
791
1102
|
return a;
|
|
792
1103
|
};
|
|
@@ -808,7 +1119,7 @@ const RenderAnnotation = ({
|
|
|
808
1119
|
if (!isValid) {
|
|
809
1120
|
return null;
|
|
810
1121
|
}
|
|
811
|
-
return /* @__PURE__ */ React.createElement(RegionHighlight, __spreadValues$
|
|
1122
|
+
return /* @__PURE__ */ React$1.createElement(RegionHighlight, __spreadValues$5({
|
|
812
1123
|
id: annotation.id,
|
|
813
1124
|
isEditing: true,
|
|
814
1125
|
region: annotation.target.selector.spatial,
|
|
@@ -829,8 +1140,8 @@ const RenderAnnotationPage = ({
|
|
|
829
1140
|
const style = useStyles(page, "atlas");
|
|
830
1141
|
const html = useStyles(page, "html");
|
|
831
1142
|
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, {
|
|
1143
|
+
return /* @__PURE__ */ React$1.createElement(Fragment, null, (_a = page.items) == null ? void 0 : _a.map((annotation) => {
|
|
1144
|
+
return /* @__PURE__ */ React$1.createElement(RenderAnnotation, {
|
|
834
1145
|
key: annotation.id,
|
|
835
1146
|
id: annotation.id,
|
|
836
1147
|
style,
|
|
@@ -847,26 +1158,27 @@ function RenderImage({
|
|
|
847
1158
|
isStatic,
|
|
848
1159
|
x = 0,
|
|
849
1160
|
y = 0,
|
|
850
|
-
annotations
|
|
1161
|
+
annotations,
|
|
1162
|
+
children
|
|
851
1163
|
}) {
|
|
852
1164
|
var _a, _b, _c, _d;
|
|
853
|
-
return /* @__PURE__ */ React.createElement(Fragment, {
|
|
1165
|
+
return /* @__PURE__ */ React$1.createElement(Fragment, {
|
|
854
1166
|
key: id
|
|
855
|
-
}, !image.service ? /* @__PURE__ */ React.createElement(Fragment, {
|
|
1167
|
+
}, !image.service ? /* @__PURE__ */ React$1.createElement(Fragment, {
|
|
856
1168
|
key: "no-service"
|
|
857
|
-
}, /* @__PURE__ */ React.createElement("world-image", {
|
|
1169
|
+
}, /* @__PURE__ */ React$1.createElement("world-image", {
|
|
858
1170
|
uri: image.id,
|
|
859
1171
|
target: image.target.spatial,
|
|
860
1172
|
display: image.width && image.height ? {
|
|
861
1173
|
width: image.width,
|
|
862
1174
|
height: image.height
|
|
863
1175
|
} : void 0
|
|
864
|
-
}), annotations) : /* @__PURE__ */ React.createElement(Fragment, {
|
|
1176
|
+
}), annotations, children) : /* @__PURE__ */ React$1.createElement(Fragment, {
|
|
865
1177
|
key: "service"
|
|
866
|
-
}, /* @__PURE__ */ React.createElement(TileSet, {
|
|
1178
|
+
}, /* @__PURE__ */ React$1.createElement(TileSet, {
|
|
867
1179
|
viewport: isStatic,
|
|
868
1180
|
tiles: {
|
|
869
|
-
id: image.service.id,
|
|
1181
|
+
id: image.service.id || image.service["@id"],
|
|
870
1182
|
height: image.height,
|
|
871
1183
|
width: image.width,
|
|
872
1184
|
imageService: image.service,
|
|
@@ -876,7 +1188,7 @@ function RenderImage({
|
|
|
876
1188
|
y: ((_b = image.target) == null ? void 0 : _b.spatial.y) + y,
|
|
877
1189
|
width: (_c = image.target) == null ? void 0 : _c.spatial.width,
|
|
878
1190
|
height: (_d = image.target) == null ? void 0 : _d.spatial.height
|
|
879
|
-
}), annotations));
|
|
1191
|
+
}), annotations, children));
|
|
880
1192
|
}
|
|
881
1193
|
|
|
882
1194
|
function parseSpecificResource(resource) {
|
|
@@ -1016,25 +1328,25 @@ function flattenAnnotationPageIds({
|
|
|
1016
1328
|
return foundIds;
|
|
1017
1329
|
}
|
|
1018
1330
|
|
|
1019
|
-
var __defProp$
|
|
1020
|
-
var __defProps$
|
|
1021
|
-
var __getOwnPropDescs$
|
|
1022
|
-
var __getOwnPropSymbols$
|
|
1023
|
-
var __hasOwnProp$
|
|
1024
|
-
var __propIsEnum$
|
|
1025
|
-
var __defNormalProp$
|
|
1026
|
-
var __spreadValues$
|
|
1331
|
+
var __defProp$4 = Object.defineProperty;
|
|
1332
|
+
var __defProps$3 = Object.defineProperties;
|
|
1333
|
+
var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
|
|
1334
|
+
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
1335
|
+
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
1336
|
+
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
1337
|
+
var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1338
|
+
var __spreadValues$4 = (a, b) => {
|
|
1027
1339
|
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$
|
|
1340
|
+
if (__hasOwnProp$4.call(b, prop))
|
|
1341
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
1342
|
+
if (__getOwnPropSymbols$4)
|
|
1343
|
+
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
1344
|
+
if (__propIsEnum$4.call(b, prop))
|
|
1345
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
1034
1346
|
}
|
|
1035
1347
|
return a;
|
|
1036
1348
|
};
|
|
1037
|
-
var __spreadProps$
|
|
1349
|
+
var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
|
|
1038
1350
|
function getMeta(state, resourceId) {
|
|
1039
1351
|
var _a;
|
|
1040
1352
|
const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
|
|
@@ -1065,7 +1377,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
|
|
|
1065
1377
|
if (existingResources && !existingResources[resourceId]) {
|
|
1066
1378
|
return existingResources;
|
|
1067
1379
|
}
|
|
1068
|
-
return __spreadProps$
|
|
1380
|
+
return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
|
|
1069
1381
|
[resourceId]: false
|
|
1070
1382
|
});
|
|
1071
1383
|
});
|
|
@@ -1092,7 +1404,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
|
|
|
1092
1404
|
if (existingResources && existingResources[resourceId]) {
|
|
1093
1405
|
return existingResources;
|
|
1094
1406
|
}
|
|
1095
|
-
return __spreadProps$
|
|
1407
|
+
return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
|
|
1096
1408
|
[resourceId]: true
|
|
1097
1409
|
});
|
|
1098
1410
|
});
|
|
@@ -1109,30 +1421,30 @@ function useResources(ids, type) {
|
|
|
1109
1421
|
return useVaultSelector((state, vault) => vault.get(ids.map((id) => ({ id, type }))), [ids, type]);
|
|
1110
1422
|
}
|
|
1111
1423
|
|
|
1112
|
-
const ImageServiceLoaderContext = React.createContext(new ImageServiceLoader());
|
|
1424
|
+
const ImageServiceLoaderContext = React$1.createContext(new ImageServiceLoader());
|
|
1113
1425
|
function useImageServiceLoader() {
|
|
1114
1426
|
return useContext(ImageServiceLoaderContext);
|
|
1115
1427
|
}
|
|
1116
1428
|
|
|
1117
|
-
var __defProp$
|
|
1118
|
-
var __defProps$
|
|
1119
|
-
var __getOwnPropDescs$
|
|
1120
|
-
var __getOwnPropSymbols$
|
|
1121
|
-
var __hasOwnProp$
|
|
1122
|
-
var __propIsEnum$
|
|
1123
|
-
var __defNormalProp$
|
|
1124
|
-
var __spreadValues$
|
|
1429
|
+
var __defProp$3 = Object.defineProperty;
|
|
1430
|
+
var __defProps$2 = Object.defineProperties;
|
|
1431
|
+
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
1432
|
+
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
1433
|
+
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
1434
|
+
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
1435
|
+
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1436
|
+
var __spreadValues$3 = (a, b) => {
|
|
1125
1437
|
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$
|
|
1438
|
+
if (__hasOwnProp$3.call(b, prop))
|
|
1439
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
1440
|
+
if (__getOwnPropSymbols$3)
|
|
1441
|
+
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
1442
|
+
if (__propIsEnum$3.call(b, prop))
|
|
1443
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
1132
1444
|
}
|
|
1133
1445
|
return a;
|
|
1134
1446
|
};
|
|
1135
|
-
var __spreadProps$
|
|
1447
|
+
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
1136
1448
|
function useLoadImageService() {
|
|
1137
1449
|
const loader = useImageServiceLoader();
|
|
1138
1450
|
const [imageServiceStatus, setImageServiceStatus] = useState({});
|
|
@@ -1148,14 +1460,15 @@ function useLoadImageService() {
|
|
|
1148
1460
|
const syncLoaded = loader.loadServiceSync({
|
|
1149
1461
|
id: imageServiceId,
|
|
1150
1462
|
width: imageService.width || width,
|
|
1151
|
-
height: imageService.height || height
|
|
1463
|
+
height: imageService.height || height,
|
|
1464
|
+
source: imageService
|
|
1152
1465
|
});
|
|
1153
1466
|
if (syncLoaded) {
|
|
1154
1467
|
imageService = syncLoaded;
|
|
1155
1468
|
} else if (!imageServiceStatus[imageServiceId]) {
|
|
1156
1469
|
if (!didUnmount.current) {
|
|
1157
1470
|
setImageServiceStatus((r) => {
|
|
1158
|
-
return __spreadProps$
|
|
1471
|
+
return __spreadProps$2(__spreadValues$3({}, r), {
|
|
1159
1472
|
[imageServiceId]: "loading"
|
|
1160
1473
|
});
|
|
1161
1474
|
});
|
|
@@ -1167,7 +1480,7 @@ function useLoadImageService() {
|
|
|
1167
1480
|
}).then(() => {
|
|
1168
1481
|
if (!didUnmount.current) {
|
|
1169
1482
|
setImageServiceStatus((r) => {
|
|
1170
|
-
return __spreadProps$
|
|
1483
|
+
return __spreadProps$2(__spreadValues$3({}, r), {
|
|
1171
1484
|
[imageServiceId]: "done"
|
|
1172
1485
|
});
|
|
1173
1486
|
});
|
|
@@ -1290,6 +1603,9 @@ function getImageStrategy(canvas, paintables, loadImageService) {
|
|
|
1290
1603
|
height: imageSelector.selector.spatial.height
|
|
1291
1604
|
}
|
|
1292
1605
|
} : defaultImageSelector;
|
|
1606
|
+
if (imageService && !imageService.id) {
|
|
1607
|
+
imageService.id = imageService["@id"];
|
|
1608
|
+
}
|
|
1293
1609
|
const imageType = {
|
|
1294
1610
|
id: resource.id,
|
|
1295
1611
|
type: "Image",
|
|
@@ -1310,25 +1626,129 @@ function getImageStrategy(canvas, paintables, loadImageService) {
|
|
|
1310
1626
|
};
|
|
1311
1627
|
}
|
|
1312
1628
|
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1629
|
+
const supportedFormats = ["model/gltf-binary"];
|
|
1630
|
+
function get3dStrategy(canvas, paintables) {
|
|
1631
|
+
const first = paintables.items[0];
|
|
1632
|
+
const resource = first.resource;
|
|
1633
|
+
if (!resource.format) {
|
|
1634
|
+
return unsupportedStrategy("Unknown format");
|
|
1635
|
+
}
|
|
1636
|
+
if (supportedFormats.indexOf(resource.format) === -1) {
|
|
1637
|
+
return unsupportedStrategy(`3D format: ${resource.format} is unsupported`);
|
|
1638
|
+
}
|
|
1639
|
+
return {
|
|
1640
|
+
type: "3d-model",
|
|
1641
|
+
model: resource
|
|
1642
|
+
};
|
|
1643
|
+
}
|
|
1644
|
+
|
|
1645
|
+
function getAudioStrategy(canvas, paintables) {
|
|
1646
|
+
var _a;
|
|
1647
|
+
if (!canvas.duration) {
|
|
1648
|
+
return unsupportedStrategy("No duration on canvas");
|
|
1649
|
+
}
|
|
1650
|
+
if (paintables.items.length > 1) {
|
|
1651
|
+
return unsupportedStrategy("Only one audio source supported");
|
|
1652
|
+
}
|
|
1653
|
+
const audioResource = (_a = paintables.items[0]) == null ? void 0 : _a.resource;
|
|
1654
|
+
if (!audioResource) {
|
|
1655
|
+
return unsupportedStrategy("Unknown audio");
|
|
1656
|
+
}
|
|
1657
|
+
if (!audioResource.format) {
|
|
1658
|
+
return unsupportedStrategy("Audio does not have format");
|
|
1659
|
+
}
|
|
1660
|
+
return {
|
|
1661
|
+
type: "media",
|
|
1662
|
+
media: {
|
|
1663
|
+
duration: canvas.duration,
|
|
1664
|
+
url: audioResource.id,
|
|
1665
|
+
type: "Sound",
|
|
1666
|
+
target: {
|
|
1667
|
+
type: "TemporalSelector",
|
|
1668
|
+
temporal: {
|
|
1669
|
+
startTime: 0,
|
|
1670
|
+
endTime: canvas.duration
|
|
1671
|
+
}
|
|
1672
|
+
},
|
|
1673
|
+
format: audioResource.format,
|
|
1674
|
+
selector: {
|
|
1675
|
+
type: "TemporalSelector",
|
|
1676
|
+
temporal: {
|
|
1677
|
+
startTime: 0,
|
|
1678
|
+
endTime: canvas.duration
|
|
1679
|
+
}
|
|
1680
|
+
}
|
|
1681
|
+
},
|
|
1682
|
+
annotations: {
|
|
1683
|
+
pages: []
|
|
1684
|
+
}
|
|
1685
|
+
};
|
|
1686
|
+
}
|
|
1687
|
+
|
|
1688
|
+
function getVideoStrategy(canvas, paintables) {
|
|
1689
|
+
var _a;
|
|
1690
|
+
const videoPaintables = paintables.items.filter((t) => t.type === "video");
|
|
1691
|
+
if (!canvas.duration) {
|
|
1692
|
+
return unsupportedStrategy("No duration on canvas");
|
|
1693
|
+
}
|
|
1694
|
+
if (videoPaintables.length > 1) {
|
|
1695
|
+
return unsupportedStrategy("Only one video source supported");
|
|
1696
|
+
}
|
|
1697
|
+
const audioResource = (_a = videoPaintables[0]) == null ? void 0 : _a.resource;
|
|
1698
|
+
if (!audioResource) {
|
|
1699
|
+
return unsupportedStrategy("Unknown video");
|
|
1700
|
+
}
|
|
1701
|
+
if (!audioResource.format) {
|
|
1702
|
+
return unsupportedStrategy("Video does not have format");
|
|
1703
|
+
}
|
|
1704
|
+
return {
|
|
1705
|
+
type: "media",
|
|
1706
|
+
media: {
|
|
1707
|
+
duration: canvas.duration,
|
|
1708
|
+
url: audioResource.id,
|
|
1709
|
+
type: "Video",
|
|
1710
|
+
items: [],
|
|
1711
|
+
target: {
|
|
1712
|
+
type: "TemporalSelector",
|
|
1713
|
+
temporal: {
|
|
1714
|
+
startTime: 0,
|
|
1715
|
+
endTime: canvas.duration
|
|
1716
|
+
}
|
|
1717
|
+
},
|
|
1718
|
+
format: audioResource.format,
|
|
1719
|
+
selector: {
|
|
1720
|
+
type: "TemporalSelector",
|
|
1721
|
+
temporal: {
|
|
1722
|
+
startTime: 0,
|
|
1723
|
+
endTime: canvas.duration
|
|
1724
|
+
}
|
|
1725
|
+
}
|
|
1726
|
+
},
|
|
1727
|
+
annotations: {
|
|
1728
|
+
pages: []
|
|
1729
|
+
}
|
|
1730
|
+
};
|
|
1731
|
+
}
|
|
1732
|
+
|
|
1733
|
+
var __defProp$2 = Object.defineProperty;
|
|
1734
|
+
var __defProps$1 = Object.defineProperties;
|
|
1735
|
+
var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
|
|
1736
|
+
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
1737
|
+
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
1738
|
+
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
1739
|
+
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1740
|
+
var __spreadValues$2 = (a, b) => {
|
|
1321
1741
|
for (var prop in b || (b = {}))
|
|
1322
|
-
if (__hasOwnProp$
|
|
1323
|
-
__defNormalProp$
|
|
1324
|
-
if (__getOwnPropSymbols$
|
|
1325
|
-
for (var prop of __getOwnPropSymbols$
|
|
1326
|
-
if (__propIsEnum$
|
|
1327
|
-
__defNormalProp$
|
|
1742
|
+
if (__hasOwnProp$2.call(b, prop))
|
|
1743
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
1744
|
+
if (__getOwnPropSymbols$2)
|
|
1745
|
+
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
1746
|
+
if (__propIsEnum$2.call(b, prop))
|
|
1747
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
1328
1748
|
}
|
|
1329
1749
|
return a;
|
|
1330
1750
|
};
|
|
1331
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
1751
|
+
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
|
|
1332
1752
|
function useRenderingStrategy(options) {
|
|
1333
1753
|
const manifest = useManifest();
|
|
1334
1754
|
const canvas = useCanvas();
|
|
@@ -1345,10 +1765,14 @@ function useRenderingStrategy(options) {
|
|
|
1345
1765
|
return unknownResponse;
|
|
1346
1766
|
}
|
|
1347
1767
|
if (paintables.types.length !== 1) {
|
|
1348
|
-
if (
|
|
1349
|
-
|
|
1768
|
+
if (paintables.types.length === 2 && paintables.types.indexOf("text") !== -1) {
|
|
1769
|
+
paintables.types = paintables.types.filter((t) => t !== "text");
|
|
1770
|
+
} else {
|
|
1771
|
+
if (supports.indexOf("complex-timeline") === -1) {
|
|
1772
|
+
return unsupportedStrategy("Complex timeline not supported");
|
|
1773
|
+
}
|
|
1774
|
+
return unsupportedStrategy("ComplexTimelineStrategy not yet supported");
|
|
1350
1775
|
}
|
|
1351
|
-
return unsupportedStrategy("ComplexTimelineStrategy not yet supported");
|
|
1352
1776
|
}
|
|
1353
1777
|
const mainType = paintables.types[0];
|
|
1354
1778
|
if (mainType === "image") {
|
|
@@ -1357,17 +1781,23 @@ function useRenderingStrategy(options) {
|
|
|
1357
1781
|
}
|
|
1358
1782
|
return getImageStrategy(canvas, paintables, loadImageService);
|
|
1359
1783
|
}
|
|
1360
|
-
if (mainType === "
|
|
1784
|
+
if (mainType === "Model" || mainType === "model") {
|
|
1785
|
+
if (supports.indexOf("3d-model") === -1) {
|
|
1786
|
+
return unsupportedStrategy("3D not supported");
|
|
1787
|
+
}
|
|
1788
|
+
return get3dStrategy(canvas, paintables);
|
|
1789
|
+
}
|
|
1790
|
+
if (mainType === "sound" || mainType === "audio") {
|
|
1361
1791
|
if (supports.indexOf("media") === -1) {
|
|
1362
1792
|
return unsupportedStrategy("Media not supported");
|
|
1363
1793
|
}
|
|
1364
|
-
return
|
|
1794
|
+
return getAudioStrategy(canvas, paintables);
|
|
1365
1795
|
}
|
|
1366
1796
|
if (mainType === "video") {
|
|
1367
1797
|
if (supports.indexOf("media") === -1) {
|
|
1368
1798
|
return unsupportedStrategy("Media not supported");
|
|
1369
1799
|
}
|
|
1370
|
-
return
|
|
1800
|
+
return getVideoStrategy(canvas, paintables);
|
|
1371
1801
|
}
|
|
1372
1802
|
return unknownResponse;
|
|
1373
1803
|
}, [canvas, paintables, vault, actions.makeChoice]);
|
|
@@ -1376,7 +1806,7 @@ function useRenderingStrategy(options) {
|
|
|
1376
1806
|
return [strategy, emptyActions];
|
|
1377
1807
|
}
|
|
1378
1808
|
return [
|
|
1379
|
-
__spreadProps(__spreadValues$
|
|
1809
|
+
__spreadProps$1(__spreadValues$2({}, strategy), {
|
|
1380
1810
|
annotations: { pages: enabledPages }
|
|
1381
1811
|
}),
|
|
1382
1812
|
actions
|
|
@@ -1418,6 +1848,283 @@ function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
|
|
|
1418
1848
|
return thumbnail;
|
|
1419
1849
|
}
|
|
1420
1850
|
|
|
1851
|
+
var __defProp$1 = Object.defineProperty;
|
|
1852
|
+
var __defProps = Object.defineProperties;
|
|
1853
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
1854
|
+
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
|
|
1855
|
+
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
|
|
1856
|
+
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
|
|
1857
|
+
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1858
|
+
var __spreadValues$1 = (a, b) => {
|
|
1859
|
+
for (var prop in b || (b = {}))
|
|
1860
|
+
if (__hasOwnProp$1.call(b, prop))
|
|
1861
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
1862
|
+
if (__getOwnPropSymbols$1)
|
|
1863
|
+
for (var prop of __getOwnPropSymbols$1(b)) {
|
|
1864
|
+
if (__propIsEnum$1.call(b, prop))
|
|
1865
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
1866
|
+
}
|
|
1867
|
+
return a;
|
|
1868
|
+
};
|
|
1869
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
1870
|
+
function getDefaultState(duration) {
|
|
1871
|
+
return { isMuted: false, playRequested: false, isPlaying: false, isFinished: false, volume: 100, duration };
|
|
1872
|
+
}
|
|
1873
|
+
function reducer(state, action) {
|
|
1874
|
+
switch (action.type) {
|
|
1875
|
+
case "FINISHED":
|
|
1876
|
+
return __spreadProps(__spreadValues$1({}, state), { isFinished: true, isPlaying: false, playRequested: false });
|
|
1877
|
+
case "PLAY_PAUSE":
|
|
1878
|
+
return __spreadProps(__spreadValues$1({}, state), { isFinished: false, isPlaying: !state.isPlaying });
|
|
1879
|
+
case "PLAY_REQUESTED":
|
|
1880
|
+
return __spreadProps(__spreadValues$1({}, state), { isFinished: false, playRequested: true });
|
|
1881
|
+
case "PAUSE":
|
|
1882
|
+
return __spreadProps(__spreadValues$1({}, state), { isPlaying: false });
|
|
1883
|
+
case "PLAY":
|
|
1884
|
+
return __spreadProps(__spreadValues$1({}, state), { isFinished: false, playRequested: false, isPlaying: true });
|
|
1885
|
+
case "MUTE":
|
|
1886
|
+
return __spreadProps(__spreadValues$1({}, state), { isMuted: true });
|
|
1887
|
+
case "SET_VOLUME":
|
|
1888
|
+
return __spreadProps(__spreadValues$1({}, state), { volume: action.volume, isMuted: action.volume === 0 });
|
|
1889
|
+
case "TOGGLE_MUTE":
|
|
1890
|
+
return __spreadProps(__spreadValues$1({}, state), { isMuted: !state.isMuted });
|
|
1891
|
+
case "UNMUTE":
|
|
1892
|
+
return __spreadProps(__spreadValues$1({}, state), { isMuted: false });
|
|
1893
|
+
}
|
|
1894
|
+
return state;
|
|
1895
|
+
}
|
|
1896
|
+
function formatTime(time) {
|
|
1897
|
+
const seconds = Math.round(time);
|
|
1898
|
+
return `${Math.floor(seconds / 60)}:${`${seconds % 60}`.padStart(2, "0")}`;
|
|
1899
|
+
}
|
|
1900
|
+
function useSimpleMediaPlayer(props) {
|
|
1901
|
+
const [state, dispatch] = useReducer(reducer, getDefaultState(props.duration));
|
|
1902
|
+
const media = useRef(null);
|
|
1903
|
+
const currentTime = useRef(null);
|
|
1904
|
+
const progress = useRef(null);
|
|
1905
|
+
const _isMuted = useRef(false);
|
|
1906
|
+
const _updateCurrentTime = useCallback(() => {
|
|
1907
|
+
if (currentTime.current && media.current) {
|
|
1908
|
+
currentTime.current.innerHTML = formatTime(media.current.currentTime);
|
|
1909
|
+
if (progress.current) {
|
|
1910
|
+
progress.current.style.width = `${media.current.currentTime / props.duration * 100}%`;
|
|
1911
|
+
}
|
|
1912
|
+
if (_isMuted.current !== media.current.muted) {
|
|
1913
|
+
_isMuted.current = media.current.muted;
|
|
1914
|
+
dispatch(media.current.muted ? { type: "MUTE" } : { type: "UNMUTE" });
|
|
1915
|
+
}
|
|
1916
|
+
}
|
|
1917
|
+
}, [props.duration]);
|
|
1918
|
+
const play = useCallback(() => {
|
|
1919
|
+
if (media.current) {
|
|
1920
|
+
dispatch({ type: "PLAY_REQUESTED" });
|
|
1921
|
+
media.current.play().then(() => {
|
|
1922
|
+
dispatch({ type: "PLAY" });
|
|
1923
|
+
});
|
|
1924
|
+
_updateCurrentTime();
|
|
1925
|
+
}
|
|
1926
|
+
}, [_updateCurrentTime]);
|
|
1927
|
+
const playPause = useCallback(() => {
|
|
1928
|
+
if (media.current) {
|
|
1929
|
+
if (media.current.duration > 0 && media.current.paused) {
|
|
1930
|
+
play();
|
|
1931
|
+
} else {
|
|
1932
|
+
pause();
|
|
1933
|
+
}
|
|
1934
|
+
}
|
|
1935
|
+
}, [_updateCurrentTime]);
|
|
1936
|
+
const pause = useCallback(() => {
|
|
1937
|
+
if (media.current) {
|
|
1938
|
+
media.current.pause();
|
|
1939
|
+
dispatch({ type: "PAUSE" });
|
|
1940
|
+
_updateCurrentTime();
|
|
1941
|
+
}
|
|
1942
|
+
}, [_updateCurrentTime]);
|
|
1943
|
+
const toggleMute = useCallback(() => {
|
|
1944
|
+
if (media.current) {
|
|
1945
|
+
media.current.muted = !media.current.muted;
|
|
1946
|
+
dispatch(media.current.muted ? { type: "MUTE" } : { type: "UNMUTE" });
|
|
1947
|
+
}
|
|
1948
|
+
}, []);
|
|
1949
|
+
const mute = useCallback(() => {
|
|
1950
|
+
if (media.current) {
|
|
1951
|
+
media.current.muted = true;
|
|
1952
|
+
dispatch({ type: "MUTE" });
|
|
1953
|
+
}
|
|
1954
|
+
}, []);
|
|
1955
|
+
const unmute = useCallback(() => {
|
|
1956
|
+
if (media.current) {
|
|
1957
|
+
media.current.muted = false;
|
|
1958
|
+
dispatch({ type: "UNMUTE" });
|
|
1959
|
+
}
|
|
1960
|
+
}, []);
|
|
1961
|
+
const setVolume = useCallback((newVolume) => {
|
|
1962
|
+
if (media.current) {
|
|
1963
|
+
media.current.muted = false;
|
|
1964
|
+
media.current.volume = newVolume / 100;
|
|
1965
|
+
dispatch({ type: "SET_VOLUME", volume: newVolume });
|
|
1966
|
+
}
|
|
1967
|
+
}, []);
|
|
1968
|
+
const setDurationPercent = useCallback((percent) => {
|
|
1969
|
+
if (media.current) {
|
|
1970
|
+
media.current.currentTime = Math.max(0, Math.min(percent * props.duration, props.duration));
|
|
1971
|
+
_updateCurrentTime();
|
|
1972
|
+
}
|
|
1973
|
+
}, []);
|
|
1974
|
+
const setTime = useCallback((time) => {
|
|
1975
|
+
if (media.current) {
|
|
1976
|
+
media.current.currentTime = Math.max(0, Math.min(time, props.duration));
|
|
1977
|
+
_updateCurrentTime();
|
|
1978
|
+
}
|
|
1979
|
+
}, []);
|
|
1980
|
+
useEffect(() => {
|
|
1981
|
+
const interval = setInterval(() => {
|
|
1982
|
+
_updateCurrentTime();
|
|
1983
|
+
}, 350);
|
|
1984
|
+
return () => clearInterval(interval);
|
|
1985
|
+
}, [_updateCurrentTime, props.duration]);
|
|
1986
|
+
useEffect(() => {
|
|
1987
|
+
const ended = () => {
|
|
1988
|
+
dispatch({ type: "FINISHED" });
|
|
1989
|
+
};
|
|
1990
|
+
const _media = media.current;
|
|
1991
|
+
_media == null ? void 0 : _media.addEventListener("ended", ended);
|
|
1992
|
+
return () => _media == null ? void 0 : _media.removeEventListener("ended", ended);
|
|
1993
|
+
}, []);
|
|
1994
|
+
return [
|
|
1995
|
+
{ element: media, currentTime, progress },
|
|
1996
|
+
state,
|
|
1997
|
+
{
|
|
1998
|
+
play,
|
|
1999
|
+
pause,
|
|
2000
|
+
playPause,
|
|
2001
|
+
mute,
|
|
2002
|
+
unmute,
|
|
2003
|
+
toggleMute,
|
|
2004
|
+
setVolume,
|
|
2005
|
+
setDurationPercent,
|
|
2006
|
+
setTime
|
|
2007
|
+
}
|
|
2008
|
+
];
|
|
2009
|
+
}
|
|
2010
|
+
|
|
2011
|
+
const MediaReactContextState = createContext(null);
|
|
2012
|
+
const MediaReactContextActions = createContext(null);
|
|
2013
|
+
const MediaReactContextElements = createContext(null);
|
|
2014
|
+
function useMediaState() {
|
|
2015
|
+
const ctx = useContext(MediaReactContextState);
|
|
2016
|
+
if (!ctx) {
|
|
2017
|
+
throw new Error("Ctx not found");
|
|
2018
|
+
}
|
|
2019
|
+
return ctx;
|
|
2020
|
+
}
|
|
2021
|
+
function useMediaActions() {
|
|
2022
|
+
const ctx = useContext(MediaReactContextActions);
|
|
2023
|
+
if (!ctx) {
|
|
2024
|
+
throw new Error("Ctx not found");
|
|
2025
|
+
}
|
|
2026
|
+
return ctx;
|
|
2027
|
+
}
|
|
2028
|
+
function useMediaElements() {
|
|
2029
|
+
const ctx = useContext(MediaReactContextElements);
|
|
2030
|
+
if (!ctx) {
|
|
2031
|
+
throw new Error("Ctx not found");
|
|
2032
|
+
}
|
|
2033
|
+
return ctx;
|
|
2034
|
+
}
|
|
2035
|
+
function MediaPlayerProvider({
|
|
2036
|
+
actions,
|
|
2037
|
+
state,
|
|
2038
|
+
children,
|
|
2039
|
+
currentTime,
|
|
2040
|
+
progress,
|
|
2041
|
+
element
|
|
2042
|
+
}) {
|
|
2043
|
+
return /* @__PURE__ */ React.createElement(MediaReactContextElements.Provider, {
|
|
2044
|
+
value: { currentTime, progress, element }
|
|
2045
|
+
}, /* @__PURE__ */ React.createElement(MediaReactContextActions.Provider, {
|
|
2046
|
+
value: actions
|
|
2047
|
+
}, /* @__PURE__ */ React.createElement(MediaReactContextState.Provider, {
|
|
2048
|
+
value: state
|
|
2049
|
+
}, children)));
|
|
2050
|
+
}
|
|
2051
|
+
|
|
2052
|
+
function Audio({ media, children }) {
|
|
2053
|
+
const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration: media.duration });
|
|
2054
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CanvasPortal, null, /* @__PURE__ */ React.createElement(MediaPlayerProvider, {
|
|
2055
|
+
state,
|
|
2056
|
+
actions,
|
|
2057
|
+
currentTime,
|
|
2058
|
+
progress,
|
|
2059
|
+
element
|
|
2060
|
+
}, /* @__PURE__ */ React.createElement("audio", {
|
|
2061
|
+
ref: element,
|
|
2062
|
+
src: media.url
|
|
2063
|
+
}), children)));
|
|
2064
|
+
}
|
|
2065
|
+
|
|
2066
|
+
function Video({ media, children }) {
|
|
2067
|
+
const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration: media.duration });
|
|
2068
|
+
const Component = "div";
|
|
2069
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CanvasPortal, {
|
|
2070
|
+
overlay: true
|
|
2071
|
+
}, /* @__PURE__ */ React.createElement("style", null, `
|
|
2072
|
+
.video-container {
|
|
2073
|
+
position: absolute;
|
|
2074
|
+
top: 0;
|
|
2075
|
+
bottom: 0;
|
|
2076
|
+
left: 0;
|
|
2077
|
+
right: 0;
|
|
2078
|
+
background: #000;
|
|
2079
|
+
z-index: 13;
|
|
2080
|
+
display: flex;
|
|
2081
|
+
justify-content: center;
|
|
2082
|
+
pointer-events: visible;
|
|
2083
|
+
}
|
|
2084
|
+
`), /* @__PURE__ */ React.createElement(Component, {
|
|
2085
|
+
className: "video-container",
|
|
2086
|
+
part: "video-container",
|
|
2087
|
+
onClick: () => actions.playPause()
|
|
2088
|
+
}, /* @__PURE__ */ React.createElement("video", {
|
|
2089
|
+
ref: element,
|
|
2090
|
+
src: media.url,
|
|
2091
|
+
style: { width: "100%", objectFit: "contain" }
|
|
2092
|
+
}))), /* @__PURE__ */ React.createElement(CanvasPortal, null, /* @__PURE__ */ React.createElement(MediaPlayerProvider, {
|
|
2093
|
+
state,
|
|
2094
|
+
actions,
|
|
2095
|
+
currentTime,
|
|
2096
|
+
progress,
|
|
2097
|
+
element
|
|
2098
|
+
}, children)));
|
|
2099
|
+
}
|
|
2100
|
+
|
|
2101
|
+
function Model({ model }) {
|
|
2102
|
+
return /* @__PURE__ */ React.createElement(CanvasPortal, {
|
|
2103
|
+
overlay: true
|
|
2104
|
+
}, /* @__PURE__ */ React.createElement("style", null, `
|
|
2105
|
+
.model-container {
|
|
2106
|
+
position: absolute;
|
|
2107
|
+
top: 0;
|
|
2108
|
+
bottom: 0;
|
|
2109
|
+
left: 0;
|
|
2110
|
+
right: 0;
|
|
2111
|
+
background: #000;
|
|
2112
|
+
z-index: 13;
|
|
2113
|
+
display: flex;
|
|
2114
|
+
justify-content: center;
|
|
2115
|
+
pointer-events: visible;
|
|
2116
|
+
}
|
|
2117
|
+
`), /* @__PURE__ */ React.createElement("div", {
|
|
2118
|
+
className: "model-container"
|
|
2119
|
+
}, /* @__PURE__ */ React.createElement("model-viewer", {
|
|
2120
|
+
"interaction-prompt": "none",
|
|
2121
|
+
style: { width: "100%", height: "100%" },
|
|
2122
|
+
"camera-controls": "",
|
|
2123
|
+
"ar-status": "not-presenting",
|
|
2124
|
+
src: model.id
|
|
2125
|
+
})));
|
|
2126
|
+
}
|
|
2127
|
+
|
|
1421
2128
|
var __defProp = Object.defineProperty;
|
|
1422
2129
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
1423
2130
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
@@ -1434,14 +2141,25 @@ var __spreadValues = (a, b) => {
|
|
|
1434
2141
|
}
|
|
1435
2142
|
return a;
|
|
1436
2143
|
};
|
|
1437
|
-
function RenderCanvas({
|
|
2144
|
+
function RenderCanvas({
|
|
2145
|
+
x,
|
|
2146
|
+
y,
|
|
2147
|
+
onChoiceChange,
|
|
2148
|
+
registerActions,
|
|
2149
|
+
defaultChoices,
|
|
2150
|
+
isStatic,
|
|
2151
|
+
renderViewerControls,
|
|
2152
|
+
renderMediaControls,
|
|
2153
|
+
strategies,
|
|
2154
|
+
children
|
|
2155
|
+
}) {
|
|
1438
2156
|
const canvas = useCanvas();
|
|
1439
2157
|
const elementProps = useResourceEvents(canvas, ["deep-zoom"]);
|
|
1440
2158
|
const [virtualPage] = useVirtualAnnotationPageContext();
|
|
1441
2159
|
const vault = useVault();
|
|
1442
2160
|
const helper = useMemo(() => createStylesHelper(vault), [vault]);
|
|
1443
2161
|
const [strategy, actions] = useRenderingStrategy({
|
|
1444
|
-
strategies: ["images"],
|
|
2162
|
+
strategies: strategies || ["images"],
|
|
1445
2163
|
defaultChoices: defaultChoices == null ? void 0 : defaultChoices.map(({ id }) => id)
|
|
1446
2164
|
});
|
|
1447
2165
|
const choice = strategy.type === "images" ? strategy.choice : void 0;
|
|
@@ -1470,40 +2188,42 @@ function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, i
|
|
|
1470
2188
|
if (!canvas) {
|
|
1471
2189
|
return null;
|
|
1472
2190
|
}
|
|
2191
|
+
const accompanyingCanvas = canvas.accompanyingCanvas;
|
|
2192
|
+
const thumbnailFallbackImage = thumbnail && thumbnail.type === "fixed" ? /* @__PURE__ */ React$1.createElement("world-object", {
|
|
2193
|
+
height: canvas.height,
|
|
2194
|
+
width: canvas.width,
|
|
2195
|
+
x,
|
|
2196
|
+
y
|
|
2197
|
+
}, /* @__PURE__ */ React$1.createElement("world-image", {
|
|
2198
|
+
uri: thumbnail.id,
|
|
2199
|
+
target: { x: 0, y: 0, width: canvas.width, height: canvas.height },
|
|
2200
|
+
display: thumbnail.width && thumbnail.height ? {
|
|
2201
|
+
width: thumbnail.width,
|
|
2202
|
+
height: thumbnail.height
|
|
2203
|
+
} : void 0
|
|
2204
|
+
})) : null;
|
|
1473
2205
|
if (strategy.type === "unknown") {
|
|
1474
|
-
if (
|
|
1475
|
-
return
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
x,
|
|
1479
|
-
y
|
|
1480
|
-
}, /* @__PURE__ */ React.createElement("world-image", {
|
|
1481
|
-
uri: thumbnail.id,
|
|
1482
|
-
target: { x: 0, y: 0, width: canvas.width, height: canvas.height },
|
|
1483
|
-
display: thumbnail.width && thumbnail.height ? {
|
|
1484
|
-
width: thumbnail.width,
|
|
1485
|
-
height: thumbnail.height
|
|
1486
|
-
} : void 0
|
|
1487
|
-
}));
|
|
1488
|
-
}
|
|
1489
|
-
throw new Error("Unknown image strategy");
|
|
2206
|
+
if (thumbnailFallbackImage) {
|
|
2207
|
+
return thumbnailFallbackImage;
|
|
2208
|
+
}
|
|
2209
|
+
throw new Error(strategy.reason || "Unknown image strategy");
|
|
1490
2210
|
}
|
|
1491
|
-
const annotations = /* @__PURE__ */ React.createElement(Fragment, null, virtualPage ? /* @__PURE__ */ React.createElement(RenderAnnotationPage, {
|
|
2211
|
+
const annotations = /* @__PURE__ */ React$1.createElement(Fragment, null, virtualPage ? /* @__PURE__ */ React$1.createElement(RenderAnnotationPage, {
|
|
1492
2212
|
page: virtualPage
|
|
1493
2213
|
}) : null, strategy.annotations && strategy.annotations.pages ? strategy.annotations.pages.map((page) => {
|
|
1494
|
-
return /* @__PURE__ */ React.createElement(RenderAnnotationPage, {
|
|
2214
|
+
return /* @__PURE__ */ React$1.createElement(RenderAnnotationPage, {
|
|
1495
2215
|
key: page.id,
|
|
1496
2216
|
page
|
|
1497
2217
|
});
|
|
1498
|
-
}) : null);
|
|
1499
|
-
return /* @__PURE__ */ React.createElement("world-object", __spreadValues({
|
|
2218
|
+
}) : null, children);
|
|
2219
|
+
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("world-object", __spreadValues({
|
|
1500
2220
|
key: strategy.type,
|
|
1501
2221
|
height: canvas.height,
|
|
1502
2222
|
width: canvas.width,
|
|
1503
2223
|
x,
|
|
1504
2224
|
y
|
|
1505
|
-
}, elementProps), strategy.type === "images" ? strategy.images.map((image, idx) => {
|
|
1506
|
-
return /* @__PURE__ */ React.createElement(RenderImage, {
|
|
2225
|
+
}, elementProps), strategy.type === "images" ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, strategy.images.map((image, idx) => {
|
|
2226
|
+
return /* @__PURE__ */ React$1.createElement(RenderImage, {
|
|
1507
2227
|
isStatic,
|
|
1508
2228
|
key: image.id,
|
|
1509
2229
|
image,
|
|
@@ -1511,7 +2231,17 @@ function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, i
|
|
|
1511
2231
|
thumbnail: idx === 0 ? thumbnail : void 0,
|
|
1512
2232
|
annotations
|
|
1513
2233
|
});
|
|
1514
|
-
})
|
|
2234
|
+
}), renderViewerControls ? /* @__PURE__ */ React$1.createElement(CanvasPortal, {
|
|
2235
|
+
overlay: true
|
|
2236
|
+
}, renderViewerControls(strategy)) : null) : null, strategy.type === "3d-model" ? /* @__PURE__ */ React$1.createElement(Model, {
|
|
2237
|
+
model: strategy.model
|
|
2238
|
+
}) : null, strategy.type === "media" ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, strategy.media.type === "Sound" ? /* @__PURE__ */ React$1.createElement(Audio, {
|
|
2239
|
+
media: strategy.media
|
|
2240
|
+
}, thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null) : strategy.media.type === "Video" ? /* @__PURE__ */ React$1.createElement(Video, {
|
|
2241
|
+
media: strategy.media
|
|
2242
|
+
}, thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null) : null) : null), strategy.type === "media" && strategy.media.type === "Sound" && accompanyingCanvas ? /* @__PURE__ */ React$1.createElement(CanvasContext, {
|
|
2243
|
+
canvas: accompanyingCanvas.id
|
|
2244
|
+
}, /* @__PURE__ */ React$1.createElement(RenderCanvas, null)) : null);
|
|
1515
2245
|
}
|
|
1516
2246
|
|
|
1517
2247
|
const CanvasPanel = {
|
|
@@ -1522,23 +2252,23 @@ const CanvasPanel = {
|
|
|
1522
2252
|
Viewer
|
|
1523
2253
|
};
|
|
1524
2254
|
|
|
1525
|
-
|
|
1526
|
-
return /* @__PURE__ */ React.createElement(ResourceProvider, {
|
|
2255
|
+
function AnnotationContext({ annotation, children }) {
|
|
2256
|
+
return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
|
|
1527
2257
|
value: { annotation }
|
|
1528
2258
|
}, children);
|
|
1529
|
-
}
|
|
2259
|
+
}
|
|
1530
2260
|
|
|
1531
|
-
|
|
1532
|
-
return /* @__PURE__ */ React.createElement(ResourceProvider, {
|
|
2261
|
+
function CollectionContext({ collection, children }) {
|
|
2262
|
+
return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
|
|
1533
2263
|
value: { collection }
|
|
1534
2264
|
}, children);
|
|
1535
|
-
}
|
|
2265
|
+
}
|
|
1536
2266
|
|
|
1537
|
-
|
|
1538
|
-
return /* @__PURE__ */ React.createElement(ResourceProvider, {
|
|
2267
|
+
function RangeContext({ range, children }) {
|
|
2268
|
+
return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
|
|
1539
2269
|
value: { range }
|
|
1540
2270
|
}, children);
|
|
1541
|
-
}
|
|
2271
|
+
}
|
|
1542
2272
|
|
|
1543
2273
|
function useAnnotationsAtTime(time, options = {}) {
|
|
1544
2274
|
const allAnnotations = usePaintingAnnotations(options);
|
|
@@ -1725,4 +2455,4 @@ function useStyleHelper() {
|
|
|
1725
2455
|
return useMemo(() => createStylesHelper(vault), [vault]);
|
|
1726
2456
|
}
|
|
1727
2457
|
|
|
1728
|
-
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 };
|
|
2458
|
+
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 };
|