@ynput/ayon-frontend-shared 0.7.5 → 0.8.0

package/dist/chunks/TableSettingsFallback.es.js

@@ -8,17 +8,16 @@ import "react-toastify";
 import "./searchTerms.es.js";
 import "./getUris.es.js";
 import "primereact/confirmdialog";
-import { b as c } from "./TableExportContextInstance.es.js";
 import "lodash";
 import "uuid";
 import "axios";
+import { b as c } from "./TableExportContextInstance.es.js";
 import "semver";
 import "./ContextMenuContextInstance.es.js";
 import "clsx";
 import "react-dom";
-import "react-redux";
 import "react-router-dom";
-const D = ({
+const C = ({
   requiredVersion: r,
   feature: t,
   button: i,
@@ -40,5 +39,5 @@ const D = ({
   ] });
 };
 export {
-  D as T
+  C as T
 };

package/dist/chunks/ThumbnailSimple.es.js

@@ -1,40 +1,39 @@
 import { jsxs as m, jsx as i } from "react/jsx-runtime";
-import { createPortal as R } from "react-dom";
-import { createContext as z, useContext as L, useEffect as F } from "react";
-import { bH as $, a_ as j } from "./searchTerms.es.js";
-import { H as A } from "./getUris.es.js";
+import { createPortal as L } from "react-dom";
+import { createContext as $, useContext as A, useEffect as j } from "react";
+import { bH as B, a_ as N } from "./searchTerms.es.js";
+import { H as U } from "./getUris.es.js";
 import "primereact/confirmdialog";
 import "lodash";
-import { e as N } from "./expandRelativeDates.es.js";
+import { e as O } from "./expandRelativeDates.es.js";
 import "@module-federation/enhanced/runtime";
 import "@ynput/ayon-addon/host";
 import "react-toastify";
-import { Icon as w, Dialog as B, FormRow as v, InputDate as x, SaveButton as U } from "@ynput/ayon-react-components";
-import "./TableExportContextInstance.es.js";
+import { Icon as w, Dialog as K, FormRow as g, InputDate as x, SaveButton as P } from "@ynput/ayon-react-components";
 import "uuid";
 import "axios";
+import "./TableExportContextInstance.es.js";
 import "semver";
 import "./ContextMenuContextInstance.es.js";
 import "clsx";
-import "react-redux";
 import "react-router-dom";
-import { U as O } from "./PlayableIcon.es.js";
-import p, { keyframes as K } from "styled-components";
-import { E as P } from "./EntityTooltip.es.js";
+import { U as Y, F as D } from "./FilmstripEntityCard.es.js";
+import p, { keyframes as H } from "styled-components";
+import { E as q } from "./EntityTooltip.es.js";
 import { format as b, parse as k } from "date-fns";
-import { g as H } from "./getThumbnailUrl.es.js";
-const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
+import { g as Q, a as W } from "./getThumbnailUrl.es.js";
+const G = new Set(Object.keys(U).filter((e) => e !== "activity")), J = {
   has_attachments: "activity_data.files",
   // not `entity_type`: on inbox rows that column is always 'user'
   origin_type: "activity_data.origin.type"
-}, q = (e) => !!e && "key" in e, Q = (e) => {
-  const o = D[e.key] ?? e.key;
+}, V = (e) => !!e && "key" in e, X = (e) => {
+  const o = J[e.key] ?? e.key;
   if (e.key === "has_attachments")
     return e.value ? { key: o, operator: "ne", value: [] } : null;
   if (e.key === "in_review_session")
     return e.value ? { key: "activity_data.entityList", operator: "notnull" } : null;
   if (e.key === "category") {
-    const t = Array.isArray(e.value) ? e.value : [], n = t.includes("__none__"), s = t.filter((a) => a !== "__none__"), l = {
+    const t = Array.isArray(e.value) ? e.value : [], n = t.includes("__none__"), s = t.filter((r) => r !== "__none__"), l = {
       operator: "or",
       conditions: [
         { key: "activity_data.category", operator: "isnull" },
@@ -47,37 +46,37 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
     };
     return n && s.length ? { operator: "or", conditions: [l, c] } : n ? l : s.length ? c : null;
   }
-  return e.key === "body" && e.operator === "like" && typeof e.value == "string" ? $(e.value, (t) => ({ ...e, key: o, value: `%${t}%` })) : e.key === "author" ? {
+  return e.key === "body" && e.operator === "like" && typeof e.value == "string" ? B(e.value, (t) => ({ ...e, key: o, value: `%${t}%` })) : e.key === "author" ? {
     operator: "or",
     conditions: [
       { ...e, key: "activity_data.author" },
       { ...e, key: "activity_data.assignee" }
     ]
   } : { ...e, key: o };
-}, C = (e) => {
-  if (q(e))
-    return Y.has(e.key) ? null : Q(e);
-  const o = (e.conditions || []).map((t) => C(t)).filter((t) => t !== null);
+}, E = (e) => {
+  if (V(e))
+    return G.has(e.key) ? null : X(e);
+  const o = (e.conditions || []).map((t) => E(t)).filter((t) => t !== null);
   return o.length === 0 ? null : { operator: e.operator || "and", conditions: o };
-}, W = (e) => {
+}, Z = (e) => {
   if (!e || !e.conditions?.length) return null;
-  const o = N(e), t = C(o);
+  const o = O(e), t = E(o);
   return t || null;
-}, Ne = (e) => {
-  const o = W(e);
+}, Ke = (e) => {
+  const o = Z(e);
   if (o)
     return JSON.stringify(o);
-}, G = z(void 0), g = () => {
-  const e = L(G);
+}, ee = $(void 0), v = () => {
+  const e = A(ee);
   if (!e)
     throw new Error("useFeedContext must be used within a FeedProvider");
   return e;
-}, J = () => {
-  const { refTooltip: e, setRefTooltip: o } = g();
+}, te = () => {
+  const { refTooltip: e, setRefTooltip: o } = v();
   return [e, (n) => {
     n && n.id !== e?.id && o(n), n || o(null);
   }];
-}, V = p.span`
+}, oe = p.span`
   display: flex;
   align-items: center;
   gap: var(--base-gap-large);
@@ -94,7 +93,7 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
   span {
     white-space: nowrap;
   }
-`, X = p.span`
+`, ne = p.span`
   display: flex;
   flex-direction: column;
 
@@ -102,13 +101,13 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
     color: var(--md-sys-color-outline);
     font-size: 0.85em;
   }
-`, E = ({ name: e, fullName: o, showSubtitle: t, size: n = 24 }) => /* @__PURE__ */ m(V, { $size: n, children: [
-  /* @__PURE__ */ i(O, { name: e, size: n }),
-  t ? /* @__PURE__ */ m(X, { children: [
+`, C = ({ name: e, fullName: o, showSubtitle: t, size: n = 24 }) => /* @__PURE__ */ m(oe, { $size: n, children: [
+  /* @__PURE__ */ i(Y, { name: e, size: n }),
+  t ? /* @__PURE__ */ m(ne, { children: [
     /* @__PURE__ */ i("span", { children: o || e }),
     o && /* @__PURE__ */ i("span", { className: "label", children: e })
   ] }) : /* @__PURE__ */ i("span", { children: o || e })
-] }), Z = K`
+] }), ie = H`
     from {
         opacity: 0.4;
         scale: 0.9;
@@ -117,7 +116,7 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
         opacity: 1;
         scale: 1;
     }
-`, T = p.span`
+`, M = p.span`
   display: flex;
   padding: 8px;
   gap: var(--base-gap-large);
@@ -141,14 +140,14 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
     }
   }
 
-  animation: ${Z} 50ms ease-out;
+  animation: ${ie} 50ms ease-out;
   transform-origin: left bottom;
-`, ee = ({ name: e, label: o, pos: t }) => /* @__PURE__ */ i(T, { style: { ...t }, children: /* @__PURE__ */ i(E, { name: e || "", fullName: o, showSubtitle: !0, size: 32 }) }), te = p(T)`
+`, re = ({ name: e, label: o, pos: t }) => /* @__PURE__ */ i(M, { style: { ...t }, children: /* @__PURE__ */ i(C, { name: e || "", fullName: o, showSubtitle: !0, size: 32 }) }), ae = p(M)`
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
   min-width: 180px;
-`, oe = p.span`
+`, se = p.span`
   display: flex;
   align-items: center;
   gap: var(--base-gap-large);
@@ -156,7 +155,7 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
   .icon {
     font-size: 20px;
   }
-`, ne = p.span`
+`, le = p.span`
   display: flex;
   flex-direction: column;
 
@@ -168,7 +167,7 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
     color: var(--md-sys-color-outline);
     font-size: 0.85em;
   }
-`, ie = p.ul`
+`, ce = p.ul`
   list-style: none;
   margin: 0;
   padding: 0;
@@ -176,50 +175,50 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
   flex-direction: column;
   gap: 4px;
   width: 100%;
-`, re = p.li`
+`, de = p.li`
   display: flex;
   align-items: center;
-`, ae = p.span`
+`, pe = p.span`
   color: var(--md-sys-color-outline);
   font-size: 0.85em;
   padding-left: 32px;
-`, _ = 5, se = ({ name: e, pos: o }) => {
-  const { projectName: t, users: n } = g(), { data: s = [] } = j.useGetTeamsQuery(
+`, _ = 5, me = ({ name: e, pos: o }) => {
+  const { projectName: t, users: n } = v(), { data: s = [] } = N.useGetTeamsQuery(
     { projectName: t, showMembers: !0 },
     { skip: !t || !e }
-  ), l = s.find((d) => d.name === e), c = l?.members ?? [], a = l?.memberCount ?? 0, r = c.slice(0, _), u = Math.max(0, a - _), f = new Map(n.map((d) => [d.name, d.attrib?.fullName || void 0]));
-  return /* @__PURE__ */ m(te, { style: { ...o }, children: [
-    /* @__PURE__ */ m(oe, { children: [
+  ), l = s.find((d) => d.name === e), c = l?.members ?? [], r = l?.memberCount ?? 0, a = c.slice(0, _), u = Math.max(0, r - _), f = new Map(n.map((d) => [d.name, d.attrib?.fullName || void 0]));
+  return /* @__PURE__ */ m(ae, { style: { ...o }, children: [
+    /* @__PURE__ */ m(se, { children: [
       /* @__PURE__ */ i(w, { icon: "group" }),
-      /* @__PURE__ */ m(ne, { children: [
+      /* @__PURE__ */ m(le, { children: [
         /* @__PURE__ */ i("span", { children: e }),
         l && /* @__PURE__ */ m("span", { className: "label", children: [
-          a,
+          r,
           " ",
-          a === 1 ? "member" : "members"
+          r === 1 ? "member" : "members"
         ] })
       ] })
     ] }),
-    r.length > 0 && /* @__PURE__ */ m(ie, { children: [
-      r.map((d) => /* @__PURE__ */ i(re, { children: /* @__PURE__ */ i(
-        E,
+    a.length > 0 && /* @__PURE__ */ m(ce, { children: [
+      a.map((d) => /* @__PURE__ */ i(de, { children: /* @__PURE__ */ i(
+        C,
         {
           name: d.name,
           fullName: f.get(d.name),
           size: 20
         }
       ) }, d.name)),
-      u > 0 && /* @__PURE__ */ m(ae, { children: [
+      u > 0 && /* @__PURE__ */ m(pe, { children: [
         "+",
         u,
         " more"
       ] })
     ] })
   ] });
-}, le = ({ type: e, id: o, pos: t }) => {
-  const { projectInfo: n, projectName: s } = g();
+}, ue = ({ type: e, id: o, pos: t }) => {
+  const { projectInfo: n, projectName: s } = v();
   return /* @__PURE__ */ i(
-    P,
+    q,
     {
       entityType: e,
       entityId: o,
@@ -228,27 +227,27 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
       pos: t
     }
   );
-}, Be = () => {
-  const [e, o] = J(), { type: t, label: n, name: s, pos: l, id: c } = e || {}, a = document.querySelector(".feed ul");
-  return F(() => {
+}, Pe = () => {
+  const [e, o] = te(), { type: t, label: n, name: s, pos: l, id: c } = e || {}, r = document.querySelector(".feed ul");
+  return j(() => {
     if (c) {
-      const r = (u) => {
-        const f = u.target, d = CSS.escape(`ref-${c.replaceAll(".", "-")}`), y = f?.closest(`#${d}`), h = f?.closest("[data-mention-value], .reference");
-        !y && !h && (o(null), document.removeEventListener("mouseover", r), a && a.removeEventListener("scroll", r));
+      const a = (u) => {
+        const f = u.target, d = CSS.escape(`ref-${c.replaceAll(".", "-")}`), h = f?.closest(`#${d}`), y = f?.closest("[data-mention-value], .reference");
+        !h && !y && (o(null), document.removeEventListener("mouseover", a), r && r.removeEventListener("scroll", a));
       };
-      return document.addEventListener("mouseover", r), a && a.addEventListener("scroll", r), () => {
-        document.removeEventListener("mouseover", r), a && a.removeEventListener("scroll", r);
+      return document.addEventListener("mouseover", a), r && r.addEventListener("scroll", a), () => {
+        document.removeEventListener("mouseover", a), r && r.removeEventListener("scroll", a);
       };
     }
-  }, [c, o, a]), c ? R(
-    t === "user" && l ? /* @__PURE__ */ i(ee, { name: s, label: n, pos: l }) : t === "team" && l ? /* @__PURE__ */ i(se, { name: s, pos: l }) : /* @__PURE__ */ i(le, { type: t, label: n, name: s, pos: l, id: c }),
+  }, [c, o, r]), c ? L(
+    t === "user" && l ? /* @__PURE__ */ i(re, { name: s, label: n, pos: l }) : t === "team" && l ? /* @__PURE__ */ i(me, { name: s, pos: l }) : /* @__PURE__ */ i(ue, { type: t, label: n, name: s, pos: l, id: c }),
     document.body
   ) : null;
-}, ce = p.div`
+}, fe = p.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
-`, Ue = ({
+`, Ye = ({
   isOpen: e,
   header: o,
   startDate: t,
@@ -256,17 +255,17 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
   onStartDateChange: s,
   onEndDateChange: l,
   onApply: c,
-  onClose: a
+  onClose: r
 }) => /* @__PURE__ */ i(
-  B,
+  K,
   {
     isOpen: e,
-    onClose: a,
+    onClose: r,
     header: o,
     size: "sm",
     hideCancelButton: !0,
     footer: /* @__PURE__ */ i(
-      U,
+      P,
       {
         label: "Confirm",
         icon: "check",
@@ -274,26 +273,26 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
         active: !!t && !!n && n >= t
       }
     ),
-    children: /* @__PURE__ */ m(ce, { children: [
-      /* @__PURE__ */ i(v, { label: "Start date", children: /* @__PURE__ */ i(
+    children: /* @__PURE__ */ m(fe, { children: [
+      /* @__PURE__ */ i(g, { label: "Start date", children: /* @__PURE__ */ i(
         x,
         {
           selected: t ? k(t, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : void 0,
-          onChange: (r) => s(r ? b(r, "yyyy-MM-dd") : ""),
+          onChange: (a) => s(a ? b(a, "yyyy-MM-dd") : ""),
           autoFocus: !0
         }
       ) }),
-      /* @__PURE__ */ i(v, { label: "End date", children: /* @__PURE__ */ i(
+      /* @__PURE__ */ i(g, { label: "End date", children: /* @__PURE__ */ i(
         x,
         {
           selected: n ? k(n, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : void 0,
-          onChange: (r) => l(r ? b(r, "yyyy-MM-dd") : ""),
+          onChange: (a) => l(a ? b(a, "yyyy-MM-dd") : ""),
           openToDate: t ? new Date(t) : void 0
         }
       ) })
     ] })
   }
-), de = p.div`
+), ye = p.div`
   position: relative;
   width: 100%;
   max-width: 500px;
@@ -315,7 +314,13 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
     background-color: hsl(220 20% 8%);
     color: var(--md-sys-color-outline);
   }
-`, pe = p.img`
+
+  /* the hover-scrub filmstrip replaces the static image */
+  &[data-filmstrip-active] > img,
+  &[data-filmstrip-active] > span {
+    visibility: hidden;
+  }
+`, he = p.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -324,7 +329,7 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
   display: block;
   position: absolute;
   inset: 0;
-`, Oe = ({
+`, De = ({
   projectName: e,
   entityType: o,
   entityId: t,
@@ -332,38 +337,48 @@ const Y = new Set(Object.keys(A).filter((e) => e !== "activity")), D = {
   thumbnailHash: s,
   isLoading: l,
   className: c,
-  disabled: a,
-  src: r,
+  disabled: r,
+  src: a,
   onLoad: u,
   onError: f,
   iconOnly: d,
-  ...y
+  filmstrip: h,
+  filmstripUrl: y,
+  filmstripFit: T = "contain",
+  ...S
 }) => {
-  const h = H({
+  const F = Q({
     projectName: e,
     entityType: o,
     entityId: t,
     thumbnailHash: s ? String(s) : void 0
-  }), M = o === "project", S = ["product"].includes(o), I = M ? !!e : !!t;
-  return /* @__PURE__ */ m(de, { className: c + " thumbnail", ...y, children: [
-    !l && !a && /* @__PURE__ */ i(w, { icon: n || "image" }),
-    (o && !S && I || r) && !d && /* @__PURE__ */ i(
-      pe,
+  }), R = o === "project", z = ["product"].includes(o), I = R ? !!e : !!t;
+  return /* @__PURE__ */ m(ye, { className: c + " thumbnail", ...S, children: [
+    !l && !r && /* @__PURE__ */ i(w, { icon: n || "image" }),
+    (o && !z && I || a) && !d && /* @__PURE__ */ i(
+      he,
       {
         alt: `Entity thumbnail ${t || e}`,
-        src: r || h || void 0,
+        src: a || F || void 0,
         onLoad: u,
         onError: f
       }
+    ),
+    (h || y) && !l && !r && /* @__PURE__ */ i(
+      D,
+      {
+        src: y || W({ projectName: e, entityType: o, entityId: t, thumbnailHash: s }),
+        fit: T
+      }
     )
   ] });
 };
 export {
-  Be as A,
-  Ue as C,
-  G as F,
-  Oe as T,
-  J as a,
-  Ne as b,
-  g as u
+  Pe as A,
+  Ye as C,
+  ee as F,
+  De as T,
+  te as a,
+  Ke as b,
+  v as u
 };

package/dist/chunks/ThumbnailUploaderContext.es.js

@@ -0,0 +1,48 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { u as f } from "./useCreateContextMenu.es.js";
+import { T as U } from "./TableExportContextInstance.es.js";
+const T = ({
+  children: l,
+  thumbnailInputRef: t,
+  versionsInputRef: e,
+  canUploadVersion: r = !1
+}) => {
+  const [, o] = p(!1), [s] = f(), c = () => o(!1), a = () => {
+    t?.current && (t.current.click(), o(!0));
+  }, n = () => {
+    e?.current && (e.current.click(), o(!0));
+  }, i = (m) => {
+    const u = [
+      {
+        label: "Upload thumbnail",
+        icon: "add_photo_alternate",
+        command: a
+      },
+      ...r ? [
+        {
+          label: "Upload version",
+          icon: "upload",
+          command: n
+        }
+      ] : []
+    ];
+    s(m, u);
+  };
+  return /* @__PURE__ */ d(
+    U.Provider,
+    {
+      value: {
+        resetFileUploadState: c,
+        triggerThumbnailUpload: a,
+        triggerVersionUpload: n,
+        canUploadVersion: r,
+        onContextMenu: i
+      },
+      children: l
+    }
+  );
+};
+export {
+  T
+};

package/dist/chunks/VideoPlayer.es.js

@@ -10,15 +10,14 @@ import "@ynput/ayon-react-components";
 import "./searchTerms.es.js";
 import "./getUris.es.js";
 import "primereact/confirmdialog";
-import { d as D } from "./TableExportContextInstance.es.js";
 import "lodash";
 import "uuid";
 import "axios";
+import { c as D } from "./TableExportContextInstance.es.js";
 import "semver";
 import "./ContextMenuContextInstance.es.js";
 import "clsx";
 import "react-dom";
-import "react-redux";
 import { P as N } from "./Feed.es.js";
 const R = { loop: !0, audio: !0 }, S = 24, T = "h264", L = {
   activityId: "",
@@ -36,13 +35,13 @@ const R = { loop: !0, audio: !0 }, S = 24, T = "h264", L = {
   productAttributes: {},
   taskAttributes: {},
   path: ""
-}, tt = ({
+}, $ = ({
   id: t,
   name: o,
   url: r,
   projectName: e,
-  duration: i,
-  width: s,
+  duration: s,
+  width: i,
   height: a,
   fps: p,
   codec: m
@@ -60,13 +59,13 @@ const R = { loop: !0, audio: !0 }, S = 24, T = "h264", L = {
         position: 0,
         fps: p || S,
         codec: m || T,
-        duration: i,
-        width: s,
+        duration: s,
+        width: i,
         height: a,
         context: L
       }
     ],
-    [t, o, r, i, s, a, p, m]
+    [t, o, r, s, i, a, p, m]
   ), y = u(
     () => ({
       router: { useLocation: x, useNavigate: b, useParams: P, useSearchParams: I },
@@ -90,5 +89,5 @@ const R = { loop: !0, audio: !0 }, S = 24, T = "h264", L = {
   ) });
 };
 export {
-  tt as default
+  $ as default
 };