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

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

@@ -0,0 +1,290 @@
+import { jsxs as M, jsx as e } from "react/jsx-runtime";
+import { useMemo as E, useState as O } from "react";
+import q from "clsx";
+import w from "lodash.get";
+import k from "moment";
+import { withStyles as G, ListItem as H, ListItemText as J, Paper as Q, ListItemAvatar as X, IconButton as Y, Menu as Z, MenuItem as F } from "@material-ui/core";
+import { Wallpaper as D, MoreVert as K } from "@material-ui/icons";
+import { parseSimpleMetadataType as W, parseTimespan as R, formatTimeCodeText as _, formatTimeCodeSeconds as U, findNearestThumbnail as tt } from "@vidispine/vdt-js";
+import et from "../../../general/MimeTypeIcon/index.js";
+import nt from "../../../media/MediaCardThumbnail/index.js";
+import it from "../../../media/MediaCardThumbnailLabel/index.js";
+const ot = () => ({
+  ListItemAvatar: {
+    paddingRight: 6,
+    marginTop: 0,
+    marginBottom: 0
+  },
+  Thumbnail: {},
+  Paper: { height: 94, width: 168, position: "relative" },
+  Icon: {
+    fontSize: 40,
+    position: "absolute",
+    left: "50%",
+    marginLeft: -20,
+    top: "50%",
+    marginTop: -20
+  },
+  ThumbnailLabel: { position: "absolute", bottom: 0, right: 4 },
+  ListItemTextComponent: {},
+  Menu: { visibility: "hidden" },
+  primary: {
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap"
+  },
+  secondary: { fontStyle: "italic" },
+  root: {
+    "&:hover $Menu": {
+      visibility: "visible"
+    }
+  },
+  menuContainer: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "flex-end"
+  },
+  representativeWrapper: {
+    height: 46,
+    width: 46,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+}), at = ({
+  className: y,
+  classes: t,
+  ListItemTextComponent: d = J,
+  itemId: s,
+  itemType: m,
+  simpleMetadataType: n,
+  primaryTextKeys: C = [
+    "adu_label_AWSVideoRekognitionAnalyzer.adu_value",
+    "adu_transcript_AWSTranscribeAnalyzer.adu_value",
+    "adu_celebrity_AWSVideoRekognitionAnalyzer.adu_value",
+    "stl_subtitle.stl_text",
+    "co"
+  ],
+  showWithStartTimecode: p = !0,
+  showUser: i,
+  showDate: a,
+  ...N
+}) => {
+  const { start: u, end: l } = W(n), h = u !== void 0, { metadata: { timespan: v = [] } = {} } = m, c = v.find(
+    ({ start: x, end: V }) => x === u && V === l
+  ), o = v.find(
+    ({ start: x, end: V }) => x === "-INF" && V === "+INF"
+  ), {
+    title: T,
+    originalFilename: I,
+    durationSeconds: S,
+    user: f,
+    created: r,
+    startTimeCode: b
+  } = R(o, {
+    flat: !0,
+    arrayOnSingleValue: !1
+  }), g = R(c, {
+    flat: !0,
+    arrayOnSingleValue: !1
+  }), L = _(u), j = _(l), $ = b ? _(b) : void 0, z = (p && $ ? $.add(L) : L).toSmpte(), B = (p && $ ? $.add(j) : j).toSmpte();
+  let P, A;
+  return h ? (P = /* @__PURE__ */ e("div", { children: C.map(
+    (x) => w(g, x) !== void 0 ? /* @__PURE__ */ e("div", { className: t.primary, children: w(g, x) }, x) : null
+  ) }), A = /* @__PURE__ */ M("div", { children: [
+    /* @__PURE__ */ e("div", { className: t.primary, children: T || I }),
+    /* @__PURE__ */ e("div", { className: t.secondary, children: `${z} - ${B}` }),
+    i && !a && /* @__PURE__ */ e("div", { className: t.secondary, children: f }),
+    a && !i && /* @__PURE__ */ e("div", { className: t.secondary, children: k(r).fromNow() }),
+    a && i && /* @__PURE__ */ e("div", { className: t.secondary, children: `${f} • ${k(r).fromNow()}` })
+  ] })) : S && (P = /* @__PURE__ */ e("div", { className: t.primary, children: T || I }), i && (A = /* @__PURE__ */ e("div", { className: t.secondary, children: f })), a && (A = /* @__PURE__ */ e("div", { className: t.secondary, children: k(r).fromNow() })), i && a && (A = /* @__PURE__ */ e("div", { className: t.secondary, children: `${f} • ${k(r).fromNow()}` }))), /* @__PURE__ */ e(
+    d,
+    {
+      className: y,
+      primary: P,
+      secondary: A,
+      secondaryTypographyProps: { component: "div" },
+      ...N
+    }
+  );
+}, rt = ({
+  className: y,
+  classes: t,
+  itemId: d,
+  itemType: s,
+  simpleMetadataType: m,
+  PaperProps: n = {},
+  ThumbnailComponent: C = nt,
+  ThumbnailProps: p = {},
+  ThumbnailLabelComponent: i = it,
+  IconComponent: a = et,
+  ListItemAvatarComponent: N = X,
+  ...u
+}) => {
+  const { start: l, end: h } = W(m), v = l !== void 0, { metadata: { timespan: c = [] } = {} } = s, o = c.find(
+    ({ start: g, end: L }) => g === "-INF" && L === "+INF"
+  ), { durationSeconds: T, mimeType: I } = R(o, {
+    flat: !0,
+    arrayOnSingleValue: !1
+  }), S = _(l), f = _(h);
+  let r;
+  v ? r = f.subtract(S).toSmpte() : T && (r = U(T).toDuration());
+  const b = tt(s, l);
+  return /* @__PURE__ */ e(N, { className: y, ...u, children: b ? /* @__PURE__ */ e(
+    C,
+    {
+      className: t.Thumbnail,
+      innerProps: { itemType: { thumbnails: { uri: [b] } } },
+      height: 94,
+      width: 168,
+      labelRightBottom: r,
+      ...p
+    }
+  ) : /* @__PURE__ */ M(Q, { className: t.Paper, elevation: 0, square: !0, ...n, children: [
+    /* @__PURE__ */ e(a, { mimeType: I, className: t.Icon }),
+    r && /* @__PURE__ */ e(i, { className: t.ThumbnailLabel, label: r })
+  ] }) });
+};
+function lt({
+  className: y,
+  entityId: t,
+  entityType: d,
+  selectedCollectionId: s,
+  isRepresentativeItem: m,
+  onRemoveCollectionEntity: n,
+  onRemoveCollectionEntityText: C = "Remove From Collection",
+  onAddAsRepresentativeItem: p,
+  onAddAsRepresentativeItemText: i = "Add As Representative Item",
+  onRemoveAsRepresentativeItem: a,
+  onRemoveAsRepresentativeItemText: N = "Remove As Representative Item",
+  IconComponent: u = K
+}) {
+  const [l, h] = O(null), v = (o) => {
+    h(o.currentTarget);
+  }, c = () => {
+    h(null);
+  };
+  return /* @__PURE__ */ M("div", { className: y, children: [
+    /* @__PURE__ */ e(Y, { onClick: v, children: /* @__PURE__ */ e(u, {}) }),
+    /* @__PURE__ */ M(Z, { open: !!l, onClose: c, anchorEl: l, children: [
+      /* @__PURE__ */ e(
+        F,
+        {
+          onClick: (o) => {
+            o.stopPropagation(), n(s, t, d), c();
+          },
+          disabled: n === void 0,
+          children: C
+        }
+      ),
+      m === !1 && /* @__PURE__ */ e(
+        F,
+        {
+          onClick: (o) => {
+            o.stopPropagation(), p(t), c();
+          },
+          disabled: p === void 0,
+          children: i
+        }
+      ),
+      m === !0 && /* @__PURE__ */ e(
+        F,
+        {
+          onClick: (o) => {
+            o.stopPropagation(), a(t), c();
+          },
+          disabled: a === void 0,
+          children: N
+        }
+      )
+    ] })
+  ] });
+}
+function dt({
+  className: y,
+  classes: t,
+  selected: d,
+  simpleMetadataType: s,
+  itemType: m,
+  itemId: n,
+  entityType: C,
+  selectedCollectionId: p,
+  representativeItems: i,
+  onClick: a,
+  onRemoveCollectionEntity: N,
+  ListItemComponent: u = H,
+  ListItemProps: l = {},
+  ListItemTextComponent: h = at,
+  ListItemTextProps: v = {},
+  ListItemAvatarComponent: c = rt,
+  ListItemAvatarProps: o = {},
+  ListItemMenuComponent: T = lt,
+  ListItemMenuProps: I = {}
+}) {
+  const { start: S, end: f } = W(s), r = d && d.entityType === "item" && d.entityId === n && d.startTimecodeText === S && d.endTimecodeText === f, b = () => a({
+    entityType: C,
+    entityId: n,
+    startTimecodeText: S,
+    endTimecodeText: f,
+    entity: m
+  }), g = E(
+    () => i ? i.some(({ value: L }) => L === n) : void 0,
+    [n, i]
+  );
+  return /* @__PURE__ */ M(
+    u,
+    {
+      className: q(t.root, y),
+      selected: r,
+      alignItems: "flex-start",
+      button: !0,
+      onClick: b,
+      disableRipple: !0,
+      ...l,
+      children: [
+        /* @__PURE__ */ e(
+          c,
+          {
+            className: t.ListItemAvatar,
+            classes: t,
+            itemId: n,
+            itemType: m,
+            simpleMetadataType: s,
+            ...o
+          }
+        ),
+        /* @__PURE__ */ e(
+          h,
+          {
+            className: t.ListItemTextComponent,
+            classes: t,
+            itemId: n,
+            itemType: m,
+            simpleMetadataType: s,
+            ...v
+          }
+        ),
+        T && /* @__PURE__ */ M("div", { className: t.menuContainer, children: [
+          /* @__PURE__ */ e(
+            T,
+            {
+              className: t.Menu,
+              entityId: n,
+              entityType: "item",
+              selectedCollectionId: p,
+              isRepresentativeItem: g,
+              onRemoveCollectionEntity: N,
+              ...I
+            }
+          ),
+          g && /* @__PURE__ */ e("span", { className: t.representativeWrapper, children: /* @__PURE__ */ e(D, {}) })
+        ] })
+      ]
+    }
+  );
+}
+const Nt = G(ot, { name: "VdtCollectionContentItem" })(dt);
+export {
+  Nt as default
+};

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

