myetv-player 1.0.0 → 1.0.8

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 (38) hide show
  1. package/.github/workflows/codeql.yml +100 -0
  2. package/README.md +49 -58
  3. package/SECURITY.md +50 -0
  4. package/css/myetv-player.css +424 -219
  5. package/css/myetv-player.min.css +1 -1
  6. package/dist/myetv-player.js +1759 -1502
  7. package/dist/myetv-player.min.js +1705 -1469
  8. package/package.json +7 -1
  9. package/plugins/README.md +1016 -0
  10. package/plugins/cloudflare/README.md +1068 -0
  11. package/plugins/cloudflare/myetv-player-cloudflare-stream-plugin.js +556 -0
  12. package/plugins/facebook/README.md +1024 -0
  13. package/plugins/facebook/myetv-player-facebook-plugin.js +437 -0
  14. package/plugins/gamepad-remote-controller/README.md +816 -0
  15. package/plugins/gamepad-remote-controller/myetv-player-gamepad-remote-plugin.js +678 -0
  16. package/plugins/google-adsense-ads/README.md +1 -0
  17. package/plugins/google-adsense-ads/g-adsense-ads-plugin.js +158 -0
  18. package/plugins/google-ima-ads/README.md +1 -0
  19. package/plugins/google-ima-ads/g-ima-ads-plugin.js +355 -0
  20. package/plugins/twitch/README.md +1185 -0
  21. package/plugins/twitch/myetv-player-twitch-plugin.js +569 -0
  22. package/plugins/vast-vpaid-ads/README.md +1 -0
  23. package/plugins/vast-vpaid-ads/vast-vpaid-ads-plugin.js +346 -0
  24. package/plugins/vimeo/README.md +1416 -0
  25. package/plugins/vimeo/myetv-player-vimeo.js +640 -0
  26. package/plugins/youtube/README.md +851 -0
  27. package/plugins/youtube/myetv-player-youtube-plugin.js +1714 -210
  28. package/scss/README.md +160 -0
  29. package/scss/_controls.scss +184 -30
  30. package/scss/_menus.scss +840 -672
  31. package/scss/_responsive.scss +67 -105
  32. package/scss/_volume.scss +67 -105
  33. package/src/README.md +559 -0
  34. package/src/controls.js +17 -5
  35. package/src/core.js +1237 -1060
  36. package/src/i18n.js +27 -1
  37. package/src/quality.js +478 -436
  38. package/src/subtitles.js +2 -2
package/scss/_responsive.scss CHANGED
@@ -819,8 +819,8 @@ video::-webkit-media-text-track-display {
819
819
  }
820
820
 
821
821
  /* Horizontal Volume Slider (default) - Base width reduced */
