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

package/dist/es/item/ItemSourceTable/components/AudioComponentTypeTableBody.js

@@ -0,0 +1,32 @@
+import { jsxs as i, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { useMemo as u } from "react";
+import { withStyles as m, TableBody as n } from "@material-ui/core";
+import { parseAudioComponent as p } from "@vidispine/vdt-js";
+import s from "./TableHead.js";
+import o from "./TableRow.js";
+const b = () => ({
+  TableHeadLabel: {
+    marginTop: "20px",
+    borderBottom: "1px solid rgba(224, 224, 224, 0.5)",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+function c({ classes: t, className: d, audioComponentType: l }) {
+  const a = u(() => p(l), [l]);
+  return /* @__PURE__ */ i(r, { children: [
+    /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e("span", { className: t.TableHeadLabel, children: "Audio Track" }) }),
+    /* @__PURE__ */ i(n, { className: d, children: [
+      /* @__PURE__ */ e(o, { label: "Audio Codec", value: a.audioFormat || a.audioCodec }),
+      /* @__PURE__ */ e(o, { label: "Audio Channels", value: a.audioChannels }),
+      /* @__PURE__ */ e(o, { label: "Audio Sample Rate", value: a.audioSamplerate }),
+      /* @__PURE__ */ e(o, { label: "Audio Bit Rate", value: a.audioBitrate }),
+      /* @__PURE__ */ e(o, { label: "Audio Bit Depth", value: a.audioBitDepth }),
+      /* @__PURE__ */ e(o, { label: "Audio Bit Rate Mode", value: a.audioBitRateMode })
+    ] })
+  ] });
+}
+const v = m(b)(c);
+export {
+  v as default
+};

package/dist/es/item/ItemSourceTable/components/ContainerComponentTypeTableBody.js

@@ -0,0 +1,30 @@
+import { jsxs as r, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import { withStyles as s, TableBody as d } from "@material-ui/core";
+import { parseContainerComponent as p } from "@vidispine/vdt-js";
+import b from "./TableHead.js";
+import n from "./TableRow.js";
+const c = () => ({
+  TableHeadLabel: {
+    borderBottom: "1px solid rgba(224, 224, 224, 1)",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+function f({ classes: t, className: l, containerComponentType: o }) {
+  const a = m(
+    () => p(o),
+    [o]
+  );
+  return /* @__PURE__ */ r(i, { children: [
+    /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e("span", { className: t.TableHeadLabel, children: "Media Container" }) }),
+    /* @__PURE__ */ r(d, { className: l, children: [
+      /* @__PURE__ */ e(n, { label: "Media Container", value: a.containerFormat }),
+      /* @__PURE__ */ e(n, { label: "Duration", value: a.duration })
+    ] })
+  ] });
+}
+const B = s(c)(f);
+export {
+  B as default
+};

package/dist/es/item/ItemSourceTable/components/FileTypeTableBody.js

@@ -0,0 +1,78 @@
+import { jsxs as m, Fragment as h, jsx as l } from "react/jsx-runtime";
+import { withStyles as T, TableBody as g, Box as w, Button as z } from "@material-ui/core";
+import { FileCopy as C } from "@material-ui/icons";
+import { parseFileType as L, parseSimpleMetadataType as j } from "@vidispine/vdt-js";
+import H from "./TableHead.js";
+import a from "./TableRow.js";
+const N = () => ({
+  TableHeadLabel: {
+    marginTop: "20px",
+    paddingBottom: "5px",
+    borderBottom: "1px solid rgba(224, 224, 224, 0.5)",
+    display: "flex",
+    alignItems: "center"
+  },
+  IconLabel: {
+    marginLeft: "60px"
+  },
+  IconLabelName: {
+    marginLeft: "58px"
+  },
+  IconLabelMethod: {
+    marginLeft: "38px"
+  }
+});
+function v({ value: i, ...b }) {
+  return /* @__PURE__ */ l(
+    a,
+    {
+      value: /* @__PURE__ */ m(w, { style: { borderBottom: "1px solid rgba(224, 224, 224, 0.3)", marginBottom: "5px" }, children: [
+        i,
+        /* @__PURE__ */ l(
+          z,
+          {
+            onClick: () => {
+              navigator.clipboard.writeText(i);
+            },
+            children: /* @__PURE__ */ l(C, { fontSize: "small" })
+          }
+        )
+      ] }),
+      ...b
+    }
+  );
+}
+function A({
+  classes: i,
+  className: b,
+  fileType: p,
+  storageListType: c,
+  displayMethodTypes: o,
+  storageMetadataKeys: r
+}) {
+  var x, B;
+  const u = p.storage, F = L(p), { fileSize: f, path: d } = F, S = f === "-1 B" ? "Not Available" : f, e = (x = c == null ? void 0 : c.storage) == null ? void 0 : x.find((n) => n.id === u), I = j(e == null ? void 0 : e.metadata, {
+    joinValue: ",",
+    flat: !0
+  }), t = ((B = e == null ? void 0 : e.method) == null ? void 0 : B.filter(
+    ({ type: n }) => !o || (o == null ? void 0 : o.includes(n))
+  )) || [];
+  return /* @__PURE__ */ m(h, { children: [
+    /* @__PURE__ */ l(H, { children: /* @__PURE__ */ l("span", { className: i.TableHeadLabel, children: "File Component" }) }),
+    /* @__PURE__ */ m(g, { className: b, children: [
+      /* @__PURE__ */ l(v, { label: "File Path", value: d }),
+      /* @__PURE__ */ l(a, { label: "File size", value: S }),
+      /* @__PURE__ */ l(a, { label: "Storage Id", value: u }),
+      r != null && r.length ? r.map((n) => /* @__PURE__ */ l(a, { label: n.label || n.key, value: I[n.key] })) : null,
+      (e == null ? void 0 : e.type) && /* @__PURE__ */ l(a, { label: "Storage Type", value: e.type }),
+      t != null && t.length ? t.map((n) => /* @__PURE__ */ m(h, { children: [
+        /* @__PURE__ */ l(a, { label: "Method Type", value: n.type }),
+        /* @__PURE__ */ l(v, { label: "Storage Uri", value: n.uri + d })
+      ] })) : null
+    ] })
+  ] });
+}
+const q = T(N)(A);
+export {
+  q as default
+};

package/dist/es/item/ItemSourceTable/components/ImageTypeTableBody.js

@@ -0,0 +1,36 @@
+import { jsxs as d, Fragment as p, jsx as r } from "react/jsx-runtime";
+import { useMemo as f, Fragment as g } from "react";
+import { TableBody as c } from "@material-ui/core";
+import { parseVideoComponent as h } from "@vidispine/vdt-js";
+import s from "./TableHead.js";
+import l from "./TableRow.js";
+const u = "EXIF", x = "IPTC", E = "XMP", F = [
+  { prefix: "image_exif_", label: u },
+  { prefix: "image_iptc_", label: x },
+  { prefix: "image_xmp", label: E }
+], _ = ({ videoMetadata: o = {} } = {}) => Object.entries(o).reduce((i, [e, m]) => {
+  const t = F.find(({ prefix: a }) => e.startsWith(a));
+  if (t) {
+    const a = { ...i };
+    return a[t.label] === void 0 && (a[t.label] = {}), a[t.label][e.replace(t.prefix, "")] = m, a;
+  }
+  return i;
+}, {});
+function X({ className: o, videoComponentType: i }) {
+  const e = f(() => h(i), [i]), m = _(e);
+  return /* @__PURE__ */ d(p, { children: [
+    /* @__PURE__ */ r(s, { children: "Image" }),
+    /* @__PURE__ */ d(c, { className: o, children: [
+      /* @__PURE__ */ r(l, { label: "Format", value: e.videoFormat || e.videoCodec }),
+      /* @__PURE__ */ r(l, { label: "Width", value: e.width }),
+      /* @__PURE__ */ r(l, { label: "Height", value: e.height })
+    ] }),
+    Object.entries(m).map(([t, a]) => /* @__PURE__ */ d(g, { children: [
+      /* @__PURE__ */ r(s, { children: t }),
+      /* @__PURE__ */ r(c, { children: Object.entries(a).map(([n, b]) => /* @__PURE__ */ r(l, { label: n.replace("_", " "), value: b }, n)) })
+    ] }, t))
+  ] });
+}
+export {
+  X as default
+};

package/dist/es/item/ItemSourceTable/components/MetadataTypeTableBody.js

@@ -0,0 +1,19 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import { TableBody as p } from "@material-ui/core";
+import { parseMetadataType as f } from "@vidispine/vdt-js";
+import { toCapsCase as n } from "../../../utils.js";
+import o from "./TableRow.js";
+function M({ className: r, metadataType: e }) {
+  const { originalFilename: l, mediaType: i } = m(
+    () => f(e, { joinValue: ",", flat: !0 }),
+    [e]
+  );
+  return /* @__PURE__ */ t(p, { className: r, children: [
+    /* @__PURE__ */ a(o, { label: "Original Filename", value: l }),
+    /* @__PURE__ */ a(o, { label: "Media Type", value: i, formatValue: n })
+  ] });
+}
+export {
+  M as default
+};

package/dist/es/item/ItemSourceTable/components/PdfTypeTableBody.js

@@ -0,0 +1,16 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import { TableBody as m } from "@material-ui/core";
+import { parseVideoComponent as d } from "@vidispine/vdt-js";
+import o from "./TableRow.js";
+function h({ className: r, videoComponentType: t }) {
+  const e = i(() => d(t), [t]);
+  return /* @__PURE__ */ l(m, { className: r, children: [
+    /* @__PURE__ */ a(o, { label: "Pages", value: e.videoMetadata.image_pages }),
+    /* @__PURE__ */ a(o, { label: "Width", value: e.width }),
+    /* @__PURE__ */ a(o, { label: "Height", value: e.height })
+  ] });
+}
+export {
+  h as default
+};

package/dist/es/item/ItemSourceTable/components/ShapeTypeTableBody.js

@@ -0,0 +1,94 @@
+import { jsxs as I, Fragment as c, jsx as r } from "react/jsx-runtime";
+import { useMemo as P } from "react";
+import { TableBody as b } from "@material-ui/core";
+import { parseShapeType as Y } from "@vidispine/vdt-js";
+import h from "./AudioComponentTypeTableBody.js";
+import B from "./ContainerComponentTypeTableBody.js";
+import _ from "./FileTypeTableBody.js";
+import F from "./ImageTypeTableBody.js";
+import g from "./PdfTypeTableBody.js";
+import A from "./TableRow.js";
+import C from "./VideoComponentTypeTableBody.js";
+const a = "VIDEO_MEDIATYPE", d = "AUDIO_MEDIATYPE", D = "IMAGE_MEDIATYPE", M = "PDF_MEDIATYPE", O = "BINARY_MEDIATYPE", S = ({
+  mimeType: p = [],
+  containerComponent: n,
+  audioComponent: o,
+  videoComponent: i,
+  binaryComponent: E
+} = {}) => {
+  const [m] = p;
+  if (m) {
+    if (m.startsWith("video"))
+      return a;
+    if (m.startsWith("audio"))
+      return d;
+    if (m.startsWith("image"))
+      return D;
+  }
+  if (n && n.format === "PDF")
+    return M;
+  if (o && i)
+    return a;
+  if (o)
+    return d;
+  if (i && i.length) {
+    const [T] = i;
+    return T.duration ? a : D;
+  }
+  if (E)
+    return O;
+};
+function w({
+  shapeActualSize: p,
+  className: n,
+  shapeType: o,
+  storageListType: i,
+  displayMethodTypes: E,
+  storageMetadataKeys: m,
+  showFiles: T = !0
+}) {
+  const f = P(() => Y(o), [o]), {
+    containerComponent: l,
+    videoComponent: u = [],
+    audioComponent: y = []
+  } = o, t = S(o), s = l == null ? void 0 : l.file;
+  return /* @__PURE__ */ I(c, { children: [
+    /* @__PURE__ */ I(b, { className: n, children: [
+      f.mimeType && /* @__PURE__ */ r(A, { label: "Mime-Type", value: f.mimeType }),
+      f.fileSize && /* @__PURE__ */ I(c, { children: [
+        /* @__PURE__ */ r(A, { label: "File Size", value: p }),
+        /* @__PURE__ */ r(A, { label: "Checksum", value: f.hash })
+      ] })
+    ] }),
+    (t === a || t === d) && /* @__PURE__ */ r(B, { containerComponentType: l }),
+    t === a && u.map((e) => /* @__PURE__ */ r(
+      C,
+      {
+        videoComponentType: e
+      },
+      e.id
+    )),
+    (t === a || t === d) && y.map((e) => /* @__PURE__ */ r(
+      h,
+      {
+        audioComponentType: e
+      },
+      e.id
+    )),
+    T && (s == null ? void 0 : s.map((e) => /* @__PURE__ */ r(
+      _,
+      {
+        fileType: e,
+        storageListType: i,
+        displayMethodTypes: E,
+        storageMetadataKeys: m
+      },
+      `file-${e.id}`
+    ))),
+    t === D && u.map((e) => /* @__PURE__ */ r(F, { videoComponentType: e }, e.id)),
+    t === M && u.map((e) => /* @__PURE__ */ r(g, { videoComponentType: e }, e.id))
+  ] });
+}
+export {
+  w as default
+};

package/dist/es/item/ItemSourceTable/components/TableHead.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+import { TableHead as l, TableRow as r, TableCell as o } from "@material-ui/core";
+function t({ children: a }) {
+  return /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(o, { colSpan: 2, children: a }) }) });
+}
+export {
+  t as default
+};

