@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260423063335 → 0.8.1-dev.20260423085135

package/dist/{HlsPlayer-CTZICLSJ.mjs → HlsPlayer-GV3FOPYT.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   HlsPlayer_default
-} from "./chunk-VNSFFK3H.mjs";
+} from "./chunk-TXHD4F4A.mjs";
 export {
   HlsPlayer_default as default
 };

package/dist/{chunk-VNSFFK3H.mjs → chunk-TXHD4F4A.mjs}

@@ -20,6 +20,7 @@ var HlsPlayer = React.memo(
     const [isHovered, setIsHovered] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
     const [isControlsVisible, setIsControlsVisible] = useState(true);
+    const [isPosterVisible, setIsPosterVisible] = useState(true);
     const wasManuallyPausedRef = useRef(false);
     const inactivityTimerRef = useRef(null);
     const INACTIVITY_DELAY = 2500;
@@ -37,6 +38,20 @@ var HlsPlayer = React.memo(
       window.addEventListener("resize", checkMobile);
       return () => window.removeEventListener("resize", checkMobile);
     }, []);
+    useEffect(() => {
+      const v = videoRef.current;
+      if (!v) return;
+      const onPlaying = () => setIsPosterVisible(false);
+      const onPause = () => {
+        if (v.currentTime === 0) setIsPosterVisible(true);
+      };
+      v.addEventListener("playing", onPlaying);
+      v.addEventListener("pause", onPause);
+      return () => {
+        v.removeEventListener("playing", onPlaying);
+        v.removeEventListener("pause", onPause);
+      };
+    }, []);
     const resetInactivityTimer = useCallback(() => {
       setIsControlsVisible(true);
       if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
@@ -127,6 +142,7 @@ var HlsPlayer = React.memo(
     }, [isMobile, resetInactivityTimer]);
     const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
     const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
+    const isPlayOnHover = playOptions === "playOnHover";
     if (resolvedSources.length === 0) return null;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -143,7 +159,7 @@ var HlsPlayer = React.memo(
               className: "w-full h-full object-contain",
               poster: fallbackPoster,
               controls: showControls && (isMobile || isPlaying),
-              muted: playOptions === "autoplay" || playOptions === "playOnHover",
+              muted: playOptions === "autoplay" || isPlayOnHover,
               autoPlay: playOptions === "autoplay",
               loop,
               playsInline: true,
@@ -159,10 +175,14 @@ var HlsPlayer = React.memo(
               ))
             }
           ),
