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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  HlsPlayer_default
4
- } from "./chunk-NTZ3IUOL.mjs";
4
+ } from "./chunk-BV2VX3HP.mjs";
5
5
  export {
6
6
  HlsPlayer_default as default
7
7
  };
@@ -115,7 +115,7 @@ var HlsPlayer = React.memo(
115
115
  autoPlay: playOptions === "autoplay",
116
116
  loop,
117
117
  playsInline: true,
118
- onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
118
+ onClick: !isMobile ? handlePlayPause : void 0,
119
119
  children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ jsx(
120
120
  "source",
121
121
  {
@@ -146,12 +146,63 @@ var HlsPlayer = React.memo(
146
146
  ]
147
147
  }
148
148
  ),
149
- !isMobile && !isPlaying && /* @__PURE__ */ jsx(
149
+ !isMobile && /* @__PURE__ */ jsx(
150
150
  "div",
151
151
  {
152
- className: "absolute inset-0 flex items-center justify-center cursor-pointer",
153
- onClick: handlePlayPause,
154
- children: "\u25B6"
152
+ className: "absolute inset-0 flex items-center justify-center pointer-events-none",
153
+ style: {
154
+ opacity: !isPlaying || isHovered ? 1 : 0,
155
+ transition: "opacity 0.25s ease"
156
+ },
157
+ children: /* @__PURE__ */ jsx(
158
+ "button",
159
+ {
160
+ type: "button",
161
+ "aria-label": isPlaying ? "Pause" : "Play",
162
+ onClick: (e) => {
163
+ e.stopPropagation();
164
+ handlePlayPause();
165
+ },
166
+ style: {
167
+ pointerEvents: "auto",
168
+ width: 64,
169
+ height: 64,
170
+ borderRadius: "50%",
171
+ border: "1.5px solid rgba(255,255,255,0.18)",
172
+ cursor: "pointer",
173
+ display: "flex",
174
+ alignItems: "center",
175
+ justifyContent: "center",
176
+ background: "rgba(0, 0, 0, 0.45)",
177
+ backdropFilter: "blur(10px)",
178
+ WebkitBackdropFilter: "blur(10px)",
179
+ boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
180
+ transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
181
+ },
182
+ onMouseEnter: (e) => {
183
+ const btn = e.currentTarget;
184
+ btn.style.transform = "scale(1.1)";
185
+ btn.style.background = "rgba(0,0,0,0.65)";
186
+ btn.style.borderColor = "rgba(255,255,255,0.32)";
187
+ },
188
+ onMouseLeave: (e) => {
189
+ const btn = e.currentTarget;
190
+ btn.style.transform = "scale(1)";
191
+ btn.style.background = "rgba(0,0,0,0.45)";
192
+ btn.style.borderColor = "rgba(255,255,255,0.18)";
193
+ },
194
+ children: isPlaying ? (
195
+ /* Pause — two rounded bars */
196
+ /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
197
+ /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
198
+ /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
199
+ ] })
200
+ ) : (
201
+ /* Play — solid triangle, nudged right for optical balance */
202
+ /* @__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" }) })
203
+ )
204
+ }
205
+ )
155
206
  }
156
207
  )
157
208
  ]
package/dist/index.js CHANGED
@@ -392,7 +392,7 @@ var init_HlsPlayer = __esm({
392
392
  autoPlay: playOptions === "autoplay",
393
393
  loop,
394
394
  playsInline: true,
395
- onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
395
+ onClick: !isMobile ? handlePlayPause : void 0,
396
396
  children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
397
397
  "source",
398
398
  {
@@ -423,12 +423,63 @@ var init_HlsPlayer = __esm({
423
423
  ]
424
424
  }
425
425
  ),
426
- !isMobile && !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
426
+ !isMobile && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
427
427
  "div",
428
428
  {
429
- className: "absolute inset-0 flex items-center justify-center cursor-pointer",
430
- onClick: handlePlayPause,
431
- children: "\u25B6"
429
+ className: "absolute inset-0 flex items-center justify-center pointer-events-none",
430
+ style: {
431
+ opacity: !isPlaying || isHovered ? 1 : 0,
432
+ transition: "opacity 0.25s ease"
433
+ },
434
+ children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
435
+ "button",
436
+ {
437
+ type: "button",
438
+ "aria-label": isPlaying ? "Pause" : "Play",
439
+ onClick: (e) => {
440
+ e.stopPropagation();
441
+ handlePlayPause();
442
+ },
443
+ style: {
444
+ pointerEvents: "auto",
445
+ width: 64,
446
+ height: 64,
447
+ borderRadius: "50%",
448
+ border: "1.5px solid rgba(255,255,255,0.18)",
449
+ cursor: "pointer",
450
+ display: "flex",
451
+ alignItems: "center",
452
+ justifyContent: "center",
453
+ background: "rgba(0, 0, 0, 0.45)",
454
+ backdropFilter: "blur(10px)",
455
+ WebkitBackdropFilter: "blur(10px)",
456
+ boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
457
+ transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
458
+ },
459
+ onMouseEnter: (e) => {
460
+ const btn = e.currentTarget;
461
+ btn.style.transform = "scale(1.1)";
462
+ btn.style.background = "rgba(0,0,0,0.65)";
463
+ btn.style.borderColor = "rgba(255,255,255,0.32)";
464
+ },
465
+ onMouseLeave: (e) => {
466
+ const btn = e.currentTarget;
467
+ btn.style.transform = "scale(1)";
468
+ btn.style.background = "rgba(0,0,0,0.45)";
469
+ btn.style.borderColor = "rgba(255,255,255,0.18)";
470
+ },
471
+ children: isPlaying ? (
472
+ /* Pause — two rounded bars */
473
+ /* @__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: [
474
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
475
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
476
+ ] })
477
+ ) : (
478
+ /* Play — solid triangle, nudged right for optical balance */
479
+ /* @__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" }) })
480
+ )
481
+ }
482
+ )
432
483
  }
433
484
  )
434
485
  ]
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  HlsPlayer_default
3
- } from "./chunk-NTZ3IUOL.mjs";
3
+ } from "./chunk-BV2VX3HP.mjs";
4
4
  import {
5
5
  Button_default,
6
6
  ServiceClient_default,
@@ -2628,7 +2628,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
2628
2628
 
2629
2629
  // src/components/pageRenderingEngine/nodes/ImageNode.tsx
2630
2630
  import { Fragment as Fragment3, jsx as jsx39 } from "react/jsx-runtime";
2631
- var HlsPlayer = dynamic(() => import("./HlsPlayer-KOTCX7MY.mjs"), {
2631
+ var HlsPlayer = dynamic(() => import("./HlsPlayer-IBPSMECZ.mjs"), {
2632
2632
  ssr: false
2633
2633
  });
2634
2634
  var getNestedValue = (obj, path) => {
@@ -4097,7 +4097,7 @@ var Pagination_default = Pagination;
4097
4097
  // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
4098
4098
  import dynamic5 from "next/dynamic";
4099
4099
  import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
4100
- var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-KOTCX7MY.mjs"), { ssr: false });
4100
+ var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-IBPSMECZ.mjs"), { ssr: false });
4101
4101
  var deviceToMediaQuery = (device) => {
4102
4102
  switch (device) {
4103
4103
  case "sm":
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acoustte-digital-services/digitalstore-controls-dev",
3
- "version": "0.8.1-dev.20260422124624",
3
+ "version": "0.8.1-dev.20260423042903",
4
4
  "description": "Reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",