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

package/dist/es/collection/CollectionCard/CollectionCard.js

@@ -0,0 +1,87 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useMemo as T } from "react";
+import e from "prop-types";
+import { parseMetadataType as y } from "@vidispine/vdt-js";
+import b from "../../media/MediaCard/index.js";
+import M from "./components/CollectionAvatar.js";
+const x = {}, h = ({
+  collectionType: t,
+  titleSelector: n,
+  subheaderSelector: a,
+  parseMetadataOpts: r
+}) => {
+  const { metadata: p = {} } = t, o = y(p, r);
+  return {
+    title: n(o),
+    subheader: a(o)
+  };
+};
+function s({
+  collectionType: t,
+  MediaCardComponent: n,
+  AvatarComponent: a,
+  ThumbnailComponent: r,
+  MenuComponent: p,
+  ContentComponent: o,
+  ActionsComponent: i,
+  metadataToProps: m,
+  parseMetadataOpts: u,
+  titleSelector: d,
+  subheaderSelector: c,
+  ...C
+}) {
+  const l = T(
+    () => m({
+      collectionType: t,
+      parseMetadataOpts: u,
+      titleSelector: d,
+      subheaderSelector: c
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [m]
+  );
+  return /* @__PURE__ */ f(
+    n,
+    {
+      title: l.title,
+      subheader: l.subheader,
+      collectionType: t,
+      AvatarComponent: a,
+      ThumbnailComponent: r,
+      MenuComponent: p,
+      ContentComponent: o,
+      ActionsComponent: i,
+      ...C
+    }
+  );
+}
+s.propTypes = {
+  collectionType: e.objectOf(e.any),
+  parseMetadataOpts: e.objectOf(e.any),
+  metadataToProps: e.func,
+  MediaCardComponent: e.elementType,
+  AvatarComponent: e.elementType,
+  ThumbnailComponent: e.elementType,
+  MenuComponent: e.elementType,
+  ContentComponent: e.elementType,
+  ActionsComponent: e.elementType,
+  titleSelector: e.func,
+  subheaderSelector: e.func
+};
+s.defaultProps = {
+  collectionType: void 0,
+  metadataToProps: h,
+  parseMetadataOpts: { joinValue: ", ", flat: !0 },
+  MediaCardComponent: b,
+  AvatarComponent: M,
+  ThumbnailComponent: null,
+  MenuComponent: null,
+  ContentComponent: null,
+  ActionsComponent: null,
+  titleSelector: (t) => t.title,
+  subheaderSelector: (t) => t.created
+};
+export {
+  s as default,
+  x as styles
+};

package/dist/es/collection/CollectionCard/components/CollectionAvatar.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Avatar as o } from "@material-ui/core";
+import { Folder as t } from "@material-ui/icons";
+function m() {
+  return /* @__PURE__ */ r(o, { variant: "square", children: /* @__PURE__ */ r(t, {}) });
+}
+export {
+  m as default
+};

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

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

package/dist/es/collection/CollectionCardThumbnail/CollectionCardThumbnail.js

@@ -0,0 +1,107 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useState as j, useEffect as k } from "react";
+import E from "clsx";
+import t from "prop-types";
+import { utils as U } from "@vidispine/vdt-api";
+import { parseMetadataType as x } from "@vidispine/vdt-js";
+import _ from "../../general/ImageCollage/index.js";
+const V = () => ({
+  root: {},
+  isClickable: { cursor: "pointer" }
+});
+function p({
+  classes: i,
+  className: u,
+  component: f,
+  height: d,
+  width: h,
+  primaryColor: g,
+  onClick: s,
+  onError: l,
+  innerProps: b,
+  ImageCollageProps: y = {},
+  ...C
+}) {
+  const { collectionId: T, collectionType: { metadata: a } = {} } = b, [c, m] = j([]), { defaultClient: { defaults: { baseURL: r } = {} } = {} } = U;
+  k(() => {
+    const { __representativeThumbnailsNoAuth: o = [] } = x(a, {
+      flat: !0
+    });
+    m(
+      o.map((e) => (r ? r.replace(/\/$/, "") : "") + e)
+    );
+  }, [a, r]);
+  const v = (o = "") => {
+    try {
+      return o.split(";").shift().split("/").pop();
+    } catch {
+      return "";
+    }
+  }, P = (o) => {
+    const { target: { src: e = "" } = {} } = o, I = v(e);
+    l && l(`Could not get thumbnail for item ${I} in collection ${T}`), m((O) => O.filter((N) => N !== e));
+  };
+  return /* @__PURE__ */ n(
+    f,
+    {
+      className: E(i.root, u, {
+        [i.isClickable]: s
+      }),
+      onClick: s,
+      ...C,
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          style: { height: d, width: h, backgroundColor: c.length ? void 0 : g },
+          children: /* @__PURE__ */ n(
+            _,
+            {
+              className: "VdtCollectionCardThumbnail-image",
+              urls: c,
+              onError: P,
+              ...y
+            }
+          )
+        }
+      )
+    }
+  );
+}
+p.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.objectOf(t.string),
+  /**
+   * Override styles with className
+   */
+  className: t.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: t.oneOfType([t.string, t.elementType]),
+  height: t.oneOfType([t.string, t.number]),
+  width: t.oneOfType([t.string, t.number]),
+  primaryColor: t.string,
+  onClick: t.func,
+  onError: t.func,
+  innerProps: t.objectOf(t.any),
+  ImageCollageProps: t.objectOf(t.any)
+};
+p.defaultProps = {
+  className: "",
+  classes: {},
+  component: "div",
+  height: 180,
+  width: 284,
+  primaryColor: void 0,
+  onClick: void 0,
+  onError: void 0,
+  innerProps: {},
+  ImageCollageProps: {}
+};
+export {
+  p as default,
+  V as styles
+};

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

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

