@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260916063140 → 0.8.1-dev.20260916090938

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 (7) hide show
  1. package/dist/{HlsPlayer-IW52N5RG.mjs → HlsPlayer-AUZ42WTT.mjs} +83 -107
  2. package/dist/{HlsPlayer-BVS6BVF7.mjs → HlsPlayer-ZGFEVSKL.mjs} +83 -107
  3. package/dist/index.js +83 -107
  4. package/dist/index.mjs +3 -3
  5. package/dist/server.js +83 -107
  6. package/dist/server.mjs +3 -3
  7. package/package.json +1 -1
package/dist/{HlsPlayer-IW52N5RG.mjs → HlsPlayer-AUZ42WTT.mjs} RENAMED
@@ -282,10 +282,10 @@ var HlsPlayer = React.memo(
282
282
  }, [isMobile, resetInactivityTimer]);
283
283
  const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
284
284
  const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
285
- const playBtnSize = "clamp(44px, 8vmin, 80px)";
285
+ const playBtnSize = "clamp(40px, 6.5vmin, 68px)";
286
286
  const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
287
287
  const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
288
- const playIconSize = "clamp(24px, 4.5vmin, 44px)";
288
+ const playIconSize = "clamp(18px, 3.2vmin, 32px)";
289
289
  const iconButtonStyle = {
290
290
  pointerEvents: isControlsVisible ? "auto" : "none",
291
291
  width: iconBtnSize,
@@ -375,11 +375,24 @@ var HlsPlayer = React.memo(
375
375
  ),
376
376
  /* @__PURE__ */ jsx("style", { children: `
377
377
  .hls-play-btn {
378
- will-change: transform;
379
- transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
378
+ transform: translateZ(0);
379
+ -webkit-transform: translateZ(0);
380
+ backface-visibility: hidden;
381
+ -webkit-backface-visibility: hidden;
382
+ transform-origin: center center;
383
+ transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
384
+ box-shadow 0.24s cubic-bezier(0.25, 1, 0.5, 1),
385
+ background-color 0.2s ease;
380
386
  }
381
387
  .hls-play-btn:hover {
382
- transform: scale(1.08);
388
+ transform: scale(1.05) translateZ(0);
389
+ -webkit-transform: scale(1.05) translateZ(0);
390
+ background-color: #ffffff !important;
391
+ box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 1px #ffffff !important;
392
+ }
393
+ .hls-play-btn:active {
394
+ transform: scale(0.96) translateZ(0);
395
+ -webkit-transform: scale(0.96) translateZ(0);
383
396
  }
384
397
  ` }),
385
398
  isBuffering && /* @__PURE__ */ jsxs(
@@ -393,51 +406,39 @@ var HlsPlayer = React.memo(
393
406
  to { transform: rotate(360deg); }
394
407
  }
395
408
  .hls-spinner {
396
- animation: hls-spin 1s linear infinite;
397
- filter: drop-shadow(0 0 6px rgba(243, 31, 73, 0.7))
398
- drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
409
+ animation: hls-spin 0.85s linear infinite;
410
+ filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
399
411
  }
400
412
  ` }),
401
413
  /* @__PURE__ */ jsxs(
402
414
  "svg",
403
415
  {
404
416
  className: "hls-spinner",
405
- width: "clamp(44px, 8vmin, 72px)",
406
- height: "clamp(44px, 8vmin, 72px)",
407
- viewBox: "0 0 72 72",
417
+ width: "clamp(44px, 8vmin, 64px)",
418
+ height: "clamp(44px, 8vmin, 64px)",
419
+ viewBox: "0 0 48 48",
408
420
  fill: "none",
409
421
  xmlns: "http://www.w3.org/2000/svg",
410
422
  children: [
411
- /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "hls-arc-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
412
- /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(243,31,73,0)" }),
413
- /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "rgba(243,31,73,1)" }),
414
- /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(143,38,237,1)" })
415
- ] }) }),
416
- Array.from({ length: 18 }).map((_, i) => {
417
- const angle = i / 18 * 360;
418
- const opacity = 0.15 + i / 17 * 0.85;
419
- const rad = (angle - 90) * (Math.PI / 180);
420
- const r = 30;
421
- const cx = 36 + r * Math.cos(rad);
422
- const cy = 36 + r * Math.sin(rad);
423
- const t = i / 17;
424
- const r1 = Math.round(243 * (1 - t) + 143 * t);
425
- const g1 = Math.round(31 * (1 - t) + 38 * t);
426
- const b1 = Math.round(73 * (1 - t) + 237 * t);
427
- return /* @__PURE__ */ jsx(
428
- "rect",
429
- {
430
- x: cx - 2.2,
431
- y: cy - 5.5,
432
- width: 4.4,
433
- height: 11,
434
- rx: 2.2,
435
- fill: `rgba(${r1},${g1},${b1},${opacity})`,
436
- transform: `rotate(${angle}, ${cx}, ${cy})`
437
- },
438
- i
439
- );
440
- })
423
+ /* @__PURE__ */ jsx(
424
+ "circle",
425
+ {
426
+ cx: "24",
427
+ cy: "24",
428
+ r: "18",
429
+ stroke: "rgba(255, 255, 255, 0.25)",
430
+ strokeWidth: "3.5"
431
+ }
432
+ ),
433
+ /* @__PURE__ */ jsx(
434
+ "path",
435
+ {
436
+ d: "M24 6a18 18 0 0 1 18 18",
437
+ stroke: "#ffffff",
438
+ strokeWidth: "3.5",
439
+ strokeLinecap: "round"
440
+ }
441
+ )
441
442
  ]
442
443
  }
443
444
  )
@@ -452,7 +453,7 @@ var HlsPlayer = React.memo(
452
453
  opacity: isControlsVisible ? 1 : 0,
453
454
  transition: "opacity 0.3s ease"
454
455
  },
455
- children: /* @__PURE__ */ jsxs(
456
+ children: /* @__PURE__ */ jsx(
456
457
  "button",
457
458
  {
458
459
  type: "button",
@@ -468,83 +469,58 @@ var HlsPlayer = React.memo(
468
469
  width: playBtnSize,
469
470
  height: playBtnSize,
470
471
  borderRadius: "50%",
471
- border: "none",
472
+ border: "1px solid rgba(255, 255, 255, 0.8)",
472
473
  cursor: "pointer",
473
474
  display: "flex",
474
475
  alignItems: "center",
475
476
  justifyContent: "center",
476
- background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
477
+ background: "rgba(255, 255, 255, 0.92)",
478
+ backdropFilter: "blur(12px)",
479
+ WebkitBackdropFilter: "blur(12px)",
480
+ boxShadow: "0 10px 30px -5px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 1)",
477
481
  flexShrink: 0,
478
- position: "relative",
479
- overflow: "hidden"
482
+ position: "relative"
480
483
  },
481
- children: [
482
- /* @__PURE__ */ jsx(
483
- "div",
484
+ children: isPlaying ? (
485
+ /* Pause — clean rounded dual bars */
486
+ /* @__PURE__ */ jsxs(
487
+ "svg",
484
488
  {
485
- style: {
486
- position: "absolute",
487
- inset: 0,
488
- borderRadius: "50%",
489
- background: "radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 55%, transparent 75%)",
490
- pointerEvents: "none"
491
- }
489
+ width: playIconSize,
490
+ height: playIconSize,
491
+ viewBox: "0 0 24 24",
492
+ fill: "none",
493
+ xmlns: "http://www.w3.org/2000/svg",
494
+ children: [
495
+ /* @__PURE__ */ jsx("rect", { x: "6.5", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" }),
496
+ /* @__PURE__ */ jsx("rect", { x: "14", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" })
497
+ ]
492
498
  }
493
- ),
499
+ )
500
+ ) : (
501
+ /* Play — clean rounded triangle with standard optical balance */
494
502
  /* @__PURE__ */ jsx(
495
- "div",
503
+ "svg",
496
504
  {
497
- style: {
498
- position: "absolute",
499
- inset: 0,
500
- borderRadius: "50%",
501
- background: "radial-gradient(ellipse 50% 40% at 72% 75%, rgba(255,255,255,0.18) 0%, transparent 70%)",
502
- pointerEvents: "none"
503
- }
505
+ width: playIconSize,
506
+ height: playIconSize,
507
+ viewBox: "0 0 24 24",
508
+ fill: "none",
509
+ xmlns: "http://www.w3.org/2000/svg",
510
+ children: /* @__PURE__ */ jsx(
511
+ "polygon",
512
+ {
513
+ points: "6 3 20 12 6 21 6 3",
514
+ fill: "#0f172a",
515
+ stroke: "#0f172a",
516
+ strokeWidth: "2",
517
+ strokeLinejoin: "round",
518
+ strokeLinecap: "round"
519
+ }
520
+ )
504
521
  }
505
- ),
506
- isPlaying ? (
507
- /* Pause — two rounded bars, sized to match play icon proportions */
508
- /* @__PURE__ */ jsxs(
509
- "svg",
510
- {
511
- width: playIconSize,
512
- height: playIconSize,
513
- viewBox: "0 0 20 20",
514
- fill: "none",
515
- xmlns: "http://www.w3.org/2000/svg",
516
- children: [
517
- /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
518
- /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
519
- ]
520
- }
521
- )
522
- ) : (
523
- /*
524
- * Play — rounded-corner triangle from the provided SVG path.
525
- * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
526
- * We flatten the transform: effective drawing area is 240×250 units.
527
- */
528
- /* @__PURE__ */ jsx(
529
- "svg",
530
- {
531
- width: playIconSize,
532
- height: playIconSize,
533
- viewBox: "0 0 240 250",
534
- fill: "none",
535
- xmlns: "http://www.w3.org/2000/svg",
536
- style: { transform: "translateX(4%)" },
537
- children: /* @__PURE__ */ jsx(
538
- "path",
539
- {
540
- d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
541
- fill: "white"
542
- }
543
- )
544
- }
545
- )
546
522
  )
547
- ]
523
+ )
548
524
  }
549
525
  )
550
526
  }
package/dist/{HlsPlayer-BVS6BVF7.mjs → HlsPlayer-ZGFEVSKL.mjs} RENAMED
@@ -280,10 +280,10 @@ var HlsPlayer = React.memo(
280
280
  }, [isMobile, resetInactivityTimer]);
281
281
  const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
282
282
  const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
283
- const playBtnSize = "clamp(44px, 8vmin, 80px)";
283
+ const playBtnSize = "clamp(40px, 6.5vmin, 68px)";
284
284
  const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
285
285
  const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
286
- const playIconSize = "clamp(24px, 4.5vmin, 44px)";
286
+ const playIconSize = "clamp(18px, 3.2vmin, 32px)";
287
287
  const iconButtonStyle = {
288
288
  pointerEvents: isControlsVisible ? "auto" : "none",
289
289
  width: iconBtnSize,
@@ -373,11 +373,24 @@ var HlsPlayer = React.memo(
373
373
  ),
374
374
  /* @__PURE__ */ jsx("style", { children: `
375
375
  .hls-play-btn {
376
- will-change: transform;
377
- transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
376
+ transform: translateZ(0);
377
+ -webkit-transform: translateZ(0);
378
+ backface-visibility: hidden;
379
+ -webkit-backface-visibility: hidden;
380
+ transform-origin: center center;
381
+ transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
382
+ box-shadow 0.24s cubic-bezier(0.25, 1, 0.5, 1),
383
+ background-color 0.2s ease;
378
384
  }
379
385
  .hls-play-btn:hover {
380
- transform: scale(1.08);
386
+ transform: scale(1.05) translateZ(0);
387
+ -webkit-transform: scale(1.05) translateZ(0);
388
+ background-color: #ffffff !important;
389
+ box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 1px #ffffff !important;
390
+ }
391
+ .hls-play-btn:active {
392
+ transform: scale(0.96) translateZ(0);
393
+ -webkit-transform: scale(0.96) translateZ(0);
381
394
  }
382
395
  ` }),
383
396
  isBuffering && /* @__PURE__ */ jsxs(
@@ -391,51 +404,39 @@ var HlsPlayer = React.memo(
391
404
  to { transform: rotate(360deg); }
392
405
  }
393
406
  .hls-spinner {
394
- animation: hls-spin 1s linear infinite;
395
- filter: drop-shadow(0 0 6px rgba(243, 31, 73, 0.7))
396
- drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
407
+ animation: hls-spin 0.85s linear infinite;
408
+ filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
397
409
  }
398
410
  ` }),
