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

package/dist/es/item/ItemSearchPicker.js

@@ -0,0 +1,92 @@
+import { jsxs as R, jsx as a } from "react/jsx-runtime";
+import { useState as j, useEffect as q } from "react";
+import { withStyles as L } from "@material-ui/core";
+import { SearchItem as W, useSearch as $ } from "@vidispine/vdt-react";
+import D from "../search/Pagination.js";
+import E from "../search/SearchInput/index.js";
+import O from "./ItemTable.js";
+function V(e) {
+  const {
+    itemListType: { hits: r = 0 }
+  } = e;
+  return /* @__PURE__ */ a(D, { count: r, ...e });
+}
+function z(e) {
+  const { isLoading: r } = e;
+  return /* @__PURE__ */ a(E, { submitting: r, ...e });
+}
+const A = {
+  queryParams: {
+    field: ["itemId", "title", "__user"],
+    content: "metadata"
+  }
+};
+function B({
+  onChange: e,
+  onCheck: r = () => {
+  },
+  ItemTableComponent: c = O,
+  ItemTableProps: m = {},
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  searchProps: s = $(A),
+  idLabelText: u = "Id",
+  titleLabelText: l = "Title",
+  ownerLabelText: h = "Owner",
+  searchPlaceholder: f = "Search item",
+  SearchInputProps: S = {},
+  PaginationProps: p = {},
+  SearchItemProps: P = {}
+}) {
+  const { state: d, setSearchText: g, onChangeRowsPerPage: k, onChangePage: I } = s, { matrixParams: b, queryParams: w, itemSearchDocument: x, page: C, rowsPerPage: y } = d, [i, o] = j([]), T = (t) => {
+    i.includes(t) ? o((n) => n.filter((v) => v !== t)) : o((n) => [...n, t]);
+  };
+  q(() => e && e(i), [i]);
+  const _ = ({ id: t }) => T(t);
+  return /* @__PURE__ */ R(
+    W,
+    {
+      itemSearchDocument: x,
+      matrixParams: b,
+      queryParams: w,
+      ...P,
+      children: [
+        /* @__PURE__ */ a(
+          z,
+          {
+            onSubmit: (t) => g(`*${t}*`),
+            searchPlaceholder: f,
+            ...S
+          }
+        ),
+        /* @__PURE__ */ a(
+          c,
+          {
+            onRowClick: _,
+            onCheck: r,
+            selected: i,
+            options: [
+              { label: l, value: "title" },
+              { label: u, value: "itemId" },
+              { label: h, value: "__user" }
+            ],
+            ...m
+          }
+        ),
+        /* @__PURE__ */ a(
+          V,
+          {
+            onChangePage: I,
+            onChangeRowsPerPage: k,
+            page: C,
+            rowsPerPage: y,
+            ...p
+          }
+        )
+      ]
+    }
+  );
+}
+const Q = L({}, { name: "VdtItemSearchPicker" })(B);
+export {
+  Q as default
+};

package/dist/es/item/ItemShapeTab.js

@@ -0,0 +1,26 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useRef as p, useEffect as c } from "react";
+import { shape as u } from "@vidispine/vdt-api";
+import { useGetItem as i } from "@vidispine/vdt-react";
+import h from "./ItemShapeTable/index.js";
+const l = {
+  content: "shape",
+  methodMetadata: [
+    { key: "format", value: "SIGNED-AUTO" },
+    { key: "contentDisposition", value: "attachment" }
+  ]
+};
+function k({ itemId: t, hidden: e, ...a }) {
+  const { itemType: m, onRefresh: o } = i({
+    itemId: t,
+    queryParams: l
+  }), n = ({ shapeId: s }) => {
+    u.removeShape({ shapeId: s, itemId: t }).then(o);
+  }, r = p(e);
+  return c(() => {
+    e === !1 && e !== r.current && o(), r.current = e;
+  }, [e, o]), /* @__PURE__ */ f(h, { itemId: t, itemType: m, onRemove: n, ...a });
+}
+export {
+  k as default
+};

package/dist/es/item/ItemShapeTable/ItemShapeTable.js

