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

package/dist/es/collection/CollectionRepresentativeThumbnail/CollectionRepresentativeThumbnail.js

@@ -0,0 +1,169 @@
+import { jsxs as u, jsx as a, Fragment as I } from "react/jsx-runtime";
+import { useMemo as v } from "react";
+import e from "prop-types";
+import g from "@mui/material/Box";
+import { styled as n } from "@mui/material/styles";
+import O from "@vidispine/proptypes";
+import { parseMetadataType as j } from "@vidispine/vdt-js";
+import "../../general/AvatarMenu/index.js";
+import S from "../../general/BlurredBackground/index.js";
+import "../../general/CalendarPicker/index.js";
+import "../../general/CompactBadge/index.js";
+import "../../general/CompactLabel/index.js";
+import w from "../../general/CornerLabelPlacer/index.js";
+import "../../general/ExpandButton/index.js";
+import L from "../../general/ImageCollage/index.js";
+import "../../general/MediaIcon/index.js";
+import "../../general/MenuItem/index.js";
+import "../../general/ScrubLine/index.js";
+import "../../general/Sort/index.js";
+import "../../general/TablePagination/index.js";
+import "../../general/ThemeContext/ThemeContext.js";
+const M = n(g)(({
+  onClick: l
+}) => ({
+  position: "relative",
+  height: "100%",
+  width: "100%",
+  ...l ? {
+    cursor: "pointer"
+  } : {}
+})), R = n(S)(() => ({
+  top: 0,
+  position: "absolute",
+  zIndex: 1
+})), z = n(L)(() => ({
+  position: "absolute",
+  zIndex: 2,
+  top: "50%",
+  left: "50%",
+  height: "100%",
+  width: "100%",
+  transform: "translate(-50%, -50%)",
+  objectFit: "cover"
+})), P = n(g)(() => ({
+  position: "absolute",
+  zIndex: 2,
+  top: "50%",
+  left: "50%",
+  height: "100%",
+  width: "100%",
+  transform: "translate(-50%, -50%)",
+  objectFit: "cover"
+})), V = n(w)(() => ({
+  top: 0,
+  position: "absolute",
+  zIndex: 3
+})), F = {
+  Root: M,
+  BlurredBackground: R,
+  ImageCollage: z,
+  ImageBox: P,
+  CornerLabelPlacer: V
+};
+function b({
+  collectionType: l,
+  showBlurredBackground: i,
+  showCombined: f,
+  label: B,
+  onClick: m,
+  components: C,
+  componentsProps: o
+}) {
+  var s;
+  const {
+    Root: h,
+    BlurredBackground: c,
+    ImageCollage: y,
+    CornerLabelPlacer: x,
+    ImageBox: k
+  } = C, {
+    id: d,
+    metadata: p
+  } = l || {}, t = v(() => {
+    const {
+      __representativeThumbnailsNoAuth: r
+    } = j(p, {
+      flatTimespan: !0
+    });
+    return r == null ? void 0 : r.map((T) => ({
+      src: T,
+      alt: `Representative Thumbnail for Collection ${d}`
+    }));
+  }, [d, p]);
+  return /* @__PURE__ */ u(h, { onClick: typeof m != "function" ? void 0 : (r) => m(r, {
+    collectionType: l
+  }), ...o.root, children: [
+    f ? /* @__PURE__ */ a(y, { images: t, showBlurredBackground: i, ...o.imageCollage, components: {
+      ...o.imageCollage.components || {},
+      BlurredBackground: ((s = o.imageCollage.components) == null ? void 0 : s.BlurredBackground) || c
+    }, componentsProps: {
+      ...o,
+      blurredBackground: {
+        ...o.blurredBackground
+      }
+    } }) : (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ u(I, { children: [
+      i && /* @__PURE__ */ a(c, { ...o.blurredBackground }),
+      /* @__PURE__ */ a(k, { ...(t == null ? void 0 : t[0]) || {}, component: "img", ...o.imageBox })
+    ] }),
+    /* @__PURE__ */ a(x, { labelBottomRight: B, ...o.cornerLabelPlacer })
+  ] });
+}
+b.propTypes = {
+  /**
+   * A VidiCore Collection
+   *
+   */
+  collectionType: O.CollectionType,
+  /**
+   * Show a blurred background behind the thumbnail
+   */
+  showBlurredBackground: e.bool,
+  /**
+   * Show multiple or thumbnail combined to one
+   */
+  showCombined: e.bool,
+  /**
+   * Add a label above thumbnail
+   */
+  label: e.string,
+  /**
+   * Add event handler when the thumbnail is clicked
+   *
+   * Set `undefined` to disable
+   */
+  onClick: e.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    BlurredBackground: e.elementType,
+    ImageCollage: e.elementType,
+    CornerLabelPlacer: e.elementType,
+    ImageBox: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    blurredBackground: e.instanceOf(Object),
+    imageCollage: e.instanceOf(Object),
+    cornerLabelPlacer: e.instanceOf(Object),
+    imageBox: e.instanceOf(Object)
+  })
+};
+b.defaultProps = {
+  collectionType: void 0,
+  showBlurredBackground: void 0,
+  showCombined: !1,
+  label: void 0,
+  onClick: void 0,
+  components: F,
+  componentsProps: void 0
+};
+export {
+  b as default
+};

