@canopy-iiif/app 0.13.0 → 0.13.2

package/lib/components/slider-runtime-entry.js

@@ -4,7 +4,10 @@ import CloverSlider from '@samvera/clover-iiif/slider';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
-import { mergeSliderOptions, normalizeSliderOptions } from '../../ui/src/iiif/sliderOptions.js';
+import {
+  mergeSliderOptions,
+  normalizeSliderOptions,
+} from '../../ui/dist/index.mjs';
 
 function ready(fn) {
   if (document.readyState === 'loading') {

package/lib/components/timeline-runtime.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
-import Timeline from '../../ui/src/content/timeline/Timeline.jsx';
+import { Timeline } from '../../ui/dist/index.mjs';
 
 function ready(fn) {
   if (typeof document === 'undefined') return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",

package/ui/dist/index.mjs

@@ -6,6 +6,7 @@ var HelloWorld = () => {
 
 // ui/src/layout/Card.jsx
 import React2, { useEffect, useRef, useState } from "react";
+var DEFAULT_CARD_ASPECT_RATIO = 4 / 3;
 function Card({
   href,
   src,
@@ -23,12 +24,15 @@ function Card({
   ...rest
 }) {
   const containerRef = useRef(null);
-  const [inView, setInView] = useState(!lazy);
-  const [imageLoaded, setImageLoaded] = useState(!lazy);
+  const isBrowser = typeof window !== "undefined";
+  const supportsIntersectionObserver = typeof IntersectionObserver === "function";
+  const shouldRenderImmediately = !lazy || !isBrowser || !supportsIntersectionObserver;
+  const [inView, setInView] = useState(shouldRenderImmediately);
+  const [imageLoaded, setImageLoaded] = useState(shouldRenderImmediately);
   useEffect(() => {
     if (!lazy) return;
     if (!containerRef.current) return;
-    if (typeof IntersectionObserver !== "function") {
+    if (!supportsIntersectionObserver) {
       setInView(true);
       return;
     }
@@ -58,10 +62,12 @@ function Card({
       } catch (_) {
       }
     };
-  }, [lazy]);
+  }, [lazy, supportsIntersectionObserver]);
   const w = Number(imgWidth);
   const h = Number(imgHeight);
-  const ratio = Number.isFinite(Number(aspectRatio)) && Number(aspectRatio) > 0 ? Number(aspectRatio) : Number.isFinite(w) && w > 0 && Number.isFinite(h) && h > 0 ? w / h : void 0;
+  const hasAspectRatio = Number.isFinite(Number(aspectRatio)) && Number(aspectRatio) > 0;
+  const hasDimensions = Number.isFinite(w) && w > 0 && Number.isFinite(h) && h > 0;
+  const ratio = hasAspectRatio ? Number(aspectRatio) : hasDimensions ? w / h : src ? DEFAULT_CARD_ASPECT_RATIO : void 0;
   const paddingPercent = ratio ? 100 / ratio : 100;
   const caption = /* @__PURE__ */ React2.createElement("figcaption", null, title && /* @__PURE__ */ React2.createElement("span", null, title), subtitle && /* @__PURE__ */ React2.createElement("span", null, subtitle), children);
   return /* @__PURE__ */ React2.createElement(
@@ -2682,6 +2688,9 @@ export {
   TeaserCard,
   Timeline,
   TimelinePoint,
-  Viewer
+  Viewer,
+  mergeSliderOptions,
+  normalizeSliderOptions,
+  sliderOptions
 };
 //# sourceMappingURL=index.mjs.map