@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260502043006 → 0.8.1-dev.20260502064252

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.
Files changed (5) hide show
  1. package/dist/{HlsPlayer-VZHMWUEY.mjs → HlsPlayer-MSDXB5WD.mjs} +1 -1
  2. package/dist/{chunk-2NTH6VLK.mjs → chunk-PJWICSOI.mjs} +32 -36
  3. package/dist/index.js +33 -37
  4. package/dist/index.mjs +3 -3
  5. package/package.json +1 -1
package/dist/{HlsPlayer-VZHMWUEY.mjs → HlsPlayer-MSDXB5WD.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  HlsPlayer_default
4
- } from "./chunk-2NTH6VLK.mjs";
4
+ } from "./chunk-PJWICSOI.mjs";
5
5
  export {
6
6
  HlsPlayer_default as default
7
7
  };
package/dist/{chunk-2NTH6VLK.mjs → chunk-PJWICSOI.mjs} RENAMED
@@ -2,6 +2,12 @@
2
2
  import React, { useRef, useEffect, useState, useCallback } from "react";
3
3
  import Hls from "hls.js";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
+ var pickSource = (sources) => {
6
+ for (const { src, media } of sources) {
7
+ if (media && window.matchMedia(media).matches) return src;
8
+ }
9
+ return sources.find((s) => !s.media)?.src ?? sources[0]?.src ?? "";
10
+ };
5
11
  var HlsPlayer = React.memo(
6
12
  ({
7
13
  sources,
@@ -83,28 +89,24 @@ var HlsPlayer = React.memo(
83
89
  hlsRef.current.destroy();
84
90
  hlsRef.current = null;
85
91
  }
92
+ const chosenSrc = pickSource(resolvedSources);
93
+ if (!chosenSrc) return;
86
94
  if (Hls.isSupported()) {
87
95
  const hls = new Hls();
88
- const onLoadStart = () => {
89
- const chosenSrc = v.currentSrc;
90
- if (!chosenSrc) return;
91
- hls.loadSource(chosenSrc);
92
- hls.attachMedia(v);
93
- hls.on(Hls.Events.MANIFEST_PARSED, () => {
94
- if (isPlaying && !wasManuallyPausedRef.current) {
95
- v.play().catch(console.error);
96
- }
97
- });
98
- };
99
- v.addEventListener("loadstart", onLoadStart, { once: true });
100
- v.load();
96
+ hls.loadSource(chosenSrc);
97
+ hls.attachMedia(v);
98
+ hls.on(Hls.Events.MANIFEST_PARSED, () => {
99
+ if (isPlaying && !wasManuallyPausedRef.current) {
100
+ v.play().catch(console.error);
101
+ }
102
+ });
101
103
  hlsRef.current = hls;
102
104
  return () => {
103
- v.removeEventListener("loadstart", onLoadStart);
104
105
  hls.destroy();
105
106
  hlsRef.current = null;
106
107
  };
107
108
  } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
109
+ v.src = chosenSrc;
108
110
  v.load();
109
111
  }
110
112
  }, [JSON.stringify(resolvedSources)]);