package/dist/es/collection/CollectionRepresentativeThumbnail/index.js

@@ -0,0 +1,11 @@
+import { styled as n } from "@mui/material/styles";
+import { withOverrides as r } from "../../_utils/withOverrides.js";
+import m from "./CollectionRepresentativeThumbnail.js";
+const o = "CollectionRepresentativeThumbnail", e = `Vdt${o}`, i = r(e)(m), s = n(i, {
+  name: e,
+  overridesResolver: (p, t) => t.root
+})(() => ({}));
+s.displayName = o;
+export {
+  s as default
+};

package/dist/es/entity/EntityAvatar/EntityAvatar.js

@@ -0,0 +1,102 @@
+import { jsx as n } from "react/jsx-runtime";
+import o from "prop-types";
+import u from "@mui/material/Skeleton";
+import f from "@mui/material/Avatar";
+import { styled as d } from "@mui/material/styles";
+import y from "../EntityIcon/index.js";
+function g({
+  variant: t
+}) {
+  return /* @__PURE__ */ n(u, { sx: {
+    height: "100%",
+    width: "100%"
+  }, variant: t === "square" ? "rect" : t, "data-testid": "skeleton" });
+}
+const v = d(f, {
+  shouldForwardProp: (t) => t !== "isLoading"
+})(({
+  theme: t,
+  isLoading: e
+}) => ({
+  transition: "background-color .2s ease-out",
+  backgroundColor: t.palette.primary.main,
+  ...e ? {
+    backgroundColor: "unset"
+  } : {}
+})), T = d(y)(({
+  theme: t
+}) => ({
+  color: t.palette.background.paper
+})), b = {
+  Root: v,
+  Icon: T
+};
+function s({
+  entityType: t,
+  mediaType: e,
+  variant: r,
+  isLoading: a,
+  loadingSlot: i,
+  components: c,
+  componentsProps: p
+}) {
+  const {
+    Root: l,
+    Icon: m
+  } = c;
+  return /* @__PURE__ */ n(l, { variant: r, isLoading: a, ...p.root, children: a ? i && i({
+    variant: r
+  }) : /* @__PURE__ */ n(m, { entityType: t, ...e ? {
+    mediaType: e
+  } : {}, ...p.icon }) });
+}
+s.propTypes = {
+  /**
+   * Type of icon for the Avatar
+   */
+  entityType: o.oneOf(["item", "collection", "library"]),
+  /**
+   * Optional, use mediaType icon for item and library
+   */
+  mediaType: o.oneOf(["audio", "video", "image", "document", "data", "pdf", "none"]),
+  /**
+   * Variant/shapes for the Avatar
+   */
+  variant: o.oneOf(["circular", "rounded", "square"]),
+  /**
+   * Show loading state
+   */
+  isLoading: o.bool,
+  // Slots
+  /**
+   * Shown when avatar is loading
+   */
+  loadingSlot: o.oneOfType([o.elementType, o.node]),
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType,
+    Icon: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object),
+    icon: o.instanceOf(Object)
+  })
+};
+s.defaultProps = {
+  entityType: void 0,
+  mediaType: void 0,
+  variant: "square",
+  isLoading: !1,
+  loadingSlot: g,
+  components: b,
+  componentsProps: void 0
+};
+export {
+  s as default
+};

package/dist/es/entity/EntityAvatar/index.js

@@ -0,0 +1,11 @@
+import { styled as r } from "@mui/material/styles";
+import { withOverrides as n } from "../../_utils/withOverrides.js";
+import m from "./EntityAvatar.js";
+const t = "EntityAvatar", o = `Vdt${t}`, i = n(o)(m), s = r(i, {
+  name: o,
+  overridesResolver: (a, e) => e.root
+})(() => ({}));
+s.displayName = t;
+export {
+  s as default
+};