399
411
  /* @__PURE__ */ jsxs(
400
412
  "svg",
401
413
  {
402
414
  className: "hls-spinner",
403
- width: "clamp(44px, 8vmin, 72px)",
404
- height: "clamp(44px, 8vmin, 72px)",
405
- viewBox: "0 0 72 72",
415
+ width: "clamp(44px, 8vmin, 64px)",
416
+ height: "clamp(44px, 8vmin, 64px)",
417
+ viewBox: "0 0 48 48",
406
418
  fill: "none",
407
419
  xmlns: "http://www.w3.org/2000/svg",
408
420
  children: [
409
- /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "hls-arc-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
410
- /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(243,31,73,0)" }),
411
- /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "rgba(243,31,73,1)" }),
412
- /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(143,38,237,1)" })
413
- ] }) }),
414
- Array.from({ length: 18 }).map((_, i) => {
415
- const angle = i / 18 * 360;
416
- const opacity = 0.15 + i / 17 * 0.85;
417
- const rad = (angle - 90) * (Math.PI / 180);
418
- const r = 30;
419
- const cx = 36 + r * Math.cos(rad);
420
- const cy = 36 + r * Math.sin(rad);
421
- const t = i / 17;
422
- const r1 = Math.round(243 * (1 - t) + 143 * t);
423
- const g1 = Math.round(31 * (1 - t) + 38 * t);
424
- const b1 = Math.round(73 * (1 - t) + 237 * t);
425
- return /* @__PURE__ */ jsx(
426
- "rect",
427
- {
428
- x: cx - 2.2,
429
- y: cy - 5.5,
430
- width: 4.4,
431
- height: 11,
432
- rx: 2.2,
433
- fill: `rgba(${r1},${g1},${b1},${opacity})`,
434
- transform: `rotate(${angle}, ${cx}, ${cy})`
435
- },
436
- i
437
- );
438
- })
421
+ /* @__PURE__ */ jsx(
422
+ "circle",
423
+ {
424
+ cx: "24",
425
+ cy: "24",
426
+ r: "18",
427
+ stroke: "rgba(255, 255, 255, 0.25)",
428
+ strokeWidth: "3.5"
429
+ }
430
+ ),
431
+ /* @__PURE__ */ jsx(
432
+ "path",
433
+ {
434
+ d: "M24 6a18 18 0 0 1 18 18",
435
+ stroke: "#ffffff",
436
+ strokeWidth: "3.5",
437
+ strokeLinecap: "round"
438
+ }
439
+ )
439
440
  ]