@@ -153,8 +155,8 @@ var HlsPlayer = React.memo(
153
155
  const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
154
156
  const overlayButtonStyle = {
155
157
  pointerEvents: isControlsVisible ? "auto" : "none",
156
- width: 40,
157
- height: 40,
158
+ width: 30,
159
+ height: 30,
158
160
  borderRadius: "50%",
159
161
  border: "1.5px solid rgba(255,255,255,0.18)",
160
162
  cursor: "pointer",
@@ -180,7 +182,7 @@ var HlsPlayer = React.memo(
180
182
  btn.style.borderColor = "rgba(255,255,255,0.18)";
181
183
  }, []);
182
184
  if (resolvedSources.length === 0) return null;
183
- const showMuteButton = !showControls && !isMobile && !isPlayOnHover;
185
+ const showMuteButton = !showControls && !isPlayOnHover;
184
186
  return /* @__PURE__ */ jsxs(
185
187
  "div",
186
188
  {
@@ -199,7 +201,7 @@ var HlsPlayer = React.memo(
199
201
  muted: startsMuted,
200
202
  autoPlay: playOptions === "autoplay",
201
203
  loop,
202
- onClick: !isMobile ? handlePlayPause : void 0,
204
+ onClick: handlePlayPause,
203
205
  playsInline: true,
204
206
  children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ jsx(
205
207
  "source",
@@ -212,7 +214,7 @@ var HlsPlayer = React.memo(
212
214
  ))
213
215
  }
214
216
  ),
215
- !isMobile && fallbackPoster && /* @__PURE__ */ jsxs(
217
+ fallbackPoster && /* @__PURE__ */ jsxs(
216
218
  "picture",
217
219
  {
218
220
  className: "absolute inset-0 pointer-events-none",
@@ -235,7 +237,7 @@ var HlsPlayer = React.memo(
235
237
  ]
236
238
  }
237
239
  ),
238
- !isMobile && !isPlayOnHover && /* @__PURE__ */ jsx(
240
+ !isPlayOnHover && /* @__PURE__ */ jsx(
239
241
  "div",
240
242
  {
241
243
  className: "absolute inset-0 flex items-center justify-center pointer-events-none",
@@ -266,7 +268,7 @@ var HlsPlayer = React.memo(
266
268
  showMuteButton && /* @__PURE__ */ jsx(
267
269
  "div",
268
270
  {
269
- className: "absolute bottom-3 right-3 pointer-events-none",
271
+ className: "absolute bottom-4 right-4 pointer-events-none",
270
272
  style: {
271
273
  opacity: isControlsVisible ? 1 : 0,
272
274
  transition: "opacity 0.3s ease"
@@ -283,21 +285,15 @@ var HlsPlayer = React.memo(
283
285
  style: overlayButtonStyle,
284
286
  onMouseEnter: handleButtonMouseEnter,
285
287
  onMouseLeave: handleButtonMouseLeave,
286
- children: isMuted ? (
287
- /* Muted — speaker with an X */
288
- /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
289
- /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
290
- /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
291
- /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
292
- ] })
293
- ) : (
294
- /* Unmuted — speaker with sound waves */
295
- /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
296
- /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
297
- /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
298
- /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
299
- ] })
300
- )
288
+ children: isMuted ? /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
289
+ /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
290
+ /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
291
+ /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
292
+ ] }) : /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
293
+ /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
294
+ /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
295
+ /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
296
+ ] })
301
297
  }
302
298
  )
303
299
  }
package/dist/index.js CHANGED
@@ -520,7 +520,7 @@ var HlsPlayer_exports = {};
520
520
  __export(HlsPlayer_exports, {
521
521
  default: () => HlsPlayer_default
522
522
  });