-          !isMobile && playOptions === "playOnHover" && fallbackPoster && /* @__PURE__ */ jsxs(
+          !isMobile && fallbackPoster && /* @__PURE__ */ jsxs(
             "picture",
             {
-              className: `absolute inset-0 transition-opacity ${isHovered ? "opacity-0" : "opacity-100"}`,
+              className: "absolute inset-0 pointer-events-none",
+              style: {
+                opacity: isPosterVisible && (!isPlayOnHover || !isHovered) ? 1 : 0,
+                transition: "opacity 0.4s ease"
+              },
               children: [
                 posterSources.map(({ media, posterUrl: src }, i) => /* @__PURE__ */ jsx("source", { media, srcSet: src }, i)),
                 /* @__PURE__ */ jsx(
@@ -178,7 +198,7 @@ var HlsPlayer = React.memo(
               ]
             }
           ),
-          !isMobile && /* @__PURE__ */ jsx(
+          !isMobile && !isPlayOnHover && /* @__PURE__ */ jsx(
             "div",
             {
               className: "absolute inset-0 flex items-center justify-center pointer-events-none",

package/dist/index.d.mts

@@ -366,4 +366,16 @@ declare const EmailInput: React.FC<InputControlProps>;
 
 declare const TimeInput: React.FC<InputControlProps>;
 
-export { type ActionResponse, BooleanSelect, CheckboxInput, ColorInput, DataList, DataListRenderer, DateTimeInput, EmailInput, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes };
+interface TabItem {
+    tabTitle: string;
+    displayOrder: number;
+    landingPageUrl: string;
+    isActive: boolean;
+}
+interface NavigationTabsV2Props {
+    tabs: TabItem[];
+    params?: Record<string, any>;
+}
+declare const NavigationTabsV2: React.FC<NavigationTabsV2Props>;
+
+export { type ActionResponse, BooleanSelect, CheckboxInput, ColorInput, DataList, DataListRenderer, DateTimeInput, EmailInput, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NavigationTabsV2, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes };

package/dist/index.d.ts

@@ -366,4 +366,16 @@ declare const EmailInput: React.FC<InputControlProps>;
 
 declare const TimeInput: React.FC<InputControlProps>;
 
-export { type ActionResponse, BooleanSelect, CheckboxInput, ColorInput, DataList, DataListRenderer, DateTimeInput, EmailInput, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes };
+interface TabItem {
+    tabTitle: string;
+    displayOrder: number;
+    landingPageUrl: string;
+    isActive: boolean;
+}
+interface NavigationTabsV2Props {
+    tabs: TabItem[];
+    params?: Record<string, any>;
+}
+declare const NavigationTabsV2: React.FC<NavigationTabsV2Props>;
+
+export { type ActionResponse, BooleanSelect, CheckboxInput, ColorInput, DataList, DataListRenderer, DateTimeInput, EmailInput, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NavigationTabsV2, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes };

package/dist/index.js

@@ -515,6 +515,7 @@ var init_HlsPlayer = __esm({
         const [isHovered, setIsHovered] = (0, import_react35.useState)(false);
         const [isMobile, setIsMobile] = (0, import_react35.useState)(false);
         const [isControlsVisible, setIsControlsVisible] = (0, import_react35.useState)(true);
+        const [isPosterVisible, setIsPosterVisible] = (0, import_react35.useState)(true);
         const wasManuallyPausedRef = (0, import_react35.useRef)(false);
         const inactivityTimerRef = (0, import_react35.useRef)(null);
         const INACTIVITY_DELAY = 2500;
@@ -532,6 +533,20 @@ var init_HlsPlayer = __esm({
           window.addEventListener("resize", checkMobile);
           return () => window.removeEventListener("resize", checkMobile);
         }, []);
+        (0, import_react35.useEffect)(() => {
+          const v = videoRef.current;
+          if (!v) return;
+          const onPlaying = () => setIsPosterVisible(false);
+          const onPause = () => {
+            if (v.currentTime === 0) setIsPosterVisible(true);
+          };
+          v.addEventListener("playing", onPlaying);
+          v.addEventListener("pause", onPause);
+          return () => {
+            v.removeEventListener("playing", onPlaying);
+            v.removeEventListener("pause", onPause);
+          };
+        }, []);
         const resetInactivityTimer = (0, import_react35.useCallback)(() => {
           setIsControlsVisible(true);
           if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
@@ -622,6 +637,7 @@ var init_HlsPlayer = __esm({
         }, [isMobile, resetInactivityTimer]);
         const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
         const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
+        const isPlayOnHover = playOptions === "playOnHover";
         if (resolvedSources.length === 0) return null;
         return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           "div",
@@ -638,7 +654,7 @@ var init_HlsPlayer = __esm({
                   className: "w-full h-full object-contain",
                   poster: fallbackPoster,
                   controls: showControls && (isMobile || isPlaying),
-                  muted: playOptions === "autoplay" || playOptions === "playOnHover",
+                  muted: playOptions === "autoplay" || isPlayOnHover,
                   autoPlay: playOptions === "autoplay",
                   loop,
                   playsInline: true,
@@ -654,10 +670,14 @@ var init_HlsPlayer = __esm({
                   ))
                 }
               ),
-              !isMobile && playOptions === "playOnHover" && fallbackPoster && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+              !isMobile && fallbackPoster && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
                 "picture",
                 {
-                  className: `absolute inset-0 transition-opacity ${isHovered ? "opacity-0" : "opacity-100"}`,
+                  className: "absolute inset-0 pointer-events-none",
+                  style: {
+                    opacity: isPosterVisible && (!isPlayOnHover || !isHovered) ? 1 : 0,
+                    transition: "opacity 0.4s ease"
+                  },
                   children: [
                     posterSources.map(({ media, posterUrl: src }, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("source", { media, srcSet: src }, i)),
                     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -673,7 +693,7 @@ var init_HlsPlayer = __esm({
                   ]
                 }
               ),
-              !isMobile && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              !isMobile && !isPlayOnHover && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 "div",
                 {
                   className: "absolute inset-0 flex items-center justify-center pointer-events-none",
@@ -1103,6 +1123,7 @@ __export(index_exports, {
   LineTextInput: () => LineTextInput_default,
   MoneyInput: () => MoneyInput_default,
   MultilineTextInput: () => MultilineTextInput_default,
+  NavigationTabsV2: () => NavigationTabsV2_default,
   NumberInput: () => NumberInput_default,
   OtpInput: () => OtpInput_default,
   PageBodyRenderer: () => PageBodyRenderer_default,
@@ -3623,7 +3644,7 @@ var DataListRenderer = ({
   (0, import_react34.useEffect)(() => {
     const fetchData = async () => {
       if (!serviceRoute) return;
-      let resolvedRoute = resolveRoutePlaceholders(serviceRoute, params);
+      const resolvedRoute = resolveRoutePlaceholders(serviceRoute, params);
       const queryString = OdataBuilder.getOdataQueryString(query);
       const separator = resolvedRoute.includes("?") ? "&" : "?";
       const finalUrl = resolvedRoute + (queryString ? separator + queryString : "");
@@ -5985,6 +6006,47 @@ var Toast_default = Toast;
 
 // src/index.ts
 init_ToastService();
+
+// src/components/NavigationTabsV2.tsx
+var import_link3 = __toESM(require("next/link"));
+var import_navigation3 = require("next/navigation");
+var import_jsx_runtime73 = require("react/jsx-runtime");
+function resolveRoutePlaceholders2(route, params) {
+  return route.replace(/\{([^}]+)\}/g, (match, key) => {
+    const value = params[key];
+    if (value === void 0 || value === null) {
+      console.warn(`No value found for route param: ${key}`);
+      return "";
+    }
+    return value;
+  });
+}
+var NavigationTabsV2 = ({ tabs, params = {} }) => {
+  const pathname = (0, import_navigation3.usePathname)();
+  const shouldHideTabs = pathname?.includes("/add");
+  if (shouldHideTabs) return null;
+  const mappedTabs = tabs?.sort((a, b) => a.displayOrder - b.displayOrder)?.map((tab) => ({
+    tabTitle: tab.tabTitle,
+    displayOrder: tab.displayOrder,
+    landingPageUrl: resolveRoutePlaceholders2(
+      tab.landingPageUrl,
+      params
+    ),
+    isActive: tab.isActive
+  })) || [];
+  if (mappedTabs.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "flex border-b bg-white rounded-t mb-3", children: mappedTabs.map(({ tabTitle, landingPageUrl, isActive }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_link3.default, { href: landingPageUrl, className: "-mb-px", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      "div",
+      {
+        className: `text-sm font-medium border-b-2 px-6 py-2 transition
+                ${isActive ? "bg-info-base" : "bg-neutral-weak "}`,
+        children: tabTitle
+      }
+    ) }, landingPageUrl);
+  }) });
+};
+var NavigationTabsV2_default = NavigationTabsV2;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BooleanSelect,
@@ -5999,6 +6061,7 @@ init_ToastService();
   LineTextInput,
   MoneyInput,
   MultilineTextInput,
+  NavigationTabsV2,
   NumberInput,
   OtpInput,
   PageBodyRenderer,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-VNSFFK3H.mjs";
+} from "./chunk-TXHD4F4A.mjs";
 import {
   Button_default,
   ServiceClient_default,
@@ -2517,7 +2517,7 @@ var DataListRenderer = ({
   useEffect7(() => {
     const fetchData = async () => {
       if (!serviceRoute) return;
-      let resolvedRoute = resolveRoutePlaceholders(serviceRoute, params);
+      const resolvedRoute = resolveRoutePlaceholders(serviceRoute, params);
       const queryString = OdataBuilder.getOdataQueryString(query);
       const separator = resolvedRoute.includes("?") ? "&" : "?";
       const finalUrl = resolvedRoute + (queryString ? separator + queryString : "");
@@ -2782,7 +2782,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import { Fragment as Fragment3, jsx as jsx41 } from "react/jsx-runtime";
-var HlsPlayer = dynamic(() => import("./HlsPlayer-CTZICLSJ.mjs"), {
+var HlsPlayer = dynamic(() => import("./HlsPlayer-GV3FOPYT.mjs"), {
   ssr: false
 });
 var getNestedValue = (obj, path) => {
@@ -4251,7 +4251,7 @@ var Pagination_default = Pagination;
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic5 from "next/dynamic";
 import { Fragment as Fragment9, jsx as jsx60, jsxs as jsxs33 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-CTZICLSJ.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-GV3FOPYT.mjs"), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "sm":
@@ -4868,6 +4868,47 @@ var Toast = () => {
   ] }) }) });
 };
 var Toast_default = Toast;
+
+// src/components/NavigationTabsV2.tsx
+import Link3 from "next/link";
+import { usePathname as usePathname2 } from "next/navigation";
+import { jsx as jsx64 } from "react/jsx-runtime";
+function resolveRoutePlaceholders2(route, params) {
+  return route.replace(/\{([^}]+)\}/g, (match, key) => {
+    const value = params[key];
+    if (value === void 0 || value === null) {
+      console.warn(`No value found for route param: ${key}`);
+      return "";
+    }
+    return value;
+  });
+}
+var NavigationTabsV2 = ({ tabs, params = {} }) => {
+  const pathname = usePathname2();
+  const shouldHideTabs = pathname?.includes("/add");
+  if (shouldHideTabs) return null;
+  const mappedTabs = tabs?.sort((a, b) => a.displayOrder - b.displayOrder)?.map((tab) => ({
+    tabTitle: tab.tabTitle,
+    displayOrder: tab.displayOrder,
+    landingPageUrl: resolveRoutePlaceholders2(
+      tab.landingPageUrl,
+      params
+    ),
+    isActive: tab.isActive
+  })) || [];
+  if (mappedTabs.length === 0) return null;
+  return /* @__PURE__ */ jsx64("div", { className: "flex border-b bg-white rounded-t mb-3", children: mappedTabs.map(({ tabTitle, landingPageUrl, isActive }) => {
+    return /* @__PURE__ */ jsx64(Link3, { href: landingPageUrl, className: "-mb-px", children: /* @__PURE__ */ jsx64(
+      "div",
+      {
+        className: `text-sm font-medium border-b-2 px-6 py-2 transition
+                ${isActive ? "bg-info-base" : "bg-neutral-weak "}`,
+        children: tabTitle
+      }
+    ) }, landingPageUrl);
+  }) });
+};
+var NavigationTabsV2_default = NavigationTabsV2;
 export {
   BooleanSelect_default as BooleanSelect,
   CheckboxInput_default as CheckboxInput,
@@ -4881,6 +4922,7 @@ export {
   LineTextInput_default as LineTextInput,
   MoneyInput_default as MoneyInput,
   MultilineTextInput_default as MultilineTextInput,
+  NavigationTabsV2_default as NavigationTabsV2,
   NumberInput_default as NumberInput,
   OtpInput_default as OtpInput,
   PageBodyRenderer_default as PageBodyRenderer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acoustte-digital-services/digitalstore-controls-dev",
-  "version": "0.8.1-dev.20260423063335",
+  "version": "0.8.1-dev.20260423085135",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",