@vidispine/vdt-materialui 23.2.0-pre.2 → 23.2.0

package/dist/es/item/ItemFileShareDialog.js

@@ -0,0 +1,253 @@
+import { jsxs as u, jsx as i, Fragment as re } from "react/jsx-runtime";
+import { useState as l, useEffect as ae, useMemo as ne } from "react";
+import x from "clsx";
+import t from "prop-types";
+import { withStyles as le, Dialog as oe, DialogTitle as se, Typography as ce, DialogContent as de, Grid as s, Button as h, Chip as me, DialogActions as ue } from "@material-ui/core";
+import { file as he, item as pe } from "@vidispine/vdt-api";
+import { parseShapeType as ge } from "@vidispine/vdt-js";
+import "../fields/CheckboxField.js";
+import "../fields/CheckboxGroupField.js";
+import "../fields/RadioField.js";
+import O from "../fields/SelectField.js";
+import P from "../fields/TextField.js";
+import "../fields/SliderField.js";
+import "../fields/TagField.js";
+import "../fields/DateField.js";
+import "../fields/SwitchField.js";
+import "../fields/AutocompleteField.js";
+import "../fields/AutocompleteConstraintField.js";
+const fe = () => ({
+  root: {}
+});
+function ye(n, a) {
+  window.open(`mailto:${n}?subject=Vidispine media access link&body=${a}`);
+}
+function Se(n, a) {
+  return Promise.resolve(
+    he.createFileTemporaryCredentials({
+      fileId: n,
+      queryParams: {
+        methodMetadata: [{ key: "format", value: "SIGNED-AUTO" }],
+        "noauth-url": !0,
+        duration: a
+      }
+    })
+  );
+}
+function C({
+  className: n,
+  classes: a,
+  open: V,
+  itemId: v,
+  item: N,
+  queryParams: T,
+  title: j,
+  closeButtonText: w,
+  generateLinkText: A,
+  emailShareText: U,
+  onClose: f,
+  onError: c,
+  DialogProps: q,
+  onSendEmail: B,
+  onShareFile: M
+}) {
+  const [y, D] = l(""), [d, S] = l([]), [b, F] = l(""), [R, I] = l({}), [o, W] = l(N), [p, E] = l(""), [$, G] = l(15);
+  ae(() => {
+    o || pe.getItem({ itemId: v, queryParams: T }).then(({ data: e }) => {
+      W(e);
+    }).catch((e) => c({ message: "Could not retrieve item to share", error: e }));
+  }, [o, c, v, T]);
+  const g = ne(() => !o || !o.shape ? [] : o.shape.map((e) => {
+    const { tag: r, videoCodec: m, height: ee, frameRate: te, fileId: ie } = ge(e);
+    return { label: `${r} (${m}, ${ee}, ${te})`, value: e.id, file: ie };
+  }), [o]), L = {
+    name: "shape",
+    value: y,
+    onChange: ({ target: { value: e } = {} }) => {
+      D(e);
+    }
+  }, K = {
+    name: "duration",
+    value: $,
+    onChange: ({ target: { value: e } = {} }) => {
+      G(e);
+    }
+  }, z = {
+    name: "email",
+    value: b,
+    onChange: ({ target: { value: e } = {} }) => F(e)
+  }, H = () => {
+    D(""), E(""), S([]), f();
+  }, J = (e) => {
+    S((r) => r.filter((m) => m !== e));
+  }, Q = (e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e), k = (e) => {
+    if (!Q(e)) {
+      I({ error: "Please enter a valid email address", touched: !0 });
+      return;
+    }
+    if (d.includes(e)) {
+      I({ error: "Email already added", touched: !0 });
+      return;
+    }
+    S((r) => [...r, e]), F(""), I({});
+  }, X = [
+    { label: "15", value: 15 },
+    { label: "60", value: 60 },
+    { label: "720", value: 720 }
+  ], Y = () => {
+    const { file: e } = g.find(({ value: r }) => r === y);
+    if (e)
+      try {
+        M(e, $).then((r) => E(r.data.uri[0])).catch((r) => c({ message: "Could not share item", error: r }));
+      } catch (r) {
+        c({ message: "Could not share item", error: r });
+      }
+    else
+      c({ message: "Item is not shareable" });
+  }, Z = () => {
+    const e = d.map((m) => m), r = encodeURIComponent(p);
+    B(e.toString(), r), H();
+  }, _ = () => {
+    document.getElementById("url").select(), document.execCommand("copy");
+  };
+  return /* @__PURE__ */ u(
+    oe,
+    {
+      maxWidth: "sm",
+      fullWidth: !0,
+      open: V,
+      onClose: f,
+      "aria-labelledby": "share-dialog",
+      className: x(a.root, "VdtItemFileShareDialog-root", n),
+      ...q,
+      children: [
+        /* @__PURE__ */ i(
+          se,
+          {
+            disableTypography: !0,
+            className: x(a.title, "VdtItemFileShareDialog-title"),
+            children: /* @__PURE__ */ i(ce, { variant: "h6", children: j })
+          }
+        ),
+        /* @__PURE__ */ u(de, { dividers: !0, className: x(a.content, "VdtItemFileShareDialog-content"), children: [
+          /* @__PURE__ */ i(
+            O,
+            {
+              input: L,
+              options: g,
+              FormControlProps: { disabled: !g.length },
+              label: "Shape",
+              required: !0,
+              meta: g.length ? void 0 : { error: "No shapes detected", touched: !0 }
+            }
+          ),
+          /* @__PURE__ */ i(
+            O,
+            {
+              input: K,
+              options: X,
+              label: "Expire duration (minutes)",
+              required: !0
+            }
+          ),
+          /* @__PURE__ */ u(s, { container: !0, spacing: 0, alignItems: "center", direction: "row", children: [
+            /* @__PURE__ */ i(s, { item: !0, xs: 9, children: /* @__PURE__ */ i(
+              P,
+              {
+                id: "url",
+                label: "URL",
+                value: p,
+                InputProps: {
+                  readOnly: !0
+                },
+                variant: "filled",
+                fullWidth: !0,
+                margin: "none"
+              }
+            ) }),
+            /* @__PURE__ */ i(s, { item: !0, xs: 3, style: { textAlign: "right" }, children: /* @__PURE__ */ i(h, { color: "primary", disabled: p === "", onClick: _, children: "Copy to clipboard" }) })
+          ] }),
+          /* @__PURE__ */ i(s, { container: !0, spacing: 0, alignItems: "center", direction: "row", children: p !== "" && /* @__PURE__ */ u(re, { children: [
+            /* @__PURE__ */ i(s, { item: !0, xs: 9, children: /* @__PURE__ */ i(
+              P,
+              {
+                input: z,
+                onKeyDown: ({ key: e }) => {
+                  e === "Enter" && k(b);
+                },
+                margin: "none",
+                id: "email",
+                label: "Email Address",
+                type: "email",
+                meta: R,
+                required: !0,
+                fullWidth: !0
+              }
+            ) }),
+            /* @__PURE__ */ i(s, { item: !0, xs: 3, style: { textAlign: "right" }, children: /* @__PURE__ */ i(h, { onClick: () => k(b), color: "primary", children: "Add Recipient" }) })
+          ] }) }),
+          d.length > 0 && d.map((e) => /* @__PURE__ */ i(
+            me,
+            {
+              className: a.root,
+              label: e,
+              onDelete: () => J(e)
+            },
+            e
+          ))
+        ] }),
+        /* @__PURE__ */ u(ue, { children: [
+          /* @__PURE__ */ i(h, { onClick: f, children: w }),
+          /* @__PURE__ */ i(h, { onClick: Y, disabled: !y, color: "primary", children: A }),
+          d.length > 0 && /* @__PURE__ */ i(h, { onClick: Z, color: "primary", children: U })
+        ] })
+      ]
+    }
+  );
+}
+const qe = le(fe, "VdtItemFileShareDialog")(C);
+C.propTypes = {
+  className: t.string,
+  classes: t.objectOf(t.any),
+  open: t.bool,
+  itemId: t.string,
+  item: t.objectOf(t.any),
+  queryParams: t.objectOf(t.any),
+  title: t.string,
+  closeButtonText: t.string,
+  generateLinkText: t.string,
+  emailShareText: t.string,
+  onClose: t.func,
+  onSuccess: t.func,
+  onError: t.func,
+  DialogProps: t.objectOf(t.any),
+  onSendEmail: t.func,
+  onShareFile: t.func
+};
+C.defaultProps = {
+  className: "VdtItemFileShareDialog",
+  classes: {},
+  open: !1,
+  itemId: void 0,
+  item: void 0,
+  queryParams: {
+    field: ["created", "title", "mimeType", "durationSeconds", "itemId", "collectionId"],
+    content: ["metadata", "thumbnail", "shape"],
+    "noauth-url": !0
+  },
+  title: "Share file",
+  closeButtonText: "Cancel",
+  generateLinkText: "Generate link",
+  emailShareText: "Send email",
+  onClose: () => null,
+  onSuccess: () => null,
+  // eslint-disable-next-line no-console
+  onError: ({ message: n, error: a }) => console.error(`${n}
+${a}`),
+  DialogProps: {},
+  onSendEmail: ye,
+  onShareFile: Se
+};
+export {
+  qe as default
+};

