unified-video-framework 1.4.146 → 1.4.148
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.148",
|
|
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",
|
|
@@ -69,6 +69,10 @@ export declare class WebPlayer extends BasePlayer {
|
|
|
69
69
|
protected loadScript(src: string): Promise<void>;
|
|
70
70
|
private loadSubtitles;
|
|
71
71
|
private isAbortPlayError;
|
|
72
|
+
private isAutoplayRestrictionError;
|
|
73
|
+
private showPlayOverlay;
|
|
74
|
+
private hidePlayOverlay;
|
|
75
|
+
private setupUserInteractionTracking;
|
|
72
76
|
play(): Promise<void>;
|
|
73
77
|
pause(): void;
|
|
74
78
|
requestPause(): void;
|
|
@@ -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;IAGpC,OAAO,CAAC,cAAc,CAKpB;IACF,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;IAOX,UAAU,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;cA4B9D,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}
|
|
@@ -100,7 +100,7 @@ export class WebPlayer extends BasePlayer {
|
|
|
100
100
|
this.video.className = 'uvf-video';
|
|
101
101
|
this.video.controls = false;
|
|
102
102
|
this.video.autoplay = this.config.autoPlay ?? false;
|
|
103
|
-
this.video.muted = this.config.muted ?? false;
|
|
103
|
+
this.video.muted = this.config.autoPlay ? true : (this.config.muted ?? false);
|
|
104
104
|
this.video.loop = this.config.loop ?? false;
|
|
105
105
|
this.video.playsInline = this.config.playsInline ?? true;
|
|
106
106
|
this.video.preload = this.config.preload ?? 'metadata';
|
|
@@ -123,6 +123,7 @@ export class WebPlayer extends BasePlayer {
|
|
|
123
123
|
this.setupKeyboardShortcuts();
|
|
124
124
|
this.setupWatermark();
|
|
125
125
|
this.setupFullscreenListeners();
|
|
126
|
+
this.setupUserInteractionTracking();
|
|
126
127
|
try {
|
|
127
128
|
const pw = this.config.paywall || null;
|
|
128
129
|
if (pw && pw.enabled) {
|
|
@@ -395,7 +396,15 @@ export class WebPlayer extends BasePlayer {
|
|
|
395
396
|
}));
|
|
396
397
|
this.updateSettingsMenu();
|
|
397
398
|
if (this.config.autoPlay) {
|
|
398
|
-
this.play()
|
|
399
|
+
this.play().catch(error => {
|
|
400
|
+
if (this.isAutoplayRestrictionError(error)) {
|
|
401
|
+
this.debugWarn('HLS autoplay blocked, showing play overlay');
|
|
402
|
+
this.showPlayOverlay();
|
|
403
|
+
}
|
|
404
|
+
else {
|
|
405
|
+
this.debugError('HLS autoplay failed:', error);
|
|
406
|
+
}
|
|
407
|
+
});
|
|
399
408
|
}
|
|
400
409
|
});
|
|
401
410
|
this.hls.on(window.Hls.Events.LEVEL_SWITCHED, (event, data) => {
|
|
@@ -531,6 +540,138 @@ export class WebPlayer extends BasePlayer {
|
|
|
531
540
|
return !!err && ((err.name === 'AbortError') ||
|
|
532
541
|
(typeof err.message === 'string' && /interrupted by a call to pause\(\)/i.test(err.message)));
|
|
533
542
|
}
|
|
543
|
+
isAutoplayRestrictionError(err) {
|
|
544
|
+
if (!err)
|
|
545
|
+
return false;
|
|
546
|
+
const message = (err.message || '').toLowerCase();
|
|
547
|
+
const name = (err.name || '').toLowerCase();
|
|
548
|
+
return (name === 'notallowederror' ||
|
|
549
|
+
message.includes('user didn\'t interact') ||
|
|
550
|
+
message.includes('autoplay') ||
|
|
551
|
+
message.includes('gesture') ||
|
|
552
|
+
message.includes('user activation') ||
|
|
553
|
+
message.includes('play() failed') ||
|
|
554
|
+
message.includes('user interaction'));
|
|
555
|
+
}
|
|
556
|
+
showPlayOverlay() {
|
|
557
|
+
this.hidePlayOverlay();
|
|
558
|
+
const overlay = document.createElement('div');
|
|
559
|
+
overlay.id = 'uvf-play-overlay';
|
|
560
|
+
overlay.className = 'uvf-play-overlay';
|
|
561
|
+
const playButton = document.createElement('button');
|
|
562
|
+
playButton.className = 'uvf-play-button';
|
|
563
|
+
playButton.innerHTML = `
|
|
564
|
+
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
565
|
+
<path d="M8 5v14l11-7z"/>
|
|
566
|
+
</svg>
|
|
567
|
+
`;
|
|
568
|
+
const message = document.createElement('div');
|
|
569
|
+
message.className = 'uvf-play-message';
|
|
570
|
+
message.textContent = 'Click to play';
|
|
571
|
+
overlay.appendChild(playButton);
|
|
572
|
+
overlay.appendChild(message);
|
|
573
|
+
playButton.addEventListener('click', async (e) => {
|
|
574
|
+
e.stopPropagation();
|
|
575
|
+
this.lastUserInteraction = Date.now();
|
|
576
|
+
try {
|
|
577
|
+
await this.play();
|
|
578
|
+
}
|
|
579
|
+
catch (error) {
|
|
580
|
+
this.debugError('Failed to play after user interaction:', error);
|
|
581
|
+
}
|
|
582
|
+
});
|
|
583
|
+
overlay.addEventListener('click', async (e) => {
|
|
584
|
+
if (e.target === overlay) {
|
|
585
|
+
e.stopPropagation();
|
|
586
|
+
this.lastUserInteraction = Date.now();
|
|
587
|
+
try {
|
|
588
|
+
await this.play();
|
|
589
|
+
}
|
|
590
|
+
catch (error) {
|
|
591
|
+
this.debugError('Failed to play after user interaction:', error);
|
|
592
|
+
}
|
|
593
|
+
}
|
|
594
|
+
});
|
|
595
|
+
const style = document.createElement('style');
|
|
596
|
+
style.textContent = `
|
|
597
|
+
.uvf-play-overlay {
|
|
598
|
+
position: absolute;
|
|
599
|
+
top: 0;
|
|
600
|
+
left: 0;
|
|
601
|
+
width: 100%;
|
|
602
|
+
height: 100%;
|
|
603
|
+
background: rgba(0, 0, 0, 0.7);
|
|
604
|
+
display: flex;
|
|
605
|
+
flex-direction: column;
|
|
606
|
+
justify-content: center;
|
|
607
|
+
align-items: center;
|
|
608
|
+
z-index: 1000;
|
|
609
|
+
cursor: pointer;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
.uvf-play-button {
|
|
613
|
+
width: 80px;
|
|
614
|
+
height: 80px;
|
|
615
|
+
border-radius: 50%;
|
|
616
|
+
background: rgba(255, 255, 255, 0.9);
|
|
617
|
+
border: none;
|
|
618
|
+
color: #000;
|
|
619
|
+
cursor: pointer;
|
|
620
|
+
display: flex;
|
|
621
|
+
align-items: center;
|
|
622
|
+
justify-content: center;
|
|
623
|
+
transition: all 0.3s ease;
|
|
624
|
+
margin-bottom: 16px;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.uvf-play-button:hover {
|
|
628
|
+
background: #fff;
|
|
629
|
+
transform: scale(1.1);
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.uvf-play-button svg {
|
|
633
|
+
width: 32px;
|
|
634
|
+
height: 32px;
|
|
635
|
+
margin-left: 4px;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.uvf-play-message {
|
|
639
|
+
color: white;
|
|
640
|
+
font-size: 16px;
|
|
641
|
+
font-weight: 500;
|
|
642
|
+
text-align: center;
|
|
643
|
+
opacity: 0.9;
|
|
644
|
+
}
|
|
645
|
+
`;
|
|
646
|
+
if (!document.getElementById('uvf-play-overlay-styles')) {
|
|
647
|
+
style.id = 'uvf-play-overlay-styles';
|
|
648
|
+
document.head.appendChild(style);
|
|
649
|
+
}
|
|
650
|
+
if (this.playerWrapper) {
|
|
651
|
+
this.playerWrapper.appendChild(overlay);
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
hidePlayOverlay() {
|
|
655
|
+
const overlay = document.getElementById('uvf-play-overlay');
|
|
656
|
+
if (overlay) {
|
|
657
|
+
overlay.remove();
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
setupUserInteractionTracking() {
|
|
661
|
+
const interactionEvents = ['click', 'mousedown', 'keydown', 'touchstart'];
|
|
662
|
+
const updateLastInteraction = () => {
|
|
663
|
+
this.lastUserInteraction = Date.now();
|
|
664
|
+
this.debugLog('User interaction detected at:', this.lastUserInteraction);
|
|
665
|
+
};
|
|
666
|
+
interactionEvents.forEach(eventType => {
|
|
667
|
+
document.addEventListener(eventType, updateLastInteraction, { passive: true });
|
|
668
|
+
});
|
|
669
|
+
if (this.playerWrapper) {
|
|
670
|
+
interactionEvents.forEach(eventType => {
|
|
671
|
+
this.playerWrapper.addEventListener(eventType, updateLastInteraction, { passive: true });
|
|
672
|
+
});
|
|
673
|
+
}
|
|
674
|
+
}
|
|
534
675
|
async play() {
|
|
535
676
|
if (!this.video)
|
|
536
677
|
throw new Error('Video element not initialized');
|
|
@@ -554,6 +695,7 @@ export class WebPlayer extends BasePlayer {
|
|
|
554
695
|
this._deferredPause = false;
|
|
555
696
|
this.video.pause();
|
|
556
697
|
}
|
|
698
|
+
this.hidePlayOverlay();
|
|
557
699
|
await super.play();
|
|
558
700
|
}
|
|
559
701
|
catch (err) {
|
|
@@ -561,6 +703,11 @@ export class WebPlayer extends BasePlayer {
|
|
|
561
703
|
if (this.isAbortPlayError(err)) {
|
|
562
704
|
return;
|
|
563
705
|
}
|
|
706
|
+
if (this.isAutoplayRestrictionError(err)) {
|
|
707
|
+
this.debugWarn('Autoplay blocked by browser policy - showing play overlay');
|
|
708
|
+
this.showPlayOverlay();
|
|
709
|
+
return;
|
|
710
|
+
}
|
|
564
711
|
this.handleError({
|
|
565
712
|
code: 'PLAY_ERROR',
|
|
566
713
|
message: `Failed to start playbook: ${err}`,
|
|
@@ -1591,8 +1738,8 @@ export class WebPlayer extends BasePlayer {
|
|
|
1591
1738
|
|
|
1592
1739
|
/* Center Play Button */
|
|
1593
1740
|
.uvf-center-play-btn {
|
|
1594
|
-
width: clamp(
|
|
1595
|
-
height: clamp(
|
|
1741
|
+
width: clamp(40px, 8vw, 60px);
|
|
1742
|
+
height: clamp(40px, 8vw, 60px);
|
|
1596
1743
|
background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
|
|
1597
1744
|
border: 0;
|
|
1598
1745
|
border-radius: 50%;
|
|
@@ -1604,13 +1751,13 @@ export class WebPlayer extends BasePlayer {
|
|
|
1604
1751
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1605
1752
|
opacity: 1;
|
|
1606
1753
|
visibility: visible;
|
|
1607
|
-
box-shadow: 0
|
|
1754
|
+
box-shadow: 0 4px 16px var(--uvf-accent-1-20);
|
|
1608
1755
|
}
|
|
1609
1756
|
|
|
1610
1757
|
.uvf-center-play-btn:hover {
|
|
1611
|
-
transform: scale(1.
|
|
1758
|
+
transform: scale(1.08);
|
|
1612
1759
|
filter: saturate(1.08) brightness(1.05);
|
|
1613
|
-
box-shadow: 0
|
|
1760
|
+
box-shadow: 0 6px 20px var(--uvf-accent-1-20);
|
|
1614
1761
|
}
|
|
1615
1762
|
|
|
1616
1763
|
.uvf-center-play-btn.hidden {
|
|
@@ -1622,11 +1769,11 @@ export class WebPlayer extends BasePlayer {
|
|
|
1622
1769
|
}
|
|
1623
1770
|
|
|
1624
1771
|
.uvf-center-play-btn svg {
|
|
1625
|
-
width: clamp(
|
|
1626
|
-
height: clamp(
|
|
1772
|
+
width: clamp(18px, 3vw, 24px);
|
|
1773
|
+
height: clamp(18px, 3vw, 24px);
|
|
1627
1774
|
fill: #fff;
|
|
1628
|
-
margin-left:
|
|
1629
|
-
filter: drop-shadow(0
|
|
1775
|
+
margin-left: 2px;
|
|
1776
|
+
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
|
|
1630
1777
|
}
|
|
1631
1778
|
|
|
1632
1779
|
/* Pulse animation for center play button when paused */
|
|
@@ -1636,15 +1783,15 @@ export class WebPlayer extends BasePlayer {
|
|
|
1636
1783
|
|
|
1637
1784
|
@keyframes uvf-centerPlayPulse {
|
|
1638
1785
|
0% {
|
|
1639
|
-
box-shadow: 0
|
|
1786
|
+
box-shadow: 0 4px 16px var(--uvf-accent-1-20);
|
|
1640
1787
|
filter: saturate(1) brightness(1);
|
|
1641
1788
|
}
|
|
1642
1789
|
50% {
|
|
1643
|
-
box-shadow: 0
|
|
1790
|
+
box-shadow: 0 6px 20px var(--uvf-accent-1-20), 0 0 20px rgba(255,0,0,0.1);
|
|
1644
1791
|
filter: saturate(1.05) brightness(1.02);
|
|
1645
1792
|
}
|
|
1646
1793
|
100% {
|
|
1647
|
-
box-shadow: 0
|
|
1794
|
+
box-shadow: 0 4px 16px var(--uvf-accent-1-20);
|
|
1648
1795
|
filter: saturate(1) brightness(1);
|
|
1649
1796
|
}
|
|
1650
1797
|
}
|
|
@@ -1690,10 +1837,22 @@ export class WebPlayer extends BasePlayer {
|
|
|
1690
1837
|
width: 100%;
|
|
1691
1838
|
position: relative;
|
|
1692
1839
|
cursor: pointer;
|
|
1693
|
-
padding:
|
|
1840
|
+
padding: 6px 0;
|
|
1694
1841
|
overflow: visible;
|
|
1695
1842
|
}
|
|
1696
1843
|
|
|
1844
|
+
/* Extended touch area for better mobile UX without affecting visual spacing */
|
|
1845
|
+
.uvf-progress-bar-wrapper::before {
|
|
1846
|
+
content: '';
|
|
1847
|
+
position: absolute;
|
|
1848
|
+
top: -8px;
|
|
1849
|
+
bottom: -8px;
|
|
1850
|
+
left: 0;
|
|
1851
|
+
right: 0;
|
|
1852
|
+
cursor: pointer;
|
|
1853
|
+
z-index: 10;
|
|
1854
|
+
}
|
|
1855
|
+
|
|
1697
1856
|
.uvf-progress-bar {
|
|
1698
1857
|
width: 100%;
|
|
1699
1858
|
height: 2px;
|
|
@@ -1805,7 +1964,7 @@ export class WebPlayer extends BasePlayer {
|
|
|
1805
1964
|
/* Mobile responsive design with enhanced touch targets */
|
|
1806
1965
|
@media (max-width: 768px) {
|
|
1807
1966
|
.uvf-progress-bar-wrapper {
|
|
1808
|
-
padding:
|
|
1967
|
+
padding: 8px 0; /* Optimized touch area */
|
|
1809
1968
|
}
|
|
1810
1969
|
|
|
1811
1970
|
.uvf-progress-bar {
|
|
@@ -2873,13 +3032,13 @@ export class WebPlayer extends BasePlayer {
|
|
|
2873
3032
|
}
|
|
2874
3033
|
|
|
2875
3034
|
.uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn {
|
|
2876
|
-
width:
|
|
2877
|
-
height:
|
|
3035
|
+
width: 64px;
|
|
3036
|
+
height: 64px;
|
|
2878
3037
|
}
|
|
2879
3038
|
|
|
2880
3039
|
.uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn svg {
|
|
2881
|
-
width:
|
|
2882
|
-
height:
|
|
3040
|
+
width: 28px;
|
|
3041
|
+
height: 28px;
|
|
2883
3042
|
}
|
|
2884
3043
|
|
|
2885
3044
|
/* Ensure overlays remain visible in fullscreen with consistent spacing */
|
|
@@ -3478,7 +3637,6 @@ export class WebPlayer extends BasePlayer {
|
|
|
3478
3637
|
height: 44px !important;
|
|
3479
3638
|
min-width: 44px !important;
|
|
3480
3639
|
min-height: 44px !important;
|
|
3481
|
-
background: rgba(255,255,255,0.15) !important;
|
|
3482
3640
|
backdrop-filter: blur(8px) !important;
|
|
3483
3641
|
border-radius: 22px !important;
|
|
3484
3642
|
align-items: center !important;
|
|
@@ -3744,22 +3902,22 @@ export class WebPlayer extends BasePlayer {
|
|
|
3744
3902
|
|
|
3745
3903
|
/* Tablet center play button - consistent theming */
|
|
3746
3904
|
.uvf-center-play-btn {
|
|
3747
|
-
width: clamp(
|
|
3748
|
-
height: clamp(
|
|
3905
|
+
width: clamp(48px, 10vw, 64px);
|
|
3906
|
+
height: clamp(48px, 10vw, 64px);
|
|
3749
3907
|
background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
|
|
3750
3908
|
border: 0;
|
|
3751
|
-
box-shadow: 0
|
|
3909
|
+
box-shadow: 0 4px 16px var(--uvf-accent-1-20);
|
|
3752
3910
|
}
|
|
3753
3911
|
|
|
3754
3912
|
.uvf-center-play-btn:hover {
|
|
3755
|
-
transform: scale(1.
|
|
3913
|
+
transform: scale(1.08);
|
|
3756
3914
|
filter: saturate(1.08) brightness(1.05);
|
|
3757
|
-
box-shadow: 0
|
|
3915
|
+
box-shadow: 0 6px 20px var(--uvf-accent-1-20);
|
|
3758
3916
|
}
|
|
3759
3917
|
|
|
3760
3918
|
.uvf-center-play-btn svg {
|
|
3761
|
-
width: clamp(
|
|
3762
|
-
height: clamp(
|
|
3919
|
+
width: clamp(20px, 3.5vw, 26px);
|
|
3920
|
+
height: clamp(20px, 3.5vw, 26px);
|
|
3763
3921
|
}
|
|
3764
3922
|
|
|
3765
3923
|
/* Tablet volume control - keep desktop functionality */
|
|
@@ -3908,8 +4066,8 @@ export class WebPlayer extends BasePlayer {
|
|
|
3908
4066
|
|
|
3909
4067
|
/* Enhanced center play button with smooth transitions */
|
|
3910
4068
|
.uvf-center-play-btn {
|
|
3911
|
-
width: clamp(
|
|
3912
|
-
height: clamp(
|
|
4069
|
+
width: clamp(56px, 10vw, 72px);
|
|
4070
|
+
height: clamp(56px, 10vw, 72px);
|
|
3913
4071
|
background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
|
|
3914
4072
|
border: 0;
|
|
3915
4073
|
border-radius: 50%;
|
|
@@ -3919,13 +4077,13 @@ export class WebPlayer extends BasePlayer {
|
|
|
3919
4077
|
align-items: center;
|
|
3920
4078
|
justify-content: center;
|
|
3921
4079
|
cursor: pointer;
|
|
3922
|
-
box-shadow: 0
|
|
4080
|
+
box-shadow: 0 4px 16px var(--uvf-accent-1-20);
|
|
3923
4081
|
}
|
|
3924
4082
|
|
|
3925
4083
|
.uvf-center-play-btn:hover {
|
|
3926
|
-
transform: scale(1.
|
|
4084
|
+
transform: scale(1.08);
|
|
3927
4085
|
filter: saturate(1.08) brightness(1.05);
|
|
3928
|
-
box-shadow: 0
|
|
4086
|
+
box-shadow: 0 6px 20px var(--uvf-accent-1-20);
|
|
3929
4087
|
}
|
|
3930
4088
|
|
|
3931
4089
|
.uvf-center-play-btn:active {
|
|
@@ -3934,11 +4092,11 @@ export class WebPlayer extends BasePlayer {
|
|
|
3934
4092
|
}
|
|
3935
4093
|
|
|
3936
4094
|
.uvf-center-play-btn svg {
|
|
3937
|
-
width: clamp(
|
|
3938
|
-
height: clamp(
|
|
4095
|
+
width: clamp(24px, 4vw, 30px);
|
|
4096
|
+
height: clamp(24px, 4vw, 30px);
|
|
3939
4097
|
fill: #fff;
|
|
3940
|
-
margin-left:
|
|
3941
|
-
filter: drop-shadow(0
|
|
4098
|
+
margin-left: 3px;
|
|
4099
|
+
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
|
|
3942
4100
|
}
|
|
3943
4101
|
|
|
3944
4102
|
/* Optional: Add subtle pulse animation on idle */
|
|
@@ -4019,23 +4177,23 @@ export class WebPlayer extends BasePlayer {
|
|
|
4019
4177
|
}
|
|
4020
4178
|
|
|
4021
4179
|
.uvf-center-play-btn {
|
|
4022
|
-
width: clamp(
|
|
4023
|
-
height: clamp(
|
|
4180
|
+
width: clamp(64px, 10vw, 76px);
|
|
4181
|
+
height: clamp(64px, 10vw, 76px);
|
|
4024
4182
|
background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
|
|
4025
4183
|
border: 0;
|
|
4026
|
-
box-shadow: 0
|
|
4184
|
+
box-shadow: 0 4px 16px var(--uvf-accent-1-20);
|
|
4027
4185
|
}
|
|
4028
4186
|
|
|
4029
4187
|
.uvf-center-play-btn:hover {
|
|
4030
|
-
transform: scale(1.
|
|
4188
|
+
transform: scale(1.08);
|
|
4031
4189
|
filter: saturate(1.08) brightness(1.05);
|
|
4032
|
-
box-shadow: 0
|
|
4190
|
+
box-shadow: 0 6px 20px var(--uvf-accent-1-20);
|
|
4033
4191
|
}
|
|
4034
4192
|
|
|
4035
4193
|
.uvf-center-play-btn svg {
|
|
4036
|
-
width: clamp(
|
|
4037
|
-
height: clamp(
|
|
4038
|
-
margin-left:
|
|
4194
|
+
width: clamp(28px, 4.5vw, 32px);
|
|
4195
|
+
height: clamp(28px, 4.5vw, 32px);
|
|
4196
|
+
margin-left: 3px;
|
|
4039
4197
|
}
|
|
4040
4198
|
|
|
4041
4199
|
.uvf-video-title {
|