@drawbridge/components 0.1.5 → 0.1.6

package/dist/video.mjs

@@ -4,8 +4,13 @@ import dynamic from "next/dynamic";
 import { Fragment, useEffect, useRef, useState } from "react";
 import Loader from "./icons/loader.mjs";
 import Warning from "./icons/warning.mjs";
+import { provideHls, startSeek, videoErrorAction, videoOverlay } from "./shared/lib/video.mjs";
 const ReactPlayer = dynamic(
-  () => import("react-player/lazy"),
+  () => Promise.all([
+    import("hls.js").then((module) => provideHls(module.default || module, window)).catch(() => {
+    }),
+    import("react-player/lazy")
+  ]).then(([, player]) => player),
   {
     ssr: false
   }
@@ -35,17 +40,22 @@ const Video = ({
 }) => {
   var _a, _b, _c, _d;
   const durationFired = useRef(false);
+  const errored = useRef(false);
   const [player, setPlayer] = useState();
   const [videoUrl, setVideoUrl] = useState(hls ? hls : mp4);
   const [mountPlayer, setMountPlayer] = useState(!defer);
   const [posterPainted, setPosterPainted] = useState(false);
   const [videoPaintable, setVideoPaintable] = useState(false);
   const [failed, setFailed] = useState(false);
+  const wasReset = useRef(reset);
   useEffect(
     () => {
-      if (player && reset) {
-        player.seekTo(0, "seconds");
+      if (!player) return;
+      const target = startSeek({ reset, wasReset: wasReset.current });
+      if (target !== null) {
+        player.seekTo(target, "seconds");
       }
+      wasReset.current = reset;
     },
     [player, reset]
   );
@@ -77,6 +87,11 @@ const Video = ({
     },
     [defer, mountPlayer, poster, posterPainted]
   );
+  const overlay = videoOverlay({
+    failed,
+    poster,
+    videoPaintable
+  });
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     mountPlayer && /* @__PURE__ */ jsx(
       ReactPlayer,
@@ -122,11 +137,19 @@ const Video = ({
             onTime == null ? void 0 : onTime(seconds);
           },
           progressInterval: 100,
-          onError: () => {
-            if (mp4 && videoUrl !== mp4) {
+          onError: (error, data) => {
+            const action = videoErrorAction({
+              data,
+              error,
+              mp4,
+              url: videoUrl
+            });
+            if (action === "ignore" || errored.current) return;
+            if (action === "retry") {
               setVideoUrl(mp4);
               return;
             }
+            errored.current = true;
             setFailed(true);
             onError();
           },
@@ -151,7 +174,7 @@ const Video = ({
         }
       }
     ),
-    !videoPaintable && poster && /* @__PURE__ */ jsx(
+    overlay === "poster" && /* @__PURE__ */ jsx(
       "img",
       {
         ...{
@@ -172,7 +195,7 @@ const Video = ({
         }
       }
     ),
-    !videoPaintable && !poster && !failed && /* @__PURE__ */ jsx(
+    overlay === "loader" && /* @__PURE__ */ jsx(
       "div",
       {
         ...{
@@ -195,7 +218,7 @@ const Video = ({
         )
       }
     ),
-    failed && !poster && /* @__PURE__ */ jsx(
+    overlay === "warning" && /* @__PURE__ */ jsx(
       "div",
       {
         ...{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",
@@ -1437,6 +1437,11 @@
       "import": "./dist/shared/lib/icon-labels.mjs",
       "default": "./dist/shared/lib/icon-labels.js"
     },
+    "./shared/lib/video": {
+      "types": "./types/shared/lib/video.d.ts",
+      "import": "./dist/shared/lib/video.mjs",
+      "default": "./dist/shared/lib/video.js"
+    },
     "./shared/lib/yup": {
       "types": "./types/shared/lib/yup.d.ts",
       "import": "./dist/shared/lib/yup.mjs",
@@ -1510,15 +1515,15 @@
     "exports": "node scripts/exports.js",
     "test": ". \"$HOME/.nvm/nvm.sh\" && nvm use && node --test",
     "build": ". \"$HOME/.nvm/nvm.sh\" && nvm use && tsup && node scripts/esm-extensions.js && node --test && npm publish",
-    "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build",
-    "test-storybook": "vitest --project=storybook",
+    "app": "storybook dev -p 3003",
+    "app:build": "storybook build",
+    "test:app": "vitest --project=storybook",
     "dev": "tsup --watch --onSuccess \"node scripts/esm-extensions.js\""
   },
   "peerDependencies": {
     "@analytics/google-tag-manager": ">=0.5.5",
     "@drawbridge/drawbridge-telemetry": ">=0.0.19",
-    "@drawbridge/drawbridge-utils": ">=0.0.221",
+    "@drawbridge/drawbridge-utils": ">=0.0.222",
     "@headlessui/react": ">=2.1.2",
     "@hookform/resolvers": ">=3.1.1",
     "@sentry/nextjs": ">=10.58.0",
@@ -1636,9 +1641,9 @@
   },
   "devDependencies": {
     "@analytics/google-tag-manager": "0.5.5",
-    "@drawbridge/drawbridge-agents": "0.1.79",
+    "@drawbridge/drawbridge-agents": "0.1.90",
     "@drawbridge/drawbridge-telemetry": "0.0.19",
-    "@drawbridge/drawbridge-utils": "0.0.221",
+    "@drawbridge/drawbridge-utils": "0.0.222",
     "@headlessui/react": "2.2.9",
     "@hookform/resolvers": "3.1.1",
     "@sentry/nextjs": "10.58.0",
@@ -1694,6 +1699,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "embla-carousel-fade": "8.6.0",
     "embla-carousel-react": "8.6.0",
+    "hls.js": "1.6.19",
     "react-floater": "0.7.9",
     "react-phone-number-input": "3.4.12",
     "react-player": "2.16.0"

package/types/dashboard/form-action.d.ts

@@ -3,12 +3,15 @@ import { ComponentType, ReactNode } from 'react';
 export interface FormActionProps {
 	// The submit button's label; defaults to 'Confirm'.
 	action?: ReactNode;
-	// The mutation run on submit.
-	callback: () => Promise<unknown>;
+	// The mutation run on submit. It receives the form's values: any field the
+	// children render through a Controller (form context), seeded by defaultValues.
+	callback: ( values: Record<string, unknown> ) => Promise<unknown>;
 	// Shows a secondary button beside the action.
 	cancel?: { action?: ReactNode; onClick?: () => void };
 	children?: ReactNode;
 	className?: string;
+	// Initial values for fields rendered in the children.
+	defaultValues?: Record<string, unknown>;
 	disabled?: boolean;
 	fineprint?: ReactNode;
 	onError?: ( error: Error ) => void;

package/types/dashboard/lib/connection-controls.d.ts

@@ -10,3 +10,13 @@ export declare const connectionControls: ( connection?: {
 	paused: boolean;
 	remove: 'disconnect' | 'manage' | null;
 };
+
+// Whether the connection form shows the stored connection (true) or a fresh
+// connect (false): a stored connection unless its fix is to connect again
+// (requiresReconnect in @drawbridge/drawbridge-utils/connections/reconnect).
+export declare const isConnected: ( connection?: {
+	connect?: { type?: string };
+	errors?: { source?: string }[];
+	id?: string;
+	[ key: string ]: unknown;
+} | null ) => boolean;

package/types/shared/lib/video.d.ts

@@ -0,0 +1,9 @@
+// The Video component's source decisions, kept pure so they can be tested.
+
+export declare const provideHls: ( Hls: unknown, target: { Hls?: unknown } ) => void;
+
+export declare const videoErrorAction: ( options: { data?: { fatal?: boolean }; error?: unknown; mp4?: string; url?: string } ) => 'ignore' | 'retry' | 'fail';
+
+export declare const videoOverlay: ( options: { failed?: boolean; poster?: string; videoPaintable?: boolean } ) => 'poster' | 'loader' | 'warning' | null;
+
+export declare const startSeek: ( options: { reset?: boolean; wasReset?: boolean } ) => number | null;