package/dist/es/item/ItemGrid.js

@@ -0,0 +1,39 @@
+import { jsx as e } from "react/jsx-runtime";
+import r from "prop-types";
+import { Grid as i } from "@material-ui/core";
+import c from "./ItemCard.js";
+function m({
+  itemListType: n,
+  ItemCardComponent: p,
+  ItemCardProps: d,
+  GridContainerProps: a,
+  GridItemProps: s
+}) {
+  const { item: o = [] } = n;
+  return /* @__PURE__ */ e(i, { container: !0, ...a, children: o && o.map((t, f) => /* @__PURE__ */ e(i, { item: !0, xs: "auto", ...s, children: /* @__PURE__ */ e(
+    p,
+    {
+      itemId: t.id,
+      itemType: t,
+      index: f,
+      ...d
+    }
+  ) }, t.id)) });
+}
+m.propTypes = {
+  itemListType: r.objectOf(r.any),
+  ItemCardComponent: r.elementType,
+  ItemCardProps: r.objectOf(r.any),
+  GridContainerProps: r.objectOf(r.any),
+  GridItemProps: r.objectOf(r.any)
+};
+m.defaultProps = {
+  itemListType: {},
+  ItemCardComponent: c,
+  ItemCardProps: {},
+  GridContainerProps: {},
+  GridItemProps: {}
+};
+export {
+  m as default
+};

