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

package/dist/es/item/ItemSidecarDownload/ItemSidecarDownload.js

@@ -0,0 +1,192 @@
+import { jsx as n, jsxs as D } from "react/jsx-runtime";
+import { useState as C } from "react";
+import O from "clsx";
+import t from "prop-types";
+import { ListItem as j, ListItemAvatar as k, Avatar as B, ListItemText as M, ListItemSecondaryAction as U, ButtonBase as V, CircularProgress as R, List as q } from "@material-ui/core";
+import { GetApp as E } from "@material-ui/icons";
+import { subtitle as S, item as y } from "@vidispine/vdt-api";
+import { metadataTypeToWebVtt as W } from "@vidispine/vdt-js";
+const _ = ({ itemId: a, subtitleGroup: e = "stl_subtitle", subtitleField: o = "stl_text" }) => new Promise((m) => {
+  const r = {
+    content: "metadata",
+    group: e,
+    field: o
+  };
+  y.getItem({ itemId: a, queryParams: r }).then(({ data: i }) => {
+    const { metadata: c } = i, l = W(c, { subtitleGroup: e, subtitleField: o });
+    m({ data: l });
+  });
+}), F = [
+  {
+    name: "scc",
+    avatar: "SCC",
+    primary: "Scenarist Closed Captions",
+    onDownload: ({ itemId: a }) => S.getSubtitleSCC({ itemId: a })
+  },
+  {
+    name: "ttml",
+    avatar: "TTML",
+    primary: "Timed Text Markup Language",
+    onDownload: ({ itemId: a }) => S.getSubtitleTTML({ itemId: a })
+  },
+  {
+    name: "webvtt",
+    avatar: "VTT",
+    primary: "Web Video Text Tracks ",
+    onDownload: _
+  },
+  {
+    name: "xml",
+    avatar: "XML",
+    primary: "Vidispine XML",
+    onDownload: ({ itemId: a }) => y.getItemMetadata({ itemId: a, headers: { accept: "application/xml" } })
+  }
+];
+function v({
+  className: a,
+  classes: e,
+  itemId: o,
+  subtitle: m,
+  onSuccess: r,
+  onFailure: i,
+  subtitleGroup: c,
+  subtitleField: l,
+  DownloadIcon: d = E,
+  ProgressComponent: p = R
+}) {
+  const [s, u] = C(!1), { onDownload: h, name: w, avatar: f, primary: N, secondary: x, ...P } = m, T = () => {
+    u(!0), h({ itemId: o, subtitleGroup: c, subtitleField: l, ...P }).then((L) => {
+      const A = `${o}.${w}`, b = window.URL.createObjectURL(new Blob([L.data])), I = document.createElement("a");
+      I.href = b, I.setAttribute("download", A), I.click(), window.URL.revokeObjectURL(b);
+    }).then(() => {
+      u(!1), r && r({ name: w, itemId: o });
+    }).catch((L) => {
+      if (u(!1), i)
+        i({ name: w, itemId: o, error: L });
+      else
+        throw new Error(L);
+    });
+  };
+  return /* @__PURE__ */ D(j, { button: !0, disabled: s === !0, onClick: T, className: a, children: [
+    f && /* @__PURE__ */ n(k, { className: e.ListItemAvatar, children: /* @__PURE__ */ n(B, { className: e.Avatar, variant: "square", children: f }) }),
+    /* @__PURE__ */ n(M, { className: e.ListItemText, primary: N, secondary: x }),
+    /* @__PURE__ */ D(U, { className: e.ListItemSecondaryAction, children: [
+      s === !0 && p && /* @__PURE__ */ n(p, { size: 20, className: e.Progress }),
+      s === !1 && d && /* @__PURE__ */ n(V, { onClick: T, className: e.DownloadButton, children: /* @__PURE__ */ n(d, { className: e.DownloadIcon }) })
+    ] })
+  ] });
+}
+function G({
+  classes: a,
+  className: e,
+  options: o,
+  itemId: m,
+  onSuccess: r,
+  onFailure: i,
+  subtitleGroup: c,
+  subtitleField: l,
+  ItemSidecarDownloadListItemComponent: d = v,
+  ItemSidecarDownloadListItemProps: p = {}
+}) {
+  return /* @__PURE__ */ n(q, { dense: !0, className: e, children: o.map((s) => /* @__PURE__ */ n(
+    d,
+    {
+      subtitle: s,
+      className: a.ListItem,
+      classes: a,
+      itemId: m,
+      onSuccess: r,
+      onFailure: i,
+      subtitleGroup: c,
+      subtitleField: l,
+      ...p
+    },
+    s.name
+  )) });
+}
+const Z = () => ({
+  List: {},
+  ListItem: {},
+  ListItemAvatar: {},
+  Avatar: {},
+  ListItemText: {},
+  ListItemSecondaryAction: {},
+  Progress: {},
+  DownloadButton: {},
+  DownloadIcon: {}
+});
+function g({
+  className: a,
+  classes: e,
+  itemId: o,
+  subtitleOptions: m,
+  onSuccess: r,
+  onFailure: i,
+  subtitleGroup: c,
+  subtitleField: l,
+  ItemSidecarDownloadListComponent: d,
+  ItemSidecarDownloadListProps: p,
+  ItemSidecarDownloadListItemComponent: s,
+  ItemSidecarDownloadListItemProps: u
+}) {
+  return /* @__PURE__ */ n(
+    d,
+    {
+      classes: e,
+      className: O(e.List, a),
+      options: m,
+      itemId: o,
+      onSuccess: r,
+      onFailure: i,
+      subtitleGroup: c,
+      subtitleField: l,
+      ItemSidecarDownloadListItemComponent: s,
+      ItemSidecarDownloadListItemProps: u,
+      ...p
+    }
+  );
+}
+g.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.objectOf(t.string),
+  /**
+   * Override styles with className
+   */
+  className: t.string,
+  itemId: t.string.isRequired,
+  subtitleOptions: t.arrayOf(
+    t.shape({
+      name: t.string,
+      avatar: t.string,
+      primary: t.string,
+      onDownload: t.func
+    })
+  ),
+  onSuccess: t.func,
+  onFailure: t.func,
+  subtitleGroup: t.string,
+  subtitleField: t.string,
+  ItemSidecarDownloadListComponent: t.elementType,
+  ItemSidecarDownloadListProps: t.objectOf(t.any),
+  ItemSidecarDownloadListItemComponent: t.elementType,
+  ItemSidecarDownloadListItemProps: t.objectOf(t.any)
+};
+g.defaultProps = {
+  className: void 0,
+  classes: {},
+  subtitleOptions: F,
+  onSuccess: void 0,
+  onFailure: void 0,
+  subtitleGroup: void 0,
+  subtitleField: void 0,
+  ItemSidecarDownloadListComponent: G,
+  ItemSidecarDownloadListProps: {},
+  ItemSidecarDownloadListItemComponent: v,
+  ItemSidecarDownloadListItemProps: {}
+};
+export {
+  g as default,
+  Z as styles
+};

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

