@hkdigital/lib-sveltekit 0.1.29 → 0.1.31

package/dist/widgets/presenter/ImageSlide.svelte

@@ -4,12 +4,21 @@
   /**
    * @type {{
    *   imageMeta?: import('@hkdigital/lib-sveltekit/config/typedef.js').ImageMeta | import('@hkdigital/lib-sveltekit/config/typedef.js').ImageMeta[],
+   *   slideDuration?: number,
+   *   nextSlideLabel?: string,
    *   presenter?: { gotoSlide: (name: string) => void, getCurrentSlideName: () => string },
    *   getLoadingController?: () => { loaded: () => void, cancel: () => void }
    *   [attr: string]: any
    * }}
    */
-  let { imageMeta, presenter, getLoadingController, ...attrs } = $props();
+  let {
+    imageMeta,
+    slideDuration = 5000,
+    nextSlideLabel,
+    presenter,
+    getLoadingController,
+    ...attrs
+  } = $props();
 
   let show = $state(false);
 
@@ -24,6 +33,20 @@
       }, 0);
     }
   }
+
+  let timer;
+
+  $effect(() => {
+    if (show && nextSlideLabel && !timer) {
+      timer = setTimeout(() => {
+        presenter.gotoSlide(nextSlideLabel);
+      });
+    }
+
+    return () => {
+      clearTimeout(timer);
+    };
+  });
 </script>
 
 <div class="absolute inset-0" class:invisible={!show}>

package/dist/widgets/presenter/ImageSlide.svelte.d.ts

