unified-video-framework 1.4.169 → 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.
|
@@ -4239,14 +4239,15 @@ export class WebPlayer extends BasePlayer {
|
|
|
4239
4239
|
overflow: hidden;
|
|
4240
4240
|
}
|
|
4241
4241
|
|
|
4242
|
-
/* Video container occupies middle 50% */
|
|
4242
|
+
/* Video container occupies middle 50% with all UI elements */
|
|
4243
4243
|
.uvf-responsive-container .uvf-video-container {
|
|
4244
4244
|
height: 50vh;
|
|
4245
4245
|
height: 50dvh;
|
|
4246
4246
|
width: 100vw;
|
|
4247
|
-
position:
|
|
4248
|
-
|
|
4249
|
-
|
|
4247
|
+
position: absolute;
|
|
4248
|
+
top: 25vh;
|
|
4249
|
+
top: 25dvh;
|
|
4250
|
+
left: 0;
|
|
4250
4251
|
aspect-ratio: unset !important;
|
|
4251
4252
|
background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
|
|
4252
4253
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
|
|
@@ -4292,17 +4293,16 @@ export class WebPlayer extends BasePlayer {
|
|
|
4292
4293
|
pointer-events: none;
|
|
4293
4294
|
}
|
|
4294
4295
|
|
|
4295
|
-
/* Material surface container for controls */
|
|
4296
|
-
.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 {
|
|
4297
4299
|
position: absolute;
|
|
4298
|
-
bottom:
|
|
4299
|
-
left:
|
|
4300
|
-
right:
|
|
4300
|
+
bottom: 12px;
|
|
4301
|
+
left: 16px;
|
|
4302
|
+
right: 16px;
|
|
4301
4303
|
height: auto;
|
|
4302
|
-
max-height:
|
|
4303
|
-
max-height: 25dvh;
|
|
4304
|
+
max-height: none;
|
|
4304
4305
|
padding: 16px 20px;
|
|
4305
|
-
padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px));
|
|
4306
4306
|
background: transparent;
|
|
4307
4307
|
z-index: 2;
|
|
4308
4308
|
display: flex;
|
|
@@ -4436,7 +4436,7 @@ export class WebPlayer extends BasePlayer {
|
|
|
4436
4436
|
align-items: center;
|
|
4437
4437
|
}
|
|
4438
4438
|
|
|
4439
|
-
/* Time display
|
|
4439
|
+
/* Time display positioned bottom-left above seekbar */
|
|
4440
4440
|
.uvf-time-display {
|
|
4441
4441
|
background: rgba(255, 255, 255, 0.1);
|
|
4442
4442
|
backdrop-filter: blur(8px);
|
|
@@ -4448,15 +4448,178 @@ export class WebPlayer extends BasePlayer {
|
|
|
4448
4448
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
4449
4449
|
}
|
|
4450
4450
|
|
|
4451
|
-
/*
|
|
4452
|
-
.uvf-
|
|
4453
|
-
|
|
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 */
|
|
4454
4470
|
.uvf-volume-control,
|
|
4455
4471
|
#uvf-skip-back,
|
|
4456
4472
|
#uvf-skip-forward {
|
|
4457
4473
|
display: none !important;
|
|
4458
4474
|
}
|
|
4459
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
|
+
|
|
4460
4623
|
/* Optimize settings button for Material You */
|
|
4461
4624
|
#uvf-settings-btn {
|
|
4462
4625
|
width: 48px !important;
|