unified-video-framework 1.4.120 → 1.4.122
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unified-video-framework",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.122",
|
|
4
4
|
"description": "Cross-platform video player framework supporting iOS, Android, Web, Smart TVs (Samsung/LG), Roku, and more",
|
|
5
5
|
"main": "packages/core/dist/index.js",
|
|
6
6
|
"types": "packages/core/dist/index.d.ts",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAUjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,GAAG,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,GAAG,CAAC;QACZ,IAAI,CAAC,EAAE,GAAG,CAAC;QACX,MAAM,CAAC,EAAE,GAAG,CAAC;QACb,qBAAqB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACxD;CACF;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,SAAS,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAChD,OAAO,CAAC,GAAG,CAAa;IACxB,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,mBAAmB,CAAc;IACzC,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,iBAAiB,CAAiB;IAC1C,OAAO,CAAC,iBAAiB,CAA4B;IACrD,OAAO,CAAC,iBAAiB,CAA+B;IACxD,OAAO,CAAC,mBAAmB,CAA+B;IAC1D,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,kBAAkB,CAA6C;IACvE,OAAO,CAAC,kBAAkB,CAA6C;IACvE,OAAO,CAAC,cAAc,CAAU;IAChC,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,mBAAmB,CAAK;IAChC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,eAAe,CAAkC;IACzD,OAAO,CAAC,aAAa,CAA4B;IAEjD,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,iBAAiB,CAAkB;IAG3C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,sBAAsB,CAAa;IAC3C,OAAO,CAAC,sBAAsB,CAAa;IAC3C,OAAO,CAAC,yBAAyB,CAAa;IAC9C,OAAO,CAAC,iBAAiB,CAAa;IAGtC,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,iBAAiB,CAA8B;IACvD,OAAO,CAAC,mBAAmB,CAAiB;IAC5C,OAAO,CAAC,KAAK,CAAa;IAG1B,OAAO,CAAC,iBAAiB,CAAa;IAGtC,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,mBAAmB,CAAO;IAGlC,OAAO,CAAC,sBAAsB,CAAkB;IAChD,OAAO,CAAC,mBAAmB,CAAa;IAGxC,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,SAAS;cAOD,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}
|
|
@@ -77,6 +77,18 @@ export class WebPlayer extends BasePlayer {
|
|
|
77
77
|
this.video.loop = this.config.loop ?? false;
|
|
78
78
|
this.video.playsInline = this.config.playsInline ?? true;
|
|
79
79
|
this.video.preload = this.config.preload ?? 'metadata';
|
|
80
|
+
this.video.setAttribute('webkit-playsinline', 'true');
|
|
81
|
+
this.video.setAttribute('playsinline', 'true');
|
|
82
|
+
this.video.setAttribute('x-webkit-airplay', 'allow');
|
|
83
|
+
this.video.setAttribute('disablepictureinpicture', 'false');
|
|
84
|
+
this.video.style.objectFit = 'contain';
|
|
85
|
+
this.video.style.objectPosition = 'center';
|
|
86
|
+
this.video.style.backgroundColor = '#000';
|
|
87
|
+
this.video.style.touchAction = 'manipulation';
|
|
88
|
+
this.video.style.webkitTouchCallout = 'none';
|
|
89
|
+
this.video.style.webkitTapHighlightColor = 'transparent';
|
|
90
|
+
this.video.style.transform = 'translateZ(0)';
|
|
91
|
+
this.video.style.willChange = 'transform';
|
|
80
92
|
if (this.config.crossOrigin) {
|
|
81
93
|
this.video.crossOrigin = this.config.crossOrigin;
|
|
82
94
|
}
|
|
@@ -1462,20 +1474,160 @@ export class WebPlayer extends BasePlayer {
|
|
|
1462
1474
|
aspect-ratio: 16 / 9;
|
|
1463
1475
|
background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
|
|
1464
1476
|
overflow: hidden;
|
|
1465
|
-
display: flex;
|
|
1466
|
-
align-items: center;
|
|
1467
|
-
justify-content: center;
|
|
1468
1477
|
}
|
|
1469
1478
|
|
|
1470
1479
|
.uvf-video {
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1480
|
+
position: absolute;
|
|
1481
|
+
top: 0;
|
|
1482
|
+
left: 0;
|
|
1474
1483
|
width: 100%;
|
|
1475
1484
|
height: 100%;
|
|
1476
1485
|
background: #000;
|
|
1477
1486
|
object-fit: contain;
|
|
1478
1487
|
object-position: center;
|
|
1488
|
+
|
|
1489
|
+
/* Enhanced mobile optimization */
|
|
1490
|
+
-webkit-playsinline: true;
|
|
1491
|
+
playsinline: true;
|
|
1492
|
+
|
|
1493
|
+
/* Prevent unwanted interactions on mobile */
|
|
1494
|
+
-webkit-user-select: none;
|
|
1495
|
+
-moz-user-select: none;
|
|
1496
|
+
-ms-user-select: none;
|
|
1497
|
+
user-select: none;
|
|
1498
|
+
|
|
1499
|
+
/* Smooth rendering and hardware acceleration */
|
|
1500
|
+
-webkit-transform: translateZ(0);
|
|
1501
|
+
transform: translateZ(0);
|
|
1502
|
+
will-change: transform;
|
|
1503
|
+
|
|
1504
|
+
/* Touch action optimization */
|
|
1505
|
+
touch-action: manipulation;
|
|
1506
|
+
|
|
1507
|
+
/* Prevent context menu on long press */
|
|
1508
|
+
-webkit-touch-callout: none;
|
|
1509
|
+
-webkit-tap-highlight-color: transparent;
|
|
1510
|
+
|
|
1511
|
+
/* Ensure consistent rendering across browsers */
|
|
1512
|
+
image-rendering: -webkit-optimize-contrast;
|
|
1513
|
+
image-rendering: crisp-edges;
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
/* Enhanced mobile-specific video optimizations with safe areas */
|
|
1517
|
+
@media screen and (max-width: 767px) {
|
|
1518
|
+
.uvf-video {
|
|
1519
|
+
/* Safe area considerations for video content */
|
|
1520
|
+
margin-top: env(safe-area-inset-top, 0px);
|
|
1521
|
+
margin-bottom: env(safe-area-inset-bottom, 0px);
|
|
1522
|
+
margin-left: env(safe-area-inset-left, 0px);
|
|
1523
|
+
margin-right: env(safe-area-inset-right, 0px);
|
|
1524
|
+
|
|
1525
|
+
/* Adjust video area to account for safe zones */
|
|
1526
|
+
max-height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
|
|
1527
|
+
max-width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
|
|
1528
|
+
|
|
1529
|
+
/* Enhanced object positioning for mobile */
|
|
1530
|
+
object-position: center center;
|
|
1531
|
+
|
|
1532
|
+
/* Prevent video stretching on mobile */
|
|
1533
|
+
min-width: 0;
|
|
1534
|
+
min-height: 0;
|
|
1535
|
+
|
|
1536
|
+
/* Mobile-specific rendering optimizations */
|
|
1537
|
+
-webkit-transform: translate3d(0, 0, 0);
|
|
1538
|
+
transform: translate3d(0, 0, 0);
|
|
1539
|
+
|
|
1540
|
+
/* Optimize for mobile performance */
|
|
1541
|
+
backface-visibility: hidden;
|
|
1542
|
+
-webkit-backface-visibility: hidden;
|
|
1543
|
+
|
|
1544
|
+
/* Prevent video from being affected by orientation changes */
|
|
1545
|
+
-webkit-transform-style: preserve-3d;
|
|
1546
|
+
transform-style: preserve-3d;
|
|
1547
|
+
}
|
|
1548
|
+
|
|
1549
|
+
/* Portrait orientation specific adjustments */
|
|
1550
|
+
@media (orientation: portrait) {
|
|
1551
|
+
.uvf-video {
|
|
1552
|
+
/* Ensure video doesn't get cut off in portrait */
|
|
1553
|
+
max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px);
|
|
1554
|
+
}
|
|
1555
|
+
}
|
|
1556
|
+
|
|
1557
|
+
/* Landscape orientation specific adjustments */
|
|
1558
|
+
@media (orientation: landscape) {
|
|
1559
|
+
.uvf-video {
|
|
1560
|
+
/* Full height usage in landscape mode */
|
|
1561
|
+
max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 80px);
|
|
1562
|
+
max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
|
|
1563
|
+
}
|
|
1564
|
+
}
|
|
1565
|
+
|
|
1566
|
+
/* High DPI display optimizations */
|
|
1567
|
+
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
1568
|
+
.uvf-video {
|
|
1569
|
+
/* Enhanced rendering for retina displays */
|
|
1570
|
+
image-rendering: -webkit-optimize-contrast;
|
|
1571
|
+
-webkit-font-smoothing: antialiased;
|
|
1572
|
+
-moz-osx-font-smoothing: grayscale;
|
|
1573
|
+
}
|
|
1574
|
+
}
|
|
1575
|
+
|
|
1576
|
+
/* iOS Safari specific video optimizations */
|
|
1577
|
+
@supports (-webkit-appearance: none) {
|
|
1578
|
+
.uvf-video {
|
|
1579
|
+
/* iOS-specific video handling */
|
|
1580
|
+
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
|
|
1581
|
+
|
|
1582
|
+
/* Prevent iOS Safari video rendering issues */
|
|
1583
|
+
-webkit-transform: translateZ(0);
|
|
1584
|
+
transform: translateZ(0);
|
|
1585
|
+
|
|
1586
|
+
/* iOS safe area integration */
|
|
1587
|
+
padding-top: env(safe-area-inset-top, 0px);
|
|
1588
|
+
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
1589
|
+
padding-left: env(safe-area-inset-left, 0px);
|
|
1590
|
+
padding-right: env(safe-area-inset-right, 0px);
|
|
1591
|
+
|
|
1592
|
+
/* Account for padding in dimensions */
|
|
1593
|
+
box-sizing: border-box;
|
|
1594
|
+
height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
|
|
1595
|
+
width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
|
|
1596
|
+
}
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
/* Android Chrome specific optimizations */
|
|
1600
|
+
@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1) {
|
|
1601
|
+
.uvf-video {
|
|
1602
|
+
/* Android-specific optimizations */
|
|
1603
|
+
-webkit-transform: translateZ(0);
|
|
1604
|
+
transform: translateZ(0);
|
|
1605
|
+
|
|
1606
|
+
/* Handle Android navigation gestures */
|
|
1607
|
+
margin-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
|
|
1608
|
+
}
|
|
1609
|
+
}
|
|
1610
|
+
}
|
|
1611
|
+
|
|
1612
|
+
/* Video fullscreen enhancements */
|
|
1613
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-video {
|
|
1614
|
+
/* Fullscreen-specific video optimizations */
|
|
1615
|
+
width: 100vw !important;
|
|
1616
|
+
height: 100vh !important;
|
|
1617
|
+
max-width: 100vw;
|
|
1618
|
+
max-height: 100vh;
|
|
1619
|
+
|
|
1620
|
+
/* Account for safe areas in fullscreen */
|
|
1621
|
+
padding-top: env(safe-area-inset-top, 0px);
|
|
1622
|
+
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
1623
|
+
padding-left: env(safe-area-inset-left, 0px);
|
|
1624
|
+
padding-right: env(safe-area-inset-right, 0px);
|
|
1625
|
+
box-sizing: border-box;
|
|
1626
|
+
|
|
1627
|
+
/* Optimize fullscreen rendering */
|
|
1628
|
+
-webkit-transform: translateZ(0);
|
|
1629
|
+
transform: translateZ(0);
|
|
1630
|
+
will-change: transform;
|
|
1479
1631
|
}
|
|
1480
1632
|
|
|
1481
1633
|
.uvf-watermark-layer {
|
|
@@ -2635,158 +2787,70 @@ export class WebPlayer extends BasePlayer {
|
|
|
2635
2787
|
}
|
|
2636
2788
|
}
|
|
2637
2789
|
|
|
2638
|
-
/*
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
@media screen and (max-width: 767px) {
|
|
2642
|
-
/* Force full viewport usage with proper safe area handling */
|
|
2790
|
+
/* Enhanced Responsive Media Queries with UX Best Practices */
|
|
2791
|
+
/* Mobile devices (portrait) - Enhanced UX with Safe Areas */
|
|
2792
|
+
@media screen and (max-width: 767px) and (orientation: portrait) {
|
|
2643
2793
|
.uvf-responsive-container {
|
|
2644
|
-
|
|
2645
|
-
top: 0;
|
|
2646
|
-
left: 0;
|
|
2794
|
+
padding: 0;
|
|
2647
2795
|
width: 100vw !important;
|
|
2648
|
-
height: 100vh
|
|
2649
|
-
height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
|
|
2796
|
+
height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
|
|
2650
2797
|
margin: 0;
|
|
2651
|
-
|
|
2798
|
+
position: relative;
|
|
2652
2799
|
overflow: hidden;
|
|
2653
|
-
z-index: 1000;
|
|
2654
2800
|
}
|
|
2655
2801
|
|
|
2656
|
-
/* Modern viewport support */
|
|
2657
2802
|
@supports (height: 100dvh) {
|
|
2658
2803
|
.uvf-responsive-container {
|
|
2659
|
-
height: 100dvh
|
|
2660
|
-
height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
|
|
2804
|
+
height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
|
|
2661
2805
|
}
|
|
2662
2806
|
}
|
|
2663
2807
|
|
|
2664
|
-
/* Player wrapper fills container completely */
|
|
2665
2808
|
.uvf-responsive-container .uvf-player-wrapper {
|
|
2666
|
-
|
|
2667
|
-
top: 0;
|
|
2668
|
-
left: 0;
|
|
2669
|
-
width: 100% !important;
|
|
2809
|
+
width: 100vw !important;
|
|
2670
2810
|
height: 100% !important;
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2811
|
+
min-height: calc(100vh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
|
|
2812
|
+
}
|
|
2813
|
+
|
|
2814
|
+
@supports (height: 100dvh) {
|
|
2815
|
+
.uvf-responsive-container .uvf-player-wrapper {
|
|
2816
|
+
min-height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
|
|
2817
|
+
}
|
|
2675
2818
|
}
|
|
2676
2819
|
|
|
2677
|
-
/* Video container optimized for mobile centering */
|
|
2678
2820
|
.uvf-responsive-container .uvf-video-container {
|
|
2679
|
-
|
|
2680
|
-
width: 100% !important;
|
|
2821
|
+
width: 100vw !important;
|
|
2681
2822
|
height: 100% !important;
|
|
2682
|
-
flex: 1;
|
|
2683
2823
|
aspect-ratio: unset !important;
|
|
2684
|
-
|
|
2685
|
-
align-items: center;
|
|
2686
|
-
justify-content: center;
|
|
2687
|
-
background: #000;
|
|
2688
|
-
overflow: hidden;
|
|
2689
|
-
}
|
|
2690
|
-
|
|
2691
|
-
/* Perfectly centered mobile video */
|
|
2692
|
-
.uvf-responsive-container .uvf-video {
|
|
2693
|
-
position: relative;
|
|
2694
|
-
display: block;
|
|
2695
|
-
width: 100%;
|
|
2696
|
-
height: 100%;
|
|
2697
|
-
max-width: 100%;
|
|
2698
|
-
max-height: 100%;
|
|
2699
|
-
object-fit: contain;
|
|
2700
|
-
object-position: center center;
|
|
2701
|
-
background: transparent;
|
|
2824
|
+
min-height: inherit;
|
|
2702
2825
|
}
|
|
2703
2826
|
|
|
2704
|
-
/*
|
|
2827
|
+
/* Enhanced mobile controls bar with safe area padding */
|
|
2705
2828
|
.uvf-controls-bar {
|
|
2706
|
-
position: absolute
|
|
2707
|
-
bottom:
|
|
2708
|
-
left:
|
|
2709
|
-
right:
|
|
2710
|
-
|
|
2711
|
-
padding: 16px;
|
|
2712
|
-
padding-
|
|
2713
|
-
padding-
|
|
2714
|
-
|
|
2715
|
-
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 70%, transparent 100%);
|
|
2716
|
-
backdrop-filter: blur(10px);
|
|
2717
|
-
-webkit-backdrop-filter: blur(10px);
|
|
2829
|
+
position: absolute;
|
|
2830
|
+
bottom: 0;
|
|
2831
|
+
left: 0;
|
|
2832
|
+
right: 0;
|
|
2833
|
+
padding: 16px 12px;
|
|
2834
|
+
padding-bottom: calc(16px + var(--uvf-safe-area-bottom));
|
|
2835
|
+
padding-left: calc(12px + var(--uvf-safe-area-left));
|
|
2836
|
+
padding-right: calc(12px + var(--uvf-safe-area-right));
|
|
2837
|
+
background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 80%, var(--uvf-overlay-transparent) 100%);
|
|
2718
2838
|
box-sizing: border-box;
|
|
2719
|
-
z-index:
|
|
2720
|
-
opacity: 1;
|
|
2721
|
-
transform: none;
|
|
2722
|
-
}
|
|
2723
|
-
|
|
2724
|
-
/* Top controls with safe area */
|
|
2725
|
-
.uvf-top-controls {
|
|
2726
|
-
position: absolute !important;
|
|
2727
|
-
top: calc(16px + env(safe-area-inset-top, 0px));
|
|
2728
|
-
right: calc(16px + env(safe-area-inset-right, 0px));
|
|
2729
|
-
z-index: 2000;
|
|
2730
|
-
}
|
|
2731
|
-
|
|
2732
|
-
/* Title bar with safe area */
|
|
2733
|
-
.uvf-title-bar {
|
|
2734
|
-
position: absolute !important;
|
|
2735
|
-
top: calc(16px + env(safe-area-inset-top, 0px));
|
|
2736
|
-
left: calc(16px + env(safe-area-inset-left, 0px));
|
|
2737
|
-
right: calc(120px + env(safe-area-inset-right, 0px));
|
|
2738
|
-
z-index: 2000;
|
|
2839
|
+
z-index: 1000;
|
|
2739
2840
|
}
|
|
2740
|
-
}
|
|
2741
|
-
|
|
2742
|
-
/* Mobile Portrait - Optimized vertical layout */
|
|
2743
|
-
@media screen and (max-width: 767px) and (orientation: portrait) {
|
|
2744
2841
|
|
|
2745
2842
|
.uvf-progress-section {
|
|
2746
2843
|
margin-bottom: 16px;
|
|
2747
2844
|
}
|
|
2748
2845
|
|
|
2749
|
-
/* Mobile-
|
|
2846
|
+
/* Mobile-first responsive controls layout */
|
|
2750
2847
|
.uvf-controls-row {
|
|
2751
|
-
|
|
2848
|
+
gap: 8px;
|
|
2849
|
+
flex-wrap: nowrap;
|
|
2752
2850
|
align-items: center;
|
|
2753
2851
|
justify-content: space-between;
|
|
2754
|
-
width: 100%;
|
|
2755
|
-
gap: 12px;
|
|
2756
|
-
flex-wrap: nowrap;
|
|
2757
2852
|
position: relative;
|
|
2758
|
-
|
|
2759
|
-
}
|
|
2760
|
-
|
|
2761
|
-
/* Ensure controls are always visible */
|
|
2762
|
-
.uvf-controls-row > * {
|
|
2763
|
-
flex-shrink: 0;
|
|
2764
|
-
display: flex;
|
|
2765
|
-
align-items: center;
|
|
2766
|
-
}
|
|
2767
|
-
|
|
2768
|
-
/* Control groups with proper flex behavior */
|
|
2769
|
-
.uvf-left-controls {
|
|
2770
|
-
display: flex;
|
|
2771
|
-
align-items: center;
|
|
2772
|
-
gap: 8px;
|
|
2773
|
-
flex: 0 0 auto;
|
|
2774
|
-
}
|
|
2775
|
-
|
|
2776
|
-
.uvf-center-controls {
|
|
2777
|
-
display: flex;
|
|
2778
|
-
align-items: center;
|
|
2779
|
-
gap: 8px;
|
|
2780
|
-
flex: 1 1 auto;
|
|
2781
|
-
justify-content: center;
|
|
2782
|
-
min-width: 0;
|
|
2783
|
-
}
|
|
2784
|
-
|
|
2785
|
-
.uvf-right-controls {
|
|
2786
|
-
display: flex !important;
|
|
2787
|
-
align-items: center;
|
|
2788
|
-
gap: 8px;
|
|
2789
|
-
flex: 0 0 auto;
|
|
2853
|
+
width: 100%;
|
|
2790
2854
|
}
|
|
2791
2855
|
|
|
2792
2856
|
/* Left side controls group */
|
|
@@ -2914,68 +2978,26 @@ export class WebPlayer extends BasePlayer {
|
|
|
2914
2978
|
display: none !important;
|
|
2915
2979
|
}
|
|
2916
2980
|
|
|
2917
|
-
/*
|
|
2981
|
+
/* Settings menu - hidden by default, accessible via menu */
|
|
2918
2982
|
.uvf-settings-menu {
|
|
2919
|
-
|
|
2920
|
-
bottom:
|
|
2921
|
-
right:
|
|
2922
|
-
min-width: 200px;
|
|
2923
|
-
max-width: 280px;
|
|
2924
|
-
max-height: 60vh;
|
|
2925
|
-
background: rgba(0,0,0,0.95);
|
|
2926
|
-
backdrop-filter: blur(20px);
|
|
2927
|
-
-webkit-backdrop-filter: blur(20px);
|
|
2928
|
-
border: 1px solid rgba(255,255,255,0.2);
|
|
2929
|
-
border-radius: 12px;
|
|
2930
|
-
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
|
2931
|
-
z-index: 3000;
|
|
2932
|
-
overflow: hidden;
|
|
2983
|
+
min-width: 160px;
|
|
2984
|
+
bottom: 60px;
|
|
2985
|
+
right: 12px;
|
|
2933
2986
|
font-size: 14px;
|
|
2934
|
-
|
|
2935
|
-
transform: translateY(10px) scale(0.95);
|
|
2936
|
-
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2937
|
-
pointer-events: none;
|
|
2938
|
-
}
|
|
2939
|
-
|
|
2940
|
-
.uvf-settings-menu.active {
|
|
2941
|
-
opacity: 1;
|
|
2942
|
-
transform: translateY(0) scale(1);
|
|
2943
|
-
pointer-events: auto;
|
|
2987
|
+
max-height: 50vh;
|
|
2944
2988
|
}
|
|
2945
2989
|
|
|
2946
|
-
/* Touch-optimized settings options */
|
|
2947
2990
|
.uvf-settings-option {
|
|
2948
|
-
padding: 16px
|
|
2949
|
-
font-size:
|
|
2950
|
-
min-height:
|
|
2991
|
+
padding: 12px 16px;
|
|
2992
|
+
font-size: 14px;
|
|
2993
|
+
min-height: 44px;
|
|
2951
2994
|
display: flex;
|
|
2952
2995
|
align-items: center;
|
|
2953
|
-
cursor: pointer;
|
|
2954
|
-
transition: all 0.2s ease;
|
|
2955
|
-
border: none;
|
|
2956
|
-
background: transparent;
|
|
2957
|
-
color: #fff;
|
|
2958
|
-
width: 100%;
|
|
2959
|
-
text-align: left;
|
|
2960
2996
|
}
|
|
2961
2997
|
|
|
2962
|
-
.uvf-settings-option:hover
|
|
2963
|
-
.uvf-settings-option:focus {
|
|
2998
|
+
.uvf-settings-option:hover {
|
|
2964
2999
|
background: rgba(255,255,255,0.15);
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
.uvf-settings-option.active {
|
|
2968
|
-
background: rgba(255,77,79,0.2);
|
|
2969
|
-
color: #ff4d4f;
|
|
2970
|
-
}
|
|
2971
|
-
|
|
2972
|
-
/* Settings groups with proper spacing */
|
|
2973
|
-
.uvf-settings-group {
|
|
2974
|
-
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
2975
|
-
}
|
|
2976
|
-
|
|
2977
|
-
.uvf-settings-group:last-child {
|
|
2978
|
-
border-bottom: none;
|
|
3000
|
+
padding-left: 20px;
|
|
2979
3001
|
}
|
|
2980
3002
|
|
|
2981
3003
|
/* Simplified settings - hide complex options */
|
|
@@ -3116,46 +3138,11 @@ export class WebPlayer extends BasePlayer {
|
|
|
3116
3138
|
display: block;
|
|
3117
3139
|
}
|
|
3118
3140
|
|
|
3119
|
-
/* Ensure settings button is always visible and functional */
|
|
3120
|
-
#uvf-settings-btn {
|
|
3121
|
-
display: flex !important;
|
|
3122
|
-
align-items: center;
|
|
3123
|
-
justify-content: center;
|
|
3124
|
-
width: 44px;
|
|
3125
|
-
height: 44px;
|
|
3126
|
-
min-width: 44px;
|
|
3127
|
-
min-height: 44px;
|
|
3128
|
-
background: rgba(255,255,255,0.15);
|
|
3129
|
-
backdrop-filter: blur(8px);
|
|
3130
|
-
border: 1px solid rgba(255,255,255,0.2);
|
|
3131
|
-
border-radius: 22px;
|
|
3132
|
-
transition: all 0.2s ease;
|
|
3133
|
-
}
|
|
3134
|
-
|
|
3135
|
-
#uvf-settings-btn:hover {
|
|
3136
|
-
background: rgba(255,255,255,0.25);
|
|
3137
|
-
transform: scale(1.05);
|
|
3138
|
-
}
|
|
3139
|
-
|
|
3140
|
-
#uvf-settings-btn svg {
|
|
3141
|
-
width: 20px;
|
|
3142
|
-
height: 20px;
|
|
3143
|
-
fill: #fff;
|
|
3144
|
-
}
|
|
3145
|
-
|
|
3146
3141
|
/* Essential controls in right section - Settings, PiP, and Fullscreen only */
|
|
3147
3142
|
.uvf-right-controls > *:not(#uvf-settings-btn):not(#uvf-fullscreen-btn):not(#uvf-pip-btn) {
|
|
3148
3143
|
display: none;
|
|
3149
3144
|
}
|
|
3150
3145
|
|
|
3151
|
-
/* Make sure right controls are properly spaced */
|
|
3152
|
-
.uvf-right-controls {
|
|
3153
|
-
display: flex;
|
|
3154
|
-
align-items: center;
|
|
3155
|
-
gap: 8px;
|
|
3156
|
-
flex-shrink: 0;
|
|
3157
|
-
}
|
|
3158
|
-
|
|
3159
3146
|
/* Hide skip buttons on small mobile devices to save space */
|
|
3160
3147
|
@media screen and (max-width: 480px) {
|
|
3161
3148
|
#uvf-skip-back,
|