@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260422090829 → 0.8.1-dev.20260423042903

package/dist/{HlsPlayer-KOTCX7MY.mjs → HlsPlayer-IBPSMECZ.mjs}

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

package/dist/{chunk-NTZ3IUOL.mjs → chunk-BV2VX3HP.mjs}

@@ -115,7 +115,7 @@ var HlsPlayer = React.memo(
               autoPlay: playOptions === "autoplay",
               loop,
               playsInline: true,
-              onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
+              onClick: !isMobile ? handlePlayPause : void 0,
               children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ jsx(
                 "source",
                 {
@@ -146,12 +146,63 @@ var HlsPlayer = React.memo(
               ]
             }
           ),
-          !isMobile && !isPlaying && /* @__PURE__ */ jsx(
+          !isMobile && /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute inset-0 flex items-center justify-center cursor-pointer",
-              onClick: handlePlayPause,
-              children: "\u25B6"
+              className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+              style: {
+                opacity: !isPlaying || isHovered ? 1 : 0,
+                transition: "opacity 0.25s ease"
+              },
+              children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": isPlaying ? "Pause" : "Play",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handlePlayPause();
+                  },
+                  style: {
+                    pointerEvents: "auto",
+                    width: 64,
+                    height: 64,
+                    borderRadius: "50%",
+                    border: "1.5px solid rgba(255,255,255,0.18)",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: "rgba(0, 0, 0, 0.45)",
+                    backdropFilter: "blur(10px)",
+                    WebkitBackdropFilter: "blur(10px)",
+                    boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
+                    transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
+                  },
+                  onMouseEnter: (e) => {
+                    const btn = e.currentTarget;
+                    btn.style.transform = "scale(1.1)";
+                    btn.style.background = "rgba(0,0,0,0.65)";
+                    btn.style.borderColor = "rgba(255,255,255,0.32)";
+                  },
+                  onMouseLeave: (e) => {
+                    const btn = e.currentTarget;
+                    btn.style.transform = "scale(1)";
+                    btn.style.background = "rgba(0,0,0,0.45)";
+                    btn.style.borderColor = "rgba(255,255,255,0.18)";
+                  },
+                  children: isPlaying ? (
+                    /* Pause — two rounded bars */
+                    /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                      /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
+                      /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
+                    ] })
+                  ) : (
+                    /* Play — solid triangle, nudged right for optical balance */
+                    /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { transform: "translateX(2px)" }, children: /* @__PURE__ */ jsx("path", { d: "M5 3.5L17 10L5 16.5V3.5Z", fill: "white" }) })
+                  )
+                }
+              )
             }
           )
         ]

package/dist/index.js

@@ -392,7 +392,7 @@ var init_HlsPlayer = __esm({
                   autoPlay: playOptions === "autoplay",
                   loop,
                   playsInline: true,
-                  onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
+                  onClick: !isMobile ? handlePlayPause : void 0,
                   children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     "source",
                     {
@@ -423,12 +423,63 @@ var init_HlsPlayer = __esm({
                   ]
                 }
               ),
-              !isMobile && !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              !isMobile && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 "div",
                 {
-                  className: "absolute inset-0 flex items-center justify-center cursor-pointer",
-                  onClick: handlePlayPause,
-                  children: "\u25B6"
+                  className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+                  style: {
+                    opacity: !isPlaying || isHovered ? 1 : 0,
+                    transition: "opacity 0.25s ease"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": isPlaying ? "Pause" : "Play",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handlePlayPause();
+                      },
+                      style: {
+                        pointerEvents: "auto",
+                        width: 64,
+                        height: 64,
+                        borderRadius: "50%",
+                        border: "1.5px solid rgba(255,255,255,0.18)",
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        background: "rgba(0, 0, 0, 0.45)",
+                        backdropFilter: "blur(10px)",
+                        WebkitBackdropFilter: "blur(10px)",
+                        boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
+                        transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
+                      },
+                      onMouseEnter: (e) => {
+                        const btn = e.currentTarget;
+                        btn.style.transform = "scale(1.1)";
+                        btn.style.background = "rgba(0,0,0,0.65)";
+                        btn.style.borderColor = "rgba(255,255,255,0.32)";
+                      },
+                      onMouseLeave: (e) => {
+                        const btn = e.currentTarget;
+                        btn.style.transform = "scale(1)";
+                        btn.style.background = "rgba(0,0,0,0.45)";
+                        btn.style.borderColor = "rgba(255,255,255,0.18)";
+                      },
+                      children: isPlaying ? (
+                        /* Pause — two rounded bars */
+                        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
+                        ] })
+                      ) : (
+                        /* Play — solid triangle, nudged right for optical balance */
+                        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { transform: "translateX(2px)" }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M5 3.5L17 10L5 16.5V3.5Z", fill: "white" }) })
+                      )
+                    }
+                  )
                 }
               )
             ]