@@ -0,0 +1,104 @@
+import { jsxs as I, jsx as e } from "react/jsx-runtime";
+import n from "clsx";
+import t from "prop-types";
+import { withStyles as L, ListItem as C, ListItemAvatar as y, ListItemText as v, ListItemSecondaryAction as S } from "@material-ui/core";
+import { Skeleton as i } from "@material-ui/lab";
+const f = () => ({
+  root: {},
+  ListItemAvatar: {},
+  Avatar: {},
+  ListItemText: {},
+  Action: {},
+  ListItemSecondaryAction: {
+    visibility: "hidden"
+  },
+  ListItemContainer: {
+    "&:hover $ListItemSecondaryAction": {
+      visibility: "visible"
+    }
+  }
+});
+function r({
+  classes: o,
+  className: a,
+  AvatarComponent: m,
+  AvatarProps: c,
+  ActionComponent: s,
+  ActionProps: l,
+  ListItemProps: p,
+  ListItemAvatarProps: d,
+  ListItemTextProps: A
+}) {
+  return /* @__PURE__ */ I(
+    C,
+    {
+      className: n(a, o.root, "VdtCollectionContentSkeleton-root"),
+      classes: { container: o.ListItemContainer },
+      ...p,
+      children: [
+        /* @__PURE__ */ e(
+          y,
+          {
+            className: n(o.ListItemAvatar, "VdtCollectionContentSkeleton-ListItemAvatar"),
+            ...d,
+            children: /* @__PURE__ */ e(m, { variant: "rect", height: "100%", width: "100%", ...c })
+          }
+        ),
+        /* @__PURE__ */ e(
+          v,
+          {
+            primary: /* @__PURE__ */ e(i, { width: 120 }),
+            secondary: /* @__PURE__ */ e(i, { width: 60 }),
+            className: n(o.ListItemText, "VdtCollectionContentSkeleton-ListItemText"),
+            ...A
+          }
+        ),
+        s && /* @__PURE__ */ e(
+          S,
+          {
+            className: n(
+              o.ListItemSecondaryAction,
+              "VdtCollectionContentSkeleton-ListItemSecondaryAction"
+            ),
+            children: /* @__PURE__ */ e(
+              s,
+              {
+                skeleton: !0,
+                className: n(o.Action, "VdtCollectionContentSkeleton-Action"),
+                ...l
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+r.propTypes = {
+  className: t.string,
+  classes: t.objectOf(t.string),
+  ActionComponent: t.elementType,
+  ActionProps: t.objectOf(t.any),
+  AvatarComponent: t.elementType,
+  AvatarProps: t.objectOf(t.any),
+  ListItemProps: t.objectOf(t.any),
+  ListItemAvatarProps: t.objectOf(t.any),
+  ListItemTextProps: t.objectOf(t.any)
+};
+r.defaultProps = {
+  className: void 0,
+  classes: {},
+  ActionComponent: void 0,
+  ActionProps: {},
+  AvatarComponent: i,
+  AvatarProps: {},
+  ListItemProps: {},
+  ListItemAvatarProps: {},
+  ListItemTextProps: {}
+};
+const b = L(f, { name: "VdtCollectionContentSkeleton" })(
+  r
+);
+export {
+  b as default
+};

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

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

package/dist/es/collection/CollectionCreateDialog/CollectionCreateDialog.js

@@ -0,0 +1,99 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useState as N } from "react";
+import D from "clsx";
+import e from "prop-types";
+import { Dialog as y, DialogTitle as b, DialogContent as v, TextField as j, DialogActions as P, Button as r } from "@material-ui/core";
+import { collection as k } from "@vidispine/vdt-api";
+const B = () => ({
+  root: {}
+});
+function a({
+  classes: s,
+  className: m,
+  collectionDocument: d,
+  createText: u,
+  closeText: p,
+  collectionNameText: C,
+  title: f,
+  open: g,
+  onClose: l,
+  onSuccess: n
+}) {
+  const [c, x] = N(""), T = () => {
+    const t = { name: c };
+    k.createCollection({ collectionDocument: d, queryParams: t }).then(
+      ({ data: h }) => {
+        n && n(h);
+      }
+    );
+  };
+  return /* @__PURE__ */ i(
+    y,
+    {
+      open: g,
+      onClose: l,
+      className: D(s.root, "VdtCollectionCreateDialog-root", m),
+      children: [
+        /* @__PURE__ */ o(b, { children: f }),
+        /* @__PURE__ */ o(v, { children: /* @__PURE__ */ o(
+          j,
+          {
+            autoFocus: !0,
+            margin: "dense",
+            label: C,
+            type: "text",
+            fullWidth: !0,
+            onChange: (t) => x(t.target.value)
+          }
+        ) }),
+        /* @__PURE__ */ i(P, { children: [
+          /* @__PURE__ */ o(r, { onClick: l, children: p }),
+          /* @__PURE__ */ o(
+            r,
+            {
+              onClick: T,
+              color: "primary",
+              variant: "contained",
+              disabled: !c,
+              children: u
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+a.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  collectionDocument: e.objectOf(e.any),
+  createText: e.string,
+  closeText: e.string,
+  collectionNameText: e.string,
+  title: e.string,
+  open: e.bool,
+  onClose: e.func,
+  onSuccess: e.func
+};
+a.defaultProps = {
+  className: void 0,
+  classes: {},
+  collectionDocument: {},
+  createText: "Create",
+  closeText: "Cancel",
+  collectionNameText: "Collection Name",
+  title: "New Collection",
+  open: !1,
+  onClose: void 0,
+  onSuccess: void 0
+};
+export {
+  a as default,
+  B as styles
+};

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

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

package/dist/es/collection/CollectionGrid/CollectionGrid.js

@@ -0,0 +1,83 @@
+import { jsx as n } from "react/jsx-runtime";
+import k from "clsx";
+import o from "prop-types";
+import { Grid as l } from "@material-ui/core";
+import { deprecated as j } from "../../utils.js";
+import b from "../CollectionCard/index.js";
+const h = {
+  root: {}
+};
+function c({
+  className: s,
+  classes: a,
+  collectionListType: C,
+  CollectionCardComponent: m,
+  CollectionCardProps: p,
+  GridContainerProps: d,
+  GridItemProps: r,
+  onCollectionClick: f,
+  onItemClick: u
+}) {
+  const { collection: i = [] } = C, { style: y = {} } = r, e = f || u;
+  return /* @__PURE__ */ n(
+    l,
+    {
+      container: !0,
+      className: k(a.root, "VdtCollectionCreateDialog-root", s),
+      ...d,
+      children: i && i.map((t, P) => /* @__PURE__ */ n(
+        l,
+        {
+          item: !0,
+          xs: "auto",
+          onClick: () => e && e(t),
+          ...r,
+          style: { cursor: e ? "pointer" : "initial", ...y },
+          children: /* @__PURE__ */ n(
+            m,
+            {
+              index: P,
+              collectionId: t.id,
+              collectionType: t,
+              ...p
+            }
+          )
+        },
+        t.id
+      ))
+    }
+  );
+}
+c.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.objectOf(o.string),
+  /**
+   * Override styles with className
+   */
+  className: o.string,
+  collectionListType: o.objectOf(o.any),
+  CollectionCardComponent: o.elementType,
+  CollectionCardProps: o.objectOf(o.any),
+  GridContainerProps: o.objectOf(o.any),
+  GridItemProps: o.objectOf(o.any),
+  onItemClick: j(o.func, "use onCollectionClick instead"),
+  onCollectionClick: o.func
+};
+c.defaultProps = {
+  className: void 0,
+  classes: {},
+  collectionListType: {},
+  CollectionCardComponent: b,
+  CollectionCardProps: {},
+  GridContainerProps: {},
+  GridItemProps: {},
+  onItemClick: null,
+  onCollectionClick: null
+};
+export {
+  c as CollectionGrid,
+  c as default,
+  h as styles
+};

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

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

package/dist/es/collection/CollectionLabel.js

@@ -0,0 +1,28 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import s from "clsx";
+import { withStyles as f, Box as d, Typography as l } from "@material-ui/core";
+import { Folder as p } from "@material-ui/icons";
+import { parseMetadataType as u } from "@vidispine/vdt-js";
+const y = {
+  root: {}
+};
+function h({ className: e, classes: a, collection: t, labelField: r }) {
+  const n = m(() => r ? r === "name" ? t.name || t.id : u(t.metadata, { joinValue: ",", flat: !0 })[r] || t.id : t.id, [r, t]);
+  return /* @__PURE__ */ i(
+    d,
+    {
+      className: s(e, a.root, "VdtCollectionLabel-root"),
+      display: "flex",
+      alignItems: "flex-end",
+      children: [
+        /* @__PURE__ */ o(p, { color: "inherit" }),
+        /* @__PURE__ */ o(l, { variant: "body1", style: { fontWeight: "inherit" }, children: n })
+      ]
+    }
+  );
+}
+const M = f(y, { name: "CollectionLabel" })(h);
+export {
+  M as default
+};

package/dist/es/collection/CollectionList/CollectionList.js

@@ -0,0 +1,51 @@
+import { jsx as e } from "react/jsx-runtime";
+import a from "clsx";
+import o from "prop-types";
+import { List as f } from "@material-ui/core";
+import C from "../CollectionListItem/index.js";
+const j = () => ({
+  root: {
+    width: "100%"
+  },
+  listItem: {},
+  addButton: {}
+});
+function s({
+  classes: i,
+  className: l,
+  collectionListType: n,
+  onItemClick: c,
+  CollectionListItemComponent: m,
+  CollectionListItemProps: r
+}) {
+  const { collection: p = [] } = n;
+  return /* @__PURE__ */ e(f, { className: a(i.root, "VdtCollectionList-root", l), children: p.map((t) => /* @__PURE__ */ e(
+    m,
+    {
+      collectionType: t,
+      onClick: c,
+      ...r
+    },
+    t.id
+  )) });
+}
+s.propTypes = {
+  className: o.string,
+  classes: o.objectOf(o.any),
+  collectionListType: o.objectOf(o.any),
+  onItemClick: o.func,
+  CollectionListItemComponent: o.elementType,
+  CollectionListItemProps: o.objectOf(o.any)
+};
+s.defaultProps = {
+  className: void 0,
+  classes: {},
+  collectionListType: {},
+  onItemClick: void 0,
+  CollectionListItemComponent: C,
+  CollectionListItemProps: {}
+};
+export {
+  s as default,
+  j as styles
+};

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

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