unified-video-framework 1.4.160 → 1.4.162
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.
|
@@ -3861,6 +3861,217 @@ export class WebPlayer extends BasePlayer {
|
|
|
3861
3861
|
@media screen and (max-width: 767px) {
|
|
3862
3862
|
html, body {
|
|
3863
3863
|
overflow-x: hidden;
|
|
3864
|
+
background: #000;
|
|
3865
|
+
}
|
|
3866
|
+
|
|
3867
|
+
/* Mobile Portrait Layout - Centered Player with Top/Bottom Black Areas */
|
|
3868
|
+
@media screen and (orientation: portrait) {
|
|
3869
|
+
.uvf-responsive-container {
|
|
3870
|
+
display: flex;
|
|
3871
|
+
flex-direction: column;
|
|
3872
|
+
height: 100vh;
|
|
3873
|
+
height: 100dvh;
|
|
3874
|
+
background: #000;
|
|
3875
|
+
overflow: hidden;
|
|
3876
|
+
position: fixed;
|
|
3877
|
+
top: 0;
|
|
3878
|
+
left: 0;
|
|
3879
|
+
width: 100vw;
|
|
3880
|
+
}
|
|
3881
|
+
|
|
3882
|
+
/* Top black area - 25% of viewport */
|
|
3883
|
+
.uvf-responsive-container::before {
|
|
3884
|
+
content: '';
|
|
3885
|
+
flex: 0 0 25vh;
|
|
3886
|
+
background: #000;
|
|
3887
|
+
pointer-events: none;
|
|
3888
|
+
}
|
|
3889
|
+
|
|
3890
|
+
/* Bottom black area - 25% of viewport */
|
|
3891
|
+
.uvf-responsive-container::after {
|
|
3892
|
+
content: '';
|
|
3893
|
+
flex: 0 0 25vh;
|
|
3894
|
+
background: #000;
|
|
3895
|
+
pointer-events: none;
|
|
3896
|
+
}
|
|
3897
|
+
|
|
3898
|
+
/* Centered video player wrapper - 50% of viewport */
|
|
3899
|
+
.uvf-responsive-container .uvf-player-wrapper {
|
|
3900
|
+
flex: 1;
|
|
3901
|
+
width: 100vw;
|
|
3902
|
+
display: flex;
|
|
3903
|
+
align-items: center;
|
|
3904
|
+
justify-content: center;
|
|
3905
|
+
background: #000;
|
|
3906
|
+
position: relative;
|
|
3907
|
+
}
|
|
3908
|
+
|
|
3909
|
+
/* Video container fills player wrapper */
|
|
3910
|
+
.uvf-responsive-container .uvf-video-container {
|
|
3911
|
+
width: 100%;
|
|
3912
|
+
height: 100%;
|
|
3913
|
+
position: relative;
|
|
3914
|
+
background: #000;
|
|
3915
|
+
border-radius: 0;
|
|
3916
|
+
overflow: hidden;
|
|
3917
|
+
}
|
|
3918
|
+
|
|
3919
|
+
/* Video element fills container */
|
|
3920
|
+
.uvf-responsive-container .uvf-video {
|
|
3921
|
+
width: 100%;
|
|
3922
|
+
height: 100%;
|
|
3923
|
+
object-fit: contain;
|
|
3924
|
+
background: #000;
|
|
3925
|
+
}
|
|
3926
|
+
|
|
3927
|
+
/* All controls positioned inside video container */
|
|
3928
|
+
.uvf-controls-bar {
|
|
3929
|
+
position: absolute !important;
|
|
3930
|
+
bottom: 0 !important;
|
|
3931
|
+
left: 0 !important;
|
|
3932
|
+
right: 0 !important;
|
|
3933
|
+
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
|
|
3934
|
+
padding: 12px 16px;
|
|
3935
|
+
padding-bottom: calc(12px + var(--uvf-safe-area-bottom));
|
|
3936
|
+
z-index: 1000;
|
|
3937
|
+
/* Ensure controls are always visible */
|
|
3938
|
+
opacity: 1 !important;
|
|
3939
|
+
visibility: visible !important;
|
|
3940
|
+
display: flex !important;
|
|
3941
|
+
flex-direction: column !important;
|
|
3942
|
+
/* Ensure hardware acceleration */
|
|
3943
|
+
-webkit-transform: translate3d(0,0,0);
|
|
3944
|
+
transform: translate3d(0,0,0);
|
|
3945
|
+
}
|
|
3946
|
+
|
|
3947
|
+
/* Force controls visibility on mobile portrait */
|
|
3948
|
+
.uvf-responsive-container .uvf-controls-bar {
|
|
3949
|
+
opacity: 1 !important;
|
|
3950
|
+
visibility: visible !important;
|
|
3951
|
+
transform: translateY(0) !important;
|
|
3952
|
+
pointer-events: auto !important;
|
|
3953
|
+
}
|
|
3954
|
+
|
|
3955
|
+
/* Progress section - ensure visibility */
|
|
3956
|
+
.uvf-progress-section {
|
|
3957
|
+
width: 100%;
|
|
3958
|
+
margin-bottom: 8px;
|
|
3959
|
+
opacity: 1 !important;
|
|
3960
|
+
visibility: visible !important;
|
|
3961
|
+
display: block !important;
|
|
3962
|
+
}
|
|
3963
|
+
|
|
3964
|
+
/* Progress bar styling */
|
|
3965
|
+
.uvf-progress-bar-wrapper {
|
|
3966
|
+
opacity: 1 !important;
|
|
3967
|
+
visibility: visible !important;
|
|
3968
|
+
}
|
|
3969
|
+
|
|
3970
|
+
.uvf-progress-bar {
|
|
3971
|
+
height: 4px;
|
|
3972
|
+
background: rgba(255, 255, 255, 0.3);
|
|
3973
|
+
border-radius: 2px;
|
|
3974
|
+
}
|
|
3975
|
+
|
|
3976
|
+
.uvf-progress-filled {
|
|
3977
|
+
background: var(--uvf-accent-1, #8B5CF6);
|
|
3978
|
+
height: 100%;
|
|
3979
|
+
border-radius: 2px;
|
|
3980
|
+
}
|
|
3981
|
+
|
|
3982
|
+
/* Controls row alignment - ensure visibility */
|
|
3983
|
+
.uvf-controls-row {
|
|
3984
|
+
width: 100%;
|
|
3985
|
+
display: flex !important;
|
|
3986
|
+
align-items: center;
|
|
3987
|
+
justify-content: flex-start;
|
|
3988
|
+
gap: 12px;
|
|
3989
|
+
opacity: 1 !important;
|
|
3990
|
+
visibility: visible !important;
|
|
3991
|
+
margin-top: 8px;
|
|
3992
|
+
}
|
|
3993
|
+
|
|
3994
|
+
/* Time display visibility */
|
|
3995
|
+
.uvf-time-display {
|
|
3996
|
+
color: #fff;
|
|
3997
|
+
font-size: 12px;
|
|
3998
|
+
font-weight: 500;
|
|
3999
|
+
opacity: 1 !important;
|
|
4000
|
+
visibility: visible !important;
|
|
4001
|
+
display: block !important;
|
|
4002
|
+
}
|
|
4003
|
+
|
|
4004
|
+
/* Control buttons visibility */
|
|
4005
|
+
.uvf-control-btn {
|
|
4006
|
+
opacity: 1 !important;
|
|
4007
|
+
visibility: visible !important;
|
|
4008
|
+
display: flex !important;
|
|
4009
|
+
color: #fff;
|
|
4010
|
+
}
|
|
4011
|
+
|
|
4012
|
+
.uvf-control-btn svg {
|
|
4013
|
+
fill: #fff;
|
|
4014
|
+
opacity: 1;
|
|
4015
|
+
}
|
|
4016
|
+
|
|
4017
|
+
/* Right controls - ensure visibility */
|
|
4018
|
+
.uvf-right-controls {
|
|
4019
|
+
margin-left: auto;
|
|
4020
|
+
display: flex !important;
|
|
4021
|
+
align-items: center;
|
|
4022
|
+
gap: 8px;
|
|
4023
|
+
opacity: 1 !important;
|
|
4024
|
+
visibility: visible !important;
|
|
4025
|
+
}
|
|
4026
|
+
|
|
4027
|
+
/* Force controls to be always visible in portrait mode */
|
|
4028
|
+
.uvf-responsive-container .uvf-player-wrapper.uvf-controls-visible .uvf-controls-bar,
|
|
4029
|
+
.uvf-responsive-container .uvf-player-wrapper:hover .uvf-controls-bar,
|
|
4030
|
+
.uvf-responsive-container .uvf-controls-bar {
|
|
4031
|
+
opacity: 1 !important;
|
|
4032
|
+
transform: translateY(0) !important;
|
|
4033
|
+
visibility: visible !important;
|
|
4034
|
+
display: flex !important;
|
|
4035
|
+
pointer-events: auto !important;
|
|
4036
|
+
}
|
|
4037
|
+
|
|
4038
|
+
/* Ensure all child elements are visible */
|
|
4039
|
+
.uvf-responsive-container .uvf-controls-bar * {
|
|
4040
|
+
opacity: 1 !important;
|
|
4041
|
+
visibility: visible !important;
|
|
4042
|
+
}
|
|
4043
|
+
|
|
4044
|
+
/* Center play button positioned within video */
|
|
4045
|
+
.uvf-center-play-container {
|
|
4046
|
+
position: absolute;
|
|
4047
|
+
top: 50%;
|
|
4048
|
+
left: 50%;
|
|
4049
|
+
transform: translate(-50%, -50%);
|
|
4050
|
+
z-index: 8;
|
|
4051
|
+
pointer-events: none;
|
|
4052
|
+
}
|
|
4053
|
+
|
|
4054
|
+
.uvf-center-play-btn {
|
|
4055
|
+
pointer-events: auto;
|
|
4056
|
+
}
|
|
4057
|
+
|
|
4058
|
+
/* Top controls within video */
|
|
4059
|
+
.uvf-top-controls {
|
|
4060
|
+
position: absolute;
|
|
4061
|
+
top: calc(12px + var(--uvf-safe-area-top));
|
|
4062
|
+
right: calc(16px + var(--uvf-safe-area-right));
|
|
4063
|
+
z-index: 9;
|
|
4064
|
+
}
|
|
4065
|
+
|
|
4066
|
+
/* Title bar within video */
|
|
4067
|
+
.uvf-title-bar {
|
|
4068
|
+
position: absolute;
|
|
4069
|
+
top: calc(12px + var(--uvf-safe-area-top));
|
|
4070
|
+
left: calc(16px + var(--uvf-safe-area-left));
|
|
4071
|
+
right: calc(80px + var(--uvf-safe-area-right));
|
|
4072
|
+
z-index: 9;
|
|
4073
|
+
padding: 8px 0;
|
|
4074
|
+
}
|
|
3864
4075
|
}
|
|
3865
4076
|
|
|
3866
4077
|
.uvf-player-wrapper {
|
|
@@ -3884,6 +4095,37 @@ export class WebPlayer extends BasePlayer {
|
|
|
3884
4095
|
transform: translateZ(0);
|
|
3885
4096
|
}
|
|
3886
4097
|
|
|
4098
|
+
/* Mobile controls optimization for touch */
|
|
4099
|
+
.uvf-control-btn {
|
|
4100
|
+
min-width: 44px;
|
|
4101
|
+
min-height: 44px;
|
|
4102
|
+
display: flex;
|
|
4103
|
+
align-items: center;
|
|
4104
|
+
justify-content: center;
|
|
4105
|
+
border-radius: 50%;
|
|
4106
|
+
transition: all 0.2s ease;
|
|
4107
|
+
background: rgba(255, 255, 255, 0.1);
|
|
4108
|
+
backdrop-filter: blur(8px);
|
|
4109
|
+
}
|
|
4110
|
+
|
|
4111
|
+
.uvf-control-btn:active {
|
|
4112
|
+
transform: scale(0.95);
|
|
4113
|
+
background: rgba(255, 255, 255, 0.2);
|
|
4114
|
+
}
|
|
4115
|
+
|
|
4116
|
+
/* Play/pause button prominence */
|
|
4117
|
+
.uvf-control-btn.play-pause {
|
|
4118
|
+
background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
|
|
4119
|
+
min-width: 52px;
|
|
4120
|
+
min-height: 52px;
|
|
4121
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
4122
|
+
}
|
|
4123
|
+
|
|
4124
|
+
.uvf-control-btn.play-pause:active {
|
|
4125
|
+
transform: scale(0.92);
|
|
4126
|
+
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
|
|
4127
|
+
}
|
|
4128
|
+
|
|
3887
4129
|
/* Fix for controls being cut off by virtual keyboard */
|
|
3888
4130
|
.uvf-controls-bar {
|
|
3889
4131
|
position: absolute !important;
|
|
@@ -4365,55 +4607,69 @@ export class WebPlayer extends BasePlayer {
|
|
|
4365
4607
|
}
|
|
4366
4608
|
}
|
|
4367
4609
|
|
|
4368
|
-
/* Mobile devices (landscape) -
|
|
4610
|
+
/* Mobile devices (landscape) - Fullscreen with controls inside video */
|
|
4369
4611
|
@media screen and (max-width: 767px) and (orientation: landscape) {
|
|
4370
4612
|
.uvf-responsive-container {
|
|
4613
|
+
position: fixed;
|
|
4614
|
+
top: 0;
|
|
4615
|
+
left: 0;
|
|
4371
4616
|
width: 100vw !important;
|
|
4372
|
-
height:
|
|
4617
|
+
height: 100vh !important;
|
|
4618
|
+
height: 100dvh !important;
|
|
4619
|
+
background: #000;
|
|
4620
|
+
z-index: 9999;
|
|
4621
|
+
display: block; /* Override portrait flexbox */
|
|
4373
4622
|
margin: 0;
|
|
4374
4623
|
padding: 0;
|
|
4375
|
-
position: relative;
|
|
4376
4624
|
overflow: hidden;
|
|
4377
4625
|
}
|
|
4378
4626
|
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4627
|
+
/* Remove pseudo-elements in landscape */
|
|
4628
|
+
.uvf-responsive-container::before,
|
|
4629
|
+
.uvf-responsive-container::after {
|
|
4630
|
+
display: none !important;
|
|
4383
4631
|
}
|
|
4384
4632
|
|
|
4385
4633
|
.uvf-responsive-container .uvf-player-wrapper {
|
|
4386
4634
|
width: 100vw !important;
|
|
4387
|
-
height:
|
|
4388
|
-
|
|
4389
|
-
|
|
4390
|
-
|
|
4391
|
-
@supports (height: 100dvh) {
|
|
4392
|
-
.uvf-responsive-container .uvf-player-wrapper {
|
|
4393
|
-
min-height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
|
|
4394
|
-
}
|
|
4635
|
+
height: 100vh !important;
|
|
4636
|
+
height: 100dvh !important;
|
|
4637
|
+
position: relative;
|
|
4638
|
+
display: block;
|
|
4395
4639
|
}
|
|
4396
4640
|
|
|
4397
4641
|
.uvf-responsive-container .uvf-video-container {
|
|
4398
4642
|
width: 100vw !important;
|
|
4399
|
-
height:
|
|
4400
|
-
|
|
4401
|
-
|
|
4643
|
+
height: 100vh !important;
|
|
4644
|
+
height: 100dvh !important;
|
|
4645
|
+
position: relative;
|
|
4646
|
+
background: #000;
|
|
4647
|
+
overflow: hidden;
|
|
4648
|
+
}
|
|
4649
|
+
|
|
4650
|
+
.uvf-responsive-container .uvf-video {
|
|
4651
|
+
width: 100%;
|
|
4652
|
+
height: 100%;
|
|
4653
|
+
object-fit: contain;
|
|
4654
|
+
background: #000;
|
|
4402
4655
|
}
|
|
4403
4656
|
|
|
4404
|
-
/* Compact controls for landscape
|
|
4657
|
+
/* Compact controls for landscape - positioned inside video container */
|
|
4405
4658
|
.uvf-controls-bar {
|
|
4406
|
-
position: absolute;
|
|
4407
|
-
bottom: 0;
|
|
4408
|
-
left: 0;
|
|
4409
|
-
right: 0;
|
|
4659
|
+
position: absolute !important;
|
|
4660
|
+
bottom: 0 !important;
|
|
4661
|
+
left: 0 !important;
|
|
4662
|
+
right: 0 !important;
|
|
4410
4663
|
padding: 10px 12px;
|
|
4411
4664
|
padding-bottom: calc(10px + var(--uvf-safe-area-bottom));
|
|
4412
4665
|
padding-left: calc(12px + var(--uvf-safe-area-left));
|
|
4413
4666
|
padding-right: calc(12px + var(--uvf-safe-area-right));
|
|
4414
|
-
background: linear-gradient(to top,
|
|
4667
|
+
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
|
|
4415
4668
|
box-sizing: border-box;
|
|
4416
4669
|
z-index: 1000;
|
|
4670
|
+
/* Ensure hardware acceleration */
|
|
4671
|
+
-webkit-transform: translate3d(0,0,0);
|
|
4672
|
+
transform: translate3d(0,0,0);
|
|
4417
4673
|
}
|
|
4418
4674
|
|
|
4419
4675
|
.uvf-progress-section {
|
|
@@ -4449,16 +4705,36 @@ export class WebPlayer extends BasePlayer {
|
|
|
4449
4705
|
height: 22px;
|
|
4450
4706
|
}
|
|
4451
4707
|
|
|
4452
|
-
/* Compact top controls with safe area padding */
|
|
4708
|
+
/* Compact top controls with safe area padding - inside video container */
|
|
4453
4709
|
.uvf-top-controls {
|
|
4710
|
+
position: absolute;
|
|
4454
4711
|
top: calc(8px + var(--uvf-safe-area-top));
|
|
4455
4712
|
right: calc(12px + var(--uvf-safe-area-right));
|
|
4456
4713
|
gap: 6px;
|
|
4714
|
+
z-index: 9;
|
|
4715
|
+
}
|
|
4716
|
+
|
|
4717
|
+
/* Center play button positioned within video container */
|
|
4718
|
+
.uvf-center-play-container {
|
|
4719
|
+
position: absolute;
|
|
4720
|
+
top: 50%;
|
|
4721
|
+
left: 50%;
|
|
4722
|
+
transform: translate(-50%, -50%);
|
|
4723
|
+
z-index: 8;
|
|
4724
|
+
pointer-events: none;
|
|
4725
|
+
}
|
|
4726
|
+
|
|
4727
|
+
.uvf-center-play-btn {
|
|
4728
|
+
pointer-events: auto;
|
|
4457
4729
|
}
|
|
4458
4730
|
|
|
4459
4731
|
.uvf-title-bar {
|
|
4460
|
-
|
|
4461
|
-
|
|
4732
|
+
position: absolute;
|
|
4733
|
+
top: calc(8px + var(--uvf-safe-area-top));
|
|
4734
|
+
left: calc(12px + var(--uvf-safe-area-left));
|
|
4735
|
+
right: calc(80px + var(--uvf-safe-area-right));
|
|
4736
|
+
z-index: 9;
|
|
4737
|
+
padding: 8px 0;
|
|
4462
4738
|
padding-left: calc(12px + var(--uvf-safe-area-left));
|
|
4463
4739
|
padding-right: calc(12px + var(--uvf-safe-area-right));
|
|
4464
4740
|
}
|
|
@@ -4646,13 +4922,234 @@ export class WebPlayer extends BasePlayer {
|
|
|
4646
4922
|
|
|
4647
4923
|
/* Large screens - Enhanced desktop experience */
|
|
4648
4924
|
@media screen and (min-width: 1024px) {
|
|
4925
|
+
/* Reset mobile portrait styles for desktop */
|
|
4649
4926
|
.uvf-responsive-container {
|
|
4927
|
+
display: block !important; /* Override mobile flexbox */
|
|
4928
|
+
position: relative !important; /* Override mobile fixed */
|
|
4929
|
+
height: auto !important; /* Override mobile viewport height */
|
|
4930
|
+
background: transparent !important; /* Override mobile black background */
|
|
4650
4931
|
padding: 10px;
|
|
4651
4932
|
}
|
|
4652
4933
|
|
|
4934
|
+
/* Remove mobile pseudo-elements on desktop */
|
|
4935
|
+
.uvf-responsive-container::before,
|
|
4936
|
+
.uvf-responsive-container::after {
|
|
4937
|
+
display: none !important;
|
|
4938
|
+
}
|
|
4939
|
+
|
|
4940
|
+
/* Desktop player wrapper */
|
|
4941
|
+
.uvf-responsive-container .uvf-player-wrapper {
|
|
4942
|
+
width: 100% !important; /* Override mobile width */
|
|
4943
|
+
height: auto !important; /* Override mobile height */
|
|
4944
|
+
display: block !important; /* Override mobile flexbox */
|
|
4945
|
+
position: relative !important;
|
|
4946
|
+
max-width: none; /* Allow full width if needed */
|
|
4947
|
+
}
|
|
4948
|
+
|
|
4949
|
+
/* Desktop video container */
|
|
4950
|
+
.uvf-responsive-container .uvf-video-container {
|
|
4951
|
+
width: 100% !important;
|
|
4952
|
+
height: auto !important;
|
|
4953
|
+
position: relative;
|
|
4954
|
+
aspect-ratio: 16/9; /* Maintain desktop aspect ratio */
|
|
4955
|
+
background: #000;
|
|
4956
|
+
}
|
|
4957
|
+
|
|
4958
|
+
/* Desktop controls positioning */
|
|
4653
4959
|
.uvf-controls-bar {
|
|
4960
|
+
position: absolute !important;
|
|
4961
|
+
bottom: 0 !important;
|
|
4962
|
+
left: 0 !important;
|
|
4963
|
+
right: 0 !important;
|
|
4654
4964
|
padding: 20px;
|
|
4655
4965
|
background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 60%, var(--uvf-overlay-transparent) 100%);
|
|
4966
|
+
/* Reset mobile overrides for desktop */
|
|
4967
|
+
opacity: 0; /* Default hidden state on desktop */
|
|
4968
|
+
transform: translateY(10px); /* Default hidden position */
|
|
4969
|
+
transition: all 0.3s ease;
|
|
4970
|
+
}
|
|
4971
|
+
|
|
4972
|
+
/* Desktop hover behavior */
|
|
4973
|
+
.uvf-player-wrapper:hover .uvf-controls-bar,
|
|
4974
|
+
.uvf-player-wrapper.controls-visible .uvf-controls-bar {
|
|
4975
|
+
opacity: 1 !important;
|
|
4976
|
+
transform: translateY(0) !important;
|
|
4977
|
+
}
|
|
4978
|
+
|
|
4979
|
+
/* Desktop progress section */
|
|
4980
|
+
.uvf-progress-section {
|
|
4981
|
+
margin-bottom: 15px;
|
|
4982
|
+
width: 100%;
|
|
4983
|
+
}
|
|
4984
|
+
|
|
4985
|
+
/* Desktop controls row */
|
|
4986
|
+
.uvf-controls-row {
|
|
4987
|
+
display: flex;
|
|
4988
|
+
align-items: center;
|
|
4989
|
+
justify-content: flex-start;
|
|
4990
|
+
gap: 14px;
|
|
4991
|
+
width: 100%;
|
|
4992
|
+
}
|
|
4993
|
+
|
|
4994
|
+
/* Desktop control buttons */
|
|
4995
|
+
.uvf-control-btn {
|
|
4996
|
+
width: 40px;
|
|
4997
|
+
height: 40px;
|
|
4998
|
+
min-width: 40px;
|
|
4999
|
+
min-height: 40px;
|
|
5000
|
+
display: flex;
|
|
5001
|
+
align-items: center;
|
|
5002
|
+
justify-content: center;
|
|
5003
|
+
border: none;
|
|
5004
|
+
border-radius: 50%;
|
|
5005
|
+
background: rgba(255, 255, 255, 0.1);
|
|
5006
|
+
color: #fff;
|
|
5007
|
+
cursor: pointer;
|
|
5008
|
+
transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
5009
|
+
backdrop-filter: blur(8px);
|
|
5010
|
+
}
|
|
5011
|
+
|
|
5012
|
+
.uvf-control-btn:hover {
|
|
5013
|
+
transform: scale(1.1);
|
|
5014
|
+
background: rgba(255, 255, 255, 0.2);
|
|
5015
|
+
}
|
|
5016
|
+
|
|
5017
|
+
.uvf-control-btn.play-pause {
|
|
5018
|
+
width: 50px;
|
|
5019
|
+
height: 50px;
|
|
5020
|
+
min-width: 50px;
|
|
5021
|
+
min-height: 50px;
|
|
5022
|
+
background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
|
|
5023
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
5024
|
+
}
|
|
5025
|
+
|
|
5026
|
+
.uvf-control-btn.play-pause:hover {
|
|
5027
|
+
transform: scale(1.08);
|
|
5028
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
5029
|
+
}
|
|
5030
|
+
|
|
5031
|
+
.uvf-control-btn svg {
|
|
5032
|
+
width: 20px;
|
|
5033
|
+
height: 20px;
|
|
5034
|
+
fill: #fff;
|
|
5035
|
+
}
|
|
5036
|
+
|
|
5037
|
+
.uvf-control-btn.play-pause svg {
|
|
5038
|
+
width: 24px;
|
|
5039
|
+
height: 24px;
|
|
5040
|
+
}
|
|
5041
|
+
|
|
5042
|
+
/* Desktop right controls */
|
|
5043
|
+
.uvf-right-controls {
|
|
5044
|
+
margin-left: auto;
|
|
5045
|
+
display: flex;
|
|
5046
|
+
align-items: center;
|
|
5047
|
+
gap: 8px;
|
|
5048
|
+
}
|
|
5049
|
+
|
|
5050
|
+
/* Desktop time display */
|
|
5051
|
+
.uvf-time-display {
|
|
5052
|
+
color: #fff;
|
|
5053
|
+
font-size: 14px;
|
|
5054
|
+
font-weight: 500;
|
|
5055
|
+
padding: 0 10px;
|
|
5056
|
+
}
|
|
5057
|
+
|
|
5058
|
+
/* Desktop volume control */
|
|
5059
|
+
.uvf-volume-panel {
|
|
5060
|
+
display: flex !important; /* Show volume slider on desktop */
|
|
5061
|
+
align-items: center;
|
|
5062
|
+
gap: 8px;
|
|
5063
|
+
}
|
|
5064
|
+
|
|
5065
|
+
.uvf-volume-slider {
|
|
5066
|
+
width: 80px;
|
|
5067
|
+
height: 4px;
|
|
5068
|
+
background: rgba(255, 255, 255, 0.3);
|
|
5069
|
+
border-radius: 2px;
|
|
5070
|
+
cursor: pointer;
|
|
5071
|
+
}
|
|
5072
|
+
|
|
5073
|
+
/* Desktop settings and other controls */
|
|
5074
|
+
.uvf-quality-badge {
|
|
5075
|
+
display: block;
|
|
5076
|
+
background: rgba(255, 255, 255, 0.1);
|
|
5077
|
+
color: #fff;
|
|
5078
|
+
padding: 4px 8px;
|
|
5079
|
+
border-radius: 4px;
|
|
5080
|
+
font-size: 11px;
|
|
5081
|
+
font-weight: 500;
|
|
5082
|
+
}
|
|
5083
|
+
|
|
5084
|
+
/* Desktop progress bar */
|
|
5085
|
+
.uvf-progress-bar {
|
|
5086
|
+
height: 2px;
|
|
5087
|
+
background: rgba(255, 255, 255, 0.2);
|
|
5088
|
+
border-radius: 4px;
|
|
5089
|
+
cursor: pointer;
|
|
5090
|
+
transition: height 0.2s ease;
|
|
5091
|
+
}
|
|
5092
|
+
|
|
5093
|
+
.uvf-progress-bar-wrapper:hover .uvf-progress-bar {
|
|
5094
|
+
height: 4px;
|
|
5095
|
+
}
|
|
5096
|
+
|
|
5097
|
+
.uvf-progress-filled {
|
|
5098
|
+
background: var(--uvf-accent-1, #8B5CF6);
|
|
5099
|
+
height: 100%;
|
|
5100
|
+
border-radius: 4px;
|
|
5101
|
+
}
|
|
5102
|
+
|
|
5103
|
+
.uvf-progress-handle {
|
|
5104
|
+
width: 12px;
|
|
5105
|
+
height: 12px;
|
|
5106
|
+
background: #fff;
|
|
5107
|
+
border-radius: 50%;
|
|
5108
|
+
position: absolute;
|
|
5109
|
+
top: 50%;
|
|
5110
|
+
transform: translateY(-50%);
|
|
5111
|
+
cursor: grab;
|
|
5112
|
+
opacity: 0;
|
|
5113
|
+
transition: opacity 0.2s ease;
|
|
5114
|
+
}
|
|
5115
|
+
|
|
5116
|
+
.uvf-progress-bar-wrapper:hover .uvf-progress-handle {
|
|
5117
|
+
opacity: 1;
|
|
5118
|
+
}
|
|
5119
|
+
|
|
5120
|
+
/* Desktop center play button */
|
|
5121
|
+
.uvf-center-play-container {
|
|
5122
|
+
position: absolute;
|
|
5123
|
+
top: 50%;
|
|
5124
|
+
left: 50%;
|
|
5125
|
+
transform: translate(-50%, -50%);
|
|
5126
|
+
z-index: 8;
|
|
5127
|
+
}
|
|
5128
|
+
|
|
5129
|
+
.uvf-center-play-btn {
|
|
5130
|
+
width: clamp(56px, 10vw, 72px);
|
|
5131
|
+
height: clamp(56px, 10vw, 72px);
|
|
5132
|
+
background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
|
|
5133
|
+
border: none;
|
|
5134
|
+
border-radius: 50%;
|
|
5135
|
+
display: flex;
|
|
5136
|
+
align-items: center;
|
|
5137
|
+
justify-content: center;
|
|
5138
|
+
cursor: pointer;
|
|
5139
|
+
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
|
5140
|
+
transition: all 0.25s ease;
|
|
5141
|
+
}
|
|
5142
|
+
|
|
5143
|
+
.uvf-center-play-btn:hover {
|
|
5144
|
+
transform: scale(1.1);
|
|
5145
|
+
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
|
|
5146
|
+
}
|
|
5147
|
+
|
|
5148
|
+
.uvf-center-play-btn svg {
|
|
5149
|
+
width: clamp(24px, 4vw, 30px);
|
|
5150
|
+
height: clamp(24px, 4vw, 30px);
|
|
5151
|
+
fill: #fff;
|
|
5152
|
+
margin-left: 2px;
|
|
4656
5153
|
}
|
|
4657
5154
|
|
|
4658
5155
|
.uvf-progress-section {
|
|
@@ -7361,22 +7858,51 @@ export class WebPlayer extends BasePlayer {
|
|
|
7361
7858
|
});
|
|
7362
7859
|
settingsMenu.querySelectorAll('.speed-option').forEach(option => {
|
|
7363
7860
|
option.addEventListener('click', (e) => {
|
|
7861
|
+
e.preventDefault();
|
|
7862
|
+
e.stopPropagation();
|
|
7364
7863
|
const speed = parseFloat(e.target.dataset.speed || '1');
|
|
7864
|
+
this.updateSettingsActiveStates('speed-option', e.target);
|
|
7365
7865
|
this.setPlaybackRateFromSettings(speed);
|
|
7866
|
+
const speedLabel = speed === 1 ? 'Normal' : `${speed}x`;
|
|
7867
|
+
const accordionCurrent = option.closest('.uvf-accordion-item')?.querySelector('.uvf-accordion-current');
|
|
7868
|
+
if (accordionCurrent) {
|
|
7869
|
+
accordionCurrent.textContent = speedLabel;
|
|
7870
|
+
}
|
|
7871
|
+
this.debugLog(`Speed selected: ${speed}x`);
|
|
7366
7872
|
this.updateAccordionAfterSelection('speed');
|
|
7367
7873
|
});
|
|
7368
7874
|
});
|
|
7369
7875
|
settingsMenu.querySelectorAll('.quality-option').forEach(option => {
|
|
7370
7876
|
option.addEventListener('click', (e) => {
|
|
7877
|
+
e.preventDefault();
|
|
7878
|
+
e.stopPropagation();
|
|
7371
7879
|
const quality = e.target.dataset.quality || 'auto';
|
|
7880
|
+
this.updateSettingsActiveStates('quality-option', e.target);
|
|
7372
7881
|
this.setQualityFromSettings(quality);
|
|
7882
|
+
const qualityItem = this.availableQualities.find(q => q.value === quality);
|
|
7883
|
+
const qualityLabel = qualityItem ? qualityItem.label : 'Auto';
|
|
7884
|
+
const accordionCurrent = option.closest('.uvf-accordion-item')?.querySelector('.uvf-accordion-current');
|
|
7885
|
+
if (accordionCurrent) {
|
|
7886
|
+
accordionCurrent.textContent = qualityLabel;
|
|
7887
|
+
}
|
|
7888
|
+
this.debugLog(`Quality selected: ${quality} (${qualityLabel})`);
|
|
7373
7889
|
this.updateAccordionAfterSelection('quality');
|
|
7374
7890
|
});
|
|
7375
7891
|
});
|
|
7376
7892
|
settingsMenu.querySelectorAll('.subtitle-option').forEach(option => {
|
|
7377
7893
|
option.addEventListener('click', (e) => {
|
|
7894
|
+
e.preventDefault();
|
|
7895
|
+
e.stopPropagation();
|
|
7378
7896
|
const subtitle = e.target.dataset.subtitle || 'off';
|
|
7897
|
+
this.updateSettingsActiveStates('subtitle-option', e.target);
|
|
7379
7898
|
this.setSubtitle(subtitle);
|
|
7899
|
+
const subtitleItem = this.availableSubtitles.find(s => s.value === subtitle);
|
|
7900
|
+
const subtitleLabel = subtitleItem ? subtitleItem.label : 'Off';
|
|
7901
|
+
const accordionCurrent = option.closest('.uvf-accordion-item')?.querySelector('.uvf-accordion-current');
|
|
7902
|
+
if (accordionCurrent) {
|
|
7903
|
+
accordionCurrent.textContent = subtitleLabel;
|
|
7904
|
+
}
|
|
7905
|
+
this.debugLog(`Subtitle selected: ${subtitle} (${subtitleLabel})`);
|
|
7380
7906
|
this.updateAccordionAfterSelection('subtitles');
|
|
7381
7907
|
});
|
|
7382
7908
|
});
|
|
@@ -7409,10 +7935,19 @@ export class WebPlayer extends BasePlayer {
|
|
|
7409
7935
|
this.debugLog('Settings menu hidden via hideSettingsMenu()');
|
|
7410
7936
|
}
|
|
7411
7937
|
updateAccordionAfterSelection(section) {
|
|
7938
|
+
const settingsMenu = document.getElementById('uvf-settings-menu');
|
|
7939
|
+
if (settingsMenu) {
|
|
7940
|
+
settingsMenu.querySelectorAll('.uvf-accordion-item.expanded').forEach(item => {
|
|
7941
|
+
item.classList.remove('expanded');
|
|
7942
|
+
});
|
|
7943
|
+
}
|
|
7412
7944
|
setTimeout(() => {
|
|
7413
7945
|
this.generateAccordionMenu();
|
|
7414
7946
|
this.setupSettingsEventListeners();
|
|
7415
|
-
},
|
|
7947
|
+
}, 50);
|
|
7948
|
+
setTimeout(() => {
|
|
7949
|
+
this.hideSettingsMenu();
|
|
7950
|
+
}, 150);
|
|
7416
7951
|
}
|
|
7417
7952
|
updateSettingsActiveStates(className, activeElement) {
|
|
7418
7953
|
const settingsMenu = document.getElementById('uvf-settings-menu');
|