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

package/dist/es/storage/hooks/useFileList.js

@@ -0,0 +1,36 @@
+import { useState as F, useEffect as L, useCallback as p } from "react";
+import { file as u } from "@vidispine/vdt-api";
+const S = ({ storageId: e, path: i = "/", number: t = 10 }) => {
+  const [r, f] = F([]), { file: a = [], hits: o } = r, s = a.length;
+  return L(() => {
+    u.listFileStorage({
+      storageId: e,
+      queryParams: {
+        prefix: !0,
+        path: i,
+        recursive: !1,
+        first: 0,
+        number: t
+      }
+    }).then(({ data: l }) => f(l));
+  }, [i, e, t]), { onListFilesMore: p(() => {
+    s !== o && u.listFileStorage({
+      storageId: e,
+      queryParams: {
+        prefix: !0,
+        path: i,
+        recursive: !1,
+        first: s,
+        number: t
+      }
+    }).then(({ data: { file: l = [], ...c } = {} }) => {
+      f(({ file: n = [] }) => ({
+        ...c,
+        file: [...n, ...l]
+      }));
+    });
+  }, [s, o, i, e, t]), fileListType: r };
+};
+export {
+  S as default
+};

package/dist/es/storage/hooks/useSelectedFile.js

@@ -0,0 +1,13 @@
+import { useState as o, useEffect as r } from "react";
+import { file as s } from "@vidispine/vdt-api";
+const c = ({ entityId: e }) => {
+  const [t, l] = o();
+  return r(() => {
+    s.getFile({ fileId: e, queryParams: { includeItem: !0 } }).then(
+      ({ data: i }) => l(i)
+    );
+  }, [e]), { fileType: t };
+};
+export {
+  c as default
+};

package/dist/es/storage/hooks/useSelectedStorage.js

@@ -0,0 +1,11 @@
+import { useState as a, useEffect as s } from "react";
+import { storage as g } from "@vidispine/vdt-api";
+const f = ({ entityId: e }) => {
+  const [t, o] = a();
+  return s(() => {
+    g.getStorage({ storageId: e }).then(({ data: r }) => o(r));
+  }, [e]), { storageType: t };
+};
+export {
+  f as default
+};

package/dist/es/storage/hooks/useStorageList.js

@@ -0,0 +1,11 @@
+import { useState as o, useEffect as r } from "react";
+import { storage as a } from "@vidispine/vdt-api";
+const S = () => {
+  const [t, e] = o({});
+  return r(() => {
+    a.listStorage().then(({ data: s }) => e(s));
+  }, []), { storageListType: t };
+};
+export {
+  S as default
+};

package/dist/es/storage/hooks/useTreeView.js

@@ -0,0 +1,16 @@
+import { useState as n, useCallback as o } from "react";
+import { PREFIX as c, LOAD_MORE as l } from "../const.js";
+const g = ({ onChange: e, initialExpanded: r = [] }) => {
+  const [s, i] = n(r), a = o(
+    (f, t) => {
+      typeof t == "string" && (t.startsWith(c) || t.startsWith(l)) || e && e(t);
+    },
+    [e]
+  );
+  return { onNodeToggle: o((f, t) => {
+    i(t);
+  }, []), onNodeSelect: a, expanded: s };
+};
+export {
+  g as default
+};

package/dist/es/transcode/ShapeTagCard.js