@@ -0,0 +1,108 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import b from "clsx";
+import e from "prop-types";
+import { Table as u, TableHead as w, TableRow as v, TableCell as r, Hidden as R, TableBody as I } from "@material-ui/core";
+import s from "@vidispine/proptypes";
+import S from "./components/ItemShapeRow.js";
+const D = () => ({
+  root: { width: "100%" },
+  ItemShapeRow: {}
+});
+function d({
+  classes: i,
+  className: l,
+  itemType: n,
+  canExpand: p,
+  itemId: m,
+  onRemove: c,
+  storageListType: h,
+  displayMethodTypes: y,
+  storageMetadataKeys: T,
+  showDownload: f
+}) {
+  const { shape: g = [] } = n;
+  return /* @__PURE__ */ a(u, { className: b(i.root, l), size: "small", padding: "none", children: [
+    /* @__PURE__ */ o(w, { children: /* @__PURE__ */ a(v, { children: [
+      /* @__PURE__ */ o(r, {}),
+      /* @__PURE__ */ o(r, { children: "Tags" }),
+      /* @__PURE__ */ a(R, { smDown: !0, children: [
+        /* @__PURE__ */ o(r, { children: "Container" }),
+        /* @__PURE__ */ o(r, { children: "Video" }),
+        /* @__PURE__ */ o(r, { children: "Audio" }),
+        /* @__PURE__ */ o(r, { children: "Frame Rate" })
+      ] }),
+      /* @__PURE__ */ o(r, { children: "Picture Size" }),
+      /* @__PURE__ */ o(r, { children: "File Size" }),
+      /* @__PURE__ */ o(r, {})
+    ] }) }),
+    /* @__PURE__ */ o(I, { children: g.map((t) => /* @__PURE__ */ o(
+      S,
+      {
+        className: i.ItemShapeRow,
+        shapeType: t,
+        TableRowProps: { hover: !0 },
+        canExpand: p,
+        itemId: m,
+        onRemove: c,
+        storageListType: h,
+        displayMethodTypes: y,
+        storageMetadataKeys: T,
+        showDownload: f
+      },
+      t.id
+    )) })
+  ] });
+}
+d.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  itemId: e.string,
+  onRemove: e.func,
+  itemType: s.ItemType,
+  /**
+   * Show the shape expansion information.
+   */
+  canExpand: e.bool,
+  /**
+   * Pass in storageListType to show additional information for files on these storages
+   */
+  storageListType: s.StorageListType,
+  /**
+   * Select which display methods types to show for files
+   * `undefined` will display all available methods
+   */
+  displayMethodTypes: e.arrayOf(e.string),
+  /**
+   * Select which storage metadata to show in file storage info
+   * `undefined` not display any of them
+   */
+  storageMetadataKeys: e.arrayOf(
+    e.shape({ key: e.string, label: e.string })
+  ),
+  /**
+   * Show or hide shape download button depending on users role
+   */
+  showDownload: e.bool
+};
+d.defaultProps = {
+  className: void 0,
+  classes: {},
+  itemType: {},
+  itemId: void 0,
+  onRemove: void 0,
+  canExpand: !0,
+  storageListType: void 0,
+  displayMethodTypes: void 0,
+  storageMetadataKeys: void 0,
+  showDownload: !0
+};
+export {
+  d as default,
+  D as styles
+};

package/dist/es/item/ItemShapeTable/components/ItemShapeMenu.js

@@ -0,0 +1,63 @@
+import { jsxs as l, Fragment as x, jsx as t } from "react/jsx-runtime";
+import { useState as D } from "react";
+import { withStyles as T, IconButton as y, Menu as N, MenuItem as C, ListItemIcon as L, ListItemText as g } from "@material-ui/core";
+import { MoreVert as B, Delete as S } from "@material-ui/icons";
+import j from "../../../hooks/useConfirmationDialog.js";
+const k = () => ({
+  MenuIconButton: {},
+  MenuIcon: {},
+  DeleteIcon: {},
+  ListItemIcon: {},
+  ListItemText: {},
+  Menu: {},
+  MenuItem: {}
+});
+function w({
+  classes: e,
+  onRemove: i,
+  shapeType: a,
+  itemId: u,
+  shapeId: s,
+  MenuIconComponent: I = B,
+  DeleteIconComponent: p = S,
+  deleteText: h = "Delete"
+}) {
+  const [o, M] = j({ throwOnReject: !1 }), [r, m] = D(null), f = (n) => {
+    m(n.currentTarget);
+  }, c = () => {
+    m(null);
+  }, d = () => {
+    c(), M().then((n) => {
+      n && i({ itemId: u, shapeId: s, shapeType: a });
+    });
+  };
+  return /* @__PURE__ */ l(x, { children: [
+    /* @__PURE__ */ t(y, { className: e.IconButton, onClick: f, size: "small", children: /* @__PURE__ */ t(I, { className: e.MenuIconButton }) }),
+    /* @__PURE__ */ t(
+      N,
+      {
+        className: e.Menu,
+        anchorEl: r,
+        keepMounted: !0,
+        open: !!r,
+        onClose: c,
+        children: /* @__PURE__ */ l(C, { onClick: d, className: e.MenuItem, children: [
+          /* @__PURE__ */ t(L, { className: e.ListItemIcon, children: /* @__PURE__ */ t(p, { className: e.DeleteIcon }) }),
+          /* @__PURE__ */ t(
+            g,
+            {
+              className: e.ListItemText,
+              primary: h,
+              primaryTypographyProps: { color: "secondary" }
+            }
+          )
+        ] })
+      }
+    ),
+    o && /* @__PURE__ */ t(o, { titleText: "Delete File?", confirmText: "Delete", rejectText: "Cancel" })
+  ] });
+}
+const v = T(k, { name: "VdtItemShapeMenu" })(w);
+export {
+  v as default
+};

