unified-video-framework 1.4.85 → 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 +370 -86
  4. package/packages/web/dist/WebPlayer.js.map +1 -1
  5. package/packages/web/src/WebPlayer.ts +370 -86
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unified-video-framework",
3
- "version": "1.4.85",
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,44 +2400,73 @@ 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: 12px 8px;
2408
- background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 70%, var(--uvf-overlay-transparent) 100%);
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 */
2409
2411
  }
2410
2412
 
2411
2413
  .uvf-controls-row {
2412
- gap: 8px;
2414
+ gap: 8px; /* YouTube-style compact spacing */
2413
2415
  flex-wrap: nowrap;
2414
2416
  align-items: center;
2415
- justify-content: space-between;
2417
+ justify-content: flex-start; /* YouTube-style left alignment */
2416
2418
  }
2417
2419
 
2418
- /* Mobile control sizing - 70% of desktop size */
2420
+ /* YouTube-style mobile controls */
2419
2421
  .uvf-control-btn {
2420
- width: 28px; /* 70% of 40px */
2421
- height: 28px;
2422
- min-width: 28px;
2423
- min-height: 28px;
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 */
2424
2438
  }
2425
2439
 
2440
+ /* YouTube-style play button - clean and prominent */
2426
2441
  .uvf-control-btn.play-pause {
2427
- width: 35px; /* 70% of 50px */
2428
- height: 35px;
2429
- min-width: 35px;
2430
- min-height: 35px;
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 */
2449
+ }
2450
+
2451
+ .uvf-control-btn.play-pause:hover {
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);
2431
2459
  }
2432
2460
 
2433
2461
  .uvf-control-btn svg {
2434
- width: 14px; /* 70% of 20px */
2435
- height: 14px;
2462
+ width: 20px; /* Larger icons for better visibility */
2463
+ height: 20px;
2464
+ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
2436
2465
  }
2437
2466
 
2438
2467
  .uvf-control-btn.play-pause svg {
2439
- width: 17px; /* 70% of 24px */
2440
- height: 17px;
2468
+ width: 28px; /* Even larger for primary action */
2469
+ height: 28px;
2441
2470
  }
2442
2471
 
2443
2472
  /* Skip buttons */
@@ -2447,11 +2476,21 @@ export class WebPlayer extends BasePlayer {
2447
2476
  height: 15px;
2448
2477
  }
2449
2478
 
2479
+ /* YouTube-style time display */
2450
2480
  .uvf-time-display {
2451
- font-size: 10px; /* 70% of 14px */
2452
- min-width: 84px; /* 70% of 120px */
2453
- padding: 0 7px; /* 70% of 10px */
2454
- order: 4;
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 */
2455
2494
  }
2456
2495
 
2457
2496
  /* Volume control mobile adjustments */
@@ -2482,15 +2521,24 @@ export class WebPlayer extends BasePlayer {
2482
2521
  }
2483
2522
 
2484
2523
  .uvf-top-btn {
2485
- width: 28px; /* 70% of 40px */
2486
- height: 28px;
2487
- min-width: 28px;
2488
- min-height: 28px;
2524
+ width: 44px; /* Touch-friendly size */
2525
+ height: 44px;
2526
+ min-width: 44px;
2527
+ min-height: 44px;
2528
+ background: rgba(255,255,255,0.15);
2529
+ backdrop-filter: blur(12px);
2530
+ border: 1px solid rgba(255,255,255,0.25);
2531
+ }
2532
+
2533
+ .uvf-top-btn:active {
2534
+ transform: scale(0.95);
2535
+ background: rgba(255,255,255,0.25);
2489
2536
  }
2490
2537
 
2491
2538
  .uvf-top-btn svg {
2492
- width: 14px; /* 70% of 20px */
2493
- height: 14px;
2539
+ width: 20px;
2540
+ height: 20px;
2541
+ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
2494
2542
  }
2495
2543
 