@@ -0,0 +1,76 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import m from "clsx";
+import a from "prop-types";
+import { withStyles as g } from "@material-ui/core";
+import { parseTranscodePreset as f } from "@vidispine/vdt-js";
+import y from "../media/MediaBadges.js";
+const h = (e) => ({
+  root: {
+    display: "flex"
+  },
+  thumbnail: {
+    marginLeft: e.spacing(2),
+    marginRight: e.spacing(2),
+    width: 80,
+    height: 40,
+    fontFamily: e.typography.fontFamily,
+    fontSize: e.typography.pxToRem(20),
+    textTransform: "uppercase",
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    color: e.palette.background.default,
+    backgroundColor: e.palette.type === "light" ? e.palette.grey[400] : e.palette.grey[600]
+  },
+  detailContainer: {},
+  thumbnailContainer: {},
+  description: {
+    fontStyle: "italic"
+  }
+});
+function i({
+  className: e,
+  classes: t,
+  transcodePresetType: s,
+  containerFormatText: p,
+  MediaBadgesComponent: d,
+  MediaBadgesProps: l
+}) {
+  const r = f(s), c = r.containerFormat ? r.containerFormat.split("_")[0].split("-")[0] : p;
+  return /* @__PURE__ */ n("div", { className: m(t.root, "VdtShapeTagCard-root", e), children: [
+    /* @__PURE__ */ o("div", { className: t.thumbnailContainer, children: /* @__PURE__ */ o("div", { className: t.thumbnail, children: c }) }),
+    /* @__PURE__ */ n("div", { className: t.detailContainer, children: [
+      /* @__PURE__ */ o(
+        d,
+        {
+          transcodePresetType: r,
+          parseShape: !1,
+          ...l
+        }
+      ),
+      r.description && /* @__PURE__ */ o("div", { className: t.description, children: r.description })
+    ] })
+  ] });
+}
+const v = g(h, { name: "VdtShapeTagCard" })(i);
+i.propTypes = {
+  classes: a.objectOf(a.string),
+  className: a.string,
+  transcodePresetType: a.objectOf(a.any).isRequired,
+  containerFormatText: a.string,
+  MediaBadgesComponent: a.elementType,
+  MediaBadgesProps: a.objectOf(a.any)
+};
+i.defaultProps = {
+  classes: {},
+  className: void 0,
+  containerFormatText: "Source",
+  MediaBadgesComponent: y,
+  MediaBadgesProps: {}
+};
+export {
+  i as ShapeTagCard,
+  v as default
+};

package/dist/es/transcode/ShapeTagListAccordion.js