@@ -0,0 +1,6 @@
+import { withStyles as o } from "@material-ui/core";
+import t, { styles as e } from "./ItemSidecarDownload.js";
+const m = o(e, { name: "VdtItemSidecarDownload" })(t);
+export {
+  m as default
+};

package/dist/es/item/ItemSidecarUpload/ItemSidecarUpload.js

@@ -0,0 +1,451 @@
+import { jsxs as f, jsx as i, Fragment as W } from "react/jsx-runtime";
+import { useState as b } from "react";
+import C from "clsx";
+import a from "prop-types";
+import { useDropzone as H } from "react-dropzone";
+import { DialogActions as $, ListItem as K, ListItemAvatar as Q, Avatar as Y, ListItemText as Z, ListItemSecondaryAction as ee, Radio as te, List as ae, ListSubheader as re } from "@material-ui/core";
+import { Cancel as oe } from "@material-ui/icons";
+import { vsimport as d, shape as ne, thumbnail as u } from "@vidispine/vdt-api";
+import ie from "../../forms/SubmitButton.js";
+const se = [
+  {
+    name: "srt",
+    avatar: "SRT",
+    primary: "SubRip Subtitle",
+    onUpload: ({ itemId: e, file: t }) => d.createImportItemSidecarRaw({
+      itemId: e,
+      file: t,
+      queryParams: {
+        fileExtension: "srt"
+      }
+    })
+  },
+  {
+    name: "stl",
+    avatar: "STL",
+    primary: "EBU STL",
+    onUpload: ({ itemId: e, file: t }) => d.createImportItemSidecarRaw({
+      itemId: e,
+      file: t,
+      queryParams: {
+        fileExtension: "stl"
+      }
+    })
+  },
+  {
+    name: "scc",
+    avatar: "SCC",
+    primary: "Scenarist Closed Captions",
+    onUpload: ({ itemId: e, file: t }) => d.createImportItemSidecarRaw({
+      itemId: e,
+      file: t,
+      queryParams: {
+        fileExtension: "scc"
+      }
+    })
+  },
+  {
+    name: "evs",
+    avatar: "EVS",
+    primary: "EVS Metadata",
+    onUpload: ({ itemId: e, file: t }) => d.createImportItemSidecarRaw({
+      itemId: e,
+      file: t,
+      queryParams: {
+        fileExtension: "evs"
+      }
+    })
+  },
+  {
+    name: "xml",
+    avatar: "XML",
+    primary: "Vidispine XML Metadata",
+    onUpload: ({ itemId: e, file: t }) => d.createImportItemSidecarRaw({
+      itemId: e,
+      file: t,
+      queryParams: {
+        fileExtension: "xml"
+      }
+    })
+  },
+  {
+    name: "xmp",
+    avatar: "XMP",
+    primary: "eXtensible Metadata Platform",
+    onUpload: ({ itemId: e, file: t }) => d.createImportItemSidecarRaw({
+      itemId: e,
+      file: t,
+      queryParams: {
+        fileExtension: "xmp"
+      }
+    })
+  },
+  {
+    name: "mp4",
+    avatar: "MP4",
+    primary: "MP4 Proxy",
+    onUpload: ({ itemId: e, file: t }) => ne.createShapeImportRaw({
+      itemId: e,
+      file: t,
+      queryParams: {
+        tag: "__mp4"
+      }
+    })
+  },
+  {
+    name: "jpg",
+    avatar: "JPG",
+    primary: "JPG Thumbnail",
+    onUpload: ({ itemId: e, file: t }) => u.listThumbnailResource({ itemId: e }).then(({ data: o }) => {
+      const { uri: [r] = [] } = o;
+      return r ? Promise.resolve({ data: o }) : u.createThumbnailResource({ itemId: e });
+    }).then(({ data: o }) => {
+      const { uri: [r] = [] } = o, [n] = r.split("/").slice(-2);
+      return u.updateThumbnail({
+        resourceId: n,
+        itemId: e,
+        time: 0,
+        headers: { contentType: "image/jpeg" },
+        file: t
+      });
+    })
+  },
+  {
+    name: "png",
+    avatar: "PNG",
+    primary: "PNG Thumbnail",
+    onUpload: ({ itemId: e, file: t }) => u.listThumbnailResource({ itemId: e }).then(({ data: o }) => {
+      const { uri: [r] = [] } = o;
+      return r ? Promise.resolve({ data: o }) : u.createThumbnailResource({ itemId: e });
+    }).then(({ data: o }) => {
+      const { uri: [r] = [] } = o, [n] = r.split("/").slice(-2);
+      return u.updateThumbnail({
+        resourceId: n,
+        itemId: e,
+        time: 0,
+        headers: { contentType: "image/png" },
+        file: t
+      });
+    })
+  }
+];
+function ce({
+  className: e,
+  classes: t,
+  uploadText: o,
+  onClickUpload: r,
+  uploadDisabled: n,
+  isUploading: s,
+  ButtonComponent: p = ie
+}) {
+  return /* @__PURE__ */ i($, { className: e, children: /* @__PURE__ */ i(
+    p,
+    {
+      className: t.Button,
+      onClick: r,
+      color: "primary",
+      variant: "contained",
+      disabled: n,
+      submitting: s,
+      children: o
+    }
+  ) });
+}
+function w({ className: e, classes: t = {}, option: o, onChange: r, selected: n }) {
+  const { primary: s, avatar: p } = o;
+  return /* @__PURE__ */ f(K, { button: !0, onClick: r, className: e, selected: n, children: [
+    p && /* @__PURE__ */ i(Q, { className: t.ListItemAvatar, children: /* @__PURE__ */ i(Y, { className: t.Avatar, variant: "square", children: p }) }),
+    /* @__PURE__ */ i(Z, { className: t.ListItemText, primary: s }),
+    /* @__PURE__ */ i(ee, { className: t.ListItemSecondaryAction, children: /* @__PURE__ */ i(te, { className: t.Radio, checked: n, onChange: r }) })
+  ] });
+}
+function pe({
+  className: e,
+  classes: t,
+  chooseText: o,
+  options: r,
+  onChange: n,
+  selected: s,
+  ItemSidecarUploadListItemComponent: p = w,
+  ItemSidecarUploadListItemProps: h = {}
+}) {
+  return /* @__PURE__ */ i(
+    ae,
+    {
+      dense: !0,
+      className: e,
+      subheader: /* @__PURE__ */ i(re, { className: t.ListSubheader, children: o }),
+      children: r.map((m) => /* @__PURE__ */ i(
+        p,
+        {
+          onChange: () => n(m),
+          className: t.ListItem,
+          classes: t,
+          selected: s === m,
+          option: m,
+          ...h
+        },
+        m.name
+      ))
+    }
+  );
+}
+function me({
+  className: e,
+  classes: t,
+  onDrop: o,
+  onReset: r,
+  acceptedFile: n,
+  rejectedFile: s,
+  accept: p,
+  dropText: h,
+  ResetIconComponent: m = oe
+}) {
+  const { getRootProps: y, getInputProps: U } = H({
+    onDrop: o,
+    maxFiles: 1,
+    multiple: !1,
+    accept: p
+  });
+  return /* @__PURE__ */ i("div", { className: e, children: /* @__PURE__ */ f(
+    "div",
+    {
+      ...y(),
+      className: C(
+        t.dropzoneInput,
+        s ? t.dropzoneInputError : t.dropzoneInputDefault
+      ),
+      children: [
+        /* @__PURE__ */ i("input", { ...U() }),
+        !n && !s && /* @__PURE__ */ i("p", { children: h }),
+        n && /* @__PURE__ */ f("span", { className: t.acceptedFile, children: [
+          n.name,
+          /* @__PURE__ */ i(m, { onClick: r, className: t.ResetIcon })
+        ] }),
+        s && /* @__PURE__ */ f(W, { children: [
+          /* @__PURE__ */ f("span", { className: t.rejectedFile, children: [
+            s.file.name,
+            /* @__PURE__ */ i(m, { onClick: r, className: t.ResetIcon })
+          ] }),
+          s.errors.length && /* @__PURE__ */ i("span", { className: t.errorMessage, children: s.errors[0].message })
+        ] })
+      ]
+    }
+  ) });
+}
+const ye = (e) => ({
+  dropzoneRoot: {
+    cursor: "pointer",
+    marginTop: e.spacing(1),
+    marginBottom: e.spacing(1),
+    paddingLeft: e.spacing(0.5),
+    paddingRight: e.spacing(0.5)
+  },
+  dropzoneInput: {
+    marginTop: e.spacing(0.5),
+    minHeight: "10vh",
+    minWidth: e.spacing(4),
+    borderWidth: 2,
+    borderRadius: 3,
+    borderStyle: "dotted",
+    backgroundColor: "rgba(0,0,0,0.05)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "min-height 0.3s"
+  },
+  dropzoneInputDefault: {
+    borderColor: e.palette.grey.A200
+  },
+  dropzoneInputError: {
+    borderColor: e.palette.error.main,
+    color: e.palette.error.main
+  },
+  ListSubheader: {},
+  Button: {},
+  List: {},
+  showList: {
+    height: "auto",
+    overflow: "visible"
+  },
+  hideList: {
+    height: 0,
+    overflow: "hidden"
+  },
+  ListItemAvatar: {},
+  Avatar: {},
+  Radio: {},
+  DialogActions: {},
+  acceptedFile: {
+    display: "flex",
+    alignItems: "center"
+  },
+  rejectedFile: {
+    display: "flex",
+    alignItems: "center"
+  }
+});
+function A({
+  classes: e,
+  className: t,
+  itemId: o,
+  onSuccess: r,
+  onFailure: n,
+  subtitleOptions: s,
+  dropText: p,
+  chooseText: h,
+  uploadText: m,
+  defaultSelectedSubtitle: y,
+  ItemSidecarUploadDropzoneComponent: U,
+  ItemSidecarUploadDropzoneProps: D,
+  ItemSidecarUploadListComponent: E,
+  ItemSidecarUploadListProps: z,
+  ItemSidecarUploadActionsComponent: j,
+  ItemSidecarUploadActionsProps: q,
+  ItemSidecarUploadListItemComponent: M,
+  ItemSidecarUploadListItemProps: k
+}) {
+  const [v, L] = b(y), [l, I] = b(), [O, S] = b(), [B, g] = b(), F = (c = [], P = []) => {
+    const [T] = c, [x] = P;
+    if (x)
+      I(), S(x);
+    else if (T) {
+      I(T), S();
+      const { name: _ } = T, [, R] = _.split(".");
+      if (R) {
+        const N = s.find(
+          ({ name: J }) => J === R
+        );
+        N && L(N);
+      }
+    } else
+      I(), S();
+  }, G = (c) => {
+    c.stopPropagation(), I(), S(), L();
+  }, X = (c) => L(c), V = () => {
+    try {
+      g(!0);
+      const { onUpload: c } = v;
+      if (!c)
+        throw new Error("No upload handler");
+      if (!l)
+        throw new Error("No file specified");
+      c({
+        itemId: o,
+        file: l
+      }).then(() => {
+        g(), r && r({
+          name: l.name
+        });
+      }).catch((P) => {
+        g(), n && n(P);
+      });
+    } catch (c) {
+      g(), n && n(c);
+    }
+  };
+  return /* @__PURE__ */ f("div", { className: C(e.root, t), children: [
+    /* @__PURE__ */ i(
+      U,
+      {
+        className: e.dropzoneRoot,
+        classes: e,
+        accept: s.map(({ name: c }) => `.${c}`).toString(),
+        dropText: p,
+        onDrop: F,
+        onReset: G,
+        acceptedFile: l,
+        rejectedFile: O,
+        ...D
+      }
+    ),
+    l && /* @__PURE__ */ i(
+      E,
+      {
+        className: e.List,
+        classes: e,
+        onChange: X,
+        options: s,
+        selected: v,
+        chooseText: h,
+        ItemSidecarUploadListItemComponent: M,
+        ItemSidecarUploadListItemProps: k,
+        ...z
+      }
+    ),
+    /* @__PURE__ */ i(
+      j,
+      {
+        onClickUpload: V,
+        className: e.DialogActions,
+        classes: e,
+        uploadDisabled: !v || !l,
+        uploadText: m,
+        isUploading: B,
+        ...q
+      }
+    )
+  ] });
+}
+A.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: a.objectOf(a.string),
+  /**
+   * Override styles with className
+   */
+  className: a.string,
+  itemId: a.string.isRequired,
+  onSuccess: a.func,
+  onFailure: a.func,
+  subtitleOptions: a.arrayOf(
+    a.shape({
+      name: a.string,
+      avatar: a.string,
+      primary: a.string,
+      onUpload: a.func
+    })
+  ),
+  defaultSelectedSubtitle: a.shape({
+    name: a.string,
+    avatar: a.string,
+    primary: a.string,
+    onUpload: a.func
+  }),
+  dropText: a.string,
+  chooseText: a.string,
+  uploadText: a.string,
+  ItemSidecarUploadDropzoneComponent: a.elementType,
+  ItemSidecarUploadDropzoneProps: a.objectOf(a.any),
+  ItemSidecarUploadListComponent: a.elementType,
+  ItemSidecarUploadListProps: a.objectOf(a.any),
+  ItemSidecarUploadListItemComponent: a.elementType,
+  ItemSidecarUploadListItemProps: a.objectOf(a.any),
+  ItemSidecarUploadActionsComponent: a.elementType,
+  ItemSidecarUploadActionsProps: a.objectOf(a.any)
+};
+A.defaultProps = {
+  className: void 0,
+  classes: {},
+  onSuccess: void 0,
+  onFailure: void 0,
+  subtitleOptions: se,
+  defaultSelectedSubtitle: void 0,
+  dropText: "Drop file or click to browse",
+  chooseText: "Choose Subtitle Format",
+  uploadText: "Upload",
+  ItemSidecarUploadDropzoneComponent: me,
+  ItemSidecarUploadDropzoneProps: {},
+  ItemSidecarUploadListComponent: pe,
+  ItemSidecarUploadListProps: {},
+  ItemSidecarUploadListItemComponent: w,
+  ItemSidecarUploadListItemProps: {},
+  ItemSidecarUploadActionsComponent: ce,
+  ItemSidecarUploadActionsProps: {}
+};
+export {
+  A as default,
+  ye as styles
+};

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

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

