@teleporthq/teleport-plugin-next-workflows 0.43.70 → 0.43.71

package/src/nodes/element/element-video-control.ts

@@ -0,0 +1,95 @@
+import { NodeHandlerGenerator, handlerToString } from '../types'
+
+/**
+ * "Control a Video": play / pause / play-or-pause / restart / mute / unmute
+ * the bound Video element (or the first <video> inside the bound element).
+ * A play the browser blocks for sound (autoplay policy: no user gesture yet,
+ * e.g. a chapter-reached trigger) is retried muted, so the video still
+ * starts, and the result says so. Client-only: it needs the DOM.
+ */
+async function element_video_control(config: any, context: Record<string, unknown>) {
+  const action = typeof config.action === 'string' ? config.action : 'play'
+  const host =
+    document.getElementById(config.nodeId) ||
+    (config.elementHtmlId ? document.getElementById(config.elementHtmlId) : null)
+  const video = host
+    ? host.tagName === 'VIDEO'
+      ? (host as HTMLVideoElement)
+      : (host.querySelector('video') as HTMLVideoElement | null)
+    : null
+  if (!video) {
+    return { success: false, action, reason: 'video-not-found' }
+  }
+
+  const state = (extra?: Record<string, unknown>) => {
+    const result: Record<string, unknown> = {
+      success: true,
+      action,
+      playing: !video.paused && !video.ended,
+      currentTime: video.currentTime,
+      muted: video.muted,
+    }
+    if (extra) {
+      Object.keys(extra).forEach((key) => {
+        result[key] = extra[key]
+      })
+    }
+    return result
+  }
+
+  const play = async () => {
+    try {
+      await video.play()
+      return null
+    } catch (error) {
+      if (video.muted) {
+        return 'blocked'
+      }
+      video.muted = true
+      try {
+        await video.play()
+        return 'muted'
+      } catch (retryError) {
+        return 'blocked'
+      }
+    }
+  }
+
+  const playAndReport = async () => {
+    const outcome = await play()
+    if (outcome === 'blocked') {
+      return state({ success: false, reason: 'autoplay-blocked' })
+    }
+    return outcome === 'muted' ? state({ mutedFallback: true }) : state()
+  }
+
+  if (action === 'pause') {
+    video.pause()
+    return state()
+  }
+  if (action === 'mute') {
+    video.muted = true
+    return state()
+  }
+  if (action === 'unmute') {
+    video.muted = false
+    return state()
+  }
+  if (action === 'restart') {
+    video.currentTime = 0
+    return playAndReport()
+  }
+  if (action === 'toggle' && !video.paused && !video.ended) {
+    video.pause()
+    return state()
+  }
+  return playAndReport()
+}
+
+export const elementVideoControl: NodeHandlerGenerator = {
+  nodeType: 'element-video-control',
+  executionEnv: 'client',
+  generateHandler(): string {
+    return handlerToString(element_video_control)
+  },
+}

package/src/nodes/index.ts

@@ -69,6 +69,7 @@ import { elementGetInputValue } from './element/element-get-input-value'
 import { elementHide } from './element/element-hide'
 import { elementRemoveClass } from './element/element-remove-class'
 import { elementScrollTo } from './element/element-scroll-to'
+import { elementVideoControl } from './element/element-video-control'
 import { elementSetAttribute } from './element/element-set-attribute'
 import { elementSetText } from './element/element-set-text'
 import { elementShow } from './element/element-show'