package/dist/es/entity/EntityCard/components/EntityCardActions.js

@@ -0,0 +1,68 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import S from "@mui/material/Checkbox";
+import x from "@mui/material/CardActions";
+import A from "@mui/material/IconButton";
+import { styled as n } from "@mui/material/styles";
+import "../../../general/AvatarMenu/index.js";
+import "../../../general/BlurredBackground/index.js";
+import "../../../general/CalendarPicker/index.js";
+import "../../../general/CompactBadge/index.js";
+import "../../../general/CompactLabel/index.js";
+import "../../../general/CornerLabelPlacer/index.js";
+import I from "../../../general/ExpandButton/index.js";
+import "../../../general/ImageCollage/index.js";
+import "../../../general/MediaIcon/index.js";
+import "../../../general/MenuItem/index.js";
+import "../../../general/ScrubLine/index.js";
+import "../../../general/Sort/index.js";
+import "../../../general/TablePagination/index.js";
+import "../../../general/ThemeContext/ThemeContext.js";
+import { getEntityProp as b } from "../../_utils/getEntityProp.js";
+import "@vidispine/vdt-js";
+const k = n(x)(() => ({
+  alignItems: "flex-end",
+  padding: 8
+})), B = n(A)(() => ({
+  transition: "color .2s ease-out"
+})), j = n(S)(() => ({
+  marginLeft: "auto",
+  transition: "color .2s ease-out"
+}));
+function X({
+  itemType: p,
+  collectionType: l,
+  classes: P,
+  checked: s = !1,
+  expanded: d = !1,
+  actions: t = [],
+  onActionClick: f = () => null,
+  onExpand: i,
+  onCheck: m,
+  expandButton: u = {},
+  ...c
+}) {
+  const a = (o, e) => {
+    f(o, {
+      action: e,
+      ...b({
+        itemType: p,
+        collectionType: l
+      })
+    });
+  };
+  return !(t != null && t.length) && !m && !i ? null : /* @__PURE__ */ h(k, { disableSpacing: !0, ...c, children: [
+    t == null ? void 0 : t.map((o) => {
+      const {
+        name: e,
+        iconButtonProps: C,
+        Icon: g
+      } = o || {};
+      return /* @__PURE__ */ r(B, { onClick: (y) => a(y, o), ...C, children: /* @__PURE__ */ r(g, {}) }, e);
+    }),
+    m && /* @__PURE__ */ r(j, { checked: s, onChange: m }),
+    i && /* @__PURE__ */ r(I, { expanded: d, onClick: i, ...u })
+  ] });
+}
+export {
+  X as default
+};

package/dist/es/entity/EntityCard/components/EntityCardBase.js

@@ -0,0 +1,43 @@
+import { jsx as t } from "react/jsx-runtime";
+import a from "@mui/material/Card";
+import { styled as i } from "@mui/material/styles";
+const e = i(a, {
+  shouldForwardProp: (o) => o !== "checked"
+})(({
+  checked: o,
+  theme: r
+}) => ({
+  width: "100%",
+  padding: 0,
+  height: "100%",
+  borderWidth: 0.7,
+  borderStyle: "solid",
+  transition: "border-color .2s ease-out",
+  "&:hover": {
+    "& .MuiIconButton-root": {
+      color: r.palette.primary.main
+    },
+    "& .MuiAvatar-root": {
+      color: r.palette.primary.main
+    },
+    "& .MuiCheckbox-root": {
+      color: r.palette.primary.main
+    },
+    "& .VdtEntityAvatar-root": {
+      backgroundColor: r.palette.primary.main
+    }
+  },
+  borderColor: o ? r.palette.primary.main : "transparent",
+  backgroundImage: "unset",
+  // remove "opacity" from card elevation
+  overflow: "unset"
+}));
+function p({
+  children: o,
+  ...r
+}) {
+  return /* @__PURE__ */ t(e, { ...r, children: o });
+}
+export {
+  p as default
+};

package/dist/es/entity/EntityCard/components/EntityCardContent.js

