@vidispine/vdt-mui 23.3.0-pre.4 → 23.3.0-pre.5

package/dist/es/entity/EntityTableRow/components/EntityTableCellAvatar.js

@@ -1,27 +1,28 @@
 import { jsx as r } from "react/jsx-runtime";
-import y from "@mui/material/TableCell";
-import { parseMetadataType as f } from "@vidispine/vdt-js";
-import c from "../../EntityAvatar/index.js";
-const T = ({
-  itemType: e,
+import f from "@mui/material/TableCell";
+import { parseMetadataType as c } from "@vidispine/vdt-js";
+import T from "../../EntityAvatar/index.js";
+const i = ({
+  itemType: a,
   collectionType: t,
-  isLoading: i,
-  avatarVariant: o,
-  entityAvatar: m,
-  ...n
+  isLoading: o,
+  avatarVariant: n,
+  entityAvatar: l,
+  ...m
 }) => {
   const {
     metadata: p
-  } = e || t || {}, l = e && "item" || t && "collection" || t && "library", {
-    mediaType: d,
-    mimeType: a
-  } = f(p, {
+  } = a || t || {}, d = a && "item" || t && "collection" || t && "library", {
+    mediaType: s,
+    mimeType: e
+  } = c(p, {
     flat: !0,
     arrayOnSingleValue: !1
-  }), s = typeof a == "string" ? a.split("/")[0] : void 0;
-  return /* @__PURE__ */ r(y, { padding: "checkbox", ...n, children: /* @__PURE__ */ r(c, { entityType: l || void 0, mediaType: d || s, variant: o, isLoading: i, ...m || {} }) });
+  }), y = typeof e == "string" ? e.split("/")[0] : void 0;
+  return /* @__PURE__ */ r(f, { padding: "checkbox", ...m, children: /* @__PURE__ */ r(T, { entityType: d || void 0, mediaType: s || y, variant: n, isLoading: o, ...l || {} }) });
 };
-T.defaultProps = {};
+i.defaultProps = {};
+const x = i;
 export {
-  T as default
+  x as default
 };

package/dist/es/entity/EntityTableRow/components/EntityTableCellCheckbox.js

@@ -1,18 +1,19 @@
 import { jsx as e } from "react/jsx-runtime";
-import l from "@mui/material/TableCell";
-import p from "@mui/material/Skeleton";
-const r = ({
-  isLoading: t,
-  itemType: m,
+import p from "@mui/material/TableCell";
+import r from "@mui/material/Skeleton";
+const t = ({
+  isLoading: o,
+  itemType: a,
   // ignore (exists as MUI string prop)
-  children: o,
+  children: l,
   ...i
-}) => /* @__PURE__ */ e(l, { padding: "checkbox", ...i, children: t ? /* @__PURE__ */ e(p, { sx: {
+}) => /* @__PURE__ */ e(p, { padding: "checkbox", ...i, children: o ? /* @__PURE__ */ e(r, { sx: {
   width: "18px",
   height: "36px",
   margin: "auto"
-} }) : o });
-r.defaultProps = {};
+} }) : l });
+t.defaultProps = {};
+const c = t;
 export {
-  r as default
+  c as default
 };

package/dist/es/entity/_utils/getEntityText.d.ts

@@ -3,5 +3,5 @@ type EntityObject = {
     itemType?: ItemType;
     collectionType?: CollectionType;
 };
-export declare const getEntityText: (funcOrFieldName: string | ((entity: EntityObject) => string), { itemType, collectionType }: EntityObject) => any;
+export declare const getEntityText: (funcOrFieldName: string | JSX.Element | ((entity: EntityObject) => string | JSX.Element), { itemType, collectionType }: EntityObject) => any;
 export {};

package/dist/es/event/EventList/EventList.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import { Box as MuiBox } from '@mui/material';
+import type { SearchResultType } from '@vidispine/types';
+import { WithOverrideProps, StyledComponent } from '../../_types';
+import VdtVirtualizedList from '../../general/VirtualizedList';
+import VdtEventListItem from '../EventListItem';
+import VdtEventListHeader from './components/EventListHeader';
+declare const StyledMuiBox: any;
+declare const StyledMuiBoxWrapper: any;
+type StyledMuiBoxListWrapperType = StyledComponent<typeof MuiBox, {
+    horizontal?: boolean;
+    horizontalItemHeight: number;
+    verticalContainerHeight: string;
+}>;
+declare const StyledMuiBoxListWrapper: StyledMuiBoxListWrapperType;
+declare const defaultComponents: {
+    Root: typeof StyledMuiBox;
+    Wrapper: typeof StyledMuiBoxWrapper;
+    ListWrapper: typeof StyledMuiBoxListWrapper;
+    ListHeader: typeof VdtEventListHeader;
+    List: typeof VdtVirtualizedList;
+    ListItem: typeof VdtEventListItem;
+};
+export interface EventListProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The `SearchResultType` to get the event timespans from
+     */
+    searchResultType?: SearchResultType;
+    /**
+     * To use with relative path thumbnails
+     */
+    baseUrl?: string;
+    /**
+     * Group events by item/collection
+     */
+    groupByEntity?: boolean;
+    /**
+     * Display list in horizontal orientation
+     */
+    horizontal?: boolean;
+    /**
+     * Horizontal only.
+     * Height of the event list items, if variable pick highest.
+     * Used to calculate container height.
+     */
+    horizontalItemHeight?: number;
+    /**
+     * Vertical only.
+     * Height of the scrollable container.
+     * Valid css height property.
+     */
+    verticalContainerHeight?: string;
+    /**
+     * Estimated size of the list item, width for horizontal, height for vertical orientation.
+     * Pick the highest value if variable.
+     * Used to calculate scroll size.
+     */
+    estimateItemSize?: number;
+    /**
+     * Callback for ListItem click event
+     *
+     * Set to `undefined` to disable
+     */
+    onItemClick?: (event: React.MouseEvent<HTMLDivElement>, payload: any) => void;
+}
+declare const EventList: React.FC<EventListProps>;
+export default EventList;

