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

package/dist/es/item/ItemTimespan/hooks/useItemTimespanBox.js

@@ -0,0 +1,47 @@
+import { useState as f, useMemo as l } from "react";
+import F from "../utils/filterTimespanList.js";
+import u from "../utils/parseTimespanList.js";
+const I = ({
+  itemType: e,
+  videoEl: s,
+  field: r,
+  fieldGroup: i,
+  aduGroup: n,
+  aduValue: o,
+  aduConfidence: m
+}) => {
+  let p;
+  s.current && (p = s.current.player.videoEl);
+  const [t, T] = f(""), [c, x] = f(), a = l(() => u({ itemType: e }), [e]), L = l(
+    () => F({
+      filterText: t,
+      filterConfidence: c,
+      parsedTimespans: a,
+      field: r,
+      fieldGroup: i,
+      aduGroup: n,
+      aduValue: o,
+      aduConfidence: m
+    }),
+    [
+      t,
+      c,
+      a,
+      r,
+      i,
+      n,
+      o,
+      m
+    ]
+  );
+  return {
+    video: p,
+    setFilterText: T,
+    filterText: t,
+    setFilterConfidence: x,
+    timespanList: L
+  };
+};
+export {
+  I as default
+};

package/dist/es/item/ItemTimespan/hooks/useItemTimespanBoxEdit.js

@@ -0,0 +1,24 @@
+import { useState as l, useCallback as e } from "react";
+const f = ({ onRefresh: n }) => {
+  const [c, s] = l(), [o, t] = l(!1), a = e(
+    (g) => () => {
+      s(g), t(!0);
+    },
+    []
+  ), u = e(() => {
+    t(!1), s(), n();
+  }, [n]), i = e(() => {
+    t(!1), s();
+  }, []);
+  return {
+    isEditing: o,
+    onOpen: a,
+    onCancel: i,
+    onSuccess: u,
+    initialValues: c,
+    onToggle: o ? i : a
+  };
+};
+export {
+  f as default
+};

package/dist/es/item/ItemTimespan/hooks/useItemTimespanEdit.js

@@ -0,0 +1,46 @@
+import { item as x, metadata as M } from "@vidispine/vdt-api";
+import { createTimeBase as F, formatTimeCodeSeconds as G, formatTimeCodeSmpte as B, createMetadataType as U } from "@vidispine/vdt-js";
+function w({
+  itemId: i,
+  video: o,
+  sampleRate: m,
+  onSuccess: r,
+  onError: a,
+  sameAsStartText: C,
+  laterThanEndText: I,
+  ...y
+}) {
+  const {
+    startText: c,
+    endText: p,
+    uuid: n,
+    timespan: D,
+    ...e
+  } = y;
+  if (o && !e.startSmpte && !e.endSmpte) {
+    const { currentTime: s = 0 } = o, d = F(m), t = G(s, { timeBase: d }).toSmpte();
+    e.startSmpte = t, e.endSmpte = t;
+  }
+  return {
+    onSubmit: (s, d) => {
+      try {
+        const { dirtyFields: t = {} } = d.getState(), { startSmpte: u, endSmpte: S } = t, { startSmpte: h, endSmpte: f, ...b } = s, T = parseInt(h.replace(/[^\d|]/g, ""), 10), l = parseInt(f.replace(/[^\d|]/g, ""), 10);
+        if (T > l)
+          return { startSmpte: I };
+        if (T === l)
+          return { endSmpte: C };
+        const N = u || !c ? B(h, { timeBase: m }).toText() : c, v = S || !p ? B(f, { timeBase: m }).toText() : p, g = U({ start: N, end: v, ...b });
+        return n && (u || S) ? x.updateItemMetadata({ itemId: i, metadataDocument: g }).then(() => M.removeMetadata({ metadataUuid: n })).then(r).catch(a) : x.updateItemMetadata({ itemId: i, metadataDocument: g }).then(r).catch(a);
+      } catch (t) {
+        return a(t);
+      }
+    },
+    onDelete: () => M.removeMetadata({ metadataUuid: n }).then(r).catch(a),
+    metadataUuid: n,
+    initialValues: e,
+    timespan: D
+  };
+}
+export {
+  w as default
+};

package/dist/es/item/ItemTimespan/hooks/useItemTimespanInterval.js

