@page-speed/lightbox 0.0.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -1
- package/dist/components/Layouts/CustomSlideLayout.d.ts +15 -0
- package/dist/components/Layouts/FullscreenLayout.d.ts +15 -0
- package/dist/components/Layouts/InlineLayout.d.ts +15 -0
- package/dist/components/Layouts/VerticalSplitLayout.d.ts +16 -0
- package/dist/components/LightboxContent.d.ts +3 -2
- package/dist/components/index.css +161 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.js +973 -155
- package/dist/index.cjs +977 -159
- package/dist/index.css +161 -0
- package/dist/index.js +977 -159
- package/dist/renderers/ImageRenderer.d.ts +7 -6
- package/dist/renderers/index.css +161 -0
- package/dist/renderers/index.js +763 -95
- package/dist/types.d.ts +21 -0
- package/package.json +2 -1
package/dist/index.cjs
CHANGED
|
@@ -979,7 +979,7 @@ var require_react_development = __commonJS({
|
|
|
979
979
|
}
|
|
980
980
|
return lazyType;
|
|
981
981
|
}
|
|
982
|
-
function
|
|
982
|
+
function forwardRef2(render) {
|
|
983
983
|
{
|
|
984
984
|
if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
|
|
985
985
|
error("forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...)).");
|
|
@@ -1040,7 +1040,7 @@ var require_react_development = __commonJS({
|
|
|
1040
1040
|
}
|
|
1041
1041
|
return false;
|
|
1042
1042
|
}
|
|
1043
|
-
function
|
|
1043
|
+
function memo2(type, compare) {
|
|
1044
1044
|
{
|
|
1045
1045
|
if (!isValidElementType(type)) {
|
|
1046
1046
|
error("memo: The first argument must be a component. Instead received: %s", type === null ? "null" : typeof type);
|
|
@@ -1100,11 +1100,11 @@ var require_react_development = __commonJS({
|
|
|
1100
1100
|
var dispatcher = resolveDispatcher();
|
|
1101
1101
|
return dispatcher.useReducer(reducer, initialArg, init);
|
|
1102
1102
|
}
|
|
1103
|
-
function
|
|
1103
|
+
function useRef5(initialValue) {
|
|
1104
1104
|
var dispatcher = resolveDispatcher();
|
|
1105
1105
|
return dispatcher.useRef(initialValue);
|
|
1106
1106
|
}
|
|
1107
|
-
function
|
|
1107
|
+
function useEffect10(create, deps) {
|
|
1108
1108
|
var dispatcher = resolveDispatcher();
|
|
1109
1109
|
return dispatcher.useEffect(create, deps);
|
|
1110
1110
|
}
|
|
@@ -1120,11 +1120,11 @@ var require_react_development = __commonJS({
|
|
|
1120
1120
|
var dispatcher = resolveDispatcher();
|
|
1121
1121
|
return dispatcher.useCallback(callback, deps);
|
|
1122
1122
|
}
|
|
1123
|
-
function
|
|
1123
|
+
function useMemo4(create, deps) {
|
|
1124
1124
|
var dispatcher = resolveDispatcher();
|
|
1125
1125
|
return dispatcher.useMemo(create, deps);
|
|
1126
1126
|
}
|
|
1127
|
-
function
|
|
1127
|
+
function useImperativeHandle2(ref, create, deps) {
|
|
1128
1128
|
var dispatcher = resolveDispatcher();
|
|
1129
1129
|
return dispatcher.useImperativeHandle(ref, create, deps);
|
|
1130
1130
|
}
|
|
@@ -1877,24 +1877,24 @@ var require_react_development = __commonJS({
|
|
|
1877
1877
|
exports2.createElement = createElement$1;
|
|
1878
1878
|
exports2.createFactory = createFactory;
|
|
1879
1879
|
exports2.createRef = createRef;
|
|
1880
|
-
exports2.forwardRef =
|
|
1880
|
+
exports2.forwardRef = forwardRef2;
|
|
1881
1881
|
exports2.isValidElement = isValidElement;
|
|
1882
1882
|
exports2.lazy = lazy;
|
|
1883
|
-
exports2.memo =
|
|
1883
|
+
exports2.memo = memo2;
|
|
1884
1884
|
exports2.startTransition = startTransition;
|
|
1885
1885
|
exports2.unstable_act = act;
|
|
1886
1886
|
exports2.useCallback = useCallback7;
|
|
1887
1887
|
exports2.useContext = useContext;
|
|
1888
1888
|
exports2.useDebugValue = useDebugValue;
|
|
1889
1889
|
exports2.useDeferredValue = useDeferredValue;
|
|
1890
|
-
exports2.useEffect =
|
|
1890
|
+
exports2.useEffect = useEffect10;
|
|
1891
1891
|
exports2.useId = useId;
|
|
1892
|
-
exports2.useImperativeHandle =
|
|
1892
|
+
exports2.useImperativeHandle = useImperativeHandle2;
|
|
1893
1893
|
exports2.useInsertionEffect = useInsertionEffect;
|
|
1894
1894
|
exports2.useLayoutEffect = useLayoutEffect;
|
|
1895
|
-
exports2.useMemo =
|
|
1895
|
+
exports2.useMemo = useMemo4;
|
|
1896
1896
|
exports2.useReducer = useReducer;
|
|
1897
|
-
exports2.useRef =
|
|
1897
|
+
exports2.useRef = useRef5;
|
|
1898
1898
|
exports2.useState = useState9;
|
|
1899
1899
|
exports2.useSyncExternalStore = useSyncExternalStore;
|
|
1900
1900
|
exports2.useTransition = useTransition;
|
|
@@ -2802,11 +2802,11 @@ var require_react_jsx_runtime_development = __commonJS({
|
|
|
2802
2802
|
return jsxWithValidation(type, props, key, false);
|
|
2803
2803
|
}
|
|
2804
2804
|
}
|
|
2805
|
-
var
|
|
2806
|
-
var
|
|
2805
|
+
var jsx15 = jsxWithValidationDynamic;
|
|
2806
|
+
var jsxs11 = jsxWithValidationStatic;
|
|
2807
2807
|
exports2.Fragment = REACT_FRAGMENT_TYPE;
|
|
2808
|
-
exports2.jsx =
|
|
2809
|
-
exports2.jsxs =
|
|
2808
|
+
exports2.jsx = jsx15;
|
|
2809
|
+
exports2.jsxs = jsxs11;
|
|
2810
2810
|
})();
|
|
2811
2811
|
}
|
|
2812
2812
|
}
|
|
@@ -20878,11 +20878,11 @@ __export(dist_exports, {
|
|
|
20878
20878
|
useZoom: () => useZoom
|
|
20879
20879
|
});
|
|
20880
20880
|
function usePDFDocument(url, onError) {
|
|
20881
|
-
const [document2, setDocument] = (0,
|
|
20882
|
-
const [loading, setLoading] = (0,
|
|
20883
|
-
const [error, setError] = (0,
|
|
20884
|
-
const [pdfDoc, setPdfDoc] = (0,
|
|
20885
|
-
(0,
|
|
20881
|
+
const [document2, setDocument] = (0, import_react9.useState)(null);
|
|
20882
|
+
const [loading, setLoading] = (0, import_react9.useState)(true);
|
|
20883
|
+
const [error, setError] = (0, import_react9.useState)(null);
|
|
20884
|
+
const [pdfDoc, setPdfDoc] = (0, import_react9.useState)(null);
|
|
20885
|
+
(0, import_react9.useEffect)(() => {
|
|
20886
20886
|
if (!url) return;
|
|
20887
20887
|
setLoading(true);
|
|
20888
20888
|
setError(null);
|
|
@@ -20929,17 +20929,17 @@ function usePageState({
|
|
|
20929
20929
|
totalPages,
|
|
20930
20930
|
initialPage = 1
|
|
20931
20931
|
}) {
|
|
20932
|
-
const [currentPage, setCurrentPage] = (0,
|
|
20932
|
+
const [currentPage, setCurrentPage] = (0, import_react10.useState)(
|
|
20933
20933
|
Math.max(1, Math.min(initialPage, totalPages))
|
|
20934
20934
|
);
|
|
20935
|
-
const goToPage = (0,
|
|
20935
|
+
const goToPage = (0, import_react10.useCallback)((page) => {
|
|
20936
20936
|
const validPage = Math.max(1, Math.min(page, totalPages));
|
|
20937
20937
|
setCurrentPage(validPage);
|
|
20938
20938
|
}, [totalPages]);
|
|
20939
|
-
const nextPage = (0,
|
|
20939
|
+
const nextPage = (0, import_react10.useCallback)(() => {
|
|
20940
20940
|
goToPage(currentPage + 1);
|
|
20941
20941
|
}, [currentPage, goToPage]);
|
|
20942
|
-
const prevPage = (0,
|
|
20942
|
+
const prevPage = (0, import_react10.useCallback)(() => {
|
|
20943
20943
|
goToPage(currentPage - 1);
|
|
20944
20944
|
}, [currentPage, goToPage]);
|
|
20945
20945
|
return {
|
|
@@ -20952,10 +20952,10 @@ function usePageState({
|
|
|
20952
20952
|
};
|
|
20953
20953
|
}
|
|
20954
20954
|
function usePageRenderer(pdfDoc) {
|
|
20955
|
-
const cacheRef = (0,
|
|
20956
|
-
const [rendering, setRendering] = (0,
|
|
20957
|
-
const [pageInfo, setPageInfo] = (0,
|
|
20958
|
-
const renderPage = (0,
|
|
20955
|
+
const cacheRef = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
|
|
20956
|
+
const [rendering, setRendering] = (0, import_react11.useState)(false);
|
|
20957
|
+
const [pageInfo, setPageInfo] = (0, import_react11.useState)(null);
|
|
20958
|
+
const renderPage = (0, import_react11.useCallback)(
|
|
20959
20959
|
async (pageNumber, scale = DEFAULT_SCALE, rotation = 0) => {
|
|
20960
20960
|
if (!pdfDoc) return null;
|
|
20961
20961
|
try {
|
|
@@ -21014,21 +21014,21 @@ function usePageRenderer(pdfDoc) {
|
|
|
21014
21014
|
return { renderPage, rendering, pageInfo };
|
|
21015
21015
|
}
|
|
21016
21016
|
function useZoom(initialZoom = 1.5) {
|
|
21017
|
-
const [zoomLevel, setZoomLevel] = (0,
|
|
21017
|
+
const [zoomLevel, setZoomLevel] = (0, import_react12.useState)(
|
|
21018
21018
|
typeof initialZoom === "number" ? initialZoom : 1.5
|
|
21019
21019
|
);
|
|
21020
|
-
const [zoomMode, setZoomMode] = (0,
|
|
21020
|
+
const [zoomMode, setZoomMode] = (0, import_react12.useState)(
|
|
21021
21021
|
typeof initialZoom === "string" ? initialZoom : "custom"
|
|
21022
21022
|
);
|
|
21023
|
-
const zoomIn = (0,
|
|
21023
|
+
const zoomIn = (0, import_react12.useCallback)(() => {
|
|
21024
21024
|
setZoomLevel((prev) => Math.min(MAX_ZOOM, prev + ZOOM_STEP));
|
|
21025
21025
|
setZoomMode("custom");
|
|
21026
21026
|
}, []);
|
|
21027
|
-
const zoomOut = (0,
|
|
21027
|
+
const zoomOut = (0, import_react12.useCallback)(() => {
|
|
21028
21028
|
setZoomLevel((prev) => Math.max(MIN_ZOOM, prev - ZOOM_STEP));
|
|
21029
21029
|
setZoomMode("custom");
|
|
21030
21030
|
}, []);
|
|
21031
|
-
const setZoom = (0,
|
|
21031
|
+
const setZoom = (0, import_react12.useCallback)((level) => {
|
|
21032
21032
|
if (typeof level === "number") {
|
|
21033
21033
|
setZoomLevel(Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, level)));
|
|
21034
21034
|
setZoomMode("custom");
|
|
@@ -21047,11 +21047,11 @@ function useZoom(initialZoom = 1.5) {
|
|
|
21047
21047
|
};
|
|
21048
21048
|
}
|
|
21049
21049
|
function useSearch(pdfDoc) {
|
|
21050
|
-
const [query, setQuery] = (0,
|
|
21051
|
-
const [results, setResults] = (0,
|
|
21052
|
-
const [searching, setSearching] = (0,
|
|
21053
|
-
const [currentResultIndex, setCurrentResultIndex] = (0,
|
|
21054
|
-
const search = (0,
|
|
21050
|
+
const [query, setQuery] = (0, import_react13.useState)("");
|
|
21051
|
+
const [results, setResults] = (0, import_react13.useState)([]);
|
|
21052
|
+
const [searching, setSearching] = (0, import_react13.useState)(false);
|
|
21053
|
+
const [currentResultIndex, setCurrentResultIndex] = (0, import_react13.useState)(0);
|
|
21054
|
+
const search = (0, import_react13.useCallback)(
|
|
21055
21055
|
async (searchText) => {
|
|
21056
21056
|
if (!pdfDoc || !searchText.trim()) {
|
|
21057
21057
|
setResults([]);
|
|
@@ -21088,10 +21088,10 @@ function useSearch(pdfDoc) {
|
|
|
21088
21088
|
},
|
|
21089
21089
|
[pdfDoc]
|
|
21090
21090
|
);
|
|
21091
|
-
const nextResult = (0,
|
|
21091
|
+
const nextResult = (0, import_react13.useCallback)(() => {
|
|
21092
21092
|
setCurrentResultIndex((prev) => (prev + 1) % results.length);
|
|
21093
21093
|
}, [results.length]);
|
|
21094
|
-
const prevResult = (0,
|
|
21094
|
+
const prevResult = (0, import_react13.useCallback)(() => {
|
|
21095
21095
|
setCurrentResultIndex((prev) => (prev - 1 + results.length) % results.length);
|
|
21096
21096
|
}, [results.length]);
|
|
21097
21097
|
return {
|
|
@@ -21110,9 +21110,9 @@ function PDFCanvas({
|
|
|
21110
21110
|
scale,
|
|
21111
21111
|
onRender
|
|
21112
21112
|
}) {
|
|
21113
|
-
const containerRef = (0,
|
|
21114
|
-
const [canvas, setCanvas] = (0,
|
|
21115
|
-
(0,
|
|
21113
|
+
const containerRef = (0, import_react14.useRef)(null);
|
|
21114
|
+
const [canvas, setCanvas] = (0, import_react14.useState)(null);
|
|
21115
|
+
(0, import_react14.useEffect)(() => {
|
|
21116
21116
|
const render = async () => {
|
|
21117
21117
|
const renderedCanvas = await onRender(pageNumber, scale, 0);
|
|
21118
21118
|
if (renderedCanvas && containerRef.current) {
|
|
@@ -21127,7 +21127,7 @@ function PDFCanvas({
|
|
|
21127
21127
|
render();
|
|
21128
21128
|
}
|
|
21129
21129
|
}, [pdfDoc, pageNumber, scale, onRender]);
|
|
21130
|
-
return /* @__PURE__ */ (0,
|
|
21130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: containerRef, className: PDFViewer_default.canvas });
|
|
21131
21131
|
}
|
|
21132
21132
|
function PDFControls({
|
|
21133
21133
|
pageState,
|
|
@@ -21140,8 +21140,8 @@ function PDFControls({
|
|
|
21140
21140
|
url
|
|
21141
21141
|
}) {
|
|
21142
21142
|
if (!pdfDocument) return null;
|
|
21143
|
-
return /* @__PURE__ */ (0,
|
|
21144
|
-
/* @__PURE__ */ (0,
|
|
21143
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: PDFViewer_default.controls, children: [
|
|
21144
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
21145
21145
|
"button",
|
|
21146
21146
|
{
|
|
21147
21147
|
onClick: pageState.prevPage,
|
|
@@ -21150,7 +21150,7 @@ function PDFControls({
|
|
|
21150
21150
|
children: "<"
|
|
21151
21151
|
}
|
|
21152
21152
|
),
|
|
21153
|
-
/* @__PURE__ */ (0,
|
|
21153
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
21154
21154
|
"input",
|
|
21155
21155
|
{
|
|
21156
21156
|
type: "number",
|
|
@@ -21161,11 +21161,11 @@ function PDFControls({
|
|
|
21161
21161
|
className: PDFViewer_default.pageInput
|
|
21162
21162
|
}
|
|
21163
21163
|
),
|
|
21164
|
-
/* @__PURE__ */ (0,
|
|
21164
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: PDFViewer_default.pageTotal, children: [
|
|
21165
21165
|
"of ",
|
|
21166
21166
|
pdfDocument.numPages
|
|
21167
21167
|
] }),
|
|
21168
|
-
/* @__PURE__ */ (0,
|
|
21168
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
21169
21169
|
"button",
|
|
21170
21170
|
{
|
|
21171
21171
|
onClick: pageState.nextPage,
|
|
@@ -21174,7 +21174,7 @@ function PDFControls({
|
|
|
21174
21174
|
children: ">"
|
|
21175
21175
|
}
|
|
21176
21176
|
),
|
|
21177
|
-
/* @__PURE__ */ (0,
|
|
21177
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
21178
21178
|
"button",
|
|
21179
21179
|
{
|
|
21180
21180
|
onClick: zoom.zoomOut,
|
|
@@ -21183,11 +21183,11 @@ function PDFControls({
|
|
|
21183
21183
|
children: "-"
|
|
21184
21184
|
}
|
|
21185
21185
|
),
|
|
21186
|
-
/* @__PURE__ */ (0,
|
|
21186
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: PDFViewer_default.zoomLevel, children: [
|
|
21187
21187
|
Math.round(zoom.zoomLevel * 100),
|
|
21188
21188
|
"%"
|
|
21189
21189
|
] }),
|
|
21190
|
-
/* @__PURE__ */ (0,
|
|
21190
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
21191
21191
|
"button",
|
|
21192
21192
|
{
|
|
21193
21193
|
onClick: zoom.zoomIn,
|
|
@@ -21196,7 +21196,7 @@ function PDFControls({
|
|
|
21196
21196
|
children: "+"
|
|
21197
21197
|
}
|
|
21198
21198
|
),
|
|
21199
|
-
/* @__PURE__ */ (0,
|
|
21199
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
21200
21200
|
"input",
|
|
21201
21201
|
{
|
|
21202
21202
|
type: "text",
|
|
@@ -21206,13 +21206,13 @@ function PDFControls({
|
|
|
21206
21206
|
className: PDFViewer_default.searchInput
|
|
21207
21207
|
}
|
|
21208
21208
|
),
|
|
21209
|
-
search.results.length > 0 && /* @__PURE__ */ (0,
|
|
21209
|
+
search.results.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: PDFViewer_default.searchResults, children: [
|
|
21210
21210
|
search.results.length,
|
|
21211
21211
|
" results"
|
|
21212
21212
|
] }),
|
|
21213
|
-
enableDownload && /* @__PURE__ */ (0,
|
|
21214
|
-
enablePrint && /* @__PURE__ */ (0,
|
|
21215
|
-
enableFullscreen && typeof document !== "undefined" && /* @__PURE__ */ (0,
|
|
21213
|
+
enableDownload && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: url, download: true, className: PDFViewer_default.button, title: "Download", children: "Download" }),
|
|
21214
|
+
enablePrint && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: () => window.print(), title: "Print", children: "Print" }),
|
|
21215
|
+
enableFullscreen && typeof document !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
21216
21216
|
"button",
|
|
21217
21217
|
{
|
|
21218
21218
|
onClick: () => {
|
|
@@ -21234,8 +21234,8 @@ function PDFThumbnails({
|
|
|
21234
21234
|
onSelectPage,
|
|
21235
21235
|
numPages
|
|
21236
21236
|
}) {
|
|
21237
|
-
const [thumbnails, setThumbnails] = (0,
|
|
21238
|
-
(0,
|
|
21237
|
+
const [thumbnails, setThumbnails] = (0, import_react15.useState)([]);
|
|
21238
|
+
(0, import_react15.useEffect)(() => {
|
|
21239
21239
|
const generateThumbnails = async () => {
|
|
21240
21240
|
if (!pdfDoc) return;
|
|
21241
21241
|
const thumbs = [];
|
|
@@ -21264,13 +21264,13 @@ function PDFThumbnails({
|
|
|
21264
21264
|
};
|
|
21265
21265
|
generateThumbnails();
|
|
21266
21266
|
}, [pdfDoc, numPages]);
|
|
21267
|
-
return /* @__PURE__ */ (0,
|
|
21267
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: PDFViewer_default.thumbnails, children: thumbnails.map((thumb, idx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
21268
21268
|
"div",
|
|
21269
21269
|
{
|
|
21270
21270
|
className: `${PDFViewer_default.thumbnail} ${idx + 1 === currentPage ? PDFViewer_default.active : ""}`,
|
|
21271
21271
|
onClick: () => onSelectPage(idx + 1),
|
|
21272
21272
|
children: [
|
|
21273
|
-
/* @__PURE__ */ (0,
|
|
21273
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
21274
21274
|
"canvas",
|
|
21275
21275
|
{
|
|
21276
21276
|
width: thumb.width,
|
|
@@ -21285,7 +21285,7 @@ function PDFThumbnails({
|
|
|
21285
21285
|
}
|
|
21286
21286
|
}
|
|
21287
21287
|
),
|
|
21288
|
-
/* @__PURE__ */ (0,
|
|
21288
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: PDFViewer_default.pageNumber, children: idx + 1 })
|
|
21289
21289
|
]
|
|
21290
21290
|
},
|
|
21291
21291
|
idx
|
|
@@ -21322,35 +21322,35 @@ function PDFViewer({
|
|
|
21322
21322
|
const { renderPage, pageInfo } = usePageRenderer(pdfDoc);
|
|
21323
21323
|
const zoom = useZoom(initialZoom);
|
|
21324
21324
|
const search = useSearch(pdfDoc);
|
|
21325
|
-
(0,
|
|
21325
|
+
(0, import_react8.useEffect)(() => {
|
|
21326
21326
|
if (document2) {
|
|
21327
21327
|
onDocumentLoad?.(document2);
|
|
21328
21328
|
}
|
|
21329
21329
|
}, [document2, onDocumentLoad]);
|
|
21330
|
-
(0,
|
|
21330
|
+
(0, import_react8.useEffect)(() => {
|
|
21331
21331
|
onPageChange?.(pageState.currentPage);
|
|
21332
21332
|
}, [pageState.currentPage, onPageChange]);
|
|
21333
|
-
(0,
|
|
21333
|
+
(0, import_react8.useEffect)(() => {
|
|
21334
21334
|
if (search.results.length > 0) {
|
|
21335
21335
|
onSearchResults?.(search.results);
|
|
21336
21336
|
}
|
|
21337
21337
|
}, [search.results, onSearchResults]);
|
|
21338
21338
|
if (error) {
|
|
21339
|
-
return /* @__PURE__ */ (0,
|
|
21339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: PDFViewer_default.error, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
|
|
21340
21340
|
"Failed to load PDF: ",
|
|
21341
21341
|
error.message
|
|
21342
21342
|
] }) });
|
|
21343
21343
|
}
|
|
21344
21344
|
if (loading) {
|
|
21345
|
-
return /* @__PURE__ */ (0,
|
|
21345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: PDFViewer_default.loading, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Loading PDF..." }) });
|
|
21346
21346
|
}
|
|
21347
|
-
return /* @__PURE__ */ (0,
|
|
21347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
21348
21348
|
"div",
|
|
21349
21349
|
{
|
|
21350
21350
|
className: `${PDFViewer_default.viewer} ${className || ""}`,
|
|
21351
21351
|
style: { height, width, ...style },
|
|
21352
21352
|
children: [
|
|
21353
|
-
showControls && /* @__PURE__ */ (0,
|
|
21353
|
+
showControls && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
21354
21354
|
PDFControls,
|
|
21355
21355
|
{
|
|
21356
21356
|
pageState,
|
|
@@ -21363,8 +21363,8 @@ function PDFViewer({
|
|
|
21363
21363
|
url
|
|
21364
21364
|
}
|
|
21365
21365
|
),
|
|
21366
|
-
/* @__PURE__ */ (0,
|
|
21367
|
-
showThumbnails && document2 && /* @__PURE__ */ (0,
|
|
21366
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: PDFViewer_default.content, children: [
|
|
21367
|
+
showThumbnails && document2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
21368
21368
|
PDFThumbnails,
|
|
21369
21369
|
{
|
|
21370
21370
|
pdfDoc,
|
|
@@ -21373,7 +21373,7 @@ function PDFViewer({
|
|
|
21373
21373
|
numPages: document2.numPages
|
|
21374
21374
|
}
|
|
21375
21375
|
),
|
|
21376
|
-
/* @__PURE__ */ (0,
|
|
21376
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
21377
21377
|
PDFCanvas,
|
|
21378
21378
|
{
|
|
21379
21379
|
pdfDoc,
|
|
@@ -21451,22 +21451,22 @@ function createProgressiveFetchHandler(onProgress) {
|
|
|
21451
21451
|
return response.arrayBuffer();
|
|
21452
21452
|
};
|
|
21453
21453
|
}
|
|
21454
|
-
var
|
|
21454
|
+
var import_react8, import_react9, pdfjsLib, import_react10, import_react11, import_react12, import_react13, import_react14, import_jsx_runtime5, import_jsx_runtime6, import_react15, import_jsx_runtime7, import_jsx_runtime8, DEFAULT_SCALE, CACHE_SIZE, MIN_ZOOM, MAX_ZOOM, ZOOM_STEP, PDFViewer_default, linearizedPDFConfig;
|
|
21455
21455
|
var init_dist = __esm({
|
|
21456
21456
|
"node_modules/.pnpm/@page-speed+pdf-viewer@0.0.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/pdf-viewer/dist/index.js"() {
|
|
21457
|
-
import_react4 = __toESM(require_react());
|
|
21458
|
-
import_react5 = __toESM(require_react());
|
|
21459
|
-
pdfjsLib = __toESM(require_pdf());
|
|
21460
|
-
import_react6 = __toESM(require_react());
|
|
21461
|
-
import_react7 = __toESM(require_react());
|
|
21462
21457
|
import_react8 = __toESM(require_react());
|
|
21463
21458
|
import_react9 = __toESM(require_react());
|
|
21459
|
+
pdfjsLib = __toESM(require_pdf());
|
|
21464
21460
|
import_react10 = __toESM(require_react());
|
|
21465
|
-
import_jsx_runtime4 = __toESM(require_jsx_runtime());
|
|
21466
|
-
import_jsx_runtime5 = __toESM(require_jsx_runtime());
|
|
21467
21461
|
import_react11 = __toESM(require_react());
|
|
21462
|
+
import_react12 = __toESM(require_react());
|
|
21463
|
+
import_react13 = __toESM(require_react());
|
|
21464
|
+
import_react14 = __toESM(require_react());
|
|
21465
|
+
import_jsx_runtime5 = __toESM(require_jsx_runtime());
|
|
21468
21466
|
import_jsx_runtime6 = __toESM(require_jsx_runtime());
|
|
21467
|
+
import_react15 = __toESM(require_react());
|
|
21469
21468
|
import_jsx_runtime7 = __toESM(require_jsx_runtime());
|
|
21469
|
+
import_jsx_runtime8 = __toESM(require_jsx_runtime());
|
|
21470
21470
|
if (typeof window !== "undefined") {
|
|
21471
21471
|
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;
|
|
21472
21472
|
}
|
|
@@ -21506,13 +21506,17 @@ var init_dist = __esm({
|
|
|
21506
21506
|
var index_exports = {};
|
|
21507
21507
|
__export(index_exports, {
|
|
21508
21508
|
ComponentRenderer: () => ComponentRenderer,
|
|
21509
|
+
CustomSlideLayout: () => CustomSlideLayout,
|
|
21510
|
+
FullscreenLayout: () => FullscreenLayout,
|
|
21509
21511
|
HorizontalLayout: () => HorizontalLayout,
|
|
21510
21512
|
ImageRenderer: () => ImageRenderer,
|
|
21513
|
+
InlineLayout: () => InlineLayout,
|
|
21511
21514
|
Lightbox: () => Lightbox,
|
|
21512
21515
|
LightboxChrome: () => LightboxChrome,
|
|
21513
21516
|
LightboxContent: () => LightboxContent,
|
|
21514
21517
|
LightboxOverlay: () => LightboxOverlay,
|
|
21515
21518
|
PDFRenderer: () => PDFRenderer,
|
|
21519
|
+
VerticalSplitLayout: () => VerticalSplitLayout,
|
|
21516
21520
|
VideoRenderer: () => VideoRenderer,
|
|
21517
21521
|
useGalleryState: () => useGalleryState,
|
|
21518
21522
|
useKeyboardShortcuts: () => useKeyboardShortcuts,
|
|
@@ -21523,7 +21527,7 @@ __export(index_exports, {
|
|
|
21523
21527
|
module.exports = __toCommonJS(index_exports);
|
|
21524
21528
|
|
|
21525
21529
|
// src/components/Lightbox.tsx
|
|
21526
|
-
var
|
|
21530
|
+
var import_react17 = __toESM(require_react());
|
|
21527
21531
|
|
|
21528
21532
|
// src/hooks/useGalleryState.ts
|
|
21529
21533
|
var import_react = __toESM(require_react());
|
|
@@ -21621,7 +21625,23 @@ var Lightbox_default = {
|
|
|
21621
21625
|
captionTitle: "Lightbox_captionTitle",
|
|
21622
21626
|
captionText: "Lightbox_captionText",
|
|
21623
21627
|
pdfContainer: "Lightbox_pdfContainer",
|
|
21624
|
-
pdfFallback: "Lightbox_pdfFallback"
|
|
21628
|
+
pdfFallback: "Lightbox_pdfFallback",
|
|
21629
|
+
verticalSplitLayoutRoot: "Lightbox_verticalSplitLayoutRoot",
|
|
21630
|
+
verticalSplitLayoutContainer: "Lightbox_verticalSplitLayoutContainer",
|
|
21631
|
+
verticalSplitContent: "Lightbox_verticalSplitContent",
|
|
21632
|
+
verticalSplitSidebar: "Lightbox_verticalSplitSidebar",
|
|
21633
|
+
customSlideLayoutRoot: "Lightbox_customSlideLayoutRoot",
|
|
21634
|
+
customSlideLayoutContainer: "Lightbox_customSlideLayoutContainer",
|
|
21635
|
+
customSlideContent: "Lightbox_customSlideContent",
|
|
21636
|
+
customSlideChrome: "Lightbox_customSlideChrome",
|
|
21637
|
+
fullscreenLayoutRoot: "Lightbox_fullscreenLayoutRoot",
|
|
21638
|
+
fullscreenLayoutContainer: "Lightbox_fullscreenLayoutContainer",
|
|
21639
|
+
fullscreenContent: "Lightbox_fullscreenContent",
|
|
21640
|
+
fullscreenChrome: "Lightbox_fullscreenChrome",
|
|
21641
|
+
inlineLayoutRoot: "Lightbox_inlineLayoutRoot",
|
|
21642
|
+
inlineLayoutContainer: "Lightbox_inlineLayoutContainer",
|
|
21643
|
+
inlineContent: "Lightbox_inlineContent",
|
|
21644
|
+
inlineToolbar: "Lightbox_inlineToolbar"
|
|
21625
21645
|
};
|
|
21626
21646
|
|
|
21627
21647
|
// src/components/LightboxOverlay.tsx
|
|
@@ -21645,27 +21665,679 @@ function LightboxOverlay({
|
|
|
21645
21665
|
);
|
|
21646
21666
|
}
|
|
21647
21667
|
|
|
21668
|
+
// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/core/Img.js
|
|
21669
|
+
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
|
|
21670
|
+
var import_react7 = __toESM(require_react(), 1);
|
|
21671
|
+
|
|
21672
|
+
// node_modules/.pnpm/@page-speed+hooks@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/hooks/dist/chunk-JSF23IF7.js
|
|
21673
|
+
var import_react4 = __toESM(require_react(), 1);
|
|
21674
|
+
var BASE_URL = "https://octane.cdn.ing/api/v1/images/transform?";
|
|
21675
|
+
var DPR_MULTIPLIERS = [1, 2];
|
|
21676
|
+
function useOptimizedImage(options) {
|
|
21677
|
+
const {
|
|
21678
|
+
src,
|
|
21679
|
+
eager = false,
|
|
21680
|
+
threshold = 0.1,
|
|
21681
|
+
rootMargin = "50px",
|
|
21682
|
+
width,
|
|
21683
|
+
height,
|
|
21684
|
+
optixFlowConfig
|
|
21685
|
+
} = options;
|
|
21686
|
+
const optixFlowApiKey = (0, import_react4.useMemo)(() => {
|
|
21687
|
+
return optixFlowConfig?.apiKey;
|
|
21688
|
+
}, [optixFlowConfig?.apiKey]);
|
|
21689
|
+
const useOptixFlow = (0, import_react4.useMemo)(() => {
|
|
21690
|
+
return optixFlowApiKey ? true : false;
|
|
21691
|
+
}, [optixFlowApiKey]);
|
|
21692
|
+
const [state, setState] = (0, import_react4.useState)({
|
|
21693
|
+
isLoaded: false,
|
|
21694
|
+
isInView: false
|
|
21695
|
+
});
|
|
21696
|
+
const [size, setSize] = (0, import_react4.useState)({
|
|
21697
|
+
width: width ?? 0,
|
|
21698
|
+
height: height ?? 0
|
|
21699
|
+
});
|
|
21700
|
+
const imgRef = (0, import_react4.useRef)(null);
|
|
21701
|
+
const observerRef = (0, import_react4.useRef)(null);
|
|
21702
|
+
(0, import_react4.useEffect)(() => {
|
|
21703
|
+
if (width !== void 0 || height !== void 0) {
|
|
21704
|
+
setSize((prev) => ({
|
|
21705
|
+
width: width ?? prev.width,
|
|
21706
|
+
height: height ?? prev.height
|
|
21707
|
+
}));
|
|
21708
|
+
}
|
|
21709
|
+
}, [width, height]);
|
|
21710
|
+
(0, import_react4.useEffect)(() => {
|
|
21711
|
+
if (!imgRef.current) return;
|
|
21712
|
+
const calculateRenderedSize = () => {
|
|
21713
|
+
const img2 = imgRef.current;
|
|
21714
|
+
if (!img2) return;
|
|
21715
|
+
const renderedWidth = width ?? (Math.round(img2.clientWidth) || img2.naturalWidth || 0);
|
|
21716
|
+
const renderedHeight = height ?? (Math.round(img2.clientHeight) || img2.naturalHeight || 0);
|
|
21717
|
+
if (renderedWidth > 0 || renderedHeight > 0) {
|
|
21718
|
+
setSize((prev) => {
|
|
21719
|
+
if (prev.width !== renderedWidth || prev.height !== renderedHeight) {
|
|
21720
|
+
return { width: renderedWidth, height: renderedHeight };
|
|
21721
|
+
}
|
|
21722
|
+
return prev;
|
|
21723
|
+
});
|
|
21724
|
+
}
|
|
21725
|
+
};
|
|
21726
|
+
if (imgRef.current.clientWidth > 0) {
|
|
21727
|
+
calculateRenderedSize();
|
|
21728
|
+
}
|
|
21729
|
+
const img = imgRef.current;
|
|
21730
|
+
img.addEventListener("load", calculateRenderedSize);
|
|
21731
|
+
let resizeObserver = null;
|
|
21732
|
+
if (typeof ResizeObserver !== "undefined") {
|
|
21733
|
+
resizeObserver = new ResizeObserver(() => {
|
|
21734
|
+
calculateRenderedSize();
|
|
21735
|
+
});
|
|
21736
|
+
resizeObserver.observe(img);
|
|
21737
|
+
}
|
|
21738
|
+
return () => {
|
|
21739
|
+
img.removeEventListener("load", calculateRenderedSize);
|
|
21740
|
+
resizeObserver?.disconnect();
|
|
21741
|
+
};
|
|
21742
|
+
}, [width, height, state.isLoaded]);
|
|
21743
|
+
const buildOptixFlowUrl = (0, import_react4.useCallback)(
|
|
21744
|
+
(imgWidth, imgHeight, format) => {
|
|
21745
|
+
if (!useOptixFlow) return src;
|
|
21746
|
+
if (!imgWidth || !imgHeight) return src;
|
|
21747
|
+
const params = new URLSearchParams();
|
|
21748
|
+
params.set("url", src);
|
|
21749
|
+
params.set("w", String(imgWidth));
|
|
21750
|
+
params.set("h", String(imgHeight));
|
|
21751
|
+
params.set("q", String(optixFlowConfig?.compressionLevel ?? 75));
|
|
21752
|
+
params.set("f", format);
|
|
21753
|
+
params.set("apiKey", optixFlowApiKey);
|
|
21754
|
+
return `${BASE_URL}${params.toString()}`;
|
|
21755
|
+
},
|
|
21756
|
+
[useOptixFlow, src, optixFlowConfig?.compressionLevel, optixFlowApiKey]
|
|
21757
|
+
);
|
|
21758
|
+
const generateSrcset = (0, import_react4.useCallback)(
|
|
21759
|
+
(baseWidth, baseHeight, format) => {
|
|
21760
|
+
if (!useOptixFlow || baseWidth === 0 || baseHeight === 0) return "";
|
|
21761
|
+
return DPR_MULTIPLIERS.map((dpr) => {
|
|
21762
|
+
const scaledWidth = Math.round(baseWidth * dpr);
|
|
21763
|
+
const scaledHeight = Math.round(baseHeight * dpr);
|
|
21764
|
+
const url = buildOptixFlowUrl(scaledWidth, scaledHeight, format);
|
|
21765
|
+
return `${url} ${dpr}x`;
|
|
21766
|
+
}).join(", ");
|
|
21767
|
+
},
|
|
21768
|
+
[useOptixFlow, buildOptixFlowUrl]
|
|
21769
|
+
);
|
|
21770
|
+
const primarySrc = (0, import_react4.useMemo)(() => {
|
|
21771
|
+
const hasDimensions = size.width > 0 && size.height > 0;
|
|
21772
|
+
if (!useOptixFlow || !hasDimensions) return src;
|
|
21773
|
+
const fallbackFormat = optixFlowConfig?.renderedFileType ?? "jpeg";
|
|
21774
|
+
return buildOptixFlowUrl(size.width, size.height, fallbackFormat);
|
|
21775
|
+
}, [useOptixFlow, src, size.width, size.height, optixFlowConfig?.renderedFileType, buildOptixFlowUrl]);
|
|
21776
|
+
const srcset = (0, import_react4.useMemo)(() => {
|
|
21777
|
+
return {
|
|
21778
|
+
avif: generateSrcset(size.width, size.height, "avif"),
|
|
21779
|
+
webp: generateSrcset(size.width, size.height, "webp"),
|
|
21780
|
+
jpeg: generateSrcset(size.width, size.height, "jpeg")
|
|
21781
|
+
};
|
|
21782
|
+
}, [size.width, size.height, generateSrcset]);
|
|
21783
|
+
const sizes = (0, import_react4.useMemo)(() => {
|
|
21784
|
+
if (size.width === 0) return "";
|
|
21785
|
+
return `${size.width}px`;
|
|
21786
|
+
}, [size.width]);
|
|
21787
|
+
(0, import_react4.useEffect)(() => {
|
|
21788
|
+
if (typeof window === "undefined" || !imgRef.current) {
|
|
21789
|
+
return;
|
|
21790
|
+
}
|
|
21791
|
+
if (eager) {
|
|
21792
|
+
setState({ isLoaded: false, isInView: true });
|
|
21793
|
+
return;
|
|
21794
|
+
}
|
|
21795
|
+
observerRef.current = new IntersectionObserver(
|
|
21796
|
+
([entry]) => {
|
|
21797
|
+
if (entry.isIntersecting) {
|
|
21798
|
+
setState((prev) => ({ ...prev, isInView: true }));
|
|
21799
|
+
observerRef.current?.disconnect();
|
|
21800
|
+
}
|
|
21801
|
+
},
|
|
21802
|
+
{ threshold, rootMargin }
|
|
21803
|
+
);
|
|
21804
|
+
observerRef.current.observe(imgRef.current);
|
|
21805
|
+
return () => {
|
|
21806
|
+
observerRef.current?.disconnect();
|
|
21807
|
+
};
|
|
21808
|
+
}, [eager, threshold, rootMargin]);
|
|
21809
|
+
(0, import_react4.useEffect)(() => {
|
|
21810
|
+
if (!imgRef.current) return;
|
|
21811
|
+
const handleLoad = () => {
|
|
21812
|
+
setState((prev) => ({ ...prev, isLoaded: true }));
|
|
21813
|
+
};
|
|
21814
|
+
const img = imgRef.current;
|
|
21815
|
+
if (img.complete) {
|
|
21816
|
+
handleLoad();
|
|
21817
|
+
} else {
|
|
21818
|
+
img.addEventListener("load", handleLoad);
|
|
21819
|
+
return () => img.removeEventListener("load", handleLoad);
|
|
21820
|
+
}
|
|
21821
|
+
}, [state.isInView]);
|
|
21822
|
+
const ref = (0, import_react4.useCallback)((node) => {
|
|
21823
|
+
imgRef.current = node;
|
|
21824
|
+
}, []);
|
|
21825
|
+
const emptySrcset = { avif: "", webp: "", jpeg: "" };
|
|
21826
|
+
return {
|
|
21827
|
+
ref,
|
|
21828
|
+
// Primary src uses exact rendered dimensions for Lighthouse "Properly size images" compliance
|
|
21829
|
+
src: state.isInView || eager ? primarySrc : src,
|
|
21830
|
+
// Srcset with format variants and DPR multipliers for <picture> element
|
|
21831
|
+
srcset: state.isInView || eager ? srcset : emptySrcset,
|
|
21832
|
+
// Sizes attribute for responsive image selection
|
|
21833
|
+
sizes: state.isInView || eager ? sizes : "",
|
|
21834
|
+
isLoaded: state.isLoaded,
|
|
21835
|
+
isInView: state.isInView,
|
|
21836
|
+
loading: eager ? "eager" : "lazy",
|
|
21837
|
+
size
|
|
21838
|
+
};
|
|
21839
|
+
}
|
|
21840
|
+
|
|
21841
|
+
// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/utils/cache.js
|
|
21842
|
+
var l2Cache = /* @__PURE__ */ new Map();
|
|
21843
|
+
function cacheGet(key) {
|
|
21844
|
+
return l2Cache.get(key);
|
|
21845
|
+
}
|
|
21846
|
+
function cacheSet(key, value) {
|
|
21847
|
+
l2Cache.set(key, value);
|
|
21848
|
+
}
|
|
21849
|
+
|
|
21850
|
+
// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/utils/api.js
|
|
21851
|
+
var DEFAULT_CDN_HOST = "https://cdn.ing";
|
|
21852
|
+
function normalizeHost(cdnHost) {
|
|
21853
|
+
return (cdnHost ?? DEFAULT_CDN_HOST).replace(/\/$/, "");
|
|
21854
|
+
}
|
|
21855
|
+
function buildPrimaryImageUrl(mediaId, cdnHost) {
|
|
21856
|
+
const host = normalizeHost(cdnHost);
|
|
21857
|
+
return `${host}/assets/images/${mediaId}`;
|
|
21858
|
+
}
|
|
21859
|
+
function buildLegacyImageUrl(mediaId, cdnHost) {
|
|
21860
|
+
const host = normalizeHost(cdnHost);
|
|
21861
|
+
return `${host}/i/r/${mediaId}`;
|
|
21862
|
+
}
|
|
21863
|
+
function buildPlaceholderImageUrl(mediaId, cdnHost) {
|
|
21864
|
+
const host = normalizeHost(cdnHost);
|
|
21865
|
+
return `${host}/assets/low_res_thumb/${mediaId}`;
|
|
21866
|
+
}
|
|
21867
|
+
function hasRenderableUrlVariant(variant) {
|
|
21868
|
+
if (!variant)
|
|
21869
|
+
return false;
|
|
21870
|
+
const candidates = [variant.sm, variant.md, variant.lg, variant.full];
|
|
21871
|
+
return candidates.some((value) => typeof value === "string" && value.trim().length > 0);
|
|
21872
|
+
}
|
|
21873
|
+
function imageVariantsHaveRenderableSource(variants) {
|
|
21874
|
+
if (!variants)
|
|
21875
|
+
return false;
|
|
21876
|
+
return ["AVIF", "WEBP", "JPEG"].some((format) => {
|
|
21877
|
+
const entry = variants?.[format];
|
|
21878
|
+
return hasRenderableUrlVariant(entry);
|
|
21879
|
+
});
|
|
21880
|
+
}
|
|
21881
|
+
function hasUrlValue(value) {
|
|
21882
|
+
return typeof value === "string" && value.trim().length > 0;
|
|
21883
|
+
}
|
|
21884
|
+
function imageDataHasRenderableSource(data) {
|
|
21885
|
+
if (!data)
|
|
21886
|
+
return false;
|
|
21887
|
+
if (imageVariantsHaveRenderableSource(data.variants_data?.variants ?? null)) {
|
|
21888
|
+
return true;
|
|
21889
|
+
}
|
|
21890
|
+
const raw = data;
|
|
21891
|
+
const directFields = [
|
|
21892
|
+
raw.img_url,
|
|
21893
|
+
raw.file_data_url,
|
|
21894
|
+
raw.file_data_thumbnail_url,
|
|
21895
|
+
raw.img_src,
|
|
21896
|
+
raw.med_src,
|
|
21897
|
+
raw.thumb_src,
|
|
21898
|
+
raw.low_res_thumb
|
|
21899
|
+
];
|
|
21900
|
+
return directFields.some(hasUrlValue);
|
|
21901
|
+
}
|
|
21902
|
+
async function fetchFrom(url, signal) {
|
|
21903
|
+
const res = await fetch(url, { signal });
|
|
21904
|
+
if (!res.ok) {
|
|
21905
|
+
const error = new Error(`Failed to fetch image data (status ${res.status}) from ${url}`);
|
|
21906
|
+
error.status = res.status;
|
|
21907
|
+
throw error;
|
|
21908
|
+
}
|
|
21909
|
+
return await res.json();
|
|
21910
|
+
}
|
|
21911
|
+
async function fetchImageData(mediaId, options = {}) {
|
|
21912
|
+
if (!Number.isFinite(mediaId)) {
|
|
21913
|
+
throw new Error("Invalid mediaId provided to fetchImageData");
|
|
21914
|
+
}
|
|
21915
|
+
const host = normalizeHost(options.cdnHost);
|
|
21916
|
+
const cacheKey = `image:${host}:${mediaId}`;
|
|
21917
|
+
if (!options.bypassCache) {
|
|
21918
|
+
const cached = cacheGet(cacheKey);
|
|
21919
|
+
if (cached)
|
|
21920
|
+
return cached;
|
|
21921
|
+
}
|
|
21922
|
+
const urls = [buildPrimaryImageUrl(mediaId, host), buildLegacyImageUrl(mediaId, host)];
|
|
21923
|
+
let lastError;
|
|
21924
|
+
for (const url of urls) {
|
|
21925
|
+
try {
|
|
21926
|
+
const data = await fetchFrom(url, options.signal);
|
|
21927
|
+
if (imageDataHasRenderableSource(data)) {
|
|
21928
|
+
cacheSet(cacheKey, data);
|
|
21929
|
+
}
|
|
21930
|
+
return data;
|
|
21931
|
+
} catch (err) {
|
|
21932
|
+
if (err?.name === "AbortError") {
|
|
21933
|
+
throw err;
|
|
21934
|
+
}
|
|
21935
|
+
lastError = err;
|
|
21936
|
+
}
|
|
21937
|
+
}
|
|
21938
|
+
if (lastError instanceof Error) {
|
|
21939
|
+
throw lastError;
|
|
21940
|
+
}
|
|
21941
|
+
throw new Error(`Failed to fetch image data for mediaId ${mediaId}`);
|
|
21942
|
+
}
|
|
21943
|
+
|
|
21944
|
+
// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/core/useMediaSelectionEffect.js
|
|
21945
|
+
var import_react5 = __toESM(require_react(), 1);
|
|
21946
|
+
var MEDIA_SELECTED_EVENT = "dt:media-selected";
|
|
21947
|
+
function useMediaSelectionEffect() {
|
|
21948
|
+
(0, import_react5.useEffect)(() => {
|
|
21949
|
+
if (typeof window === "undefined")
|
|
21950
|
+
return;
|
|
21951
|
+
const handler = () => {
|
|
21952
|
+
};
|
|
21953
|
+
window.addEventListener(MEDIA_SELECTED_EVENT, handler);
|
|
21954
|
+
return () => window.removeEventListener(MEDIA_SELECTED_EVENT, handler);
|
|
21955
|
+
}, []);
|
|
21956
|
+
}
|
|
21957
|
+
|
|
21958
|
+
// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/core/useResponsiveReset.js
|
|
21959
|
+
var import_react6 = __toESM(require_react(), 1);
|
|
21960
|
+
function resetResponsivePictureState(element) {
|
|
21961
|
+
if (!element)
|
|
21962
|
+
return;
|
|
21963
|
+
element.querySelectorAll("source").forEach((source) => {
|
|
21964
|
+
const srcset = source.getAttribute("srcset");
|
|
21965
|
+
if (srcset) {
|
|
21966
|
+
source.setAttribute("data-srcset", srcset);
|
|
21967
|
+
source.removeAttribute("srcset");
|
|
21968
|
+
requestAnimationFrame(() => {
|
|
21969
|
+
source.setAttribute("srcset", srcset);
|
|
21970
|
+
});
|
|
21971
|
+
}
|
|
21972
|
+
});
|
|
21973
|
+
}
|
|
21974
|
+
function useResponsiveReset(ref) {
|
|
21975
|
+
(0, import_react6.useEffect)(() => {
|
|
21976
|
+
const element = ref.current;
|
|
21977
|
+
if (!element)
|
|
21978
|
+
return;
|
|
21979
|
+
if (element instanceof HTMLPictureElement) {
|
|
21980
|
+
resetResponsivePictureState(element);
|
|
21981
|
+
} else if (element.parentElement instanceof HTMLPictureElement) {
|
|
21982
|
+
resetResponsivePictureState(element.parentElement);
|
|
21983
|
+
}
|
|
21984
|
+
}, [ref]);
|
|
21985
|
+
}
|
|
21986
|
+
|
|
21987
|
+
// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/core/Img.js
|
|
21988
|
+
var DEFAULT_WIDTHS = {
|
|
21989
|
+
sm: 640,
|
|
21990
|
+
md: 1024,
|
|
21991
|
+
lg: 1536,
|
|
21992
|
+
full: 2560
|
|
21993
|
+
};
|
|
21994
|
+
var MAX_VARIANT_REFRESH_ATTEMPTS = 5;
|
|
21995
|
+
var VARIANT_REFRESH_DELAY_MS = 3e3;
|
|
21996
|
+
var TRANSPARENT_PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
|
|
21997
|
+
var defaultOptixFlowConfig;
|
|
21998
|
+
var deprecatedMediaWarnings = /* @__PURE__ */ new Set();
|
|
21999
|
+
var readGlobalOptixFlowConfig = () => {
|
|
22000
|
+
if (typeof globalThis === "undefined")
|
|
22001
|
+
return void 0;
|
|
22002
|
+
const globalAny = globalThis;
|
|
22003
|
+
return globalAny.PageSpeedImgDefaults?.optixFlowConfig || globalAny.OpensiteImgDefaults?.optixFlowConfig || globalAny.PAGE_SPEED_IMG_DEFAULTS?.optixFlowConfig;
|
|
22004
|
+
};
|
|
22005
|
+
var resolveOptixFlowConfig = (config) => {
|
|
22006
|
+
return config ?? defaultOptixFlowConfig ?? readGlobalOptixFlowConfig();
|
|
22007
|
+
};
|
|
22008
|
+
var warnDeprecatedMediaId = (mediaId) => {
|
|
22009
|
+
if (!Number.isFinite(mediaId) || mediaId == null)
|
|
22010
|
+
return;
|
|
22011
|
+
const id = mediaId;
|
|
22012
|
+
if (deprecatedMediaWarnings.has(id))
|
|
22013
|
+
return;
|
|
22014
|
+
deprecatedMediaWarnings.add(id);
|
|
22015
|
+
if (typeof console !== "undefined" && console.warn) {
|
|
22016
|
+
console.warn("[DEPRECATED] <Img mediaId> is deprecated. Provide src + optixFlowConfig instead.", { mediaId: id });
|
|
22017
|
+
}
|
|
22018
|
+
};
|
|
22019
|
+
var isUrlString = (value) => typeof value === "string" && value.trim().length > 0;
|
|
22020
|
+
var parseDimension = (value) => {
|
|
22021
|
+
if (value === "" || value === null || typeof value === "undefined")
|
|
22022
|
+
return void 0;
|
|
22023
|
+
if (typeof value === "number" && Number.isFinite(value))
|
|
22024
|
+
return value;
|
|
22025
|
+
if (typeof value === "string") {
|
|
22026
|
+
const numeric = Number(value);
|
|
22027
|
+
if (Number.isFinite(numeric))
|
|
22028
|
+
return numeric;
|
|
22029
|
+
}
|
|
22030
|
+
return void 0;
|
|
22031
|
+
};
|
|
22032
|
+
var composeRefs = (hookRef, forwardedRef, localRef) => (0, import_react7.useCallback)((node) => {
|
|
22033
|
+
hookRef(node);
|
|
22034
|
+
localRef.current = node;
|
|
22035
|
+
if (typeof forwardedRef === "function") {
|
|
22036
|
+
forwardedRef(node);
|
|
22037
|
+
} else if (forwardedRef && typeof forwardedRef === "object") {
|
|
22038
|
+
forwardedRef.current = node;
|
|
22039
|
+
}
|
|
22040
|
+
}, [hookRef, forwardedRef, localRef]);
|
|
22041
|
+
function widthMapFromMetadata(v) {
|
|
22042
|
+
const w = v?.widths;
|
|
22043
|
+
if (!w)
|
|
22044
|
+
return null;
|
|
22045
|
+
return {
|
|
22046
|
+
sm: w.small ?? w.sm ?? DEFAULT_WIDTHS.sm,
|
|
22047
|
+
md: w.medium ?? w.md ?? DEFAULT_WIDTHS.md,
|
|
22048
|
+
lg: w.large ?? w.lg ?? DEFAULT_WIDTHS.lg,
|
|
22049
|
+
full: w.full_size ?? w.full ?? DEFAULT_WIDTHS.full
|
|
22050
|
+
};
|
|
22051
|
+
}
|
|
22052
|
+
function pickBest(sizes) {
|
|
22053
|
+
if (!sizes)
|
|
22054
|
+
return void 0;
|
|
22055
|
+
return sizes.md || sizes.lg || sizes.sm || sizes.full || Object.values(sizes).find(Boolean);
|
|
22056
|
+
}
|
|
22057
|
+
var DEFAULT_SIZES = "(max-width:640px) 640px, (max-width:1024px) 1024px, 1536px";
|
|
22058
|
+
var ModernImg = ({ sizes, loading, decoding, alt, title, src: directSrc, eager, intersectionMargin, intersectionThreshold, optixFlowConfig, forwardedRef, ...rest }) => {
|
|
22059
|
+
const imgRef = (0, import_react7.useRef)(null);
|
|
22060
|
+
const pictureRef = (0, import_react7.useRef)(null);
|
|
22061
|
+
useResponsiveReset(pictureRef);
|
|
22062
|
+
useMediaSelectionEffect();
|
|
22063
|
+
const normalizedSrc = (0, import_react7.useMemo)(() => typeof directSrc === "string" ? directSrc.trim() : "", [directSrc]);
|
|
22064
|
+
const numericWidth = (0, import_react7.useMemo)(() => parseDimension(rest.width), [rest]);
|
|
22065
|
+
const numericHeight = (0, import_react7.useMemo)(() => parseDimension(rest.height), [rest]);
|
|
22066
|
+
const resolvedOptixConfig = (0, import_react7.useMemo)(() => resolveOptixFlowConfig(optixFlowConfig), [optixFlowConfig]);
|
|
22067
|
+
const eagerLoad = eager ?? loading === "eager";
|
|
22068
|
+
const { ref: hookRef, src, srcset, sizes: computedSizes, loading: hookLoading, size } = useOptimizedImage({
|
|
22069
|
+
src: normalizedSrc,
|
|
22070
|
+
eager: eagerLoad,
|
|
22071
|
+
width: numericWidth,
|
|
22072
|
+
height: numericHeight,
|
|
22073
|
+
rootMargin: intersectionMargin ?? "200px",
|
|
22074
|
+
threshold: intersectionThreshold ?? 0.1,
|
|
22075
|
+
optixFlowConfig: resolvedOptixConfig
|
|
22076
|
+
});
|
|
22077
|
+
const mergedRef = composeRefs(hookRef, forwardedRef, imgRef);
|
|
22078
|
+
const { width, height, ...restProps } = rest;
|
|
22079
|
+
const sizesAttr = sizes ?? (computedSizes || void 0);
|
|
22080
|
+
const loadingAttr = loading ?? hookLoading ?? "lazy";
|
|
22081
|
+
const decodingAttr = decoding ?? "async";
|
|
22082
|
+
const hasSrcSet = Boolean(srcset.avif || srcset.webp || srcset.jpeg);
|
|
22083
|
+
const imgSrc = src || normalizedSrc || TRANSPARENT_PIXEL;
|
|
22084
|
+
const inlineSrcSet = hasSrcSet && !srcset.avif && !srcset.webp ? srcset.jpeg : "";
|
|
22085
|
+
const parsedWidth = parseDimension(width);
|
|
22086
|
+
const parsedHeight = parseDimension(height);
|
|
22087
|
+
const widthAttr = parsedWidth ?? (size.width || numericWidth || void 0);
|
|
22088
|
+
const heightAttr = parsedHeight ?? (size.height || numericHeight || void 0);
|
|
22089
|
+
if (!hasSrcSet) {
|
|
22090
|
+
return (0, import_jsx_runtime2.jsx)("img", { ref: mergedRef, src: imgSrc, loading: loadingAttr, decoding: decodingAttr, alt, title, width: widthAttr, height: heightAttr, ...restProps });
|
|
22091
|
+
}
|
|
22092
|
+
return (0, import_jsx_runtime2.jsxs)("picture", { ref: pictureRef, children: [srcset.avif ? (0, import_jsx_runtime2.jsx)("source", { type: "image/avif", srcSet: srcset.avif, sizes: sizesAttr }) : null, srcset.webp ? (0, import_jsx_runtime2.jsx)("source", { type: "image/webp", srcSet: srcset.webp, sizes: sizesAttr }) : null, (0, import_jsx_runtime2.jsx)("img", { ref: mergedRef, src: imgSrc, srcSet: inlineSrcSet || void 0, sizes: inlineSrcSet ? sizesAttr : void 0, loading: loadingAttr, decoding: decodingAttr, alt, title, width: widthAttr, height: heightAttr, ...restProps })] });
|
|
22093
|
+
};
|
|
22094
|
+
var LegacyImg = ({ mediaId, cdnHost, sizes, onImageData, loading, decoding, alt, title, src: directSrc, forwardedRef, ...rest }) => {
|
|
22095
|
+
const imgRef = (0, import_react7.useRef)(null);
|
|
22096
|
+
const pictureRef = (0, import_react7.useRef)(null);
|
|
22097
|
+
(0, import_react7.useImperativeHandle)(forwardedRef, () => imgRef.current);
|
|
22098
|
+
useResponsiveReset(pictureRef);
|
|
22099
|
+
useMediaSelectionEffect();
|
|
22100
|
+
const [data, setData] = (0, import_react7.useState)(null);
|
|
22101
|
+
const [retryCount, setRetryCount] = (0, import_react7.useState)(0);
|
|
22102
|
+
const hasMediaId = Number.isFinite(mediaId);
|
|
22103
|
+
const loadingAttr = loading ?? "lazy";
|
|
22104
|
+
const decodingAttr = decoding ?? "async";
|
|
22105
|
+
const [isInView, setIsInView] = (0, import_react7.useState)(() => !hasMediaId || loadingAttr !== "lazy");
|
|
22106
|
+
const cdnOrigin = (0, import_react7.useMemo)(() => (cdnHost ?? DEFAULT_CDN_HOST).replace(/\/$/, ""), [cdnHost]);
|
|
22107
|
+
(0, import_react7.useEffect)(() => {
|
|
22108
|
+
if (!hasMediaId) {
|
|
22109
|
+
setData(null);
|
|
22110
|
+
setRetryCount(0);
|
|
22111
|
+
return;
|
|
22112
|
+
}
|
|
22113
|
+
setData(null);
|
|
22114
|
+
setRetryCount(0);
|
|
22115
|
+
}, [hasMediaId, mediaId, cdnHost]);
|
|
22116
|
+
(0, import_react7.useEffect)(() => {
|
|
22117
|
+
if (!hasMediaId) {
|
|
22118
|
+
return;
|
|
22119
|
+
}
|
|
22120
|
+
const controller = new AbortController();
|
|
22121
|
+
fetchImageData(mediaId, {
|
|
22122
|
+
cdnHost,
|
|
22123
|
+
signal: controller.signal,
|
|
22124
|
+
bypassCache: retryCount > 0
|
|
22125
|
+
}).then((d) => {
|
|
22126
|
+
setData(d);
|
|
22127
|
+
onImageData?.(d);
|
|
22128
|
+
}).catch((err) => {
|
|
22129
|
+
if (err?.name !== "AbortError") {
|
|
22130
|
+
console.warn("Image data fetch failed:", err);
|
|
22131
|
+
}
|
|
22132
|
+
});
|
|
22133
|
+
return () => controller.abort();
|
|
22134
|
+
}, [hasMediaId, mediaId, cdnHost, onImageData, retryCount]);
|
|
22135
|
+
(0, import_react7.useEffect)(() => {
|
|
22136
|
+
if (!hasMediaId || loadingAttr !== "lazy") {
|
|
22137
|
+
setIsInView(true);
|
|
22138
|
+
return;
|
|
22139
|
+
}
|
|
22140
|
+
setIsInView(false);
|
|
22141
|
+
}, [hasMediaId, mediaId, loadingAttr]);
|
|
22142
|
+
(0, import_react7.useEffect)(() => {
|
|
22143
|
+
if (!hasMediaId || loadingAttr !== "lazy" || isInView) {
|
|
22144
|
+
return;
|
|
22145
|
+
}
|
|
22146
|
+
if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
|
|
22147
|
+
setIsInView(true);
|
|
22148
|
+
return;
|
|
22149
|
+
}
|
|
22150
|
+
const node = imgRef.current;
|
|
22151
|
+
if (!node) {
|
|
22152
|
+
return;
|
|
22153
|
+
}
|
|
22154
|
+
const observer = new IntersectionObserver((entries) => {
|
|
22155
|
+
if (entries.some((entry) => entry.isIntersecting)) {
|
|
22156
|
+
setIsInView(true);
|
|
22157
|
+
observer.disconnect();
|
|
22158
|
+
}
|
|
22159
|
+
}, { rootMargin: "200px" });
|
|
22160
|
+
observer.observe(node);
|
|
22161
|
+
return () => observer.disconnect();
|
|
22162
|
+
}, [hasMediaId, loadingAttr, isInView]);
|
|
22163
|
+
const picture = (0, import_react7.useMemo)(() => {
|
|
22164
|
+
if (!data)
|
|
22165
|
+
return null;
|
|
22166
|
+
const v = data.variants_data?.variants ?? {};
|
|
22167
|
+
const webp2 = v.WEBP;
|
|
22168
|
+
const avif2 = v.AVIF;
|
|
22169
|
+
const jpeg2 = v.JPEG;
|
|
22170
|
+
const widths = widthMapFromMetadata(v.WEBP?.metadata) || widthMapFromMetadata(v.JPEG?.metadata) || { ...DEFAULT_WIDTHS };
|
|
22171
|
+
const ensureAbsolute = (url) => {
|
|
22172
|
+
if (!isUrlString(url))
|
|
22173
|
+
return void 0;
|
|
22174
|
+
if (/^https?:\/\//i.test(url) || url.startsWith("data:"))
|
|
22175
|
+
return url;
|
|
22176
|
+
if (url.startsWith("//"))
|
|
22177
|
+
return `https:${url}`;
|
|
22178
|
+
if (url.startsWith("/"))
|
|
22179
|
+
return `${cdnOrigin}${url}`;
|
|
22180
|
+
return `${cdnOrigin}/${url}`;
|
|
22181
|
+
};
|
|
22182
|
+
const normalizeCandidate = (candidate) => ensureAbsolute(typeof candidate === "string" ? candidate : void 0);
|
|
22183
|
+
const variantCandidates = [
|
|
22184
|
+
pickBest(webp2),
|
|
22185
|
+
pickBest(jpeg2),
|
|
22186
|
+
pickBest(avif2),
|
|
22187
|
+
webp2?.sm,
|
|
22188
|
+
webp2?.md,
|
|
22189
|
+
webp2?.lg,
|
|
22190
|
+
webp2?.full,
|
|
22191
|
+
jpeg2?.sm,
|
|
22192
|
+
jpeg2?.md,
|
|
22193
|
+
jpeg2?.lg,
|
|
22194
|
+
jpeg2?.full,
|
|
22195
|
+
avif2?.sm,
|
|
22196
|
+
avif2?.md,
|
|
22197
|
+
avif2?.lg,
|
|
22198
|
+
avif2?.full
|
|
22199
|
+
].map((candidate) => normalizeCandidate(candidate ?? void 0)).filter(isUrlString);
|
|
22200
|
+
const raw = data;
|
|
22201
|
+
const directCandidates = [
|
|
22202
|
+
raw.img_url,
|
|
22203
|
+
raw.file_data_url,
|
|
22204
|
+
raw.file_data_thumbnail_url,
|
|
22205
|
+
raw.img_src,
|
|
22206
|
+
raw.med_src,
|
|
22207
|
+
raw.thumb_src,
|
|
22208
|
+
raw.low_res_thumb
|
|
22209
|
+
].map((candidate) => isUrlString(candidate) ? normalizeCandidate(candidate) : void 0).filter(isUrlString);
|
|
22210
|
+
const fallbackCandidates = raw.fallback_url ? [normalizeCandidate(raw.fallback_url)].filter(isUrlString) : [];
|
|
22211
|
+
const fallback2 = [...variantCandidates, ...directCandidates, ...fallbackCandidates][0];
|
|
22212
|
+
if (!fallback2) {
|
|
22213
|
+
return null;
|
|
22214
|
+
}
|
|
22215
|
+
const toSrcSet2 = (sizes2) => {
|
|
22216
|
+
if (!sizes2)
|
|
22217
|
+
return void 0;
|
|
22218
|
+
const entries = [];
|
|
22219
|
+
const push = (url, width) => {
|
|
22220
|
+
const absolute = normalizeCandidate(url);
|
|
22221
|
+
if (absolute && width)
|
|
22222
|
+
entries.push(`${absolute} ${width}w`);
|
|
22223
|
+
};
|
|
22224
|
+
push(sizes2.sm, widths.sm);
|
|
22225
|
+
push(sizes2.md, widths.md);
|
|
22226
|
+
push(sizes2.lg, widths.lg);
|
|
22227
|
+
push(sizes2.full, widths.full);
|
|
22228
|
+
return entries.length ? entries.join(", ") : void 0;
|
|
22229
|
+
};
|
|
22230
|
+
return { webp: webp2, avif: avif2, jpeg: jpeg2, toSrcSet: toSrcSet2, fallback: fallback2, widths, hasVariantSource: variantCandidates.length > 0 };
|
|
22231
|
+
}, [data, cdnOrigin]);
|
|
22232
|
+
const hasVariantEntries = (0, import_react7.useMemo)(() => imageVariantsHaveRenderableSource(data?.variants_data?.variants ?? null), [data]);
|
|
22233
|
+
const variantsStatus = (0, import_react7.useMemo)(() => {
|
|
22234
|
+
const status = data?.variants_data?.status ?? data?.variants_status ?? "";
|
|
22235
|
+
return typeof status === "string" ? status.toLowerCase() : "";
|
|
22236
|
+
}, [data]);
|
|
22237
|
+
const variantsFailed = variantsStatus === "failed" || variantsStatus === "error";
|
|
22238
|
+
const shouldPollForVariants = hasMediaId && Boolean(data) && !variantsFailed && !hasVariantEntries && retryCount < MAX_VARIANT_REFRESH_ATTEMPTS;
|
|
22239
|
+
(0, import_react7.useEffect)(() => {
|
|
22240
|
+
if (!shouldPollForVariants) {
|
|
22241
|
+
return;
|
|
22242
|
+
}
|
|
22243
|
+
if (typeof window === "undefined") {
|
|
22244
|
+
return;
|
|
22245
|
+
}
|
|
22246
|
+
const timeoutId = window.setTimeout(() => {
|
|
22247
|
+
setRetryCount((count) => count + 1);
|
|
22248
|
+
}, VARIANT_REFRESH_DELAY_MS);
|
|
22249
|
+
return () => window.clearTimeout(timeoutId);
|
|
22250
|
+
}, [shouldPollForVariants]);
|
|
22251
|
+
const altAttr = (0, import_react7.useMemo)(() => {
|
|
22252
|
+
if (typeof alt === "string")
|
|
22253
|
+
return alt;
|
|
22254
|
+
return data?.meta?.content_manifest?.summary ?? void 0;
|
|
22255
|
+
}, [alt, data]);
|
|
22256
|
+
const titleAttr = (0, import_react7.useMemo)(() => {
|
|
22257
|
+
if (typeof title === "string")
|
|
22258
|
+
return title;
|
|
22259
|
+
return data?.meta?.content_manifest?.title ?? void 0;
|
|
22260
|
+
}, [title, data]);
|
|
22261
|
+
const widthAttr = (0, import_react7.useMemo)(() => data?.meta?.sizing?.width ?? data?.variants_data?.metadata?.width ?? void 0, [data]);
|
|
22262
|
+
const heightAttr = (0, import_react7.useMemo)(() => data?.meta?.sizing?.height ?? data?.variants_data?.metadata?.height ?? void 0, [data]);
|
|
22263
|
+
const dataFilename = (0, import_react7.useMemo)(() => {
|
|
22264
|
+
const base = data?.meta?.content_manifest?.optimized_filename;
|
|
22265
|
+
if (!base)
|
|
22266
|
+
return void 0;
|
|
22267
|
+
const href = picture?.fallback;
|
|
22268
|
+
if (!href)
|
|
22269
|
+
return void 0;
|
|
22270
|
+
const dot = href.lastIndexOf(".");
|
|
22271
|
+
const ext = dot > -1 ? href.slice(dot + 1).toLowerCase() : "jpg";
|
|
22272
|
+
return `${base}.${ext}`;
|
|
22273
|
+
}, [data, picture]);
|
|
22274
|
+
if (!hasMediaId) {
|
|
22275
|
+
const r = { ...rest };
|
|
22276
|
+
return (0, import_jsx_runtime2.jsx)("img", { ref: imgRef, src: directSrc, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: r.width, height: r.height, ...r });
|
|
22277
|
+
}
|
|
22278
|
+
const placeholderSrc = buildPlaceholderImageUrl(mediaId, cdnHost);
|
|
22279
|
+
if (!data || !picture || !isInView) {
|
|
22280
|
+
const r = { ...rest };
|
|
22281
|
+
return (0, import_jsx_runtime2.jsx)("img", { ref: imgRef, src: placeholderSrc, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: r.width ?? widthAttr, height: r.height ?? heightAttr, ...r });
|
|
22282
|
+
}
|
|
22283
|
+
const sizesAttr = sizes ?? DEFAULT_SIZES;
|
|
22284
|
+
const { webp, avif, jpeg, toSrcSet, fallback } = picture;
|
|
22285
|
+
const webpSet = toSrcSet(webp);
|
|
22286
|
+
const avifSet = toSrcSet(avif);
|
|
22287
|
+
const jpegSet = toSrcSet(jpeg);
|
|
22288
|
+
if (webpSet || avifSet || jpegSet) {
|
|
22289
|
+
return (0, import_jsx_runtime2.jsxs)("picture", { children: [avifSet ? (0, import_jsx_runtime2.jsx)("source", { type: "image/avif", srcSet: avifSet, sizes: sizesAttr }) : null, webpSet ? (0, import_jsx_runtime2.jsx)("source", { type: "image/webp", srcSet: webpSet, sizes: sizesAttr }) : null, (0, import_jsx_runtime2.jsx)("img", { ref: imgRef, src: fallback, srcSet: jpegSet && !webpSet && !avifSet ? jpegSet : void 0, sizes: jpegSet && !webpSet && !avifSet ? sizesAttr : void 0, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: widthAttr, height: heightAttr, "data-filename": dataFilename, ...rest })] });
|
|
22290
|
+
}
|
|
22291
|
+
return (0, import_jsx_runtime2.jsx)("img", { ref: imgRef, src: fallback, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: widthAttr, height: heightAttr, "data-filename": dataFilename, ...rest });
|
|
22292
|
+
};
|
|
22293
|
+
var ImgBase = (0, import_react7.forwardRef)(function Img(props, ref) {
|
|
22294
|
+
const hasMediaId = Number.isFinite(props.mediaId);
|
|
22295
|
+
if (hasMediaId) {
|
|
22296
|
+
warnDeprecatedMediaId(props.mediaId);
|
|
22297
|
+
return (0, import_jsx_runtime2.jsx)(LegacyImg, { ...props, forwardedRef: ref });
|
|
22298
|
+
}
|
|
22299
|
+
const hasSrc = typeof props.src === "string" && props.src.trim().length > 0;
|
|
22300
|
+
if (!hasSrc) {
|
|
22301
|
+
if (typeof console !== "undefined" && console.warn) {
|
|
22302
|
+
console.warn("<Img /> requires either src or mediaId. No src provided, rendering null.");
|
|
22303
|
+
}
|
|
22304
|
+
return null;
|
|
22305
|
+
}
|
|
22306
|
+
return (0, import_jsx_runtime2.jsx)(ModernImg, { ...props, forwardedRef: ref });
|
|
22307
|
+
});
|
|
22308
|
+
var Img2 = (0, import_react7.memo)(ImgBase);
|
|
22309
|
+
Img2.displayName = "PageSpeedImg";
|
|
22310
|
+
|
|
21648
22311
|
// src/renderers/ImageRenderer.tsx
|
|
21649
|
-
var
|
|
21650
|
-
|
|
22312
|
+
var import_jsx_runtime3 = __toESM(require_jsx_runtime());
|
|
22313
|
+
var toImgOptixFlowConfig = (config) => {
|
|
22314
|
+
if (!config) return void 0;
|
|
22315
|
+
const { compression, ...rest } = config;
|
|
22316
|
+
const base = rest;
|
|
22317
|
+
return {
|
|
22318
|
+
...base,
|
|
22319
|
+
compressionLevel: typeof compression === "number" ? compression : base.compressionLevel
|
|
22320
|
+
};
|
|
22321
|
+
};
|
|
22322
|
+
function ImageRenderer({ item, optixFlowConfig }) {
|
|
21651
22323
|
if (!item.src) return null;
|
|
21652
|
-
return /* @__PURE__ */ (0,
|
|
21653
|
-
|
|
22324
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
22325
|
+
Img2,
|
|
21654
22326
|
{
|
|
21655
22327
|
className: Lightbox_default.media,
|
|
21656
22328
|
src: item.src,
|
|
21657
|
-
srcSet: item.srcSet,
|
|
21658
22329
|
alt: item.alt || item.title || "",
|
|
21659
|
-
loading: "lazy"
|
|
22330
|
+
loading: "lazy",
|
|
22331
|
+
optixFlowConfig: toImgOptixFlowConfig(optixFlowConfig)
|
|
21660
22332
|
}
|
|
21661
22333
|
);
|
|
21662
22334
|
}
|
|
21663
22335
|
|
|
21664
22336
|
// src/renderers/VideoRenderer.tsx
|
|
21665
|
-
var
|
|
22337
|
+
var import_jsx_runtime4 = __toESM(require_jsx_runtime());
|
|
21666
22338
|
function VideoRenderer({ item }) {
|
|
21667
22339
|
if (!item.src) return null;
|
|
21668
|
-
return /* @__PURE__ */ (0,
|
|
22340
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
21669
22341
|
"video",
|
|
21670
22342
|
{
|
|
21671
22343
|
className: Lightbox_default.media,
|
|
@@ -21677,8 +22349,8 @@ function VideoRenderer({ item }) {
|
|
|
21677
22349
|
}
|
|
21678
22350
|
|
|
21679
22351
|
// src/renderers/PDFRenderer.tsx
|
|
21680
|
-
var
|
|
21681
|
-
var
|
|
22352
|
+
var import_react16 = __toESM(require_react());
|
|
22353
|
+
var import_jsx_runtime9 = __toESM(require_jsx_runtime());
|
|
21682
22354
|
function loadPDFViewer() {
|
|
21683
22355
|
return Promise.resolve().then(() => (init_dist(), dist_exports)).then((mod) => ({
|
|
21684
22356
|
// The PDF viewer package exposes a named PDFViewer export.
|
|
@@ -21686,47 +22358,54 @@ function loadPDFViewer() {
|
|
|
21686
22358
|
default: mod.PDFViewer
|
|
21687
22359
|
}));
|
|
21688
22360
|
}
|
|
21689
|
-
var LazyPDFViewer =
|
|
22361
|
+
var LazyPDFViewer = import_react16.default.lazy(loadPDFViewer);
|
|
21690
22362
|
var AnyPDFViewer = LazyPDFViewer;
|
|
21691
22363
|
function PDFRenderer({ item }) {
|
|
21692
22364
|
if (!item.src) return null;
|
|
21693
|
-
return /* @__PURE__ */ (0,
|
|
21694
|
-
|
|
22365
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: Lightbox_default.pdfContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
22366
|
+
import_react16.Suspense,
|
|
21695
22367
|
{
|
|
21696
|
-
fallback: /* @__PURE__ */ (0,
|
|
21697
|
-
children: /* @__PURE__ */ (0,
|
|
22368
|
+
fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: Lightbox_default.pdfFallback, children: "Loading document..." }),
|
|
22369
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AnyPDFViewer, { url: item.src })
|
|
21698
22370
|
}
|
|
21699
22371
|
) });
|
|
21700
22372
|
}
|
|
21701
22373
|
|
|
21702
22374
|
// src/renderers/ComponentRenderer.tsx
|
|
21703
|
-
var
|
|
22375
|
+
var import_jsx_runtime10 = __toESM(require_jsx_runtime());
|
|
21704
22376
|
function ComponentRenderer({ item }) {
|
|
21705
22377
|
if (!item.component) return null;
|
|
21706
22378
|
const Component = item.component;
|
|
21707
|
-
return /* @__PURE__ */ (0,
|
|
22379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { ...item.data || {} });
|
|
21708
22380
|
}
|
|
21709
22381
|
|
|
21710
22382
|
// src/components/LightboxContent.tsx
|
|
21711
|
-
var
|
|
21712
|
-
function LightboxContent({ item, layout }) {
|
|
22383
|
+
var import_jsx_runtime11 = __toESM(require_jsx_runtime());
|
|
22384
|
+
function LightboxContent({ item, layout, optixFlowConfig }) {
|
|
21713
22385
|
if (!item) return null;
|
|
21714
22386
|
switch (item.type) {
|
|
21715
22387
|
case "image":
|
|
21716
|
-
return /* @__PURE__ */ (0,
|
|
22388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
22389
|
+
ImageRenderer,
|
|
22390
|
+
{
|
|
22391
|
+
item,
|
|
22392
|
+
layout,
|
|
22393
|
+
optixFlowConfig
|
|
22394
|
+
}
|
|
22395
|
+
);
|
|
21717
22396
|
case "video":
|
|
21718
|
-
return /* @__PURE__ */ (0,
|
|
22397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VideoRenderer, { item, layout });
|
|
21719
22398
|
case "pdf":
|
|
21720
|
-
return /* @__PURE__ */ (0,
|
|
22399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PDFRenderer, { item, layout });
|
|
21721
22400
|
case "component":
|
|
21722
|
-
return /* @__PURE__ */ (0,
|
|
22401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComponentRenderer, { item });
|
|
21723
22402
|
default:
|
|
21724
22403
|
return null;
|
|
21725
22404
|
}
|
|
21726
22405
|
}
|
|
21727
22406
|
|
|
21728
22407
|
// src/components/LightboxChrome.tsx
|
|
21729
|
-
var
|
|
22408
|
+
var import_jsx_runtime12 = __toESM(require_jsx_runtime());
|
|
21730
22409
|
var DEFAULT_CONTROLS = {
|
|
21731
22410
|
navigation: true,
|
|
21732
22411
|
keyboard: true,
|
|
@@ -21756,9 +22435,9 @@ function LightboxChrome({
|
|
|
21756
22435
|
onClose
|
|
21757
22436
|
}) {
|
|
21758
22437
|
const resolved = mergeControls(controls);
|
|
21759
|
-
return /* @__PURE__ */ (0,
|
|
21760
|
-
resolved.navigation && /* @__PURE__ */ (0,
|
|
21761
|
-
/* @__PURE__ */ (0,
|
|
22438
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: Lightbox_default.chrome, children: [
|
|
22439
|
+
resolved.navigation && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: Lightbox_default.chromeSection, children: [
|
|
22440
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
21762
22441
|
"button",
|
|
21763
22442
|
{
|
|
21764
22443
|
type: "button",
|
|
@@ -21769,7 +22448,7 @@ function LightboxChrome({
|
|
|
21769
22448
|
children: "\u2039"
|
|
21770
22449
|
}
|
|
21771
22450
|
),
|
|
21772
|
-
/* @__PURE__ */ (0,
|
|
22451
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
21773
22452
|
"button",
|
|
21774
22453
|
{
|
|
21775
22454
|
type: "button",
|
|
@@ -21781,17 +22460,17 @@ function LightboxChrome({
|
|
|
21781
22460
|
}
|
|
21782
22461
|
)
|
|
21783
22462
|
] }),
|
|
21784
|
-
/* @__PURE__ */ (0,
|
|
21785
|
-
currentItem.title && /* @__PURE__ */ (0,
|
|
21786
|
-
currentItem.caption && /* @__PURE__ */ (0,
|
|
22463
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: Lightbox_default.chromeSection, children: resolved.captions && currentItem && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: Lightbox_default.captionContainer, children: [
|
|
22464
|
+
currentItem.title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: Lightbox_default.captionTitle, children: currentItem.title }),
|
|
22465
|
+
currentItem.caption && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: Lightbox_default.captionText, children: currentItem.caption })
|
|
21787
22466
|
] }) }),
|
|
21788
|
-
/* @__PURE__ */ (0,
|
|
21789
|
-
resolved.counter && totalItems > 0 && /* @__PURE__ */ (0,
|
|
22467
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: Lightbox_default.chromeSection, children: [
|
|
22468
|
+
resolved.counter && totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: Lightbox_default.counter, children: [
|
|
21790
22469
|
currentIndex + 1,
|
|
21791
22470
|
" / ",
|
|
21792
22471
|
totalItems
|
|
21793
22472
|
] }),
|
|
21794
|
-
resolved.closeButton && /* @__PURE__ */ (0,
|
|
22473
|
+
resolved.closeButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
21795
22474
|
"button",
|
|
21796
22475
|
{
|
|
21797
22476
|
type: "button",
|
|
@@ -21806,7 +22485,7 @@ function LightboxChrome({
|
|
|
21806
22485
|
}
|
|
21807
22486
|
|
|
21808
22487
|
// src/components/Layouts/HorizontalLayout.tsx
|
|
21809
|
-
var
|
|
22488
|
+
var import_jsx_runtime13 = __toESM(require_jsx_runtime());
|
|
21810
22489
|
function HorizontalLayout({
|
|
21811
22490
|
content,
|
|
21812
22491
|
chrome,
|
|
@@ -21820,7 +22499,7 @@ function HorizontalLayout({
|
|
|
21820
22499
|
height,
|
|
21821
22500
|
...style
|
|
21822
22501
|
};
|
|
21823
|
-
return /* @__PURE__ */ (0,
|
|
22502
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Lightbox_default.horizontalLayoutRoot, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
21824
22503
|
"div",
|
|
21825
22504
|
{
|
|
21826
22505
|
className: [
|
|
@@ -21828,15 +22507,128 @@ function HorizontalLayout({
|
|
|
21828
22507
|
className || ""
|
|
21829
22508
|
].join(" ").trim(),
|
|
21830
22509
|
children: [
|
|
21831
|
-
/* @__PURE__ */ (0,
|
|
21832
|
-
/* @__PURE__ */ (0,
|
|
22510
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Lightbox_default.mainContent, children: content }),
|
|
22511
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Lightbox_default.toolbar, children: chrome })
|
|
22512
|
+
]
|
|
22513
|
+
}
|
|
22514
|
+
) });
|
|
22515
|
+
}
|
|
22516
|
+
|
|
22517
|
+
// src/components/Layouts/VerticalSplitLayout.tsx
|
|
22518
|
+
var import_jsx_runtime14 = __toESM(require_jsx_runtime());
|
|
22519
|
+
function VerticalSplitLayout({
|
|
22520
|
+
content,
|
|
22521
|
+
chrome,
|
|
22522
|
+
height,
|
|
22523
|
+
maxWidth,
|
|
22524
|
+
className,
|
|
22525
|
+
style
|
|
22526
|
+
}) {
|
|
22527
|
+
const containerStyle = {
|
|
22528
|
+
maxWidth,
|
|
22529
|
+
height,
|
|
22530
|
+
...style
|
|
22531
|
+
};
|
|
22532
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: Lightbox_default.verticalSplitLayoutRoot, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
22533
|
+
"div",
|
|
22534
|
+
{
|
|
22535
|
+
className: [
|
|
22536
|
+
Lightbox_default.verticalSplitLayoutContainer,
|
|
22537
|
+
className || ""
|
|
22538
|
+
].join(" ").trim(),
|
|
22539
|
+
children: [
|
|
22540
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: Lightbox_default.verticalSplitContent, children: content }),
|
|
22541
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: Lightbox_default.verticalSplitSidebar, children: chrome })
|
|
22542
|
+
]
|
|
22543
|
+
}
|
|
22544
|
+
) });
|
|
22545
|
+
}
|
|
22546
|
+
|
|
22547
|
+
// src/components/Layouts/CustomSlideLayout.tsx
|
|
22548
|
+
var import_jsx_runtime15 = __toESM(require_jsx_runtime());
|
|
22549
|
+
function CustomSlideLayout({
|
|
22550
|
+
content,
|
|
22551
|
+
chrome,
|
|
22552
|
+
height,
|
|
22553
|
+
maxWidth,
|
|
22554
|
+
className,
|
|
22555
|
+
style
|
|
22556
|
+
}) {
|
|
22557
|
+
const containerStyle = {
|
|
22558
|
+
maxWidth,
|
|
22559
|
+
height,
|
|
22560
|
+
...style
|
|
22561
|
+
};
|
|
22562
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Lightbox_default.customSlideLayoutRoot, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
22563
|
+
"div",
|
|
22564
|
+
{
|
|
22565
|
+
className: [
|
|
22566
|
+
Lightbox_default.customSlideLayoutContainer,
|
|
22567
|
+
className || ""
|
|
22568
|
+
].join(" ").trim(),
|
|
22569
|
+
children: [
|
|
22570
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Lightbox_default.customSlideContent, children: content }),
|
|
22571
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Lightbox_default.customSlideChrome, children: chrome })
|
|
22572
|
+
]
|
|
22573
|
+
}
|
|
22574
|
+
) });
|
|
22575
|
+
}
|
|
22576
|
+
|
|
22577
|
+
// src/components/Layouts/FullscreenLayout.tsx
|
|
22578
|
+
var import_jsx_runtime16 = __toESM(require_jsx_runtime());
|
|
22579
|
+
function FullscreenLayout({
|
|
22580
|
+
content,
|
|
22581
|
+
chrome,
|
|
22582
|
+
className,
|
|
22583
|
+
style
|
|
22584
|
+
}) {
|
|
22585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: Lightbox_default.fullscreenLayoutRoot, style, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
22586
|
+
"div",
|
|
22587
|
+
{
|
|
22588
|
+
className: [
|
|
22589
|
+
Lightbox_default.fullscreenLayoutContainer,
|
|
22590
|
+
className || ""
|
|
22591
|
+
].join(" ").trim(),
|
|
22592
|
+
children: [
|
|
22593
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: Lightbox_default.fullscreenContent, children: content }),
|
|
22594
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: Lightbox_default.fullscreenChrome, children: chrome })
|
|
22595
|
+
]
|
|
22596
|
+
}
|
|
22597
|
+
) });
|
|
22598
|
+
}
|
|
22599
|
+
|
|
22600
|
+
// src/components/Layouts/InlineLayout.tsx
|
|
22601
|
+
var import_jsx_runtime17 = __toESM(require_jsx_runtime());
|
|
22602
|
+
function InlineLayout({
|
|
22603
|
+
content,
|
|
22604
|
+
chrome,
|
|
22605
|
+
height,
|
|
22606
|
+
maxWidth,
|
|
22607
|
+
className,
|
|
22608
|
+
style
|
|
22609
|
+
}) {
|
|
22610
|
+
const containerStyle = {
|
|
22611
|
+
maxWidth,
|
|
22612
|
+
height,
|
|
22613
|
+
...style
|
|
22614
|
+
};
|
|
22615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: Lightbox_default.inlineLayoutRoot, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
22616
|
+
"div",
|
|
22617
|
+
{
|
|
22618
|
+
className: [
|
|
22619
|
+
Lightbox_default.inlineLayoutContainer,
|
|
22620
|
+
className || ""
|
|
22621
|
+
].join(" ").trim(),
|
|
22622
|
+
children: [
|
|
22623
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: Lightbox_default.inlineContent, children: content }),
|
|
22624
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: Lightbox_default.inlineToolbar, children: chrome })
|
|
21833
22625
|
]
|
|
21834
22626
|
}
|
|
21835
22627
|
) });
|
|
21836
22628
|
}
|
|
21837
22629
|
|
|
21838
22630
|
// src/components/Lightbox.tsx
|
|
21839
|
-
var
|
|
22631
|
+
var import_jsx_runtime18 = __toESM(require_jsx_runtime());
|
|
21840
22632
|
function Lightbox(props) {
|
|
21841
22633
|
const { items, initialIndex = 0 } = props;
|
|
21842
22634
|
const gallery = useGalleryState({
|
|
@@ -21845,14 +22637,14 @@ function Lightbox(props) {
|
|
|
21845
22637
|
onSelect: props.onSelect
|
|
21846
22638
|
});
|
|
21847
22639
|
const { breakpoint } = useResponsiveness();
|
|
21848
|
-
const layout = (0,
|
|
22640
|
+
const layout = (0, import_react17.useMemo)(() => {
|
|
21849
22641
|
if (props.layout) return props.layout;
|
|
21850
22642
|
if (breakpoint === "mobile") return "fullscreen";
|
|
21851
22643
|
if (breakpoint === "tablet") return "vertical-split";
|
|
21852
22644
|
return "horizontal";
|
|
21853
22645
|
}, [props.layout, breakpoint]);
|
|
21854
|
-
const didCloseRef = (0,
|
|
21855
|
-
(0,
|
|
22646
|
+
const didCloseRef = (0, import_react17.useRef)(false);
|
|
22647
|
+
(0, import_react17.useEffect)(() => {
|
|
21856
22648
|
props.onOpen?.();
|
|
21857
22649
|
if (props.disableScroll === false) {
|
|
21858
22650
|
return () => {
|
|
@@ -21877,17 +22669,17 @@ function Lightbox(props) {
|
|
|
21877
22669
|
}
|
|
21878
22670
|
};
|
|
21879
22671
|
}, [props.disableScroll, props.onOpen, props.onClose]);
|
|
21880
|
-
const handleClose = (0,
|
|
22672
|
+
const handleClose = (0, import_react17.useCallback)(() => {
|
|
21881
22673
|
if (didCloseRef.current) return;
|
|
21882
22674
|
didCloseRef.current = true;
|
|
21883
22675
|
props.onClose?.();
|
|
21884
22676
|
}, [props.onClose]);
|
|
21885
|
-
const handleNext = (0,
|
|
22677
|
+
const handleNext = (0, import_react17.useCallback)(() => {
|
|
21886
22678
|
if (!gallery.canNext) return;
|
|
21887
22679
|
gallery.next();
|
|
21888
22680
|
props.onNext?.();
|
|
21889
22681
|
}, [gallery, props.onNext]);
|
|
21890
|
-
const handlePrev = (0,
|
|
22682
|
+
const handlePrev = (0, import_react17.useCallback)(() => {
|
|
21891
22683
|
if (!gallery.canPrev) return;
|
|
21892
22684
|
gallery.prev();
|
|
21893
22685
|
props.onPrev?.();
|
|
@@ -21913,64 +22705,90 @@ function Lightbox(props) {
|
|
|
21913
22705
|
captions: true,
|
|
21914
22706
|
...props.controls
|
|
21915
22707
|
};
|
|
21916
|
-
|
|
21917
|
-
|
|
22708
|
+
const contentNode = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
22709
|
+
LightboxContent,
|
|
22710
|
+
{
|
|
22711
|
+
item: currentItem,
|
|
22712
|
+
layout,
|
|
22713
|
+
optixFlowConfig: props.optixFlowConfig
|
|
22714
|
+
}
|
|
22715
|
+
);
|
|
22716
|
+
const chromeNode = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
22717
|
+
LightboxChrome,
|
|
22718
|
+
{
|
|
22719
|
+
currentIndex: gallery.currentIndex,
|
|
22720
|
+
totalItems: items.length,
|
|
22721
|
+
currentItem,
|
|
22722
|
+
canNext: gallery.canNext,
|
|
22723
|
+
canPrev: gallery.canPrev,
|
|
22724
|
+
controls: effectiveControls,
|
|
22725
|
+
onNext: handleNext,
|
|
22726
|
+
onPrev: handlePrev,
|
|
22727
|
+
onClose: handleClose
|
|
22728
|
+
}
|
|
22729
|
+
);
|
|
22730
|
+
const layoutProps = {
|
|
22731
|
+
content: contentNode,
|
|
22732
|
+
chrome: chromeNode,
|
|
22733
|
+
height: props.height,
|
|
22734
|
+
maxWidth: props.maxWidth,
|
|
22735
|
+
className: props.className,
|
|
22736
|
+
style: props.style
|
|
22737
|
+
};
|
|
22738
|
+
if (layout === "inline") {
|
|
22739
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InlineLayout, { ...layoutProps });
|
|
22740
|
+
}
|
|
22741
|
+
let layoutComponent;
|
|
22742
|
+
switch (layout) {
|
|
22743
|
+
case "vertical-split":
|
|
22744
|
+
layoutComponent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VerticalSplitLayout, { ...layoutProps });
|
|
22745
|
+
break;
|
|
22746
|
+
case "custom-slide":
|
|
22747
|
+
layoutComponent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CustomSlideLayout, { ...layoutProps });
|
|
22748
|
+
break;
|
|
22749
|
+
case "fullscreen":
|
|
22750
|
+
layoutComponent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FullscreenLayout, { ...layoutProps });
|
|
22751
|
+
break;
|
|
22752
|
+
case "horizontal":
|
|
22753
|
+
default:
|
|
22754
|
+
layoutComponent = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HorizontalLayout, { ...layoutProps });
|
|
22755
|
+
break;
|
|
22756
|
+
}
|
|
22757
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: Lightbox_default.lightboxPortal, role: "dialog", "aria-modal": "true", children: [
|
|
22758
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
21918
22759
|
LightboxOverlay,
|
|
21919
22760
|
{
|
|
21920
22761
|
onClose: handleClose,
|
|
21921
22762
|
closeOnBackdropClick: props.closeOnBackdropClick ?? true
|
|
21922
22763
|
}
|
|
21923
22764
|
),
|
|
21924
|
-
|
|
21925
|
-
HorizontalLayout,
|
|
21926
|
-
{
|
|
21927
|
-
content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LightboxContent, { item: currentItem, layout }),
|
|
21928
|
-
chrome: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
21929
|
-
LightboxChrome,
|
|
21930
|
-
{
|
|
21931
|
-
currentIndex: gallery.currentIndex,
|
|
21932
|
-
totalItems: items.length,
|
|
21933
|
-
currentItem,
|
|
21934
|
-
canNext: gallery.canNext,
|
|
21935
|
-
canPrev: gallery.canPrev,
|
|
21936
|
-
controls: effectiveControls,
|
|
21937
|
-
onNext: handleNext,
|
|
21938
|
-
onPrev: handlePrev,
|
|
21939
|
-
onClose: handleClose
|
|
21940
|
-
}
|
|
21941
|
-
),
|
|
21942
|
-
height: props.height,
|
|
21943
|
-
maxWidth: props.maxWidth,
|
|
21944
|
-
className: props.className,
|
|
21945
|
-
style: props.style
|
|
21946
|
-
}
|
|
21947
|
-
)
|
|
22765
|
+
layoutComponent
|
|
21948
22766
|
] });
|
|
21949
22767
|
}
|
|
21950
22768
|
|
|
21951
22769
|
// src/hooks/useLightboxState.ts
|
|
21952
|
-
var
|
|
22770
|
+
var import_react18 = __toESM(require_react());
|
|
21953
22771
|
function useLightboxState({
|
|
21954
22772
|
onOpen,
|
|
21955
22773
|
onClose,
|
|
21956
22774
|
disableScroll = true
|
|
21957
22775
|
}) {
|
|
21958
|
-
const [isOpen, setIsOpen] = (0,
|
|
21959
|
-
const open = (0,
|
|
22776
|
+
const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
|
|
22777
|
+
const open = (0, import_react18.useCallback)(() => {
|
|
21960
22778
|
setIsOpen(true);
|
|
21961
22779
|
onOpen?.();
|
|
21962
22780
|
if (disableScroll) {
|
|
21963
22781
|
document.body.style.overflow = "hidden";
|
|
21964
22782
|
}
|
|
21965
22783
|
}, [onOpen, disableScroll]);
|
|
21966
|
-
const close = (0,
|
|
22784
|
+
const close = (0, import_react18.useCallback)(() => {
|
|
21967
22785
|
setIsOpen(false);
|
|
21968
22786
|
onClose?.();
|
|
21969
22787
|
if (disableScroll) {
|
|
21970
22788
|
document.body.style.overflow = "";
|
|
21971
22789
|
}
|
|
21972
22790
|
}, [onClose, disableScroll]);
|
|
21973
|
-
(0,
|
|
22791
|
+
(0, import_react18.useEffect)(() => {
|
|
21974
22792
|
return () => {
|
|
21975
22793
|
if (disableScroll) {
|
|
21976
22794
|
document.body.style.overflow = "";
|