unified-video-framework 1.4.168 → 1.4.169

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/packages/web/dist/WebPlayer.d.ts.map +1 -1
  3. package/packages/web/dist/WebPlayer.js +138 -140
  4. package/packages/web/dist/WebPlayer.js.map +1 -1
  5. package/packages/web/src/WebPlayer.ts +138 -140
package/packages/web/src/WebPlayer.ts CHANGED
@@ -4058,168 +4058,118 @@ export class WebPlayer extends BasePlayer {
4058
4058
  pointer-events: none;
4059
4059
  }
4060
4060
 
4061
- /* Fullscreen specific styles */
4062
- .uvf-player-wrapper.uvf-fullscreen {
4063
- position: fixed !important;
4064
- top: 0 !important;
4065
- left: 0 !important;
4066
- width: 100vw !important;
4067
- height: 100vh !important;
4068
- z-index: 2147483647;
4069
- background: #000;
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-title-bar {
4180
- padding: 15px 20px;
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-top-controls {
4184
- top: 15px;
4185
- right: 20px;
4082
+ .uvf-player-wrapper.uvf-fullscreen .uvf-video {
4083
+ width: 100vw !important;
4084
+ height: 100vh !important;
4186
4085
  }
4187
4086
 
4188
- /* Mobile controls in fullscreen - slightly larger than normal mobile */
4087
+ /* Maintain consistent control sizing in fullscreen - DESKTOP/LANDSCAPE ONLY */
4189
4088
  .uvf-player-wrapper.uvf-fullscreen .uvf-control-btn {
4190
- width: 36px;
4191
- height: 36px;
4192
- min-width: 36px;
4193
- min-height: 36px;
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: 44px;
4198
- height: 44px;
4199
- min-width: 44px;
4200
- min-height: 44px;
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: 18px;
4205
- height: 18px;
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: 22px;
4210
- height: 22px;
4108
+ width: 24px;
4109
+ height: 24px;
4211
4110
  }
4212
4111
 
4213
4112
  .uvf-player-wrapper.uvf-fullscreen .uvf-top-btn {
4214
- width: 36px;
4215
- height: 36px;
4216
- min-width: 36px;
4217
- min-height: 36px;
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: 18px;
4222
- height: 18px;
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
 
@@ -4515,6 +4465,54 @@ export class WebPlayer extends BasePlayer {
4515
4465
  min-height: 48px !important;
4516
4466
  border-radius: 24px !important;
4517
4467
  }
4468
+
4469
+ /* Fullscreen on mobile portrait - maintain Material You layout */
4470
+ .uvf-player-wrapper.uvf-fullscreen,
4471
+ .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen {
4472
+ position: fixed !important;
4473
+ top: 0 !important;
4474
+ left: 0 !important;
4475
+ width: 100vw !important;
4476
+ height: 100vh !important;
4477
+ height: 100dvh !important;
4478
+ z-index: 2147483647 !important;
4479
+ display: flex !important;
4480
+ flex-direction: column !important;
4481
+ background: #000 !important;
4482
+ }
4483
+
4484
+ /* Video container in fullscreen - keep 50% middle */
4485
+ .uvf-player-wrapper.uvf-fullscreen .uvf-video-container,
4486
+ .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
4487
+ height: 50vh !important;
4488
+ height: 50dvh !important;
4489
+ width: 100vw !important;
4490
+ margin-top: 25vh !important;
4491
+ margin-top: 25dvh !important;
4492
+ position: relative !important;
4493
+ }
4494
+
4495
+ /* Top and bottom black sections in fullscreen */
4496
+ .uvf-player-wrapper.uvf-fullscreen::before {
4497
+ height: 25vh !important;
4498
+ height: 25dvh !important;
4499
+ }
4500
+
4501
+ .uvf-player-wrapper.uvf-fullscreen::after {
4502
+ height: 25vh !important;
4503
+ height: 25dvh !important;
4504
+ }
4505
+
4506
+ /* Controls stay in bottom 25% in fullscreen */
4507
+ .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
4508
+ .uvf-responsive-container .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar {
4509
+ position: absolute !important;
4510
+ bottom: 0 !important;
4511
+ max-height: 25vh !important;
4512
+ max-height: 25dvh !important;
4513
+ padding: 16px 20px !important;
4514
+ padding-bottom: calc(16px + var(--uvf-safe-area-bottom, 0px)) !important;
4515
+ }
4518
4516
  }
4519
4517
  }
4520
4518