440
441
  }
441
442
  )
@@ -450,7 +451,7 @@ var HlsPlayer = React.memo(
450
451
  opacity: isControlsVisible ? 1 : 0,
451
452
  transition: "opacity 0.3s ease"
452
453
  },
453
- children: /* @__PURE__ */ jsxs(
454
+ children: /* @__PURE__ */ jsx(
454
455
  "button",
455
456
  {
456
457
  type: "button",
@@ -466,83 +467,58 @@ var HlsPlayer = React.memo(
466
467
  width: playBtnSize,
467
468
  height: playBtnSize,
468
469
  borderRadius: "50%",
469
- border: "none",
470
+ border: "1px solid rgba(255, 255, 255, 0.8)",
470
471
  cursor: "pointer",
471
472
  display: "flex",
472
473
  alignItems: "center",
473
474
  justifyContent: "center",
474
- background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
475
+ background: "rgba(255, 255, 255, 0.92)",
476
+ backdropFilter: "blur(12px)",
477
+ WebkitBackdropFilter: "blur(12px)",
478
+ boxShadow: "0 10px 30px -5px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 1)",
475
479
  flexShrink: 0,
476
- position: "relative",
477
- overflow: "hidden"
480
+ position: "relative"
478
481
  },
479
- children: [
480
- /* @__PURE__ */ jsx(
481
- "div",
482
+ children: isPlaying ? (
483
+ /* Pause — clean rounded dual bars */
484
+ /* @__PURE__ */ jsxs(
485
+ "svg",
482
486
  {
483
- style: {
484
- position: "absolute",
485
- inset: 0,
486
- borderRadius: "50%",
487
- background: "radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 55%, transparent 75%)",
488
- pointerEvents: "none"
489
- }
487
+ width: playIconSize,
488
+ height: playIconSize,
489
+ viewBox: "0 0 24 24",
490
+ fill: "none",
491
+ xmlns: "http://www.w3.org/2000/svg",
492
+ children: [
493
+ /* @__PURE__ */ jsx("rect", { x: "6.5", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" }),
494
+ /* @__PURE__ */ jsx("rect", { x: "14", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" })
495
+ ]
490
496
  }
491
- ),
497
+ )
498
+ ) : (
499
+ /* Play — clean rounded triangle with standard optical balance */
492
500
  /* @__PURE__ */ jsx(
493
- "div",
501
+ "svg",
494
502
  {
495
- style: {
496
- position: "absolute",
497
- inset: 0,
498
- borderRadius: "50%",
499
- background: "radial-gradient(ellipse 50% 40% at 72% 75%, rgba(255,255,255,0.18) 0%, transparent 70%)",
500
- pointerEvents: "none"
501
- }
503
+ width: playIconSize,
504
+ height: playIconSize,
505
+ viewBox: "0 0 24 24",
506
+ fill: "none",
507
+ xmlns: "http://www.w3.org/2000/svg",
508
+ children: /* @__PURE__ */ jsx(
509
+ "polygon",
510
+ {
511
+ points: "6 3 20 12 6 21 6 3",
512
+ fill: "#0f172a",
513
+ stroke: "#0f172a",
514
+ strokeWidth: "2",
515
+ strokeLinejoin: "round",
516
+ strokeLinecap: "round"
517
+ }
518
+ )
502
519
  }
503
- ),
504
- isPlaying ? (
505
- /* Pause — two rounded bars, sized to match play icon proportions */
506
- /* @__PURE__ */ jsxs(
507
- "svg",
508
- {
509
- width: playIconSize,
510
- height: playIconSize,
511
- viewBox: "0 0 20 20",
512
- fill: "none",
513
- xmlns: "http://www.w3.org/2000/svg",
514
- children: [
515
- /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
516
- /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
517
- ]
518
- }
519
- )
520
- ) : (
521
- /*
522
- * Play — rounded-corner triangle from the provided SVG path.
523
- * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
524
- * We flatten the transform: effective drawing area is 240×250 units.
525
- */
526
- /* @__PURE__ */ jsx(
527
- "svg",
528
- {
529
- width: playIconSize,
530
- height: playIconSize,
531
- viewBox: "0 0 240 250",
532
- fill: "none",
533
- xmlns: "http://www.w3.org/2000/svg",
534
- style: { transform: "translateX(4%)" },
535
- children: /* @__PURE__ */ jsx(
536
- "path",
537
- {
538
- d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
539
- fill: "white"
540
- }
541
- )
542
- }
543
- )
544
520
  )
545
- ]
521
+ )
546
522
  }
547
523
  )
548
524
  }
package/dist/index.js CHANGED
@@ -476,10 +476,10 @@ var init_HlsPlayer = __esm({
476
476
  }, [isMobile, resetInactivityTimer]);
477
477
  const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
478
478
  const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
479
- const playBtnSize = "clamp(44px, 8vmin, 80px)";
479
+ const playBtnSize = "clamp(40px, 6.5vmin, 68px)";
480
480
  const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
481
481
  const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
482
- const playIconSize = "clamp(24px, 4.5vmin, 44px)";
482
+ const playIconSize = "clamp(18px, 3.2vmin, 32px)";
483
483
  const iconButtonStyle = {
484
484
  pointerEvents: isControlsVisible ? "auto" : "none",
485
485
  width: iconBtnSize,
@@ -569,11 +569,24 @@ var init_HlsPlayer = __esm({
569
569
  ),
570
570
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
571
571
  .hls-play-btn {
572
- will-change: transform;
573
- transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
572
+ transform: translateZ(0);
573
+ -webkit-transform: translateZ(0);
574
+ backface-visibility: hidden;
575
+ -webkit-backface-visibility: hidden;
576
+ transform-origin: center center;
577
+ transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
578
+ box-shadow 0.24s cubic-bezier(0.25, 1, 0.5, 1),
579
+ background-color 0.2s ease;
574
580
  }
575
581
  .hls-play-btn:hover {
576
- transform: scale(1.08);
582
+ transform: scale(1.05) translateZ(0);
583
+ -webkit-transform: scale(1.05) translateZ(0);
584
+ background-color: #ffffff !important;
585
+ box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 1px #ffffff !important;
586
+ }
587
+ .hls-play-btn:active {
588
+ transform: scale(0.96) translateZ(0);
589
+ -webkit-transform: scale(0.96) translateZ(0);
577
590
  }
578
591
  ` }),
579
592
  isBuffering && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -587,51 +600,39 @@ var init_HlsPlayer = __esm({
587
600
  to { transform: rotate(360deg); }
588
601
  }
589
602
  .hls-spinner {
590
- animation: hls-spin 1s linear infinite;
591
- filter: drop-shadow(0 0 6px rgba(243, 31, 73, 0.7))
592
- drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
603
+ animation: hls-spin 0.85s linear infinite;
604
+ filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
593
605
  }
594
606
  ` }),
595
607
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
596
608
  "svg",
597
609
  {
598
610
  className: "hls-spinner",
599
- width: "clamp(44px, 8vmin, 72px)",
600
- height: "clamp(44px, 8vmin, 72px)",
601
- viewBox: "0 0 72 72",
611
+ width: "clamp(44px, 8vmin, 64px)",
612
+ height: "clamp(44px, 8vmin, 64px)",
613
+ viewBox: "0 0 48 48",
602
614
  fill: "none",
603
615
  xmlns: "http://www.w3.org/2000/svg",
604
616
  children: [
605
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "hls-arc-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
606
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "rgba(243,31,73,0)" }),
607
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "40%", stopColor: "rgba(243,31,73,1)" }),
608
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "rgba(143,38,237,1)" })
609
- ] }) }),
610
- Array.from({ length: 18 }).map((_, i) => {
611
- const angle = i / 18 * 360;
612
- const opacity = 0.15 + i / 17 * 0.85;
613
- const rad = (angle - 90) * (Math.PI / 180);
614
- const r = 30;
615
- const cx = 36 + r * Math.cos(rad);
616
- const cy = 36 + r * Math.sin(rad);
617
- const t = i / 17;
618
- const r1 = Math.round(243 * (1 - t) + 143 * t);
619
- const g1 = Math.round(31 * (1 - t) + 38 * t);
620
- const b1 = Math.round(73 * (1 - t) + 237 * t);
621
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
622
- "rect",
623
- {
624
- x: cx - 2.2,
625
- y: cy - 5.5,
626
- width: 4.4,
627
- height: 11,
628
- rx: 2.2,
629
- fill: `rgba(${r1},${g1},${b1},${opacity})`,
630
- transform: `rotate(${angle}, ${cx}, ${cy})`
631
- },
632
- i
633
- );
634
- })
617
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
618
+ "circle",
619
+ {
620
+ cx: "24",
621
+ cy: "24",
622
+ r: "18",
623
+ stroke: "rgba(255, 255, 255, 0.25)",
624
+ strokeWidth: "3.5"
625
+ }
626
+ ),
627
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
628
+ "path",
629
+ {
630
+ d: "M24 6a18 18 0 0 1 18 18",
631
+ stroke: "#ffffff",
632
+ strokeWidth: "3.5",
633
+ strokeLinecap: "round"
634
+ }
635
+ )
635
636
  ]
