unified-video-framework 1.4.160 → 1.4.161
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.
|
@@ -4329,6 +4329,138 @@ export class WebPlayer extends BasePlayer {
|
|
|
4329
4329
|
@media screen and (max-width: 767px) {
|
|
4330
4330
|
html, body {
|
|
4331
4331
|
overflow-x: hidden;
|
|
4332
|
+
background: #000;
|
|
4333
|
+
}
|
|
4334
|
+
|
|
4335
|
+
/* Mobile Portrait Layout - Centered Player with Top/Bottom Black Areas */
|
|
4336
|
+
@media screen and (orientation: portrait) {
|
|
4337
|
+
.uvf-responsive-container {
|
|
4338
|
+
display: flex;
|
|
4339
|
+
flex-direction: column;
|
|
4340
|
+
height: 100vh;
|
|
4341
|
+
height: 100dvh;
|
|
4342
|
+
background: #000;
|
|
4343
|
+
overflow: hidden;
|
|
4344
|
+
position: fixed;
|
|
4345
|
+
top: 0;
|
|
4346
|
+
left: 0;
|
|
4347
|
+
width: 100vw;
|
|
4348
|
+
}
|
|
4349
|
+
|
|
4350
|
+
/* Top black area - 25% of viewport */
|
|
4351
|
+
.uvf-responsive-container::before {
|
|
4352
|
+
content: '';
|
|
4353
|
+
flex: 0 0 25vh;
|
|
4354
|
+
background: #000;
|
|
4355
|
+
pointer-events: none;
|
|
4356
|
+
}
|
|
4357
|
+
|
|
4358
|
+
/* Bottom black area - 25% of viewport */
|
|
4359
|
+
.uvf-responsive-container::after {
|
|
4360
|
+
content: '';
|
|
4361
|
+
flex: 0 0 25vh;
|
|
4362
|
+
background: #000;
|
|
4363
|
+
pointer-events: none;
|
|
4364
|
+
}
|
|
4365
|
+
|
|
4366
|
+
/* Centered video player wrapper - 50% of viewport */
|
|
4367
|
+
.uvf-responsive-container .uvf-player-wrapper {
|
|
4368
|
+
flex: 1;
|
|
4369
|
+
width: 100vw;
|
|
4370
|
+
display: flex;
|
|
4371
|
+
align-items: center;
|
|
4372
|
+
justify-content: center;
|
|
4373
|
+
background: #000;
|
|
4374
|
+
position: relative;
|
|
4375
|
+
}
|
|
4376
|
+
|
|
4377
|
+
/* Video container fills player wrapper */
|
|
4378
|
+
.uvf-responsive-container .uvf-video-container {
|
|
4379
|
+
width: 100%;
|
|
4380
|
+
height: 100%;
|
|
4381
|
+
position: relative;
|
|
4382
|
+
background: #000;
|
|
4383
|
+
border-radius: 0;
|
|
4384
|
+
overflow: hidden;
|
|
4385
|
+
}
|
|
4386
|
+
|
|
4387
|
+
/* Video element fills container */
|
|
4388
|
+
.uvf-responsive-container .uvf-video {
|
|
4389
|
+
width: 100%;
|
|
4390
|
+
height: 100%;
|
|
4391
|
+
object-fit: contain;
|
|
4392
|
+
background: #000;
|
|
4393
|
+
}
|
|
4394
|
+
|
|
4395
|
+
/* All controls positioned inside video container */
|
|
4396
|
+
.uvf-controls-bar {
|
|
4397
|
+
position: absolute !important;
|
|
4398
|
+
bottom: 0 !important;
|
|
4399
|
+
left: 0 !important;
|
|
4400
|
+
right: 0 !important;
|
|
4401
|
+
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
|
|
4402
|
+
padding: 12px 16px;
|
|
4403
|
+
padding-bottom: calc(12px + var(--uvf-safe-area-bottom));
|
|
4404
|
+
z-index: 1000;
|
|
4405
|
+
/* Ensure hardware acceleration */
|
|
4406
|
+
-webkit-transform: translate3d(0,0,0);
|
|
4407
|
+
transform: translate3d(0,0,0);
|
|
4408
|
+
}
|
|
4409
|
+
|
|
4410
|
+
/* Progress section */
|
|
4411
|
+
.uvf-progress-section {
|
|
4412
|
+
width: 100%;
|
|
4413
|
+
margin-bottom: 8px;
|
|
4414
|
+
}
|
|
4415
|
+
|
|
4416
|
+
/* Controls row alignment */
|
|
4417
|
+
.uvf-controls-row {
|
|
4418
|
+
width: 100%;
|
|
4419
|
+
display: flex;
|
|
4420
|
+
align-items: center;
|
|
4421
|
+
justify-content: flex-start;
|
|
4422
|
+
gap: 12px;
|
|
4423
|
+
}
|
|
4424
|
+
|
|
4425
|
+
/* Right controls */
|
|
4426
|
+
.uvf-right-controls {
|
|
4427
|
+
margin-left: auto;
|
|
4428
|
+
display: flex;
|
|
4429
|
+
align-items: center;
|
|
4430
|
+
gap: 8px;
|
|
4431
|
+
}
|
|
4432
|
+
|
|
4433
|
+
/* Center play button positioned within video */
|
|
4434
|
+
.uvf-center-play-container {
|
|
4435
|
+
position: absolute;
|
|
4436
|
+
top: 50%;
|
|
4437
|
+
left: 50%;
|
|
4438
|
+
transform: translate(-50%, -50%);
|
|
4439
|
+
z-index: 8;
|
|
4440
|
+
pointer-events: none;
|
|
4441
|
+
}
|
|
4442
|
+
|
|
4443
|
+
.uvf-center-play-btn {
|
|
4444
|
+
pointer-events: auto;
|
|
4445
|
+
}
|
|
4446
|
+
|
|
4447
|
+
/* Top controls within video */
|
|
4448
|
+
.uvf-top-controls {
|
|
4449
|
+
position: absolute;
|
|
4450
|
+
top: calc(12px + var(--uvf-safe-area-top));
|
|
4451
|
+
right: calc(16px + var(--uvf-safe-area-right));
|
|
4452
|
+
z-index: 9;
|
|
4453
|
+
}
|
|
4454
|
+
|
|
4455
|
+
/* Title bar within video */
|
|
4456
|
+
.uvf-title-bar {
|
|
4457
|
+
position: absolute;
|
|
4458
|
+
top: calc(12px + var(--uvf-safe-area-top));
|
|
4459
|
+
left: calc(16px + var(--uvf-safe-area-left));
|
|
4460
|
+
right: calc(80px + var(--uvf-safe-area-right));
|
|
4461
|
+
z-index: 9;
|
|
4462
|
+
padding: 8px 0;
|
|
4463
|
+
}
|
|
4332
4464
|
}
|
|
4333
4465
|
|
|
4334
4466
|
.uvf-player-wrapper {
|
|
@@ -4352,6 +4484,37 @@ export class WebPlayer extends BasePlayer {
|
|
|
4352
4484
|
transform: translateZ(0);
|
|
4353
4485
|
}
|
|
4354
4486
|
|
|
4487
|
+
/* Mobile controls optimization for touch */
|
|
4488
|
+
.uvf-control-btn {
|
|
4489
|
+
min-width: 44px;
|
|
4490
|
+
min-height: 44px;
|
|
4491
|
+
display: flex;
|
|
4492
|
+
align-items: center;
|
|
4493
|
+
justify-content: center;
|
|
4494
|
+
border-radius: 50%;
|
|
4495
|
+
transition: all 0.2s ease;
|
|
4496
|
+
background: rgba(255, 255, 255, 0.1);
|
|
4497
|
+
backdrop-filter: blur(8px);
|
|
4498
|
+
}
|
|
4499
|
+
|
|
4500
|
+
.uvf-control-btn:active {
|
|
4501
|
+
transform: scale(0.95);
|
|
4502
|
+
background: rgba(255, 255, 255, 0.2);
|
|
4503
|
+
}
|
|
4504
|
+
|
|
4505
|
+
/* Play/pause button prominence */
|
|
4506
|
+
.uvf-control-btn.play-pause {
|
|
4507
|
+
background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
|
|
4508
|
+
min-width: 52px;
|
|
4509
|
+
min-height: 52px;
|
|
4510
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
4511
|
+
}
|
|
4512
|
+
|
|
4513
|
+
.uvf-control-btn.play-pause:active {
|
|
4514
|
+
transform: scale(0.92);
|
|
4515
|
+
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
|
|
4516
|
+
}
|
|
4517
|
+
|
|
4355
4518
|
/* Fix for controls being cut off by virtual keyboard */
|
|
4356
4519
|
.uvf-controls-bar {
|
|
4357
4520
|
position: absolute !important;
|
|
@@ -4833,55 +4996,69 @@ export class WebPlayer extends BasePlayer {
|
|
|
4833
4996
|
}
|
|
4834
4997
|
}
|
|
4835
4998
|
|
|
4836
|
-
/* Mobile devices (landscape) -
|
|
4999
|
+
/* Mobile devices (landscape) - Fullscreen with controls inside video */
|
|
4837
5000
|
@media screen and (max-width: 767px) and (orientation: landscape) {
|
|
4838
5001
|
.uvf-responsive-container {
|
|
5002
|
+
position: fixed;
|
|
5003
|
+
top: 0;
|
|
5004
|
+
left: 0;
|
|
4839
5005
|
width: 100vw !important;
|
|
4840
|
-
height:
|
|
5006
|
+
height: 100vh !important;
|
|
5007
|
+
height: 100dvh !important;
|
|
5008
|
+
background: #000;
|
|
5009
|
+
z-index: 9999;
|
|
5010
|
+
display: block; /* Override portrait flexbox */
|
|
4841
5011
|
margin: 0;
|
|
4842
5012
|
padding: 0;
|
|
4843
|
-
position: relative;
|
|
4844
5013
|
overflow: hidden;
|
|
4845
5014
|
}
|
|
4846
5015
|
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
|
|
4850
|
-
|
|
5016
|
+
/* Remove pseudo-elements in landscape */
|
|
5017
|
+
.uvf-responsive-container::before,
|
|
5018
|
+
.uvf-responsive-container::after {
|
|
5019
|
+
display: none !important;
|
|
4851
5020
|
}
|
|
4852
5021
|
|
|
4853
5022
|
.uvf-responsive-container .uvf-player-wrapper {
|
|
4854
5023
|
width: 100vw !important;
|
|
4855
|
-
height:
|
|
4856
|
-
|
|
4857
|
-
|
|
4858
|
-
|
|
4859
|
-
@supports (height: 100dvh) {
|
|
4860
|
-
.uvf-responsive-container .uvf-player-wrapper {
|
|
4861
|
-
min-height: calc(100dvh - var(--uvf-safe-area-top) - var(--uvf-safe-area-bottom));
|
|
4862
|
-
}
|
|
5024
|
+
height: 100vh !important;
|
|
5025
|
+
height: 100dvh !important;
|
|
5026
|
+
position: relative;
|
|
5027
|
+
display: block;
|
|
4863
5028
|
}
|
|
4864
5029
|
|
|
4865
5030
|
.uvf-responsive-container .uvf-video-container {
|
|
4866
5031
|
width: 100vw !important;
|
|
4867
|
-
height:
|
|
4868
|
-
|
|
4869
|
-
|
|
5032
|
+
height: 100vh !important;
|
|
5033
|
+
height: 100dvh !important;
|
|
5034
|
+
position: relative;
|
|
5035
|
+
background: #000;
|
|
5036
|
+
overflow: hidden;
|
|
4870
5037
|
}
|
|
4871
5038
|
|
|
4872
|
-
|
|
5039
|
+
.uvf-responsive-container .uvf-video {
|
|
5040
|
+
width: 100%;
|
|
5041
|
+
height: 100%;
|
|
5042
|
+
object-fit: contain;
|
|
5043
|
+
background: #000;
|
|
5044
|
+
}
|
|
5045
|
+
|
|
5046
|
+
/* Compact controls for landscape - positioned inside video container */
|
|
4873
5047
|
.uvf-controls-bar {
|
|
4874
|
-
position: absolute;
|
|
4875
|
-
bottom: 0;
|
|
4876
|
-
left: 0;
|
|
4877
|
-
right: 0;
|
|
5048
|
+
position: absolute !important;
|
|
5049
|
+
bottom: 0 !important;
|
|
5050
|
+
left: 0 !important;
|
|
5051
|
+
right: 0 !important;
|
|
4878
5052
|
padding: 10px 12px;
|
|
4879
5053
|
padding-bottom: calc(10px + var(--uvf-safe-area-bottom));
|
|
4880
5054
|
padding-left: calc(12px + var(--uvf-safe-area-left));
|
|
4881
5055
|
padding-right: calc(12px + var(--uvf-safe-area-right));
|
|
4882
|
-
background: linear-gradient(to top,
|
|
5056
|
+
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
|
|
4883
5057
|
box-sizing: border-box;
|
|
4884
5058
|
z-index: 1000;
|
|
5059
|
+
/* Ensure hardware acceleration */
|
|
5060
|
+
-webkit-transform: translate3d(0,0,0);
|
|
5061
|
+
transform: translate3d(0,0,0);
|
|
4885
5062
|
}
|
|
4886
5063
|
|
|
4887
5064
|
.uvf-progress-section {
|
|
@@ -4917,16 +5094,36 @@ export class WebPlayer extends BasePlayer {
|
|
|
4917
5094
|
height: 22px;
|
|
4918
5095
|
}
|
|
4919
5096
|
|
|
4920
|
-
/* Compact top controls with safe area padding */
|
|
5097
|
+
/* Compact top controls with safe area padding - inside video container */
|
|
4921
5098
|
.uvf-top-controls {
|
|
5099
|
+
position: absolute;
|
|
4922
5100
|
top: calc(8px + var(--uvf-safe-area-top));
|
|
4923
5101
|
right: calc(12px + var(--uvf-safe-area-right));
|
|
4924
5102
|
gap: 6px;
|
|
5103
|
+
z-index: 9;
|
|
5104
|
+
}
|
|
5105
|
+
|
|
5106
|
+
/* Center play button positioned within video container */
|
|
5107
|
+
.uvf-center-play-container {
|
|
5108
|
+
position: absolute;
|
|
5109
|
+
top: 50%;
|
|
5110
|
+
left: 50%;
|
|
5111
|
+
transform: translate(-50%, -50%);
|
|
5112
|
+
z-index: 8;
|
|
5113
|
+
pointer-events: none;
|
|
5114
|
+
}
|
|
5115
|
+
|
|
5116
|
+
.uvf-center-play-btn {
|
|
5117
|
+
pointer-events: auto;
|
|
4925
5118
|
}
|
|
4926
5119
|
|
|
4927
5120
|
.uvf-title-bar {
|
|
4928
|
-
|
|
4929
|
-
|
|
5121
|
+
position: absolute;
|
|
5122
|
+
top: calc(8px + var(--uvf-safe-area-top));
|
|
5123
|
+
left: calc(12px + var(--uvf-safe-area-left));
|
|
5124
|
+
right: calc(80px + var(--uvf-safe-area-right));
|
|
5125
|
+
z-index: 9;
|
|
5126
|
+
padding: 8px 0;
|
|
4930
5127
|
padding-left: calc(12px + var(--uvf-safe-area-left));
|
|
4931
5128
|
padding-right: calc(12px + var(--uvf-safe-area-right));
|
|
4932
5129
|
}
|