@@ -0,0 +1,34 @@
+import { jsx as o } from "react/jsx-runtime";
+import d from "@mui/material/CardContent";
+import m from "@mui/material/Tooltip";
+import a from "@mui/material/Typography";
+import f from "@mui/material/Box";
+import { styled as y } from "@mui/material/styles";
+import { getEntityText as c } from "../../_utils/getEntityText.js";
+const h = y(a, {
+  shouldForwardProp: (t) => t !== "WebkitLineClamp"
+})(({
+  WebkitLineClamp: t
+}) => ({
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  WebkitLineClamp: t
+}));
+function k({
+  itemType: t,
+  collectionType: i,
+  content: r,
+  showTooltip: n = !1,
+  WebkitLineClamp: l = 3,
+  ...p
+}) {
+  const e = c(r, {
+    itemType: t,
+    collectionType: i
+  });
+  return r ? /* @__PURE__ */ o(d, { ...p, children: /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(m, { title: e || "", enterDelay: 500, open: n, children: /* @__PURE__ */ o(h, { WebkitLineClamp: l, variant: "body2", color: "textSecondary", component: "p", children: e }) }) }) }) : null;
+}
+export {
+  k as default
+};

package/dist/es/entity/EntityCard/components/EntityCardHeader.js

@@ -0,0 +1,115 @@
+import { jsx as e } from "react/jsx-runtime";
+import H from "@mui/material/CardHeader";
+import { styled as p } from "@mui/material/styles";
+import "../../EntityIcon/index.js";
+import P from "../../EntityAvatar/index.js";
+import "../../EntityList/index.js";
+import S from "../../../general/AvatarMenu/index.js";
+import "../../../general/BlurredBackground/index.js";
+import "../../../general/CalendarPicker/index.js";
+import "../../../general/CompactBadge/index.js";
+import "../../../general/CompactLabel/index.js";
+import "../../../general/CornerLabelPlacer/index.js";
+import "../../../general/ExpandButton/index.js";
+import "../../../general/ImageCollage/index.js";
+import "../../../general/MediaIcon/index.js";
+import "../../../general/MenuItem/index.js";
+import "../../../general/ScrubLine/index.js";
+import "../../../general/Sort/index.js";
+import "../../../general/TablePagination/index.js";
+import "../../../general/ThemeContext/ThemeContext.js";
+import { getEntityProp as W } from "../../_utils/getEntityProp.js";
+import { getEntityText as r } from "../../_utils/getEntityText.js";
+const E = p(H)(({
+  avatar: t,
+  action: o
+}) => {
+  const i = t ? 56 : 0, a = o ? 40 + 16 : 0;
+  return {
+    display: "inline-block",
+    padding: 16,
+    width: "inherit",
+    "& .MuiCardHeader-avatar": {
+      float: "left"
+    },
+    "& .MuiCardHeader-content": {
+      float: "left",
+      width: `calc(100% - ${i}px - ${a}px)`
+    },
+    "& .MuiCardHeader-action": {
+      marginTop: 0,
+      float: "right"
+    },
+    float: "none"
+  };
+}), M = p(P)(({
+  theme: t
+}) => ({
+  backgroundColor: t.palette.mode === "light" ? "rgba(0, 0, 0, 0.54)" : "#fff"
+})), A = p(S)(({
+  theme: t
+}) => ({
+  marginLeft: 16,
+  "& .MuiAvatar-root": {
+    color: t.palette.mode === "light" ? "rgba(0, 0, 0, 0.54)" : "#fff",
+    backgroundColor: "transparent",
+    "&:hover": {
+      backgroundColor: "rgba(255, 255, 255, 0.08)"
+    }
+  }
+}));
+function Z({
+  itemType: t,
+  collectionType: o,
+  title: i,
+  subheader: a,
+  menuOptions: m,
+  onOptionClick: c,
+  entityAvatar: f = {},
+  avatarMenu: n = {},
+  ...h
+}) {
+  var d, l, s;
+  const {
+    id: g
+  } = t || o || {}, u = r(i, {
+    itemType: t,
+    collectionType: o
+  }), C = r(a, {
+    itemType: t,
+    collectionType: o
+  }), b = (l = (d = r("mimeType", {
+    itemType: t
+  })) == null ? void 0 : d.split("/")) == null ? void 0 : l[0], y = r("mediaType", {
+    itemType: t
+  }) || b, v = (x, k) => {
+    c(x, {
+      option: k,
+      ...W({
+        itemType: t,
+        collectionType: o
+      })
+    });
+  };
+  return /* @__PURE__ */ e(E, { title: u || g, subheader: C, titleTypographyProps: {
+    noWrap: !0
+  }, subheaderTypographyProps: {
+    noWrap: !0
+  }, avatar: /* @__PURE__ */ e(M, { entityType: t && "item" || o && "collection", mediaType: y, ...f }), action: m && /* @__PURE__ */ e(A, { minWidth: "unset", options: m, onOptionClick: v, componentsProps: {
+    menu: {
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      ...((s = n.componentsProps) == null ? void 0 : s.menu) || {}
+    },
+    ...n.componentsProps || {}
+  }, ...n }), ...h });
+}
+export {
+  Z as default
+};

