@livepreso/content-react 0.3.5 → 0.3.6

package/.rush/temp/shrinkwrap-deps.json

@@ -1,5 +1,5 @@
 {
-  "../../content/content-react": "../../content/content-react:gIunKntbEKHWcVSt+h52eM+NioiBP31+ikW5HR9+F8o=:",
+  "../../content/content-react": "../../content/content-react:bddeBDvUeJPa+NT4hb6TbJCKyl7AZrKwScnaAaM2sGc=:",
   "/@babel/helper-annotate-as-pure/7.22.5": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
   "/@babel/helper-module-imports/7.22.15": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
   "/@babel/helper-plugin-utils/7.22.5": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",

package/CHANGELOG.json

@@ -1,6 +1,18 @@
 {
   "name": "@livepreso/content-react",
   "entries": [
+    {
+      "version": "0.3.6",
+      "tag": "@livepreso/content-react_v0.3.6",
+      "date": "Wed, 20 Mar 2024 01:31:57 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Subslide functionaly accessible throughout slides"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.5",
       "tag": "@livepreso/content-react_v0.3.5",

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - @livepreso/content-react
 
-This log was last generated on Sun, 03 Mar 2024 23:59:09 GMT and should not be manually modified.
+This log was last generated on Wed, 20 Mar 2024 01:31:57 GMT and should not be manually modified.
+
+## 0.3.6
+Wed, 20 Mar 2024 01:31:57 GMT
+
+### Patches
+
+- Subslide functionaly accessible throughout slides
 
 ## 0.3.5
 Sun, 03 Mar 2024 23:59:09 GMT

package/lib/components/Subslide.js

@@ -4,108 +4,119 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { SlideContext, SubslideContext } from "../contexts.js";
 
 const DEFAULT_TRANSITION_STATE = {
-  entering: false,
-  entered: false,
-  exiting: false,
-  exited: false,
+	entering: false,
+	entered: false,
+	exiting: false,
+	exited: false,
 };
 
 export function Subslide(props) {
-  const {
-    id,
-    setSubslide,
-    endAnimation,
-    className,
-    style,
-    index,
-    active,
-    children,
-    animateSpeed,
-  } = props;
-  const { isSlideReady } = useContext(SlideContext);
-  const [transitions, setTransitions] = useState({
-    ...DEFAULT_TRANSITION_STATE,
-    entered: active,
-  });
-
-  // Poor mans classnames. Let's keep dependencies small.
-  const classes = ["subslide"];
-
-  if (typeof className === "string") {
-    classes.push(className);
-  }
-
-  if (active) {
-    classes.push("currentpage");
-  }
-
-  const subslide = useRef(null);
-
-  function animateIn() {
-    setSubslide(index);
-    setTransitions({
-      ...DEFAULT_TRANSITION_STATE,
-      entering: true,
-    });
-
-    setTimeout(() => {
-      subslide.current.ready = true;
-      subslide.current.animating(false);
-      setTransitions({
-        ...DEFAULT_TRANSITION_STATE,
-        entered: true,
-      });
-      endAnimation();
-    }, animateSpeed);
-    return subslide.current;
-  }
-
-  function animateOut() {
-    setTransitions({
-      ...DEFAULT_TRANSITION_STATE,
-      exiting: true,
-    });
-    setTimeout(() => {
-      subslide.current.ready = true;
-      subslide.current.animating(false);
-      setTransitions({
-        ...DEFAULT_TRANSITION_STATE,
-        exited: true,
-      });
-      endAnimation();
-    }, animateSpeed);
-    return subslide.current;
-  }
-
-  useEffect(() => {
-    if (isSlideReady) {
-      const bridgeSub = Bridge.Sub.get(`subslide-${index}`);
-
-      subslide.current = bridgeSub;
-
-      let transitions = {
-        in: animateIn.bind(this),
-        out: animateOut.bind(this),
-      };
-
-      // The hack
-      subslide.current.transitions(transitions);
-
-      subslide.current.ready = true;
-      subslide.current.animating(false);
-    }
-  }, [isSlideReady]);
-
-  return (
-    <SubslideContext.Provider
-      value={{
-        isActive: active,
-        transitions,
-      }}
-    >
-      <div id={id} style={{ flex: 1, position: "relative", ...style || {} }} className={classes.join(" ")}>
-        {children}
-      </div>
-    </SubslideContext.Provider>
-  );
+	const {
+		id,
+		setSubslide,
+		endAnimation,
+		className,
+		style,
+		index,
+		active,
+		children,
+		animateSpeed,
+	} = props;
+	const { isSlideReady, registerSubslide, unregisterSubslide } =
+		useContext(SlideContext);
+	const [transitions, setTransitions] = useState({
+		...DEFAULT_TRANSITION_STATE,
+		entered: active,
+	});
+
+	// Poor mans classnames. Let's keep dependencies small.
+	const classes = ["subslide"];
+
+	if (typeof className === "string") {
+		classes.push(className);
+	}
+
+	if (active) {
+		classes.push("currentpage");
+	}
+
+	const subslide = useRef(null);
+
+	function animateIn() {
+		setSubslide(index);
+		setTransitions({
+			...DEFAULT_TRANSITION_STATE,
+			entering: true,
+		});
+
+		setTimeout(() => {
+			subslide.current.ready = true;
+			subslide.current.animating(false);
+			setTransitions({
+				...DEFAULT_TRANSITION_STATE,
+				entered: true,
+			});
+			endAnimation();
+		}, animateSpeed);
+		return subslide.current;
+	}
+
+	function animateOut() {
+		setTransitions({
+			...DEFAULT_TRANSITION_STATE,
+			exiting: true,
+		});
+		setTimeout(() => {
+			subslide.current.ready = true;
+			subslide.current.animating(false);
+			setTransitions({
+				...DEFAULT_TRANSITION_STATE,
+				exited: true,
+			});
+			endAnimation();
+		}, animateSpeed);
+		return subslide.current;
+	}
+
+	useEffect(() => {
+		if (isSlideReady) {
+			const bridgeSub = Bridge.Sub.get(`subslide-${index}`);
+
+			subslide.current = bridgeSub;
+
+			let transitions = {
+				in: animateIn.bind(this),
+				out: animateOut.bind(this),
+			};
+
+			// The hack
+			subslide.current.transitions(transitions);
+
+			subslide.current.ready = true;
+			subslide.current.animating(false);
+		}
+	}, [isSlideReady]);
+
+	// Increase and decrease total count of subslides
+	useEffect(() => {
+		registerSubslide();
+		return () => unregisterSubslide();
+	}, []);
+
+	return (
+		<SubslideContext.Provider
+			value={{
+				isActive: active,
+				transitions,
+			}}
+		>
+			<div
+				id={id}
+				style={{ flex: 1, position: "relative", ...(style || {}) }}
+				className={classes.join(" ")}
+			>
+				{children}
+			</div>
+		</SubslideContext.Provider>
+	);
 }

package/lib/components/Subslides.js

@@ -1,71 +1,66 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
 // TODO: Remove above
-import React, { useState } from "react";
+import React, { useContext } from "react";
 import { ScrollableArea, Subslide } from "./index.js";
-import { useAsyncReference, useModes } from "../hooks";
+import { SlideContext, SubslidesContext } from "../contexts.js";
 
-import { SubslidesContext } from "../contexts.js";
+import { useModes } from "../hooks";
 
 export function Subslides({ children, animateSpeed }) {
-  const [currentSubslide, setCurrentSubslide] = useAsyncReference(1);
-  const [animating, setAnimating] = useState({
-    up: false,
-    down: false,
-  });
-  const { isScreenshot } = useModes();
+	const {
+		subslideAnimating: animating,
+		setSubslideAnimating: setAnimating,
+		currentSubslide,
+		setCurrentSubslide,
+	} = useContext(SlideContext);
+	const { isScreenshot } = useModes();
 
-  let totalSubslides = 0;
+	function mapSubslide(child, index) {
+		return React.cloneElement(child, {
+			id: `subslide-${index + 1}`,
+			style: { height: "100%" },
+			setSubslide: (index) => {
+				setAnimating({
+					down: index > currentSubslide,
+					up: index < currentSubslide,
+				});
+				setCurrentSubslide(index);
+			},
+			endAnimation: () => {
+				setAnimating({ down: false, up: false });
+			},
+			animateSpeed: isScreenshot ? 0 : animateSpeed,
+			index: index + 1,
+			active: index + 1 === currentSubslide,
+			key: index,
+		});
+	}
 
-  function mapSubslide(child, index) {
-    totalSubslides++;
-    return React.cloneElement(child, {
-      id: `subslide-${index + 1}`,
-      style: { height: "100%" },
-      setSubslide: (index) => {
-        setAnimating({
-          down: index > currentSubslide.current,
-          up: index < currentSubslide.current,
-        });
-        setCurrentSubslide(index);
-      },
-      endAnimation: () => {
-        setAnimating({ down: false, up: false });
-      },
-      animateSpeed: isScreenshot ? 0 : animateSpeed,
-      index: index + 1,
-      active: index + 1 === currentSubslide.current,
-      key: index,
-    });
-  }
+	const newChildren = React.Children.map(children, (child, index) => {
+		if (child.type === Subslide) {
+			return mapSubslide(child, index);
+		}
 
-  const newChildren = React.Children.map(children, (child, index) => {
-    if (child.type === Subslide) {
-      return mapSubslide(child, index);
-    }
+		if (child.type === ScrollableArea) {
+			return React.cloneElement(child, {
+				children: React.Children.map(child.props.children, mapSubslide),
+			});
+		}
 
-    if (child.type === ScrollableArea) {
-      return React.cloneElement(child, {
-        children: React.Children.map(child.props.children, mapSubslide),
-      });
-    }
+		return child;
+	});
 
-    return child;
-  });
-
-  return (
-    <SubslidesContext.Provider
-      value={{
-        animating,
-        currentSubslideIndex: currentSubslide.current,
-        totalSubslides: totalSubslides,
-      }}
-    >
-      {newChildren}
-    </SubslidesContext.Provider>
-  );
+	return (
+		<SubslidesContext.Provider
+			value={{
+				animating,
+			}}
+		>
+			{newChildren}
+		</SubslidesContext.Provider>
+	);
 }
 
 Subslides.defaultProps = {
-  animateSpeed: 500,
+	animateSpeed: 500,
 };
-

package/lib/hooks/use-root-slide.js

@@ -26,6 +26,14 @@ export function useRootSlide(article) {
 	const isCurrent = article.closest(".presoSlide").hasClass("current");
 	const [synced, setSynced] = useState(!isRemote);
 	const [internalSlideState, setInternalSlideState] = useAsyncReference({});
+	const [totalSubslides, setTotalSubslides] = useAsyncReference(0);
+	const [currentSubslide, setCurrentSubslide] = useAsyncReference(
+		totalSubslides ? 1 : null,
+	);
+	const [subslideAnimating, setSubslideAnimating] = useAsyncReference({
+		up: false,
+		down: false,
+	});
 	const [slideReady, setSlideReady] = useState(false);
 	const doneRegister = useRef({ promises: [] });
 
@@ -115,9 +123,7 @@ export function useRootSlide(article) {
 			doneRegister.current.promises = [];
 		});
 		article.on("slideready", (e, done) => {
-			Promise.all(
-				doneRegister.current.promises
-			).then(() => {
+			Promise.all(doneRegister.current.promises).then(() => {
 				done();
 			});
 
@@ -138,6 +144,15 @@ export function useRootSlide(article) {
 		doneRegister,
 		rootElement: article.get(0),
 
+		registerSubslide: () => setTotalSubslides(totalSubslides.current + 1),
+		unregisterSubslide: () => setTotalSubslides(totalSubslides.current - 1),
+
+		subslideAnimating: subslideAnimating.current,
+		setSubslideAnimating,
+		totalSubslides: totalSubslides.current,
+		currentSubslide: currentSubslide.current,
+		setCurrentSubslide,
+
 		// For use by shared state
 		internalSlideState,
 		setInternalSlideState,

package/lib/hooks/use-slide.js

@@ -2,5 +2,15 @@ import { SlideContext } from "../contexts.js";
 import { useContext } from "react";
 
 export function useSlide() {
-	return useContext(SlideContext);
+	const {
+		slideKey,
+		isSlideReady,
+		doneRegister,
+		isCurrentSlide,
+		totalSubslides,
+		currentSubslide,
+		transitions
+	} = useContext(SlideContext);
+
+	return { slideKey, isSlideReady, doneRegister, isCurrentSlide, currentSubslide, totalSubslides, transitions };
 }

package/lib/hooks/use-subslides.js

@@ -1,30 +1,51 @@
-import { SubslidesContext } from "../contexts.js";
+import { SlideContext, SubslideContext } from "../contexts.js";
+
 import { useContext } from "react";
+import { useSlide } from "./use-slide";
 
 export function useSubslides() {
-  const context = useContext(SubslidesContext);
-  const index = context.currentSubslideIndex;
+	const context = useContext(SubslideContext);
+	const { subslideAnimating: animating } = useContext(SlideContext);
+	const { currentSubslide: index, totalSubslides } = useSlide();
 
-  const atTop = index === 1;
-  const atBottom = index === context.totalSubslides;
-  return {
-    ...context,
-    atTop,
-    atBottom,
-    navigateUp() {
-      if (atTop) {
-        return;
-      }
+	const atTop = index === 1;
+	const atBottom = index === totalSubslides;
+	return {
+		...context,
+		animating,
+		atTop,
+		atBottom,
+		totalSubslides,
+		currentSubslideIndex: index,
+		navigateTo(newIndex) {
+			if (newIndex === index) {
+				// It's the same index, no need to change
+				return;
+			}
 
-      Bridge.Sub.show(`subslide-${index - 1}`);
-    },
-    navigateDown() {
-      if (atBottom) {
-        return;
-      }
+			if (newIndex < 1 || newIndex > totalSubslides) {
+				/* eslint-disable-next-line no-console */
+				console.warn(
+					`Cannot navigate to subslide ${newIndex} as it does not exist.`,
+				);
+				return;
+			}
 
-      Bridge.Sub.show(`subslide-${index + 1}`);
-    }
-  };
-}
+			window.Bridge.Sub.show(`subslide-${newIndex}`);
+		},
+		navigateUp() {
+			if (atTop) {
+				return;
+			}
 
+			window.Bridge.Sub.show(`subslide-${index - 1}`);
+		},
+		navigateDown() {
+			if (atBottom) {
+				return;
+			}
+
+			window.Bridge.Sub.show(`subslide-${index + 1}`);
+		},
+	};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/content-react",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "",
   "main": "index.js",
   "publishConfig": {