523
- var import_react32, import_hls, import_jsx_runtime41, HlsPlayer, HlsPlayer_default;
523
+ var import_react32, import_hls, import_jsx_runtime41, pickSource, HlsPlayer, HlsPlayer_default;
524
524
  var init_HlsPlayer = __esm({
525
525
  "src/components/HlsPlayer.tsx"() {
526
526
  "use strict";
@@ -528,6 +528,12 @@ var init_HlsPlayer = __esm({
528
528
  import_react32 = __toESM(require("react"));
529
529
  import_hls = __toESM(require("hls.js"));
530
530
  import_jsx_runtime41 = require("react/jsx-runtime");
531
+ pickSource = (sources) => {
532
+ for (const { src, media } of sources) {
533
+ if (media && window.matchMedia(media).matches) return src;
534
+ }
535
+ return sources.find((s) => !s.media)?.src ?? sources[0]?.src ?? "";
536
+ };
531
537
  HlsPlayer = import_react32.default.memo(
532
538
  ({
533
539
  sources,
@@ -609,28 +615,24 @@ var init_HlsPlayer = __esm({
609
615
  hlsRef.current.destroy();
610
616
  hlsRef.current = null;
611
617
  }
618
+ const chosenSrc = pickSource(resolvedSources);
619
+ if (!chosenSrc) return;
612
620
  if (import_hls.default.isSupported()) {
613
621
  const hls = new import_hls.default();
614
- const onLoadStart = () => {
615
- const chosenSrc = v.currentSrc;
616
- if (!chosenSrc) return;
617
- hls.loadSource(chosenSrc);
618
- hls.attachMedia(v);
619
- hls.on(import_hls.default.Events.MANIFEST_PARSED, () => {
620
- if (isPlaying && !wasManuallyPausedRef.current) {
621
- v.play().catch(console.error);
622
- }
623
- });
624
- };
625
- v.addEventListener("loadstart", onLoadStart, { once: true });
626
- v.load();
622
+ hls.loadSource(chosenSrc);
623
+ hls.attachMedia(v);
624
+ hls.on(import_hls.default.Events.MANIFEST_PARSED, () => {
625
+ if (isPlaying && !wasManuallyPausedRef.current) {
626
+ v.play().catch(console.error);
627
+ }
628
+ });
627
629
  hlsRef.current = hls;
628
630
  return () => {
629
- v.removeEventListener("loadstart", onLoadStart);
630
631
  hls.destroy();
631
632
  hlsRef.current = null;
632
633
  };
633
634
  } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
635
+ v.src = chosenSrc;
634
636
  v.load();
635
637
  }
636
638
  }, [JSON.stringify(resolvedSources)]);
@@ -679,8 +681,8 @@ var init_HlsPlayer = __esm({
679
681
  const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
680
682
  const overlayButtonStyle = {
681
683
  pointerEvents: isControlsVisible ? "auto" : "none",
682
- width: 40,
683
- height: 40,
684
+ width: 30,
685
+ height: 30,
684
686
  borderRadius: "50%",
685
687
  border: "1.5px solid rgba(255,255,255,0.18)",
686
688
  cursor: "pointer",
@@ -706,7 +708,7 @@ var init_HlsPlayer = __esm({
706
708
  btn.style.borderColor = "rgba(255,255,255,0.18)";
707
709
  }, []);
708
710
  if (resolvedSources.length === 0) return null;
709
- const showMuteButton = !showControls && !isMobile && !isPlayOnHover;
711
+ const showMuteButton = !showControls && !isPlayOnHover;
710
712
  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
711
713
  "div",
712
714
  {
@@ -725,7 +727,7 @@ var init_HlsPlayer = __esm({
725
727
  muted: startsMuted,
726
728
  autoPlay: playOptions === "autoplay",
727
729
  loop,
728
- onClick: !isMobile ? handlePlayPause : void 0,
730
+ onClick: handlePlayPause,
729
731
  playsInline: true,
730
732
  children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
731
733
  "source",
@@ -738,7 +740,7 @@ var init_HlsPlayer = __esm({
738
740
  ))
739
741
  }
740
742
  ),
741
- !isMobile && fallbackPoster && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
743
+ fallbackPoster && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
742
744
  "picture",
743
745
  {
744
746
  className: "absolute inset-0 pointer-events-none",
@@ -761,7 +763,7 @@ var init_HlsPlayer = __esm({
761
763
  ]
762
764
  }
763
765
  ),
764
- !isMobile && !isPlayOnHover && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
766
+ !isPlayOnHover && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
765
767
  "div",
766
768
  {
767
769
  className: "absolute inset-0 flex items-center justify-center pointer-events-none",
@@ -792,7 +794,7 @@ var init_HlsPlayer = __esm({
792
794
  showMuteButton && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
793
795
  "div",
794
796
  {
795
- className: "absolute bottom-3 right-3 pointer-events-none",
797
+ className: "absolute bottom-4 right-4 pointer-events-none",
796
798
  style: {
797
799
  opacity: isControlsVisible ? 1 : 0,
798
800
  transition: "opacity 0.3s ease"
@@ -809,21 +811,15 @@ var init_HlsPlayer = __esm({
809
811
  style: overlayButtonStyle,
810
812
  onMouseEnter: handleButtonMouseEnter,
811
813
  onMouseLeave: handleButtonMouseLeave,
812
- children: isMuted ? (
813
- /* Muted — speaker with an X */
814
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
815
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
816
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
817
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
818
- ] })
819
- ) : (
820
- /* Unmuted — speaker with sound waves */
821
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
822
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
823
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
824
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
825
- ] })
826
- )
814
+ children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
815
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
816
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
817
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
818
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
819
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
820
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
821
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
822
+ ] })
827
823
  }
828
824
  )
829
825
  }
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  HlsPlayer_default
3
- } from "./chunk-2NTH6VLK.mjs";
3
+ } from "./chunk-PJWICSOI.mjs";
4
4
  import {
5
5
  Button_default,
6
6
  ClientButton_default,
@@ -1963,7 +1963,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
1963
1963
 
1964
1964
  // src/components/pageRenderingEngine/nodes/ImageNode.tsx
1965
1965
  import { Fragment as Fragment2, jsx as jsx37 } from "react/jsx-runtime";
1966
- var HlsPlayer = dynamic2(() => import("./HlsPlayer-VZHMWUEY.mjs"), {
1966
+ var HlsPlayer = dynamic2(() => import("./HlsPlayer-MSDXB5WD.mjs"), {
1967
1967
  ssr: false
1968
1968
  });
1969
1969
  var getNestedValue = (obj, path) => {
@@ -3645,7 +3645,7 @@ var Pagination_default = Pagination;
3645
3645
  // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
3646
3646
  import dynamic6 from "next/dynamic";
3647
3647
  import { Fragment as Fragment8, jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
3648
- var HlsPlayer2 = dynamic6(() => import("./HlsPlayer-VZHMWUEY.mjs"), { ssr: false });
3648
+ var HlsPlayer2 = dynamic6(() => import("./HlsPlayer-MSDXB5WD.mjs"), { ssr: false });
3649
3649
  var deviceToMediaQuery = (device) => {
3650
3650
  switch (device) {
3651
3651
  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.20260502043006",
3
+ "version": "0.8.1-dev.20260502064252",
4
4
  "description": "Reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",