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

package/dist/es/item/ItemParentsTab.js

@@ -0,0 +1,160 @@
+import { jsx as e, jsxs as a, Fragment as q } from "react/jsx-runtime";
+import { useState as I, useEffect as x } from "react";
+import z from "clsx";
+import A from "lodash.update";
+import t from "prop-types";
+import { withStyles as E, ButtonBase as R, Menu as _, MenuItem as k, ListItemIcon as O, ListItemText as S, Dialog as F } from "@material-ui/core";
+import { MoreVert as N, Forward as V, RemoveCircleOutline as w } from "@material-ui/icons";
+import { item as B, collection as $ } from "@vidispine/vdt-api";
+import { parseMetadataType as G } from "@vidispine/vdt-js";
+import "../collection/CollectionCard/index.js";
+import "../collection/CollectionCardThumbnail/index.js";
+import "../collection/CollectionGrid/index.js";
+import "../collection/CollectionRow/index.js";
+import "../collection/CollectionTable/index.js";
+import "../collection/CollectionTreeList/index.js";
+import H from "../collection/CollectionList/index.js";
+import "../collection/CollectionListItem/index.js";
+import "../collection/CollectionMetadataTab.js";
+import "react-final-form";
+import "./ItemMetadataForm.js";
+import "../collection/CollectionAccessTab.js";
+import "../collection/CollectionCreateDialog/index.js";
+import "../collection/AddToCollectionDialog/index.js";
+import J from "../collection/RemoveFromCollectionDialog/index.js";
+import "../collection/CollectionSearchPicker/index.js";
+import "../collection/CollectionContent/index.js";
+import K from "../hooks/useMenu.js";
+const Q = {};
+function U({
+  collectionId: o,
+  itemId: s,
+  removeText: i = "Remove Item From Collection",
+  onClick: p,
+  goToText: f = "Go To Collection",
+  onRefresh: u
+}) {
+  const { anchorEl: d, onOpen: h, onClose: l, isOpen: C, onClick: c } = K(), [y, n] = I(!1);
+  return /* @__PURE__ */ a(q, { children: [
+    /* @__PURE__ */ e(R, { size: "small", onClick: h, children: /* @__PURE__ */ e(N, {}) }),
+    /* @__PURE__ */ a(
+      _,
+      {
+        anchorEl: d,
+        open: C,
+        keepMounted: !0,
+        onClose: l,
+        getContentAnchorEl: null,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: [
+          /* @__PURE__ */ a(k, { onClick: c((m) => p(m, { collectionId: o })), children: [
+            /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(V, { fontSize: "small" }) }),
+            /* @__PURE__ */ e(S, { primary: f })
+          ] }),
+          /* @__PURE__ */ a(k, { onClick: c(() => n(!0)), children: [
+            /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(w, { fontSize: "small" }) }),
+            /* @__PURE__ */ e(S, { primary: i })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(F, { open: y, children: /* @__PURE__ */ e(
+      J,
+      {
+        collectionId: o,
+        entityId: s,
+        entityType: "item",
+        onClose: () => n(!1),
+        onSuccess: () => {
+          u(), n(!1);
+        }
+      }
+    ) })
+  ] });
+}
+function g({
+  className: o,
+  classes: s,
+  itemId: i,
+  itemSearchDocument: p,
+  collectionListType: f,
+  queryParams: u,
+  onError: d,
+  CollectionListComponent: h,
+  CollectionListProps: l
+}) {
+  const [C, c] = I(f), [y, n] = I(!0), m = () => {
+    B.getItem({ itemId: i, queryParams: { content: "metadata", field: "__collection" } }).then(({ data: r }) => {
+      const { __collection: L = [] } = G(r.metadata, {
+        flat: !0
+      });
+      if (L.length === 0)
+        return { data: {} };
+      const j = {
+        name: "collectionId",
+        value: L.map((T) => ({ value: T }))
+      }, D = A(p, "field", (T = []) => [
+        ...T.filter((M) => M.name !== "collectionId"),
+        j
+      ]);
+      return $.searchCollection({ itemSearchDocument: D, queryParams: u });
+    }).then(({ data: r }) => {
+      c(r), n(!1);
+    }).catch((r) => d(r));
+  };
+  x(() => {
+    m();
+  }, []);
+  const { CollectionListItemProps: P = {} } = l, { onClick: b, ActionProps: v = {} } = P;
+  return /* @__PURE__ */ e("div", { className: z(s.root, "VdtItemParentsTab-root", o), children: /* @__PURE__ */ e(
+    h,
+    {
+      collectionListType: C,
+      ...l,
+      CollectionListItemProps: {
+        skeleton: y,
+        ActionProps: {
+          itemId: i,
+          onClick: b,
+          onRefresh: m,
+          ...v
+        },
+        ActionComponent: U,
+        ...P
+      }
+    }
+  ) });
+}
+g.propTypes = {
+  className: t.string,
+  classes: t.objectOf(t.any).isRequired,
+  itemId: t.string.isRequired,
+  itemSearchDocument: t.objectOf(t.any),
+  queryParams: t.objectOf(t.any),
+  onError: t.func,
+  CollectionListComponent: t.elementType,
+  CollectionListProps: t.objectOf(t.any),
+  collectionListType: t.objectOf(t.any)
+};
+g.defaultProps = {
+  className: void 0,
+  itemSearchDocument: {},
+  queryParams: { content: "metadata", field: "title" },
+  // eslint-disable-next-line no-console
+  onError: ({ message: o }) => console.error(o),
+  CollectionListComponent: H,
+  CollectionListProps: {},
+  collectionListType: { collection: [...Array(3).keys()].map((o) => ({ id: String(o) })) }
+};
+const kt = E(Q, { name: "VdtItemParentsTab" })(g);
+export {
+  g as ItemParentsTab,
+  kt as default
+};

package/dist/es/item/ItemPoster.js

@@ -0,0 +1,40 @@
+import { jsxs as f, Fragment as b, jsx as m } from "react/jsx-runtime";
+import { useMemo as w, useState as L } from "react";
+import { utils as x } from "@vidispine/vdt-api";
+import { formatTimeCodeText as I } from "@vidispine/vdt-js";
+import P from "./ItemPosterDialog.js";
+import U from "./ItemPosterList.js";
+const { defaultClient: j } = x, g = (s, n) => {
+  const e = s.split("poster")[1].split("?hash")[0], o = I(e.split("/").pop()), t = n.find(
+    (i) => e === i.split("thumbnail")[1].split("?hash")[0]
+  );
+  return { posterUri: s, thumbnailUri: t, time: o };
+}, T = (s, n) => {
+  j({ url: s, method: "GET", responseType: "blob" }).then(({ data: e }) => {
+    const o = window.URL.createObjectURL(new Blob([e])), t = document.createElement("a");
+    t.href = o, t.setAttribute("download", n), t.click(), window.URL.revokeObjectURL(o);
+  });
+};
+function B({ itemType: s = {} }) {
+  const { posters: { uri: n = [] } = {}, thumbnails: { uri: e = [] } = {} } = s, o = w(
+    () => n.map((r) => g(r, e)),
+    [n, e]
+  ), [t, i] = L(), c = t !== void 0, { posterUri: l } = o[t] || {}, a = (r) => i(r), p = () => i(), d = () => T(l.replace("APInoauth", "API"), "poster.jpeg"), h = t !== 0 ? () => i(t - 1) : void 0, u = t + 1 !== o.length ? () => i(t + 1) : void 0;
+  return /* @__PURE__ */ f(b, { children: [
+    /* @__PURE__ */ m(U, { imgList: o, handleOpen: a }),
+    /* @__PURE__ */ m(
+      P,
+      {
+        open: c,
+        posterUri: l,
+        handleClose: p,
+        handleBefore: h,
+        handleNext: u,
+        handleDownload: d
+      }
+    )
+  ] });
+}
+export {
+  B as default
+};

package/dist/es/item/ItemPosterDialog.js

@@ -0,0 +1,35 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Dialog as s, Toolbar as h, Box as r, IconButton as t } from "@material-ui/core";
+import { Close as g, NavigateBefore as f, NavigateNext as m, SaveAlt as u } from "@material-ui/icons";
+function v({
+  open: o,
+  posterUri: d,
+  handleClose: l,
+  handleBefore: n,
+  handleNext: c,
+  handleDownload: a
+}) {
+  return /* @__PURE__ */ i(s, { fullScreen: !0, open: o, onClose: l, children: [
+    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ i(r, { display: "flex", justifyContent: "space-between", width: "100%", children: [
+      /* @__PURE__ */ e(t, { edge: "start", color: "inherit", onClick: l, children: /* @__PURE__ */ e(g, {}) }),
+      /* @__PURE__ */ i(r, { children: [
+        /* @__PURE__ */ e(
+          t,
+          {
+            edge: "start",
+            color: "inherit",
+            disabled: !n,
+            onClick: n,
+            children: /* @__PURE__ */ e(f, {})
+          }
+        ),
+        /* @__PURE__ */ e(t, { edge: "start", color: "inherit", disabled: !c, onClick: c, children: /* @__PURE__ */ e(m, {}) })
+      ] }),
+      /* @__PURE__ */ e(t, { edge: "start", color: "inherit", onClick: a, children: /* @__PURE__ */ e(u, {}) })
+    ] }) }),
+    o && /* @__PURE__ */ e(r, { width: "100vw", height: "80vh", display: "flex", justifyContent: "center", children: /* @__PURE__ */ e("img", { src: d, alt: "", style: { maxWidth: "100%", maxHeight: "100%" } }) })
+  ] });
+}
+export {
+  v as default
+};

