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

package/dist/es/events/EventContainer/EventContainer.js

@@ -0,0 +1,53 @@
+import { jsx as l } from "react/jsx-runtime";
+import a from "clsx";
+import e from "prop-types";
+const c = (r) => ({
+  root: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    overflowX: "auto",
+    "&::-webkit-scrollbar": {
+      "-webkit-appearance": "none"
+    },
+    "&::-webkit-scrollbar:horizontal": {
+      height: 11
+    },
+    "&::-webkit-scrollbar-thumb": {
+      borderRadius: 1,
+      borderColor: r.palette.divider,
+      borderStyle: "solid",
+      borderWidth: 1,
+      backgroundColor: "rgba(0, 0, 0, .3)"
+    },
+    "& > *": {
+      marginLeft: "10px",
+      flexShrink: 0
+    }
+  }
+});
+function o({ classes: r, className: t, children: s }) {
+  return /* @__PURE__ */ l("div", { className: a(r.root, t), children: s });
+}
+o.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * Events wrapped in the `DragScroll`
+   */
+  children: e.oneOfType([e.arrayOf(e.element), e.element]).isRequired
+};
+o.defaultProps = {
+  className: void 0,
+  classes: {}
+};
+export {
+  o as default,
+  c as styles
+};

package/dist/es/events/EventContainer/index.js

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

package/dist/es/events/EventMarker/EventMarker.js

@@ -0,0 +1,59 @@
+import { jsx as a } from "react/jsx-runtime";
+import m from "clsx";
+import e from "prop-types";
+import { ButtonBase as p } from "@material-ui/core";
+const y = () => ({
+  root: {
+    position: "absolute",
+    "&:hover": {
+      transform: "scale(1.2)"
+    }
+  }
+});
+function o({ className: s, classes: r, position: t, length: i, onClick: n, children: l }) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      disableRipple: !0,
+      onClick: n,
+      className: m(r.root, "VdtTimelineEvent-root", s),
+      style: { left: `${100 * t / i}%` },
+      children: l
+    }
+  );
+}
+o.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * Prop for button
+   */
+  onClick: e.func,
+  /**
+   * Typically the `EventMarkerThumbnail`
+   */
+  children: e.oneOfType([e.arrayOf(e.element), e.element]).isRequired,
+  /**
+   * The duration in seconds of the item, set by the `EventMarkerTimeline`.
+   */
+  length: e.number.isRequired,
+  /**
+   * The offset in seconds of the event.
+   */
+  position: e.number.isRequired
+};
+o.defaultProps = {
+  className: void 0,
+  classes: {},
+  onClick: void 0
+};
+export {
+  o as default,
+  y as styles
+};

package/dist/es/events/EventMarker/index.js

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

package/dist/es/events/EventMarkerThumbnail/EventMarkerThumbnail.js

@@ -0,0 +1,82 @@
+import { jsx as e } from "react/jsx-runtime";
+import t from "prop-types";
+import { Avatar as f, Tooltip as u } from "@material-ui/core";
+import { Image as y } from "@material-ui/icons";
+import { findNearestThumbnail as b, formatTimeCodeText as d } from "@vidispine/vdt-js";
+const C = {};
+function s({
+  className: n,
+  itemType: p,
+  timespan: o,
+  MissingThumbnailIcon: m,
+  AvatarComponent: r,
+  AvatarProps: a,
+  TooltipComponent: l,
+  TooltipProps: c
+}) {
+  const i = b(p, o.start || 0), T = d(o.start).toSmpte();
+  return /* @__PURE__ */ e(
+    l,
+    {
+      className: n,
+      title: T,
+      arrow: !0,
+      placement: "right",
+      ...c,
+      children: i ? /* @__PURE__ */ e(r, { variant: "circular", src: i, ...a }) : /* @__PURE__ */ e(r, { variant: "circular", ...a, children: /* @__PURE__ */ e(m, {}) })
+    }
+  );
+}
+s.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.objectOf(t.string),
+  /**
+   * Override styles with className
+   */
+  className: t.string,
+  /**
+   * See [`ItemDocument`](https://apidoc.vidispine.com/latest/ref/xml-schema.html#schema-element-ItemDocument).
+   */
+  itemType: t.objectOf(t.any).isRequired,
+  /**
+   * The specific timespan corresponding to this event.
+   */
+  timespan: t.shape({
+    start: t.string
+  }).isRequired,
+  /**
+   * Icon if there are no thumbnails.
+   */
+  MissingThumbnailIcon: t.elementType,
+  /**
+   * The component for the avatar.
+   */
+  AvatarComponent: t.elementType,
+  /**
+   * Props for the AvatarComponent.
+   */
+  AvatarProps: t.objectOf(t.any),
+  /**
+   * The component for the tooltip.
+   */
+  TooltipComponent: t.elementType,
+  /**
+   * Props for the TooltipComponent.
+   */
+  TooltipProps: t.objectOf(t.any)
+};
+s.defaultProps = {
+  classes: {},
+  className: void 0,
+  MissingThumbnailIcon: y,
+  AvatarComponent: f,
+  AvatarProps: {},
+  TooltipComponent: u,
+  TooltipProps: {}
+};
+export {
+  s as default,
+  C as styles
+};

