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

package/dist/es/item/ItemTimespan/components/ConfidenceSlider.js

@@ -0,0 +1,50 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import m from "clsx";
+import { withStyles as s, Typography as f, Slider as p } from "@material-ui/core";
+import u from "../hooks/useConfidenceSlider.js";
+const y = () => ({
+  Typography: {},
+  Slider: {},
+  root: {}
+});
+function h({
+  className: n,
+  classes: e,
+  onChange: r,
+  confidenceText: t = "Confidence",
+  TypographyProps: i = {},
+  SliderProps: a = {}
+}) {
+  const [l, d] = u(r);
+  return /* @__PURE__ */ c("div", { className: m(e.root, n), children: [
+    /* @__PURE__ */ o(
+      f,
+      {
+        className: e.Typography,
+        variant: "caption",
+        gutterBottom: !0,
+        ...i,
+        children: t
+      }
+    ),
+    /* @__PURE__ */ o(
+      p,
+      {
+        className: e.Slider,
+        defaultValue: 0.9,
+        valueLabelDisplay: "auto",
+        step: 0.01,
+        marks: !0,
+        min: 0.9,
+        max: 1,
+        value: l,
+        onChange: d,
+        ...a
+      }
+    )
+  ] });
+}
+const v = s(y, { name: "VdtConfidenceSlider" })(h);
+export {
+  v as default
+};

package/dist/es/item/ItemTimespan/components/EditButton.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import l from "clsx";
+import { withStyles as u, Button as d } from "@material-ui/core";
+import { NotInterested as f, AddCircleOutline as p } from "@material-ui/icons";
+const a = {
+  Button: { minWidth: 0 },
+  Icon: {}
+};
+function B({
+  className: o,
+  classes: n,
+  isEditing: e,
+  CloseIcon: i = f,
+  OpenIcon: r = p,
+  onClick: s,
+  ButtonProps: m = { size: "small" }
+}) {
+  const c = e ? i : r;
+  return /* @__PURE__ */ t(d, { className: l(n.Button, o), onClick: s, ...m, children: /* @__PURE__ */ t(c, {}) });
+}
+const C = u(a)(B);
+export {
+  C as default
+};

package/dist/es/item/ItemTimespan/components/ItemTimespanBox.js