package/dist/es/item/ItemPosterList.js

@@ -0,0 +1,45 @@
+import { jsx as o } from "react/jsx-runtime";
+import e from "clsx";
+import { withStyles as d } from "@material-ui/core";
+import l from "../media/MediaCardThumbnail/index.js";
+const f = (t) => ({
+  root: {},
+  posterRoot: {
+    width: 320,
+    margin: t.spacing(2),
+    cursor: "pointer"
+  }
+});
+function h({
+  classes: t,
+  className: m,
+  imgList: i = [],
+  handleOpen: r,
+  MediaCardThumbnailComponent: n = l,
+  MediaCardThumbnailProps: a = {}
+}) {
+  return /* @__PURE__ */ o("div", { className: e(t.root, m, "VdtItemPosterList-root"), children: i.map(({ thumbnailUri: s, time: p }, c) => (
+    // eslint-disable-next-line max-len
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: e(t.posterRoot, "VdtItemPosterList-posterRoot"),
+        onClick: r ? () => r(c) : void 0,
+        children: /* @__PURE__ */ o(
+          n,
+          {
+            image: s,
+            labelRightBottom: p.toDuration({ format: "hhmmss" }),
+            ...a
+          }
+        )
+      },
+      s
+    )
+  )) });
+}
+const u = d(f, { name: "VdtItemPosterList" })(h);
+export {
+  u as default
+};