@@ -2,6 +2,8 @@ export default ImageSlide;
 declare const ImageSlide: import("svelte").Component<{
     [attr: string]: any;
     imageMeta?: any | any[];
+    slideDuration?: number;
+    nextSlideLabel?: string;
     presenter?: {
         gotoSlide: (name: string) => void;
         getCurrentSlideName: () => string;

package/dist/widgets/presenter/Presenter.state.svelte.d.ts

@@ -27,17 +27,15 @@ export class PresenterState {
     currentSlideName: string;
     /** @type {string} */
     pendingSlideName: string;
+    /** @type {boolean} */
+    configured: boolean;
     /**
      * Configure the presentation
      *
      * @param {object} _
-     * @param {boolean} [_.autostart=false] - Whether to start automatically
-     * @param {string} [_.startSlide] - Name of the slide to start with
      * @param {Slide[]} [_.slides] - Array of slides for the presentation
      */
-    configure({ slides, autostart, startSlide }: {
-        autostart?: boolean;
-        startSlide?: string;
+    configure({ slides }: {
         slides?: Slide[];
     }): void;
     /**
@@ -52,11 +50,15 @@ export class PresenterState {
      * @param {string} name - Name of the slide to transition to
      */
     gotoSlide(name: string): Promise<void>;
+    /**
+     * Returns a simplified presenter reference with essential methods
+     * for slide components to use
+     *
+     * @returns {PresenterRef} A reference object with presenter methods
+     */
+    getPresenterRef(): PresenterRef;
     #private;
 }
-export const createOrGetState: (instanceKey?: string | Symbol) => PresenterState;
-export const createState: (instanceKey?: string | Symbol) => PresenterState;
-export const getState: (instanceKey?: string | Symbol) => PresenterState;
 export type Slide = import("./typedef").Slide;
 export type Transition = import("./typedef").Transition;
 export type Layer = import("./typedef").Layer;

package/dist/widgets/presenter/Presenter.state.svelte.js

@@ -1,15 +1,11 @@
 import { tick } from 'svelte';
 
-import { defineStateContext } from '../../util/svelte/state-context/index.js';
-
 import { findFirst } from '../../util/array/index.js';
 
 import { untrack } from 'svelte';
 
 import { HkPromise } from '../../classes/promise/index.js';
 
-/* ----------------------------------------------------------------- typedefs */
-
 /**
  * @typedef {import("./typedef").Slide} Slide
  */
@@ -34,16 +30,12 @@ import { HkPromise } from '../../classes/promise/index.js';
  * @property {() => string} getCurrentSlideName - Get the current slide name
  */
 
-/* -------------------------------------------------------------- Constants */
-
 const Z_BACK = 0;
 const Z_FRONT = 10;
 
 const LABEL_A = 'A';
 const LABEL_B = 'B';
 
-/* ------------------------------------------------------- Define state class */
-
 export class PresenterState {
   /** @type {Slide[]} */
   slides = $state.raw([]);
@@ -99,11 +91,14 @@ export class PresenterState {
   /** @type {string} */
   pendingSlideName;
 
+  /** @type {boolean} */
+  configured = false;
+
   /**
    * Initialize the presenter state and set up reactivity
    */
   constructor() {
-    this.#setupStageTransitions();
+    // this.#setupStageTransitions();
 
     let timeout;
 
@@ -130,21 +125,21 @@ export class PresenterState {
    * Set up reactivity for stage transitions between the before/after states
    * This handles the animation timing for both layers
    */
-  #setupStageTransitions() {
-    // Handle layer A stage transitions
-    $effect(() => {
-      if (this.layerA.stageBeforeIn || this.layerA.stageBeforeOut) {
-        this.layerA = this.#processStageTransition(this.layerA);
-      }
-    });
-
-    // Handle layer B stage transitions
-    $effect(() => {
-      if (this.layerB.stageBeforeIn || this.layerB.stageBeforeOut) {
-        this.layerB = this.#processStageTransition(this.layerB);
-      }
-    });
-  }
+  // #setupStageTransitions() {
+  //   // Handle layer A stage transitions
+  //   $effect(() => {
+  //     if (this.layerA.stageBeforeIn || this.layerA.stageBeforeOut) {
+  //       this.layerA = this.#processStageTransition(this.layerA);
+  //     }
+  //   });
+
+  //   // Handle layer B stage transitions
+  //   $effect(() => {
+  //     if (this.layerB.stageBeforeIn || this.layerB.stageBeforeOut) {
+  //       this.layerB = this.#processStageTransition(this.layerB);
+  //     }
+  //   });
+  // }
 
   /**
    * Process a single stage transition for a layer
@@ -167,17 +162,21 @@ export class PresenterState {
   }
 
   /**
-   * Execute the transition by waiting for all promises and then
-   * completing the transition
+   * Waiting for all transition timing promises to finish,
+   * this should be the same amount of time as it takes for the real
+   * transitions to finish
    *
-   * @param {HkPromise[]} promises - Array of transition promises to wait for
+   * @param {HkPromise[]} promises
+   *   Array of transition promises to wait for
    */
-  async #executeTransition(promises) {
+  async #waitForTransitionPromises(promises) {
     try {
-      // console.debug('executeTransition');
+      // console.debug('waitForTransitionPromises', promises);
 
       await Promise.allSettled(promises);
 
+      // console.debug('waitForTransitionPromises:done', promises);
+
       untrack(() => {
         this.#completeTransition();
       });
@@ -228,25 +227,15 @@ export class PresenterState {
    * Configure the presentation
    *
    * @param {object} _
-   * @param {boolean} [_.autostart=false] - Whether to start automatically
-   * @param {string} [_.startSlide] - Name of the slide to start with
    * @param {Slide[]} [_.slides] - Array of slides for the presentation
    */
-  configure({ slides, autostart = true, startSlide }) {
-    untrack(() => {
-      if (slides) {
-        // Only update slides if provided
-        this.slides = slides;
-      }
+  configure({ slides }) {
+    this.configured = true;
 
-      if ((autostart || startSlide) && this.slides?.length) {
-        if (startSlide) {
-          this.gotoSlide(startSlide);
-        } else {
-          this.#gotoSlide(this.slides[0]);
-        }
-      }
-    });
+    if (slides) {
+      // Only update slides if provided
+      this.slides = slides;
+    }
   }
 
   /**
@@ -264,6 +253,8 @@ export class PresenterState {
    * @param {string} name - Name of the slide to transition to
    */
   async gotoSlide(name) {
+    // throw new Error('gotoSlide');
+
     untrack(() => {
       const slide = findFirst(this.slides, { name });
 
@@ -282,6 +273,10 @@ export class PresenterState {
    * @param {Slide} slide - The slide to transition to
    */
   async #gotoSlide(slide) {
+    if (!this.configured) {
+      throw new Error('Not configured yet');
+    }
+
     if (this.busy) {
       this.pendingSlideName = slide.name;
       return;
@@ -290,7 +285,7 @@ export class PresenterState {
     this.slideLoadingPromise = null;
 
     // Get a presenter reference to pass to the slide
-    const presenterRef = this.#getPresenterRef();
+    const presenterRef = this.getPresenterRef();
 
     // Create a copy of the slide to avoid mutating the original
     const slideWithProps = {
@@ -312,16 +307,16 @@ export class PresenterState {
       }
     };
 
-    console.debug('Checkpoint 1');
+    // console.debug('Checkpoint 1');
 
     // Add next slide to next layer
     this.#updateSlide(this.nextLayerLabel, slideWithProps);
 
-    console.debug('Checkpoint 2');
+    // console.debug('Checkpoint 2');
 
     await tick();
 
-    console.debug('Checkpoint 3');
+    // console.debug('Checkpoint 3');
 
     if (this.slideLoadingPromise) {
       // console.debug('Waiting for slide to load');
@@ -334,7 +329,7 @@ export class PresenterState {
     const currentSlide = this.#getSlide(this.currentLayerLabel);
     const nextSlide = this.#getSlide(this.nextLayerLabel);
 
-    console.debug('Checkpoint 4');
+    // console.debug('Checkpoint 4', currentSlide, nextSlide);
 
     // Make next layer visible, move to front, and prepare for
     // transition in
@@ -354,14 +349,44 @@ export class PresenterState {
       transitions: currentSlide?.outro ?? []
     });
 
-    console.debug('Checkpoint 5');
+    // console.debug('Checkpoint 5');
+
+    // Wait briefly to ensure the stageBeforeIn/stageBeforeOut states are rendered
+    await tick();
+
+    // Now manually process the transitions for both layers
+    const layerA = this.layerA;
+    const layerB = this.layerB;
+
+    // Process stageBeforeIn transition for both layers
+    if (layerA.stageBeforeIn) {
+      this.layerA = this.#processStageTransition(layerA);
+    }
+
+    if (layerB.stageBeforeIn) {
+      this.layerB = this.#processStageTransition(layerB);
+    }
+
+    // Wait for another tick to ensure the stageIn states are rendered
+    await tick();
+
+    // Process stageBeforeOut transition for both layers
+    if (layerA.stageBeforeOut) {
+      this.layerA = this.#processStageTransition(layerA);
+    }
+
+    if (layerB.stageBeforeOut) {
+      this.layerB = this.#processStageTransition(layerB);
+    }
+
+    // console.debug('Checkpoint 7');
 
     // Start transitions
-    this.#applyTransitions();
+    this.#createTransitionPromises();
 
-    // FIXME: wait?
+    // console.debug('Checkpoint 8');
 
-    await this.#executeTransition(this.transitionPromises);
+    await this.#waitForTransitionPromises(this.transitionPromises);
 
     // Check if there's a pending slide transition
     if (this.pendingSlideName) {
@@ -378,9 +403,10 @@ export class PresenterState {
   }
 
   /**
-   * Apply transitions between current and next slide
+   * Create transition promises that can be used to determine the timing
+   * of the transitions between current and next slide
    */
-  #applyTransitions() {
+  #createTransitionPromises() {
     // Cancel existing transitions
     let transitionPromises = this.transitionPromises;
 
@@ -397,9 +423,11 @@ export class PresenterState {
     // Apply transitions `out` from currentslide
     const transitionsOut = currentSlide?.outro;
 
+    // console.log('transitionsOut', transitionsOut);
+
     if (transitionsOut) {
       for (const transition of transitionsOut) {
-        const promise = this.#applyTransition(transition);
+        const promise = this.#createTransitionPromise(transition);
         transitionPromises.push(promise);
       }
     }
@@ -407,9 +435,11 @@ export class PresenterState {
     // Apply transitions `in` from next slide
     const transitionsIn = nextSlide?.intro;
 
+    // console.log('transitionsIn', transitionsIn);
+
     if (transitionsIn) {
       for (const transition of transitionsIn) {
-        const promise = this.#applyTransition(transition);
+        const promise = this.#createTransitionPromise(transition);
         transitionPromises.push(promise);
       }
     }
@@ -418,12 +448,16 @@ export class PresenterState {
   }
 
   /**
-   * Apply a transition and return a transition promise
+   * Create a transition promise for the specified transition
+   *
    *
    * @param {Transition} transition - The transition to apply
-   * @returns {HkPromise} Promise that resolves when transition completes
+   *
+   * @returns {HkPromise}
+   *   Promise that resolves after the same amount of time that it
+   *   takes for the transition to finish
    */
-  #applyTransition(transition) {
+  #createTransitionPromise(transition) {
     const delay = (transition.delay ?? 0) + (transition.duration ?? 0);
 
     if (0 === delay) {
@@ -507,7 +541,7 @@ export class PresenterState {
    *
    * @returns {PresenterRef} A reference object with presenter methods
    */
-  #getPresenterRef() {
+  getPresenterRef() {
     return {
       gotoSlide: (name) => this.gotoSlide(name),
       getCurrentSlideName: () => this.currentSlideName
@@ -544,8 +578,3 @@ export class PresenterState {
     };
   }
 }
-
-/* -------------------------------------- Export create & get state functions */
-
-export const [createOrGetState, createState, getState] =
-  defineStateContext(PresenterState);

package/dist/widgets/presenter/Presenter.svelte

@@ -1,14 +1,11 @@
 <script>
-  /* ---------------------------------------------------------------- Imports */
+  import { onMount } from 'svelte';
 
   import { GridLayers } from '../../components/layout/index.js';
 
   import { PresenterState } from './Presenter.state.svelte.js';
-  import { getPresenterState } from './index.js';
   import { cssBefore, cssDuring, waitForRender } from './util.js';
 
-  /* ------------------------------------------------------------------ Props */
-
   /**
    * @typedef {import("./typedef.js").Slide} Slide
    */
@@ -21,10 +18,7 @@
    * @type {{
    *   classes?: string,
    *   slides?: import("./typedef.js").Slide[],
-   *   autostart?: boolean,
-   *   startSlide?: string,
-   *   instanceKey?: Symbol | string,
-   *   presenter?: import('./Presenter.state.svelte.js').PresenterState,
+   *   presenterRef?: import('./Presenter.state.svelte.js').PresenterRef,
    *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>,
    *   loadingSnippet?: import('svelte').Snippet,
    * }}
@@ -35,32 +29,23 @@
 
     // > Functional
     slides,
-    autostart = false,
-    startSlide,
-
-    // State
-    instanceKey,
-
-    // presenter = $bindable(),
+    presenterRef = $bindable(),
 
     // Snippets
     layoutSnippet,
     loadingSnippet
   } = $props();
 
-  // > Create presenter state object and register using setContext
-
-  // FIXME: Using getPresenterState to force creation of presenter outside
-  //        the component. Otherwise transitions doe not work somehow..
-  const presenter = getPresenterState(instanceKey);
-
-  // > State
+  const presenter = new PresenterState();
 
-  $effect.pre(() => {
+  onMount(() => {
     // Configure presenter with slides if provided
-    presenter.configure({ slides, autostart, startSlide });
+    presenter.configure({ slides });
+    presenterRef = presenter.getPresenterRef();
   });
 
+  // > State
+
   let classesA = $state('');
   let classesB = $state('');
 
@@ -75,7 +60,14 @@
     const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
       presenter.layerA;
 
-    if (transitions && transitions.length) {
+    if (transitions?.length) {
+      // console.debug('layerA:transitions', transitions, {
+      //   stageBeforeIn,
+      //   stageIn,
+      //   stageBeforeOut,
+      //   stageOut
+      // });
+
       if (stageBeforeIn || stageBeforeOut) {
         ({ style: stylesA, classes: classesA } = cssBefore(transitions));
       } else if (stageIn || stageOut) {
@@ -95,7 +87,14 @@
     const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
       presenter.layerB;
 
-    if (transitions) {
+    if (transitions?.length) {
+      // console.debug('layerB:transitions', transitions, {
+      //   stageBeforeIn,
+      //   stageIn,
+      //   stageBeforeOut,
+      //   stageOut
+      // });
+
       if (stageBeforeIn || stageBeforeOut) {
         ({ style: stylesB, classes: classesB } = cssBefore(transitions));
       } else if (stageIn || stageOut) {

package/dist/widgets/presenter/Presenter.svelte.d.ts

@@ -2,10 +2,7 @@ export default Presenter;
 declare const Presenter: import("svelte").Component<{
     classes?: string;
     slides?: import("./typedef.js").Slide[];
-    autostart?: boolean;
-    startSlide?: string;
-    instanceKey?: Symbol | string;
-    presenter?: import("./Presenter.state.svelte.js").PresenterState;
+    presenterRef?: import("./Presenter.state.svelte.js").PresenterRef;
     layoutSnippet: import("svelte").Snippet<[import("./typedef.js").Slide | null, import("./typedef.js").Layer]>;
     loadingSnippet?: import("svelte").Snippet;
-}, {}, "">;
+}, {}, "presenterRef">;

package/dist/widgets/presenter/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Presenter } from "./Presenter.svelte";
 export { default as ImageSlide } from "./ImageSlide.svelte";
+export { PresenterState } from "./Presenter.state.svelte.js";
 export * from "./typedef.js";
 export * from "./constants.js";
 export * from "./util.js";
-export { PresenterState, createOrGetState as createOrGetPresenterState, createState as createPresenterState, getState as getPresenterState } from "./Presenter.state.svelte.js";

package/dist/widgets/presenter/index.js

@@ -1,12 +1,7 @@
 export { default as Presenter } from './Presenter.svelte';
 export { default as ImageSlide } from './ImageSlide.svelte';
 
-export {
-  PresenterState,
-  createOrGetState as createOrGetPresenterState,
-  createState as createPresenterState,
-  getState as getPresenterState
-} from './Presenter.state.svelte.js';
+export { PresenterState } from './Presenter.state.svelte.js';
 
 export * from './typedef.js';
 export * from './constants.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.29",
+	"version": "0.1.31",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"