package/dist/es/entity/EntityIcon/EntityIcon.js

@@ -0,0 +1,107 @@
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import o from "prop-types";
+import u from "@mui/icons-material/esm/Folder";
+import h from "@mui/icons-material/esm/NoteAdd";
+import l from "@mui/icons-material/esm/LibraryBooks";
+import O from "@mui/icons-material/esm/LibraryMusic";
+import L from "@mui/icons-material/esm/PhotoLibrary";
+import j from "@mui/icons-material/esm/VideoLibrary";
+import x from "@mui/material/Box";
+import { styled as c } from "@mui/material/styles";
+import "../../general/AvatarMenu/index.js";
+import "../../general/BlurredBackground/index.js";
+import "../../general/CalendarPicker/index.js";
+import "../../general/CompactBadge/index.js";
+import "../../general/CompactLabel/index.js";
+import "../../general/CornerLabelPlacer/index.js";
+import "../../general/ExpandButton/index.js";
+import "../../general/ImageCollage/index.js";
+import m from "../../general/MediaIcon/index.js";
+import "../../general/MenuItem/index.js";
+import "../../general/ScrubLine/index.js";
+import "../../general/Sort/index.js";
+import "../../general/TablePagination/index.js";
+import "../../general/ThemeContext/ThemeContext.js";
+const C = c(x)(({
+  theme: e
+}) => ({
+  display: "flex",
+  color: e.palette.primary.main
+})), M = c(h, {
+  shouldForwardProp: (e) => e !== "mediaType"
+})(() => ({})), T = c(u, {
+  shouldForwardProp: (e) => e !== "mediaType"
+})(() => ({})), P = {
+  Root: C,
+  ItemIcon: m,
+  LibraryIcon: m,
+  PlaceholderIcon: M,
+  CollectionIcon: T
+};
+function p({
+  entityType: e,
+  mediaType: r,
+  components: a,
+  componentsProps: t
+}) {
+  const {
+    Root: d,
+    PlaceholderIcon: I,
+    ItemIcon: s,
+    CollectionIcon: y,
+    LibraryIcon: f
+  } = a, n = e == null ? void 0 : e.toLowerCase();
+  return /* @__PURE__ */ b(d, { component: "span", ...t.root, children: [
+    n === "item" && /* @__PURE__ */ i(s, { type: r, ...t.itemIcon }),
+    n === "collection" && /* @__PURE__ */ i(y, { mediaType: r, ...t.collectionIcon }),
+    n === "library" && /* @__PURE__ */ i(f, { type: r, ...t.libraryIcon, components: {
+      PlaceholderIcon: l,
+      FileIcon: l,
+      AudioIcon: O,
+      VideoIcon: j,
+      ImageIcon: L,
+      ...t.libraryIcon.components || {}
+    } }),
+    !["item", "collection", "library"].includes(n) && /* @__PURE__ */ i(I, { mediaType: r, ...t.placeholderIcon })
+  ] });
+}
+p.propTypes = {
+  /**
+   * `placeholderIcon` is shown if entityType is undefined or not a string
+   */
+  entityType: o.oneOf(["item", "collection", "library"]),
+  /**
+   * Optional, use mediaType icon for item and library
+   */
+  mediaType: o.oneOf(["audio", "video", "image", "document", "data", "pdf", "none"]),
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType,
+    PlaceholderIcon: o.elementType,
+    ItemIcon: o.elementType,
+    CollectionIcon: o.elementType,
+    LibraryIcon: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object),
+    placeholderIcon: o.instanceOf(Object),
+    itemIcon: o.instanceOf(Object),
+    collectionIcon: o.instanceOf(Object),
+    libraryIcon: o.instanceOf(Object)
+  })
+};
+p.defaultProps = {
+  entityType: void 0,
+  mediaType: void 0,
+  components: P,
+  componentsProps: void 0
+};
+export {
+  p as default
+};

package/dist/es/entity/EntityIcon/index.js

@@ -0,0 +1,11 @@
+import { styled as n } from "@mui/material/styles";
+import { withOverrides as r } from "../../_utils/withOverrides.js";
+import m from "./EntityIcon.js";
+const o = "EntityIcon", t = `Vdt${o}`, i = r(t)(m), s = n(i, {
+  name: t,
+  overridesResolver: (d, e) => e.root
+})(() => ({}));
+s.displayName = o;
+export {
+  s as default
+};