package/dist/es/item/ItemPosterTab.js

@@ -0,0 +1,21 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useRef as u, useEffect as m } from "react";
+import { useGetItem as n } from "@vidispine/vdt-react";
+import a from "./ItemPoster.js";
+const c = {
+  content: "poster,thumbnail",
+  "noauth-url": !0,
+  url: "false"
+};
+function R({ itemId: r, hidden: t }) {
+  const { itemType: s, onRefresh: e } = n({
+    itemId: r,
+    queryParams: c
+  }), o = u(t);
+  return m(() => {
+    t === !1 && t !== o.current && e(), o.current = t;
+  }, [t, e]), /* @__PURE__ */ f(a, { itemId: r, itemType: s });
+}
+export {
+  R as default
+};

package/dist/es/item/ItemRelationRemoveDialog.js

@@ -0,0 +1,59 @@
+import { jsx as p } from "react/jsx-runtime";
+import o from "prop-types";
+import { withStyles as u } from "@material-ui/core";
+import { item as C } from "@vidispine/vdt-api";
+import R from "../ConfirmationDialog.js";
+function t({
+  open: e,
+  onClose: n,
+  onSuccess: r,
+  relationId: i,
+  onError: m,
+  onConfirm: a,
+  ConfirmationDialogProps: l,
+  titleText: f,
+  confirmText: s,
+  rejectText: c
+}) {
+  return /* @__PURE__ */ p(
+    R,
+    {
+      open: e,
+      onReject: n,
+      titleText: f,
+      confirmText: s,
+      rejectText: c,
+      onConfirm: () => a({ relationId: i }).then(r).catch(m),
+      ...l
+    }
+  );
+}
+t.propTypes = {
+  relationId: o.string.isRequired,
+  open: o.bool,
+  onClose: o.func,
+  onSuccess: o.func,
+  onError: o.func,
+  onConfirm: o.func,
+  ConfirmationDialogProps: o.objectOf(o.any),
+  titleText: o.string,
+  confirmText: o.string,
+  rejectText: o.string
+};
+t.defaultProps = {
+  open: !1,
+  onClose: void 0,
+  onSuccess: void 0,
+  // eslint-disable-next-line no-console
+  onError: ({ message: e, error: n }) => console.error(`${e}
+${n}`),
+  onConfirm: ({ relationId: e }) => C.removeRelation({ relationId: e }),
+  ConfirmationDialogProps: {},
+  titleText: "Remove relation?",
+  confirmText: "Remove",
+  rejectText: "Cancel"
+};
+const h = u({}, { name: "VdtItemRelationRemoveDialog" })(t);
+export {
+  h as default
+};