package/dist/es/collection/CollectionContent/CollectionContent.js

@@ -0,0 +1,147 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useState as _, useEffect as j, createElement as q } from "react";
+import g from "clsx";
+import { withStyles as I, List as z, emphasize as x } from "@material-ui/core";
+import { collection as G } from "@vidispine/vdt-api";
+import { compose as D, useGetCollection as H, useRepresentativeItems as M } from "@vidispine/vdt-react";
+import $ from "../../dnd/hoc/withDrag.js";
+import F from "../../dnd/hoc/withDrop.js";
+import "../../dnd/contexts/DragAndDropContext.js";
+import { uuidv4 as J } from "../../utils.js";
+import K from "./components/CollectionContentEntity.js";
+const Q = "COLLECTION", ft = () => ({
+  root: {}
+});
+function U({ children: t, classes: r, className: e, ...i }) {
+  return /* @__PURE__ */ p(z, { className: g(e, r.root), ...i, children: t });
+}
+const X = (t) => ({
+  root: {
+    transition: "background-color 0.3s ease",
+    paddingLeft: t.spacing(2),
+    paddingRight: t.spacing(2),
+    paddingTop: t.spacing(1),
+    paddingBottom: t.spacing(1),
+    minHeight: 60,
+    minWidth: 300
+  },
+  canDrop: {
+    boxShadow: `inset 0px 0px 1px 1px ${t.palette.primary.main}`,
+    "&.VdtDroppable-isOver": {
+      backgroundColor: x(t.palette.background.paper, 0.05)
+    }
+  }
+}), Z = D(
+  I(X, { name: "VdtCollectionContentDroppable" }),
+  F
+)(U), tt = (t) => ({
+  root: {
+    marginBottom: t.spacing(1.25),
+    backgroundColor: t.palette.type === "dark" ? x(t.palette.background.paper, 0.1) : void 0,
+    color: t.palette.type === "dark" ? t.palette.common.white : void 0,
+    borderColor: "transparent",
+    borderWidth: 0.7,
+    borderStyle: "solid",
+    transition: "border-color 1s ease-out",
+    overflow: "hidden",
+    borderRadius: 4
+  },
+  isDragging: {
+    opacity: 0
+  }
+});
+function ot({ children: t, classes: r = {}, className: e, ...i }) {
+  return /* @__PURE__ */ p("div", { className: g(e, r.root), children: /* @__PURE__ */ p(K, { ...i }) });
+}
+const et = D(
+  I(tt, { name: "VdtCollectionContentEntityDraggable" }),
+  $
+)(ot);
+function gt({
+  classes: t,
+  className: r,
+  collectionId: e,
+  ListProps: i = {},
+  ListComponent: E = Z,
+  ListItemComponent: w = et,
+  ListItemProps: k = {},
+  ListItemMenuProps: R = {},
+  onClick: h,
+  onDrop: L = () => {
+  },
+  onChange: u,
+  selected: S,
+  onError: c,
+  onRouteChange: O
+}) {
+  const { collectionType: N, onRefresh: A } = H({ collectionId: e }), { content: l } = N, [s, m] = _([]);
+  j(() => {
+    l && m(l.map((o) => ({ ...o, reorderId: J() })));
+  }, [l, m]);
+  const W = async (o, n, d) => {
+    try {
+      await G.removeCollectionEntity({
+        collectionId: o,
+        entityId: n,
+        queryParams: {
+          type: d.toLowerCase()
+        }
+      }), A();
+    } catch (C) {
+      c && c(C);
+    }
+  }, {
+    representativeItems: P,
+    onAdd: T,
+    onRemove: V
+  } = M({
+    collectionId: e,
+    onError: c
+  }), B = ({ dragId: o, hoverId: n, originalDragIndex: d }) => {
+    o === void 0 || n === void 0 && d === void 0 || m((C) => {
+      const a = [...C], y = s.findIndex((f) => f.reorderId === o), b = s.findIndex((f) => f.reorderId === n), v = b > -1 ? b : d;
+      return [a[v], a[y]] = [a[y], a[v]], a;
+    });
+  }, Y = () => {
+    u && u(s);
+  };
+  return /* @__PURE__ */ p(
+    E,
+    {
+      dropInfo: { entityType: Q },
+      className: g(t.root, r),
+      onDrop: L,
+      ...i,
+      children: s.map((o, n) => /* @__PURE__ */ q(
+        w,
+        {
+          ...o,
+          key: o.reference || o.id,
+          index: n,
+          id: o.reorderId,
+          itemId: o.id,
+          itemType: o,
+          collectionContentType: o,
+          representativeItems: P,
+          selected: S,
+          onClick: h,
+          onSort: B,
+          callbackOnDrop: Y,
+          onRouteChange: O,
+          ListItemMenuProps: {
+            onRemoveCollectionEntity: W,
+            onAddAsRepresentativeItem: T,
+            onRemoveAsRepresentativeItem: V,
+            selectedCollectionId: e,
+            ...R
+          },
+          ...k
+        }
+      ))
+    }
+  );
+}
+export {
+  gt as default,
+  ft as styles
+};

