@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/form-organization-file-frame.js

@@ -0,0 +1,168 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var form_organization_file_frame_exports = {};
+__export(form_organization_file_frame_exports, {
+  default: () => form_organization_file_frame_default
+});
+module.exports = __toCommonJS(form_organization_file_frame_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_dynamic = __toESM(require("next/dynamic"));
+var import_cdn = require("@drawbridge/drawbridge-utils/cdn");
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_form = require("../shared/lib/form");
+var import_frames = require("./lib/frames");
+var import_yup = __toESM(require("../shared/lib/yup"));
+var import_form2 = __toESM(require("../shared/form"));
+var import_fieldset = __toESM(require("../shared/fieldset"));
+var import_input_group = __toESM(require("../input-group"));
+var import_loader = require("../shared/loader");
+var import_button = __toESM(require("../shared/button"));
+const Video = (0, import_dynamic.default)(
+  () => import("../video"),
+  { loading: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loader.LoaderDynamic, {}), ssr: false }
+);
+const FormProfile = ({
+  onError,
+  onSuccess,
+  values
+}) => {
+  const { control, formState, handleSubmit, setError } = (0, import_form.useForm)({
+    // Nothing here is unsaved data: the player writes the timestamp itself
+    // as it loads and again on every progress tick, so the form is dirty
+    // before the user has touched anything and closing the modal asked
+    // about changes nobody made. What is lost is one scrub.
+    guard: false,
+    resolver: (0, import_yup.resolver)(
+      import_yup.default.object({
+        timestamp: import_yup.default.string().label("Timestamp").required()
+      })
+    ),
+    values
+  });
+  const timestamp = (0, import_form.useWatch)({
+    control,
+    name: "timestamp"
+  });
+  const onSubmit = async ({
+    timestamp: timestamp2
+  }) => {
+    try {
+      const args = {
+        body: {
+          timestamp: timestamp2
+        },
+        endpoint: "/organization/" + values.organization + "/file/" + values.id + "/frame",
+        method: "PUT"
+      };
+      const response = await (0, import_fetch.request)(args);
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  const zero = !timestamp || (0, import_frames.isStartingFrame)(timestamp);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_form2.default,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_form.Controller,
+              {
+                ...{
+                  control,
+                  name: "timestamp",
+                  render: ({ field: { onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_group.default,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.timestamp) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            Video,
+                            {
+                              ...{
+                                className: "w-full aspect-square",
+                                controls: true,
+                                hls: (0, import_cdn.cdnSrc)(values, "hls", values == null ? void 0 : values.updatedAt),
+                                mp4: (0, import_cdn.cdnSrc)(values, "original", values == null ? void 0 : values.updatedAt),
+                                // Every source failed, so scrubbing will never fire onTime and
+                                // the timestamp can't be set — say so on the field rather than
+                                // leaving the user staring at a dead player wondering why Save
+                                // won't accept.
+                                onError: () => setError("timestamp", {
+                                  message: "This video could not be loaded, so a frame cannot be selected. It may still be processing, or it may need to be re-uploaded."
+                                }),
+                                onTime: (timestamp2) => onChange(new Date(timestamp2 * 1e3).toISOString().slice(11, 23))
+                              }
+                            },
+                            values == null ? void 0 : values.updatedAt
+                          )
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: (formState == null ? void 0 : formState.isSubmitting) || zero
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.default,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit"
+                },
+                children: zero ? "Scrub to select frame" : "Create from " + timestamp
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var form_organization_file_frame_default = FormProfile;

package/dist/dashboard/form-organization-file-frame.mjs

@@ -0,0 +1,139 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import { useForm, useWatch, Controller } from "../shared/lib/form.mjs";
+import { isStartingFrame } from "./lib/frames.mjs";
+import yup, { resolver } from "../shared/lib/yup.mjs";
+import Form from "../shared/form.mjs";
+import Fieldset from "../shared/fieldset.mjs";
+import InputGroup from "../input-group.mjs";
+import { LoaderDynamic } from "../shared/loader.mjs";
+import Button from "../shared/button.mjs";
+const Video = dynamic(
+  () => import("../video.mjs"),
+  { loading: () => /* @__PURE__ */ jsx(LoaderDynamic, {}), ssr: false }
+);
+const FormProfile = ({
+  onError,
+  onSuccess,
+  values
+}) => {
+  const { control, formState, handleSubmit, setError } = useForm({
+    // Nothing here is unsaved data: the player writes the timestamp itself
+    // as it loads and again on every progress tick, so the form is dirty
+    // before the user has touched anything and closing the modal asked
+    // about changes nobody made. What is lost is one scrub.
+    guard: false,
+    resolver: resolver(
+      yup.object({
+        timestamp: yup.string().label("Timestamp").required()
+      })
+    ),
+    values
+  });
+  const timestamp = useWatch({
+    control,
+    name: "timestamp"
+  });
+  const onSubmit = async ({
+    timestamp: timestamp2
+  }) => {
+    try {
+      const args = {
+        body: {
+          timestamp: timestamp2
+        },
+        endpoint: "/organization/" + values.organization + "/file/" + values.id + "/frame",
+        method: "PUT"
+      };
+      const response = await request(args);
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  const zero = !timestamp || isStartingFrame(timestamp);
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ jsx(
+              Controller,
+              {
+                ...{
+                  control,
+                  name: "timestamp",
+                  render: ({ field: { onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsx(
+                      InputGroup,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.timestamp) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ jsx(
+                            Video,
+                            {
+                              ...{
+                                className: "w-full aspect-square",
+                                controls: true,
+                                hls: cdnSrc(values, "hls", values == null ? void 0 : values.updatedAt),
+                                mp4: cdnSrc(values, "original", values == null ? void 0 : values.updatedAt),
+                                // Every source failed, so scrubbing will never fire onTime and
+                                // the timestamp can't be set — say so on the field rather than
+                                // leaving the user staring at a dead player wondering why Save
+                                // won't accept.
+                                onError: () => setError("timestamp", {
+                                  message: "This video could not be loaded, so a frame cannot be selected. It may still be processing, or it may need to be re-uploaded."
+                                }),
+                                onTime: (timestamp2) => onChange(new Date(timestamp2 * 1e3).toISOString().slice(11, 23))
+                              }
+                            },
+                            values == null ? void 0 : values.updatedAt
+                          )
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: (formState == null ? void 0 : formState.isSubmitting) || zero
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit"
+                },
+                children: zero ? "Scrub to select frame" : "Create from " + timestamp
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var form_organization_file_frame_default = FormProfile;
+export {
+  form_organization_file_frame_default as default
+};

package/dist/dashboard/form-organization-file.js

@@ -0,0 +1,332 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var form_organization_file_exports = {};
+__export(form_organization_file_exports, {
+  default: () => form_organization_file_default
+});
+module.exports = __toCommonJS(form_organization_file_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_form = require("../shared/lib/form");
+var import_yup = __toESM(require("../shared/lib/yup"));
+var import_form2 = __toESM(require("../shared/form"));
+var import_fieldset = __toESM(require("../shared/fieldset"));
+var import_input_group = __toESM(require("../input-group"));
+var import_input_text = __toESM(require("../input-text"));
+var import_loader = __toESM(require("../icons/loader"));
+var import_plus = __toESM(require("../icons/plus"));
+var import_times = __toESM(require("../icons/times"));
+var import_frames = require("./lib/frames");
+var import_button = __toESM(require("../shared/button"));
+const FormOrganizationFile = ({
+  disabled,
+  onError,
+  onSuccess,
+  onFrameCreate,
+  onFrameDelete,
+  values
+}) => {
+  const schema = {
+    filename: import_yup.default.string().label("File Name").nullable().max(150)
+  };
+  if ((values == null ? void 0 : values.type) === "video") {
+    schema.poster = import_yup.default.string().label("Poster").required().max(150);
+  }
+  ;
+  const { control, handleSubmit, formState } = (0, import_form.useForm)({
+    resolver: (0, import_yup.resolver)(
+      import_yup.default.object(schema)
+    ),
+    values
+  });
+  const onSubmit = async ({
+    filename,
+    poster
+  }) => {
+    try {
+      const args = {
+        body: {
+          filename,
+          poster
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/file/" + (values == null ? void 0 : values.id),
+        method: "PUT"
+      };
+      const response = await (0, import_fetch.request)(args);
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_form2.default,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_form.Controller,
+              {
+                ...{
+                  control,
+                  name: "filename",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_group.default,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.filename) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_input_text.default,
+                            {
+                              ...{
+                                onChange: (val) => {
+                                  onChange(val);
+                                },
+                                value: value || ""
+                              }
+                            }
+                          ),
+                          label: "File Name"
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        (values == null ? void 0 : values.type) === "video" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_form.Controller,
+              {
+                ...{
+                  control,
+                  name: "poster",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_group.default,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.poster) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "span",
+                            {
+                              ...{
+                                className: "w-full flex items-center space-x-4 py-3"
+                              },
+                              children: [
+                                (_c = (values == null ? void 0 : values.frames) || []) == null ? void 0 : _c.map((frame, index) => {
+                                  var _a2;
+                                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                    "span",
+                                    {
+                                      ...{
+                                        className: "relative"
+                                      },
+                                      children: [
+                                        onFrameDelete && value !== index && !(0, import_frames.isStartingFrame)(frame == null ? void 0 : frame.timestamp) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          "span",
+                                          {
+                                            ...{
+                                              // The corner offset sits on a wrapper: a Button takes no class.
+                                              className: "z-10 absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 flex"
+                                            },
+                                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                              import_button.default,
+                                              {
+                                                ...{
+                                                  "aria-label": "Delete frame",
+                                                  inline: true,
+                                                  onClick: () => onFrameDelete({
+                                                    index,
+                                                    frame
+                                                  }),
+                                                  variant: "link"
+                                                },
+                                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                                  "span",
+                                                  {
+                                                    ...{
+                                                      className: "flex items-center justify-center w-4 h-4 rounded-full bg-white border"
+                                                    },
+                                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                                      import_times.default,
+                                                      {
+                                                        ...{
+                                                          className: "w-3 h-3"
+                                                        }
+                                                      }
+                                                    )
+                                                  }
+                                                )
+                                              }
+                                            )
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                          "span",
+                                          {
+                                            ...{
+                                              className: "relative flex flex-col space-y-1"
+                                            },
+                                            children: [
+                                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                                import_button.default,
+                                                {
+                                                  ...{
+                                                    disabled: value === index,
+                                                    inline: true,
+                                                    onClick: () => onChange(Number(index)),
+                                                    variant: "link"
+                                                  },
+                                                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                                    "span",
+                                                    {
+                                                      ...{
+                                                        className: "aspect-square w-16 rounded-md bg-white bg-contain bg-no-repeat bg-center border" + (value === index ? " before:absolute before:inset-0 before:bg-green/50 before:aspect-square before:w-16 before:rounded" : ""),
+                                                        style: {
+                                                          backgroundImage: "url(" + ((_a2 = frame == null ? void 0 : frame.sizes) == null ? void 0 : _a2["100x100"]) + ")"
+                                                        }
+                                                      }
+                                                    }
+                                                  )
+                                                }
+                                              ),
+                                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                                "span",
+                                                {
+                                                  ...{
+                                                    className: "flex items-center justify-center text-xs text-center h-4"
+                                                  },
+                                                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: frame.timestamp })
+                                                }
+                                              )
+                                            ]
+                                          }
+                                        )
+                                      ]
+                                    },
+                                    index
+                                  );
+                                }),
+                                Boolean(((_d = values == null ? void 0 : values.process) == null ? void 0 : _d.poster) || ((_e = values == null ? void 0 : values.process) == null ? void 0 : _e.encode)) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "span",
+                                  {
+                                    ...{
+                                      className: "flex items-center justify-center aspect-square w-16 rounded-md bg-white border-gray relative mb-4"
+                                    },
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      import_loader.default,
+                                      {
+                                        ...{
+                                          className: "w-6 h-6"
+                                        }
+                                      }
+                                    )
+                                  }
+                                ),
+                                !Boolean((_f = values == null ? void 0 : values.process) == null ? void 0 : _f.poster) && (((_g = values == null ? void 0 : values.frames) == null ? void 0 : _g.length) || 0) < 5 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  import_button.default,
+                                  {
+                                    ...{
+                                      "aria-label": "Add frame",
+                                      inline: true,
+                                      onClick: () => onFrameCreate(),
+                                      variant: "link"
+                                    },
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "span",
+                                      {
+                                        ...{
+                                          className: "flex items-center justify-center aspect-square w-16 rounded-md bg-white border-gray relative mb-4"
+                                        },
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          import_plus.default,
+                                          {
+                                            ...{
+                                              className: "w-6 h-6"
+                                            }
+                                          }
+                                        )
+                                      }
+                                    )
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          label: "Poster image"
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.default,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit"
+                },
+                children: "Save"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var form_organization_file_default = FormOrganizationFile;