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

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 +126 -110
  4. package/dist/index.mjs +46 -6
  5. package/dist/server.js +126 -110
  6. package/dist/server.mjs +46 -6
  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
  }