2496
2544
  .uvf-title-bar {
@@ -2515,14 +2563,42 @@ export class WebPlayer extends BasePlayer {
2515
2563
  height: 25px;
2516
2564
  }
2517
2565
 
2566
+ /* YouTube-style mobile progress bar */
2518
2567
  .uvf-progress-bar-wrapper {
2519
- height: 6px; /* Slightly reduced for mobile */
2568
+ height: 4px; /* YouTube-style thin progress bar */
2520
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 */
2521
2580
  }
2522
2581
 
2523
2582
  .uvf-progress-handle {
2524
- width: 14px; /* Slightly larger for touch */
2525
- height: 14px;
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;
2591
+ }
2592
+
2593
+ .uvf-progress-bar-wrapper:hover .uvf-progress-handle {
2594
+ opacity: 1; /* Show on hover like YouTube */
2595
+ }
2596
+
2597
+ /* YouTube-style progress fill */
2598
+ .uvf-progress-filled {
2599
+ background: var(--uvf-accent-1, #ff0000); /* YouTube red */
2600
+ box-shadow: none; /* Clean, no glow */
2601
+ border-radius: 2px;
2526
2602
  }
2527
2603
 
2528
2604
  .uvf-settings-menu {
@@ -2574,120 +2650,274 @@ export class WebPlayer extends BasePlayer {
2574
2650
  }
2575
2651
 
2576
2652
  .uvf-controls-bar {
2577
- padding: 8px;
2653
+ padding: 12px 16px; /* Optimized for landscape viewing */
2654
+ background: linear-gradient(to top, var(--uvf-overlay-strong) 0%, var(--uvf-overlay-medium) 80%, var(--uvf-overlay-transparent) 100%);
2655
+ backdrop-filter: blur(10px);
2656
+ }
2657
+
2658
+ .uvf-controls-row {
2659
+ gap: 12px; /* Balanced spacing for landscape */
2578
2660
  }
2579
2661
 
2580
2662
  .uvf-top-controls {
2581
- top: 6px;
2582
- right: 6px;
2663
+ top: 10px;
2664
+ right: 16px;
2665
+ gap: 8px;
2583
2666
  }
2584
2667
 
2585
2668
  .uvf-title-bar {
2586
- padding: 6px;
2669
+ padding: 10px 16px;
2587
2670
  }
2588
2671
 
2672
+ /* Touch-optimized landscape controls */
2589
2673
  .uvf-control-btn {
2590
- width: 28px; /* 70% sizing for landscape mobile */
2591
- height: 28px;
2674
+ width: 40px;
2675
+ height: 40px;
2676
+ min-width: 40px;
2677
+ min-height: 40px;
2678
+ border-radius: 20px;
2679
+ background: rgba(255,255,255,0.12);
2680
+ backdrop-filter: blur(10px);
2681
+ border: 1px solid rgba(255,255,255,0.2);
2592
2682
  }
2593
2683
 
2594
2684
  .uvf-control-btn svg {
2595
- width: 14px;
2596
- height: 14px;
2685
+ width: 18px;
2686
+ height: 18px;
2687
+ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
2597
2688
  }
2598
2689
 
2599
2690
  .uvf-control-btn.play-pause {
2600
- width: 35px; /* 70% of 50px */
2601
- height: 35px;
2691
+ width: 46px;
2692
+ height: 46px;
2693
+ min-width: 46px;
2694
+ min-height: 46px;
2695
+ background: linear-gradient(135deg, var(--uvf-accent-1), var(--uvf-accent-2));
2696
+ border: 2px solid rgba(255,255,255,0.3);
2697
+ box-shadow: 0 3px 12px rgba(0,0,0,0.4);
2602
2698
  }
2603
2699
 
2604
2700
  .uvf-control-btn.play-pause svg {
2605
- width: 17px;
2606
- height: 17px;
2701
+ width: 22px;
2702
+ height: 22px;
2703
+ }
2704
+
2705
+ .uvf-control-btn:active {
2706
+ transform: scale(0.96);
2607
2707
  }
2608
2708
 
2609
2709
  .uvf-top-btn {
2610
- width: 28px;
2611
- height: 28px;
2710
+ width: 38px;
2711
+ height: 38px;
2712
+ min-width: 38px;
2713
+ min-height: 38px;
2714
+ background: rgba(255,255,255,0.15);
2715
+ backdrop-filter: blur(12px);
2612
2716
  }
2613
2717
 
2614
2718
  .uvf-top-btn svg {
2615
- width: 14px;
2616
- height: 14px;
2719
+ width: 17px;
2720
+ height: 17px;
2721
+ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
2617
2722
  }
2618
2723
 
2619
2724
  .uvf-time-display {
2620
- font-size: 10px;
2621
- min-width: 80px;
2725
+ font-size: 11px;
2726
+ min-width: 85px;
2727
+ padding: 6px 10px;
2728
+ background: rgba(0,0,0,0.6);
2729
+ border-radius: 16px;
2730
+ border: 1px solid rgba(255,255,255,0.15);
2731
+ backdrop-filter: blur(8px);
2622
2732
  }
2623
2733
  }
2624
2734
 
2625
- /* Tablet devices */
2626
- @media screen and (min-width: 768px) and (max-width: 1023px) {
2735
+ /* YouTube-style Desktop/Tablet */
2736
+ @media screen and (min-width: 768px) {
2627
2737
  .uvf-controls-bar {
2628
- padding: 18px 15px;
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 */
2741
+ }
2742
+
2743
+ .uvf-controls-row {
2744
+ gap: 12px; /* YouTube-style balanced spacing */
2745
+ justify-content: space-between; /* YouTube-style distributed layout */
2746
+ }
2747
+
2748
+ /* Desktop progress bar positioning */
2749
+ .uvf-progress-section {
2750
+ margin-bottom: 8px;
2629
2751
  }
2630
2752
 
2753
+ /* YouTube-style desktop controls */
2631
2754
  .uvf-control-btn {
2632
- width: 36px; /* 90% of desktop size for tablets */
2633
- height: 36px;
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;
2764
+ }
2765
+
2766
+ .uvf-control-btn:hover {
2767
+ background: rgba(255,255,255,0.15); /* YouTube hover brightness */
2768
+ transform: none; /* No scale on desktop like YouTube */
2634
2769
  }
2635
2770
 
2636
2771
  .uvf-control-btn svg {
2637
- width: 18px;
2772
+ width: 18px; /* YouTube icon sizing */
2638
2773
  height: 18px;
2774
+ filter: none; /* Clean icons like YouTube */
2639
2775
  }
2640
2776
 
2777
+ /* YouTube-style play button - subtle but prominent */
2641
2778
  .uvf-control-btn.play-pause {
2642
- width: 45px; /* 90% of 50px */
2643
- height: 45px;
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 */
2786
+ }
2787
+
2788
+ .uvf-control-btn.play-pause:hover {
2789
+ background: rgba(255,255,255,0.18);
2790
+ box-shadow: none; /* No shadow on hover */
2644
2791
  }
2645
2792
 
2646
2793
  .uvf-control-btn.play-pause svg {
2647
- width: 22px; /* 90% of 24px */
2648
- height: 22px;
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;
2809
+ }
2810
+
2811
+ .uvf-top-controls {
2812
+ top: 18px;
2813
+ right: 24px;
2814
+ gap: 12px;
2649
2815
  }
2650
2816
 
2651
2817
  .uvf-top-btn {
2652
- width: 36px;
2653
- height: 36px;
2818
+ width: 42px;
2819
+ height: 42px;
2820
+ min-width: 42px;
2821
+ min-height: 42px;
2822
+ background: rgba(255,255,255,0.12);
2823
+ backdrop-filter: blur(10px);
2824
+ border: 1px solid rgba(255,255,255,0.25);
2654
2825
  }
2655
2826
 
2656
- .uvf-top-btn svg {
2657
- width: 18px;
2658
- height: 18px;
2827
+ .uvf-top-btn:hover {
2828
+ background: rgba(255,255,255,0.18);
2829
+ transform: scale(1.05);
2830
+ box-shadow: 0 4px 16px rgba(0,0,0,0.2);
2659
2831
  }
2660
2832
 
2661
- .uvf-top-controls {
2662
- top: 15px;
2663
- right: 15px;
2833
+ .uvf-top-btn svg {
2834
+ width: 19px;
2835
+ height: 19px;
2836
+ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
2664
2837
  }
2665
2838
 
2666
2839
  .uvf-title-bar {
2667
- padding: 15px;
2840
+ padding: 18px 24px;
2668
2841
  }
2669
2842
 
2670
2843
  .uvf-video-title {
2671
- font-size: 16px; /* 90% of 18px */
2844
+ font-size: 16px;
2845
+ text-shadow: 0 2px 8px rgba(0,0,0,0.6);
2672
2846
  }
2673
2847
 
2674
2848
  .uvf-video-subtitle {
2675
- font-size: 12px; /* 90% of 13px */
2849
+ font-size: 12px;
2676
2850
  }
2677
2851
 
2678
2852
  .uvf-time-display {
2679
- font-size: 13px; /* 90% of 14px */
2680
- min-width: 108px; /* 90% of 120px */
2853
+ font-size: 13px;
2854
+ min-width: 100px;
2855
+ padding: 8px 14px;
2856
+ background: rgba(0,0,0,0.5);
2857
+ border-radius: 18px;
2858
+ border: 1px solid rgba(255,255,255,0.15);
2859
+ backdrop-filter: blur(8px);
2860
+ font-weight: 500;
2861
+ letter-spacing: 0.3px;
2681
2862
  }
2682
2863
 
2683
2864
  .uvf-center-play-btn {
2684
- width: 72px; /* 90% of 80px */
2685
- height: 72px;
2865
+ width: 76px;
2866
+ height: 76px;
2867
+ background: rgba(255,255,255,0.12);
2868
+ backdrop-filter: blur(12px);
2869
+ border: 2px solid rgba(255,255,255,0.2);
2870
+ transition: all 0.3s ease;
2871
+ }
2872
+
2873
+ .uvf-center-play-btn:hover {
2874
+ background: rgba(255,255,255,0.18);
2875
+ transform: scale(1.05);
2876
+ box-shadow: 0 8px 32px rgba(0,0,0,0.4);
2686
2877
  }
2687
2878
 
2688
2879
  .uvf-center-play-btn svg {
2689
- width: 32px; /* 90% of 35px */
2690
- height: 32px;
2880
+ width: 34px;
2881
+ height: 34px;
2882
+ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
2883
+ }
2884
+
2885
+ /* YouTube-style desktop progress bar */
2886
+ .uvf-progress-bar-wrapper {
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 */
2899
+ }
2900
+
2901
+ .uvf-progress-handle {
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;
2691
2921
  }
2692
2922
  }
2693
2923
 
@@ -2705,30 +2935,84 @@ export class WebPlayer extends BasePlayer {
2705
2935
  --uvf-overlay-transparent: var(--uvf-overlay-transparent, rgba(0,0,0,0));
2706
2936
  }
2707
2937
 
2708
- /* Touch device optimizations */
2938
+ /* Touch device optimizations - Enhanced for all touch devices */
2709
2939
  @media (hover: none) and (pointer: coarse) {
2940
+ /* Ensure minimum touch targets on all touch devices */
2710
2941
  .uvf-control-btn {
2711
- min-width: 44px;
2712
- min-height: 44px;
2942
+ min-width: 44px !important;
2943
+ min-height: 44px !important;
2944
+ touch-action: manipulation; /* Prevent zoom on double-tap */
2945
+ -webkit-touch-callout: none; /* Disable long-press context menu */
2946
+ user-select: none;
2713
2947
  }
2714
2948
 
2715
2949
  .uvf-top-btn {
2716
- min-width: 44px;
2717
- min-height: 44px;
2950
+ min-width: 44px !important;
2951
+ min-height: 44px !important;
2952
+ touch-action: manipulation;
2953
+ -webkit-touch-callout: none;
2954
+ user-select: none;
2718
2955
  }
2719
2956
 
2957
+ /* Enhanced progress bar for touch */
2720
2958
  .uvf-progress-bar-wrapper {
2721
- height: 8px;
2959
+ height: 12px !important; /* Thicker for better touch interaction */
2722
2960
  cursor: pointer;
2961
+ touch-action: pan-x; /* Allow horizontal panning only */
2962
+ padding: 8px 0; /* Increase touch area without visual change */
2963
+ margin: -8px 0 4px 0; /* Compensate for padding */
2723
2964
  }
2724
2965
 
2725
2966
  .uvf-progress-handle {
2726
- width: 20px;
2727
- height: 20px;
2967
+ width: 24px !important;
2968
+ height: 24px !important;
2969
+ touch-action: pan-x;
2970
+ transition: transform 0.1s ease;
2728
2971
  }
2729
2972
 
2973
+ /* Enhanced volume controls for touch */
2730
2974
  .uvf-volume-slider {
2731
- height: 10px;
2975
+ height: 12px !important;
2976
+ touch-action: pan-x;
2977
+ padding: 6px 0;
2978
+ margin: -6px 0;
2979
+ }
2980
+
2981
+ .uvf-volume-control:hover .uvf-volume-panel {
2982
+ display: block !important; /* Always show on touch devices when hovered */
2983
+ }
2984
+
2985
+ /* Better feedback for touch interactions */
2986
+ .uvf-control-btn:active,
2987
+ .uvf-top-btn:active {
2988
+ transform: scale(0.95);
2989
+ background: rgba(255,255,255,0.2) !important;
2990
+ transition: all 0.1s ease;
2991
+ }
2992
+
2993
+ /* Prevent text selection on controls */
2994
+ .uvf-controls-bar,
2995
+ .uvf-top-controls,
2996
+ .uvf-title-bar {
2997
+ -webkit-user-select: none;
2998
+ -moz-user-select: none;
2999
+ -ms-user-select: none;
3000
+ user-select: none;
3001
+ -webkit-touch-callout: none;
3002
+ }
3003
+
3004
+ /* Enhanced settings menu for touch */
3005
+ .uvf-settings-menu {
3006
+ min-width: 180px !important;
3007
+ font-size: 14px !important;
3008
+ }
3009
+
3010
+ .uvf-settings-option {
3011
+ padding: 12px 16px !important;
3012
+ min-height: 44px !important;
3013
+ display: flex;
3014
+ align-items: center;
3015
+ touch-action: manipulation;
2732
3016
  }
2733
3017
  }
2734
3018