@@ -0,0 +1,168 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import P from "clsx";
+import { withStyles as Y, Collapse as q, Divider as I } from "@material-ui/core";
+import z from "../hooks/useItemTimespanBox.js";
+import J from "../hooks/useItemTimespanBoxEdit.js";
+import K from "./ConfidenceSlider.js";
+import M from "./EditButton.js";
+import Q from "./ItemTimespanEdit.js";
+import R from "./ItemTimespanList.js";
+import U from "./ItemTimespanSearchInput.js";
+const V = (t) => ({
+  root: {},
+  header: {
+    display: "flex",
+    alignItems: "baseline",
+    width: "100%"
+  },
+  ItemTimespanList: {
+    overflowY: "scroll",
+    height: `calc(100% - ${t.spacing(6)}px)`,
+    maxHeight: 1080 / 2,
+    "&::-webkit-scrollbar": {
+      WebkitAppearance: "none"
+    },
+    "&::-webkit-scrollbar:vertical": {
+      width: 11
+    },
+    "&::-webkit-scrollbar-thumb": {
+      borderStyle: "solid",
+      borderWidth: 2,
+      borderColor: t.palette.common.white,
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
+    }
+  },
+  EditButton: {},
+  ConfidenceSlider: {
+    alignSelf: "center",
+    flexGrow: 0.5,
+    marginLeft: 5,
+    marginRight: 5
+  },
+  ItemTimespanFilter: {
+    flexGrow: 1,
+    paddingLeft: t.spacing(1),
+    paddingRight: t.spacing(1)
+  },
+  ItemTimespanEdit: {},
+  Collapse: {},
+  Divider: {}
+});
+function X({
+  className: t,
+  classes: i,
+  style: b,
+  itemId: w,
+  itemType: C,
+  onRefresh: c,
+  onError: E,
+  onSuccess: N,
+  videoEl: v = {},
+  subtitleGroup: r = "stl_subtitle",
+  subtitleField: n = "stl_text",
+  aduGroup: o,
+  aduValue: m,
+  aduConfidence: d,
+  sampleRate: p = "PAL",
+  canEdit: a = !0,
+  ConfidenceSliderComponent: f = K,
+  ConfidenceSliderProps: S = {},
+  EditButtonComponent: g = M,
+  EditButtonProps: B = {},
+  ItemTimespanSearchInputComponent: x = U,
+  ItemTimespanSearchInputProps: L = {},
+  ItemTimespanEditComponent: T = Q,
+  ItemTimespanEditProps: k = {},
+  ItemTimespanListComponent: y = R,
+  ItemTimespanListProps: D = {}
+}) {
+  const { video: h, setFilterText: j, setFilterConfidence: A, timespanList: F } = z({
+    itemType: C,
+    videoEl: v,
+    onRefresh: c,
+    field: n,
+    fieldGroup: r,
+    aduGroup: o,
+    aduValue: m,
+    aduConfidence: d
+  }), {
+    isEditing: l,
+    onCancel: O,
+    onToggle: W,
+    onOpen: _,
+    onSuccess: $,
+    initialValues: H
+  } = J({ onRefresh: c, onSuccess: N });
+  return /* @__PURE__ */ s("div", { className: P(i.root, t), style: b, children: [
+    /* @__PURE__ */ s("div", { className: i.header, children: [
+      x && /* @__PURE__ */ e(
+        x,
+        {
+          className: i.ItemTimespanFilter,
+          onChange: j,
+          ...L
+        }
+      ),
+      f && o && /* @__PURE__ */ e(
+        f,
+        {
+          className: i.ConfidenceSlider,
+          onChange: A,
+          ...S
+        }
+      ),
+      g && a && /* @__PURE__ */ e(
+        g,
+        {
+          className: i.EditButton,
+          onClick: W,
+          isEditing: l,
+          ...B
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s(q, { in: l, className: i.Collapse, children: [
+      /* @__PURE__ */ e(I, { className: i.Divider }),
+      T && a && l && /* @__PURE__ */ e(
+        T,
+        {
+          className: i.ItemTimespanEdit,
+          video: h,
+          onSuccess: $,
+          onError: E,
+          onCancel: O,
+          initialValues: H,
+          itemId: w,
+          sampleRate: p,
+          subtitleGroup: r,
+          subtitleField: n,
+          aduGroup: o,
+          aduValue: m,
+          ...k
+        }
+      ),
+      /* @__PURE__ */ e(I, {})
+    ] }),
+    /* @__PURE__ */ e(
+      y,
+      {
+        className: i.ItemTimespanList,
+        timespanList: F,
+        video: h,
+        onEdit: _,
+        canEdit: a,
+        subtitleGroup: r,
+        subtitleField: n,
+        sampleRate: p,
+        aduGroup: o,
+        aduValue: m,
+        aduConfidence: d,
+        ...D
+      }
+    )
+  ] });
+}
+const ai = Y(V, { name: "VdtItemTimespanBox" })(X);
+export {
+  ai as default
+};

package/dist/es/item/ItemTimespan/components/ItemTimespanEdit.js

@@ -0,0 +1,61 @@
+import { jsx as b } from "react/jsx-runtime";
+import h from "clsx";
+import { Form as y } from "react-final-form";
+import { withStyles as L } from "@material-ui/core";
+import _ from "../hooks/useItemTimespanEdit.js";
+import j from "./ItemTimespanForm.js";
+const w = {
+  Form: {}
+};
+function A({
+  className: t,
+  classes: m,
+  itemId: e,
+  sampleRate: i = "PAL",
+  onSuccess: o,
+  onError: s,
+  onCancel: a,
+  video: n,
+  initialValues: r = {},
+  subtitleGroup: p = "stl_subtitle",
+  subtitleField: l = "stl_text",
+  aduGroup: d,
+  aduValue: u,
+  sameAsStartText: f = "Same as start",
+  laterThanEndText: c = "Later than end",
+  FormComponent: I = j,
+  ...T
+}) {
+  const { onSubmit: x, onDelete: E, metadataUuid: F, initialValues: S, timespan: V } = _({
+    itemId: e,
+    video: n,
+    sampleRate: i,
+    onSuccess: o,
+    onError: s,
+    sameAsStartText: f,
+    laterThanEndText: c,
+    ...r
+  });
+  return /* @__PURE__ */ b(
+    y,
+    {
+      className: h(m.Form, t),
+      onSubmit: x,
+      initialValues: S,
+      component: I,
+      onCancel: a,
+      onDelete: E,
+      metadataUuid: F,
+      subtitleGroup: p,
+      subtitleField: l,
+      aduGroup: d,
+      aduValue: u,
+      timespan: V,
+      ...T
+    }
+  );
+}
+const k = L(w, { name: "VdtItemTimespanEdit" })(A);
+export {
+  k as default
+};

package/dist/es/item/ItemTimespan/components/ItemTimespanForm.js

@@ -0,0 +1,97 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { Field as l } from "react-final-form";
+import { withStyles as C, Grid as i, Button as m } from "@material-ui/core";
+import s from "../../../fields/TextField.js";
+const d = (e = "") => {
+  const n = /(^(?:(?:[0-1][0-9]|[0-2][0-3]):)(?:[0-5][0-9]:){2}(?:[0-2][0-9])$)/gi, r = new RegExp(n);
+  return e.match(r) ? void 0 : "Invalid Timecode";
+}, c = (e) => {
+  if (!e)
+    return e;
+  if (e.length >= 11)
+    return e.slice(0, 11);
+  if (e.endsWith(":") || e.split(":").length === 4)
+    return e;
+  const n = e.replace(/[^\d|]/g, "");
+  return n ? n.length <= 8 ? n.match(/.{1,2}/g).join(":") : e.slice(0, 11) : "";
+};
+function F({
+  handleSubmit: e,
+  valid: n,
+  onCancel: r,
+  onDelete: a,
+  metadataUuid: u,
+  subtitleGroup: p = "stl_subtitle",
+  subtitleField: h = "stl_text",
+  startText: f = "Start",
+  endText: g = "End",
+  textText: x = "Text",
+  requiredText: y = "Required",
+  saveText: b = "Save",
+  deleteText: S = "Delete",
+  cancelText: T = "Cancel"
+}) {
+  return /* @__PURE__ */ t("form", { onSubmit: e, children: /* @__PURE__ */ o(i, { container: !0, justifyContent: "space-between", children: [
+    /* @__PURE__ */ o(i, { item: !0, xs: 2, children: [
+      /* @__PURE__ */ t(
+        l,
+        {
+          name: "startSmpte",
+          component: s,
+          type: "text",
+          label: f,
+          variant: "outlined",
+          fullWidth: !0,
+          margin: "dense",
+          validate: d,
+          parse: c
+        }
+      ),
+      /* @__PURE__ */ t(
+        l,
+        {
+          component: s,
+          name: "endSmpte",
+          label: g,
+          variant: "outlined",
+          fullWidth: !0,
+          margin: "dense",
+          validate: d,
+          parse: c
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(i, { item: !0, xs: 8, children: /* @__PURE__ */ t(
+      l,
+      {
+        component: s,
+        name: `${p}.${h}`,
+        label: x,
+        variant: "outlined",
+        fullWidth: !0,
+        margin: "dense",
+        multiline: !0,
+        rows: 6,
+        validate: (j) => j ? void 0 : y
+      }
+    ) }),
+    /* @__PURE__ */ t(i, { item: !0, children: /* @__PURE__ */ o(
+      i,
+      {
+        container: !0,
+        direction: "column",
+        justifyContent: "space-around",
+        style: { height: "100%" },
+        children: [
+          /* @__PURE__ */ t(m, { variant: "outlined", color: "primary", type: "submit", disabled: !n, children: b }),
+          u && /* @__PURE__ */ t(m, { variant: "outlined", color: "secondary", onClick: a, children: S }),
+          /* @__PURE__ */ t(m, { variant: "outlined", onClick: r, children: T })
+        ]
+      }
+    ) })
+  ] }) });
+}
+const $ = C({}, { name: "VdtItemTimespanForm" })(F);
+export {
+  $ as default
+};

package/dist/es/item/ItemTimespan/components/ItemTimespanInterval.js

@@ -0,0 +1,98 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import S from "clsx";
+import { withStyles as N, Grid as n, Typography as e, Box as E, Tooltip as j, Chip as z, Button as G } from "@material-ui/core";
+import { Edit as L } from "@material-ui/icons";
+import V from "../hooks/useItemTimespanInterval.js";
+const _ = (i) => ({
+  root: {
+    transition: "background-color 0.3s ease-out",
+    "&:hover": {
+      backgroundColor: i.palette.type === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"
+    },
+    "&:hover $actions": {
+      visibility: "visible"
+    },
+    minHeight: 50,
+    paddingTop: i.spacing(1),
+    paddingBottom: i.spacing(1),
+    paddingLeft: i.spacing(1),
+    paddingRight: i.spacing(2)
+  },
+  seek: {
+    cursor: "pointer"
+  },
+  actions: {
+    visibility: "hidden"
+  },
+  active: {
+    backgroundColor: i.palette.type === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 0, 0, 0.3)",
+    "&:hover": {
+      backgroundColor: i.palette.type === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.4)"
+    }
+  },
+  chip: {
+    margin: i.spacing(0.5)
+  },
+  actionButton: {
+    minWidth: 0
+  }
+});
+function $({
+  className: i,
+  classes: r,
+  canEdit: m = !0,
+  timespan: u,
+  onSeek: g,
+  onEdit: h,
+  subtitleGroup: v = "stl_subtitle",
+  subtitleField: b = "stl_text",
+  isActive: l = !1,
+  aduGroup: f,
+  aduValue: k,
+  aduConfidence: x
+}) {
+  const { ref: y, start: I, end: w, duration: T, text: C, aduList: o, onSeek: c, onEdit: d } = V({
+    timespan: u,
+    subtitleGroup: v,
+    subtitleField: b,
+    handleOnSeek: g,
+    handleOnEdit: h,
+    isActive: l,
+    aduGroup: f,
+    aduValue: k,
+    aduConfidence: x
+  }), p = o && o.length > 0;
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: S(
+          r.root,
+          {
+            [r.active]: l,
+            [r.seek]: c !== void 0
+          },
+          i
+        ),
+        onClick: c,
+        ref: y,
+        children: /* @__PURE__ */ a(n, { container: !0, alignItems: "flex-start", wrap: "nowrap", children: [
+          /* @__PURE__ */ t(n, { item: !0, children: /* @__PURE__ */ a(n, { container: !0, direction: "column", children: [
+            /* @__PURE__ */ t(e, { variant: "caption", children: I.toSmpte() }),
+            /* @__PURE__ */ t(e, { variant: "caption", children: w.toSmpte() })
+          ] }) }),
+          /* @__PURE__ */ t(n, { item: !0, style: { flexGrow: 1 }, children: /* @__PURE__ */ t(E, { px: 2, children: p ? o.map(({ value: s, confidence: B }) => /* @__PURE__ */ t(j, { title: B, placement: "top", arrow: !0, children: /* @__PURE__ */ t(z, { label: s, variant: "outlined", size: "small", className: r.chip }) }, s)) : /* @__PURE__ */ t(e, { variant: "subtitle2", children: C }) }) }),
+          /* @__PURE__ */ t(n, { item: !0, children: /* @__PURE__ */ a(n, { container: !0, direction: "column", children: [
+            /* @__PURE__ */ t(e, { variant: "caption", children: T.toDuration() }),
+            /* @__PURE__ */ t(n, { container: !0, direction: "row", wrap: "nowrap", className: r.actions, children: m && !p && d && /* @__PURE__ */ t(G, { onClick: d, size: "small", className: r.actionButton, children: /* @__PURE__ */ t(L, {}) }) })
+          ] }) })
+        ] })
+      }
+    )
+  );
+}
+const A = N(_, { name: "VdtItemTimespanInterval" })($);
+export {
+  A as default
+};

package/dist/es/item/ItemTimespan/components/ItemTimespanList.js

@@ -0,0 +1,61 @@
+import { jsx as i, jsxs as L } from "react/jsx-runtime";
+import N from "clsx";
+import { withStyles as h, Divider as j } from "@material-ui/core";
+import D from "../hooks/useItemTimespanList.js";
+import S from "./ItemTimespanInterval.js";
+const k = {
+  root: {},
+  ItemTimespanIntervalContainer: {},
+  ItemTimespanInterval: {},
+  Divider: {}
+};
+function y({
+  classes: e,
+  className: r,
+  canEdit: s = !0,
+  timespanList: m,
+  onEdit: a,
+  video: n,
+  subtitleGroup: o = "stl_subtitle",
+  subtitleField: l = "stl_text",
+  sampleRate: I = "PAL",
+  aduGroup: p,
+  aduValue: v,
+  aduConfidence: d,
+  ItemTimespanIntervalCompoent: c = S,
+  ItemTimespanIntervalProps: T = {}
+}) {
+  const { onSeek: f, activeTimespanIndex: u } = D({ video: n, timespanList: m });
+  return /* @__PURE__ */ i("div", { className: N(e.root, r), children: m.map((t, x) => /* @__PURE__ */ L(
+    "div",
+    {
+      className: e.ItemTimespanIntervalContainer,
+      children: [
+        /* @__PURE__ */ i(
+          c,
+          {
+            className: e.ItemTimespanInterval,
+            timespan: t,
+            onSeek: n ? f : void 0,
+            canEdit: s,
+            onEdit: a,
+            isActive: u === x,
+            subtitleGroup: o,
+            subtitleField: l,
+            sampleRate: I,
+            aduGroup: p,
+            aduValue: v,
+            aduConfidence: d,
+            ...T
+          }
+        ),
+        /* @__PURE__ */ i(j, { className: e.Divider })
+      ]
+    },
+    [t.start, t.end].join()
+  )) });
+}
+const P = h(k, { name: "VdtItemTimespanList" })(y);
+export {
+  P as default
+};

package/dist/es/item/ItemTimespan/components/ItemTimespanSearchInput.js

@@ -0,0 +1,56 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useRef as x, useState as A } from "react";
+import N from "clsx";
+import { withStyles as T, TextField as g, InputAdornment as m, Button as B } from "@material-ui/core";
+import { Search as R, Close as V } from "@material-ui/icons";
+const y = () => ({
+  TextField: {
+    "& .MuiInputLabel-marginDense": {
+      left: "unset"
+    }
+  },
+  InputAdornment: {},
+  Button: { minWidth: 0 },
+  SearchIconComponent: {},
+  CloseIconComponent: {}
+});
+function F({
+  className: i,
+  classes: t,
+  onChange: o,
+  searchText: s = "Search",
+  SearchIconComponent: u = R,
+  CloseIconComponent: p = V,
+  inputRef: c,
+  ...d
+}) {
+  const h = x(), a = c || h, [I, r] = A(!1), f = (n) => {
+    var l;
+    const S = (l = n == null ? void 0 : n.target) == null ? void 0 : l.value;
+    o(n.target.value), r(() => !!S);
+  }, C = () => {
+    o(""), a.current.value = "", r(!1);
+  };
+  return /* @__PURE__ */ e(
+    g,
+    {
+      className: N(t.TextField, i),
+      inputRef: a,
+      label: s,
+      variant: "outlined",
+      onChange: f,
+      fullWidth: !0,
+      margin: "dense",
+      color: "primary",
+      InputProps: {
+        startAdornment: /* @__PURE__ */ e(m, { className: t.InputAdornment, position: "start", children: /* @__PURE__ */ e(u, { className: t.SearchIconComponent }) }),
+        endAdornment: I ? /* @__PURE__ */ e(m, { className: t.InputAdornment, position: "end", children: /* @__PURE__ */ e(B, { className: t.Button, onClick: C, size: "small", children: /* @__PURE__ */ e(p, { className: t.CloseIconComponent }) }) }) : void 0
+      },
+      ...d
+    }
+  );
+}
+const z = T(y, { name: "VdtItemTimespanSearchInput" })(F);
+export {
+  z as default
+};

package/dist/es/item/ItemTimespan/components/ItemTimespanSelection.js

@@ -0,0 +1,27 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import u from "clsx";
+import { withStyles as s, FormControl as p, InputLabel as d, Select as I, MenuItem as h } from "@material-ui/core";
+const S = {
+  FormControl: {},
+  InputLabel: {},
+  Select: {},
+  MenuItem: {}
+};
+function f({
+  className: n,
+  classes: e = {},
+  value: a,
+  handleChange: m,
+  options: r,
+  eventTypeText: o = "Event Type",
+  FormControlProps: c = { variant: "standard", fullWidth: !0 }
+}) {
+  return /* @__PURE__ */ i(p, { className: u(e.FormControl, n), ...c, children: [
+    /* @__PURE__ */ l(d, { className: e.InputLabel, children: o }),
+    /* @__PURE__ */ l(I, { className: e.Select, value: a, onChange: m, children: r.map((t) => /* @__PURE__ */ l(h, { className: e.MenuItem, value: t, children: t.label }, t.label)) })
+  ] });
+}
+const C = s(S, { name: "VdtItemTimespanSelection" })(f);
+export {
+  C as default
+};

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

@@ -0,0 +1,11 @@
+import { useCallback as a, useState as d } from "react";
+import u from "lodash.debounce";
+const l = (e) => {
+  const o = a(u(e, 500), [e]), [c, t] = d(0.5);
+  return [c, (f, n) => {
+    t(n), o(n);
+  }];
+};
+export {
+  l as default
+};

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

@@ -0,0 +1,35 @@
+import { useState as A } from "react";
+import { useGetItem as T } from "@vidispine/vdt-react";
+const C = ({
+  itemId: o,
+  sampleRate: i = "PAL",
+  timespanOptions: u = [{}],
+  queryParams: p
+}) => {
+  const [a, m] = A(u[0]), {
+    value: {
+      subtitleGroup: t = "stl_subtitle",
+      subtitleField: e = "stl_text",
+      aduGroup: s,
+      aduValue: r,
+      aduConfidence: n
+    } = {}
+  } = a, l = {
+    content: "metadata",
+    group: Array.isArray(t) ? [...t, s] : [t, s],
+    field: Array.isArray(e) ? [...e, r, n] : [e, r, n],
+    sampleRate: i,
+    ...p
+  }, { itemType: d, isLoading: c, isError: y, onRefresh: f } = T({ itemId: o, queryParams: l });
+  return {
+    itemType: d,
+    isLoading: c,
+    isError: y,
+    onRefresh: f,
+    onChangeTimespanOption: (g) => m(g.target.value),
+    timespanOption: a
+  };
+};
+export {
+  C as default
+};