package/dist/es/event/EventList/EventList.js

@@ -0,0 +1,113 @@
+import { jsx as i, jsxs as T } from "react/jsx-runtime";
+import { useMemo as R } from "react";
+import l from "@mui/material/Box";
+import { styled as c } from "@mui/material/styles";
+import { parseSearchResultEvents as S } from "@vidispine/vdt-js";
+import V from "../../general/VirtualizedList/index.js";
+import $ from "../EventListItem/index.js";
+import b from "./components/EventListHeader.js";
+const k = c(l)(() => ({})), j = c(l)(({
+  theme: t
+}) => ({
+  backgroundColor: t.palette.background.paper
+})), w = c(l, {
+  shouldForwardProp: (t) => !["horizontal", "horizontalItemHeight", "verticalContainerHeight"].includes(t)
+})(({
+  theme: t,
+  horizontal: n,
+  horizontalItemHeight: s,
+  verticalContainerHeight: o
+}) => ({
+  height: n ? `calc(${s}px + ${t.spacing(4)})` : o,
+  paddingTop: t.spacing(2),
+  paddingLeft: t.spacing(1),
+  paddingRight: t.spacing(1),
+  marginTop: t.spacing(2),
+  marginBottom: t.spacing(2),
+  display: "flex",
+  alignItems: "center"
+})), y = {
+  Root: k,
+  Wrapper: j,
+  ListWrapper: w,
+  ListHeader: b,
+  List: V,
+  ListItem: $
+}, E = ({
+  searchResultType: t,
+  baseUrl: n,
+  groupByEntity: s,
+  horizontal: o,
+  horizontalItemHeight: m,
+  verticalContainerHeight: u,
+  estimateItemSize: v,
+  onItemClick: a,
+  components: H,
+  componentsProps: r
+}) => {
+  const {
+    Root: M,
+    Wrapper: g,
+    ListWrapper: f,
+    ListHeader: B,
+    List: L,
+    ListItem: h
+  } = H, I = R(() => S(t, {
+    includeGroupMetadata: !0,
+    flatEvents: !s,
+    includeEntityType: !0,
+    includeNearestThumbnail: !0
+  }), [s, t]), C = (e, x, p) => {
+    const {
+      events: W,
+      ...d
+    } = x;
+    a(e, {
+      ...d,
+      ...p
+    });
+  };
+  return /* @__PURE__ */ i(M, { style: {
+    height: "100%"
+  }, ...r.root, children: s ? I.map((e) => {
+    const {
+      events: x,
+      ...p
+    } = e;
+    return /* @__PURE__ */ T(g, { ...r.wrapper, children: [
+      /* @__PURE__ */ i(B, { variant: "h6", entry: e, ...r.listHeader }),
+      /* @__PURE__ */ i(f, { horizontal: o, horizontalItemHeight: m, verticalContainerHeight: u, ...r.listWrapper, children: /* @__PURE__ */ i(L, { listItems: e == null ? void 0 : e.events, horizontal: o, estimateItemSize: v, onItemClick: a ? (W, d) => C(W, e, d) : void 0, components: {
+        ListItem: h
+      }, componentsProps: {
+        listItem: {
+          baseUrl: n,
+          entry: p,
+          ...r.listItem
+        }
+      } }) })
+    ] }, `${e.entityType}${e.entityId}`);
+  }) : /* @__PURE__ */ i(g, { children: /* @__PURE__ */ i(f, { horizontal: o, horizontalItemHeight: m, verticalContainerHeight: u, children: /* @__PURE__ */ i(L, { listItems: I, horizontal: o, estimateItemSize: v, onItemClick: a, components: {
+    ListItem: h
+  }, componentsProps: {
+    listItem: {
+      baseUrl: n,
+      ...r.listItem
+    }
+  } }) }) }) });
+};
+E.defaultProps = {
+  searchResultType: {},
+  baseUrl: void 0,
+  groupByEntity: !0,
+  horizontal: !0,
+  horizontalItemHeight: void 0,
+  verticalContainerHeight: void 0,
+  estimateItemSize: void 0,
+  onItemClick: void 0,
+  components: y,
+  componentsProps: void 0
+};
+const K = E;
+export {
+  K as default
+};

