react-native-readium 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/web/ReadiumView.js +31 -15
- package/lib/commonjs/web/ReadiumView.js.map +1 -1
- package/lib/commonjs/web/hooks/useReaderRef.js +3 -0
- package/lib/commonjs/web/hooks/useReaderRef.js.map +1 -1
- package/lib/module/web/ReadiumView.js +28 -14
- package/lib/module/web/ReadiumView.js.map +1 -1
- package/lib/module/web/hooks/useReaderRef.js +3 -0
- package/lib/module/web/hooks/useReaderRef.js.map +1 -1
- package/lib/typescript/web/ReadiumView.d.ts +4 -2
- package/package.json +1 -1
- package/src/web/ReadiumView.tsx +30 -8
- package/src/web/hooks/useReaderRef.ts +1 -0
|
@@ -5,21 +5,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.ReadiumView = void 0;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
12
|
var _hooks = require("./hooks");
|
|
13
13
|
|
|
14
|
-
function
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
|
|
18
|
+
const ReadiumView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
17
19
|
let {
|
|
18
20
|
file,
|
|
19
21
|
settings,
|
|
20
22
|
location,
|
|
21
23
|
onLocationChange,
|
|
22
|
-
onTableOfContents
|
|
24
|
+
onTableOfContents,
|
|
25
|
+
style = {},
|
|
26
|
+
height,
|
|
27
|
+
width
|
|
23
28
|
} = _ref;
|
|
24
29
|
const readerRef = (0, _hooks.useReaderRef)({
|
|
25
30
|
file,
|
|
@@ -27,8 +32,25 @@ const ReadiumView = _ref => {
|
|
|
27
32
|
onTableOfContents
|
|
28
33
|
});
|
|
29
34
|
const reader = readerRef.current;
|
|
35
|
+
(0, _react.useImperativeHandle)(ref, () => ({
|
|
36
|
+
nextPage: () => {
|
|
37
|
+
var _readerRef$current;
|
|
38
|
+
|
|
39
|
+
(_readerRef$current = readerRef.current) === null || _readerRef$current === void 0 ? void 0 : _readerRef$current.nextPage();
|
|
40
|
+
},
|
|
41
|
+
prevPage: () => {
|
|
42
|
+
var _readerRef$current2;
|
|
43
|
+
|
|
44
|
+
(_readerRef$current2 = readerRef.current) === null || _readerRef$current2 === void 0 ? void 0 : _readerRef$current2.previousPage();
|
|
45
|
+
}
|
|
46
|
+
}));
|
|
30
47
|
(0, _hooks.useSettingsObserver)(reader, settings);
|
|
31
48
|
(0, _hooks.useLocationObserver)(reader, location);
|
|
49
|
+
const mainStyle = { ...styles.maximize,
|
|
50
|
+
...style
|
|
51
|
+
};
|
|
52
|
+
if (height) mainStyle.height = height;
|
|
53
|
+
if (width) mainStyle.width = width;
|
|
32
54
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
33
55
|
style: styles.container
|
|
34
56
|
}, !reader && /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -36,11 +58,8 @@ const ReadiumView = _ref => {
|
|
|
36
58
|
}, "Loading reader..."), /*#__PURE__*/_react.default.createElement("div", {
|
|
37
59
|
id: "D2Reader-Container",
|
|
38
60
|
style: styles.d2Container
|
|
39
|
-
},
|
|
40
|
-
|
|
41
|
-
style: styles.button
|
|
42
|
-
}, "\u2039"), /*#__PURE__*/_react.default.createElement("main", {
|
|
43
|
-
style: styles.maximize,
|
|
61
|
+
}, /*#__PURE__*/_react.default.createElement("main", {
|
|
62
|
+
style: mainStyle,
|
|
44
63
|
tabIndex: -1,
|
|
45
64
|
id: "iframe-wrapper"
|
|
46
65
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -50,11 +69,8 @@ const ReadiumView = _ref => {
|
|
|
50
69
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
51
70
|
id: "reader-error",
|
|
52
71
|
className: "error"
|
|
53
|
-
}))
|
|
54
|
-
|
|
55
|
-
style: styles.button
|
|
56
|
-
}, "\u203A")));
|
|
57
|
-
};
|
|
72
|
+
}))));
|
|
73
|
+
});
|
|
58
74
|
|
|
59
75
|
exports.ReadiumView = ReadiumView;
|
|
60
76
|
|
|
@@ -69,7 +85,7 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
69
85
|
display: 'flex'
|
|
70
86
|
},
|
|
71
87
|
maximize: {
|
|
72
|
-
width: '
|
|
88
|
+
width: '100%',
|
|
73
89
|
height: '100%',
|
|
74
90
|
display: 'flex'
|
|
75
91
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ReadiumView.tsx"],"names":["ReadiumView","file","settings","location","onLocationChange","onTableOfContents","
|
|
1
|
+
{"version":3,"sources":["ReadiumView.tsx"],"names":["ReadiumView","React","forwardRef","ref","file","settings","location","onLocationChange","onTableOfContents","style","height","width","readerRef","reader","current","nextPage","prevPage","previousPage","mainStyle","styles","maximize","container","loader","d2Container","StyleSheet","create","display","button","fontSize","backgroundColor","border","textAlign","position","top"],"mappings":";;;;;;;AAAA;;AAEA;;AAGA;;;;;;AAMO,MAAMA,WAAW,gBAAGC,eAAMC,UAAN,CAGV,OASdC,GATc,KASN;AAAA,MATO;AAChBC,IAAAA,IADgB;AAEhBC,IAAAA,QAFgB;AAGhBC,IAAAA,QAHgB;AAIhBC,IAAAA,gBAJgB;AAKhBC,IAAAA,iBALgB;AAMhBC,IAAAA,KAAK,GAAG,EANQ;AAOhBC,IAAAA,MAPgB;AAQhBC,IAAAA;AARgB,GASP;AACT,QAAMC,SAAS,GAAG,yBAAa;AAC7BR,IAAAA,IAD6B;AAE7BG,IAAAA,gBAF6B;AAG7BC,IAAAA;AAH6B,GAAb,CAAlB;AAKA,QAAMK,MAAM,GAAGD,SAAS,CAACE,OAAzB;AAEA,kCAAoBX,GAApB,EAAyB,OAAO;AAC9BY,IAAAA,QAAQ,EAAE,MAAM;AAAA;;AACd,4BAAAH,SAAS,CAACE,OAAV,0EAAmBC,QAAnB;AACD,KAH6B;AAI9BC,IAAAA,QAAQ,EAAE,MAAM;AAAA;;AACd,6BAAAJ,SAAS,CAACE,OAAV,4EAAmBG,YAAnB;AACD;AAN6B,GAAP,CAAzB;AASA,kCAAoBJ,MAApB,EAA4BR,QAA5B;AACA,kCAAoBQ,MAApB,EAA4BP,QAA5B;AAEA,QAAMY,SAAS,GAAG,EAChB,GAAGC,MAAM,CAACC,QADM;AAEhB,OAAIX;AAFY,GAAlB;AAKA,MAAIC,MAAJ,EAAYQ,SAAS,CAACR,MAAV,GAAmBA,MAAnB;AACZ,MAAIC,KAAJ,EAAWO,SAAS,CAACP,KAAV,GAAkBA,KAAlB;AAEX,sBACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEQ,MAAM,CAACE;AAApB,KACG,CAACR,MAAD,iBAAW;AAAK,IAAA,KAAK,EAAEM,MAAM,CAACG;AAAnB,yBADd,eAEE;AAAK,IAAA,EAAE,EAAC,oBAAR;AAA6B,IAAA,KAAK,EAAEH,MAAM,CAACI;AAA3C,kBACE;AACE,IAAA,KAAK,EAAEL,SADT;AAEE,IAAA,QAAQ,EAAE,CAAC,CAFb;AAGE,IAAA,EAAE,EAAC;AAHL,kBAKE;AAAK,IAAA,EAAE,EAAC,gBAAR;AAAyB,IAAA,SAAS,EAAC,SAAnC;AAA6C,IAAA,KAAK,EAAEC,MAAM,CAACG;AAA3D,IALF,eAME;AAAK,IAAA,EAAE,EAAC,cAAR;AAAuB,IAAA,SAAS,EAAC;AAAjC,IANF,CADF,CAFF,CADF;AAeD,CAvD0B,CAApB;;;;AAyDP,MAAMH,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AACTV,IAAAA,KAAK,EAAE,MADE;AAETD,IAAAA,MAAM,EAAE;AAFC,GADoB;AAK/Ba,EAAAA,WAAW,EAAE;AACXZ,IAAAA,KAAK,EAAE,MADI;AAEXD,IAAAA,MAAM,EAAE,MAFG;AAGXgB,IAAAA,OAAO,EAAE;AAHE,GALkB;AAU/BN,EAAAA,QAAQ,EAAE;AACRT,IAAAA,KAAK,EAAE,MADC;AAERD,IAAAA,MAAM,EAAE,MAFA;AAGRgB,IAAAA,OAAO,EAAE;AAHD,GAVqB;AAe/BC,EAAAA,MAAM,EAAE;AACNhB,IAAAA,KAAK,EAAE,EADD;AAENiB,IAAAA,QAAQ,EAAE,GAFJ;AAGNC,IAAAA,eAAe,EAAE,aAHX;AAINC,IAAAA,MAAM,EAAE;AAJF,GAfuB;AAqB/BR,EAAAA,MAAM,EAAE;AACNX,IAAAA,KAAK,EAAE,MADD;AAEND,IAAAA,MAAM,EAAE,MAFF;AAGNqB,IAAAA,SAAS,EAAE,QAHL;AAINC,IAAAA,QAAQ,EAAE,UAJJ;AAKNC,IAAAA,GAAG,EAAE;AALC;AArBuB,CAAlB,CAAf","sourcesContent":["import React, { useImperativeHandle } from 'react';\nimport type { CSSProperties } from 'react';\nimport { View, StyleSheet } from 'react-native';\n\nimport type { ReadiumProps } from '../components/ReadiumView';\nimport {\n useReaderRef,\n useSettingsObserver,\n useLocationObserver,\n} from './hooks';\n\nexport const ReadiumView = React.forwardRef<{\n nextPage: () => void;\n prevPage: () => void;\n}, ReadiumProps>(({\n file,\n settings,\n location,\n onLocationChange,\n onTableOfContents,\n style = {},\n height,\n width,\n}, ref) => {\n const readerRef = useReaderRef({\n file,\n onLocationChange,\n onTableOfContents,\n });\n const reader = readerRef.current;\n\n useImperativeHandle(ref, () => ({\n nextPage: () => {\n readerRef.current?.nextPage();\n },\n prevPage: () => {\n readerRef.current?.previousPage();\n },\n }));\n\n useSettingsObserver(reader, settings);\n useLocationObserver(reader, location);\n\n const mainStyle = {\n ...styles.maximize,\n ...(style as CSSProperties),\n };\n\n if (height) mainStyle.height = height;\n if (width) mainStyle.width = width;\n\n return (\n <View style={styles.container}>\n {!reader && <div style={styles.loader}>Loading reader...</div>}\n <div id=\"D2Reader-Container\" style={styles.d2Container}>\n <main\n style={mainStyle}\n tabIndex={-1}\n id=\"iframe-wrapper\"\n >\n <div id=\"reader-loading\" className=\"loading\" style={styles.loader}></div>\n <div id=\"reader-error\" className=\"error\"></div>\n </main>\n </div>\n </View>\n );\n});\n\nconst styles = StyleSheet.create({\n container: {\n width: '100%',\n height: '100%',\n },\n d2Container: {\n width: '100%',\n height: '100%',\n display: 'flex',\n },\n maximize: {\n width: '100%',\n height: '100%',\n display: 'flex',\n },\n button: {\n width: 50,\n fontSize: 100,\n backgroundColor: 'transparent',\n border: 'none',\n },\n loader: {\n width: '100%',\n height: '100%',\n textAlign: 'center',\n position: 'relative',\n top: 'calc(50% - 10px)',\n },\n});\n"]}
|
|
@@ -22,6 +22,9 @@ const useReaderRef = _ref => {
|
|
|
22
22
|
_reader.default.load({
|
|
23
23
|
url: new URL(file.url),
|
|
24
24
|
lastReadingPosition: file.initialLocation,
|
|
25
|
+
userSettings: {
|
|
26
|
+
verticalScroll: false
|
|
27
|
+
},
|
|
25
28
|
api: {
|
|
26
29
|
updateCurrentLocation: async location => {
|
|
27
30
|
if (onLocationChange) onLocationChange(location);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReaderRef.ts"],"names":["useReaderRef","file","onLocationChange","onTableOfContents","readerRef","D2Reader","load","url","URL","lastReadingPosition","initialLocation","api","updateCurrentLocation","location","injectables","then","r","tableOfContents","current","type","r2before","r2default","r2after"],"mappings":";;;;;;;AAAA;;AACA;;;;AAKO,MAAMA,YAAY,GAAG,QAIkD;AAAA,MAJjD;AAC3BC,IAAAA,IAD2B;AAE3BC,IAAAA,gBAF2B;AAG3BC,IAAAA;AAH2B,GAIiD;AAC5E,QAAMC,SAAS,GAAG,mBAAwB,IAAxB,CAAlB;AAEA,wBAAU,MAAM;AACdC,oBAASC,IAAT,CAAc;AACZC,MAAAA,GAAG,EAAE,IAAIC,GAAJ,CAAQP,IAAI,CAACM,GAAb,CADO;AAEZE,MAAAA,mBAAmB,EAAER,IAAI,CAACS,eAFd;AAGZC,MAAAA,GAAG,EAAE;AACHC,QAAAA,qBAAqB,EAAE,MAAOC,QAAP,IAA6B;AAClD,
|
|
1
|
+
{"version":3,"sources":["useReaderRef.ts"],"names":["useReaderRef","file","onLocationChange","onTableOfContents","readerRef","D2Reader","load","url","URL","lastReadingPosition","initialLocation","userSettings","verticalScroll","api","updateCurrentLocation","location","injectables","then","r","tableOfContents","current","type","r2before","r2default","r2after"],"mappings":";;;;;;;AAAA;;AACA;;;;AAKO,MAAMA,YAAY,GAAG,QAIkD;AAAA,MAJjD;AAC3BC,IAAAA,IAD2B;AAE3BC,IAAAA,gBAF2B;AAG3BC,IAAAA;AAH2B,GAIiD;AAC5E,QAAMC,SAAS,GAAG,mBAAwB,IAAxB,CAAlB;AAEA,wBAAU,MAAM;AACdC,oBAASC,IAAT,CAAc;AACZC,MAAAA,GAAG,EAAE,IAAIC,GAAJ,CAAQP,IAAI,CAACM,GAAb,CADO;AAEZE,MAAAA,mBAAmB,EAAER,IAAI,CAACS,eAFd;AAGZC,MAAAA,YAAY,EAAE;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAHF;AAIZC,MAAAA,GAAG,EAAE;AACHC,QAAAA,qBAAqB,EAAE,MAAOC,QAAP,IAA6B;AAClD,cAAIb,gBAAJ,EAAsBA,gBAAgB,CAACa,QAAD,CAAhB;AACtB,iBAAOA,QAAP;AACD;AAJE,OAJO;AAUZC,MAAAA,WAAW,EAAEA;AAVD,KAAd,EAWGC,IAXH,CAWSC,CAAD,IAAO;AACb,UAAIf,iBAAJ,EAAuB;AACrBA,QAAAA,iBAAiB,CAACe,CAAC,CAACC,eAAH,CAAjB;AACD;;AACDf,MAAAA,SAAS,CAACgB,OAAV,GAAoBF,CAApB;AACD,KAhBD;AAiBD,GAlBD,EAkBG,EAlBH;AAoBA,SAAOd,SAAP;AACD,CA5BM,C,CA8BP;AACA;AACA;;;;AACA,MAAMY,WAAkB,GAAG,CACzB;AACEK,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,iGAFP;AAGEe,EAAAA,QAAQ,EAAE;AAHZ,CADyB,EAMzB;AACED,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,kGAFP;AAGEgB,EAAAA,SAAS,EAAE;AAHb,CANyB,EAWzB;AACEF,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,gGAFP;AAGEiB,EAAAA,OAAO,EAAE;AAHX,CAXyB,CAA3B","sourcesContent":["import { useEffect, useRef } from 'react';\nimport D2Reader from '@d-i-t-a/reader';\n\nimport type { ReadiumProps } from '../../components/ReadiumView';\nimport type { Locator } from '../../interfaces';\n\nexport const useReaderRef = ({\n file,\n onLocationChange,\n onTableOfContents,\n}: Pick<ReadiumProps, 'file' | 'onLocationChange' | 'onTableOfContents' >) => {\n const readerRef = useRef<D2Reader | null>(null);\n\n useEffect(() => {\n D2Reader.load({\n url: new URL(file.url),\n lastReadingPosition: file.initialLocation,\n userSettings: { verticalScroll: false },\n api: {\n updateCurrentLocation: async (location: Locator) => {\n if (onLocationChange) onLocationChange(location);\n return location;\n },\n },\n injectables: injectables,\n }).then((r) => {\n if (onTableOfContents) {\n onTableOfContents(r.tableOfContents);\n }\n readerRef.current = r;\n });\n }, []);\n\n return readerRef\n};\n\n// NOTE: right now we're serving these through statically.io, which is just\n// pulling them from Github... Might not be the best way and maybe we should\n// consider bundling them with the library.\nconst injectables: any[] = [\n {\n type: \"style\",\n url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-before.css\",\n r2before: true,\n },\n {\n type: \"style\",\n url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-default.css\",\n r2default: true,\n },\n {\n type: \"style\",\n url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-after.css\",\n r2after: true,\n },\n];\n\n"]}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useImperativeHandle } from 'react';
|
|
2
2
|
import { View, StyleSheet } from 'react-native';
|
|
3
3
|
import { useReaderRef, useSettingsObserver, useLocationObserver } from './hooks';
|
|
4
|
-
export const ReadiumView = _ref => {
|
|
4
|
+
export const ReadiumView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
5
5
|
let {
|
|
6
6
|
file,
|
|
7
7
|
settings,
|
|
8
8
|
location,
|
|
9
9
|
onLocationChange,
|
|
10
|
-
onTableOfContents
|
|
10
|
+
onTableOfContents,
|
|
11
|
+
style = {},
|
|
12
|
+
height,
|
|
13
|
+
width
|
|
11
14
|
} = _ref;
|
|
12
15
|
const readerRef = useReaderRef({
|
|
13
16
|
file,
|
|
@@ -15,8 +18,25 @@ export const ReadiumView = _ref => {
|
|
|
15
18
|
onTableOfContents
|
|
16
19
|
});
|
|
17
20
|
const reader = readerRef.current;
|
|
21
|
+
useImperativeHandle(ref, () => ({
|
|
22
|
+
nextPage: () => {
|
|
23
|
+
var _readerRef$current;
|
|
24
|
+
|
|
25
|
+
(_readerRef$current = readerRef.current) === null || _readerRef$current === void 0 ? void 0 : _readerRef$current.nextPage();
|
|
26
|
+
},
|
|
27
|
+
prevPage: () => {
|
|
28
|
+
var _readerRef$current2;
|
|
29
|
+
|
|
30
|
+
(_readerRef$current2 = readerRef.current) === null || _readerRef$current2 === void 0 ? void 0 : _readerRef$current2.previousPage();
|
|
31
|
+
}
|
|
32
|
+
}));
|
|
18
33
|
useSettingsObserver(reader, settings);
|
|
19
34
|
useLocationObserver(reader, location);
|
|
35
|
+
const mainStyle = { ...styles.maximize,
|
|
36
|
+
...style
|
|
37
|
+
};
|
|
38
|
+
if (height) mainStyle.height = height;
|
|
39
|
+
if (width) mainStyle.width = width;
|
|
20
40
|
return /*#__PURE__*/React.createElement(View, {
|
|
21
41
|
style: styles.container
|
|
22
42
|
}, !reader && /*#__PURE__*/React.createElement("div", {
|
|
@@ -24,11 +44,8 @@ export const ReadiumView = _ref => {
|
|
|
24
44
|
}, "Loading reader..."), /*#__PURE__*/React.createElement("div", {
|
|
25
45
|
id: "D2Reader-Container",
|
|
26
46
|
style: styles.d2Container
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
style: styles.button
|
|
30
|
-
}, "\u2039"), /*#__PURE__*/React.createElement("main", {
|
|
31
|
-
style: styles.maximize,
|
|
47
|
+
}, /*#__PURE__*/React.createElement("main", {
|
|
48
|
+
style: mainStyle,
|
|
32
49
|
tabIndex: -1,
|
|
33
50
|
id: "iframe-wrapper"
|
|
34
51
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -38,11 +55,8 @@ export const ReadiumView = _ref => {
|
|
|
38
55
|
}), /*#__PURE__*/React.createElement("div", {
|
|
39
56
|
id: "reader-error",
|
|
40
57
|
className: "error"
|
|
41
|
-
}))
|
|
42
|
-
|
|
43
|
-
style: styles.button
|
|
44
|
-
}, "\u203A")));
|
|
45
|
-
};
|
|
58
|
+
}))));
|
|
59
|
+
});
|
|
46
60
|
const styles = StyleSheet.create({
|
|
47
61
|
container: {
|
|
48
62
|
width: '100%',
|
|
@@ -54,7 +68,7 @@ const styles = StyleSheet.create({
|
|
|
54
68
|
display: 'flex'
|
|
55
69
|
},
|
|
56
70
|
maximize: {
|
|
57
|
-
width: '
|
|
71
|
+
width: '100%',
|
|
58
72
|
height: '100%',
|
|
59
73
|
display: 'flex'
|
|
60
74
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ReadiumView.tsx"],"names":["React","View","StyleSheet","useReaderRef","useSettingsObserver","useLocationObserver","ReadiumView","file","settings","location","onLocationChange","onTableOfContents","
|
|
1
|
+
{"version":3,"sources":["ReadiumView.tsx"],"names":["React","useImperativeHandle","View","StyleSheet","useReaderRef","useSettingsObserver","useLocationObserver","ReadiumView","forwardRef","ref","file","settings","location","onLocationChange","onTableOfContents","style","height","width","readerRef","reader","current","nextPage","prevPage","previousPage","mainStyle","styles","maximize","container","loader","d2Container","create","display","button","fontSize","backgroundColor","border","textAlign","position","top"],"mappings":"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","sourcesContent":["import React, { useImperativeHandle } from 'react';\nimport type { CSSProperties } from 'react';\nimport { View, StyleSheet } from 'react-native';\n\nimport type { ReadiumProps } from '../components/ReadiumView';\nimport {\n useReaderRef,\n useSettingsObserver,\n useLocationObserver,\n} from './hooks';\n\nexport const ReadiumView = React.forwardRef<{\n nextPage: () => void;\n prevPage: () => void;\n}, ReadiumProps>(({\n file,\n settings,\n location,\n onLocationChange,\n onTableOfContents,\n style = {},\n height,\n width,\n}, ref) => {\n const readerRef = useReaderRef({\n file,\n onLocationChange,\n onTableOfContents,\n });\n const reader = readerRef.current;\n\n useImperativeHandle(ref, () => ({\n nextPage: () => {\n readerRef.current?.nextPage();\n },\n prevPage: () => {\n readerRef.current?.previousPage();\n },\n }));\n\n useSettingsObserver(reader, settings);\n useLocationObserver(reader, location);\n\n const mainStyle = {\n ...styles.maximize,\n ...(style as CSSProperties),\n };\n\n if (height) mainStyle.height = height;\n if (width) mainStyle.width = width;\n\n return (\n <View style={styles.container}>\n {!reader && <div style={styles.loader}>Loading reader...</div>}\n <div id=\"D2Reader-Container\" style={styles.d2Container}>\n <main\n style={mainStyle}\n tabIndex={-1}\n id=\"iframe-wrapper\"\n >\n <div id=\"reader-loading\" className=\"loading\" style={styles.loader}></div>\n <div id=\"reader-error\" className=\"error\"></div>\n </main>\n </div>\n </View>\n );\n});\n\nconst styles = StyleSheet.create({\n container: {\n width: '100%',\n height: '100%',\n },\n d2Container: {\n width: '100%',\n height: '100%',\n display: 'flex',\n },\n maximize: {\n width: '100%',\n height: '100%',\n display: 'flex',\n },\n button: {\n width: 50,\n fontSize: 100,\n backgroundColor: 'transparent',\n border: 'none',\n },\n loader: {\n width: '100%',\n height: '100%',\n textAlign: 'center',\n position: 'relative',\n top: 'calc(50% - 10px)',\n },\n});\n"]}
|
|
@@ -11,6 +11,9 @@ export const useReaderRef = _ref => {
|
|
|
11
11
|
D2Reader.load({
|
|
12
12
|
url: new URL(file.url),
|
|
13
13
|
lastReadingPosition: file.initialLocation,
|
|
14
|
+
userSettings: {
|
|
15
|
+
verticalScroll: false
|
|
16
|
+
},
|
|
14
17
|
api: {
|
|
15
18
|
updateCurrentLocation: async location => {
|
|
16
19
|
if (onLocationChange) onLocationChange(location);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReaderRef.ts"],"names":["useEffect","useRef","D2Reader","useReaderRef","file","onLocationChange","onTableOfContents","readerRef","load","url","URL","lastReadingPosition","initialLocation","api","updateCurrentLocation","location","injectables","then","r","tableOfContents","current","type","r2before","r2default","r2after"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,OAAlC;AACA,OAAOC,QAAP,MAAqB,iBAArB;AAKA,OAAO,MAAMC,YAAY,GAAG,QAIkD;AAAA,MAJjD;AAC3BC,IAAAA,IAD2B;AAE3BC,IAAAA,gBAF2B;AAG3BC,IAAAA;AAH2B,GAIiD;AAC5E,QAAMC,SAAS,GAAGN,MAAM,CAAkB,IAAlB,CAAxB;AAEAD,EAAAA,SAAS,CAAC,MAAM;AACdE,IAAAA,QAAQ,CAACM,IAAT,CAAc;AACZC,MAAAA,GAAG,EAAE,IAAIC,GAAJ,CAAQN,IAAI,CAACK,GAAb,CADO;AAEZE,MAAAA,mBAAmB,EAAEP,IAAI,CAACQ,eAFd;AAGZC,MAAAA,GAAG,EAAE;AACHC,QAAAA,qBAAqB,EAAE,MAAOC,QAAP,IAA6B;AAClD,
|
|
1
|
+
{"version":3,"sources":["useReaderRef.ts"],"names":["useEffect","useRef","D2Reader","useReaderRef","file","onLocationChange","onTableOfContents","readerRef","load","url","URL","lastReadingPosition","initialLocation","userSettings","verticalScroll","api","updateCurrentLocation","location","injectables","then","r","tableOfContents","current","type","r2before","r2default","r2after"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,OAAlC;AACA,OAAOC,QAAP,MAAqB,iBAArB;AAKA,OAAO,MAAMC,YAAY,GAAG,QAIkD;AAAA,MAJjD;AAC3BC,IAAAA,IAD2B;AAE3BC,IAAAA,gBAF2B;AAG3BC,IAAAA;AAH2B,GAIiD;AAC5E,QAAMC,SAAS,GAAGN,MAAM,CAAkB,IAAlB,CAAxB;AAEAD,EAAAA,SAAS,CAAC,MAAM;AACdE,IAAAA,QAAQ,CAACM,IAAT,CAAc;AACZC,MAAAA,GAAG,EAAE,IAAIC,GAAJ,CAAQN,IAAI,CAACK,GAAb,CADO;AAEZE,MAAAA,mBAAmB,EAAEP,IAAI,CAACQ,eAFd;AAGZC,MAAAA,YAAY,EAAE;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAHF;AAIZC,MAAAA,GAAG,EAAE;AACHC,QAAAA,qBAAqB,EAAE,MAAOC,QAAP,IAA6B;AAClD,cAAIZ,gBAAJ,EAAsBA,gBAAgB,CAACY,QAAD,CAAhB;AACtB,iBAAOA,QAAP;AACD;AAJE,OAJO;AAUZC,MAAAA,WAAW,EAAEA;AAVD,KAAd,EAWGC,IAXH,CAWSC,CAAD,IAAO;AACb,UAAId,iBAAJ,EAAuB;AACrBA,QAAAA,iBAAiB,CAACc,CAAC,CAACC,eAAH,CAAjB;AACD;;AACDd,MAAAA,SAAS,CAACe,OAAV,GAAoBF,CAApB;AACD,KAhBD;AAiBD,GAlBQ,EAkBN,EAlBM,CAAT;AAoBA,SAAOb,SAAP;AACD,CA5BM,C,CA8BP;AACA;AACA;;AACA,MAAMW,WAAkB,GAAG,CACzB;AACEK,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,iGAFP;AAGEe,EAAAA,QAAQ,EAAE;AAHZ,CADyB,EAMzB;AACED,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,kGAFP;AAGEgB,EAAAA,SAAS,EAAE;AAHb,CANyB,EAWzB;AACEF,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,gGAFP;AAGEiB,EAAAA,OAAO,EAAE;AAHX,CAXyB,CAA3B","sourcesContent":["import { useEffect, useRef } from 'react';\nimport D2Reader from '@d-i-t-a/reader';\n\nimport type { ReadiumProps } from '../../components/ReadiumView';\nimport type { Locator } from '../../interfaces';\n\nexport const useReaderRef = ({\n file,\n onLocationChange,\n onTableOfContents,\n}: Pick<ReadiumProps, 'file' | 'onLocationChange' | 'onTableOfContents' >) => {\n const readerRef = useRef<D2Reader | null>(null);\n\n useEffect(() => {\n D2Reader.load({\n url: new URL(file.url),\n lastReadingPosition: file.initialLocation,\n userSettings: { verticalScroll: false },\n api: {\n updateCurrentLocation: async (location: Locator) => {\n if (onLocationChange) onLocationChange(location);\n return location;\n },\n },\n injectables: injectables,\n }).then((r) => {\n if (onTableOfContents) {\n onTableOfContents(r.tableOfContents);\n }\n readerRef.current = r;\n });\n }, []);\n\n return readerRef\n};\n\n// NOTE: right now we're serving these through statically.io, which is just\n// pulling them from Github... Might not be the best way and maybe we should\n// consider bundling them with the library.\nconst injectables: any[] = [\n {\n type: \"style\",\n url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-before.css\",\n r2before: true,\n },\n {\n type: \"style\",\n url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-default.css\",\n r2default: true,\n },\n {\n type: \"style\",\n url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-after.css\",\n r2after: true,\n },\n];\n\n"]}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import
|
|
3
|
-
|
|
2
|
+
export declare const ReadiumView: React.ForwardRefExoticComponent<Pick<import("../components/BaseReadiumView").BaseReadiumViewProps, "onLocationChange" | "onTableOfContents" | "settings" | "file" | "location" | "style" | "height" | "width"> & React.RefAttributes<{
|
|
3
|
+
nextPage: () => void;
|
|
4
|
+
prevPage: () => void;
|
|
5
|
+
}>>;
|
package/package.json
CHANGED
package/src/web/ReadiumView.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useImperativeHandle } from 'react';
|
|
2
|
+
import type { CSSProperties } from 'react';
|
|
2
3
|
import { View, StyleSheet } from 'react-native';
|
|
3
4
|
|
|
4
5
|
import type { ReadiumProps } from '../components/ReadiumView';
|
|
@@ -8,13 +9,19 @@ import {
|
|
|
8
9
|
useLocationObserver,
|
|
9
10
|
} from './hooks';
|
|
10
11
|
|
|
11
|
-
export const ReadiumView
|
|
12
|
+
export const ReadiumView = React.forwardRef<{
|
|
13
|
+
nextPage: () => void;
|
|
14
|
+
prevPage: () => void;
|
|
15
|
+
}, ReadiumProps>(({
|
|
12
16
|
file,
|
|
13
17
|
settings,
|
|
14
18
|
location,
|
|
15
19
|
onLocationChange,
|
|
16
20
|
onTableOfContents,
|
|
17
|
-
|
|
21
|
+
style = {},
|
|
22
|
+
height,
|
|
23
|
+
width,
|
|
24
|
+
}, ref) => {
|
|
18
25
|
const readerRef = useReaderRef({
|
|
19
26
|
file,
|
|
20
27
|
onLocationChange,
|
|
@@ -22,27 +29,42 @@ export const ReadiumView: React.FC<ReadiumProps> = ({
|
|
|
22
29
|
});
|
|
23
30
|
const reader = readerRef.current;
|
|
24
31
|
|
|
32
|
+
useImperativeHandle(ref, () => ({
|
|
33
|
+
nextPage: () => {
|
|
34
|
+
readerRef.current?.nextPage();
|
|
35
|
+
},
|
|
36
|
+
prevPage: () => {
|
|
37
|
+
readerRef.current?.previousPage();
|
|
38
|
+
},
|
|
39
|
+
}));
|
|
40
|
+
|
|
25
41
|
useSettingsObserver(reader, settings);
|
|
26
42
|
useLocationObserver(reader, location);
|
|
27
43
|
|
|
44
|
+
const mainStyle = {
|
|
45
|
+
...styles.maximize,
|
|
46
|
+
...(style as CSSProperties),
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
if (height) mainStyle.height = height;
|
|
50
|
+
if (width) mainStyle.width = width;
|
|
51
|
+
|
|
28
52
|
return (
|
|
29
53
|
<View style={styles.container}>
|
|
30
54
|
{!reader && <div style={styles.loader}>Loading reader...</div>}
|
|
31
55
|
<div id="D2Reader-Container" style={styles.d2Container}>
|
|
32
|
-
{reader && <button onClick={reader.previousPage} style={styles.button}>‹</button>}
|
|
33
56
|
<main
|
|
34
|
-
style={
|
|
57
|
+
style={mainStyle}
|
|
35
58
|
tabIndex={-1}
|
|
36
59
|
id="iframe-wrapper"
|
|
37
60
|
>
|
|
38
61
|
<div id="reader-loading" className="loading" style={styles.loader}></div>
|
|
39
62
|
<div id="reader-error" className="error"></div>
|
|
40
63
|
</main>
|
|
41
|
-
{reader && <button onClick={reader.nextPage} style={styles.button}>›</button>}
|
|
42
64
|
</div>
|
|
43
65
|
</View>
|
|
44
66
|
);
|
|
45
|
-
};
|
|
67
|
+
});
|
|
46
68
|
|
|
47
69
|
const styles = StyleSheet.create({
|
|
48
70
|
container: {
|
|
@@ -55,7 +77,7 @@ const styles = StyleSheet.create({
|
|
|
55
77
|
display: 'flex',
|
|
56
78
|
},
|
|
57
79
|
maximize: {
|
|
58
|
-
width: '
|
|
80
|
+
width: '100%',
|
|
59
81
|
height: '100%',
|
|
60
82
|
display: 'flex',
|
|
61
83
|
},
|
|
@@ -15,6 +15,7 @@ export const useReaderRef = ({
|
|
|
15
15
|
D2Reader.load({
|
|
16
16
|
url: new URL(file.url),
|
|
17
17
|
lastReadingPosition: file.initialLocation,
|
|
18
|
+
userSettings: { verticalScroll: false },
|
|
18
19
|
api: {
|
|
19
20
|
updateCurrentLocation: async (location: Locator) => {
|
|
20
21
|
if (onLocationChange) onLocationChange(location);
|