package/dist/es/item/ItemShapeTable/components/ItemShapeRow.js

@@ -0,0 +1,79 @@
+import { jsxs as l, Fragment as I, jsx as e } from "react/jsx-runtime";
+import { useMemo as M, useState as O } from "react";
+import u from "lodash.get";
+import { TableRow as f, TableCell as i, IconButton as p, Hidden as R, Collapse as A, Box as D, Table as F } from "@material-ui/core";
+import { ExpandMore as k, ChevronRight as E, CloudDownload as H } from "@material-ui/icons";
+import { parseShapeType as N } from "@vidispine/vdt-js";
+import T from "../../ItemSourceTable/components/ShapeTypeTableBody.js";
+import q from "./ItemShapeMenu.js";
+function V({
+  shapeType: o,
+  TableRowProps: g,
+  canExpand: t = !0,
+  onRemove: d,
+  showDownload: S,
+  itemId: a,
+  storageListType: C,
+  displayMethodTypes: b,
+  storageMetadataKeys: z
+}) {
+  const { id: w } = o, n = M(() => N(o), [o]), [c, x] = O(!1), B = () => x((j) => !j), { containerComponent: { file: r = [] } = {} } = o;
+  let m, h;
+  r.length > 0 && (m = u(r, "[0].uri[0]", "undefined"), h = u(r, "[0].path", "undefined"));
+  const v = o.tag.join(", "), s = n.fileSize === "-1 B" ? "Not Available" : n.fileSize;
+  return /* @__PURE__ */ l(I, { children: [
+    /* @__PURE__ */ l(f, { ...g, children: [
+      /* @__PURE__ */ e(i, { children: t && /* @__PURE__ */ e(p, { size: "small", onClick: B, children: c ? /* @__PURE__ */ e(k, {}) : /* @__PURE__ */ e(E, {}) }) }),
+      /* @__PURE__ */ e(i, { children: v }),
+      /* @__PURE__ */ l(R, { smDown: !0, children: [
+        /* @__PURE__ */ e(i, { children: n.containerFormat }),
+        /* @__PURE__ */ e(i, { children: n.videoCodec }),
+        /* @__PURE__ */ e(i, { children: n.audioCodec }),
+        /* @__PURE__ */ e(i, { children: n.frameRate })
+      ] }),
+      /* @__PURE__ */ e(i, { children: n.dimension }),
+      /* @__PURE__ */ e(i, { children: s }),
+      /* @__PURE__ */ l(i, { children: [
+        S && /* @__PURE__ */ e(
+          p,
+          {
+            size: "small",
+            href: m,
+            download: h,
+            style: { visibility: n.fileSizeBytes ? "visible" : "hidden" },
+            children: /* @__PURE__ */ e(H, {})
+          }
+        ),
+        d && /* @__PURE__ */ e(
+          q,
+          {
+            shapeType: o,
+            shapeId: w,
+            itemId: a,
+            onRemove: d
+          }
+        )
+      ] })
+    ] }),
+    t && /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(
+      i,
+      {
+        colSpan: 9,
+        children: /* @__PURE__ */ e(A, { in: c, timeout: "auto", unmountOnExit: !0, children: /* @__PURE__ */ e(D, { margin: 1, children: /* @__PURE__ */ e(F, { size: "small", padding: "none", children: /* @__PURE__ */ e(
+          T,
+          {
+            shapeActualSize: s,
+            shapeType: o,
+            itemId: a,
+            storageListType: C,
+            displayMethodTypes: b,
+            storageMetadataKeys: z
+          }
+        ) }) }) })
+      }
+    ) })
+  ] });
+}
+export {
+  V as default
+};

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

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

package/dist/es/item/ItemSidecarDialog/ItemSidecarDialog.js