package/dist/es/item/ItemGridDroppable.js

@@ -0,0 +1,75 @@
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
+import { Droppable as u } from "react-beautiful-dnd";
+import { Grid as p } from "@material-ui/core";
+import b from "../media/MediaCard/index.js";
+import g from "./ItemCard.js";
+function C({ ItemCardComponent: t, itemType: i, provided: e, snapshot: s, rubric: h, ...o }) {
+  const { draggableProps: l, dragHandleProps: r } = e, { style: a } = l;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: e.innerRef,
+      ...l,
+      ...r,
+      style: {
+        ...a,
+        height: "inherit"
+      },
+      children: /* @__PURE__ */ n(
+        t,
+        {
+          ...o,
+          itemId: i.id,
+          itemType: i,
+          MediaCardComponent: b,
+          ThumbnailComponent: null
+        }
+      )
+    }
+  );
+}
+function P({
+  ItemCardCloneComponent: t = C,
+  ItemCardComponent: i = g,
+  ItemCardProps: e = {},
+  GridContainerProps: s = {},
+  GridItemProps: h = {},
+  item: o = [],
+  DroppableProps: l = {}
+}) {
+  return /* @__PURE__ */ n(p, { container: !0, ...s, children: o && o.map((r, a) => /* @__PURE__ */ n(p, { item: !0, xs: "auto", ...h, children: /* @__PURE__ */ n(
+    u,
+    {
+      droppableId: r.id,
+      isDropDisabled: !0,
+      renderClone: (d, c, m) => /* @__PURE__ */ n(
+        t,
+        {
+          ItemCardComponent: i,
+          provided: d,
+          snapshot: c,
+          rubric: m,
+          itemType: r,
+          ...e
+        }
+      ),
+      ...l,
+      children: (d) => /* @__PURE__ */ f("div", { ...d.droppableProps, style: { minWidth: 320 }, ref: d.innerRef, children: [
+        /* @__PURE__ */ n(
+          i,
+          {
+            draggableId: r.id,
+            index: a,
+            itemId: r.id,
+            itemType: r,
+            ...e
+          }
+        ),
+        /* @__PURE__ */ n("div", { style: { display: "none", visibility: "hidden" }, children: d.placeholder })
+      ] })
+    }
+  ) }, r.id)) });
+}
+export {
+  P as default
+};

package/dist/es/item/ItemLabel.js

@@ -0,0 +1,31 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import p from "clsx";
+import { withStyles as f, Box as d, Typography as c } from "@material-ui/core";
+import { parseMetadataType as y } from "@vidispine/vdt-js";
+import u from "../general/MimeTypeIcon/index.js";
+const x = () => ({
+  root: {}
+});
+function h({ className: r, classes: a, item: t, labelField: m }) {
+  const [l, s] = i(() => {
+    const e = y(t.metadata, { joinValue: ",", flat: !0 });
+    return [e.mimeType, e[m] || t.id];
+  }, [t]);
+  return /* @__PURE__ */ n(
+    d,
+    {
+      className: p(r, a.root, "VdtItemLabel-root"),
+      display: "flex",
+      alignItems: "flex-end",
+      children: [
+        /* @__PURE__ */ o(u, { mimeType: l }),
+        /* @__PURE__ */ o(c, { style: { fontWeight: "inherit" }, children: s })
+      ]
+    }
+  );
+}
+const V = f(x, { name: "VdtItemLabel" })(h);
+export {
+  V as default
+};