636
637
  }
637
638
  )
@@ -646,7 +647,7 @@ var init_HlsPlayer = __esm({
646
647
  opacity: isControlsVisible ? 1 : 0,
647
648
  transition: "opacity 0.3s ease"
648
649
  },
649
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
650
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
650
651
  "button",
651
652
  {
652
653
  type: "button",
@@ -662,83 +663,58 @@ var init_HlsPlayer = __esm({
662
663
  width: playBtnSize,
663
664
  height: playBtnSize,
664
665
  borderRadius: "50%",
665
- border: "none",
666
+ border: "1px solid rgba(255, 255, 255, 0.8)",
666
667
  cursor: "pointer",
667
668
  display: "flex",
668
669
  alignItems: "center",
669
670
  justifyContent: "center",
670
- background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
671
+ background: "rgba(255, 255, 255, 0.92)",
672
+ backdropFilter: "blur(12px)",
673
+ WebkitBackdropFilter: "blur(12px)",
674
+ boxShadow: "0 10px 30px -5px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 1)",
671
675
  flexShrink: 0,
672
- position: "relative",
673
- overflow: "hidden"
676
+ position: "relative"
674
677
  },
675
- children: [
676
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
677
- "div",
678
+ children: isPlaying ? (
679
+ /* Pause — clean rounded dual bars */
680
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
681
+ "svg",
678
682
  {
679
- style: {
680
- position: "absolute",
681
- inset: 0,
682
- borderRadius: "50%",
683
- background: "radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 55%, transparent 75%)",
684
- pointerEvents: "none"
685
- }
683
+ width: playIconSize,
684
+ height: playIconSize,
685
+ viewBox: "0 0 24 24",
686
+ fill: "none",
687
+ xmlns: "http://www.w3.org/2000/svg",
688
+ children: [
689
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "6.5", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" }),
690
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "14", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" })
691
+ ]
686
692
  }
687
- ),
693
+ )
694
+ ) : (
695
+ /* Play — clean rounded triangle with standard optical balance */
688
696
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
689
- "div",
697
+ "svg",
690
698
  {
691
- style: {
692
- position: "absolute",
693
- inset: 0,
694
- borderRadius: "50%",
695
- background: "radial-gradient(ellipse 50% 40% at 72% 75%, rgba(255,255,255,0.18) 0%, transparent 70%)",
696
- pointerEvents: "none"
697
- }
699
+ width: playIconSize,
700
+ height: playIconSize,
701
+ viewBox: "0 0 24 24",
702
+ fill: "none",
703
+ xmlns: "http://www.w3.org/2000/svg",
704
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
705
+ "polygon",
706
+ {
707
+ points: "6 3 20 12 6 21 6 3",
708
+ fill: "#0f172a",
709
+ stroke: "#0f172a",
710
+ strokeWidth: "2",
711
+ strokeLinejoin: "round",
712
+ strokeLinecap: "round"
713
+ }
714
+ )
698
715
  }
699
- ),
700
- isPlaying ? (
701
- /* Pause — two rounded bars, sized to match play icon proportions */
702
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
703
- "svg",
704
- {
705
- width: playIconSize,
706
- height: playIconSize,
707
- viewBox: "0 0 20 20",
708
- fill: "none",
709
- xmlns: "http://www.w3.org/2000/svg",
710
- children: [
711
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
712
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
713
- ]
714
- }
715
- )
716
- ) : (
717
- /*
718
- * Play — rounded-corner triangle from the provided SVG path.
719
- * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
720
- * We flatten the transform: effective drawing area is 240×250 units.
721
- */
722
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
723
- "svg",
724
- {
725
- width: playIconSize,
726
- height: playIconSize,
727
- viewBox: "0 0 240 250",
728
- fill: "none",
729
- xmlns: "http://www.w3.org/2000/svg",
730
- style: { transform: "translateX(4%)" },
731
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
732
- "path",
733
- {
734
- d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
735
- fill: "white"
736
- }
737
- )
738
- }
739
- )
740
716
  )