package/dist/es/event/EventList/components/EventListHeader.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TypographyProps } from '@mui/material';
+import { ParsedSearchResultEntryType } from '@vidispine/vdt-js';
+export interface EventListHeaderProps extends TypographyProps {
+    entry: ParsedSearchResultEntryType;
+}
+declare const EventListHeader: React.FC<EventListHeaderProps>;
+export default EventListHeader;

package/dist/es/event/EventList/components/EventListHeader.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import i from "@mui/material/Typography";
+import { styled as p } from "@mui/material/styles";
+import { parseMetadataType as n } from "@vidispine/vdt-js";
+const s = p(i)(({
+  theme: t
+}) => ({
+  marginBottom: `-${t.spacing(4)}`,
+  marginLeft: t.spacing(2),
+  paddingTop: t.spacing(1)
+})), d = ({
+  entry: t,
+  ...a
+}) => {
+  const {
+    itemType: {
+      metadata: o
+    } = {}
+  } = t, {
+    title: r
+  } = n(o, {
+    joinValue: ",",
+    flat: !0
+  });
+  return /* @__PURE__ */ e(s, { ...a, children: r || t.entityId });
+}, f = d;
+export {
+  f as default
+};

package/dist/es/event/EventList/index.d.ts

@@ -0,0 +1,2 @@
+declare const StyledComponent: any;
+export default StyledComponent;

package/dist/es/event/EventList/index.js

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