package/dist/es/collection/CollectionContent/components/CollectionContentCollection.js

@@ -0,0 +1,160 @@
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { useState as T } from "react";
+import b from "clsx";
+import C from "moment";
+import { withStyles as S, Paper as k, IconButton as I, ListItem as w, ListItemAvatar as P, ListItemText as A, Menu as F, MenuItem as $ } from "@material-ui/core";
+import { Folder as j, MoreVert as B } from "@material-ui/icons";
+import { parseTimespan as V } from "@vidispine/vdt-js";
+import O from "../../../general/MimeTypeIcon/index.js";
+const R = () => ({
+  ListItemAvatar: { paddingRight: 6, marginTop: 0, marginBottom: 0 },
+  Paper: {
+    height: 94,
+    width: 168,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  Icon: { fontSize: 40 },
+  primary: { textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" },
+  secondary: { fontStyle: "italic" },
+  ListItemText: {},
+  Menu: { visibility: "hidden" },
+  root: {
+    "&:hover $Menu": {
+      visibility: "visible"
+    }
+  }
+}), q = ({
+  className: d,
+  classes: t,
+  ListItemTextComponent: r = A,
+  collectionId: u,
+  collectionType: i,
+  showUser: n,
+  showDate: l,
+  ...m
+}) => {
+  const { metadata: { timespan: c = [] } = {} } = i, p = c.find(
+    (h) => h.start === "-INF" && h.end === "+INF"
+  ), { title: s, user: o, created: f } = V(p, {
+    flat: !0,
+    arrayOnSingleValue: !1
+  });
+  let a;
+  return n && (a = /* @__PURE__ */ e("div", { className: t.secondary, children: o })), l && (a = /* @__PURE__ */ e("div", { className: t.secondary, children: C(f).fromNow() })), n && l && (a = /* @__PURE__ */ e("div", { className: t.secondary, children: `${o} • ${C(f).fromNow()}` })), /* @__PURE__ */ e(
+    r,
+    {
+      className: d,
+      primary: /* @__PURE__ */ e("div", { className: t.primary, children: s }),
+      secondary: a,
+      secondaryTypographyProps: { component: "div" },
+      ...m
+    }
+  );
+};
+function z({
+  className: d,
+  entityId: t,
+  entityType: r,
+  selectedCollectionId: u,
+  onRemoveCollectionEntity: i,
+  onRemoveCollectionEntityText: n = "Remove From Collection",
+  IconComponent: l = B
+}) {
+  const [m, c] = T(null), p = (o) => {
+    c(o.currentTarget);
+  }, s = () => {
+    c(null);
+  };
+  return /* @__PURE__ */ v("div", { className: d, children: [
+    /* @__PURE__ */ e(I, { onClick: p, children: /* @__PURE__ */ e(l, {}) }),
+    /* @__PURE__ */ e(F, { open: !!m, onClose: s, anchorEl: m, children: /* @__PURE__ */ e(
+      $,
+      {
+        onClick: (o) => {
+          o.stopPropagation(), i(u, t, r), s();
+        },
+        disabled: i === void 0,
+        children: n
+      }
+    ) })
+  ] });
+}
+function E({
+  className: d,
+  classes: t,
+  selected: r,
+  collectionType: u,
+  collectionId: i,
+  entityType: n,
+  onClick: l,
+  ListItemComponent: m = w,
+  ListItemProps: c = {},
+  ListItemTextComponent: p = q,
+  ListItemTextProps: s = {},
+  ListItemAvatarComponent: o = P,
+  ListItemAvatarProps: f = {},
+  ListItemMenuComponent: a = z,
+  ListItemMenuProps: h = {},
+  PaperProps: N = {},
+  IconComponent: g = O,
+  onRouteChange: y = () => {
+  }
+}) {
+  const x = r && r.entityType === "collection" && r.entityId === i, L = (M) => {
+    M.detail === 2 ? y(i) : l({
+      entityType: n,
+      entityId: i
+    });
+  };
+  return /* @__PURE__ */ v(
+    m,
+    {
+      className: b(t.root, d),
+      selected: x,
+      alignItems: "flex-start",
+      button: !0,
+      onClick: L,
+      disableRipple: !0,
+      ...c,
+      children: [
+        /* @__PURE__ */ e(o, { className: t.ListItemAvatar, ...f, children: /* @__PURE__ */ e(k, { className: t.Paper, elevation: 0, square: !0, ...N, children: /* @__PURE__ */ e(g, { mimeType: n, className: t.Icon }) }) }),
+        /* @__PURE__ */ e(
+          p,
+          {
+            className: t.ListItemText,
+            classes: t,
+            collectionType: u,
+            collectionId: i,
+            ...s
+          }
+        ),
+        /* @__PURE__ */ e(
+          I,
+          {
+            onClick: () => y(i),
+            className: t.Menu,
+            disableRipple: !0,
+            children: /* @__PURE__ */ e(j, {})
+          }
+        ),
+        a && /* @__PURE__ */ e(
+          a,
+          {
+            className: t.Menu,
+            entityId: i,
+            entityType: n,
+            ...h
+          }
+        )
+      ]
+    }
+  );
+}
+const Z = S(R, { name: "VdtCollectionContentCollection" })(
+  E
+);
+export {
+  Z as default
+};

package/dist/es/collection/CollectionContent/components/CollectionContentEntity.js

@@ -0,0 +1,68 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useEffect as w } from "react";
+import { withStyles as x } from "@material-ui/core";
+import { useGetEntity as G } from "@vidispine/vdt-react";
+import S from "./CollectionContentCollection.js";
+import b from "./CollectionContentItem.js";
+import j from "./CollectionContentSkeleton.js";
+function q({
+  classes: e,
+  className: n,
+  selectedCollectionId: A,
+  collectionContentType: c,
+  onClick: i,
+  onRemoveCollectionEntity: L,
+  selected: l,
+  ItemEntityComponent: a = b,
+  ItemContentProps: p = {},
+  CollectionEntityComponent: y = S,
+  CollectionEntityProps: C = {},
+  LoadingEntityComponent: d = j,
+  LoadingEntityProps: f = {},
+  onRouteChange: u,
+  ...m
+}) {
+  const { id: h, type: t, metadata: r } = c, { itemType: s, itemId: E, collectionType: I, collectionId: T, onGetEntity: g, isLoading: v } = G({
+    entityId: h,
+    entityType: t
+  });
+  return w(() => {
+    g({ queryParams: { content: ["metadata", "thumbnail"], "noauth-url": !0 } });
+  }, []), v ? /* @__PURE__ */ o(d, { AvatarProps: { height: 94, width: 168 }, ...f }) : {
+    item: /* @__PURE__ */ o(
+      a,
+      {
+        ...m,
+        classes: e,
+        className: n,
+        itemId: E,
+        itemType: s,
+        entityType: t,
+        simpleMetadataType: r,
+        onClick: i,
+        selected: l,
+        ...p
+      }
+    ),
+    collection: /* @__PURE__ */ o(
+      y,
+      {
+        ...m,
+        classes: e,
+        className: n,
+        collectionId: T,
+        collectionType: I,
+        entityType: t,
+        simpleMetadataType: r,
+        onClick: i,
+        selected: l,
+        onRouteChange: u,
+        ...C
+      }
+    )
+  }[t];
+}
+const B = x({}, { name: "VdtCollectionContentEntity" })(q);
+export {
+  B as default
+};