822
- .volume-container[data-orientation="horizontal"] .volume-slider {
823
- width: 80px; /* Ridotto da var(--player-volume-width) a 80px fissi */
822
+ .volume-container[data-mobile-slider="show"] .volume-slider {
823
+ width: 80px;
824
824
  height: var(--player-volume-height);
825
825
  background: var(--player-volume-bg);
826
826
  border-radius: calc(var(--player-volume-height) / 2);
@@ -829,152 +829,114 @@ video::-webkit-media-text-track-display {
829
829
 
830
830
  /* Responsive width reduction for horizontal slider */
831
831
  @media (max-width: 1200px) {
832
- .volume-container[data-orientation="horizontal"] .volume-slider {
832
+ .volume-container[data-mobile-slider="show"] .volume-slider {
833
833
  width: 70px;
834
834
  }
835
835
  }
836
836
 
837
837
  @media (max-width: 900px) {
838
- .volume-container[data-orientation="horizontal"] .volume-slider {
838
+ .volume-container[data-mobile-slider="show"] .volume-slider {
839
839
  width: 60px;
840
840
  }
841
841
  }
842
842
 
843
843
  @media (max-width: 768px) {
844
- .volume-container[data-orientation="horizontal"] .volume-slider {
844
+ .volume-container[data-mobile-slider="show"] .volume-slider {
845
845
  width: 50px;
846
846
  }
847
847
  }
848
848
 
849
849
  @media (max-width: 600px) {
850
- .volume-container[data-orientation="horizontal"] .volume-slider {
850
+ .volume-container[data-mobile-slider="show"] .volume-slider {
851
851
  width: 40px;
852
852
  }
853
853
  }
854
854
 
855
- /* Vertical Volume Slider (always visible) */
856
- .volume-container[data-orientation="vertical"] {
857
- flex-direction: column;
858
- height: 80px;
859
- justify-content: center;
860
- }
855
+ @media (max-width: 550px) {
856
+ /* Hide tooltip on mobile */
857
+ .volume-container[data-mobile-slider="show"] .volume-tooltip {
858
+ display: none !important;
859
+ }
861
860
 
862
- .volume-container[data-orientation="vertical"] .volume-slider {
863
- width: 4px;
864
- height: 60px;
865
- writing-mode: bt-lr; /* IE */
866
- -webkit-appearance: slider-vertical; /* WebKit */
867
- background: var(--player-volume-bg);
868
- border-radius: 2px;
869
- transform: rotate(0deg);
870
- transition: all 0.3s ease;
861
+ /* Volume container */
862
+ .volume-container[data-mobile-slider="show"] {
863
+ pointer-events: auto !important;
864
+ position: relative;
871
865
  }
872
866
 
873
- /* Responsive: Force vertical behavior for horizontal sliders under 550px */
874
- @media (max-width: 550px) {
875
- /* Hide horizontal slider by default on mobile */
876
- .volume-container[data-orientation="horizontal"] .volume-slider {
867
+ /* Mute button */
868
+ .mute-btn {
869
+ position: relative;
870
+ z-index: 100;
871
+ pointer-events: auto !important;
872
+ }
873
+
874
+ /* Hide slider by default - stay open for 2 seconds */
875
+ .volume-container[data-mobile-slider="show"] .volume-slider {
877
876
  position: absolute;
878
877
  opacity: 0;
879
878
  visibility: hidden;
880
879
  pointer-events: none;
881
880
  width: 0;
882
881
  height: 0;
883
- transform: translateX(-50%) rotate(-90deg);
884
- transform-origin: center center;
885
- transition: opacity 0.1s ease, visibility 0.1s ease;
882
+ transform: translateX(-100%);
883
+ transition: opacity 0s ease, visibility 0s ease 2s, width 0s ease 2s;
886
884
  }
887
885
 
888
- /* Show vertical slider on hover for horizontal mode */
889
- .mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider,
890
- .volume-container[data-orientation="horizontal"]:hover .volume-slider {
886
+ /* Show slider on hover */
887
+ .controls-left:hover .volume-container[data-mobile-slider="show"] .volume-slider,
888
+ .mute-btn:hover ~ .volume-container[data-mobile-slider="show"] .volume-slider,
889
+ .volume-container[data-mobile-slider="show"]:hover .volume-slider,
890
+ .volume-slider:hover {
891
891
  position: absolute;
892
892
  opacity: 1;
893
893
  visibility: visible;
894
- pointer-events: auto;
895
- width: 60px;
896
- height: 4px;
897
- bottom: 45px;
898
- left: -20px;
899
- transform: translateX(-50%) translateY(0%) rotate(-90deg);
900
- transform-origin: center center;
901
- z-index: 1000;
902
- background: rgba(0, 0, 0, 0.9);
903
- border: 1px solid rgba(255, 255, 255, 0.2);
904
- border-radius: 6px;
905
- padding: 4px;
894
+ pointer-events: auto !important;
895
+ width: 90px !important;
896
+ height: auto;
897
+ bottom: auto;
898
+ top: 50%;
899
+ left: 5px;
900
+ transform: translateY(-50%);
901
+ z-index: 19;
902
+ background: rgba(0, 0, 0, 0.92) !important;
903
+ border: 1px solid rgba(255, 255, 255, 0.15);
904
+ border-radius: 8px;
905
+ padding: 10px 14px;
906
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
906
907
  backdrop-filter: blur(10px);
907
- box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
908
- transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
908
+ transition: opacity 0.2s ease, visibility 0s ease, width 0.2s ease;
909
909
  }
910
910
 
911
- /* Extend hover area of mute button for horizontal mode */
912
- .volume-container[data-orientation="horizontal"] + .mute-btn,
913
- .mute-btn + .volume-container[data-orientation="horizontal"] .mute-btn {
914
- padding: 15px;
915
- margin: -7px;
916
- position: relative;
917
- z-index: 1001;
911
+ /* Keep slider open when hovering controls-left */
912
+ .controls-left:has(.volume-container[data-mobile-slider="show"]):hover {
913
+ pointer-events: auto !important;
918
914
  }
919
915
 
920
- /* Keep hover active when moving from button to slider */
921
- .mute-btn:hover + .volume-container[data-orientation="horizontal"]::before,
922
- .volume-container[data-orientation="horizontal"]::before {
923
- content: '';
924
- position: absolute;
925
- top: -50px;
926
- left: -40px;
927
- right: -20px;
928
- bottom: -10px;
929
- background: transparent;
930
- z-index: 999;
931
- }
932
-
933
- /* Hide thumb by default for horizontal mode on mobile */
934
- .volume-container[data-orientation="horizontal"] .volume-slider::-webkit-slider-thumb {
935
- opacity: 0;
936
- visibility: hidden;
937
- transition: none !important;
938
- }
939
-
940
- .volume-container[data-orientation="horizontal"] .volume-slider::-moz-range-thumb {
941
- opacity: 0;
942
- visibility: hidden;
943
- transition: none !important;
916
+ /* Track styling */
917
+ .controls-left:hover .volume-slider::-webkit-slider-runnable-track,
918
+ .volume-container[data-mobile-slider="show"]:hover .volume-slider::-webkit-slider-runnable-track,
919
+ .volume-slider:hover::-webkit-slider-runnable-track {
920
+ width: 60px;
921
+ height: 4px !important;
922
+ background: linear-gradient(to right, var(--player-primary-color) 0%, var(--player-primary-color) var(--player-volume-fill, 50%), rgba(255, 255, 255, 0.4) var(--player-volume-fill, 50%), rgba(255, 255, 255, 0.4) 100%) !important;
923
+ border-radius: 2px;
944
924
  }
945
925
 
946
- /* Show thumb only when in hover for horizontal mode */
947
- .volume-container[data-orientation="horizontal"]:hover .volume-slider::-webkit-slider-thumb,
948
- .mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider::-webkit-slider-thumb {
949
- opacity: 1;
950
- visibility: visible;
926
+ /* Thumb styling */
927
+ .controls-left:hover .volume-slider::-webkit-slider-thumb,
928
+ .volume-container[data-mobile-slider="show"]:hover .volume-slider::-webkit-slider-thumb,
929
+ .volume-slider:hover::-webkit-slider-thumb {
930
+ opacity: 1 !important;
931
+ visibility: visible !important;
951
932
  -webkit-appearance: none;
952
- width: var(--player-volume-handle-size);
953
- height: var(--player-volume-handle-size);
933
+ width: 14px;
934
+ height: 14px;
954
935
  border-radius: 50%;
955
- background: var(--player-primary-color);
936
+ background: white;
956
937
  cursor: pointer;
957
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
958
- transition: none !important;
959
- }
960
-
961
- .volume-container[data-orientation="horizontal"]:hover .volume-slider::-moz-range-thumb,
962
- .mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider::-moz-range-thumb {
963
- opacity: 1;
964
- visibility: visible;
965
- width: var(--player-volume-handle-size);
966
- height: var(--player-volume-handle-size);
967
- border-radius: 50%;
968
- background: var(--player-primary-color);
969
- cursor: pointer;
970
- border: none;
971
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
972
- transition: none !important;
973
- }
974
-
975
- /* Vertical sliders remain unchanged on mobile */
976
- .volume-container[data-orientation="vertical"] {
977
- /* Keep original vertical styling */
938
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
939
+ margin-top: -5px;
978
940
  }
979
941
  }
980
942
 
package/scss/_volume.scss CHANGED
@@ -1268,8 +1268,8 @@ video::-webkit-media-text-track-display {
1268
1268
  }
1269
1269
 
1270
1270
  /* Horizontal Volume Slider (default) - Base width reduced */
1271
- .volume-container[data-orientation="horizontal"] .volume-slider {
1272
- width: 80px; /* Ridotto da var(--player-volume-width) a 80px fissi */
1271
+ .volume-container[data-mobile-slider="show"] .volume-slider {
1272
+ width: 80px;
1273
1273
  height: var(--player-volume-height);
1274
1274
  background: var(--player-volume-bg);
1275
1275
  border-radius: calc(var(--player-volume-height) / 2);
@@ -1278,152 +1278,114 @@ video::-webkit-media-text-track-display {
1278
1278
 
1279
1279
  /* Responsive width reduction for horizontal slider */
1280
1280
  @media (max-width: 1200px) {
1281
- .volume-container[data-orientation="horizontal"] .volume-slider {
1281
+ .volume-container[data-mobile-slider="show"] .volume-slider {
1282
1282
  width: 70px;
1283
1283
  }
1284
1284
  }
1285
1285
 
1286
1286
  @media (max-width: 900px) {
1287
- .volume-container[data-orientation="horizontal"] .volume-slider {
1287
+ .volume-container[data-mobile-slider="show"] .volume-slider {
1288
1288
  width: 60px;
1289
1289
  }
1290
1290
  }
1291
1291
 
1292
1292
  @media (max-width: 768px) {
1293
- .volume-container[data-orientation="horizontal"] .volume-slider {
1293
+ .volume-container[data-mobile-slider="show"] .volume-slider {
1294
1294
  width: 50px;
1295
1295
  }
1296
1296
  }
1297
1297
 
1298
1298
  @media (max-width: 600px) {
1299
- .volume-container[data-orientation="horizontal"] .volume-slider {
1299
+ .volume-container[data-mobile-slider="show"] .volume-slider {
1300
1300
  width: 40px;
1301
1301
  }
1302
1302
  }
1303
1303
 
1304
- /* Vertical Volume Slider (always visible) */
1305
- .volume-container[data-orientation="vertical"] {
1306
- flex-direction: column;
1307
- height: 80px;
1308
- justify-content: center;
1309
- }
1304
+ @media (max-width: 550px) {
1305
+ /* Hide tooltip on mobile */
1306
+ .volume-container[data-mobile-slider="show"] .volume-tooltip {
1307
+ display: none !important;
1308
+ }
1310
1309
 
1311
- .volume-container[data-orientation="vertical"] .volume-slider {
1312
- width: 4px;
1313
- height: 60px;
1314
- writing-mode: bt-lr; /* IE */
1315
- -webkit-appearance: slider-vertical; /* WebKit */
1316
- background: var(--player-volume-bg);
1317
- border-radius: 2px;
1318
- transform: rotate(0deg);
1319
- transition: all 0.3s ease;
1310
+ /* Volume container */
1311
+ .volume-container[data-mobile-slider="show"] {
1312
+ pointer-events: auto !important;
1313
+ position: relative;
1320
1314
  }
1321
1315
 
1322
- /* Responsive: Force vertical behavior for horizontal sliders under 550px */
1323
- @media (max-width: 550px) {
1324
- /* Hide horizontal slider by default on mobile */
1325
- .volume-container[data-orientation="horizontal"] .volume-slider {
1316
+ /* Mute button */
1317
+ .mute-btn {
1318
+ position: relative;
1319
+ z-index: 100;
1320
+ pointer-events: auto !important;
1321
+ }
1322
+
1323
+ /* Hide slider by default - stay open for 2 seconds */
1324
+ .volume-container[data-mobile-slider="show"] .volume-slider {
1326
1325
  position: absolute;
1327
1326
  opacity: 0;
1328
1327
  visibility: hidden;
1329
1328
  pointer-events: none;
1330
1329
  width: 0;
1331
1330
  height: 0;
1332
- transform: translateX(-50%) rotate(-90deg);
1333
- transform-origin: center center;
1334
- transition: opacity 0.1s ease, visibility 0.1s ease;
1331
+ transform: translateX(-100%);
1332
+ transition: opacity 0s ease, visibility 0s ease 2s, width 0s ease 2s;
1335
1333
  }
1336
1334
 
1337
- /* Show vertical slider on hover for horizontal mode */
1338
- .mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider,
1339
- .volume-container[data-orientation="horizontal"]:hover .volume-slider {
1335
+ /* Show slider on hover */
1336
+ .controls-left:hover .volume-container[data-mobile-slider="show"] .volume-slider,
1337
+ .mute-btn:hover ~ .volume-container[data-mobile-slider="show"] .volume-slider,
1338
+ .volume-container[data-mobile-slider="show"]:hover .volume-slider,
1339
+ .volume-slider:hover {
1340
1340
  position: absolute;
1341
1341
  opacity: 1;
1342
1342
  visibility: visible;
1343
- pointer-events: auto;
1344
- width: 60px;
1345
- height: 4px;
1346
- bottom: 45px;
1347
- left: -20px;
1348
- transform: translateX(-50%) translateY(0%) rotate(-90deg);
1349
- transform-origin: center center;
1350
- z-index: 1000;
1351
- background: rgba(0, 0, 0, 0.9);
1352
- border: 1px solid rgba(255, 255, 255, 0.2);
1353
- border-radius: 6px;
1354
- padding: 4px;
1343
+ pointer-events: auto !important;
1344
+ width: 90px !important;
1345
+ height: auto;
1346
+ bottom: auto;
1347
+ top: 50%;
1348
+ left: 5px;
1349
+ transform: translateY(-50%);
1350
+ z-index: 19;
1351
+ background: rgba(0, 0, 0, 0.92) !important;
1352
+ border: 1px solid rgba(255, 255, 255, 0.15);
1353
+ border-radius: 8px;
1354
+ padding: 10px 14px;
1355
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
1355
1356
  backdrop-filter: blur(10px);
1356
- box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
1357
- transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
1357
+ transition: opacity 0.2s ease, visibility 0s ease, width 0.2s ease;
1358
1358
  }
1359
1359
 
1360
- /* Extend hover area of mute button for horizontal mode */
1361
- .volume-container[data-orientation="horizontal"] + .mute-btn,
1362
- .mute-btn + .volume-container[data-orientation="horizontal"] .mute-btn {
1363
- padding: 15px;
1364
- margin: -7px;
1365
- position: relative;
1366
- z-index: 1001;
1360
+ /* Keep slider open when hovering controls-left */
1361
+ .controls-left:has(.volume-container[data-mobile-slider="show"]):hover {
1362
+ pointer-events: auto !important;
1367
1363
  }
1368
1364
 
1369
- /* Keep hover active when moving from button to slider */
1370
- .mute-btn:hover + .volume-container[data-orientation="horizontal"]::before,
1371
- .volume-container[data-orientation="horizontal"]::before {
1372
- content: '';
1373
- position: absolute;
1374
- top: -50px;
1375
- left: -40px;
1376
- right: -20px;
1377
- bottom: -10px;
1378
- background: transparent;
1379
- z-index: 999;
1380
- }
1381
-
1382
- /* Hide thumb by default for horizontal mode on mobile */
1383
- .volume-container[data-orientation="horizontal"] .volume-slider::-webkit-slider-thumb {
1384
- opacity: 0;
1385
- visibility: hidden;
1386
- transition: none !important;
1387
- }
1388
-
1389
- .volume-container[data-orientation="horizontal"] .volume-slider::-moz-range-thumb {
1390
- opacity: 0;
1391
- visibility: hidden;
1392
- transition: none !important;
1365
+ /* Track styling */
1366
+ .controls-left:hover .volume-slider::-webkit-slider-runnable-track,
1367
+ .volume-container[data-mobile-slider="show"]:hover .volume-slider::-webkit-slider-runnable-track,
1368
+ .volume-slider:hover::-webkit-slider-runnable-track {
1369
+ width: 60px;
1370
+ height: 4px !important;
1371
+ background: linear-gradient(to right, var(--player-primary-color) 0%, var(--player-primary-color) var(--player-volume-fill, 50%), rgba(255, 255, 255, 0.4) var(--player-volume-fill, 50%), rgba(255, 255, 255, 0.4) 100%) !important;
1372
+ border-radius: 2px;
1393
1373
  }
1394
1374
 
1395
- /* Show thumb only when in hover for horizontal mode */
1396
- .volume-container[data-orientation="horizontal"]:hover .volume-slider::-webkit-slider-thumb,
1397
- .mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider::-webkit-slider-thumb {
1398
- opacity: 1;
1399
- visibility: visible;
1375
+ /* Thumb styling */
1376
+ .controls-left:hover .volume-slider::-webkit-slider-thumb,
1377
+ .volume-container[data-mobile-slider="show"]:hover .volume-slider::-webkit-slider-thumb,
1378
+ .volume-slider:hover::-webkit-slider-thumb {
1379
+ opacity: 1 !important;
1380
+ visibility: visible !important;
1400
1381
  -webkit-appearance: none;
1401
- width: var(--player-volume-handle-size);
1402
- height: var(--player-volume-handle-size);
1382
+ width: 14px;
1383
+ height: 14px;
1403
1384
  border-radius: 50%;
1404
- background: var(--player-primary-color);
1385
+ background: white;
1405
1386
  cursor: pointer;
1406
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
1407
- transition: none !important;
1408
- }
1409
-
1410
- .volume-container[data-orientation="horizontal"]:hover .volume-slider::-moz-range-thumb,
1411
- .mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider::-moz-range-thumb {
1412
- opacity: 1;
1413
- visibility: visible;
1414
- width: var(--player-volume-handle-size);
1415
- height: var(--player-volume-handle-size);
1416
- border-radius: 50%;
1417
- background: var(--player-primary-color);
1418
- cursor: pointer;
1419
- border: none;
1420
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
1421
- transition: none !important;
1422
- }
1423
-
1424
- /* Vertical sliders remain unchanged on mobile */
1425
- .volume-container[data-orientation="vertical"] {
1426
- /* Keep original vertical styling */
1387
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
1388
+ margin-top: -5px;
1427
1389
  }
1428
1390
  }
1429
1391