@@ -0,0 +1,69 @@
+import { createRef as w, useMemo as A, useEffect as R } from "react";
+import { formatTimeCodeText as T, formatTimeCodeType as b } from "@vidispine/vdt-js";
+const h = (t, e) => Array.isArray(e) ? Object.fromEntries(
+  Object.entries(t).filter(([o]) => e.includes(o))
+) : t[e], H = ({
+  timespan: t,
+  subtitleGroup: e,
+  subtitleField: o,
+  aduGroup: c,
+  aduValue: d,
+  aduConfidence: i,
+  isActive: u,
+  handleOnSeek: f = () => {
+  },
+  handleOnEdit: p = () => {
+  }
+}) => {
+  const r = w(), { start: x, end: S, duration: l, metadataFieldValue: L, text: y, aduList: C, onSeek: v, onEdit: E } = A(() => {
+    const { start: I, end: V } = t, s = T(I), a = T(V), g = { samples: a.samples - s.samples, timeBase: a.timeBase }, { group: j = [] } = t, m = j.find(({ name: n }) => n === e) || {}, { group: k = [], uuid: B } = m;
+    return {
+      start: s,
+      end: a,
+      duration: b(g),
+      text: m[o],
+      metadataFieldValue: h(m, o),
+      aduList: k.filter(({ name: n }) => n === c).map(({ [d]: n, [i]: M }) => ({ confidence: Number(M), value: n })),
+      onSeek: f(s.toSeconds()),
+      onEdit: p({
+        timespan: t,
+        startText: s.toText(),
+        endText: a.toText(),
+        startSmpte: s.toSmpte(),
+        endSmpte: a.toSmpte(),
+        uuid: B,
+        [e]: {
+          [o]: m[o]
+        }
+      })
+    };
+  }, [
+    t,
+    o,
+    f,
+    p,
+    e,
+    c,
+    d,
+    i
+  ]);
+  return R(() => {
+    u && r && r.current && r.current.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
+  }, [r, u]), {
+    ref: r,
+    start: x,
+    end: S,
+    duration: l,
+    text: y,
+    metadataFieldValue: L,
+    aduList: C,
+    onSeek: v,
+    onEdit: E
+  };
+};
+export {
+  H as default
+};

package/dist/es/item/ItemTimespan/hooks/useItemTimespanList.js

@@ -0,0 +1,29 @@
+import { useState as m, useCallback as u, useEffect as c } from "react";
+import p from "../utils/findActiveTimespanIndex.js";
+const l = ({ video: e, timespanList: n }) => {
+  const [r, a] = m(), s = u(
+    (t) => () => {
+      e && (e.currentTime = t, e.played.length === 0 && e.play());
+    },
+    [e]
+  );
+  return c(() => {
+    if (e && n.length > 0) {
+      const t = () => p({
+        timespanList: n,
+        video: e,
+        activeTimespanIndex: r,
+        setActiveTimespanIndex: a
+      });
+      return e.addEventListener("timeupdate", t), () => {
+        e.removeEventListener("timeupdate", t);
+      };
+    }
+  }, [e, n]), {
+    onSeek: s,
+    activeTimespanIndex: r
+  };
+};
+export {
+  l as default
+};

package/dist/es/item/ItemTimespan/index.js

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

package/dist/es/item/ItemTimespan/utils/filterTimespanList.js

@@ -0,0 +1,49 @@
+const j = ({
+  parsedTimespans: m,
+  filterText: u,
+  filterConfidence: n,
+  fieldGroup: c,
+  field: f,
+  aduGroup: L,
+  aduValue: h,
+  aduConfidence: a
+}) => {
+  if ((n === void 0 || n === 0) && (u === void 0 || u === ""))
+    return m;
+  const A = Array.isArray(f) ? f : [f], w = Array.isArray(c) ? c : [c], i = u.toLowerCase(), g = [];
+  return m.forEach((E) => {
+    const { group: y = [], start: d, end: l } = E, o = y.filter(({ name: r }) => w.includes(r));
+    if (o.length !== 0)
+      if (L && h) {
+        const r = [];
+        if (o.forEach(({ group: s, ...p }) => {
+          const e = [];
+          s.forEach((t) => {
+            if (t.name === L && h in t) {
+              const T = String(t[h].toLowerCase());
+              if (i && !T.includes(i) || a && n !== void 0 && t[a] !== void 0 && n > Number(t[a]))
+                return;
+              e.push(t);
+            }
+          }), e.length !== 0 && r.push({ ...p, group: e });
+        }), r.length === 0)
+          return;
+        g.push({ start: d, end: l, group: r });
+      } else {
+        const r = o.reduce((s, p) => (Object.entries(p).forEach(([e, t]) => {
+          A.includes(e) && s.push(t);
+        }), s), []);
+        if (r.length === 0)
+          return;
+        if (i) {
+          const s = r.join("");
+          if (s === "")
+            return;
+          s.toLowerCase().includes(i.toLowerCase()) && g.push({ start: d, end: l, group: o });
+        }
+      }
+  }), g;
+};
+export {
+  j as default
+};