@@ -1186,15 +1237,12 @@ var timeZoneAbbreviations = {
 // src/components/controls/view/DateView.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var DateView = (props) => {
-  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const getTimeZoneAbbreviation = (timeZone) => {
     return timeZoneAbbreviations[timeZone] || timeZone;
   };
   const getRelativeTime = (dateString) => {
     const now = /* @__PURE__ */ new Date();
-    const date = new Date(
-      dateString.includes("Z") ? dateString : dateString + "Z"
-    );
+    const date = /* @__PURE__ */ new Date(dateString + "Z");
     const diffMs = now.getTime() - date.getTime();
     const diffSec = Math.floor(diffMs / 1e3);
     const diffMin = Math.floor(diffSec / 60);
@@ -1205,19 +1253,48 @@ var DateView = (props) => {
     if (diffHr < 24) return `${diffHr} hour${diffHr > 1 ? "s" : ""} ago`;
     if (diffDay < 7) return `${diffDay} day${diffDay > 1 ? "s" : ""} ago`;
     return new Intl.DateTimeFormat("en", {
-      timeZone: userTimeZone,
       day: "2-digit",
       month: "short",
       year: "numeric"
     }).format(date);
   };
+  console.log("DateView props:", props);
+  const parseAndFormatDate = (dateString, format) => {
+    const parsedDate = /* @__PURE__ */ new Date(dateString + "Z");
+    if (format === "relative") {
+      return getRelativeTime(dateString);
+    }
+    switch (props.controlType) {
+      case "date":
+        return new Intl.DateTimeFormat("en", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric"
+        }).format(parsedDate);
+      case "time":
+        return `${formatTime(parsedDate)} ${getTimeZoneAbbreviation(Intl.DateTimeFormat().resolvedOptions().timeZone)} (${getTimePeriod(parsedDate)})`;
+      default:
+        return parsedDate.getSeconds() === 0 ? new Intl.DateTimeFormat("en", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit"
+        }).format(parsedDate) : new Intl.DateTimeFormat("en", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit"
+        }).format(parsedDate);
+    }
+  };
   const formatTime = (date) => {
     return date.getSeconds() === 0 ? new Intl.DateTimeFormat("en", {
-      timeZone: userTimeZone,
       hour: "2-digit",
       minute: "2-digit"
     }).format(date) : new Intl.DateTimeFormat("en", {
-      timeZone: userTimeZone,
       hour: "2-digit",
       minute: "2-digit",
       second: "2-digit"
@@ -1234,55 +1311,19 @@ var DateView = (props) => {
     if (hours >= 22 || hours < 5) return "Night";
     return "Late Night";
   };
-  const parseAndFormatDate = (dateString, format) => {
-    if (!dateString) return "";
-    if (format === "relative") {
-      return getRelativeTime(dateString);
-    }
-    const parsedDate = new Date(
-      dateString.includes("Z") ? dateString : dateString + "Z"
-    );
-    if (props.controlType === "date") {
-      return new Intl.DateTimeFormat("en", {
-        timeZone: userTimeZone,
-        day: "2-digit",
-        month: "short",
-        year: "numeric"
-      }).format(parsedDate);
-    }
-    if (props.controlType === "time") {
-      return `${formatTime(parsedDate)} ${getTimeZoneAbbreviation(
-        userTimeZone
-      )} (${getTimePeriod(parsedDate)})`;
-    }
-    return parsedDate.getSeconds() === 0 ? new Intl.DateTimeFormat("en", {
-      timeZone: userTimeZone,
-      day: "2-digit",
-      month: "short",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit"
-    }).format(parsedDate) : new Intl.DateTimeFormat("en", {
-      timeZone: userTimeZone,
-      day: "2-digit",
-      month: "short",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit"
-    }).format(parsedDate);
-  };
   let localDateTime = "";
   let timeZoneAbbreviation = "";
   try {
     localDateTime = parseAndFormatDate(props.value, props.format);
-    timeZoneAbbreviation = getTimeZoneAbbreviation(userTimeZone);
+    timeZoneAbbreviation = getTimeZoneAbbreviation(
+      Intl.DateTimeFormat().resolvedOptions().timeZone
+    );
   } catch (error) {
     console.error("Error parsing date:", props.value, error);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "inline-flex flex-wrap gap-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: localDateTime }),
-    !props.format && props.controlType !== "date" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: timeZoneAbbreviation })
+    !props.format && props.controlType != "date" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: timeZoneAbbreviation })
   ] }) });
 };
 var DateView_default = DateView;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-NTZ3IUOL.mjs";