package/dist/es/events/EventMarkerThumbnail/index.js

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

package/dist/es/events/EventMarkerTimeline/EventMarkerTimeline.js

@@ -0,0 +1,49 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Children as l, cloneElement as m } from "react";
+import p from "clsx";
+import e from "prop-types";
+import { alpha as c } from "@material-ui/core/styles";
+const x = (r) => ({
+  root: {
+    backgroundColor: c(r.palette.primary.main, 0.25),
+    height: "5px",
+    width: "100%",
+    borderRadius: "2px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    position: "relative",
+    marginTop: r.spacing(2),
+    marginBottom: r.spacing(2)
+  }
+});
+function o({ className: r, classes: i, length: t, children: n }) {
+  return /* @__PURE__ */ a("div", { className: p(i.root, "VdtTimeline-root", r), children: l.map(n, (s) => m(s, { length: t })) });
+}
+o.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * A list of `EventMarker` components.
+   */
+  children: e.oneOfType([e.arrayOf(e.element), e.element]).isRequired,
+  /**
+   * The duration of the item in seconds.
+   */
+  length: e.number
+};
+o.defaultProps = {
+  classes: {},
+  className: void 0,
+  length: void 0
+};
+export {
+  o as default,
+  x as styles
+};

package/dist/es/events/EventMarkerTimeline/index.js

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

package/dist/es/events/EventTimeline/EventTimeline.js

