unified-video-framework 1.4.86 → 1.4.87

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 +167 -97
  4. package/packages/web/dist/WebPlayer.js.map +1 -1
  5. package/packages/web/src/WebPlayer.ts +167 -97
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unified-video-framework",
3
- "version": "1.4.86",
3
+ "version": "1.4.87",
4
4
  "description": "Cross-platform video player framework supporting iOS, Android, Web, Smart TVs (Samsung/LG), Roku, and more",
5
5
  "main": "packages/core/dist/index.js",
6
6
  "types": "packages/core/dist/index.d.ts",
package/packages/web/dist/WebPlayer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}
package/packages/web/dist/WebPlayer.js CHANGED
@@ -2386,7 +2386,7 @@ export class WebPlayer extends BasePlayer {
2386
2386
  }
2387
2387
 
2388
2388
  /* Responsive Media Queries */
2389
- /* Mobile devices (portrait) */
2389
+ /* YouTube-style Mobile Portrait */
2390
2390
  @media screen and (max-width: 767px) and (orientation: portrait) {
2391
2391
  .uvf-responsive-container {
2392
2392
  padding: 0;
@@ -2400,49 +2400,62 @@ export class WebPlayer extends BasePlayer {
2400
2400
 
2401
2401
  .uvf-responsive-container .uvf-video-container {
2402
2402
  width: 100vw !important;
2403
- aspect-ratio: unset !important; /* Let JS handle the aspect ratio */
2403
+ aspect-ratio: unset !important;
2404
2404
  }
2405
2405
 
2406
+ /* YouTube-inspired mobile controls */
2406
2407
  .uvf-controls-bar {
2407
- padding: 16px 12px; /* Increased padding for better touch accessibility */
2408
- background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 85%, var(--uvf-overlay-transparent) 100%);
2409
- backdrop-filter: blur(8px); /* Enhanced backdrop for better visibility */
2408
+ padding: 8px 12px 12px 12px; /* YouTube-style minimal padding */
2409
+ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 70%, transparent 100%);
2410
+ backdrop-filter: blur(4px); /* Subtle blur like YouTube */
2410
2411
  }
2411
2412
 
2412
2413
  .uvf-controls-row {
2413
- gap: 12px; /* Increased gap for better touch targets */
2414
+ gap: 8px; /* YouTube-style compact spacing */
2414
2415
  flex-wrap: nowrap;
2415
2416
  align-items: center;
2416
- justify-content: space-between;
2417
+ justify-content: flex-start; /* YouTube-style left alignment */
2417
2418
  }
2418
2419
 
2419
- /* Mobile control sizing - Touch-friendly 44px minimum */
2420
+ /* YouTube-style mobile controls */
2420
2421
  .uvf-control-btn {
2421
- width: 44px; /* Apple/Google recommended minimum touch target */
2422
- height: 44px;
2423
- min-width: 44px;
2424
- min-height: 44px;
2425
- border-radius: 22px; /* Fully rounded for modern mobile feel */
2426
- background: rgba(255,255,255,0.12); /* Enhanced background for visibility */
2427
- backdrop-filter: blur(10px);
2428
- border: 1px solid rgba(255,255,255,0.2);
2429
- transition: all 0.2s ease;
2422
+ width: 48px; /* YouTube-inspired sizing */
2423
+ height: 48px;
2424
+ min-width: 48px;
2425
+ min-height: 48px;
2426
+ border-radius: 24px;
2427
+ background: rgba(255,255,255,0.1); /* YouTube-style subtle background */
2428
+ backdrop-filter: blur(8px);
2429
+ border: none; /* Clean, borderless like YouTube */
2430
+ transition: all 0.15s ease; /* Snappy YouTube-style transitions */
2431
+ color: #fff;
2432
+ }
2433
+
2434
+ .uvf-control-btn:hover,
2435
+ .uvf-control-btn:focus {
2436
+ background: rgba(255,255,255,0.15);
2437
+ transform: scale(1.05); /* Subtle scale like YouTube */
2430
2438
  }
2431
2439
 
2432
- /* Enhanced play button for mobile */
2440
+ /* YouTube-style play button - clean and prominent */
2433
2441
  .uvf-control-btn.play-pause {
2434
- width: 56px; /* Larger primary action button */
2435
- height: 56px;
2436
- min-width: 56px;
2437
- min-height: 56px;
2438
- background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
2439
- border: 2px solid rgba(255,255,255,0.3);
2440
- box-shadow: 0 4px 16px rgba(0,0,0,0.4);
2442
+ width: 52px; /* YouTube-inspired primary button size */
2443
+ height: 52px;
2444
+ min-width: 52px;
2445
+ min-height: 52px;
2446
+ background: rgba(255,255,255,0.15); /* Subtle background like YouTube */
2447
+ border: none;
2448
+ box-shadow: none; /* Clean, no shadows like YouTube */
2441
2449
  }
2442
2450
 
2443
- .uvf-control-btn:active {
2444
- transform: scale(0.95);
2451
+ .uvf-control-btn.play-pause:hover {
2445
2452
  background: rgba(255,255,255,0.2);
2453
+ transform: scale(1.05);
2454
+ }
2455
+
2456
+ .uvf-control-btn:active {
2457
+ transform: scale(0.98); /* YouTube-style subtle press */
2458
+ background: rgba(255,255,255,0.25);
2446
2459
  }
2447
2460
 
2448
2461
  .uvf-control-btn svg {
@@ -2463,18 +2476,21 @@ export class WebPlayer extends BasePlayer {
2463
2476
  height: 15px;
2464
2477
  }
2465
2478
 
2479
+ /* YouTube-style time display */
2466
2480
  .uvf-time-display {
2467
- font-size: 12px; /* Improved readability */
2468
- min-width: 90px;
2469
- padding: 8px 12px;
2470
- order: 4;
2471
- background: rgba(0,0,0,0.6);
2472
- border-radius: 20px;
2473
- border: 1px solid rgba(255,255,255,0.15);
2474
- backdrop-filter: blur(8px);
2475
- text-align: center;
2476
- font-weight: 500;
2477
- letter-spacing: 0.5px;
2481
+ font-size: 12px;
2482
+ min-width: 70px;
2483
+ padding: 0;
2484
+ order: -1; /* Position at start like YouTube mobile */
2485
+ background: none; /* Clean, no background like YouTube */
2486
+ border-radius: 0;
2487
+ border: none;
2488
+ backdrop-filter: none;
2489
+ text-align: left;
2490
+ font-weight: 400; /* YouTube-style normal weight */
2491
+ letter-spacing: 0;
2492
+ color: rgba(255,255,255,0.9); /* Slightly transparent like YouTube */
2493
+ margin-right: auto; /* Push other controls to the right */
2478
2494
  }
2479
2495
 
2480
2496
  /* Volume control mobile adjustments */
@@ -2547,28 +2563,42 @@ export class WebPlayer extends BasePlayer {
2547
2563
  height: 25px;
2548
2564
  }
2549
2565
 
2566
+ /* YouTube-style mobile progress bar */
2550
2567
  .uvf-progress-bar-wrapper {
2551
- height: 10px; /* Thicker for better touch interaction */
2552
- margin-bottom: 12px;
2553
- border-radius: 5px;
2554
- background: rgba(255,255,255,0.1);
2555
- backdrop-filter: blur(8px);
2556
- border: 1px solid rgba(255,255,255,0.1);
2557
- box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
2568
+ height: 4px; /* YouTube-style thin progress bar */
2569
+ margin-bottom: 8px;
2570
+ border-radius: 2px;
2571
+ background: rgba(255,255,255,0.2); /* Clean background like YouTube */
2572
+ backdrop-filter: none; /* No blur for clean look */
2573
+ border: none;
2574
+ box-shadow: none;
2575
+ transition: height 0.2s ease; /* YouTube-style expand on hover */
2576
+ }
2577
+
2578
+ .uvf-progress-bar-wrapper:hover {
2579
+ height: 6px; /* Slightly thicker on hover like YouTube */
2558
2580
  }
2559
2581
 
2560
2582
  .uvf-progress-handle {
2561
- width: 20px; /* Larger touch target */
2562
- height: 20px;
2563
- border: 3px solid #fff;
2564
- box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.1);
2565
- backdrop-filter: blur(8px);
2583
+ width: 12px; /* YouTube-style smaller handle */
2584
+ height: 12px;
2585
+ border: none;
2586
+ box-shadow: 0 0 8px rgba(0,0,0,0.3); /* Subtle shadow */
2587
+ backdrop-filter: none;
2588
+ background: #fff; /* Clean white handle like YouTube */
2589
+ opacity: 0; /* Hidden by default like YouTube */
2590
+ transition: opacity 0.2s ease;
2566
2591
  }
2567
2592
 
2568
- /* Enhanced progress bar visibility */
2593
+ .uvf-progress-bar-wrapper:hover .uvf-progress-handle {
2594
+ opacity: 1; /* Show on hover like YouTube */
2595
+ }
2596
+
2597
+ /* YouTube-style progress fill */
2569
2598
  .uvf-progress-filled {
2570
- background: linear-gradient(90deg, var(--uvf-accent-1), var(--uvf-accent-2));
2571
- box-shadow: 0 0 8px rgba(var(--uvf-accent-1-rgb, 255,59,92), 0.4);
2599
+ background: var(--uvf-accent-1, #ff0000); /* YouTube red */
2600
+ box-shadow: none; /* Clean, no glow */
2601
+ border-radius: 2px;
2572
2602
  }
2573
2603
 
2574
2604
  .uvf-settings-menu {
@@ -2702,60 +2732,80 @@ export class WebPlayer extends BasePlayer {
2702
2732
  }
2703
2733
  }
2704
2734
 
2705
- /* Tablet devices */
2706
- @media screen and (min-width: 768px) and (max-width: 1023px) {
2735
+ /* YouTube-style Desktop/Tablet */
2736
+ @media screen and (min-width: 768px) {
2707
2737
  .uvf-controls-bar {
2708
- padding: 20px 24px;
2709
- backdrop-filter: blur(12px);
2738
+ padding: 12px 16px; /* YouTube-style compact desktop padding */
2739
+ background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 80%, transparent 100%);
2740
+ backdrop-filter: blur(6px); /* Moderate blur like YouTube desktop */
2710
2741
  }
2711
2742
 
2712
2743
  .uvf-controls-row {
2713
- gap: 16px; /* Generous spacing for tablet */
2744
+ gap: 12px; /* YouTube-style balanced spacing */
2745
+ justify-content: space-between; /* YouTube-style distributed layout */
2714
2746
  }
2715
2747
 
2716
- /* Tablet-optimized control sizing */
2748
+ /* Desktop progress bar positioning */
2749
+ .uvf-progress-section {
2750
+ margin-bottom: 8px;
2751
+ }
2752
+
2753
+ /* YouTube-style desktop controls */
2717
2754
  .uvf-control-btn {
2718
- width: 42px; /* Touch-friendly size for tablets */
2719
- height: 42px;
2720
- min-width: 42px;
2721
- min-height: 42px;
2722
- border-radius: 21px;
2723
- background: rgba(255,255,255,0.1);
2724
- backdrop-filter: blur(8px);
2725
- border: 1px solid rgba(255,255,255,0.2);
2726
- transition: all 0.2s ease;
2755
+ width: 40px; /* YouTube desktop sizing */
2756
+ height: 40px;
2757
+ min-width: 40px;
2758
+ min-height: 40px;
2759
+ border-radius: 50%; /* Circular like YouTube */
2760
+ background: rgba(255,255,255,0.08); /* Subtle like YouTube */
2761
+ backdrop-filter: none; /* Clean, no blur on desktop */
2762
+ border: none;
2763
+ transition: all 0.15s ease;
2727
2764
  }
2728
2765
 
2729
2766
  .uvf-control-btn:hover {
2730
- background: rgba(255,255,255,0.15);
2731
- transform: scale(1.05);
2732
- box-shadow: 0 4px 16px rgba(0,0,0,0.2);
2767
+ background: rgba(255,255,255,0.15); /* YouTube hover brightness */
2768
+ transform: none; /* No scale on desktop like YouTube */
2733
2769
  }
2734
2770
 
2735
2771
  .uvf-control-btn svg {
2736
- width: 19px;
2737
- height: 19px;
2738
- filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
2772
+ width: 18px; /* YouTube icon sizing */
2773
+ height: 18px;
2774
+ filter: none; /* Clean icons like YouTube */
2739
2775
  }
2740
2776
 
2777
+ /* YouTube-style play button - subtle but prominent */
2741
2778
  .uvf-control-btn.play-pause {
2742
- width: 52px; /* Prominent primary action */
2743
- height: 52px;
2744
- min-width: 52px;
2745
- min-height: 52px;
2746
- background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
2747
- border: 2px solid rgba(255,255,255,0.3);
2748
- box-shadow: 0 4px 20px rgba(0,0,0,0.3);
2779
+ width: 44px; /* Slightly larger like YouTube */
2780
+ height: 44px;
2781
+ min-width: 44px;
2782
+ min-height: 44px;
2783
+ background: rgba(255,255,255,0.1); /* Subtle like other controls */
2784
+ border: none;
2785
+ box-shadow: none; /* Clean like YouTube */
2749
2786
  }
2750
2787
 
2751
2788
  .uvf-control-btn.play-pause:hover {
2752
- box-shadow: 0 6px 24px rgba(0,0,0,0.4);
2753
- transform: scale(1.03);
2789
+ background: rgba(255,255,255,0.18);
2790
+ box-shadow: none; /* No shadow on hover */
2754
2791
  }
2755
2792
 
2756
2793
  .uvf-control-btn.play-pause svg {
2757
- width: 26px;
2758
- height: 26px;
2794
+ width: 20px; /* Slightly larger play icon */
2795
+ height: 20px;
2796
+ }
2797
+
2798
+ /* Desktop time display - YouTube style */
2799
+ .uvf-time-display {
2800
+ font-size: 14px; /* YouTube desktop sizing */
2801
+ min-width: 80px;
2802
+ padding: 0;
2803
+ background: none;
2804
+ border: none;
2805
+ color: rgba(255,255,255,0.9);
2806
+ font-weight: 400;
2807
+ order: 0; /* Normal order on desktop */
2808
+ margin-right: 0;
2759
2809
  }
2760
2810
 
2761
2811
  .uvf-top-controls {
@@ -2832,22 +2882,42 @@ export class WebPlayer extends BasePlayer {
2832
2882
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
2833
2883
  }
2834
2884
 
2885
+ /* YouTube-style desktop progress bar */
2835
2886
  .uvf-progress-bar-wrapper {
2836
- height: 8px;
2837
- margin-bottom: 14px;
2838
- border-radius: 4px;
2839
- background: rgba(255,255,255,0.1);
2840
- backdrop-filter: blur(8px);
2841
- border: 1px solid rgba(255,255,255,0.1);
2842
- box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
2887
+ height: 4px; /* YouTube-style thin progress */
2888
+ margin-bottom: 10px;
2889
+ border-radius: 2px;
2890
+ background: rgba(255,255,255,0.2);
2891
+ backdrop-filter: none;
2892
+ border: none;
2893
+ box-shadow: none;
2894
+ transition: height 0.15s ease; /* YouTube-style smooth expansion */
2895
+ }
2896
+
2897
+ .uvf-progress-bar-wrapper:hover {
2898
+ height: 6px; /* Expand on hover like YouTube */
2843
2899
  }
2844
2900
 
2845
2901
  .uvf-progress-handle {
2846
- width: 16px;
2847
- height: 16px;
2848
- border: 2px solid #fff;
2849
- box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.1);
2850
- backdrop-filter: blur(6px);
2902
+ width: 14px;
2903
+ height: 14px;
2904
+ border: none;
2905
+ box-shadow: 0 2px 6px rgba(0,0,0,0.2);
2906
+ backdrop-filter: none;
2907
+ background: #fff; /* Clean white like YouTube */
2908
+ opacity: 0; /* Hidden by default */
2909
+ transition: opacity 0.15s ease;
2910
+ }
2911
+
2912
+ .uvf-progress-bar-wrapper:hover .uvf-progress-handle {
2913
+ opacity: 1; /* Show on hover */
2914
+ }
2915
+
2916
+ /* Desktop progress fill */
2917
+ .uvf-progress-filled {
2918
+ background: var(--uvf-accent-1, #ff0000);
2919
+ box-shadow: none;
2920
+ border-radius: 2px;
2851
2921
  }
2852
2922
  }
2853
2923