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

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

@@ -0,0 +1,21 @@
+import { jsx as m } from "react/jsx-runtime";
+import C from "../../collection/CollectionCard/index.js";
+import c from "../../item/ItemCard.js";
+const n = "item", s = "collection", a = {
+  [n]: c,
+  [s]: C
+};
+function p({
+  entityType: t,
+  entity: e,
+  entityComponents: i = a,
+  ...l
+}) {
+  if (!t)
+    return null;
+  const o = { ...l }, r = i[t.toLowerCase()];
+  return r ? (t.toLowerCase() === n.toLowerCase() ? (o.itemId = e.id, o.itemType = e) : t.toLowerCase() === s.toLowerCase() && (o.collectionId = e.id, o.collectionType = e), /* @__PURE__ */ m(r, { ...o })) : null;
+}
+export {
+  p as default
+};

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

@@ -0,0 +1,4 @@
+import r from "./EntityCard.js";
+export {
+  r as default
+};

package/dist/es/entity/EntityComment.js

@@ -0,0 +1,212 @@
+import { jsxs as p, jsx as e, Fragment as z } from "react/jsx-runtime";
+import { useEffect as H } from "react";
+import C from "clsx";
+import t from "prop-types";
+import { withStyles as V, TextField as J, InputAdornment as K, FormControlLabel as Q, Switch as U, Button as g } from "@material-ui/core";
+import { metadata as u, globalmetadata as X } from "@vidispine/vdt-api";
+import Y from "../hooks/useComments.js";
+import Z from "./EntityCommentCard.js";
+const _ = (n) => ({
+  root: {
+    paddingTop: n.spacing(2)
+  },
+  header: {
+    ...n.typography.h6,
+    paddingBottom: n.spacing(2)
+  },
+  label: {
+    fontFamily: "Monaco",
+    fontWeight: 100,
+    fontSize: "0.75rem",
+    fontStyle: "italic"
+  },
+  labelWithTimecode: {
+    fontWeight: 600,
+    fontStyle: "normal"
+  },
+  buttons: {
+    minHeight: n.spacing(4.25),
+    display: "flex",
+    flexDirection: "row-reverse",
+    width: "100%",
+    marginTop: n.spacing(1),
+    "& button": {
+      marginLeft: n.spacing(1)
+    }
+  },
+  comments: {
+    "& > div": {
+      marginTop: n.spacing(2)
+    }
+  }
+});
+function i({
+  className: n,
+  classes: o,
+  entity: f,
+  entityId: y,
+  EntityCommentCardComponent: T,
+  EntityCommentCardProps: h,
+  metadataType: r,
+  commentField: b,
+  playerRef: v,
+  timeBase: x,
+  getEntityMetadata: E,
+  updateEntityMetadata: M,
+  removeGlobalMetadata: N,
+  noTimecodeText: F,
+  addCommentText: w,
+  cancelText: P,
+  commentText: l,
+  commentPluralText: B,
+  loadingText: S
+}) {
+  const {
+    newComment: d,
+    commentTimecode: c,
+    smpteTimecode: j,
+    commentList: a,
+    onChangeTimecode: k,
+    onChangeComment: L,
+    onFocusComment: O,
+    onCancelComment: R,
+    onSubmitComment: W,
+    onClickCommentTimecode: A,
+    onDeleteComment: D,
+    onRefreshComments: G
+  } = Y({
+    entity: f,
+    entityId: y,
+    metadataType: r,
+    commentField: b,
+    playerRef: v,
+    timeBase: x,
+    getEntityMetadata: E,
+    updateEntityMetadata: M,
+    removeGlobalMetadata: N
+  });
+  return H(() => {
+    r === void 0 && G();
+  }, []), /* @__PURE__ */ p("div", { className: C(o.root, n), children: [
+    /* @__PURE__ */ e("div", { className: o.header, children: a ? /* @__PURE__ */ e("span", { children: `${a.length} ${a.length === 1 ? l.toLowerCase() : B.toLowerCase()}` }) : /* @__PURE__ */ e("span", { children: S }) }),
+    /* @__PURE__ */ e(
+      J,
+      {
+        className: o.TextField,
+        value: d,
+        onChange: L,
+        fullWidth: !0,
+        variant: "standard",
+        placeholder: w,
+        multiline: !0,
+        InputProps: {
+          onFocus: O,
+          startAdornment: /* @__PURE__ */ e(K, { position: "start", children: /* @__PURE__ */ e(
+            Q,
+            {
+              control: /* @__PURE__ */ e(
+                U,
+                {
+                  size: "small",
+                  color: "primary",
+                  checked: c !== void 0,
+                  onChange: k
+                }
+              ),
+              label: j || F,
+              classes: {
+                label: C(o.label, {
+                  [o.labelWithTimecode]: c !== void 0
+                })
+              }
+            }
+          ) })
+        }
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: o.buttons, children: d && /* @__PURE__ */ p(z, { children: [
+      /* @__PURE__ */ e(
+        g,
+        {
+          className: o.commentButton,
+          color: "primary",
+          variant: "contained",
+          disableElevation: !0,
+          onClick: W,
+          children: l
+        }
+      ),
+      /* @__PURE__ */ e(
+        g,
+        {
+          className: o.cancelButton,
+          variant: "text",
+          disableElevation: !0,
+          onClick: R,
+          children: P
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: o.comments, children: a ? a.map(({ uuid: m, value: I, start: s, user: $, timestamp: q }) => /* @__PURE__ */ e(
+      T,
+      {
+        uuid: m,
+        value: I,
+        start: s,
+        user: $,
+        timestamp: q,
+        onDelete: () => D(m),
+        onClick: () => A(s),
+        ...h
+      },
+      m
+    )) : null })
+  ] });
+}
+const lt = V(_, { name: "VdtEntityComment" })(i);
+i.propTypes = {
+  classes: t.objectOf(t.string),
+  className: t.string,
+  entityId: t.string.isRequired,
+  entity: t.oneOf(["item", "collection"]).isRequired,
+  EntityCommentCardComponent: t.elementType,
+  EntityCommentCardProps: t.objectOf(t.any),
+  metadataType: t.objectOf(t.any),
+  commentField: t.string,
+  playerRef: t.shape({ current: t.instanceOf(Element) }),
+  timeBase: t.shape({
+    numerator: t.number,
+    denominator: t.number
+  }),
+  getEntityMetadata: t.func,
+  updateEntityMetadata: t.func,
+  removeGlobalMetadata: t.func,
+  noTimecodeText: t.string,
+  addCommentText: t.string,
+  cancelText: t.string,
+  commentText: t.string,
+  commentPluralText: t.string,
+  loadingText: t.string
+};
+i.defaultProps = {
+  classes: {},
+  className: void 0,
+  EntityCommentCardComponent: Z,
+  EntityCommentCardProps: {},
+  metadataType: void 0,
+  commentField: "co",
+  playerRef: void 0,
+  timeBase: { numerator: 1, denominator: 25 },
+  getEntityMetadata: u.getEntityMetadata,
+  updateEntityMetadata: u.updateEntityMetadata,
+  removeGlobalMetadata: X.removeGlobalMetadata,
+  noTimecodeText: "No Timecode",
+  addCommentText: "Add a comment",
+  cancelText: "Cancel",
+  commentText: "Comment",
+  commentPluralText: "Comments",
+  loadingText: ""
+};
+export {
+  lt as default
+};

package/dist/es/entity/EntityCommentCard.js

@@ -0,0 +1,144 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as I } from "react";
+import x from "clsx";
+import b from "moment";
+import e from "prop-types";
+import { withStyles as M, Avatar as k, ButtonBase as A, IconButton as P, Menu as R, MenuItem as B, ListItemIcon as D, ListItemText as E } from "@material-ui/core";
+import { MoreVert as S, Delete as q, Person as w } from "@material-ui/icons";
+import { formatTimeCodeText as U } from "@vidispine/vdt-js";
+const j = (o) => ({
+  root: {
+    display: "flex",
+    "&:hover": {
+      "& $commentAction": {
+        visibility: "visible"
+      }
+    }
+  },
+  commentBody: {
+    paddingRight: o.spacing(1),
+    paddingLeft: o.spacing(1),
+    flexGrow: 1
+  },
+  commentHeader: {
+    display: "flex",
+    "& div": {
+      marginRight: o.spacing(1)
+    }
+  },
+  comments: {
+    "& $root": {
+      marginTop: o.spacing(2)
+    }
+  },
+  commentUser: {
+    fontWeight: "bold"
+  },
+  commentContent: {
+    whiteSpace: "pre-line"
+  },
+  commentTimecode: {
+    color: o.palette.info.dark,
+    marginRight: o.spacing(1),
+    verticalAlign: "unset"
+  },
+  commentAction: {
+    visibility: "hidden"
+  },
+  menuPaper: {
+    backgroundColor: o.palette.background.default
+  }
+});
+function m({
+  className: o,
+  classes: n,
+  user: r,
+  timestamp: d,
+  start: c,
+  value: s,
+  onDelete: p,
+  onClick: u,
+  deleteText: g,
+  MenuIconComponent: f,
+  DeleteIconComponent: v,
+  UserIconComponent: h
+}) {
+  const [l, a] = I(null), C = !!l, y = (T) => {
+    a(T.currentTarget);
+  }, N = () => {
+    a(null);
+  };
+  return /* @__PURE__ */ i("div", { className: x(n.root, o), children: [
+    /* @__PURE__ */ t("div", { className: n.commentAvatar, children: /* @__PURE__ */ t(k, { children: r ? r[0] : h }) }),
+    /* @__PURE__ */ i("div", { className: n.commentBody, children: [
+      /* @__PURE__ */ i("div", { className: n.commentHeader, children: [
+        /* @__PURE__ */ t("div", { className: n.commentUser, children: r }),
+        /* @__PURE__ */ t("div", { className: n.commentTimestamp, children: b(d).fromNow() })
+      ] }),
+      /* @__PURE__ */ i("div", { className: n.commentContent, children: [
+        c !== "-INF" && /* @__PURE__ */ t(A, { className: n.commentTimecode, onClick: u, children: U(c).toSmpte() }),
+        s
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { className: n.commentAction, children: [
+      /* @__PURE__ */ t(P, { onClick: y, children: /* @__PURE__ */ t(f, {}) }),
+      /* @__PURE__ */ t(
+        R,
+        {
+          className: n.Menu,
+          elevation: 0,
+          getContentAnchorEl: null,
+          anchorEl: l,
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "center"
+          },
+          transformOrigin: {
+            vertical: "bottom",
+            horizontal: "center"
+          },
+          variant: "menu",
+          keepMounted: !0,
+          open: C,
+          PaperProps: {
+            className: n.menuPaper,
+            elevation: 1
+          },
+          onClose: N,
+          children: /* @__PURE__ */ i(B, { onClick: p, children: [
+            /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(v, { fontSize: "small" }) }),
+            /* @__PURE__ */ t(E, { primary: g })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+const W = M(j, { name: "VdtEntityCommentCard" })(m);
+m.propTypes = {
+  classes: e.objectOf(e.string),
+  className: e.string,
+  user: e.string.isRequired,
+  timestamp: e.string.isRequired,
+  start: e.string.isRequired,
+  value: e.string.isRequired,
+  onDelete: e.func,
+  onClick: e.func,
+  deleteText: e.string,
+  MenuIconComponent: e.elementType,
+  DeleteIconComponent: e.elementType,
+  UserIconComponent: e.elementType
+};
+m.defaultProps = {
+  classes: {},
+  className: void 0,
+  onDelete: void 0,
+  onClick: void 0,
+  deleteText: "Delete",
+  MenuIconComponent: S,
+  DeleteIconComponent: q,
+  UserIconComponent: w
+};
+export {
+  W as default
+};

package/dist/es/entity/EntityDeleteDialog/EntityDeleteDialog.js

@@ -0,0 +1,149 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useState as O } from "react";
+import N from "clsx";
+import y from "moment";
+import e from "prop-types";
+import { Dialog as q, DialogTitle as F, Typography as g, Divider as L, DialogContent as A, FormControlLabel as G, Checkbox as R, DialogActions as H, Button as b } from "@material-ui/core";
+import { item as U, collection as $ } from "@vidispine/vdt-api";
+import { GetItem as z, GetCollection as J } from "@vidispine/vdt-react";
+import K from "../../collection/CollectionCard/index.js";
+import M from "../../item/ItemCard.js";
+const ie = () => ({
+  root: {},
+  entityCard: {
+    display: "flex",
+    justifyContent: "center"
+  }
+}), Q = (n, l) => {
+  const [i, r] = O(!1);
+  return {
+    validation: i,
+    handleValidation: (a) => r(a),
+    onDelete: () => n.toLowerCase() === "item" ? U.removeItem({ itemId: l }) : n.toLowerCase() === "collection" ? $.removeCollection({ collectionId: l }) : new Promise((a, c) => {
+      c(new Error(`Unknown entity type, is ${n}`));
+    })
+  };
+};
+function D({
+  open: n,
+  onClose: l,
+  entity: i,
+  entityId: r,
+  onSuccess: u,
+  onFailure: p,
+  className: a,
+  title: c,
+  subtitle: C,
+  validationText: v,
+  closeButtonText: T,
+  confirmButtonText: P,
+  queryParams: f,
+  DialogProps: x,
+  CollectionCardComponent: I,
+  CollectionCardProps: w,
+  ItemCardComponent: j,
+  ItemCardProps: S,
+  showEntityPreview: k,
+  classes: h
+}) {
+  const { onDelete: E, validation: m, handleValidation: V } = Q(i, r), B = () => E().then((o) => {
+    l(), u(o);
+  }).catch(p);
+  return n ? /* @__PURE__ */ s(
+    q,
+    {
+      open: n,
+      onClose: l,
+      className: N(h.root, "VdtEntityDeleteDialog-root", a),
+      ...x,
+      children: [
+        /* @__PURE__ */ s(F, { disableTypography: !0, children: [
+          /* @__PURE__ */ t(g, { variant: "h6", children: c }),
+          C && /* @__PURE__ */ t(g, { variant: "subtitle2", children: C })
+        ] }),
+        /* @__PURE__ */ t(L, {}),
+        /* @__PURE__ */ s(A, { children: [
+          k && /* @__PURE__ */ t("div", { className: h.entityCard, children: i === "item" ? /* @__PURE__ */ t(z, { itemId: r, queryParams: f, children: /* @__PURE__ */ t(
+            j,
+            {
+              titleSelector: ({ title: o, itemId: d }) => o || d,
+              subheaderSelector: ({ created: o }) => o ? y(o).format("ll") : "",
+              ContentComponent: null,
+              ActionsComponent: null,
+              ...S
+            }
+          ) }) : /* @__PURE__ */ t(J, { collectionId: r, queryParams: f, children: /* @__PURE__ */ t(
+            I,
+            {
+              titleSelector: ({ title: o, collectionId: d }) => o || d,
+              subheaderSelector: ({ created: o }) => o ? y(o).format("ll") : "",
+              avatar: i,
+              ...w
+            }
+          ) }) }),
+          /* @__PURE__ */ t(
+            G,
+            {
+              control: /* @__PURE__ */ t(R, { checked: m, onChange: () => V(!m) }),
+              label: v
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s(H, { children: [
+          /* @__PURE__ */ t(b, { onClick: l, children: T }),
+          /* @__PURE__ */ t(b, { variant: "contained", color: "primary", onClick: B, disabled: !m, children: P })
+        ] })
+      ]
+    }
+  ) : null;
+}
+D.propTypes = {
+  open: e.bool,
+  onClose: e.func,
+  entityId: e.string.isRequired,
+  entity: e.string.isRequired,
+  onSuccess: e.func,
+  onFailure: e.func,
+  className: e.string,
+  title: e.string,
+  subtitle: e.string,
+  validationText: e.string,
+  closeButtonText: e.string,
+  confirmButtonText: e.string,
+  queryParams: e.objectOf(e.any),
+  DialogProps: e.objectOf(e.any),
+  CollectionCardComponent: e.elementType,
+  CollectionCardProps: e.objectOf(e.any),
+  ItemCardComponent: e.elementType,
+  ItemCardProps: e.objectOf(e.any),
+  showEntityPreview: e.bool,
+  classes: e.objectOf(e.any)
+};
+D.defaultProps = {
+  open: !1,
+  onClose: () => null,
+  onSuccess: () => null,
+  onFailure: () => null,
+  className: "VdtEntityDeleteDialog",
+  title: "Delete entity",
+  subtitle: "",
+  validationText: "I understand that deleting is permanent and can't be undone",
+  closeButtonText: "Close",
+  confirmButtonText: "Permanently delete entity",
+  queryParams: {
+    field: ["created", "title", "mimeType", "durationSeconds", "itemId", "collectionId"],
+    content: ["metadata", "thumbnail"],
+    "noauth-url": !0
+  },
+  DialogProps: {},
+  CollectionCardComponent: K,
+  CollectionCardProps: {},
+  ItemCardComponent: M,
+  ItemCardProps: {},
+  showEntityPreview: !0,
+  classes: {}
+};
+export {
+  D as default,
+  ie as styles
+};

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

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

package/dist/es/entity/EntityGrid.js

@@ -0,0 +1,42 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as l } from "react";
+import { Grid as E } from "@material-ui/core";
+import I from "../collection/CollectionCard/index.js";
+import s from "../item/ItemCard.js";
+import y from "./EntityGridItemDraggable.js";
+const C = "COLLECTION", u = "ITEM";
+function h({
+  entries: r = [],
+  EntityGridItemComponent: m = y,
+  CollectionCardComponent: e = I,
+  ItemCardComponent: n = s,
+  CollectionCardProps: p = {},
+  ItemCardProps: c = {},
+  GridContainerProps: d = {},
+  GridItemProps: a = {}
+}) {
+  const o = l(
+    () => r.map(
+      (t) => t.collection && { ...t.collection, type: C } || t.item && { ...t.item, type: u } || void 0
+    ),
+    [r]
+  );
+  return /* @__PURE__ */ i(E, { container: !0, ...d, children: o && o.length && o.map((t, f) => /* @__PURE__ */ i(
+    m,
+    {
+      index: f,
+      entity: t,
+      entityType: t.type,
+      entityId: t.id,
+      CollectionCardComponent: e,
+      ItemCardComponent: n,
+      CollectionCardProps: p,
+      ItemCardProps: c,
+      ...a
+    },
+    `${t.type}_${t.id}`
+  )) });
+}
+export {
+  h as default
+};

package/dist/es/entity/EntityGridItem.js

@@ -0,0 +1,83 @@
+import { jsxs as I, jsx as i } from "react/jsx-runtime";
+import { Grid as d } from "@material-ui/core";
+import u from "../collection/CollectionCard/index.js";
+import "../collection/CollectionCardThumbnail/index.js";
+import "../collection/CollectionGrid/index.js";
+import "../collection/CollectionRow/index.js";
+import "../collection/CollectionTable/index.js";
+import "../collection/CollectionTreeList/index.js";
+import "../collection/CollectionList/index.js";
+import "../collection/CollectionListItem/index.js";
+import "../collection/CollectionMetadataTab.js";
+import "react";
+import "react-final-form";
+import "@vidispine/vdt-api";
+import "@vidispine/vdt-js";
+import "../item/ItemMetadataForm.js";
+import "../collection/CollectionAccessTab.js";
+import "../collection/CollectionCreateDialog/index.js";
+import "../collection/AddToCollectionDialog/index.js";
+import "../collection/RemoveFromCollectionDialog/index.js";
+import "../collection/CollectionSearchPicker/index.js";
+import "../collection/CollectionContent/index.js";
+import "../item/ItemTimespan/index.js";
+import "../item/ItemAccessTab.js";
+import "../item/ItemMetadataTab.js";
+import "../item/ItemFieldGroupTab.js";
+import "@vidispine/vdt-react";
+import "../item/ItemShapeTable/index.js";
+import "../item/ItemSourceTable/index.js";
+import "@material-ui/icons";
+import "../item/ItemPosterList.js";
+import "../item/ItemParentsTab.js";
+import "../item/ItemRelationsTab.js";
+import "../item/ItemTabs/index.js";
+import "../item/ItemMetadataFieldRow.js";
+import "../item/ItemMetadataFormTable.js";
+import C from "../item/ItemCard.js";
+import "../item/ItemGrid.js";
+import "react-beautiful-dnd";
+import "../media/MediaCard/index.js";
+import "../item/ItemTreeItem.js";
+import "../item/ItemSidecarDialog/index.js";
+import "../item/ItemSidecarUpload/index.js";
+import "../item/ItemSidecarDownload/index.js";
+import "../item/AddRelationDialog.js";
+import "../item/ItemSearchPicker.js";
+import "../item/ItemList/index.js";
+import "../item/ItemListItem/index.js";
+import "../item/ItemRelationRemoveDialog.js";
+import "../item/ItemFileShareDialog.js";
+import "../item/ItemCompoundMetadataTab.js";
+import "../item/ItemCompoundMetadataTable.js";
+import "../item/player/ItemPlayer/index.js";
+import "../item/player/ItemVideoPlayer.js";
+import "../item/player/ItemImagePlayer.js";
+function Eo({
+  entityType: o,
+  entityId: t,
+  entity: r,
+  index: m,
+  CollectionCardComponent: p = u,
+  ItemCardComponent: e = C,
+  CollectionCardProps: c = {},
+  ItemCardProps: s = {},
+  ...l
+}) {
+  const n = o === "COLLECTION", f = o === "ITEM";
+  return /* @__PURE__ */ I(d, { item: !0, xs: "auto", ...l, children: [
+    n && /* @__PURE__ */ i(
+      p,
+      {
+        index: m,
+        collectionId: t,
+        collectionType: r,
+        ...c
+      }
+    ),
+    f && /* @__PURE__ */ i(e, { index: m, itemId: t, itemType: r, ...s })
+  ] });
+}
+export {
+  Eo as default
+};

package/dist/es/entity/EntityGridItemDraggable.js

@@ -0,0 +1,37 @@
+import { jsx as m } from "react/jsx-runtime";
+import e from "clsx";
+import { withStyles as a } from "@material-ui/core";
+import { compose as g } from "@vidispine/vdt-react";
+import n from "../dnd/hoc/withDrag.js";
+import "../dnd/hoc/withDrop.js";
+import "../dnd/contexts/DragAndDropContext.js";
+import p from "./EntityGridItem.js";
+const s = {
+  root: {},
+  rootIsDragging: {
+    opacity: 0.5,
+    cursor: "move"
+  }
+};
+function d({ className: o, classes: t, isDragging: r, ...i }) {
+  return /* @__PURE__ */ m(
+    p,
+    {
+      className: e(
+        t.root,
+        "VdtEntityGridItemDraggable-root",
+        r && t.rootIsDragging,
+        r && "VdtEntityGridItemDraggable-rootIsDragging",
+        o
+      ),
+      ...i
+    }
+  );
+}
+const b = g(
+  n,
+  a(s, { name: "VdtEntityGridItemDraggable" })
+)(d);
+export {
+  b as default
+};