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
|
@@ -4058,168 +4058,118 @@ export class WebPlayer extends BasePlayer {
|
|
|
4058
4058
|
pointer-events: none;
|
|
4059
4059
|
}
|
|
4060
4060
|
|
|
4061
|
-
/* Fullscreen specific styles */
|
|
4062
|
-
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
|
|
4068
|
-
|
|
4069
|
-
|
|
4070
|
-
|
|
4071
|
-
|
|
4072
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
|
|
4073
|
-
width: 100vw !important;
|
|
4074
|
-
height: 100vh !important;
|
|
4075
|
-
max-width: none !important;
|
|
4076
|
-
max-height: none !important;
|
|
4077
|
-
aspect-ratio: unset !important;
|
|
4078
|
-
}
|
|
4079
|
-
|
|
4080
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-video {
|
|
4081
|
-
width: 100vw !important;
|
|
4082
|
-
height: 100vh !important;
|
|
4083
|
-
}
|
|
4084
|
-
|
|
4085
|
-
/* Maintain consistent control sizing in fullscreen */
|
|
4086
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn {
|
|
4087
|
-
width: 40px;
|
|
4088
|
-
height: 40px;
|
|
4089
|
-
min-width: 40px;
|
|
4090
|
-
min-height: 40px;
|
|
4091
|
-
}
|
|
4092
|
-
|
|
4093
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause {
|
|
4094
|
-
width: 50px;
|
|
4095
|
-
height: 50px;
|
|
4096
|
-
min-width: 50px;
|
|
4097
|
-
min-height: 50px;
|
|
4098
|
-
}
|
|
4099
|
-
|
|
4100
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn svg {
|
|
4101
|
-
width: 20px;
|
|
4102
|
-
height: 20px;
|
|
4103
|
-
}
|
|
4104
|
-
|
|
4105
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause svg {
|
|
4106
|
-
width: 24px;
|
|
4107
|
-
height: 24px;
|
|
4108
|
-
}
|
|
4109
|
-
|
|
4110
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-top-btn {
|
|
4111
|
-
width: 40px;
|
|
4112
|
-
height: 40px;
|
|
4113
|
-
min-width: 40px;
|
|
4114
|
-
min-height: 40px;
|
|
4115
|
-
}
|
|
4116
|
-
|
|
4117
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-top-btn svg {
|
|
4118
|
-
width: 20px;
|
|
4119
|
-
height: 20px;
|
|
4120
|
-
}
|
|
4121
|
-
|
|
4122
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-time-display {
|
|
4123
|
-
font-size: 14px;
|
|
4124
|
-
padding: 0 10px;
|
|
4125
|
-
}
|
|
4126
|
-
|
|
4127
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn {
|
|
4128
|
-
width: 64px;
|
|
4129
|
-
height: 64px;
|
|
4130
|
-
}
|
|
4131
|
-
|
|
4132
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn svg {
|
|
4133
|
-
width: 28px;
|
|
4134
|
-
height: 28px;
|
|
4135
|
-
}
|
|
4136
|
-
|
|
4137
|
-
/* Ensure overlays remain visible in fullscreen with consistent spacing */
|
|
4138
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-title-bar,
|
|
4139
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-top-controls,
|
|
4140
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
|
|
4141
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-top-gradient,
|
|
4142
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-gradient {
|
|
4143
|
-
z-index: 2147483647; /* Maximum z-index value */
|
|
4144
|
-
}
|
|
4145
|
-
|
|
4146
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
|
|
4147
|
-
padding: 20px 30px; /* More generous padding in fullscreen */
|
|
4148
|
-
}
|
|
4149
|
-
|
|
4150
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-row {
|
|
4151
|
-
gap: 15px; /* Consistent gap in fullscreen */
|
|
4152
|
-
}
|
|
4153
|
-
|
|
4154
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-title-bar {
|
|
4155
|
-
padding: 20px 30px;
|
|
4156
|
-
}
|
|
4157
|
-
|
|
4158
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-top-controls {
|
|
4159
|
-
top: 20px;
|
|
4160
|
-
right: 30px;
|
|
4161
|
-
gap: 10px;
|
|
4162
|
-
}
|
|
4163
|
-
|
|
4164
|
-
/* Fullscreen hover and visibility states */
|
|
4165
|
-
.uvf-player-wrapper.uvf-fullscreen:hover .uvf-title-bar,
|
|
4166
|
-
.uvf-player-wrapper.uvf-fullscreen:hover .uvf-top-controls,
|
|
4167
|
-
.uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-title-bar,
|
|
4168
|
-
.uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-top-controls {
|
|
4169
|
-
opacity: 1;
|
|
4170
|
-
transform: translateY(0);
|
|
4171
|
-
}
|
|
4172
|
-
|
|
4173
|
-
/* Fullscreen mobile responsive adjustments */
|
|
4174
|
-
@media screen and (max-width: 767px) {
|
|
4175
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
|
|
4176
|
-
padding: 15px 20px;
|
|
4061
|
+
/* Fullscreen specific styles - DESKTOP AND LANDSCAPE ONLY */
|
|
4062
|
+
/* Mobile portrait uses Material You layout in fullscreen */
|
|
4063
|
+
@media not all and (max-width: 767px) and (orientation: portrait) {
|
|
4064
|
+
.uvf-player-wrapper.uvf-fullscreen {
|
|
4065
|
+
position: fixed !important;
|
|
4066
|
+
top: 0 !important;
|
|
4067
|
+
left: 0 !important;
|
|
4068
|
+
width: 100vw !important;
|
|
4069
|
+
height: 100vh !important;
|
|
4070
|
+
z-index: 2147483647;
|
|
4071
|
+
background: #000;
|
|
4177
4072
|
}
|
|
4178
4073
|
|
|
4179
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-
|
|
4180
|
-
|
|
4074
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
|
|
4075
|
+
width: 100vw !important;
|
|
4076
|
+
height: 100vh !important;
|
|
4077
|
+
max-width: none !important;
|
|
4078
|
+
max-height: none !important;
|
|
4079
|
+
aspect-ratio: unset !important;
|
|
4181
4080
|
}
|
|
4182
4081
|
|
|
4183
|
-
.uvf-player-wrapper.uvf-fullscreen .uvf-
|
|
4184
|
-
|
|
4185
|
-
|
|
4082
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-video {
|
|
4083
|
+
width: 100vw !important;
|
|
4084
|
+
height: 100vh !important;
|
|
4186
4085
|
}
|
|
4187
4086
|
|
|
4188
|
-
/*
|
|
4087
|
+
/* Maintain consistent control sizing in fullscreen - DESKTOP/LANDSCAPE ONLY */
|
|
4189
4088
|
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn {
|
|
4190
|
-
width:
|
|
4191
|
-
height:
|
|
4192
|
-
min-width:
|
|
4193
|
-
min-height:
|
|
4089
|
+
width: 40px;
|
|
4090
|
+
height: 40px;
|
|
4091
|
+
min-width: 40px;
|
|
4092
|
+
min-height: 40px;
|
|
4194
4093
|
}
|
|
4195
4094
|
|
|
4196
4095
|
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause {
|
|
4197
|
-
width:
|
|
4198
|
-
height:
|
|
4199
|
-
min-width:
|
|
4200
|
-
min-height:
|
|
4096
|
+
width: 50px;
|
|
4097
|
+
height: 50px;
|
|
4098
|
+
min-width: 50px;
|
|
4099
|
+
min-height: 50px;
|
|
4201
4100
|
}
|
|
4202
4101
|
|
|
4203
4102
|
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn svg {
|
|
4204
|
-
width:
|
|
4205
|
-
height:
|
|
4103
|
+
width: 20px;
|
|
4104
|
+
height: 20px;
|
|
4206
4105
|
}
|
|
4207
4106
|
|
|
4208
4107
|
.uvf-player-wrapper.uvf-fullscreen .uvf-control-btn.play-pause svg {
|
|
4209
|
-
width:
|
|
4210
|
-
height:
|
|
4108
|
+
width: 24px;
|
|
4109
|
+
height: 24px;
|
|
4211
4110
|
}
|
|
4212
4111
|
|
|
4213
4112
|
.uvf-player-wrapper.uvf-fullscreen .uvf-top-btn {
|
|
4214
|
-
width:
|
|
4215
|
-
height:
|
|
4216
|
-
min-width:
|
|
4217
|
-
min-height:
|
|
4113
|
+
width: 40px;
|
|
4114
|
+
height: 40px;
|
|
4115
|
+
min-width: 40px;
|
|
4116
|
+
min-height: 40px;
|
|
4218
4117
|
}
|
|
4219
4118
|
|
|
4220
4119
|
.uvf-player-wrapper.uvf-fullscreen .uvf-top-btn svg {
|
|
4221
|
-
width:
|
|
4222
|
-
height:
|
|
4120
|
+
width: 20px;
|
|
4121
|
+
height: 20px;
|
|
4122
|
+
}
|
|
4123
|
+
|
|
4124
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-time-display {
|
|
4125
|
+
font-size: 14px;
|
|
4126
|
+
padding: 0 10px;
|
|
4127
|
+
}
|
|
4128
|
+
|
|
4129
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn {
|
|
4130
|
+
width: 64px;
|
|
4131
|
+
height: 64px;
|
|
4132
|
+
}
|
|
4133
|
+
|
|
4134
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-center-play-btn svg {
|
|
4135
|
+
width: 28px;
|
|
4136
|
+
height: 28px;
|
|
4137
|
+
}
|
|
4138
|
+
|
|
4139
|
+
/* Ensure overlays remain visible in fullscreen with consistent spacing */
|
|
4140
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-title-bar,
|
|
4141
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-top-controls,
|
|
4142
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
|
|
4143
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-top-gradient,
|
|
4144
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-gradient {
|
|
4145
|
+
z-index: 2147483647; /* Maximum z-index value */
|
|
4146
|
+
}
|
|
4147
|
+
|
|
4148
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
|
|
4149
|
+
padding: 20px 30px; /* More generous padding in fullscreen */
|
|
4150
|
+
}
|
|
4151
|
+
|
|
4152
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-row {
|
|
4153
|
+
gap: 15px; /* Consistent gap in fullscreen */
|
|
4154
|
+
}
|
|
4155
|
+
|
|
4156
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-title-bar {
|
|
4157
|
+
padding: 20px 30px;
|
|
4158
|
+
}
|
|
4159
|
+
|
|
4160
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-top-controls {
|
|
4161
|
+
top: 20px;
|
|
4162
|
+
right: 30px;
|
|
4163
|
+
gap: 10px;
|
|
4164
|
+
}
|
|
4165
|
+
|
|
4166
|
+
/* Fullscreen hover and visibility states */
|
|
4167
|
+
.uvf-player-wrapper.uvf-fullscreen:hover .uvf-title-bar,
|
|
4168
|
+
.uvf-player-wrapper.uvf-fullscreen:hover .uvf-top-controls,
|
|
4169
|
+
.uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-title-bar,
|
|
4170
|
+
.uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-top-controls {
|
|
4171
|
+
opacity: 1;
|
|
4172
|
+
transform: translateY(0);
|
|
4223
4173
|
}
|
|
4224
4174
|
}
|
|
4225
4175
|
|
|
@@ -4289,14 +4239,15 @@ export class WebPlayer extends BasePlayer {
|
|
|
4289
4239
|
overflow: hidden;
|
|
4290
4240
|
}
|
|
4291
4241
|
|
|
4292
|
-
/* Video container occupies middle 50% */
|
|
4242
|
+
/* Video container occupies middle 50% with all UI elements */
|
|
4293
4243
|
.uvf-responsive-container .uvf-video-container {
|
|
4294
4244
|
height: 50vh;
|
|
4295
4245
|
height: 50dvh;
|
|
4296
4246
|
width: 100vw;
|
|
4297
|
-
position:
|
|
4298
|
-
|
|
4299
|
-
|
|
4247
|
+
position: absolute;
|
|
4248
|
+
top: 25vh;
|
|
4249
|
+
top: 25dvh;
|
|
4250
|
+
left: 0;
|
|
4300
4251
|
aspect-ratio: unset !important;
|
|
4301
4252
|
background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
|
|
4302
4253
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
|
|
@@ -4342,17 +4293,16 @@ export class WebPlayer extends BasePlayer {
|
|
|
4342
4293
|
pointer-events: none;
|
|
4343
4294
|
}
|
|
4344
4295
|
|
|
4345
|
-
/* Material surface container for controls */
|
|
4346
|
-
.uvf-controls-bar
|
|
4296
|
+
/* Material surface container for controls - positioned in middle 50% area */
|
|
4297
|
+
.uvf-video-container .uvf-controls-bar,
|
|
4298
|
+
.uvf-responsive-container .uvf-video-container .uvf-controls-bar {
|
|
4347
4299
|
position: absolute;
|
|
4348
|
-
bottom:
|
|
4349
|
-
left:
|
|
4350
|
-
right:
|
|
4300
|
+
bottom: 12px;
|
|
4301
|
+
left: 16px;
|
|
4302
|
+
right: 16px;
|
|
4351
4303
|
height: auto;
|
|
4352
|
-
max-height:
|
|
4353
|
-
max-height: 25dvh;
|
|
4304
|
+
max-height: none;
|
|
4354
4305
|
padding: 16px 20px;
|
|
4355
|
-
padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px));
|
|
4356
4306
|
background: transparent;
|
|
4357
4307
|
z-index: 2;
|
|
4358
4308
|
display: flex;
|
|
@@ -4486,7 +4436,7 @@ export class WebPlayer extends BasePlayer {
|
|
|
4486
4436
|
align-items: center;
|
|
4487
4437
|
}
|
|
4488
4438
|
|
|
4489
|
-
/* Time display
|
|
4439
|
+
/* Time display positioned bottom-left above seekbar */
|
|
4490
4440
|
.uvf-time-display {
|
|
4491
4441
|
background: rgba(255, 255, 255, 0.1);
|
|
4492
4442
|
backdrop-filter: blur(8px);
|
|
@@ -4498,15 +4448,178 @@ export class WebPlayer extends BasePlayer {
|
|
|
4498
4448
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
4499
4449
|
}
|
|
4500
4450
|
|
|
4501
|
-
/*
|
|
4502
|
-
.uvf-
|
|
4503
|
-
|
|
4451
|
+
/* Framework branding positioned bottom-right above seekbar */
|
|
4452
|
+
.uvf-video-container .uvf-framework-branding {
|
|
4453
|
+
position: absolute !important;
|
|
4454
|
+
bottom: 80px !important;
|
|
4455
|
+
right: 16px !important;
|
|
4456
|
+
z-index: 10 !important;
|
|
4457
|
+
opacity: 0.8 !important;
|
|
4458
|
+
}
|
|
4459
|
+
|
|
4460
|
+
/* Adjust above-seekbar section to align time and branding */
|
|
4461
|
+
.uvf-above-seekbar-section {
|
|
4462
|
+
display: flex !important;
|
|
4463
|
+
justify-content: space-between !important;
|
|
4464
|
+
align-items: center !important;
|
|
4465
|
+
width: 100% !important;
|
|
4466
|
+
margin-bottom: 8px !important;
|
|
4467
|
+
}
|
|
4468
|
+
|
|
4469
|
+
/* Hide desktop volume control and skip buttons */
|
|
4504
4470
|
.uvf-volume-control,
|
|
4505
4471
|
#uvf-skip-back,
|
|
4506
4472
|
#uvf-skip-forward {
|
|
4507
4473
|
display: none !important;
|
|
4508
4474
|
}
|
|
4509
4475
|
|
|
4476
|
+
/* Title bar positioned in top-left of middle 50% video area */
|
|
4477
|
+
.uvf-video-container .uvf-title-bar,
|
|
4478
|
+
.uvf-responsive-container .uvf-video-container .uvf-title-bar {
|
|
4479
|
+
display: flex !important;
|
|
4480
|
+
position: absolute !important;
|
|
4481
|
+
top: 12px !important;
|
|
4482
|
+
left: 16px !important;
|
|
4483
|
+
right: auto !important;
|
|
4484
|
+
width: auto !important;
|
|
4485
|
+
max-width: 50% !important;
|
|
4486
|
+
height: auto !important;
|
|
4487
|
+
padding: 0 !important;
|
|
4488
|
+
background: transparent !important;
|
|
4489
|
+
z-index: 10 !important;
|
|
4490
|
+
opacity: 1 !important;
|
|
4491
|
+
transform: none !important;
|
|
4492
|
+
flex-direction: column !important;
|
|
4493
|
+
justify-content: flex-start !important;
|
|
4494
|
+
align-items: flex-start !important;
|
|
4495
|
+
}
|
|
4496
|
+
|
|
4497
|
+
/* Title content layout */
|
|
4498
|
+
.uvf-title-bar .uvf-title-content {
|
|
4499
|
+
display: flex !important;
|
|
4500
|
+
align-items: flex-start !important;
|
|
4501
|
+
gap: 12px !important;
|
|
4502
|
+
width: 100% !important;
|
|
4503
|
+
}
|
|
4504
|
+
|
|
4505
|
+
/* Video thumbnail/logo */
|
|
4506
|
+
.uvf-title-bar .uvf-video-thumb {
|
|
4507
|
+
width: 48px !important;
|
|
4508
|
+
height: 48px !important;
|
|
4509
|
+
border-radius: 12px !important;
|
|
4510
|
+
object-fit: cover !important;
|
|
4511
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
|
4512
|
+
flex-shrink: 0 !important;
|
|
4513
|
+
}
|
|
4514
|
+
|
|
4515
|
+
/* Title and subtitle text */
|
|
4516
|
+
.uvf-title-bar .uvf-title-text {
|
|
4517
|
+
flex: 1 !important;
|
|
4518
|
+
min-width: 0 !important;
|
|
4519
|
+
}
|
|
4520
|
+
|
|
4521
|
+
.uvf-title-bar .uvf-video-title {
|
|
4522
|
+
display: block !important;
|
|
4523
|
+
font-size: 16px !important;
|
|
4524
|
+
font-weight: 600 !important;
|
|
4525
|
+
color: #fff !important;
|
|
4526
|
+
margin-bottom: 4px !important;
|
|
4527
|
+
line-height: 1.3 !important;
|
|
4528
|
+
overflow: hidden !important;
|
|
4529
|
+
text-overflow: ellipsis !important;
|
|
4530
|
+
display: -webkit-box !important;
|
|
4531
|
+
-webkit-line-clamp: 2 !important;
|
|
4532
|
+
-webkit-box-orient: vertical !important;
|
|
4533
|
+
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
|
|
4534
|
+
}
|
|
4535
|
+
|
|
4536
|
+
.uvf-title-bar .uvf-video-subtitle {
|
|
4537
|
+
display: block !important;
|
|
4538
|
+
font-size: 13px !important;
|
|
4539
|
+
font-weight: 400 !important;
|
|
4540
|
+
color: rgba(255, 255, 255, 0.8) !important;
|
|
4541
|
+
line-height: 1.3 !important;
|
|
4542
|
+
overflow: hidden !important;
|
|
4543
|
+
text-overflow: ellipsis !important;
|
|
4544
|
+
display: -webkit-box !important;
|
|
4545
|
+
-webkit-line-clamp: 1 !important;
|
|
4546
|
+
-webkit-box-orient: vertical !important;
|
|
4547
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
|
|
4548
|
+
}
|
|
4549
|
+
|
|
4550
|
+
/* Top controls positioned in top-right of middle 50% video area */
|
|
4551
|
+
.uvf-video-container .uvf-top-controls,
|
|
4552
|
+
.uvf-responsive-container .uvf-video-container .uvf-top-controls {
|
|
4553
|
+
display: flex !important;
|
|
4554
|
+
position: absolute !important;
|
|
4555
|
+
top: 12px !important;
|
|
4556
|
+
right: 16px !important;
|
|
4557
|
+
width: auto !important;
|
|
4558
|
+
height: auto !important;
|
|
4559
|
+
padding: 0 !important;
|
|
4560
|
+
background: transparent !important;
|
|
4561
|
+
z-index: 10 !important;
|
|
4562
|
+
opacity: 1 !important;
|
|
4563
|
+
transform: none !important;
|
|
4564
|
+
gap: 12px !important;
|
|
4565
|
+
align-items: flex-start !important;
|
|
4566
|
+
justify-content: flex-end !important;
|
|
4567
|
+
flex-direction: row !important;
|
|
4568
|
+
}
|
|
4569
|
+
|
|
4570
|
+
/* Material You top buttons (cast & share) */
|
|
4571
|
+
.uvf-top-controls .uvf-top-btn {
|
|
4572
|
+
width: 48px !important;
|
|
4573
|
+
height: 48px !important;
|
|
4574
|
+
min-width: 48px !important;
|
|
4575
|
+
min-height: 48px !important;
|
|
4576
|
+
background: rgba(0, 0, 0, 0.5) !important;
|
|
4577
|
+
backdrop-filter: blur(16px) !important;
|
|
4578
|
+
-webkit-backdrop-filter: blur(16px) !important;
|
|
4579
|
+
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
|
4580
|
+
border-radius: 24px !important;
|
|
4581
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
|
|
4582
|
+
0 1px 3px rgba(0, 0, 0, 0.2) !important;
|
|
4583
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
4584
|
+
}
|
|
4585
|
+
|
|
4586
|
+
.uvf-top-controls .uvf-top-btn:active {
|
|
4587
|
+
transform: scale(0.95) !important;
|
|
4588
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
|
|
4589
|
+
0 2px 6px rgba(0, 0, 0, 0.3) !important;
|
|
4590
|
+
background: rgba(0, 0, 0, 0.7) !important;
|
|
4591
|
+
}
|
|
4592
|
+
|
|
4593
|
+
.uvf-top-controls .uvf-top-btn svg {
|
|
4594
|
+
width: 22px !important;
|
|
4595
|
+
height: 22px !important;
|
|
4596
|
+
fill: #fff !important;
|
|
4597
|
+
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
|
|
4598
|
+
}
|
|
4599
|
+
|
|
4600
|
+
/* Stop cast button styling */
|
|
4601
|
+
.uvf-top-controls .uvf-pill-btn {
|
|
4602
|
+
height: 48px !important;
|
|
4603
|
+
padding: 0 16px !important;
|
|
4604
|
+
border-radius: 24px !important;
|
|
4605
|
+
background: rgba(255, 77, 79, 0.95) !important;
|
|
4606
|
+
backdrop-filter: blur(16px) !important;
|
|
4607
|
+
border: 1px solid rgba(255, 77, 79, 0.3) !important;
|
|
4608
|
+
box-shadow: 0 2px 8px rgba(255, 77, 79, 0.4),
|
|
4609
|
+
0 1px 3px rgba(0, 0, 0, 0.3) !important;
|
|
4610
|
+
}
|
|
4611
|
+
|
|
4612
|
+
.uvf-top-controls .uvf-pill-btn svg {
|
|
4613
|
+
width: 20px !important;
|
|
4614
|
+
height: 20px !important;
|
|
4615
|
+
}
|
|
4616
|
+
|
|
4617
|
+
.uvf-top-controls .uvf-pill-btn span {
|
|
4618
|
+
font-size: 14px !important;
|
|
4619
|
+
font-weight: 500 !important;
|
|
4620
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
|
|
4621
|
+
}
|
|
4622
|
+
|
|
4510
4623
|
/* Optimize settings button for Material You */
|
|
4511
4624
|
#uvf-settings-btn {
|
|
4512
4625
|
width: 48px !important;
|
|
@@ -4515,6 +4628,54 @@ export class WebPlayer extends BasePlayer {
|
|
|
4515
4628
|
min-height: 48px !important;
|
|
4516
4629
|
border-radius: 24px !important;
|
|
4517
4630
|
}
|
|
4631
|
+
|
|
4632
|
+
/* Fullscreen on mobile portrait - maintain Material You layout */
|
|
4633
|
+
.uvf-player-wrapper.uvf-fullscreen,
|
|
4634
|
+
.uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen {
|
|
4635
|
+
position: fixed !important;
|
|
4636
|
+
top: 0 !important;
|
|
4637
|
+
left: 0 !important;
|
|
4638
|
+
width: 100vw !important;
|
|
4639
|
+
height: 100vh !important;
|
|
4640
|
+
height: 100dvh !important;
|
|
4641
|
+
z-index: 2147483647 !important;
|
|
4642
|
+
display: flex !important;
|
|
4643
|
+
flex-direction: column !important;
|
|
4644
|
+
background: #000 !important;
|
|
4645
|
+
}
|
|
4646
|
+
|
|
4647
|
+
/* Video container in fullscreen - keep 50% middle */
|
|
4648
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-video-container,
|
|
4649
|
+
.uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
|
|
4650
|
+
height: 50vh !important;
|
|
4651
|
+
height: 50dvh !important;
|
|
4652
|
+
width: 100vw !important;
|
|
4653
|
+
margin-top: 25vh !important;
|
|
4654
|
+
margin-top: 25dvh !important;
|
|
4655
|
+
position: relative !important;
|
|
4656
|
+
}
|
|
4657
|
+
|
|
4658
|
+
/* Top and bottom black sections in fullscreen */
|
|
4659
|
+
.uvf-player-wrapper.uvf-fullscreen::before {
|
|
4660
|
+
height: 25vh !important;
|
|
4661
|
+
height: 25dvh !important;
|
|
4662
|
+
}
|
|
4663
|
+
|
|
4664
|
+
.uvf-player-wrapper.uvf-fullscreen::after {
|
|
4665
|
+
height: 25vh !important;
|
|
4666
|
+
height: 25dvh !important;
|
|
4667
|
+
}
|
|
4668
|
+
|
|
4669
|
+
/* Controls stay in bottom 25% in fullscreen */
|
|
4670
|
+
.uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
|
|
4671
|
+
.uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
|
|
4672
|
+
position: absolute !important;
|
|
4673
|
+
bottom: 0 !important;
|
|
4674
|
+
max-height: 25vh !important;
|
|
4675
|
+
max-height: 25dvh !important;
|
|
4676
|
+
padding: 16px 20px !important;
|
|
4677
|
+
padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px)) !important;
|
|
4678
|
+
}
|
|
4518
4679
|
}
|
|
4519
4680
|
}
|
|
4520
4681
|
|