unified-video-framework 1.4.169 → 1.4.171
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,24 +4293,36 @@ 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-responsive-container .uvf-video-container .uvf-controls-bar {
|
|
4297
4298
|
position: absolute;
|
|
4298
|
-
bottom:
|
|
4299
|
-
|
|
4300
|
-
right: 0;
|
|
4301
|
-
height: auto;
|
|
4302
|
-
max-height: 25vh;
|
|
4303
|
-
max-height: 25dvh;
|
|
4304
|
-
padding: 16px 20px;
|
|
4305
|
-
padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px));
|
|
4299
|
+
bottom: 12px;
|
|
4300
|
+
padding: 0px 10px;
|
|
4306
4301
|
background: transparent;
|
|
4307
4302
|
z-index: 2;
|
|
4308
4303
|
display: flex;
|
|
4309
4304
|
flex-direction: column;
|
|
4310
4305
|
justify-content: flex-end;
|
|
4306
|
+
pointer-events: none; /* Let clicks pass through overlay */
|
|
4307
|
+
}
|
|
4308
|
+
|
|
4309
|
+
.uvf-responsive-container .uvf-video-container .uvf-controls-bar::before {
|
|
4310
|
+
content: '';
|
|
4311
|
+
position: absolute;
|
|
4312
|
+
inset: 0; /* stretch to cover the controls-bar */
|
|
4311
4313
|
backdrop-filter: blur(24px);
|
|
4312
4314
|
-webkit-backdrop-filter: blur(24px);
|
|
4315
|
+
pointer-events: none;
|
|
4316
|
+
|
|
4317
|
+
/* Gradient mask */
|
|
4318
|
+
-webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
|
|
4319
|
+
mask-image: linear-gradient(to top, black 80%, transparent 100%);
|
|
4320
|
+
-webkit-mask-size: 100% 100%;
|
|
4321
|
+
mask-size: 100% 100%;
|
|
4322
|
+
-webkit-mask-repeat: no-repeat;
|
|
4323
|
+
mask-repeat: no-repeat;
|
|
4324
|
+
|
|
4325
|
+
z-index: -1; /* sit behind the content of the controls bar */
|
|
4313
4326
|
}
|
|
4314
4327
|
|
|
4315
4328
|
/* Material surface tint overlay */
|
|
@@ -4436,7 +4449,7 @@ export class WebPlayer extends BasePlayer {
|
|
|
4436
4449
|
align-items: center;
|
|
4437
4450
|
}
|
|
4438
4451
|
|
|
4439
|
-
/* Time display
|
|
4452
|
+
/* Time display positioned bottom-left above seekbar */
|
|
4440
4453
|
.uvf-time-display {
|
|
4441
4454
|
background: rgba(255, 255, 255, 0.1);
|
|
4442
4455
|
backdrop-filter: blur(8px);
|
|
@@ -4448,15 +4461,195 @@ export class WebPlayer extends BasePlayer {
|
|
|
4448
4461
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
4449
4462
|
}
|
|
4450
4463
|
|
|
4451
|
-
/*
|
|
4452
|
-
.uvf-
|
|
4453
|
-
|
|
4464
|
+
/* Framework branding positioned bottom-right above seekbar */
|
|
4465
|
+
.uvf-video-container .uvf-framework-branding {
|
|
4466
|
+
position: absolute !important;
|
|
4467
|
+
bottom: 80px !important;
|
|
4468
|
+
right: 16px !important;
|
|
4469
|
+
z-index: 10 !important;
|
|
4470
|
+
opacity: 0.8 !important;
|
|
4471
|
+
}
|
|
4472
|
+
|
|
4473
|
+
/* Adjust above-seekbar section to align time and branding */
|
|
4474
|
+
.uvf-above-seekbar-section {
|
|
4475
|
+
display: flex !important;
|
|
4476
|
+
justify-content: space-between !important;
|
|
4477
|
+
align-items: center !important;
|
|
4478
|
+
width: 100% !important;
|
|
4479
|
+
margin-bottom: 8px !important;
|
|
4480
|
+
}
|
|
4481
|
+
|
|
4482
|
+
/* Hide desktop volume control and skip buttons */
|
|
4454
4483
|
.uvf-volume-control,
|
|
4455
4484
|
#uvf-skip-back,
|
|
4456
4485
|
#uvf-skip-forward {
|
|
4457
4486
|
display: none !important;
|
|
4458
4487
|
}
|
|
4459
4488
|
|
|
4489
|
+
/* Title bar positioned in top-left of middle 50% video area */
|
|
4490
|
+
.uvf-video-container .uvf-title-bar,
|
|
4491
|
+
.uvf-responsive-container .uvf-video-container .uvf-title-bar {
|
|
4492
|
+
display: flex !important;
|
|
4493
|
+
position: absolute !important;
|
|
4494
|
+
top: 12px !important;
|
|
4495
|
+
left: 16px !important;
|
|
4496
|
+
right: auto !important;
|
|
4497
|
+
width: auto !important;
|
|
4498
|
+
max-width: 50% !important;
|
|
4499
|
+
height: auto !important;
|
|
4500
|
+
padding: 0 !important;
|
|
4501
|
+
background: transparent !important;
|
|
4502
|
+
z-index: 10 !important;
|
|
4503
|
+
opacity: 0 !important;
|
|
4504
|
+
transform: translateY(-10px) !important;
|
|
4505
|
+
transition: opacity 0.3s ease, transform 0.3s ease !important;
|
|
4506
|
+
flex-direction: column !important;
|
|
4507
|
+
justify-content: flex-start !important;
|
|
4508
|
+
align-items: flex-start !important;
|
|
4509
|
+
}
|
|
4510
|
+
|
|
4511
|
+
/* Show title bar when controls are visible or on hover */
|
|
4512
|
+
.uvf-player-wrapper:hover .uvf-title-bar,
|
|
4513
|
+
.uvf-player-wrapper.controls-visible .uvf-title-bar {
|
|
4514
|
+
opacity: 1 !important;
|
|
4515
|
+
transform: translateY(0) !important;
|
|
4516
|
+
}
|
|
4517
|
+
|
|
4518
|
+
/* Title content layout */
|
|
4519
|
+
.uvf-title-bar .uvf-title-content {
|
|
4520
|
+
display: flex !important;
|
|
4521
|
+
align-items: flex-start !important;
|
|
4522
|
+
gap: 12px !important;
|
|
4523
|
+
width: 100% !important;
|
|
4524
|
+
}
|
|
4525
|
+
|
|
4526
|
+
/* Video thumbnail/logo */
|
|
4527
|
+
.uvf-title-bar .uvf-video-thumb {
|
|
4528
|
+
width: 48px !important;
|
|
4529
|
+
height: 48px !important;
|
|
4530
|
+
border-radius: 12px !important;
|
|
4531
|
+
object-fit: cover !important;
|
|
4532
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
|
4533
|
+
flex-shrink: 0 !important;
|
|
4534
|
+
}
|
|
4535
|
+
|
|
4536
|
+
/* Title and subtitle text */
|
|
4537
|
+
.uvf-title-bar .uvf-title-text {
|
|
4538
|
+
flex: 1 !important;
|
|
4539
|
+
min-width: 0 !important;
|
|
4540
|
+
}
|
|
4541
|
+
|
|
4542
|
+
.uvf-title-bar .uvf-video-title {
|
|
4543
|
+
display: block !important;
|
|
4544
|
+
font-size: 16px !important;
|
|
4545
|
+
font-weight: 600 !important;
|
|
4546
|
+
color: #fff !important;
|
|
4547
|
+
margin-bottom: 4px !important;
|
|
4548
|
+
line-height: 1.3 !important;
|
|
4549
|
+
overflow: hidden !important;
|
|
4550
|
+
text-overflow: ellipsis !important;
|
|
4551
|
+
display: -webkit-box !important;
|
|
4552
|
+
-webkit-line-clamp: 2 !important;
|
|
4553
|
+
-webkit-box-orient: vertical !important;
|
|
4554
|
+
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
|
|
4555
|
+
}
|
|
4556
|
+
|
|
4557
|
+
.uvf-title-bar .uvf-video-subtitle {
|
|
4558
|
+
display: block !important;
|
|
4559
|
+
font-size: 13px !important;
|
|
4560
|
+
font-weight: 400 !important;
|
|
4561
|
+
color: rgba(255, 255, 255, 0.8) !important;
|
|
4562
|
+
line-height: 1.3 !important;
|
|
4563
|
+
overflow: hidden !important;
|
|
4564
|
+
text-overflow: ellipsis !important;
|
|
4565
|
+
display: -webkit-box !important;
|
|
4566
|
+
-webkit-line-clamp: 1 !important;
|
|
4567
|
+
-webkit-box-orient: vertical !important;
|
|
4568
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
|
|
4569
|
+
}
|
|
4570
|
+
|
|
4571
|
+
/* Top controls positioned in top-right of middle 50% video area */
|
|
4572
|
+
.uvf-video-container .uvf-top-controls,
|
|
4573
|
+
.uvf-responsive-container .uvf-video-container .uvf-top-controls {
|
|
4574
|
+
display: flex !important;
|
|
4575
|
+
position: absolute !important;
|
|
4576
|
+
top: 12px !important;
|
|
4577
|
+
right: 16px !important;
|
|
4578
|
+
width: auto !important;
|
|
4579
|
+
height: auto !important;
|
|
4580
|
+
padding: 0 !important;
|
|
4581
|
+
background: transparent !important;
|
|
4582
|
+
z-index: 10 !important;
|
|
4583
|
+
opacity: 0 !important;
|
|
4584
|
+
transform: translateY(-10px) !important;
|
|
4585
|
+
transition: opacity 0.3s ease, transform 0.3s ease !important;
|
|
4586
|
+
gap: 12px !important;
|
|
4587
|
+
align-items: flex-start !important;
|
|
4588
|
+
justify-content: flex-end !important;
|
|
4589
|
+
flex-direction: row !important;
|
|
4590
|
+
}
|
|
4591
|
+
|
|
4592
|
+
/* Show top controls when controls are visible, on hover, or when casting */
|
|
4593
|
+
.uvf-player-wrapper:hover .uvf-top-controls,
|
|
4594
|
+
.uvf-player-wrapper.controls-visible .uvf-top-controls,
|
|
4595
|
+
.uvf-player-wrapper.uvf-casting .uvf-top-controls {
|
|
4596
|
+
opacity: 1 !important;
|
|
4597
|
+
transform: translateY(0) !important;
|
|
4598
|
+
}
|
|
4599
|
+
|
|
4600
|
+
/* Material You top buttons (cast & share) */
|
|
4601
|
+
.uvf-top-controls .uvf-top-btn {
|
|
4602
|
+
width: 48px !important;
|
|
4603
|
+
height: 48px !important;
|
|
4604
|
+
min-width: 48px !important;
|
|
4605
|
+
min-height: 48px !important;
|
|
4606
|
+
background: rgba(0, 0, 0, 0.5) !important;
|
|
4607
|
+
backdrop-filter: blur(16px) !important;
|
|
4608
|
+
-webkit-backdrop-filter: blur(16px) !important;
|
|
4609
|
+
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
|
4610
|
+
border-radius: 24px !important;
|
|
4611
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
|
|
4612
|
+
0 1px 3px rgba(0, 0, 0, 0.2) !important;
|
|
4613
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
4614
|
+
}
|
|
4615
|
+
|
|
4616
|
+
.uvf-top-controls .uvf-top-btn:active {
|
|
4617
|
+
transform: scale(0.95) !important;
|
|
4618
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
|
|
4619
|
+
0 2px 6px rgba(0, 0, 0, 0.3) !important;
|
|
4620
|
+
background: rgba(0, 0, 0, 0.7) !important;
|
|
4621
|
+
}
|
|
4622
|
+
|
|
4623
|
+
.uvf-top-controls .uvf-top-btn svg {
|
|
4624
|
+
width: 22px !important;
|
|
4625
|
+
height: 22px !important;
|
|
4626
|
+
fill: #fff !important;
|
|
4627
|
+
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
|
|
4628
|
+
}
|
|
4629
|
+
|
|
4630
|
+
/* Stop cast button styling */
|
|
4631
|
+
.uvf-top-controls .uvf-pill-btn {
|
|
4632
|
+
height: 48px !important;
|
|
4633
|
+
padding: 0 16px !important;
|
|
4634
|
+
border-radius: 24px !important;
|
|
4635
|
+
background: rgba(255, 77, 79, 0.95) !important;
|
|
4636
|
+
backdrop-filter: blur(16px) !important;
|
|
4637
|
+
border: 1px solid rgba(255, 77, 79, 0.3) !important;
|
|
4638
|
+
box-shadow: 0 2px 8px rgba(255, 77, 79, 0.4),
|
|
4639
|
+
0 1px 3px rgba(0, 0, 0, 0.3) !important;
|
|
4640
|
+
}
|
|
4641
|
+
|
|
4642
|
+
.uvf-top-controls .uvf-pill-btn svg {
|
|
4643
|
+
width: 20px !important;
|
|
4644
|
+
height: 20px !important;
|
|
4645
|
+
}
|
|
4646
|
+
|
|
4647
|
+
.uvf-top-controls .uvf-pill-btn span {
|
|
4648
|
+
font-size: 14px !important;
|
|
4649
|
+
font-weight: 500 !important;
|
|
4650
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
|
|
4651
|
+
}
|
|
4652
|
+
|
|
4460
4653
|
/* Optimize settings button for Material You */
|
|
4461
4654
|
#uvf-settings-btn {
|
|
4462
4655
|
width: 48px !important;
|