package/dist/es/item/ItemTimespan/utils/findActiveTimespanIndex.js

@@ -0,0 +1,16 @@
+import { formatTimeCodeText as n } from "@vidispine/vdt-js";
+const p = ({
+  timespanList: o,
+  video: s = {},
+  setActiveTimespanIndex: d,
+  activeTimespanIndex: r
+}) => {
+  const { currentTime: c = 0 } = s, t = Number(c.toFixed(3)), e = o.findIndex(({ start: i, end: a }) => {
+    const m = n(i), u = n(a), x = Number(m.toSeconds().toFixed(3)), f = Number(u.toSeconds().toFixed(3));
+    return t >= x && t < f;
+  });
+  e > -1 && r !== e && d(e);
+};
+export {
+  p as default
+};

package/dist/es/item/ItemTimespan/utils/parseTimespanList.js

@@ -0,0 +1,18 @@
+import { parseTimespan as o } from "@vidispine/vdt-js";
+const i = (s, r) => {
+  const { start: e } = s, { start: n } = r, [a] = e.split("@"), [t] = n.split("@");
+  return Number(a) < Number(t) ? -1 : Number(a) > Number(t) ? 1 : 0;
+}, p = ({ itemType: s = {} }) => {
+  const { metadata: r } = s, e = {
+    includeTimespanAttributes: !0,
+    includeGroupAttributes: !0,
+    flat: !0,
+    overrideGroup: !0,
+    groupAsList: !0,
+    joinValue: ","
+  }, { timespan: n = [] } = r || {};
+  return n.sort(i).map((t) => o(t, e));
+};
+export {
+  p as default
+};

package/dist/es/item/ItemTimespanTab.js

@@ -0,0 +1,4 @@
+import m from "./ItemTimespan/index.js";
+export {
+  m as default
+};

package/dist/es/item/ItemTreeItem.js

@@ -0,0 +1,50 @@
+import { jsx as m } from "react/jsx-runtime";
+import l from "clsx";
+import { withStyles as y } from "@material-ui/core";
+import { ITEM as o, COLLECTION as b, JOIN_CHARACTER as c } from "../entity/EntityTreeConsts.js";
+import d from "../TreeItemDraggable.js";
+import g from "./ItemLabelDroppable.js";
+const u = {
+  root: {}
+};
+function x({
+  className: I,
+  classes: s,
+  item: t,
+  parentCollectionId: e,
+  nodeId: r = [o, t.id, b, e].join(c),
+  onDrop: a,
+  ItemLabelComponent: i = g,
+  TreeItemComponent: f = d,
+  TreeItemProps: T = {},
+  ItemLabelProps: n = {}
+}) {
+  const p = /* @__PURE__ */ m(
+    i,
+    {
+      item: t,
+      parentCollectionId: e,
+      nodeId: r,
+      onDrop: a,
+      ...n
+    }
+  );
+  return /* @__PURE__ */ m(
+    f,
+    {
+      className: l(s.root, "VdtItemTreeItem-root", I),
+      label: p,
+      nodeId: r,
+      dragInfo: {
+        entityType: o,
+        entityId: t.id,
+        entityParentId: e
+      },
+      ...T
+    }
+  );
+}
+const C = y(u, { name: "VdtItemTreeItem" })(x);
+export {
+  C as default
+};

package/dist/es/item/player/ItemAudioPlayer.js

@@ -0,0 +1,57 @@
+import { jsx as a } from "react/jsx-runtime";
+import n from "clsx";
+import { withStyles as c, Box as r } from "@material-ui/core";
+import { VideoPlayer as u } from "@vidispine/vdt-videojs-react";
+const g = [
+  "audio/mp4",
+  "audio/mpeg",
+  "audio/x-aac",
+  "audio/aac",
+  "audio/x-wav",
+  "audio/wav",
+  "audio/accp",
+  "audio/ogg",
+  "audio/webm",
+  "audio/x-flac"
+], m = (o) => ({
+  root: {
+    "& .video-js": {
+      backgroundColor: "rgba(0, 0, 0, 0.2)"
+    },
+    "& .video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.controls-below-player) .vjs-control-bar": {
+      transform: "none"
+    },
+    "& .video-js .vjs-play-progress.vjs-slider-bar": {
+      backgroundColor: o.palette.secondary.main
+    },
+    "& .video-js .vjs-fullscreen-control": {
+      display: "none"
+    }
+  }
+});
+function p({
+  className: o,
+  classes: e,
+  videoEl: s,
+  onReady: i,
+  width: t = "100%",
+  previewSources: d = [],
+  audioPlayerProps: l = {}
+}) {
+  return /* @__PURE__ */ a(r, { className: n(e.root, o), children: /* @__PURE__ */ a(r, { width: "100%", children: /* @__PURE__ */ a(
+    u,
+    {
+      controls: !0,
+      sources: d.slice(0, 1),
+      ref: s,
+      width: t,
+      onReady: i,
+      ...l
+    }
+  ) }) });
+}
+const b = c(m, { name: "VdtItemAudioPlayer" })(p);
+export {
+  g as ALLOWED_MIME_TYPES,
+  b as default
+};