@@ -0,0 +1,200 @@
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { useEffect as A, useState as y } from "react";
+import C from "clsx";
+import o from "prop-types";
+import { withStyles as h, Accordion as E, AccordionSummary as v, AccordionDetails as w, Typography as D, Button as $, LinearProgress as L } from "@material-ui/core";
+import { shapetag as P } from "@vidispine/vdt-api";
+import k from "./ShapeTagCard.js";
+const B = ({ onEstimate: e }) => {
+  const [t, d] = y({});
+  return {
+    shapeTagDetail: t,
+    onGetShapeTag: (r) => P.getShapeTag({ tagName: r }).then(({ data: n }) => (d((s) => ({ ...s, [r]: n })), e ? e(r) : Promise.resolve())).then((n) => {
+      if (n) {
+        const {
+          data: {
+            service: [{ cost: s, state: l, message: u }]
+          }
+        } = n;
+        d((T) => {
+          const g = { ...T };
+          return g[r].cost = s, g[r].estimateError = l !== "FINISHED" ? u : !1, g;
+        });
+      }
+    }).catch((n) => {
+      if (n.config && n.config.url && n.config.url.includes("/cost/"))
+        d((s) => {
+          const l = { ...s };
+          return l[r].estimateError = "unspecified reason.", l;
+        });
+      else
+        throw new Error(n);
+    })
+  };
+}, N = (e) => {
+  const [t, d] = y(e);
+  return {
+    expanded: t,
+    onChangeExpand: (r) => (n, s) => d(s ? r : !1)
+  };
+}, j = h((e) => ({
+  root: {
+    border: e.palette.type === "light" ? "1px solid rgba(0, 0, 0, .125)" : "1px solid rgba(0, 0, 0, .3)",
+    boxShadow: "none",
+    "&:not(:last-child)": {
+      borderBottom: 0
+    },
+    "&:before": {
+      display: "none"
+    },
+    "&$expanded": {
+      margin: "auto"
+    }
+  },
+  expanded: {}
+}))(E), G = h((e) => ({
+  root: {
+    backgroundColor: e.palette.type === "light" ? "rgba(0, 0, 0, .03)" : "rgba(0, 0, 0, .1)",
+    borderBottom: e.palette.type === "light" ? "1px solid rgba(0, 0, 0, .125)" : "1px solid rgba(0, 0, 0, .3)",
+    marginBottom: -1,
+    minHeight: 56,
+    "&$expanded": {
+      minHeight: 56
+    }
+  },
+  content: {
+    "&$expanded": {
+      margin: "12px 0"
+    }
+  },
+  expanded: {}
+}))(v), H = h((e) => ({
+  root: {
+    padding: e.spacing(2)
+  }
+}))(w), I = (e) => ({
+  root: {},
+  Accordion: {},
+  AccordionDetails: {},
+  AccordionSummary: {},
+  Button: {},
+  shapeTagList: {
+    height: 200,
+    overflowY: "scroll",
+    "&::-webkit-scrollbar": {
+      WebkitAppearance: "none"
+    },
+    "&::-webkit-scrollbar:vertical": {
+      width: 11
+    },
+    "&::-webkit-scrollbar-thumb": {
+      borderStyle: "solid",
+      borderWidth: 2,
+      borderColor: e.palette.divider,
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
+    }
+  },
+  LinearProgress: {
+    width: "100%"
+  },
+  shapeTagDetail: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  Typography: {},
+  costEstimateText: {
+    fontStyle: "italic",
+    color: e.palette.primary.main,
+    marginTop: e.spacing(2)
+  },
+  action: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end"
+  }
+});
+function x({
+  className: e,
+  classes: t,
+  shapeTagNames: d,
+  onTranscode: m,
+  onEstimate: r,
+  transcodeText: n,
+  ShapeTagCardComponent: s,
+  ShapeTagCardProps: l,
+  loadingCostEstimateText: u,
+  costEstimateText: T,
+  failedCostEstimateText: g
+}) {
+  const { shapeTagDetail: c, onGetShapeTag: b } = B({ onEstimate: r }), { expanded: a, onChangeExpand: S } = N();
+  return A(() => {
+    !a || c[a] || b(a);
+  }, [a]), /* @__PURE__ */ i("div", { className: C(t.root, "VdtShapeTagListAccordion-root", e), children: /* @__PURE__ */ i("div", { className: t.shapeTagList, children: d.map((p) => /* @__PURE__ */ f(
+    j,
+    {
+      className: t.Accordion,
+      square: !0,
+      expanded: a === p,
+      onChange: S(p),
+      children: [
+        /* @__PURE__ */ i(G, { className: t.AccordionSummary, children: /* @__PURE__ */ i(D, { noWrap: !0, className: t.Typography, children: p.replace("__", "") }) }),
+        a === p && /* @__PURE__ */ i(H, { className: t.AccordionDetails, children: c[a] ? /* @__PURE__ */ f("div", { className: t.shapeTagDetail, children: [
+          /* @__PURE__ */ i(
+            s,
+            {
+              transcodePresetType: c[a],
+              ...l
+            }
+          ),
+          /* @__PURE__ */ f("div", { className: t.action, children: [
+            m && /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(
+              $,
+              {
+                color: "primary",
+                variant: "contained",
+                onClick: () => m(p),
+                disabled: r && c[a].estimateError,
+                className: t.Button,
+                children: n
+              }
+            ) }),
+            r && /* @__PURE__ */ i("div", { className: t.costEstimateText, children: c[a].estimateError ? `${g} ${c[a].estimateError}` : c[a].cost ? `${T} $${c[a].cost.value}` : u })
+          ] })
+        ] }) : /* @__PURE__ */ i(L, { className: t.LinearProgress }) })
+      ]
+    },
+    p
+  )) }) });
+}
+const Y = h(I, { name: "VdtShapeTagListAccordion" })(x);
+x.propTypes = {
+  classes: o.objectOf(o.string),
+  className: o.string,
+  shapeTagNames: o.arrayOf(o.string),
+  onTranscode: o.func,
+  onEstimate: o.func,
+  transcodeText: o.string,
+  ShapeTagCardComponent: o.elementType,
+  ShapeTagCardProps: o.objectOf(o.any),
+  loadingCostEstimateText: o.string,
+  costEstimateText: o.string,
+  failedCostEstimateText: o.string
+};
+x.defaultProps = {
+  classes: {},
+  className: void 0,
+  shapeTagNames: [],
+  onTranscode: void 0,
+  onEstimate: void 0,
+  transcodeText: "Transcode",
+  ShapeTagCardComponent: k,
+  ShapeTagCardProps: {},
+  loadingCostEstimateText: "Requesting cost estimate",
+  costEstimateText: "Estimated cost:",
+  failedCostEstimateText: "Failed:"
+};
+export {
+  x as ShapeTagListAccordion,
+  Y as default
+};