package/dist/es/item/ItemLabelDroppable.js

@@ -0,0 +1,18 @@
+import { withStyles as t } from "@material-ui/core";
+import { compose as r } from "@vidispine/vdt-react";
+import "react/jsx-runtime";
+import "react";
+import "clsx";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "../dnd/contexts/DragAndDropContext.js";
+import m from "../dnd/hoc/withDrop.js";
+import p from "./ItemLabel.js";
+const e = (o) => ({
+  isOver: {
+    backgroundColor: o.palette.primary.main
+  }
+}), D = r(t(e, { name: "VdtItemLabelDroppable" }), m)(p);
+export {
+  D as default
+};

package/dist/es/item/ItemList/ItemList.js

@@ -0,0 +1,46 @@
+import { jsx as o } from "react/jsx-runtime";
+import c from "clsx";
+import t from "prop-types";
+import { List as l } from "@material-ui/core";
+import f from "../ItemListItem/index.js";
+const u = () => ({
+  root: {
+    width: "100%"
+  }
+});
+function s({
+  classes: m,
+  className: i,
+  itemListType: r,
+  ItemListItemComponent: p,
+  ItemListItemProps: n
+}) {
+  const { item: a = [] } = r;
+  return /* @__PURE__ */ o(l, { className: c(m.root, "VdtItemList-root", i), children: a.map((e) => /* @__PURE__ */ o(
+    p,
+    {
+      itemType: e,
+      primary: "title",
+      ...n
+    },
+    e.id
+  )) });
+}
+s.propTypes = {
+  className: t.string,
+  classes: t.objectOf(t.any),
+  itemListType: t.objectOf(t.any),
+  ItemListItemComponent: t.elementType,
+  ItemListItemProps: t.objectOf(t.any)
+};
+s.defaultProps = {
+  className: void 0,
+  classes: {},
+  itemListType: {},
+  ItemListItemComponent: f,
+  ItemListItemProps: {}
+};
+export {
+  s as default,
+  u as styles
+};

package/dist/es/item/ItemList/index.js

@@ -0,0 +1,7 @@
+import { withStyles as t } from "@material-ui/core";
+import e, { styles as m } from "./ItemList.js";
+const s = t(m, { name: "VdtItemList" })(e);
+s.displayName = "ItemList";
+export {
+  s as default
+};

package/dist/es/item/ItemListItem/ItemListItem.js

