unified-video-framework 1.4.168 → 1.4.170
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 +134 -134
- package/packages/web/dist/WebPlayer.d.ts.map +1 -1
- package/packages/web/dist/WebPlayer.js +317 -156
- package/packages/web/dist/WebPlayer.js.map +1 -1
- package/packages/web/src/WebPlayer.ts +317 -156
|
@@ -3590,168 +3590,118 @@ export class WebPlayer extends BasePlayer {
|
|
|
3590
3590
|
pointer-events: none;
|
|
3591
3591
|
}
|
|
3592
3592
|
|
|
3593
|
-
/* Fullscreen specific styles */
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
|
|
3605
|
-
width: 100vw !important;
|
|
3606
|
-
height: 100vh !important;
|
|
3607
|
-
max-width: none !important;
|
|
3608
|
-
max-height: none !important;
|
|
3609
|
-
aspect-ratio: unset !important;
|
|
3610
|
-
}
|
|
3611
|
-
|
|
3612
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-video {
|
|
3613
|
-
width: 100vw !important;
|
|
3614
|
-
height: 100vh !important;
|
|
3615
|
-
}
|
|
3616
|
-
|
|
3617
|
-
/* Maintain consistent control sizing in fullscreen */
|
|
3618
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn {
|
|
3619
|
-
width: 40px;
|
|
3620
|
-
height: 40px;
|
|
3621
|
-
min-width: 40px;
|
|
3622
|
-
min-height: 40px;
|
|
3623
|
-
}
|
|
3624
|
-
|
|
3625
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause {
|
|
3626
|
-
width: 50px;
|
|
3627
|
-
height: 50px;
|
|
3628
|
-
min-width: 50px;
|
|
3629
|
-
min-height: 50px;
|
|
3630
|
-
}
|
|
3631
|
-
|
|
3632
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn svg {
|
|
3633
|
-
width: 20px;
|
|
3634
|
-
height: 20px;
|
|
3635
|
-
}
|
|
3636
|
-
|
|
3637
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause svg {
|
|
3638
|
-
width: 24px;
|
|
3639
|
-
height: 24px;
|
|
3640
|
-
}
|
|
3641
|
-
|
|
3642
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-top-btn {
|
|
3643
|
-
width: 40px;
|
|
3644
|
-
height: 40px;
|
|
3645
|
-
min-width: 40px;
|
|
3646
|
-
min-height: 40px;
|
|
3647
|
-
}
|
|
3648
|
-
|
|
3649
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-top-btn svg {
|
|
3650
|
-
width: 20px;
|
|
3651
|
-
height: 20px;
|
|
3652
|
-
}
|
|
3653
|
-
|
|
3654
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-time-display {
|
|
3655
|
-
font-size: 14px;
|
|
3656
|
-
padding: 0 10px;
|
|
3657
|
-
}
|
|
3658
|
-
|
|
3659
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn {
|
|
3660
|
-
width: 64px;
|
|
3661
|
-
height: 64px;
|
|
3662
|
-
}
|
|
3663
|
-
|
|
3664
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn svg {
|
|
3665
|
-
width: 28px;
|
|
3666
|
-
height: 28px;
|
|
3667
|
-
}
|
|
3668
|
-
|
|
3669
|
-
/* Ensure overlays remain visible in fullscreen with consistent spacing */
|
|
3670
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-title-bar,
|
|
3671
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-top-controls,
|
|
3672
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
|
|
3673
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-top-gradient,
|
|
3674
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-gradient {
|
|
3675
|
-
z-index: 2147483647; /* Maximum z-index value */
|
|
3676
|
-
}
|
|
3677
|
-
|
|
3678
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
|
|
3679
|
-
padding: 20px 30px; /* More generous padding in fullscreen */
|
|
3680
|
-
}
|
|
3681
|
-
|
|
3682
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-row {
|
|
3683
|
-
gap: 15px; /* Consistent gap in fullscreen */
|
|
3684
|
-
}
|
|
3685
|
-
|
|
3686
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-title-bar {
|
|
3687
|
-
padding: 20px 30px;
|
|
3688
|
-
}
|
|
3689
|
-
|
|
3690
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-top-controls {
|
|
3691
|
-
top: 20px;
|
|
3692
|
-
right: 30px;
|
|
3693
|
-
gap: 10px;
|
|
3694
|
-
}
|
|
3695
|
-
|
|
3696
|
-
/* Fullscreen hover and visibility states */
|
|
3697
|
-
.uvf-player-wrapper.uvf-fullscreen:hover .uvf-title-bar,
|
|
3698
|
-
.uvf-player-wrapper.uvf-fullscreen:hover .uvf-top-controls,
|
|
3699
|
-
.uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-title-bar,
|
|
3700
|
-
.uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-top-controls {
|
|
3701
|
-
opacity: 1;
|
|
3702
|
-
transform: translateY(0);
|
|
3703
|
-
}
|
|
3704
|
-
|
|
3705
|
-
/* Fullscreen mobile responsive adjustments */
|
|
3706
|
-
@media screen and (max-width: 767px) {
|
|
3707
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
|
|
3708
|
-
padding: 15px 20px;
|
|
3593
|
+
/* Fullscreen specific styles - DESKTOP AND LANDSCAPE ONLY */
|
|
3594
|
+
/* Mobile portrait uses Material You layout in fullscreen */
|
|
3595
|
+
@media not all and (max-width: 767px) and (orientation: portrait) {
|
|
3596
|
+
.uvf-player-wrapper.uvf-fullscreen {
|
|
3597
|
+
position: fixed !important;
|
|
3598
|
+
top: 0 !important;
|
|
3599
|
+
left: 0 !important;
|
|
3600
|
+
width: 100vw !important;
|
|
3601
|
+
height: 100vh !important;
|
|
3602
|
+
z-index: 2147483647;
|
|
3603
|
+
background: #000;
|
|
3709
3604
|
}
|
|
3710
3605
|
|
|
3711
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-
|
|
3712
|
-
|
|
3606
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
|
|
3607
|
+
width: 100vw !important;
|
|
3608
|
+
height: 100vh !important;
|
|
3609
|
+
max-width: none !important;
|
|
3610
|
+
max-height: none !important;
|
|
3611
|
+
aspect-ratio: unset !important;
|
|
3713
3612
|
}
|
|
3714
3613
|
|
|
3715
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-
|
|
3716
|
-
|
|
3717
|
-
|
|
3614
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-video {
|
|
3615
|
+
width: 100vw !important;
|
|
3616
|
+
height: 100vh !important;
|
|
3718
3617
|
}
|
|
3719
3618
|
|
|
3720
|
-
/*
|
|
3619
|
+
/* Maintain consistent control sizing in fullscreen - DESKTOP/LANDSCAPE ONLY */
|
|
3721
3620
|
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn {
|
|
3722
|
-
width:
|
|
3723
|
-
height:
|
|
3724
|
-
min-width:
|
|
3725
|
-
min-height:
|
|
3621
|
+
width: 40px;
|
|
3622
|
+
height: 40px;
|
|
3623
|
+
min-width: 40px;
|
|
3624
|
+
min-height: 40px;
|
|
3726
3625
|
}
|
|
3727
3626
|
|
|
3728
3627
|
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause {
|
|
3729
|
-
width:
|
|
3730
|
-
height:
|
|
3731
|
-
min-width:
|
|
3732
|
-
min-height:
|
|
3628
|
+
width: 50px;
|
|
3629
|
+
height: 50px;
|
|
3630
|
+
min-width: 50px;
|
|
3631
|
+
min-height: 50px;
|
|
3733
3632
|
}
|
|
3734
3633
|
|
|
3735
3634
|
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn svg {
|
|
3736
|
-
width:
|
|
3737
|
-
height:
|
|
3635
|
+
width: 20px;
|
|
3636
|
+
height: 20px;
|
|
3738
3637
|
}
|
|
3739
3638
|
|
|
3740
3639
|
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause svg {
|
|
3741
|
-
width:
|
|
3742
|
-
height:
|
|
3640
|
+
width: 24px;
|
|
3641
|
+
height: 24px;
|
|
3743
3642
|
}
|
|
3744
3643
|
|
|
3745
3644
|
.uvf-player-wrapper.uvf-fullscreen .uvf-top-btn {
|
|
3746
|
-
width:
|
|
3747
|
-
height:
|
|
3748
|
-
min-width:
|
|
3749
|
-
min-height:
|
|
3645
|
+
width: 40px;
|
|
3646
|
+
height: 40px;
|
|
3647
|
+
min-width: 40px;
|
|
3648
|
+
min-height: 40px;
|
|
3750
3649
|
}
|
|
3751
3650
|
|
|
3752
3651
|
.uvf-player-wrapper.uvf-fullscreen .uvf-top-btn svg {
|
|
3753
|
-
width:
|
|
3754
|
-
height:
|
|
3652
|
+
width: 20px;
|
|
3653
|
+
height: 20px;
|
|
3654
|
+
}
|
|
3655
|
+
|
|
3656
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-time-display {
|
|
3657
|
+
font-size: 14px;
|
|
3658
|
+
padding: 0 10px;
|
|
3659
|
+
}
|
|
3660
|
+
|
|
3661
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn {
|
|
3662
|
+
width: 64px;
|
|
3663
|
+
height: 64px;
|
|
3664
|
+
}
|
|
3665
|
+
|
|
3666
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn svg {
|
|
3667
|
+
width: 28px;
|
|
3668
|
+
height: 28px;
|
|
3669
|
+
}
|
|
3670
|
+
|
|
3671
|
+
/* Ensure overlays remain visible in fullscreen with consistent spacing */
|
|
3672
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-title-bar,
|
|
3673
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-top-controls,
|
|
3674
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
|
|
3675
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-top-gradient,
|
|
3676
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-gradient {
|
|
3677
|
+
z-index: 2147483647; /* Maximum z-index value */
|
|
3678
|
+
}
|
|
3679
|
+
|
|
3680
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
|
|
3681
|
+
padding: 20px 30px; /* More generous padding in fullscreen */
|
|
3682
|
+
}
|
|
3683
|
+
|
|
3684
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-row {
|
|
3685
|
+
gap: 15px; /* Consistent gap in fullscreen */
|
|
3686
|
+
}
|
|
3687
|
+
|
|
3688
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-title-bar {
|
|
3689
|
+
padding: 20px 30px;
|
|
3690
|
+
}
|
|
3691
|
+
|
|
3692
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-top-controls {
|
|
3693
|
+
top: 20px;
|
|
3694
|
+
right: 30px;
|
|
3695
|
+
gap: 10px;
|
|
3696
|
+
}
|
|
3697
|
+
|
|
3698
|
+
/* Fullscreen hover and visibility states */
|
|
3699
|
+
.uvf-player-wrapper.uvf-fullscreen:hover .uvf-title-bar,
|
|
3700
|
+
.uvf-player-wrapper.uvf-fullscreen:hover .uvf-top-controls,
|
|
3701
|
+
.uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-title-bar,
|
|
3702
|
+
.uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-top-controls {
|
|
3703
|
+
opacity: 1;
|
|
3704
|
+
transform: translateY(0);
|
|
3755
3705
|
}
|
|
3756
3706
|
}
|
|
3757
3707
|
|
|
@@ -3821,14 +3771,15 @@ export class WebPlayer extends BasePlayer {
|
|
|
3821
3771
|
overflow: hidden;
|
|
3822
3772
|
}
|
|
3823
3773
|
|
|
3824
|
-
/* Video container occupies middle 50% */
|
|
3774
|
+
/* Video container occupies middle 50% with all UI elements */
|
|
3825
3775
|
.uvf-responsive-container .uvf-video-container {
|
|
3826
3776
|
height: 50vh;
|
|
3827
3777
|
height: 50dvh;
|
|
3828
3778
|
width: 100vw;
|
|
3829
|
-
position:
|
|
3830
|
-
|
|
3831
|
-
|
|
3779
|
+
position: absolute;
|
|
3780
|
+
top: 25vh;
|
|
3781
|
+
top: 25dvh;
|
|
3782
|
+
left: 0;
|
|
3832
3783
|
aspect-ratio: unset !important;
|
|
3833
3784
|
background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
|
|
3834
3785
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
|
|
@@ -3874,17 +3825,16 @@ export class WebPlayer extends BasePlayer {
|
|
|
3874
3825
|
pointer-events: none;
|
|
3875
3826
|
}
|
|
3876
3827
|
|
|
3877
|
-
/* Material surface container for controls */
|
|
3878
|
-
.uvf-controls-bar
|
|
3828
|
+
/* Material surface container for controls - positioned in middle 50% area */
|
|
3829
|
+
.uvf-video-container .uvf-controls-bar,
|
|
3830
|
+
.uvf-responsive-container .uvf-video-container .uvf-controls-bar {
|
|
3879
3831
|
position: absolute;
|
|
3880
|
-
bottom:
|
|
3881
|
-
left:
|
|
3882
|
-
right:
|
|
3832
|
+
bottom: 12px;
|
|
3833
|
+
left: 16px;
|
|
3834
|
+
right: 16px;
|
|
3883
3835
|
height: auto;
|
|
3884
|
-
max-height:
|
|
3885
|
-
max-height: 25dvh;
|
|
3836
|
+
max-height: none;
|
|
3886
3837
|
padding: 16px 20px;
|
|
3887
|
-
padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px));
|
|
3888
3838
|
background: transparent;
|
|
3889
3839
|
z-index: 2;
|
|
3890
3840
|
display: flex;
|
|
@@ -4018,7 +3968,7 @@ export class WebPlayer extends BasePlayer {
|
|
|
4018
3968
|
align-items: center;
|
|
4019
3969
|
}
|
|
4020
3970
|
|
|
4021
|
-
/* Time display
|
|
3971
|
+
/* Time display positioned bottom-left above seekbar */
|
|
4022
3972
|
.uvf-time-display {
|
|
4023
3973
|
background: rgba(255, 255, 255, 0.1);
|
|
4024
3974
|
backdrop-filter: blur(8px);
|
|
@@ -4030,15 +3980,178 @@ export class WebPlayer extends BasePlayer {
|
|
|
4030
3980
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
4031
3981
|
}
|
|
4032
3982
|
|
|
4033
|
-
/*
|
|
4034
|
-
.uvf-
|
|
4035
|
-
|
|
3983
|
+
/* Framework branding positioned bottom-right above seekbar */
|
|
3984
|
+
.uvf-video-container .uvf-framework-branding {
|
|
3985
|
+
position: absolute !important;
|
|
3986
|
+
bottom: 80px !important;
|
|
3987
|
+
right: 16px !important;
|
|
3988
|
+
z-index: 10 !important;
|
|
3989
|
+
opacity: 0.8 !important;
|
|
3990
|
+
}
|
|
3991
|
+
|
|
3992
|
+
/* Adjust above-seekbar section to align time and branding */
|
|
3993
|
+
.uvf-above-seekbar-section {
|
|
3994
|
+
display: flex !important;
|
|
3995
|
+
justify-content: space-between !important;
|
|
3996
|
+
align-items: center !important;
|
|
3997
|
+
width: 100% !important;
|
|
3998
|
+
margin-bottom: 8px !important;
|
|
3999
|
+
}
|
|
4000
|
+
|
|
4001
|
+
/* Hide desktop volume control and skip buttons */
|
|
4036
4002
|
.uvf-volume-control,
|
|
4037
4003
|
#uvf-skip-back,
|
|
4038
4004
|
#uvf-skip-forward {
|
|
4039
4005
|
display: none !important;
|
|
4040
4006
|
}
|
|
4041
4007
|
|
|
4008
|
+
/* Title bar positioned in top-left of middle 50% video area */
|
|
4009
|
+
.uvf-video-container .uvf-title-bar,
|
|
4010
|
+
.uvf-responsive-container .uvf-video-container .uvf-title-bar {
|
|
4011
|
+
display: flex !important;
|
|
4012
|
+
position: absolute !important;
|
|
4013
|
+
top: 12px !important;
|
|
4014
|
+
left: 16px !important;
|
|
4015
|
+
right: auto !important;
|
|
4016
|
+
width: auto !important;
|
|
4017
|
+
max-width: 50% !important;
|
|
4018
|
+
height: auto !important;
|
|
4019
|
+
padding: 0 !important;
|
|
4020
|
+
background: transparent !important;
|
|
4021
|
+
z-index: 10 !important;
|
|
4022
|
+
opacity: 1 !important;
|
|
4023
|
+
transform: none !important;
|
|
4024
|
+
flex-direction: column !important;
|
|
4025
|
+
justify-content: flex-start !important;
|
|
4026
|
+
align-items: flex-start !important;
|
|
4027
|
+
}
|
|
4028
|
+
|
|
4029
|
+
/* Title content layout */
|
|
4030
|
+
.uvf-title-bar .uvf-title-content {
|
|
4031
|
+
display: flex !important;
|
|
4032
|
+
align-items: flex-start !important;
|
|
4033
|
+
gap: 12px !important;
|
|
4034
|
+
width: 100% !important;
|
|
4035
|
+
}
|
|
4036
|
+
|
|
4037
|
+
/* Video thumbnail/logo */
|
|
4038
|
+
.uvf-title-bar .uvf-video-thumb {
|
|
4039
|
+
width: 48px !important;
|
|
4040
|
+
height: 48px !important;
|
|
4041
|
+
border-radius: 12px !important;
|
|
4042
|
+
object-fit: cover !important;
|
|
4043
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
|
4044
|
+
flex-shrink: 0 !important;
|
|
4045
|
+
}
|
|
4046
|
+
|
|
4047
|
+
/* Title and subtitle text */
|
|
4048
|
+
.uvf-title-bar .uvf-title-text {
|
|
4049
|
+
flex: 1 !important;
|
|
4050
|
+
min-width: 0 !important;
|
|
4051
|
+
}
|
|
4052
|
+
|
|
4053
|
+
.uvf-title-bar .uvf-video-title {
|
|
4054
|
+
display: block !important;
|
|
4055
|
+
font-size: 16px !important;
|
|
4056
|
+
font-weight: 600 !important;
|
|
4057
|
+
color: #fff !important;
|
|
4058
|
+
margin-bottom: 4px !important;
|
|
4059
|
+
line-height: 1.3 !important;
|
|
4060
|
+
overflow: hidden !important;
|
|
4061
|
+
text-overflow: ellipsis !important;
|
|
4062
|
+
display: -webkit-box !important;
|
|
4063
|
+
-webkit-line-clamp: 2 !important;
|
|
4064
|
+
-webkit-box-orient: vertical !important;
|
|
4065
|
+
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
|
|
4066
|
+
}
|
|
4067
|
+
|
|
4068
|
+
.uvf-title-bar .uvf-video-subtitle {
|
|
4069
|
+
display: block !important;
|
|
4070
|
+
font-size: 13px !important;
|
|
4071
|
+
font-weight: 400 !important;
|
|
4072
|
+
color: rgba(255, 255, 255, 0.8) !important;
|
|
4073
|
+
line-height: 1.3 !important;
|
|
4074
|
+
overflow: hidden !important;
|
|
4075
|
+
text-overflow: ellipsis !important;
|
|
4076
|
+
display: -webkit-box !important;
|
|
4077
|
+
-webkit-line-clamp: 1 !important;
|
|
4078
|
+
-webkit-box-orient: vertical !important;
|
|
4079
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
|
|
4080
|
+
}
|
|
4081
|
+
|
|
4082
|
+
/* Top controls positioned in top-right of middle 50% video area */
|
|
4083
|
+
.uvf-video-container .uvf-top-controls,
|
|
4084
|
+
.uvf-responsive-container .uvf-video-container .uvf-top-controls {
|
|
4085
|
+
display: flex !important;
|
|
4086
|
+
position: absolute !important;
|
|
4087
|
+
top: 12px !important;
|
|
4088
|
+
right: 16px !important;
|
|
4089
|
+
width: auto !important;
|
|
4090
|
+
height: auto !important;
|
|
4091
|
+
padding: 0 !important;
|
|
4092
|
+
background: transparent !important;
|
|
4093
|
+
z-index: 10 !important;
|
|
4094
|
+
opacity: 1 !important;
|
|
4095
|
+
transform: none !important;
|
|
4096
|
+
gap: 12px !important;
|
|
4097
|
+
align-items: flex-start !important;
|
|
4098
|
+
justify-content: flex-end !important;
|
|
4099
|
+
flex-direction: row !important;
|
|
4100
|
+
}
|
|
4101
|
+
|
|
4102
|
+
/* Material You top buttons (cast & share) */
|
|
4103
|
+
.uvf-top-controls .uvf-top-btn {
|
|
4104
|
+
width: 48px !important;
|
|
4105
|
+
height: 48px !important;
|
|
4106
|
+
min-width: 48px !important;
|
|
4107
|
+
min-height: 48px !important;
|
|
4108
|
+
background: rgba(0, 0, 0, 0.5) !important;
|
|
4109
|
+
backdrop-filter: blur(16px) !important;
|
|
4110
|
+
-webkit-backdrop-filter: blur(16px) !important;
|
|
4111
|
+
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
|
4112
|
+
border-radius: 24px !important;
|
|
4113
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
|
|
4114
|
+
0 1px 3px rgba(0, 0, 0, 0.2) !important;
|
|
4115
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
4116
|
+
}
|
|
4117
|
+
|
|
4118
|
+
.uvf-top-controls .uvf-top-btn:active {
|
|
4119
|
+
transform: scale(0.95) !important;
|
|
4120
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
|
|
4121
|
+
0 2px 6px rgba(0, 0, 0, 0.3) !important;
|
|
4122
|
+
background: rgba(0, 0, 0, 0.7) !important;
|
|
4123
|
+
}
|
|
4124
|
+
|
|
4125
|
+
.uvf-top-controls .uvf-top-btn svg {
|
|
4126
|
+
width: 22px !important;
|
|
4127
|
+
height: 22px !important;
|
|
4128
|
+
fill: #fff !important;
|
|
4129
|
+
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
|
|
4130
|
+
}
|
|
4131
|
+
|
|
4132
|
+
/* Stop cast button styling */
|
|
4133
|
+
.uvf-top-controls .uvf-pill-btn {
|
|
4134
|
+
height: 48px !important;
|
|
4135
|
+
padding: 0 16px !important;
|
|
4136
|
+
border-radius: 24px !important;
|
|
4137
|
+
background: rgba(255, 77, 79, 0.95) !important;
|
|
4138
|
+
backdrop-filter: blur(16px) !important;
|
|
4139
|
+
border: 1px solid rgba(255, 77, 79, 0.3) !important;
|
|
4140
|
+
box-shadow: 0 2px 8px rgba(255, 77, 79, 0.4),
|
|
4141
|
+
0 1px 3px rgba(0, 0, 0, 0.3) !important;
|
|
4142
|
+
}
|
|
4143
|
+
|
|
4144
|
+
.uvf-top-controls .uvf-pill-btn svg {
|
|
4145
|
+
width: 20px !important;
|
|
4146
|
+
height: 20px !important;
|
|
4147
|
+
}
|
|
4148
|
+
|
|
4149
|
+
.uvf-top-controls .uvf-pill-btn span {
|
|
4150
|
+
font-size: 14px !important;
|
|
4151
|
+
font-weight: 500 !important;
|
|
4152
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
|
|
4153
|
+
}
|
|
4154
|
+
|
|
4042
4155
|
/* Optimize settings button for Material You */
|
|
4043
4156
|
#uvf-settings-btn {
|
|
4044
4157
|
width: 48px !important;
|
|
@@ -4047,6 +4160,54 @@ export class WebPlayer extends BasePlayer {
|
|
|
4047
4160
|
min-height: 48px !important;
|
|
4048
4161
|
border-radius: 24px !important;
|
|
4049
4162
|
}
|
|
4163
|
+
|
|
4164
|
+
/* Fullscreen on mobile portrait - maintain Material You layout */
|
|
4165
|
+
.uvf-player-wrapper.uvf-fullscreen,
|
|
4166
|
+
.uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen {
|
|
4167
|
+
position: fixed !important;
|
|
4168
|
+
top: 0 !important;
|
|
4169
|
+
left: 0 !important;
|
|
4170
|
+
width: 100vw !important;
|
|
4171
|
+
height: 100vh !important;
|
|
4172
|
+
height: 100dvh !important;
|
|
4173
|
+
z-index: 2147483647 !important;
|
|
4174
|
+
display: flex !important;
|
|
4175
|
+
flex-direction: column !important;
|
|
4176
|
+
background: #000 !important;
|
|
4177
|
+
}
|
|
4178
|
+
|
|
4179
|
+
/* Video container in fullscreen - keep 50% middle */
|
|
4180
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-video-container,
|
|
4181
|
+
.uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
|
|
4182
|
+
height: 50vh !important;
|
|
4183
|
+
height: 50dvh !important;
|
|
4184
|
+
width: 100vw !important;
|
|
4185
|
+
margin-top: 25vh !important;
|
|
4186
|
+
margin-top: 25dvh !important;
|
|
4187
|
+
position: relative !important;
|
|
4188
|
+
}
|
|
4189
|
+
|
|
4190
|
+
/* Top and bottom black sections in fullscreen */
|
|
4191
|
+
.uvf-player-wrapper.uvf-fullscreen::before {
|
|
4192
|
+
height: 25vh !important;
|
|
4193
|
+
height: 25dvh !important;
|
|
4194
|
+
}
|
|
4195
|
+
|
|
4196
|
+
.uvf-player-wrapper.uvf-fullscreen::after {
|
|
4197
|
+
height: 25vh !important;
|
|
4198
|
+
height: 25dvh !important;
|
|
4199
|
+
}
|
|
4200
|
+
|
|
4201
|
+
/* Controls stay in bottom 25% in fullscreen */
|
|
4202
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
|
|
4203
|
+
.uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
|
|
4204
|
+
position: absolute !important;
|
|
4205
|
+
bottom: 0 !important;
|
|
4206
|
+
max-height: 25vh !important;
|
|
4207
|
+
max-height: 25dvh !important;
|
|
4208
|
+
padding: 16px 20px !important;
|
|
4209
|
+
padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px)) !important;
|
|
4210
|
+
}
|
|
4050
4211
|
}
|
|
4051
4212
|
}
|
|
4052
4213
|
|