package/dist/es/item/ItemSourceTable/components/TableRow.js

@@ -0,0 +1,23 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { withStyles as d, TableRow as i, TableCell as a } from "@material-ui/core";
+const y = (l) => ({
+  TableCellLabel: {
+    borderStyle: "none",
+    ...l.typography.body2
+  },
+  TableCellValue: {
+    borderStyle: "none",
+    wordBreak: "break-all",
+    ...l.typography.subtitle2
+  }
+});
+function T({ classes: l, label: r, value: e, formatValue: t = (s) => s, ...b }) {
+  return /* @__PURE__ */ n(i, { ...b, children: [
+    /* @__PURE__ */ o(a, { classes: { root: l.TableCellLabel }, children: r }),
+    /* @__PURE__ */ o(a, { classes: { root: l.TableCellValue }, children: e !== void 0 ? t(e) : "" })
+  ] });
+}
+const w = d(y)(T);
+export {
+  w as default
+};

package/dist/es/item/ItemSourceTable/components/VideoComponentTypeTableBody.js

@@ -0,0 +1,37 @@
+import { jsxs as r, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import { withStyles as p, TableBody as s } from "@material-ui/core";
+import { parseVideoComponent as b } from "@vidispine/vdt-js";
+import { toCapsCase as n } from "../../../utils.js";
+import c from "./TableHead.js";
+import l from "./TableRow.js";
+const u = () => ({
+  TableHeadLabel: {
+    marginTop: "20px",
+    borderBottom: "1px solid rgba(224, 224, 224, 0.5)",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+function f({ classes: t, className: i, videoComponentType: o }) {
+  const a = m(() => b(o), [o]);
+  return /* @__PURE__ */ r(d, { children: [
+    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e("span", { className: t.TableHeadLabel, children: "Video Track" }) }),
+    /* @__PURE__ */ r(s, { className: i, children: [
+      /* @__PURE__ */ e(l, { label: "Video Codec", value: a.videoFormat || a.videoCodec }),
+      /* @__PURE__ */ e(l, { label: "SMPTE", value: a.smpte }),
+      /* @__PURE__ */ e(l, { label: "Frame Rate", value: a.frameRate }),
+      /* @__PURE__ */ e(l, { label: "Width", value: a.width }),
+      /* @__PURE__ */ e(l, { label: "Height", value: a.height }),
+      /* @__PURE__ */ e(l, { label: "Aspect Ratio", value: a.aspectRatio }),
+      /* @__PURE__ */ e(l, { label: "Video Bitrate", value: a.videoBitrate }),
+      /* @__PURE__ */ e(l, { label: "Color Space", value: a.colorSpace }),
+      /* @__PURE__ */ e(l, { label: "Chroma Subsampling", value: a.chromaSubsampling }),
+      /* @__PURE__ */ e(l, { label: "Field Order", value: a.fieldOrder, formatValue: n })
+    ] })
+  ] });
+}
+const x = p(u)(f);
+export {
+  x as default
+};

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

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

package/dist/es/item/ItemTable.js

@@ -0,0 +1,36 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { Table as u, TableHead as x, TableRow as I, TableCell as o, Hidden as j, TableBody as p } from "@material-ui/core";
+import w from "./ItemRow.js";
+function g({
+  itemListType: c = {},
+  RowComponent: m = w,
+  options: e = [],
+  onCheck: i,
+  selected: r,
+  onRowClick: s,
+  ...t
+}) {
+  const { item: n = [] } = c;
+  return /* @__PURE__ */ a(u, { size: "small", children: [
+    /* @__PURE__ */ l(x, { children: /* @__PURE__ */ a(I, { children: [
+      i && /* @__PURE__ */ l(o, { padding: "checkbox" }),
+      e.map(({ label: d, value: b, hide: h }, f) => /* @__PURE__ */ l(j, { only: h, children: /* @__PURE__ */ l(o, { children: d }) }, d || b || f))
+    ] }) }),
+    /* @__PURE__ */ l(p, { children: n && n.map((d) => /* @__PURE__ */ l(
+      m,
+      {
+        itemType: d,
+        itemId: d.id,
+        options: e,
+        onCheck: i,
+        selected: r && r.includes(d.id),
+        onClick: () => s(d),
+        ...t
+      },
+      d.id
+    )) })
+  ] });
+}
+export {
+  g as default
+};

package/dist/es/item/ItemTabs/ItemTabs.js

@@ -0,0 +1,80 @@
+import { jsxs as f, Fragment as d, jsx as s } from "react/jsx-runtime";
+import { useState as h } from "react";
+import e from "prop-types";
+import { Divider as P } from "@material-ui/core";
+import g from "./components/Tab.js";
+import v from "./components/TabPanel.js";
+import y from "./components/Tabs.js";
+const S = () => ({
+  root: {}
+});
+function l({
+  classes: j,
+  className: O,
+  tabs: t = [],
+  TabsProps: m,
+  TabPanelProps: p,
+  defaultTab: b,
+  ...c
+}) {
+  const [r, i] = h(b);
+  return /* @__PURE__ */ f(d, { children: [
+    /* @__PURE__ */ s(
+      y,
+      {
+        value: r,
+        onChange: (a, o) => {
+          i(o);
+        },
+        variant: "scrollable",
+        scrollButtons: "auto",
+        ...m,
+        children: t.map(({ label: a }, o) => /* @__PURE__ */ s(g, { label: a, value: o }, a))
+      }
+    ),
+    /* @__PURE__ */ s(P, {}),
+    t.map(({ component: a, label: o, hideOnMount: u = !0, ...T }, n) => /* @__PURE__ */ s(
+      v,
+      {
+        currentTab: r,
+        hideOnMount: u,
+        value: n,
+        ...p,
+        children: /* @__PURE__ */ s(a, { hidden: n !== r, ...c, ...T })
+      },
+      o
+    ))
+  ] });
+}
+l.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  defaultTab: e.number,
+  TabsProps: e.objectOf(e.any),
+  TabPanelProps: e.objectOf(e.any),
+  tabs: e.arrayOf(
+    e.shape({
+      label: e.string,
+      hideOnMount: e.bool,
+      component: e.elementType
+    })
+  )
+};
+l.defaultProps = {
+  className: void 0,
+  classes: {},
+  defaultTab: 0,
+  TabsProps: {},
+  TabPanelProps: {},
+  tabs: []
+};
+export {
+  l as default,
+  S as styles
+};

package/dist/es/item/ItemTabs/components/Tab.js

@@ -0,0 +1,41 @@
+import { withStyles as o, Tab as e } from "@material-ui/core";
+const a = (t) => ({
+  root: {
+    paddingLeft: 0,
+    minHeight: 20,
+    [t.breakpoints.up("sm")]: {
+      minWidth: 0
+    },
+    borderWidth: 1,
+    "&:not(:first-of-type)": {
+      marginLeft: -1
+    },
+    backgroundColor: "unset",
+    "&::after": {
+      color: t.palette.primary.main,
+      transition: "width 0.25s ease-in-out 0.05s",
+      borderBottom: "0.25em solid",
+      width: 0,
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      content: '""'
+    },
+    "&:hover": {
+      opacity: 1,
+      backgroundColor: "unset",
+      "&::after": {
+        width: "calc(100% - 12px)"
+      }
+    }
+  },
+  selected: {
+    backgroundColor: "unset",
+    "&::after": {
+      width: "calc(100% - 12px)"
+    }
+  }
+}), i = o(a, { name: "VdtItemTabTab" })(e);
+export {
+  i as default
+};

package/dist/es/item/ItemTabs/components/TabPanel.js

@@ -0,0 +1,16 @@
+import { jsx as r } from "react/jsx-runtime";
+import s from "clsx";
+import { withStyles as i } from "@material-ui/core";
+const m = (o) => ({
+  root: {
+    paddingTop: o.spacing(1),
+    display: ({ value: t, currentTab: a }) => t !== a ? "none" : "block"
+  }
+});
+function p({ className: o, classes: t, hideOnMount: a = !0, currentTab: n, value: e, ...l }) {
+  return !a && e !== n ? null : /* @__PURE__ */ r("div", { className: s(t.root, o), ...l });
+}
+const f = i(m, { name: "VdtItemTabTabPanel" })(p);
+export {
+  f as default
+};

package/dist/es/item/ItemTabs/components/Tabs.js

@@ -0,0 +1,16 @@
+import { withStyles as o, Tabs as t } from "@material-ui/core";
+const s = {
+  root: {
+    backgroundColor: "unset",
+    minHeight: 20
+  },
+  indicator: {
+    display: "none"
+  },
+  scrollButtons: {
+    backgroundColor: "unset"
+  }
+}, n = o(s, { name: "VdtItemTabTabs" })(t);
+export {
+  n as default
+};

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

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

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

@@ -0,0 +1,67 @@
+import { jsxs as B, jsx as r } from "react/jsx-runtime";
+import v from "clsx";
+import N from "./components/ItemTimespanBox.js";
+import j from "./components/ItemTimespanSelection.js";
+import y from "./hooks/useItemTimespan.js";
+const P = (o) => ({
+  root: {},
+  ItemTimespanSelection: {
+    marginBottom: o.spacing(1)
+  },
+  ItemTimespanBox: {}
+});
+function V({
+  className: o,
+  classes: m,
+  style: s,
+  itemId: t,
+  videoEl: p,
+  sampleRate: n = "PAL",
+  timespanOptions: e,
+  queryParams: c,
+  onError: l,
+  onSuccess: T,
+  ItemTimespanSelectionComponent: i = j,
+  ItemTimespanSelectionProps: f = {},
+  ItemTimespanBoxComponent: u = N,
+  ItemTimespanBoxProps: x = {}
+}) {
+  const { onChangeTimespanOption: h, timespanOption: a, itemType: I, onRefresh: g } = y({
+    itemId: t,
+    queryParams: c,
+    sampleRate: n,
+    timespanOptions: e
+  }), { value: d = {} } = a || {};
+  return /* @__PURE__ */ B("div", { className: v(m.root, o), style: s, children: [
+    i && e && e.length > 1 && /* @__PURE__ */ r(
+      i,
+      {
+        options: e,
+        value: a,
+        handleChange: h,
+        className: m.ItemTimespanSelection,
+        ...f
+      }
+    ),
+    /* @__PURE__ */ r(
+      u,
+      {
+        className: m.ItemTimespanBox,
+        videoEl: p,
+        sampleRate: n,
+        canEdit: !0,
+        onRefresh: g,
+        onError: l,
+        onSuccess: T,
+        itemId: t,
+        itemType: I,
+        ...d,
+        ...x
+      }
+    )
+  ] });
+}
+export {
+  V as default,
+  P as styles
+};