741
- ]
717
+ )
742
718
  }
743
719
  )
744
720
  }
package/dist/index.mjs CHANGED
@@ -140,7 +140,7 @@ import React3 from "react";
140
140
  // src/components/DeviceAssetSelector.tsx
141
141
  import dynamic2 from "next/dynamic";
142
142
  import { jsx as jsx3 } from "react/jsx-runtime";
143
- var HlsPlayer = dynamic2(() => import("./HlsPlayer-IW52N5RG.mjs"), { ssr: false });
143
+ var HlsPlayer = dynamic2(() => import("./HlsPlayer-AUZ42WTT.mjs"), { ssr: false });
144
144
  var FORMAT_CLASSES = {
145
145
  center: "justify-center",
146
146
  left: "justify-start",
@@ -550,7 +550,7 @@ import React15 from "react";
550
550
  // src/components/pageRenderingEngine/nodes/ImageNode.tsx
551
551
  import dynamic7 from "next/dynamic";
552
552
  import { jsx as jsx18 } from "react/jsx-runtime";
553
- var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-IW52N5RG.mjs"), { ssr: false });
553
+ var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-AUZ42WTT.mjs"), { ssr: false });
554
554
  var getNestedValue = (obj, path) => {
555
555
  if (!obj || !path) return void 0;
556
556
  return path.split(".").reduce((current, key) => {
@@ -1482,7 +1482,7 @@ var NoDataFound_default = NoDataFound;
1482
1482
  // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
1483
1483
  import dynamic11 from "next/dynamic";
1484
1484
  import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
1485
- var HlsPlayer3 = dynamic11(() => import("./HlsPlayer-IW52N5RG.mjs"), { ssr: false });
1485
+ var HlsPlayer3 = dynamic11(() => import("./HlsPlayer-AUZ42WTT.mjs"), { ssr: false });
1486
1486
  var deviceToMediaQuery = (device) => {
1487
1487
  switch (device) {
1488
1488
  case "lg":
package/dist/server.js CHANGED
@@ -346,10 +346,10 @@ var init_HlsPlayer = __esm({
346
346
  }, [isMobile, resetInactivityTimer]);
347
347
  const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
348
348
  const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
349
- const playBtnSize = "clamp(44px, 8vmin, 80px)";
349
+ const playBtnSize = "clamp(40px, 6.5vmin, 68px)";
350
350
  const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
351
351
  const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
352
- const playIconSize = "clamp(24px, 4.5vmin, 44px)";
352
+ const playIconSize = "clamp(18px, 3.2vmin, 32px)";
353
353
  const iconButtonStyle = {
354
354
  pointerEvents: isControlsVisible ? "auto" : "none",
355
355
  width: iconBtnSize,
@@ -439,11 +439,24 @@ var init_HlsPlayer = __esm({
439
439
  ),
440
440
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
441
441
  .hls-play-btn {
442
- will-change: transform;
443
- transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
442
+ transform: translateZ(0);
443
+ -webkit-transform: translateZ(0);
444
+ backface-visibility: hidden;
445
+ -webkit-backface-visibility: hidden;
446
+ transform-origin: center center;
447
+ transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
448
+ box-shadow 0.24s cubic-bezier(0.25, 1, 0.5, 1),
449
+ background-color 0.2s ease;
444
450
  }
445
451
  .hls-play-btn:hover {
446
- transform: scale(1.08);
452
+ transform: scale(1.05) translateZ(0);
453
+ -webkit-transform: scale(1.05) translateZ(0);
454
+ background-color: #ffffff !important;
455
+ box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 1px #ffffff !important;
456
+ }
457
+ .hls-play-btn:active {
458
+ transform: scale(0.96) translateZ(0);
459
+ -webkit-transform: scale(0.96) translateZ(0);
447
460
  }
448
461
  ` }),
449
462
  isBuffering && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -457,51 +470,39 @@ var init_HlsPlayer = __esm({
457
470
  to { transform: rotate(360deg); }
458
471
  }
459
472
  .hls-spinner {
460
- animation: hls-spin 1s linear infinite;
461
- filter: drop-shadow(0 0 6px rgba(243, 31, 73, 0.7))
462
- drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
473
+ animation: hls-spin 0.85s linear infinite;
474
+ filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
463
475
  }
464
476
  ` }),
465
477
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
466
478
  "svg",
467
479
  {
468
480
  className: "hls-spinner",
469
- width: "clamp(44px, 8vmin, 72px)",
470
- height: "clamp(44px, 8vmin, 72px)",
471
- viewBox: "0 0 72 72",
481
+ width: "clamp(44px, 8vmin, 64px)",
482
+ height: "clamp(44px, 8vmin, 64px)",
483
+ viewBox: "0 0 48 48",
472
484
  fill: "none",
473
485
  xmlns: "http://www.w3.org/2000/svg",
474
486
  children: [
475
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "hls-arc-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
476
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0%", stopColor: "rgba(243,31,73,0)" }),
477
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "40%", stopColor: "rgba(243,31,73,1)" }),
478
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "100%", stopColor: "rgba(143,38,237,1)" })
479
- ] }) }),
480
- Array.from({ length: 18 }).map((_, i) => {
481
- const angle = i / 18 * 360;
482
- const opacity = 0.15 + i / 17 * 0.85;
483
- const rad = (angle - 90) * (Math.PI / 180);
484
- const r = 30;
485
- const cx = 36 + r * Math.cos(rad);
486
- const cy = 36 + r * Math.sin(rad);
487
- const t = i / 17;
488
- const r1 = Math.round(243 * (1 - t) + 143 * t);
489
- const g1 = Math.round(31 * (1 - t) + 38 * t);
490
- const b1 = Math.round(73 * (1 - t) + 237 * t);
491
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
492
- "rect",
493
- {
494
- x: cx - 2.2,
495
- y: cy - 5.5,
496
- width: 4.4,
497
- height: 11,
498
- rx: 2.2,
499
- fill: `rgba(${r1},${g1},${b1},${opacity})`,
500
- transform: `rotate(${angle}, ${cx}, ${cy})`
501
- },
502
- i
503
- );
504
- })
487
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
488
+ "circle",
489
+ {
490
+ cx: "24",
491
+ cy: "24",
492
+ r: "18",
493
+ stroke: "rgba(255, 255, 255, 0.25)",
494
+ strokeWidth: "3.5"
495
+ }
496
+ ),
497
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
498
+ "path",
499
+ {
500
+ d: "M24 6a18 18 0 0 1 18 18",
501
+ stroke: "#ffffff",
502
+ strokeWidth: "3.5",
503
+ strokeLinecap: "round"
504
+ }
505
+ )
505
506
  ]