@@ -241,6 +242,7 @@ export const nodeRegistry: Record<string, NodeHandlerGenerator> = {
   'element-hide': elementHide,
   'element-remove-class': elementRemoveClass,
   'element-scroll-to': elementScrollTo,
+  'element-video-control': elementVideoControl,
   'element-set-attribute': elementSetAttribute,
   'element-set-text': elementSetText,
   'element-show': elementShow,

package/src/scroll-points.ts

@@ -0,0 +1,21 @@
+/**
+ * The plain choices of the "scrolled past a point" triggers and the progress
+ * (0..1) each stands for. The published Scroll Scene runtime carries the same
+ * list (scenePointList in teleport-project-generator-next, pinned by a test);
+ * the page trigger reads it here directly.
+ */
+export const SCROLL_POINT_PROGRESS: Readonly<Record<string, number>> = {
+  quarter: 0.25,
+  half: 0.5,
+  'three-quarters': 0.75,
+  end: 1,
+}
+
+export const DEFAULT_SCROLL_POINT = 'half'
+
+export const resolveScrollPoint = (value: unknown): { key: string; at: number; rank: number } => {
+  const keys = Object.keys(SCROLL_POINT_PROGRESS)
+  const key =
+    typeof value === 'string' && value in SCROLL_POINT_PROGRESS ? value : DEFAULT_SCROLL_POINT
+  return { key, at: SCROLL_POINT_PROGRESS[key], rank: keys.indexOf(key) + 1 }
+}

package/src/trigger-generator.ts

@@ -1,4 +1,5 @@
 import { UIDLWorkflow } from '@teleporthq/teleport-types'
+import { elementVisibleObserverCode } from './element-visible-trigger'
 
 /**
  * For DOM events whose `target` is a form control (select, input, textarea,
@@ -171,27 +172,17 @@ const generateElementVisibleTrigger = (
   workflowId: string
 ): string => {
   const elementId = (config.elementHtmlId || config.nodeId) as string
-  const threshold = (config.threshold as number) || 0
-  const once = config.once as boolean
-
   const safeId = workflowId.replace(/[^a-zA-Z0-9]/g, '_')
+  const observer = elementVisibleObserverCode(
+    `obs_${safeId}`,
+    config,
+    `const triggerContext = { elementId: '${elementId}', timestamp: Date.now(), intersectionRatio: entry.intersectionRatio };\n      ${executionCall};`
+  )
   return `
     // Workflow trigger: element visible (${workflowId})
     const el_${safeId} = document.getElementById('${elementId}');
     if (el_${safeId}) {
-      const obs_${safeId} = new IntersectionObserver(function(entries) {
-        entries.forEach(function(entry) {
-          if (entry.isIntersecting) {
-            const triggerContext = {
-              elementId: '${elementId}',
-              timestamp: Date.now(),
-              intersectionRatio: entry.intersectionRatio
-            };
-            ${executionCall};
-            ${once ? `obs_${safeId}.disconnect();` : ''}
-          }
-        });
-      }, { threshold: ${threshold} });
+${observer.trimEnd().replace(/^/gm, '      ')}
       obs_${safeId}.observe(el_${safeId});
       return function() { obs_${safeId}.disconnect(); };
     }`

package/src/workflow-component-plugin.ts

@@ -30,7 +30,9 @@ import { getAPIRouteFileName, hasStreamingAINode } from './api-route-generator'
 import { REALTIME_TRIGGER_TYPES, REALTIME_NODE_TYPES } from './graph-utils'
 import { neutraliseIsLoggedInGates } from './is-logged-in-gate'
 import { formControlPropertyReads } from './trigger-generator'
+import { elementVisibleObserverCode } from './element-visible-trigger'
 import { restoreControlledSelectValue } from './controlled-select'
+import { resolveScrollPoint } from './scroll-points'
 import { findFormStateKeyForHydration } from './admin-form-hydration'
 
 interface WorkflowPluginConfig {
@@ -96,7 +98,11 @@ const resolveLifecycleTriggerElementId = (
   triggerType: string,
   config: Record<string, unknown>
 ): string | null => {
-  if (triggerType !== 'event-element-visible') {
+  if (
+    triggerType !== 'event-element-visible' &&
+    triggerType !== 'event-chapter-reached' &&
+    triggerType !== 'event-scene-scrolled-past'
+  ) {
     return null
   }
   return ((config.elementHtmlId || config.nodeId) as string) || null
@@ -2198,27 +2204,143 @@ const generateLifecycleTrigger = (wf: UIDLWorkflow, safeId: string): string => {
       // so the observer was never constructed and the cookie-consent banner
       // could never appear on any page (run a15472af: 408 dead lookups).
       const elementId = (config.elementHtmlId || config.nodeId) as string
-      const threshold = (config.threshold as number) || 0
-      const once = config.once as boolean
+      const observer = elementVisibleObserverCode(
+        `__obs_${safeId}`,
+        config,
+        `const triggerContext = { elementId: '${elementId}', timestamp: Date.now(), intersectionRatio: entry.intersectionRatio };\n      ${execCall};`
+      )
       return (
         `    // Element visible (${wf.name || wf.id})\n` +
         `    const __visEl_${safeId} = document.getElementById('${elementId}');\n` +
         `    if (__visEl_${safeId}) {\n` +
-        `      const __obs_${safeId} = new IntersectionObserver(function(entries) {\n` +
-        `        entries.forEach(function(entry) {\n` +
-        `          if (entry.isIntersecting) {\n` +
-        `            const triggerContext = { elementId: '${elementId}', timestamp: Date.now(), intersectionRatio: entry.intersectionRatio };\n` +
-        `            ${execCall};\n` +
-        (once ? `            __obs_${safeId}.disconnect();\n` : '') +
-        `          }\n` +
-        `        });\n` +
-        `      }, { threshold: ${threshold} });\n` +
-        `      __obs_${safeId}.observe(__visEl_${safeId});\n` +
+        observer.trimEnd().replace(/^/gm, '      ') +
+        `\n      __obs_${safeId}.observe(__visEl_${safeId});\n` +
         `      cleanups.push(function() { __obs_${safeId}.disconnect(); });\n` +
         `    }`
       )
     }
 
+    case 'event-chapter-reached': {
+      // The published TqScrollScene announces the chapter on stage as a
+      // `tq-chapter-reached` event on the CHAPTER element (a direct child of the
+      // scene) and stamps `data-chapter-active` / `data-chapter-count` on it.
+      // The bound element is resolved to its chapter root, so a descendant the
+      // author picked still listens where the event lands; events bubbling up
+      // from a scene nested inside the chapter are ignored; and a listener that
+      // attaches after the announcement reads the stamp instead of waiting for
+      // a change that already happened.
+      const elementId = resolveLifecycleTriggerElementId(trigger.type, config) ?? ''
+      const once = config.once !== false
+      return (
+        `    // Chapter reached (${wf.name || wf.id})\n` +
+        `    const __chEl_${safeId} = document.getElementById('${elementId}');\n` +
+        `    if (__chEl_${safeId}) {\n` +
+        `      const __chRoot_${safeId} = __chEl_${safeId}.closest('[data-scene-stage] > *, [data-scene-track] > *') || __chEl_${safeId};\n` +
+        `      const __chFire_${safeId} = function(detail) {\n` +
+        `        const triggerContext = { elementId: '${elementId}', chapterIndex: detail.chapterIndex, chapterCount: detail.chapterCount, progress: detail.progress, direction: detail.direction, timestamp: Date.now() };\n` +
+        `        ${execCall};\n` +
+        `      };\n` +
+        `      const __chH_${safeId} = function(event) {\n` +
+        `        if (event.target !== __chRoot_${safeId}) { return; }\n` +
+        (once
+          ? `        __chRoot_${safeId}.removeEventListener('tq-chapter-reached', __chH_${safeId});\n`
+          : '') +
+        `        __chFire_${safeId}(event.detail || {});\n` +
+        `      };\n` +
+        `      const __chStamp_${safeId} = __chRoot_${safeId}.getAttribute('data-chapter-active');\n` +
+        `      if (__chStamp_${safeId}) {\n` +
+        `        __chFire_${safeId}({ chapterIndex: Number(__chStamp_${safeId}), chapterCount: Number(__chRoot_${safeId}.getAttribute('data-chapter-count')) || undefined });\n` +
+        `      }\n` +
+        (once ? `      if (!__chStamp_${safeId}) {\n` : `      {\n`) +
+        `        __chRoot_${safeId}.addEventListener('tq-chapter-reached', __chH_${safeId});\n` +
+        `        cleanups.push(function() { __chRoot_${safeId}.removeEventListener('tq-chapter-reached', __chH_${safeId}); });\n` +
+        `      }\n` +
+        `    }`
+      )
+    }
+
+    case 'event-scene-scrolled-past': {
+      // The published TqScrollScene announces every point passed on the way
+      // down as `tq-scene-point-passed` on its track (the element with the
+      // scene's id) and stamps the furthest point passed as `data-scene-point`.
+      // The bound element is resolved to its track; announcements bubbling up
+      // from a scene nested inside it are ignored; a listener that attaches
+      // after the point was passed fires from the stamp instead of waiting.
+      const elementId = resolveLifecycleTriggerElementId(trigger.type, config) ?? ''
+      const point = resolveScrollPoint(config.point)
+      const once = config.once !== false
+      return (
+        `    // Scene scrolled past (${wf.name || wf.id})\n` +
+        `    const __spEl_${safeId} = document.getElementById('${elementId}');\n` +
+        `    if (__spEl_${safeId}) {\n` +
+        `      const __spRoot_${safeId} = __spEl_${safeId}.closest('[data-scene-track]') || __spEl_${safeId};\n` +
+        `      const __spFire_${safeId} = function(progress) {\n` +
+        `        const triggerContext = { elementId: '${elementId}', point: '${point.key}', progress: progress, timestamp: Date.now() };\n` +
+        `        ${execCall};\n` +
+        `      };\n` +
+        `      const __spH_${safeId} = function(event) {\n` +
+        `        if (event.target !== __spRoot_${safeId}) { return; }\n` +
+        `        const detail = event.detail || {};\n` +
+        `        if (detail.point !== '${point.key}') { return; }\n` +
+        (once
+          ? `        __spRoot_${safeId}.removeEventListener('tq-scene-point-passed', __spH_${safeId});\n`
+          : '') +
+        `        __spFire_${safeId}(detail.progress);\n` +
+        `      };\n` +
+        `      const __spStamp_${safeId} = ['quarter', 'half', 'three-quarters', 'end'].indexOf(__spRoot_${safeId}.getAttribute('data-scene-point') || '') + 1;\n` +
+        `      if (__spStamp_${safeId} >= ${point.rank}) {\n` +
+        `        __spFire_${safeId}(${point.at});\n` +
+        `      }\n` +
+        (once ? `      if (__spStamp_${safeId} < ${point.rank}) {\n` : `      {\n`) +
+        `        __spRoot_${safeId}.addEventListener('tq-scene-point-passed', __spH_${safeId});\n` +
+        `        cleanups.push(function() { __spRoot_${safeId}.removeEventListener('tq-scene-point-passed', __spH_${safeId}); });\n` +
+        `      }\n` +
+        `    }`
+      )
+    }
+
+    case 'event-page-scrolled-past': {
+      // Page progress = scrollY over the scrollable height; a page that cannot
+      // scroll is entirely in view, so every point counts as passed. Checked
+      // once on attach (an anchor link or a restored scroll may open the page
+      // already past the point), then on scroll and resize, one check per
+      // frame. Going back above the point re-arms it; `once` detaches after
+      // the first pass.
+      const point = resolveScrollPoint(config.point)
+      const once = config.once !== false
+      return (
+        `    // Page scrolled past (${wf.name || wf.id})\n` +
+        `    const __ppProgress_${safeId} = function() {\n` +
+        `      const max = document.documentElement.scrollHeight - window.innerHeight;\n` +
+        `      return max <= 0 ? 1 : Math.min(1, Math.max(0, window.scrollY / max));\n` +
+        `    };\n` +
+        `    let __ppPassed_${safeId} = false;\n` +
+        `    let __ppTick_${safeId} = false;\n` +
+        `    const __ppOnScroll_${safeId} = function() {\n` +
+        `      if (__ppTick_${safeId}) { return; }\n` +
+        `      __ppTick_${safeId} = true;\n` +
+        `      requestAnimationFrame(function() { __ppTick_${safeId} = false; __ppCheck_${safeId}(); });\n` +
+        `    };\n` +
+        `    const __ppStop_${safeId} = function() {\n` +
+        `      window.removeEventListener('scroll', __ppOnScroll_${safeId});\n` +
+        `      window.removeEventListener('resize', __ppOnScroll_${safeId});\n` +
+        `    };\n` +
+        `    const __ppCheck_${safeId} = function() {\n` +
+        `      const progress = __ppProgress_${safeId}();\n` +
+        `      if (progress < ${point.at} - 0.000001) { __ppPassed_${safeId} = false; return; }\n` +
+        `      if (__ppPassed_${safeId}) { return; }\n` +
+        `      __ppPassed_${safeId} = true;\n` +
+        (once ? `      __ppStop_${safeId}();\n` : '') +
+        `      const triggerContext = { point: '${point.key}', progress: progress, url: window.location.href, timestamp: Date.now() };\n` +
+        `      ${execCall};\n` +
+        `    };\n` +
+        `    window.addEventListener('scroll', __ppOnScroll_${safeId}, { passive: true });\n` +
+        `    window.addEventListener('resize', __ppOnScroll_${safeId});\n` +
+        `    cleanups.push(__ppStop_${safeId});\n` +
+        `    __ppCheck_${safeId}();`
+      )
+    }
+
     case 'event-user-logged-in':
     case 'event-user-logged-out': {
       const eventName =