package/dist/es/event/EventListItem/EventListItem.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box as MuiBox } from '@mui/material';
+import type { CollectionType, ItemType, MetadataGroupValueType } from '@vidispine/types';
+import { StyledComponent, WithOverrideProps } from '../../_types';
+type StyledMuiBoxImageType = StyledComponent<typeof MuiBox, {
+    image?: string;
+    cover?: boolean;
+}>;
+declare const defaultComponents: {
+    Root: StyledMuiBoxImageType;
+};
+export type EventListItemEventType = {
+    entityType: 'Item' | 'Collection';
+    entityId: string;
+    group?: MetadataGroupValueType;
+    start?: string;
+    end?: string;
+    thumbnail?: string;
+    startSeconds?: number;
+    endSeconds?: number;
+};
+export type EventListItemEntryType = {
+    entityType: 'Item' | 'Collection';
+    entityId: string;
+    events?: EventListItemEventType[];
+    itemType?: ItemType;
+    collectionType?: CollectionType;
+};
+export interface EventListItemProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Parsed entry timespan from parseSearchResultEvents
+     */
+    listItem?: EventListItemEventType;
+    /**
+     * To use with relative path thumbnails
+     *
+     * _You typically set this to the externally accessible vidicore uri_
+     */
+    baseUrl?: string;
+    /**
+     * Parsed entry from parseSearchResultEvents
+     */
+    entry?: EventListItemEntryType;
+    /**
+     * Whether to use background-size: cover on the background image, otherwise contain
+     */
+    cover?: boolean;
+    /**
+     * Callback fired when clicking the item
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, payload: EventListItemEventType & EventListItemEntryType) => void;
+    /**
+     * Callback fired when clicking open icon
+     */
+    onOpenClick?: (event: React.MouseEvent<HTMLButtonElement>, payload: EventListItemEventType & EventListItemEntryType) => void;
+}
+declare const EventListItem: React.FC<EventListItemProps>;
+export default EventListItem;

package/dist/es/event/EventListItem/EventListItem.js