@@ -0,0 +1,140 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { useState as y } from "react";
+import w from "clsx";
+import e from "prop-types";
+import { DialogTitle as P, DialogContent as F, Tabs as h, Tab as u } from "@material-ui/core";
+import B from "../ItemSidecarDownload/index.js";
+import R from "../ItemSidecarUpload/index.js";
+const f = "ITEM_SIDECAR_UPLOAD_TAB", d = "ITEM_SIDECAR_DOWNLOAD_TAB", k = (o) => ({
+  root: {},
+  DialogTitle: {},
+  DialogContent: {},
+  Tabs: {
+    marginBottom: o.spacing(2)
+  },
+  Tab: {},
+  ItemSidecarDownload: {},
+  ItemSidecarUpload: {}
+});
+function D({
+  classes: o,
+  className: I,
+  itemId: s,
+  onClose: a,
+  onSuccessDownload: c,
+  onFailureDownload: S,
+  onSuccessUpload: m,
+  onFailureUpload: b,
+  titleText: g,
+  subtitleGroup: _,
+  subtitleField: A,
+  uploadText: O,
+  downloadText: x,
+  defaultTab: N,
+  ItemSidecarDownloadComponent: i,
+  ItemSidecarDownloadProps: C,
+  ItemSidecarUploadComponent: r,
+  ItemSidecarUploadProps: E
+}) {
+  const [T, U] = y(N), v = (l, p) => p && U(p);
+  return /* @__PURE__ */ n("div", { className: w(o.root, "VdtItemSidecarDialog-root", I), children: [
+    /* @__PURE__ */ t(P, { className: o.DialogTitle, children: g }),
+    /* @__PURE__ */ n(F, { className: o.DialogContent, children: [
+      /* @__PURE__ */ n(
+        h,
+        {
+          value: T,
+          onChange: v,
+          variant: "fullWidth",
+          textColor: "primary",
+          indicatorColor: "primary",
+          className: o.Tabs,
+          children: [
+            i && /* @__PURE__ */ t(u, { className: o.Tab, value: d, label: x }),
+            r && /* @__PURE__ */ t(u, { className: o.Tab, value: f, label: O })
+          ]
+        }
+      ),
+      {
+        ITEM_SIDECAR_DOWNLOAD_TAB: i ? /* @__PURE__ */ t(
+          i,
+          {
+            className: o.ItemSidecarDownload,
+            onSuccess: (...l) => {
+              a && a(), c && c(...l);
+            },
+            onFailure: S,
+            subtitleGroup: _,
+            subtitleField: A,
+            onClose: a,
+            itemId: s,
+            ...C
+          }
+        ) : null,
+        ITEM_SIDECAR_UPLOAD_TAB: r ? /* @__PURE__ */ t(
+          r,
+          {
+            itemId: s,
+            className: o.ItemSidecarUpload,
+            onSuccess: (...l) => {
+              a && a(), m && m(...l);
+            },
+            onFailure: b,
+            ...E
+          }
+        ) : null
+      }[T]
+    ] })
+  ] });
+}
+D.propTypes = {
+  classes: e.objectOf(e.string),
+  className: e.string,
+  itemId: e.string.isRequired,
+  onClose: e.func,
+  onSuccessDownload: e.func,
+  onFailureDownload: e.func,
+  onSuccessUpload: e.func,
+  onFailureUpload: e.func,
+  closeText: e.string,
+  titleText: e.string,
+  subtitleGroup: e.string,
+  subtitleField: e.string,
+  uploadText: e.string,
+  downloadText: e.string,
+  defaultTab: e.oneOf([f, d]),
+  ItemSidecarDownloadComponent: e.oneOfType([
+    e.elementType,
+    e.oneOf([!1])
+  ]),
+  ItemSidecarDownloadProps: e.objectOf(e.any),
+  ItemSidecarUploadComponent: e.oneOfType([
+    e.elementType,
+    e.oneOf([!1])
+  ]),
+  ItemSidecarUploadProps: e.objectOf(e.any)
+};
+D.defaultProps = {
+  classes: {},
+  className: void 0,
+  onClose: void 0,
+  onSuccessDownload: void 0,
+  onFailureDownload: void 0,
+  onSuccessUpload: void 0,
+  onFailureUpload: void 0,
+  closeText: "Close",
+  titleText: "Item Sidecar",
+  subtitleGroup: "stl_subtitle",
+  subtitleField: "stl_text",
+  uploadText: "Upload",
+  downloadText: "Download",
+  defaultTab: d,
+  ItemSidecarDownloadComponent: B,
+  ItemSidecarDownloadProps: {},
+  ItemSidecarUploadComponent: R,
+  ItemSidecarUploadProps: {}
+};
+export {
+  D as default,
+  k as styles
+};

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

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