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

package/dist/es/media/MediaCardHeader.js

@@ -0,0 +1,77 @@
+import { jsx as t } from "react/jsx-runtime";
+import { makeStyles as y, CardHeader as H } from "@material-ui/core";
+import M from "./MediaCardAvatar/index.js";
+import S from "./MediaCardMenu.js";
+const W = y({
+  root: {
+    paddingLeft: 8,
+    paddingRight: 0,
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  action: {
+    margin: 0
+  }
+});
+function T({
+  className: p,
+  primaryColor: a,
+  secondaryColor: o,
+  title: f,
+  titleTypographyProps: g = { noWrap: !0, style: { width: 220 } },
+  subheader: u,
+  subheaderTypographyProps: c = { noWrap: !0, style: { width: 220 } },
+  hover: i,
+  checked: r,
+  handleChecked: d,
+  avatar: l,
+  AvatarComponent: s = M,
+  AvatarProps: w = {},
+  MenuComponent: e = S,
+  MenuProps: x = {},
+  innerProps: n = {}
+}) {
+  const m = W();
+  return /* @__PURE__ */ t(
+    H,
+    {
+      className: p,
+      avatar: s && /* @__PURE__ */ t(
+        s,
+        {
+          primaryColor: a,
+          secondaryColor: o,
+          hover: i,
+          avatar: l,
+          handleChecked: d,
+          checked: r,
+          innerProps: n,
+          ...w
+        }
+      ),
+      action: e && /* @__PURE__ */ t(
+        e,
+        {
+          hover: i,
+          innerProps: n,
+          primaryColor: a,
+          secondaryColor: o,
+          handleChecked: d,
+          checked: r,
+          ...x
+        }
+      ),
+      title: f,
+      titleTypographyProps: g,
+      subheader: u,
+      subheaderTypographyProps: c,
+      classes: {
+        root: m.root,
+        action: m.action
+      }
+    }
+  );
+}
+export {
+  T as default
+};

package/dist/es/media/MediaCardMenu.js

@@ -0,0 +1,69 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { Avatar as h, ButtonBase as m, Menu as p, MenuItem as r } from "@material-ui/core";
+import { makeStyles as f } from "@material-ui/core/styles";
+import { MoreVert as v } from "@material-ui/icons";
+const C = f({
+  colorDefault: {
+    color: (o) => o.primaryColor,
+    backgroundColor: "transparent"
+  }
+});
+function S({ hover: o, primaryColor: i }) {
+  const s = C({ primaryColor: i }), [t, n] = d(null), a = (u) => {
+    n(u.currentTarget);
+  }, c = () => {
+    n(null);
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      style: {
+        visibility: o ? "visible" : "hidden",
+        transition: "visibility .2s ease-out"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          h,
+          {
+            onClick: a,
+            component: m,
+            disableRipple: !0,
+            classes: {
+              colorDefault: s.colorDefault
+            },
+            children: /* @__PURE__ */ e(v, {})
+          }
+        ),
+        /* @__PURE__ */ l(
+          p,
+          {
+            anchorEl: t,
+            keepMounted: !0,
+            open: !!t,
+            onClose: c,
+            elevation: 0,
+            PaperProps: { square: !0 },
+            getContentAnchorEl: null,
+            anchorOrigin: {
+              vertical: "bottom",
+              horizontal: "right"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: "right"
+            },
+            children: [
+              /* @__PURE__ */ e(r, { children: "First" }),
+              /* @__PURE__ */ e(r, { children: "Second" }),
+              /* @__PURE__ */ e(r, { children: "Third" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  S as default
+};

package/dist/es/media/MediaCardThumbnail/MediaCardThumbnail.js

@@ -0,0 +1,284 @@
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import f from "clsx";
+import e from "prop-types";
+import { parseMetadataType as Q } from "@vidispine/vdt-js";
+import { useHoverScrub as U } from "@vidispine/vdt-react";
+import X from "../MediaCardDurationLabel.js";
+import p from "../MediaCardThumbnailLabel/index.js";
+const ae = (o) => ({
+  root: {},
+  container: {
+    position: "relative"
+  },
+  onClick: { cursor: "pointer" },
+  scrubSlider: {
+    width: "2px",
+    height: "100%",
+    background: "#ddd",
+    position: "absolute",
+    zIndex: 4,
+    top: 0,
+    opacity: 0.9
+  },
+  scrubLabel: {
+    width: "fit-content",
+    backgroundColor: o.palette.type === "dark" ? o.palette.common.white : o.palette.common.black,
+    color: o.palette.type === "dark" ? o.palette.common.black : o.palette.common.white,
+    borderRadius: 2,
+    position: "absolute",
+    zIndex: 4,
+    top: -12
+  },
+  background: {
+    transform: "scale(1.1)",
+    backgroundSize: "cover",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    zIndex: 1,
+    height: "100%",
+    width: "100%",
+    position: "absolute"
+  },
+  backgroundHasImage: {
+    filter: "blur(20px) grayscale(60%)"
+  },
+  img: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "auto",
+    height: "auto",
+    maxWidth: "100%",
+    maxHeight: "100%",
+    zIndex: 2
+  },
+  labelContainer: {
+    position: "absolute",
+    height: "100%",
+    width: "100%",
+    zIndex: 3,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between"
+  },
+  labelTop: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  labelBottom: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  labelLeftTop: {},
+  labelRightTop: {},
+  labelLeftBottom: {},
+  labelRightBottom: {}
+});
+function h({
+  classes: o,
+  className: g,
+  component: L,
+  image: l,
+  height: y,
+  width: T,
+  primaryColor: v,
+  onClick: s,
+  labelLeftTop: C,
+  LabelComponentLeftTop: x,
+  LabelPropsLeftTop: k,
+  labelLeftBottom: P,
+  LabelComponentLeftBottom: B,
+  LabelPropsLeftBottom: R,
+  labelRightTop: w,
+  LabelComponentRightTop: N,
+  LabelPropsRightTop: S,
+  labelRightBottom: j,
+  LabelComponentRightBottom: O,
+  LabelPropsRightBottom: M,
+  innerProps: n,
+  scrubOnHover: i,
+  scrubOffsetProp: I,
+  scrubLabelLeftMargin: z,
+  ScrubLabelComponent: D,
+  ScrubLabelProps: $,
+  ...F
+}) {
+  const { itemType: c = {}, itemId: m } = n, { durationSeconds: H } = Q(c.metadata, { joinValue: ",", flat: !0 }), { thumbnails: W = {} } = c;
+  let { uri: r = [] } = W;
+  l && r.length === 0 && (r = [l]);
+  const {
+    thumbnailIndex: E,
+    thumbnailTimeCode: a,
+    thumbnailWidth: V,
+    onMouseMove: q,
+    scrubPosition: d,
+    handleShowScrub: u,
+    showScrub: A
+  } = U(r, I, H), G = -(d / V * 100 / 100 * z).toFixed(0), J = a ? `${m}?t=${a.toSeconds().toFixed(0)}` : `${m}`;
+  return /* @__PURE__ */ t(
+    L,
+    {
+      className: f(o.root, g, {
+        [o.onClick]: s
+      }),
+      onMouseEnter: i === !0 ? u(!0) : void 0,
+      onMouseLeave: i === !0 ? u(!1) : void 0,
+      onMouseMove: i === !0 ? q : void 0,
+      onClick: (K) => s(K, J, a),
+      ...F,
+      children: /* @__PURE__ */ b(
+        "div",
+        {
+          className: o.container,
+          style: {
+            height: y,
+            width: T
+          },
+          children: [
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: f(o.background, { [o.backgroundHasImage]: l }),
+                style: {
+                  backgroundColor: l ? void 0 : v,
+                  backgroundImage: l ? `url(${l})` : void 0
+                }
+              }
+            ),
+            /* @__PURE__ */ t("img", { className: o.img, src: r[E] || l, alt: "" }),
+            i && /* @__PURE__ */ t(
+              "div",
+              {
+                className: o.scrubSlider,
+                style: {
+                  left: d,
+                  display: A ? "block" : "none"
+                },
+                children: a && /* @__PURE__ */ t(
+                  D,
+                  {
+                    className: o.scrubLabel,
+                    style: { left: G },
+                    label: a.toSeconds().toFixed(0),
+                    ...$
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ b("div", { className: o.labelContainer, children: [
+              /* @__PURE__ */ b("div", { className: o.labelTop, children: [
+                /* @__PURE__ */ t("div", { className: o.labelLeftTop, children: /* @__PURE__ */ t(
+                  x,
+                  {
+                    label: C,
+                    innerProps: n,
+                    ...k
+                  }
+                ) }),
+                /* @__PURE__ */ t("div", { className: o.labelRightTop, children: /* @__PURE__ */ t(
+                  N,
+                  {
+                    label: w,
+                    innerProps: n,
+                    ...S
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ b("div", { className: o.labelBottom, children: [
+                /* @__PURE__ */ t("div", { className: o.labelLeftBottom, children: /* @__PURE__ */ t(
+                  B,
+                  {
+                    label: P,
+                    innerProps: n,
+                    ...R
+                  }
+                ) }),
+                /* @__PURE__ */ t("div", { className: o.labelRightBottom, children: /* @__PURE__ */ t(
+                  O,
+                  {
+                    label: j,
+                    innerProps: n,
+                    ...M
+                  }
+                ) })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+h.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.oneOfType([e.string, e.elementType]),
+  image: e.string,
+  height: e.oneOfType([e.string, e.number]),
+  width: e.oneOfType([e.string, e.number]),
+  primaryColor: e.string,
+  onClick: e.func,
+  labelLeftTop: e.string,
+  LabelComponentLeftTop: e.elementType,
+  LabelPropsLeftTop: e.objectOf(e.any),
+  labelLeftBottom: e.string,
+  LabelComponentLeftBottom: e.elementType,
+  LabelPropsLeftBottom: e.objectOf(e.any),
+  labelRightTop: e.string,
+  LabelComponentRightTop: e.elementType,
+  LabelPropsRightTop: e.objectOf(e.any),
+  labelRightBottom: e.string,
+  LabelComponentRightBottom: e.elementType,
+  LabelPropsRightBottom: e.objectOf(e.any),
+  innerProps: e.objectOf(e.any),
+  scrubOnHover: e.bool,
+  scrubOffsetProp: e.number,
+  scrubLabelLeftMargin: e.number,
+  ScrubLabelComponent: e.oneOfType([e.string, e.elementType]),
+  ScrubLabelProps: e.objectOf(e.any)
+};
+h.defaultProps = {
+  className: void 0,
+  classes: {},
+  component: "div",
+  image: void 0,
+  height: 180,
+  width: "100%",
+  primaryColor: void 0,
+  onClick: void 0,
+  labelLeftTop: void 0,
+  LabelComponentLeftTop: p,
+  LabelPropsLeftTop: {},
+  labelLeftBottom: void 0,
+  LabelComponentLeftBottom: p,
+  LabelPropsLeftBottom: {},
+  labelRightTop: void 0,
+  LabelComponentRightTop: p,
+  LabelPropsRightTop: {},
+  labelRightBottom: void 0,
+  LabelComponentRightBottom: p,
+  LabelPropsRightBottom: {},
+  innerProps: {},
+  scrubOnHover: !0,
+  scrubOffsetProp: 0,
+  scrubLabelLeftMargin: 60,
+  ScrubLabelComponent: X,
+  ScrubLabelProps: {}
+};
+export {
+  h as default,
+  ae as styles
+};

package/dist/es/media/MediaCardThumbnail/index.js

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

package/dist/es/media/MediaCardThumbnailLabel/MediaCardThumbnailLabel.js

@@ -0,0 +1,44 @@
+import { jsx as s } from "react/jsx-runtime";
+import p from "clsx";
+import o from "prop-types";
+const e = (a) => ({
+  root: {
+    color: a.palette.common.white,
+    backgroundColor: a.palette.common.black,
+    marginLeft: a.spacing(1),
+    marginRight: a.spacing(1),
+    marginTop: a.spacing(0.5),
+    marginBottom: a.spacing(0.5),
+    paddingLeft: a.spacing(0.5),
+    paddingRight: a.spacing(0.5)
+  },
+  label: {
+    ...a.typography.caption,
+    color: "inherit"
+  }
+});
+function r({ style: a, classes: i, className: n, label: l }) {
+  return /* @__PURE__ */ s("div", { className: p(i.root, n), style: a, children: /* @__PURE__ */ s("span", { className: i.label, children: l }) });
+}
+r.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.objectOf(o.string),
+  /**
+   * Override styles with className
+   */
+  className: o.string,
+  label: o.string,
+  style: o.objectOf(o.oneOfType([o.string, o.number]))
+};
+r.defaultProps = {
+  className: void 0,
+  classes: {},
+  label: void 0,
+  style: {}
+};
+export {
+  r as default,
+  e as styles
+};

package/dist/es/media/MediaCardThumbnailLabel/index.js

@@ -0,0 +1,9 @@
+import { withStyles as a } from "@material-ui/core";
+import e, { styles as i } from "./MediaCardThumbnailLabel.js";
+const l = a(i, { name: "VdtMediaCardThumbnailLabel" })(
+  e
+);
+l.displayName = "MediaCardThumbnailLabel";
+export {
+  l as default
+};

package/dist/es/search/Pagination.js

@@ -0,0 +1,32 @@
+import { jsx as p } from "react/jsx-runtime";
+import { TablePagination as s } from "@material-ui/core";
+import h from "./PaginationActions.js";
+function C({
+  count: t = 0,
+  page: a = 0,
+  rowsPerPage: o = 10,
+  rowsPerPageOptions: n = [10, 25, 50, 100],
+  onChangePage: r,
+  onChangeRowsPerPage: e,
+  ActionsComponent: c = h,
+  TablePaginationProps: i = {}
+}) {
+  const m = n.includes(o) ? n : [...n, o].sort((f, g) => f - g);
+  return /* @__PURE__ */ p(
+    s,
+    {
+      component: "div",
+      count: t,
+      page: a,
+      rowsPerPage: o,
+      onPageChange: r,
+      onRowsPerPageChange: e,
+      ActionsComponent: c,
+      rowsPerPageOptions: m,
+      ...i
+    }
+  );
+}
+export {
+  C as default
+};

package/dist/es/search/PaginationActions.js

@@ -0,0 +1,28 @@
+import { jsxs as o, Fragment as a, jsx as i } from "react/jsx-runtime";
+import { IconButton as l } from "@material-ui/core";
+import { FirstPage as e, KeyboardArrowLeft as n, KeyboardArrowRight as s, LastPage as h } from "@material-ui/icons";
+function k({ count: d, page: r, rowsPerPage: c, onPageChange: t }) {
+  return /* @__PURE__ */ o(a, { children: [
+    /* @__PURE__ */ i(l, { onClick: () => t({ page: 0 }), disabled: r === 0, children: /* @__PURE__ */ i(e, {}) }),
+    /* @__PURE__ */ i(l, { onClick: () => t({ page: r - 1 }), disabled: r === 0, children: /* @__PURE__ */ i(n, {}) }),
+    /* @__PURE__ */ i(
+      l,
+      {
+        onClick: () => t({ page: r + 1 }),
+        disabled: r >= Math.ceil(d / c) - 1,
+        children: /* @__PURE__ */ i(s, {})
+      }
+    ),
+    /* @__PURE__ */ i(
+      l,
+      {
+        onClick: () => t({ page: Math.max(0, Math.ceil(d / c) - 1) }),
+        disabled: r >= Math.ceil(d / c) - 1,
+        children: /* @__PURE__ */ i(h, {})
+      }
+    )
+  ] });
+}
+export {
+  k as default
+};

package/dist/es/search/SavedSearch/SaveSearchForm.js

@@ -0,0 +1,63 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { withStyles as S, InputBase as h, Button as f } from "@material-ui/core";
+const v = (e) => ({
+  root: {
+    paddingTop: e.spacing(1),
+    paddingBottom: e.spacing(1)
+  },
+  TextField: {},
+  Button: {
+    borderRadius: 0
+  }
+});
+function N({
+  classes: e,
+  itemSearchDocument: i,
+  onSaveSearch: n,
+  onSuccess: m = () => {
+  },
+  onError: r = () => {
+  },
+  nameText: c = "New Saved Search",
+  saveText: d = "Save"
+}) {
+  const [t, s] = p(""), l = (a) => {
+    if (a.preventDefault(), !t) {
+      r("No Name specified");
+      return;
+    }
+    n({
+      metadata: { title: t.trim() },
+      itemSearchDocument: i
+    }).then(m).catch(r);
+  };
+  return /* @__PURE__ */ u("form", { className: e.root, onSubmit: l, children: [
+    /* @__PURE__ */ o(
+      h,
+      {
+        className: e.TextField,
+        onChange: (a) => s(a.target.value),
+        fullWidth: !0,
+        placeholder: c
+      }
+    ),
+    /* @__PURE__ */ o(
+      f,
+      {
+        className: e.Button,
+        disabled: !t || t.trim() === "",
+        fullWidth: !0,
+        color: "primary",
+        variant: "contained",
+        disableElevation: !0,
+        type: "submit",
+        children: d
+      }
+    )
+  ] });
+}
+const B = S(v, { name: "VdtSaveSearchForm" })(N);
+export {
+  B as default
+};

package/dist/es/search/SavedSearch/SavedSearch.js

@@ -0,0 +1,65 @@
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import D from "clsx";
+import { withStyles as V } from "@material-ui/core";
+import { useSavedSearch as E } from "@vidispine/vdt-react";
+import G from "./SavedSearchList.js";
+import L from "./SaveSearchForm.js";
+const M = (e) => ({
+  root: {
+    padding: e.spacing(2)
+  }
+});
+function N({
+  classes: e,
+  className: S,
+  markerField: s,
+  markerValue: c,
+  itemSearchDocument: n,
+  onSelect: d,
+  onSaveSuccess: i = () => {
+  },
+  onSaveError: h = () => {
+  },
+  SearchListComponent: r = G,
+  SearchListProps: m = {},
+  SearchFormComponent: a = L,
+  SearchFormProps: l = {},
+  accessTranslate: v,
+  extraMenuItems: p
+}) {
+  const {
+    onDeleteSearch: f,
+    onUpdateSearchMetadata: u,
+    onGetSavedSearchSettings: g,
+    onSaveSearch: x,
+    searchProps: P
+  } = E({ markerField: s, markerValue: c, initialSearchState: { rowsPerPage: 5 } }), j = ({ collectionId: t }) => g({ collectionId: t }).then((w) => d(w, t));
+  return /* @__PURE__ */ y("div", { className: D(e.root, "VdtSavedSearch-root", S), children: [
+    a && /* @__PURE__ */ o(
+      a,
+      {
+        itemSearchDocument: n,
+        onSuccess: i,
+        onError: h,
+        onSaveSearch: x,
+        ...l
+      }
+    ),
+    r && /* @__PURE__ */ o(
+      r,
+      {
+        onSelect: j,
+        onDelete: f,
+        onUpdateSearchMetadata: u,
+        searchProps: P,
+        accessTranslate: v,
+        extraMenuItems: p,
+        ...m
+      }
+    )
+  ] });
+}
+const A = V(M, { name: "VdtSavedSearchList" })(N);
+export {
+  A as default
+};