@@ -0,0 +1,203 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import j from "@mui/icons-material/esm/Launch";
+import A from "@mui/icons-material/esm/FolderOutlined";
+import F from "@mui/icons-material/esm/TextSnippetOutlined";
+import d from "@mui/material/Box";
+import V from "@mui/material/IconButton";
+import I from "@mui/material/Tooltip";
+import N from "@mui/material/Popover";
+import { styled as e } from "@mui/material/styles";
+import { formatTimeCodeText as W } from "@vidispine/vdt-js";
+import D from "../../metadata/MetadataGroupTreeView/index.js";
+const G = e(d, {
+  shouldForwardProp: (o) => !["image", "cover"].includes(o)
+})(({
+  theme: o,
+  image: i,
+  cover: a,
+  onClick: l
+}) => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  padding: o.spacing(0.25),
+  margin: o.spacing(1),
+  height: "95px",
+  width: "168px",
+  zIndex: 5,
+  transition: "all .3s ease-in-out",
+  backgroundColor: "rgba(0, 0, 0, 0.8)",
+  backgroundImage: i ? `url(${i})` : "none",
+  backgroundPosition: "center",
+  backgroundRepeat: "no-repeat",
+  borderRadius: "4px",
+  cursor: l ? "pointer" : "initial",
+  ...a ? {
+    backgroundSize: "cover"
+  } : {
+    backgroundSize: "contain"
+  },
+  "&:hover": {
+    "& .VdtEventListItemActions": {
+      opacity: 1
+    }
+  }
+})), q = e("div", {
+  shouldForwardProp: (o) => !["infoOpen"].includes(o)
+})(({
+  theme: o,
+  infoOpen: i
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  opacity: i ? 1 : 0,
+  transition: "opacity .15s ease-in-out",
+  gap: o.spacing(0.25)
+})), S = e(V)(({
+  theme: o
+}) => ({
+  padding: o.spacing(0.25),
+  borderRadius: "4px",
+  backgroundColor: "rgba(0,0,0,0.5)",
+  color: o.palette.common.white,
+  "&:hover": {
+    backgroundColor: "rgba(0,0,0,0.7)"
+  },
+  "&.MuiIconButton-root": {
+    "& .MuiTouchRipple-child": {
+      borderRadius: "4px"
+    }
+  }
+})), H = e("div")(() => ({
+  display: "flex",
+  justifyContent: "space-between"
+})), J = e("div")(() => ({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  color: "rgba(255,255,255,0.6)",
+  "& .MuiSvgIcon-root": {
+    height: "1.75em",
+    width: "1.75em"
+  }
+})), k = e("div")(({
+  theme: o
+}) => ({
+  backgroundColor: "rgba(0,0,0,0.6)",
+  paddingLeft: o.spacing(0.5),
+  paddingRight: o.spacing(0.5),
+  paddingTop: o.spacing(0.25),
+  paddingBottom: o.spacing(0.25),
+  borderRadius: "3px",
+  display: "flex",
+  alignItems: "center",
+  "& span": {
+    fontSize: "0.75rem",
+    fontWeight: 700,
+    color: o.palette.common.white
+  }
+})), s = e("span")(() => ({
+  fontWeight: 600,
+  fontSize: ".75rem"
+})), y = e("span")(() => ({
+  fontSize: ".75rem"
+})), K = {
+  Root: G
+}, R = ({
+  listItem: o,
+  entry: i,
+  baseUrl: a,
+  cover: l,
+  onClick: w,
+  onOpenClick: p,
+  components: L,
+  componentsProps: O
+}) => {
+  const {
+    Root: P
+  } = L, {
+    thumbnail: c,
+    group: z,
+    start: g,
+    end: u
+  } = o || {}, {
+    entityType: m
+  } = i || o, h = (t) => t === "-INF" ? "Start" : t === "+INF" ? "End" : W(t).toSmpte(), f = h(g), b = h(u), [x, C] = $(null), v = !!x, M = (t) => {
+    w(t, {
+      ...o,
+      ...i || {}
+    });
+  }, T = (t) => {
+    t.stopPropagation(), C(t.currentTarget);
+  }, B = (t) => {
+    t.stopPropagation(), p(t, {
+      ...o,
+      ...i || {}
+    });
+  }, E = () => {
+    C(null);
+  };
+  return /* @__PURE__ */ r(P, { onClick: M, cover: l, image: a && c ? `${a}/APInoauth/thumbnail/${c}` : c, ...O.root, children: [
+    !c && /* @__PURE__ */ n(J, { children: /* @__PURE__ */ n(A, {}) }),
+    /* @__PURE__ */ r(q, { className: "VdtEventListItemActions", infoOpen: v, children: [
+      p && /* @__PURE__ */ n(I, { title: m === "Item" && "Open Item" || m === "Collection" && "Open Collection" || "Open", children: /* @__PURE__ */ n(S, { size: "small", onClick: B, children: /* @__PURE__ */ n(j, {}) }) }),
+      /* @__PURE__ */ n(I, { title: "Show event info", children: /* @__PURE__ */ n(S, { size: "small", onClick: T, children: /* @__PURE__ */ n(F, {}) }) })
+    ] }),
+    /* @__PURE__ */ r(H, { children: [
+      /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n("span", { children: f }) }),
+      /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n("span", { children: b }) })
+    ] }),
+    /* @__PURE__ */ r(N, { onClick: (t) => t.stopPropagation(), open: v, anchorEl: x, onClose: E, anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    }, transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    }, slotProps: {
+      paper: {
+        sx: {
+          width: 400,
+          maxWidth: 400,
+          padding: 1
+        }
+      }
+    }, children: [
+      /* @__PURE__ */ r(d, { sx: {
+        paddingLeft: 1,
+        paddingRight: 1
+      }, children: [
+        /* @__PURE__ */ n(s, { children: "Start timecode: " }),
+        /* @__PURE__ */ n(y, { children: `${f} (${g})` })
+      ] }),
+      /* @__PURE__ */ r(d, { sx: {
+        paddingLeft: 1,
+        paddingRight: 1
+      }, children: [
+        /* @__PURE__ */ n(s, { children: "End timecode: " }),
+        /* @__PURE__ */ n(y, { children: `${b} (${u})` })
+      ] }),
+      /* @__PURE__ */ n(d, { sx: {
+        paddingLeft: 1,
+        paddingRight: 1
+      }, children: /* @__PURE__ */ n(s, { children: "Metadata group: " }) }),
+      /* @__PURE__ */ n(D, { group: z })
+    ] })
+  ] });
+};
+R.defaultProps = {
+  listItem: void 0,
+  baseUrl: void 0,
+  entry: void 0,
+  cover: !1,
+  onClick: void 0,
+  onOpenClick: void 0,
+  components: K,
+  componentsProps: void 0
+};
+const ao = R;
+export {
+  ao as default
+};

package/dist/es/event/EventListItem/index.d.ts

@@ -0,0 +1,2 @@
+declare const StyledComponent: any;
+export default StyledComponent;

package/dist/es/event/EventListItem/index.js

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

package/dist/es/event/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EventList } from './EventList';
+export { default as EventListItem } from './EventListItem';