506
507
  }
507
508
  )
@@ -516,7 +517,7 @@ var init_HlsPlayer = __esm({
516
517
  opacity: isControlsVisible ? 1 : 0,
517
518
  transition: "opacity 0.3s ease"
518
519
  },
519
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
520
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
520
521
  "button",
521
522
  {
522
523
  type: "button",
@@ -532,83 +533,58 @@ var init_HlsPlayer = __esm({
532
533
  width: playBtnSize,
533
534
  height: playBtnSize,
534
535
  borderRadius: "50%",
535
- border: "none",
536
+ border: "1px solid rgba(255, 255, 255, 0.8)",
536
537
  cursor: "pointer",
537
538
  display: "flex",
538
539
  alignItems: "center",
539
540
  justifyContent: "center",
540
- background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
541
+ background: "rgba(255, 255, 255, 0.92)",
542
+ backdropFilter: "blur(12px)",
543
+ WebkitBackdropFilter: "blur(12px)",
544
+ boxShadow: "0 10px 30px -5px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 1)",
541
545
  flexShrink: 0,
542
- position: "relative",
543
- overflow: "hidden"
546
+ position: "relative"
544
547
  },
545
- children: [
546
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
547
- "div",
548
+ children: isPlaying ? (
549
+ /* Pause — clean rounded dual bars */
550
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
551
+ "svg",
548
552
  {
549
- style: {
550
- position: "absolute",
551
- inset: 0,
552
- borderRadius: "50%",
553
- background: "radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 55%, transparent 75%)",
554
- pointerEvents: "none"
555
- }
553
+ width: playIconSize,
554
+ height: playIconSize,
555
+ viewBox: "0 0 24 24",
556
+ fill: "none",
557
+ xmlns: "http://www.w3.org/2000/svg",
558
+ children: [
559
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "6.5", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" }),
560
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "14", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" })
561
+ ]
556
562
  }
557
- ),
563
+ )
564
+ ) : (
565
+ /* Play — clean rounded triangle with standard optical balance */
558
566
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
559
- "div",
567
+ "svg",
560
568
  {
561
- style: {
562
- position: "absolute",
563
- inset: 0,
564
- borderRadius: "50%",
565
- background: "radial-gradient(ellipse 50% 40% at 72% 75%, rgba(255,255,255,0.18) 0%, transparent 70%)",
566
- pointerEvents: "none"
567
- }
569
+ width: playIconSize,
570
+ height: playIconSize,
571
+ viewBox: "0 0 24 24",
572
+ fill: "none",
573
+ xmlns: "http://www.w3.org/2000/svg",
574
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
575
+ "polygon",
576
+ {
577
+ points: "6 3 20 12 6 21 6 3",
578
+ fill: "#0f172a",
579
+ stroke: "#0f172a",
580
+ strokeWidth: "2",
581
+ strokeLinejoin: "round",
582
+ strokeLinecap: "round"
583
+ }
584
+ )
568
585
  }
569
- ),
570
- isPlaying ? (
571
- /* Pause — two rounded bars, sized to match play icon proportions */
572
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
573
- "svg",
574
- {
575
- width: playIconSize,
576
- height: playIconSize,
577
- viewBox: "0 0 20 20",
578
- fill: "none",
579
- xmlns: "http://www.w3.org/2000/svg",
580
- children: [
581
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
582
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
583
- ]
584
- }
585
- )
586
- ) : (
587
- /*
588
- * Play — rounded-corner triangle from the provided SVG path.
589
- * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
590
- * We flatten the transform: effective drawing area is 240×250 units.
591
- */
592
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
593
- "svg",
594
- {
595
- width: playIconSize,
596
- height: playIconSize,
597
- viewBox: "0 0 240 250",
598
- fill: "none",
599
- xmlns: "http://www.w3.org/2000/svg",
600
- style: { transform: "translateX(4%)" },
601
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
602
- "path",
603
- {
604
- d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
605
- fill: "white"
606
- }
607
- )
608
- }
609
- )
610
586
  )