package/dist/es/item/ItemSourceTab.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+import { GetItem as o } from "@vidispine/vdt-react";
+import a from "./ItemSourceTable/index.js";
+const i = {
+  content: ["shape", "metadata"],
+  tag: "original",
+  interval: "generic",
+  field: ["mediaType", "originalFilename"],
+  group: ""
+};
+function l({ itemId: r, ...t }) {
+  return /* @__PURE__ */ e(o, { itemId: r, queryParams: i, children: /* @__PURE__ */ e(a, { ...t }) });
+}
+export {
+  l as default
+};

package/dist/es/item/ItemSourceTable/ItemSourceTable.js

@@ -0,0 +1,40 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import T from "clsx";
+import e from "prop-types";
+import { Table as c } from "@material-ui/core";
+import n from "@vidispine/proptypes";
+import y from "./components/MetadataTypeTableBody.js";
+import f from "./components/ShapeTypeTableBody.js";
+const N = () => ({
+  root: {
+    width: "100%"
+  }
+});
+function a({ classes: p, className: r, itemType: i = {}, showFiles: m }) {
+  const { shape: l = [], metadata: s } = i, [o] = l;
+  return /* @__PURE__ */ d(c, { className: T(p.root, r), size: "small", padding: "none", children: [
+    s && /* @__PURE__ */ t(y, { metadataType: s }),
+    o && /* @__PURE__ */ t(f, { showFiles: m, shapeType: o })
+  ] });
+}
+a.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  itemType: n.ItemType.isRequired,
+  showFiles: e.bool
+};
+a.defaultProps = {
+  className: void 0,
+  classes: {},
+  showFiles: !1
+};
+export {
+  a as default,
+  N as styles
+};