package/dist/es/transcode/TranscodeDialog.js

@@ -0,0 +1,312 @@
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { useRef as U, useEffect as O, useState as E, useMemo as W } from "react";
+import X from "clsx";
+import t from "prop-types";
+import { withStyles as Y, DialogTitle as Z, DialogContent as j, Tabs as ee, Tab as te, TextField as re, InputAdornment as oe, ButtonBase as ne, FormControlLabel as ae, Switch as ie } from "@material-ui/core";
+import { Clear as se } from "@material-ui/icons";
+import { shapetag as ce, resource as le, item as q, vidinet as ue } from "@vidispine/vdt-api";
+import { useApi as _ } from "@vidispine/vdt-react";
+import de from "../icons/BitmovinIcon.js";
+import he from "../icons/MediaConvertIcon.js";
+import me from "../icons/VidispineIcon.js";
+import pe from "./ShapeTagListAccordion.js";
+const A = "TRANSCODER", V = "BITMOVIN", F = "ELEMENTAL_MEDIACONVERT", Te = ({ tabs: e = [] }) => {
+  const r = e.length > 0 ? e[0].value : void 0, [h, l] = E(r);
+  return {
+    currentTab: h,
+    onChangeTab: (T, a) => a && l(a)
+  };
+}, fe = ({
+  listShapeTagRef: e,
+  initialHideDefault: r,
+  initialSearchValue: h = "",
+  tabs: l = []
+}) => {
+  const [i, T] = E(r), a = (g) => T(g.target.checked), [m, f] = E(h), D = (g) => f(g.target.value), L = () => f(""), { request: w, data: b = {} } = _(
+    ce.listShapeTag,
+    void 0,
+    e
+  );
+  return O(() => {
+    w();
+  }, []), {
+    shapeTagNames: W(() => {
+      const { uri: g = [] } = b, S = g.filter(
+        (C) => !(i && C.startsWith("__")) && !(m && !C.toLowerCase().includes(m.toLowerCase()))
+      );
+      return l.reduce(
+        (C, { value: s, tagNameFilter: u }) => ({
+          ...C,
+          [s]: u ? u(S) : S
+        }),
+        {}
+      );
+    }, [b, i, m]),
+    onChangeShowDefault: a,
+    hideDefault: i,
+    onChangeSearch: D,
+    onClearSearch: L,
+    searchValue: m
+  };
+}, ge = ({ listResourceTypeRef: e, tabs: r }) => {
+  const { request: h, data: l = {} } = _(
+    le.listResourceType,
+    void 0,
+    e
+  );
+  return O(() => {
+    h({ resourceType: "vidinet" });
+  }, []), {
+    resources: W(() => {
+      const { resource: T = [] } = l;
+      return r.reduce(
+        (a, { value: m, resourceFilter: f }) => ({
+          ...a,
+          [m]: f ? f(T) : []
+        }),
+        {}
+      );
+    }, [l])
+  };
+}, Ce = (e) => ({
+  root: {},
+  noResourceText: {
+    ...e.typography.body1,
+    marginTop: e.spacing(2),
+    marginBottom: e.spacing(2),
+    width: "100%",
+    textAlign: "center",
+    fontWeight: "bold",
+    color: e.palette.error.main
+  },
+  shapeTagFilter: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: e.spacing(2)
+  },
+  TextField: {
+    marginLeft: e.spacing(2),
+    marginRight: e.spacing(2)
+  },
+  Tabs: {
+    marginBottom: "10px"
+  },
+  Tab: {},
+  Switch: {}
+});
+function I({
+  className: e,
+  classes: r,
+  itemId: h,
+  onSuccess: l,
+  onError: i,
+  onClose: T,
+  tabs: a,
+  listShapeTagRef: m,
+  listResourceTypeRef: f,
+  noResourceText: D,
+  hideDefault: L,
+  hideDefaultText: w,
+  searchValue: b,
+  searchText: P,
+  ShapeTagListComponent: g,
+  ShapeTagListProps: S
+}) {
+  const { onChangeTab: C, currentTab: s } = Te({ tabs: a }), { resources: u } = ge({ listResourceTypeRef: f, tabs: a }), {
+    shapeTagNames: k,
+    onChangeShowDefault: H,
+    hideDefault: $,
+    onChangeSearch: z,
+    onClearSearch: G,
+    searchValue: B
+  } = fe({
+    listShapeTagRef: m,
+    initialHideDefault: L,
+    initialSearchValue: b,
+    tabs: a
+  }), J = (o) => {
+    const c = { tag: o };
+    if (s === F || s === V) {
+      const d = u[s];
+      if (d.length === 0) {
+        const v = new Error(`No ${s} Resources Available`);
+        if (i)
+          i(v);
+        else
+          throw v;
+      }
+      c.resourceId = d[0].id;
+    }
+    return new Promise((d, v) => {
+      q.createTranscode({ itemId: h, queryParams: c }).then((p) => {
+        l && l(p), T && T(), d(p);
+      }).catch((p) => {
+        i && i(p), v(p);
+      });
+    });
+  }, y = U({}), K = (o) => {
+    const c = { tag: o }, d = u[s];
+    if (d.length === 0)
+      throw new Error(`No ${s} Resources Available`);
+    return c.resourceId = d[0].id, new Promise((v, p) => {
+      q.createTranscode({
+        itemId: h,
+        queryParams: c,
+        costEstimate: !0
+      }).then(({ data: { id: N } = {} }) => {
+        const M = () => {
+          ue.getCostEstimate({ costEstimateId: N }).then((R) => {
+            y.current[N] !== null && (clearTimeout(y.current[N]), delete y.current[N]);
+            const { data: { state: Q } = {} } = R;
+            Q === "FINISHED" ? v(R) : y.current[N] = setTimeout(() => M(), 1e3);
+          }).catch((R) => p(R));
+        };
+        M();
+      }).catch(p);
+    });
+  };
+  return O(() => {
+    const o = y.current;
+    return () => {
+      o !== null && Object.values(o).forEach((c) => clearTimeout(c));
+    };
+  }, []), /* @__PURE__ */ x("div", { className: X(r.root, "VdtTranscodeDialog-root", e), children: [
+    /* @__PURE__ */ n(Z, { children: "Transcode" }),
+    /* @__PURE__ */ n(j, { children: a.length > 1 ? /* @__PURE__ */ n(
+      ee,
+      {
+        className: r.Tabs,
+        value: s,
+        onChange: C,
+        variant: "fullWidth",
+        textColor: "primary",
+        indicatorColor: "primary",
+        children: a.map(({ value: o, icon: c, label: d }) => /* @__PURE__ */ n(
+          te,
+          {
+            className: r.Tab,
+            value: o,
+            label: d || o,
+            icon: c ? /* @__PURE__ */ n(c, {}) : void 0
+          },
+          o
+        ))
+      }
+    ) : null }),
+    /* @__PURE__ */ x(j, { children: [
+      /* @__PURE__ */ x("div", { className: r.shapeTagFilter, children: [
+        /* @__PURE__ */ n(
+          re,
+          {
+            className: r.TextField,
+            label: P,
+            onChange: z,
+            value: B,
+            fullWidth: !0,
+            InputProps: {
+              endAdornment: B ? /* @__PURE__ */ n(oe, { position: "end", children: /* @__PURE__ */ n(ne, { onClick: G, children: /* @__PURE__ */ n(se, {}) }) }) : void 0
+            }
+          }
+        ),
+        /* @__PURE__ */ n(
+          ae,
+          {
+            control: /* @__PURE__ */ n(
+              ie,
+              {
+                checked: $,
+                onChange: H,
+                color: "primary",
+                className: r.Switch
+              }
+            ),
+            label: w
+          }
+        )
+      ] }),
+      a.map(({ value: o }) => /* @__PURE__ */ n("div", { style: { display: o === s ? "initial" : "none" }, children: o !== A && // always show vs transcodes
+      (!u[o] || u[o].length === 0) ? /* @__PURE__ */ n("div", { className: r.noResourceText, children: D }) : /* @__PURE__ */ n(
+        g,
+        {
+          onTranscode: J,
+          onEstimate: u[o] && u[o].length > 0 ? K : void 0,
+          shapeTagNames: k[o],
+          ...S
+        }
+      ) }, o))
+    ] })
+  ] });
+}
+const Ve = Y(Ce, { name: "VdtTranscodeDialog" })(I);
+I.propTypes = {
+  classes: t.objectOf(t.string),
+  className: t.string,
+  itemId: t.string.isRequired,
+  onSuccess: t.func,
+  onError: t.func,
+  onClose: t.func,
+  tabs: t.arrayOf(
+    t.shape({
+      value: t.string.isRequired,
+      icon: t.elementType,
+      label: t.string,
+      tagNameFilter: t.func,
+      resourceFilter: t.func
+    })
+  ),
+  noResourceText: t.string,
+  listShapeTagRef: t.shape({ current: t.objectOf(t.any) }),
+  listResourceTypeRef: t.shape({ current: t.objectOf(t.any) }),
+  hideDefault: t.bool,
+  hideDefaultText: t.string,
+  searchText: t.string,
+  searchValue: t.string,
+  ShapeTagListComponent: t.elementType,
+  ShapeTagListProps: t.objectOf(t.any)
+};
+I.defaultProps = {
+  classes: {},
+  className: void 0,
+  onSuccess: void 0,
+  onError: void 0,
+  onClose: void 0,
+  tabs: [
+    {
+      value: A,
+      icon: me,
+      label: "Vidispine",
+      tagNameFilter: (e) => e.filter((r) => !r.toLowerCase().includes("mediaconvert")),
+      resourceFilter: (e) => e.filter(({ vidinet: { type: r } = {} }) => r === A)
+    },
+    {
+      value: V,
+      icon: de,
+      label: "Bitmovin",
+      tagNameFilter: (e) => e.filter((r) => !r.toLowerCase().includes("mediaconvert")),
+      resourceFilter: (e) => e.filter(({ vidinet: { type: r } = {} }) => r === V)
+    },
+    {
+      value: F,
+      icon: he,
+      label: "AWS MediaConvert",
+      tagNameFilter: (e) => e.filter((r) => r.toLowerCase().includes("mediaconvert")),
+      resourceFilter: (e) => e.filter(
+        ({ vidinet: { type: r } = {} }) => r === F
+      )
+    }
+  ],
+  listShapeTagRef: void 0,
+  listResourceTypeRef: void 0,
+  noResourceText: "No transcode services configured in Vidinet.",
+  hideDefault: !0,
+  hideDefaultText: "Hide Default",
+  searchText: "Search",
+  searchValue: void 0,
+  ShapeTagListComponent: pe,
+  ShapeTagListProps: {}
+};
+export {
+  I as TranscodeDialog,
+  Ve as default
+};