611
- ]
587
+ )
612
588
  }
613
589
  )
614
590
  }
package/dist/server.mjs CHANGED
@@ -108,7 +108,7 @@ import dynamic2 from "next/dynamic";
108
108
  // src/components/DeviceAssetSelector.tsx
109
109
  import dynamic from "next/dynamic";
110
110
  import { jsx as jsx3 } from "react/jsx-runtime";
111
- var HlsPlayer = dynamic(() => import("./HlsPlayer-BVS6BVF7.mjs"), { ssr: false });
111
+ var HlsPlayer = dynamic(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
112
112
  var FORMAT_CLASSES = {
113
113
  center: "justify-center",
114
114
  left: "justify-start",
@@ -183,7 +183,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
183
183
 
184
184
  // src/components/pageRenderingEngine/nodes/ImageNode.tsx
185
185
  import { jsx as jsx4 } from "react/jsx-runtime";
186
- var HlsPlayer2 = dynamic2(() => import("./HlsPlayer-BVS6BVF7.mjs"), { ssr: false });
186
+ var HlsPlayer2 = dynamic2(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
187
187
  var getNestedValue = (obj, path) => {
188
188
  if (!obj || !path) return void 0;
189
189
  return path.split(".").reduce((current, key) => {
@@ -1450,7 +1450,7 @@ var NoDataFound_default = NoDataFound;
1450
1450
  // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
1451
1451
  import dynamic11 from "next/dynamic";
1452
1452
  import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
1453
- var HlsPlayer3 = dynamic11(() => import("./HlsPlayer-BVS6BVF7.mjs"), { ssr: false });
1453
+ var HlsPlayer3 = dynamic11(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
1454
1454
  var deviceToMediaQuery = (device) => {
1455
1455
  switch (device) {
1456
1456
  case "lg":
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clyrex-digital/clyrex-controls-dev",
3
- "version": "0.8.1-dev.20260916063140",
3
+ "version": "0.8.1-dev.20260916090938",
4
4
  "description": "Reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",