package/dist/es/item/ItemRelationsTab.js

@@ -0,0 +1,195 @@
+import { jsxs as p, jsx as t, Fragment as B } from "react/jsx-runtime";
+import { useState as M, useEffect as T } from "react";
+import F from "clsx";
+import V from "lodash.update";
+import e from "prop-types";
+import { withStyles as G, Button as U, ButtonBase as _, Menu as $, MenuItem as P, ListItemIcon as k, ListItemText as x } from "@material-ui/core";
+import { Add as H, Forward as J, RemoveCircleOutline as K, MoreVert as Q } from "@material-ui/icons";
+import { item as j } from "@vidispine/vdt-api";
+import { useApi as q } from "@vidispine/vdt-react";
+import W from "../hooks/useMenu.js";
+import X from "./AddRelationDialog.js";
+import Y from "./ItemList/index.js";
+import Z from "./ItemRelationRemoveDialog.js";
+const ee = {
+  root: {},
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end"
+  },
+  button: {}
+};
+function te({
+  itemId: r,
+  itemType: o,
+  itemRelationListType: i = {},
+  removeText: g = "Remove Relation",
+  onClick: C,
+  goToText: f = "Go To Item",
+  onRefresh: R,
+  onRemove: l,
+  MenuIcon: y = Q
+}) {
+  const { anchorEl: v, onOpen: A, onClose: u, isOpen: D, onClick: m } = W(), [c, h] = M(!1), s = () => h(!1), { relation: O = [] } = i, { id: b } = O.find(
+    ({ direction: { source: n, target: d } = {} }) => (n === o.id || d === o.id) && (n === r || d === r)
+  ) || {};
+  return /* @__PURE__ */ p(B, { children: [
+    /* @__PURE__ */ t(_, { size: "small", onClick: A, children: /* @__PURE__ */ t(y, {}) }),
+    /* @__PURE__ */ p(
+      $,
+      {
+        anchorEl: v,
+        open: D,
+        keepMounted: !0,
+        onClose: u,
+        getContentAnchorEl: null,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: [
+          /* @__PURE__ */ p(P, { onClick: m((n) => C(n, { id: o.id })), children: [
+            /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(J, { fontSize: "small" }) }),
+            /* @__PURE__ */ t(x, { primary: f })
+          ] }),
+          /* @__PURE__ */ p(P, { onClick: m(() => h(!0)), children: [
+            /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(K, { fontSize: "small" }) }),
+            /* @__PURE__ */ t(x, { primary: g })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      Z,
+      {
+        itemId: o.id,
+        relationId: b,
+        open: c,
+        onClose: s,
+        onSuccess: () => {
+          s(), l && l(), R();
+        }
+      }
+    )
+  ] });
+}
+function S({
+  className: r,
+  classes: o,
+  itemId: i,
+  itemSearchDocument: g,
+  queryParams: C,
+  onError: f,
+  ItemListComponent: R,
+  ItemListProps: l,
+  onAdd: y,
+  onRemove: v,
+  addText: A,
+  direction: u
+}) {
+  const [D, m] = M(!1), { data: c = {}, request: h } = q(
+    j.listItemRelation
+  ), { data: s, request: O, reset: b } = q(j.searchItem), n = () => h({ itemId: i, queryParams: { direction: u } }).catch((I) => f(I.message));
+  T(() => {
+    n();
+  }, [i, u]), T(() => {
+    const { relation: I = [] } = c;
+    if (I.length === 0) {
+      s && s.hits > 0 && b();
+      return;
+    }
+    const E = {
+      name: "itemId",
+      value: I.map(({ direction: { source: a, target: L } }) => ({
+        value: a === i ? L : a
+      }))
+    }, w = V(g, "field", (a = []) => [
+      ...a.filter((L) => L.name !== "itemId"),
+      E
+    ]);
+    O({ itemSearchDocument: w, queryParams: C }).catch((a) => f(a.message));
+  }, [c]);
+  const { ItemListItemProps: d = {} } = l, { onClick: z, ActionProps: N = {} } = d;
+  return /* @__PURE__ */ p("div", { className: F(o.root, "VdtItemRelationsTab-root", r), children: [
+    /* @__PURE__ */ t("div", { className: o.actions, children: /* @__PURE__ */ t(
+      U,
+      {
+        variant: "contained",
+        color: "primary",
+        className: o.button,
+        startIcon: /* @__PURE__ */ t(H, {}),
+        onClick: () => {
+          m(!0);
+        },
+        children: A
+      }
+    ) }),
+    /* @__PURE__ */ t(
+      R,
+      {
+        itemListType: s,
+        ...l,
+        ItemListItemProps: {
+          ActionProps: {
+            itemId: i,
+            onClick: z,
+            onRefresh: n,
+            itemRelationListType: c,
+            onRemove: v,
+            ...N
+          },
+          ActionComponent: te,
+          ...d
+        }
+      }
+    ),
+    /* @__PURE__ */ t(
+      X,
+      {
+        itemId: i,
+        open: D,
+        setOpenDialog: m,
+        onSuccess: y,
+        onRefresh: n
+      }
+    )
+  ] });
+}
+S.propTypes = {
+  className: e.string,
+  classes: e.objectOf(e.any).isRequired,
+  itemId: e.string.isRequired,
+  itemSearchDocument: e.objectOf(e.any),
+  queryParams: e.objectOf(e.any),
+  onError: e.func,
+  ItemListComponent: e.elementType,
+  ItemListProps: e.objectOf(e.any),
+  onRemove: e.func,
+  onAdd: e.func,
+  addText: e.string,
+  direction: e.oneOf(["U", "S", "T", "D", "A"])
+};
+S.defaultProps = {
+  className: void 0,
+  itemSearchDocument: {},
+  queryParams: { content: "metadata", field: "title" },
+  // eslint-disable-next-line no-console
+  onError: ({ message: r }) => console.error(r),
+  ItemListComponent: Y,
+  ItemListProps: {},
+  onRemove: () => {
+  },
+  onAdd: () => {
+  },
+  addText: "Add new relation",
+  direction: "A"
+};
+const he = G(ee, { name: "VdtItemRelationsTab" })(S);
+export {
+  S as ItemRelationsTab,
+  he as default
+};

package/dist/es/item/ItemRow.js

@@ -0,0 +1,65 @@
+import { jsxs as T, jsx as o } from "react/jsx-runtime";
+import { useMemo as b } from "react";
+import { TableRow as v, TableCell as p, Hidden as y, Box as C } from "@material-ui/core";
+import { parseMetadataType as i } from "@vidispine/vdt-js";
+import k from "../media/MediaCardCheckbox.js";
+const f = ({ itemType: e, parseMetadataOpts: l, options: d }) => {
+  const { metadata: r = {} } = e, t = i(r, l);
+  return d.map(({ value: c }) => {
+    const { [c]: u } = t;
+    return u;
+  });
+};
+function x({
+  options: e = [],
+  metadataToProps: l = f,
+  parseMetadataOpts: d = { joinValue: ", ", flat: !0 },
+  selected: r,
+  onCheck: t,
+  onClick: c,
+  TableRowProps: u = {},
+  ...h
+}) {
+  const { itemType: n } = h, s = b(
+    () => l({
+      itemType: n,
+      parseMetadataOpts: d,
+      options: e
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [n, e, f]
+  );
+  return /* @__PURE__ */ T(
+    v,
+    {
+      hover: !0,
+      selected: r,
+      onClick: c,
+      style: { cursor: "pointer" },
+      ...u,
+      children: [
+        t && /* @__PURE__ */ o(p, { padding: "checkbox", children: /* @__PURE__ */ o(k, { checked: r, handleChecked: (m) => {
+          t && t(m, !r, h);
+        } }) }),
+        s.map((m, a) => /* @__PURE__ */ o(
+          y,
+          {
+            only: e[a].hide,
+            children: /* @__PURE__ */ o(p, { children: e[a].valueComponent ? /* @__PURE__ */ o(
+              C,
+              {
+                component: e[a].valueComponent,
+                value: m,
+                innerProps: h
+              }
+            ) : m })
+          },
+          e[a].key || e[a].value || e[a].label
+        ))
+      ]
+    }
+  );
+}
+export {
+  x as default
+};