+} from "./chunk-BV2VX3HP.mjs";
 import {
   Button_default,
   ServiceClient_default,
@@ -162,15 +162,12 @@ var timeZoneAbbreviations = {
 // src/components/controls/view/DateView.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var DateView = (props) => {
-  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const getTimeZoneAbbreviation = (timeZone) => {
     return timeZoneAbbreviations[timeZone] || timeZone;
   };
   const getRelativeTime = (dateString) => {
     const now = /* @__PURE__ */ new Date();
-    const date = new Date(
-      dateString.includes("Z") ? dateString : dateString + "Z"
-    );
+    const date = /* @__PURE__ */ new Date(dateString + "Z");
     const diffMs = now.getTime() - date.getTime();
     const diffSec = Math.floor(diffMs / 1e3);
     const diffMin = Math.floor(diffSec / 60);
@@ -181,19 +178,48 @@ var DateView = (props) => {
     if (diffHr < 24) return `${diffHr} hour${diffHr > 1 ? "s" : ""} ago`;
     if (diffDay < 7) return `${diffDay} day${diffDay > 1 ? "s" : ""} ago`;
     return new Intl.DateTimeFormat("en", {
-      timeZone: userTimeZone,
       day: "2-digit",
       month: "short",
       year: "numeric"
     }).format(date);
   };
+  console.log("DateView props:", props);
+  const parseAndFormatDate = (dateString, format) => {
+    const parsedDate = /* @__PURE__ */ new Date(dateString + "Z");
+    if (format === "relative") {
+      return getRelativeTime(dateString);
+    }
+    switch (props.controlType) {
+      case "date":
+        return new Intl.DateTimeFormat("en", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric"
+        }).format(parsedDate);
+      case "time":
+        return `${formatTime(parsedDate)} ${getTimeZoneAbbreviation(Intl.DateTimeFormat().resolvedOptions().timeZone)} (${getTimePeriod(parsedDate)})`;
+      default:
+        return parsedDate.getSeconds() === 0 ? new Intl.DateTimeFormat("en", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit"
+        }).format(parsedDate) : new Intl.DateTimeFormat("en", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit"
+        }).format(parsedDate);
+    }
+  };
   const formatTime = (date) => {
     return date.getSeconds() === 0 ? new Intl.DateTimeFormat("en", {
-      timeZone: userTimeZone,
       hour: "2-digit",
       minute: "2-digit"
     }).format(date) : new Intl.DateTimeFormat("en", {
-      timeZone: userTimeZone,
       hour: "2-digit",
       minute: "2-digit",
       second: "2-digit"
@@ -210,55 +236,19 @@ var DateView = (props) => {
     if (hours >= 22 || hours < 5) return "Night";
     return "Late Night";
   };
-  const parseAndFormatDate = (dateString, format) => {
-    if (!dateString) return "";
-    if (format === "relative") {
-      return getRelativeTime(dateString);
-    }
-    const parsedDate = new Date(
-      dateString.includes("Z") ? dateString : dateString + "Z"
-    );
-    if (props.controlType === "date") {
-      return new Intl.DateTimeFormat("en", {
-        timeZone: userTimeZone,
-        day: "2-digit",
-        month: "short",
-        year: "numeric"
-      }).format(parsedDate);
-    }
-    if (props.controlType === "time") {
-      return `${formatTime(parsedDate)} ${getTimeZoneAbbreviation(
-        userTimeZone
-      )} (${getTimePeriod(parsedDate)})`;
-    }
-    return parsedDate.getSeconds() === 0 ? new Intl.DateTimeFormat("en", {
-      timeZone: userTimeZone,
-      day: "2-digit",
-      month: "short",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit"
-    }).format(parsedDate) : new Intl.DateTimeFormat("en", {
-      timeZone: userTimeZone,
-      day: "2-digit",
-      month: "short",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit"
-    }).format(parsedDate);
-  };
   let localDateTime = "";
   let timeZoneAbbreviation = "";
   try {
     localDateTime = parseAndFormatDate(props.value, props.format);
-    timeZoneAbbreviation = getTimeZoneAbbreviation(userTimeZone);
+    timeZoneAbbreviation = getTimeZoneAbbreviation(
+      Intl.DateTimeFormat().resolvedOptions().timeZone
+    );
   } catch (error) {
     console.error("Error parsing date:", props.value, error);
   }
   return /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "inline-flex flex-wrap gap-1", children: [
     /* @__PURE__ */ jsx2("span", { children: localDateTime }),
-    !props.format && props.controlType !== "date" && /* @__PURE__ */ jsx2("span", { children: timeZoneAbbreviation })
+    !props.format && props.controlType != "date" && /* @__PURE__ */ jsx2("span", { children: timeZoneAbbreviation })
   ] }) });
 };
 var DateView_default = DateView;
@@ -2638,7 +2628,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import { Fragment as Fragment3, jsx as jsx39 } from "react/jsx-runtime";
-var HlsPlayer = dynamic(() => import("./HlsPlayer-KOTCX7MY.mjs"), {
+var HlsPlayer = dynamic(() => import("./HlsPlayer-IBPSMECZ.mjs"), {
   ssr: false
 });
 var getNestedValue = (obj, path) => {
@@ -4107,7 +4097,7 @@ var Pagination_default = Pagination;
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic5 from "next/dynamic";
 import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-KOTCX7MY.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-IBPSMECZ.mjs"), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "sm":

package/package.json

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