@@ -0,0 +1,141 @@
+import { jsxs as j, jsx as o } from "react/jsx-runtime";
+import a from "clsx";
+import t from "prop-types";
+import { ListItem as N, ListItemAvatar as g, ListItemText as h, ListItemSecondaryAction as C } from "@material-ui/core";
+import { Skeleton as L } from "@material-ui/lab";
+import { parseMetadataType as S } from "@vidispine/vdt-js";
+import V from "../../media/MediaCardAvatar/index.js";
+const D = () => ({
+  root: {},
+  ListItemAvatar: {},
+  Avatar: {},
+  ListItemText: {},
+  Action: {},
+  ListItemSecondaryAction: {
+    visibility: "hidden"
+  },
+  ListItemContainer: {
+    "&:hover $ListItemSecondaryAction": {
+      visibility: "visible"
+    }
+  }
+});
+function l({
+  classes: e,
+  className: y,
+  itemType: s,
+  onClick: p,
+  parseMetadataOptions: v,
+  primary: n,
+  secondary: m,
+  AvatarComponent: A,
+  AvatarProps: T,
+  ActionComponent: I,
+  ActionProps: b,
+  ListItemProps: u,
+  skeleton: r,
+  ListItemAvatarProps: O,
+  ListItemTextProps: x
+}) {
+  const { id: c, metadata: P } = s;
+  let f, d;
+  if (r === !1) {
+    const i = S(P, v);
+    typeof n == "string" ? f = i[n] : typeof n == "function" && (f = n({ ...i, itemType: s, itemId: c })), typeof m == "string" ? d = i[m] : typeof m == "function" && (d = m({ ...i, itemType: s, itemId: c }));
+  }
+  return /* @__PURE__ */ j(
+    N,
+    {
+      className: a(y, e.root, "VdtItemListItem-root"),
+      onClick: p ? (i) => p(i, { id: c }) : void 0,
+      button: p ? !0 : void 0,
+      classes: { container: e.ListItemContainer },
+      ...u,
+      children: [
+        /* @__PURE__ */ o(
+          g,
+          {
+            className: a(e.ListItemAvatar, "VdtItemListItem-ListItemAvatar"),
+            ...O,
+            children: /* @__PURE__ */ o(
+              A,
+              {
+                avatar: "item",
+                itemId: c,
+                itemType: s,
+                skeleton: r,
+                className: a(e.Avatar, "VdtItemListItem-Avatar"),
+                ...T
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ o(
+          h,
+          {
+            primary: r ? /* @__PURE__ */ o(L, { width: 120 }) : f,
+            secondary: r ? /* @__PURE__ */ o(L, { width: 60 }) : d,
+            className: a(e.ListItemText, "VdtItemListItem-ListItemText"),
+            ...x
+          }
+        ),
+        I && /* @__PURE__ */ o(
+          C,
+          {
+            className: a(
+              e.ListItemSecondaryAction,
+              "VdtItemListItem-ListItemSecondaryAction"
+            ),
+            children: /* @__PURE__ */ o(
+              I,
+              {
+                skeleton: r,
+                itemType: s,
+                className: a(e.Action, "VdtItemListItem-Action"),
+                ...b
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+l.propTypes = {
+  className: t.string,
+  classes: t.objectOf(t.string),
+  itemType: t.objectOf(t.any),
+  primary: t.oneOfType([t.string, t.func]),
+  secondary: t.oneOfType([t.string, t.func]),
+  onClick: t.func,
+  ActionComponent: t.elementType,
+  ActionProps: t.objectOf(t.any),
+  AvatarComponent: t.elementType,
+  AvatarProps: t.objectOf(t.any),
+  ListItemProps: t.objectOf(t.any),
+  ListItemAvatarProps: t.objectOf(t.any),
+  ListItemTextProps: t.objectOf(t.any),
+  parseMetadataOptions: t.objectOf(t.any),
+  skeleton: t.bool
+};
+l.defaultProps = {
+  className: void 0,
+  classes: {},
+  itemType: {},
+  primary: ({ itemId: e }) => e,
+  secondary: void 0,
+  onClick: void 0,
+  ActionComponent: void 0,
+  ActionProps: {},
+  AvatarComponent: V,
+  AvatarProps: {},
+  ListItemProps: {},
+  ListItemAvatarProps: {},
+  ListItemTextProps: {},
+  parseMetadataOptions: { flat: !0, arrayOnSingleValue: !1 },
+  skeleton: !1
+};
+export {
+  l as default,
+  D as styles
+};

package/dist/es/item/ItemListItem/index.js

@@ -0,0 +1,7 @@
+import { withStyles as t } from "@material-ui/core";
+import e, { styles as m } from "./ItemListItem.js";
+const s = t(m, { name: "VdtItemListItem" })(e);
+s.displayName = "ItemListItem";
+export {
+  s as default
+};

package/dist/es/item/ItemMetadataEdit.js

@@ -0,0 +1,50 @@
+import { jsx as M } from "react/jsx-runtime";
+import { useMemo as b } from "react";
+import { Form as g } from "react-final-form";
+import { item as S } from "@vidispine/vdt-api";
+import { parseMetadataType as T, createMetadataType as v } from "@vidispine/vdt-js";
+import { stringsToBooleans as h, booleansToStrings as j } from "../mapStringsBooleans.js";
+import B from "./ItemMetadataForm.js";
+function D({
+  itemId: r,
+  onSuccess: s,
+  fields: n,
+  groups: m,
+  itemType: i,
+  onRefresh: c,
+  isLoading: u,
+  joinValue: l,
+  // eslint-disable-next-line no-console
+  onError: p = (t) => console.error(t.message)
+}) {
+  const { metadata: t } = i, d = b(() => {
+    const e = T(t, {
+      flat: !0,
+      arrayOnSingleValue: !1
+    });
+    return Object.entries(e).reduce(h, {});
+  }, [t]);
+  return !u && /* @__PURE__ */ M(
+    g,
+    {
+      onSubmit: async (e) => {
+        const o = Object.entries(e).reduce(
+          (a, y) => j(a, y, l),
+          {}
+        ), f = v(o);
+        try {
+          await S.updateItemMetadata({ itemId: r, metadataDocument: f }), await c(), s();
+        } catch (a) {
+          p(a);
+        }
+      },
+      component: B,
+      fields: n,
+      groups: m,
+      initialValues: d
+    }
+  );
+}
+export {
+  D as default
+};