@@ -0,0 +1,365 @@
+import { jsxs as I, Fragment as de, jsx as d } from "react/jsx-runtime";
+import { useMemo as he, useState as ue } from "react";
+import e from "prop-types";
+import { Typography as ge } from "@material-ui/core";
+import Ee from "@vidispine/proptypes";
+import { parseMetadataType as ye, formatTimeCodeText as g, parseTimespan as U } from "@vidispine/vdt-js";
+import Te from "../Event/index.js";
+import ve from "../EventContainer/index.js";
+import Oe from "../EventMarker/index.js";
+import be from "../EventMarkerThumbnail/index.js";
+import Ce from "../EventMarkerTimeline/index.js";
+const Ie = (u) => ({
+  timelineEventContent: {
+    height: u.spacing(3),
+    width: u.spacing(3)
+  },
+  event: {},
+  eventContainer: {
+    paddingTop: u.spacing(2),
+    paddingBottom: u.spacing(2)
+  },
+  timeline: {},
+  timelineEvent: {}
+});
+function X({
+  className: u,
+  classes: h,
+  matchHighlights: V,
+  itemType: p,
+  eventFilter: x,
+  noEventsText: Y,
+  EventContainerComponent: $,
+  EventContainerProps: Z,
+  EventComponent: _,
+  EventProps: S,
+  EventContentComponent: w,
+  EventContentProps: N,
+  EventMarkerThumbnailComponent: K,
+  EventMarkerThumbnailProps: ee,
+  EventMarkerTimelineComponent: B,
+  EventMarkerTimelineProps: te,
+  EventMarkerComponent: ne,
+  EventMarkerProps: ae,
+  EventListComponent: O,
+  EventListProps: q,
+  GroupedTimeline: P,
+  GroupConfig: H,
+  FieldLabelMap: re,
+  itemSearchDocument: b
+}) {
+  const { durationSeconds: oe } = ye(p.metadata, {
+    flat: !0,
+    arrayOnSingleValue: !1
+  }), se = g(oe).toSeconds(), { id: ie } = p, C = he(() => {
+    const {
+      timespan: n = [],
+      metadata: { timespan: r = [] } = {}
+    } = p;
+    return V === !0 ? n.sort(
+      ({ start: t }, { start: l }) => g(t).samples - g(l).samples
+    ).filter(x) : r.sort(
+      ({ start: t }, { start: l }) => g(t).toSeconds() - g(l).toSeconds()
+    ).filter(
+      (t) => n.some(({ start: l, end: s }) => t.start === l && t.end === s)
+    ).filter(x);
+  }, [p, x, V]), [j, le] = ue(null), R = [], E = [], fe = () => {
+    var r, t;
+    const n = [];
+    return ((r = b.text) == null ? void 0 : r.length) > 0 && ((t = b.text) == null || t.forEach((l) => {
+      l.value.toLowerCase().replaceAll('"', "").split(" ").forEach((f) => n.push(f));
+    })), n;
+  }, ce = () => {
+    var r, t;
+    const n = [];
+    return ((r = b.filter) == null ? void 0 : r.length) > 0 && ((t = b.filter) == null || t.forEach((l) => {
+      l.field.forEach((s) => {
+        s.value.forEach((f) => {
+          const c = f.value.toLowerCase().replaceAll('"', "").split(" "), m = [];
+          c.forEach((T) => m.push(T)), n.push({ name: s.name, data: m });
+        });
+      });
+    })), n;
+  }, pe = fe(), y = ce(), k = [], W = (n, r) => r.every((t) => n.includes(t)), z = (n, r) => {
+    const t = [];
+    return n.forEach((s) => {
+      r.data.filter((f) => f.name === s.name && s.data.every((c) => f.valueList.includes(c))).length > 0 && t.push(s);
+    }), n.length === t.length;
+  }, me = (n) => {
+    let r = !1;
+    const t = [];
+    n.data.forEach((f) => {
+      f.value.toLowerCase().split(/[\s,]+/).forEach((m) => t.push(m));
+    });
+    const s = (() => {
+      const f = [];
+      return pe.forEach((c) => {
+        k.length > 0 && (k.includes(c) && t.includes(c) && c !== "" && f.push(c), !k.includes(c) && c !== "" && f.push(c));
+      }), f;
+    })();
+    return s.length > 0 && y.length > 0 && (r = W(t, s) && z(y, n)), s.length > 0 && y.length < 1 && (r = W(t, s)), s.length < 1 && y.length > 0 && (r = z(y, n)), r;
+  };
+  if (P && p.metadata.timespan.length > 0) {
+    const n = p.metadata.timespan.find(
+      (t) => t.start === "-INF" && t.end === "+INF"
+    ), r = U(n, { joinValue: ",", flat: !0 });
+    Object.keys(r).forEach((t) => {
+      typeof r[t] == "string" && t !== "user" && t !== "created" && t !== "duration" && r[t].toLowerCase().split(/[\s,]+/).forEach((s) => {
+        k.push(s);
+      });
+    }), p.metadata.timespan.forEach((t) => {
+      const { start: l, end: s, field: f = [], group: c = [] } = t;
+      if (s !== "+INF" && l !== "-INF") {
+        const m = [];
+        f.length > 0 && m.push("field"), c.length > 0 && m.push("group");
+        const T = U(t, {
+          joinValue: ",",
+          flat: !0
+        }), D = (o) => Object.keys(o).reduce((i, a) => Array.isArray(o[a]) ? i : typeof o[a] == "object" && o[a] !== null ? [...i, ...D(o[a])] : [...i, a], []), G = D(T);
+        let M = [];
+        H.forEach((o) => {
+          const i = Object.keys(T);
+          o.name === i.toString() && G.forEach((a) => {
+            o.field.length > 0 && o.field.includes(a) && M.push(a);
+          });
+        });
+        const J = [], A = (o) => {
+          let i = null;
+          if (M.length < 1 && (M = G), o instanceof Array)
+            for (let a = 0; a < o.length && (i = A(o[a]), !i); a += 1)
+              ;
+          else
+            for (const a in o)
+              if (i === null) {
+                if (M.includes(a)) {
+                  const F = re.filter((v) => v.name === a), L = F.length > 0 ? F[0].label : a;
+                  J.push({
+                    name: a,
+                    label: L,
+                    value: o[a],
+                    valueList: o[a].toLowerCase().replaceAll('"', "").split(" ")
+                  });
+                }
+                if ((o[a] instanceof Object || o[a] instanceof Array) && (i = A(o[a]), i))
+                  break;
+              }
+          return i;
+        };
+        A(T);
+        const Q = {
+          start: t.start,
+          end: t.end,
+          data: J
+        };
+        me(Q) && m.forEach((o) => {
+          t[o].forEach((i) => {
+            R.indexOf(i.name) === -1 && (R.push(i.name), E.push({ key: i.name, data: [] }));
+            const a = E.findIndex((v) => v.key === i.name);
+            E[a].data.push(Q);
+            const L = H.filter((v) => v.name === i.name);
+            L.length > 0 && (E[a].label = L[0].label);
+          });
+        });
+      }
+    });
+  }
+  return /* @__PURE__ */ I("div", { className: u, children: [
+    C.length > 0 ? /* @__PURE__ */ I(de, { children: [
+      B && /* @__PURE__ */ d(
+        B,
+        {
+          className: h.timeline,
+          length: se,
+          ...te,
+          children: C.map((n, r) => /* @__PURE__ */ d(
+            ne,
+            {
+              className: h.timelineEvent,
+              position: g(n.start).toSeconds(),
+              onClick: () => le(r),
+              ...ae,
+              children: K && /* @__PURE__ */ d(
+                K,
+                {
+                  className: h.timelineEventContent,
+                  itemType: p,
+                  timespan: n,
+                  ...ee
+                }
+              )
+            },
+            n.start
+          ))
+        }
+      ),
+      !P && O && /* @__PURE__ */ d(
+        O,
+        {
+          classes: h,
+          events: C,
+          active: j,
+          itemType: p,
+          EventProps: S,
+          EventContentComponent: w,
+          EventContentProps: N,
+          ...q
+        }
+      ),
+      $ && /* @__PURE__ */ d($, { className: h.eventContainer, ...Z, children: C.map((n, r) => /* @__PURE__ */ d(
+        _,
+        {
+          className: h.event,
+          isActive: r === j,
+          timespan: n,
+          itemType: p,
+          EventContentComponent: w,
+          EventContentProps: N,
+          ...S
+        },
+        [ie, n.start, n.end].join()
+      )) })
+    ] }) : Y,
+    P && O && E.map((n) => /* @__PURE__ */ I("div", { children: [
+      /* @__PURE__ */ d(
+        ge,
+        {
+          variant: "caption",
+          style: { marginTop: 40, marginBottom: 10, display: "block" },
+          noWrap: !0,
+          children: n.label || n.key
+        }
+      ),
+      /* @__PURE__ */ d(
+        O,
+        {
+          classes: h,
+          events: n.data,
+          active: j,
+          itemType: p,
+          EventProps: S,
+          EventContentComponent: w,
+          EventContentProps: N,
+          ...q
+        }
+      )
+    ] }, n.key))
+  ] });
+}
+X.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * See [`ItemDocument`](https://apidoc.vidispine.com/latest/ref/xml-schema.html#schema-element-ItemDocument).
+   */
+  itemType: Ee.ItemType.isRequired,
+  /**
+   * Whether highlight timespane contain metadata or should be fuzzy matched with item metadata.
+   */
+  matchHighlights: e.bool,
+  /**
+   * Filter events eg based on field-name.
+   */
+  eventFilter: e.func,
+  /**
+   * Show text when no events found.
+   */
+  noEventsText: e.string,
+  /**
+   * The component wrapping the events.
+   */
+  EventContainerComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  /**
+   * Props for the EventContainerComponent.
+   */
+  EventContainerProps: e.objectOf(e.any),
+  /**
+   * The component for each event.
+   */
+  EventComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  /**
+   * Props for the EventComponent.
+   */
+  EventProps: e.objectOf(e.any),
+  /**
+   * The component to display the event.
+   */
+  EventContentComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  /**
+   * Props for the EventContentProps.
+   */
+  EventContentProps: e.objectOf(e.any),
+  /**
+   * The component for each timeline event.
+   */
+  EventMarkerThumbnailComponent: e.oneOfType([
+    e.elementType,
+    e.oneOf([!1])
+  ]),
+  /**
+   * Props for the EventMarkerThumbnail.
+   */
+  EventMarkerThumbnailProps: e.objectOf(e.any),
+  /**
+   * The component wrapping timeline event.
+   */
+  EventMarkerTimelineComponent: e.oneOfType([
+    e.elementType,
+    e.oneOf([!1])
+  ]),
+  /**
+   * Props for the EventMarkerTimeline.
+   */
+  EventMarkerTimelineProps: e.objectOf(e.any),
+  /**
+   * The component wrapping timeline.
+   */
+  EventMarkerComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  /**
+   * Props for the EventMarker.
+   */
+  EventMarkerProps: e.objectOf(e.any),
+  EventListComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  EventListProps: e.objectOf(e.any),
+  /**
+   * Props for the Grouped timelines.
+   */
+  GroupedTimeline: e.bool,
+  GroupConfig: e.arrayOf(e.any),
+  FieldLabelMap: e.arrayOf(e.any),
+  itemSearchDocument: e.objectOf(e.any)
+};
+X.defaultProps = {
+  className: void 0,
+  classes: {},
+  matchHighlights: !0,
+  eventFilter: () => !0,
+  noEventsText: null,
+  EventContainerComponent: ve,
+  EventContainerProps: {},
+  EventComponent: Te,
+  EventProps: {},
+  EventContentComponent: null,
+  EventContentProps: {},
+  EventMarkerThumbnailComponent: be,
+  EventMarkerThumbnailProps: {},
+  EventMarkerTimelineComponent: Ce,
+  EventMarkerTimelineProps: {},
+  EventMarkerComponent: Oe,
+  EventMarkerProps: {},
+  EventListComponent: !1,
+  EventListProps: {},
+  GroupedTimeline: !1,
+  GroupConfig: [],
+  FieldLabelMap: [],
+  itemSearchDocument: {}
+};
+export {
+  X as default,
+  Ie as styles
+};

package/dist/es/events/EventTimeline/index.js

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