package/dist/es/item/player/ItemImagePlayer.js

@@ -0,0 +1,33 @@
+import { jsx as m } from "react/jsx-runtime";
+import o from "clsx";
+import { withStyles as g, Box as r } from "@material-ui/core";
+const x = [
+  "image/apng",
+  "image/bmp",
+  "image/gif",
+  "image/jpeg",
+  "image/x-icon",
+  "image/png",
+  "image/svg+xml"
+], n = () => ({
+  root: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "center"
+  },
+  img: {
+    display: "block",
+    margin: "auto",
+    maxWidth: "100%",
+    maxHeight: "70vh"
+  }
+});
+function s({ classes: e, className: t, previewSource: a = {} }) {
+  const { src: i } = a;
+  return /* @__PURE__ */ m(r, { className: o(e.root, t), children: /* @__PURE__ */ m("img", { className: e.img, src: i, alt: "" }) });
+}
+const f = g(n, { name: "VdtItemImagePlayer" })(s);
+export {
+  x as ALLOWED_MIME_TYPES,
+  f as default
+};

package/dist/es/item/player/ItemPlayer/ItemPlayer.js

@@ -0,0 +1,172 @@
+import { jsxs as g, jsx as o, Fragment as S } from "react/jsx-runtime";
+import { useState as et, useMemo as w } from "react";
+import Y from "clsx";
+import { withStyles as M, FormControl as ot, InputLabel as nt, Select as at, MenuItem as it } from "@material-ui/core";
+import { Skeleton as lt } from "@material-ui/lab";
+import { filterShapeSource as ct, getShapeMediaType as N } from "@vidispine/vdt-js";
+import ut, { ALLOWED_MIME_TYPES as dt } from "../ItemAudioPlayer.js";
+import st, { ALLOWED_MIME_TYPES as mt } from "../ItemImagePlayer.js";
+import ft, { ALLOWED_MIME_TYPES as St } from "../ItemVideoPlayer.js";
+const ht = [...St, ...mt, ...dt], p = "IMAGE", h = "AUDIO", T = "VIDEO", gt = "DOCUMENT", Mt = "BINARY", Et = (t) => t.height ? t.fieldOrder ? `${t.tag} (${t.height}${t.fieldOrder[0]})` : `${t.tag} (${t.height}x${t.width})` : t.audioFormat ? t.containerFormat !== t.audioFormat ? `${t.tag} (${t.audioFormat} - ${t.containerFormat})` : `${t.tag} (${t.audioFormat})` : t.tag, Pt = (t) => {
+  const i = (l) => l.split(":").reduce((n, c) => 60 * n + Number(c));
+  if (t.timeCode)
+    return Math.floor(t.timeCode.toSeconds());
+  if (t.duration)
+    return i(t.duration);
+}, It = M(
+  {},
+  { name: "VdtSourceSelection" }
+)(({ value: t, onChange: i, options: l, previewSourceText: n = "Preview Source" }) => {
+  const c = l.find((u) => u.label === t.label);
+  return /* @__PURE__ */ g(ot, { variant: "standard", fullWidth: !0, children: [
+    /* @__PURE__ */ o(nt, { children: n }),
+    /* @__PURE__ */ o(at, { value: c, onChange: i, children: l.map((u) => /* @__PURE__ */ o(it, { value: u, children: u.label }, u.src)) })
+  ] });
+}), Lt = M(
+  {},
+  { name: "VdtLoadingPlayer" }
+)((t) => /* @__PURE__ */ o(lt, { variant: "rect", width: "100%", height: 520, ...t })), yt = M(
+  (t) => ({
+    root: {
+      backgroundColor: t.palette.divider,
+      width: "100%",
+      height: 520,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    label: {
+      ...t.typography.button
+    }
+  }),
+  { name: "VdtNoPreviewPlayer" }
+)(({ className: t, classes: i, label: l = "No Previews" }) => /* @__PURE__ */ o("div", { className: Y(i.root, t), children: /* @__PURE__ */ o("div", { className: i.label, children: l }) })), pt = () => ({
+  root: {}
+});
+function Tt({
+  className: t,
+  classes: i = {},
+  itemId: l,
+  videoEl: n,
+  itemType: c,
+  isLoading: u,
+  subtitleGroup: x = "stl_subtitle",
+  subtitleField: F = "stl_text",
+  sampleRate: W = "PAL",
+  allowedMimeTypes: E = ht,
+  additionalMimeTypes: P = [],
+  // extends the default set
+  LoadingPlayerComponent: V = Lt,
+  NoPreviewPlayerComponent: j = yt,
+  ItemImagePlayerComponent: I = st,
+  ItemAudioPlayerComponent: L = ut,
+  ItemVideoPlayerComponent: y = ft,
+  ItemBinaryPlayerComponent: D,
+  onReady: _,
+  onCinema: C,
+  onScreenshot: U,
+  width: O = "100%",
+  sourceTag: m = "original",
+  SourceSelectionComponent: v = It,
+  videoPlayerProps: B = {},
+  audioPlayerProps: k = {},
+  shapeToLabel: A = Et,
+  ItemVideoPlayerProps: G = {},
+  ItemBinaryPlayerProps: R = {},
+  LoadingPlayerProps: q = {},
+  NoPreviewPlayerProps: z = {},
+  ...H
+}) {
+  const [d, J] = et(), e = w(() => ct(c, {
+    allowedMimeTypes: [...E, ...P]
+  }).map((s) => ({
+    ...s,
+    label: A(s.shape)
+  })), [c, E, P, A]), a = w(() => {
+    if (d)
+      return N(d.shape);
+    if (e && e.length > 0)
+      return N(e[0].shape);
+  }, [d, e]), K = ({ target: { value: f } }) => {
+    const { src: s, shape: X, type: Z } = f;
+    if (a === T || a === h) {
+      const r = n && n.current && n.current.player && n.current.player.videojs;
+      if (!r || r.currentSrc() === s)
+        return;
+      const tt = r.paused(), rt = r.currentTime(), $ = Math.floor(r.duration()), b = Pt(X);
+      r.preload === "none" && (r.preload = "metadata"), $ <= b + 2 && $ >= b - 2 ? (r.addClass("vjs-has-started"), r.bigPlayButton.hide(), r.poster(""), r.one("loadedmetadata", () => {
+        r.currentTime(rt), tt || r.play();
+      })) : r.one("loadeddata", () => {
+        r.bigPlayButton.show();
+      }), r.pause(), r.src({ src: s, type: Z.replace("x-", "") });
+    }
+    J(f);
+  }, Q = u || a === void 0 || e.length === 0;
+  return /* @__PURE__ */ o("div", { className: Y(i.root, t, "VdtItemPlayer-root"), children: Q ? (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    /* @__PURE__ */ o(S, { children: u ? /* @__PURE__ */ o(V, { ...q }) : /* @__PURE__ */ o(j, { ...z }) })
+  ) : /* @__PURE__ */ g(S, { children: [
+    (a === p || a === h || a === gt) && /* @__PURE__ */ g(S, { children: [
+      I && a === p && /* @__PURE__ */ o(
+        I,
+        {
+          previewSource: d || e[0],
+          videoEl: n,
+          ...H
+        }
+      ),
+      L && a === h && /* @__PURE__ */ o(
+        L,
+        {
+          videoEl: n,
+          onReady: _,
+          width: O,
+          sourceTag: m,
+          previewSources: e,
+          audioPlayerProps: k
+        }
+      ),
+      v && e.length > 1 && /* @__PURE__ */ o(
+        v,
+        {
+          options: e,
+          value: d || e[0],
+          onChange: K
+        }
+      )
+    ] }),
+    D && a === Mt && /* @__PURE__ */ o(
+      D,
+      {
+        itemId: l,
+        itemType: c,
+        source: d || (e == null ? void 0 : e[0]),
+        sourceTag: m,
+        previewSources: e,
+        ...R
+      }
+    ),
+    y && a === T && /* @__PURE__ */ o(
+      y,
+      {
+        videoEl: n,
+        itemType: c,
+        subtitleGroup: x,
+        subtitleField: F,
+        sampleRate: W,
+        onReady: _,
+        onCinema: C,
+        onScreenshot: U,
+        width: O,
+        sourceTag: m,
+        previewSources: e,
+        videoPlayerProps: B,
+        ...G
+      }
+    )
+  ] }) });
+}
+export {
+  Tt as default,
+  pt as styles
+};

package/dist/es/item/player/ItemPlayer/index.js

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