@gcorevideo/player 2.30.0 → 2.30.2

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 (40) hide show
  1. package/assets/audio-tracks/template.ejs +1 -1
  2. package/dist/core.js +65 -21
  3. package/dist/index.css +265 -265
  4. package/dist/index.embed.js +99 -34
  5. package/dist/index.js +125 -53
  6. package/docs/api/player.md +37 -0
  7. package/docs/api/player.player.getplugin.md +59 -0
  8. package/docs/api/player.player.md +14 -0
  9. package/docs/api/player.tokenrefreshoptions.gettoken.md +13 -0
  10. package/docs/api/player.tokenrefreshoptions.ipbound.md +13 -0
  11. package/docs/api/player.tokenrefreshoptions.md +115 -0
  12. package/docs/api/player.tokenrefreshoptions.ontokenrefreshed.md +13 -0
  13. package/docs/api/player.tokenrefreshoptions.refreshleadseconds.md +13 -0
  14. package/docs/api/player.tokenrefreshplugin.md +50 -0
  15. package/docs/api/player.tokenresponse.client_ip.md +13 -0
  16. package/docs/api/player.tokenresponse.expires.md +13 -0
  17. package/docs/api/player.tokenresponse.md +153 -0
  18. package/docs/api/player.tokenresponse.token.md +13 -0
  19. package/docs/api/player.tokenresponse.token_ip.md +13 -0
  20. package/docs/api/player.tokenresponse.url.md +13 -0
  21. package/docs/api/player.tokenresponse.url_ip.md +13 -0
  22. package/lib/playback/hls-playback/HlsPlayback.d.ts +1 -1
  23. package/lib/playback/hls-playback/HlsPlayback.d.ts.map +1 -1
  24. package/lib/playback/hls-playback/HlsPlayback.js +23 -20
  25. package/lib/playback/hls-playback/RangesList.d.ts +7 -0
  26. package/lib/playback/hls-playback/RangesList.d.ts.map +1 -0
  27. package/lib/playback/hls-playback/RangesList.js +41 -0
  28. package/lib/plugins/audio-selector/AudioTracks.d.ts +4 -0
  29. package/lib/plugins/audio-selector/AudioTracks.d.ts.map +1 -1
  30. package/lib/plugins/audio-selector/AudioTracks.js +42 -12
  31. package/lib/plugins/subtitles/ClosedCaptions.d.ts.map +1 -1
  32. package/lib/plugins/subtitles/ClosedCaptions.js +0 -2
  33. package/package.json +1 -1
  34. package/src/playback/hls-playback/HlsPlayback.ts +40 -37
  35. package/src/playback/hls-playback/RangesList.ts +45 -0
  36. package/src/playback/hls-playback/__tests__/RangesList.test.ts +60 -0
  37. package/src/plugins/audio-selector/AudioTracks.ts +51 -16
  38. package/src/plugins/audio-selector/__tests__/__snapshots__/AudioTracks.test.ts.snap +9 -9
  39. package/src/plugins/subtitles/ClosedCaptions.ts +0 -5
  40. package/tsconfig.tsbuildinfo +1 -1
package/dist/index.css CHANGED
@@ -279,6 +279,29 @@
279
279
  }
280
280
  .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
281
281
  flex: 1 0 auto;
282
+ }@charset "UTF-8";
283
+ .gplayer-mc-clips {
284
+ display: flex;
285
+ gap: 6px;
286
+ }
287
+ .gplayer-mc-clips .gplayer-mc-clips-text {
288
+ text-overflow: ellipsis;
289
+ white-space: nowrap;
290
+ overflow: hidden;
291
+ display: inline-block;
292
+ text-overflow: ellipsis;
293
+ color: white;
294
+ cursor: default;
295
+ line-height: var(--bottom-panel);
296
+ position: relative;
297
+ max-width: 150px;
298
+ }
299
+ .gplayer-mc-clips .gplayer-mc-clips-text::before {
300
+ content: "•";
301
+ padding-right: 6px;
302
+ }
303
+ .gplayer-mc-clips .gplayer-mc-clips-text.compact {
304
+ max-width: 100px;
282
305
  }:root {
283
306
  --primary-background-color: #000;
284
307
  --secondary-background-color: #262626;
@@ -679,29 +702,6 @@
679
702
  .context-menu .context-menu-list-item_icon {
680
703
  width: 20px;
681
704
  height: 20px;
682
- }@charset "UTF-8";
683
- .gplayer-mc-clips {
684
- display: flex;
685
- gap: 6px;
686
- }
687
- .gplayer-mc-clips .gplayer-mc-clips-text {
688
- text-overflow: ellipsis;
689
- white-space: nowrap;
690
- overflow: hidden;
691
- display: inline-block;
692
- text-overflow: ellipsis;
693
- color: white;
694
- cursor: default;
695
- line-height: var(--bottom-panel);
696
- position: relative;
697
- max-width: 150px;
698
- }
699
- .gplayer-mc-clips .gplayer-mc-clips-text::before {
700
- content: "•";
701
- padding-right: 6px;
702
- }
703
- .gplayer-mc-clips .gplayer-mc-clips-text.compact {
704
- max-width: 100px;
705
705
  }.dvr-controls {
706
706
  --disabled-opacity: 0.3;
707
707
  --circle-radius: 5px;
@@ -793,6 +793,40 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
793
793
  cursor: pointer;
794
794
  width: 30px;
795
795
  margin: 15px auto 0;
796
+ }.player-poster {
797
+ display: flex;
798
+ justify-content: center;
799
+ align-items: center;
800
+ position: absolute;
801
+ height: 100%;
802
+ width: 100%;
803
+ z-index: 998;
804
+ top: 0;
805
+ left: 0;
806
+ background-color: #000;
807
+ background-size: cover;
808
+ background-repeat: no-repeat;
809
+ background-position: 50% 50%;
810
+ }
811
+ .player-poster.clickable {
812
+ cursor: pointer;
813
+ }
814
+ .player-poster:hover .play-wrapper {
815
+ opacity: 1;
816
+ }
817
+ .player-poster .play-wrapper {
818
+ width: 100%;
819
+ height: 25%;
820
+ margin: 0 auto;
821
+ opacity: 0.75;
822
+ transition: opacity 0.1s ease;
823
+ }
824
+ .player-poster .play-wrapper svg {
825
+ height: 100%;
826
+ display: inline;
827
+ }
828
+ .player-poster .play-wrapper svg path {
829
+ fill: #fff;
796
830
  }*,
797
831
  :focus,
798
832
  :visited {
@@ -909,11 +943,209 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
909
943
  }.media-control-skin-1 .media-control-item.media-control-pip {
910
944
  order: 95;
911
945
  }
912
- .media-control-skin-1 .media-control-item.media-control-pip button {
913
- height: 20px;
946
+ .media-control-skin-1 .media-control-item.media-control-pip button {
947
+ height: 20px;
948
+ }
949
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
950
+ height: 20px;
951
+ }.seek-time {
952
+ position: absolute;
953
+ white-space: nowrap;
954
+ height: 20px;
955
+ line-height: 20px;
956
+ font-size: 0;
957
+ left: -100%;
958
+ bottom: 55px;
959
+ background-color: rgba(2, 2, 2, 0.5);
960
+ z-index: 9999;
961
+ transition: opacity 0.1s ease;
962
+ }
963
+ .seek-time.hidden {
964
+ opacity: 0;
965
+ }
966
+ .seek-time .seek-time__pos {
967
+ display: inline-block;
968
+ color: white;
969
+ font-size: 10px;
970
+ padding-left: 7px;
971
+ padding-right: 7px;
972
+ vertical-align: top;
973
+ }
974
+ .seek-time .seek-time__duration {
975
+ display: inline-block;
976
+ color: rgba(255, 255, 255, 0.5);
977
+ font-size: 10px;
978
+ padding-right: 7px;
979
+ vertical-align: top;
980
+ }
981
+ .seek-time .seek-time__duration::before {
982
+ content: "|";
983
+ margin-right: 7px;
984
+ }.container-with-poster-clickable .mc-skip-time {
985
+ height: 0;
986
+ }
987
+
988
+ .mc-skip-time {
989
+ position: absolute;
990
+ width: 100%;
991
+ height: calc(100% - 50px);
992
+ z-index: 9998;
993
+ background-color: transparent;
994
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
995
+ }
996
+ .mc-skip-time .skip-container {
997
+ width: 100%;
998
+ height: 100%;
999
+ display: flex;
1000
+ justify-content: space-between;
1001
+ }
1002
+ .mc-skip-time .skip-container .skip-item {
1003
+ flex: 1 0 0px;
1004
+ height: 100%;
1005
+ }.share_plugin[data-share] {
1006
+ pointer-events: auto;
1007
+ z-index: 5;
1008
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1009
+ }
1010
+ .share_plugin[data-share].share-hide .share-button-container {
1011
+ right: -50px;
1012
+ }
1013
+ .share_plugin[data-share] .share-button-container {
1014
+ cursor: pointer;
1015
+ width: 36px;
1016
+ height: 36px;
1017
+ background-color: rgba(74, 74, 74, 0.6);
1018
+ border-radius: 4px;
1019
+ position: absolute;
1020
+ right: 10px;
1021
+ top: 10px;
1022
+ padding-top: 6px;
1023
+ transition: all 0.3s ease-out;
1024
+ }
1025
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1026
+ background-color: transparent;
1027
+ border: 0;
1028
+ margin: 0 6px;
1029
+ padding: 0;
1030
+ cursor: pointer;
1031
+ display: inline-block;
1032
+ width: 19px;
1033
+ height: 20px;
1034
+ }
1035
+ .share_plugin[data-share] .share-container {
1036
+ pointer-events: auto;
1037
+ position: absolute;
1038
+ width: 280px;
1039
+ background-color: white;
1040
+ transform: translate(0, 50%);
1041
+ transform: translate(-50%, -50%);
1042
+ left: 50%;
1043
+ /* margin-left: -140px; */
1044
+ top: calc(50% - 20px);
1045
+ /* margin-top: -170px; */
1046
+ }
1047
+ .share_plugin[data-share] .share-container .share-container-header {
1048
+ text-align: left;
1049
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1050
+ }
1051
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1052
+ display: inline-block;
1053
+ font-size: 16px;
1054
+ margin: 5px;
1055
+ }
1056
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1057
+ display: inline-block;
1058
+ width: 24px;
1059
+ float: right;
1060
+ margin: 5px;
1061
+ cursor: pointer;
1062
+ }
1063
+ .share_plugin[data-share] .share-container .share-container-main {
1064
+ margin-bottom: 8px;
1065
+ }
1066
+ .share_plugin[data-share] .share-container .share-container-main > div {
1067
+ text-align: left;
1068
+ font-size: 14px;
1069
+ padding: 5px;
1070
+ }
1071
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--link, .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1072
+ overflow: hidden;
1073
+ text-overflow: ellipsis;
1074
+ color: #818181;
1075
+ border: solid 1px #d3d3d3;
1076
+ width: calc(100% - 10px);
1077
+ padding: 5px;
1078
+ }
1079
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1080
+ max-height: 90px;
1081
+ resize: none;
1082
+ }
1083
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1084
+ width: 32px;
1085
+ display: inline-block;
1086
+ margin-right: 5px;
1087
+ cursor: pointer;
1088
+ }.media-control-skin-1 .media-control-cc button.media-control-button {
1089
+ display: flex;
1090
+ justify-content: center;
1091
+ padding: 0;
1092
+ align-items: center;
1093
+ vertical-align: top;
1094
+ }
1095
+ .media-control-skin-1 .media-control-cc button.media-control-button:hover {
1096
+ color: white;
1097
+ }
1098
+ .media-control-skin-1 .media-control-cc ul li {
1099
+ text-align: center;
1100
+ }
1101
+ .media-control-skin-1 .media-control-cc ul li a {
1102
+ height: 30px;
1103
+ padding: 5px 10px;
1104
+ color: #fffffe;
1105
+ }
1106
+ .media-control-skin-1 .media-control-cc ul li a:hover {
1107
+ background-color: rgba(0, 0, 0, 0.4);
1108
+ }
1109
+ .media-control-skin-1 .media-control-cc ul li.current a {
1110
+ background-color: rgba(0, 0, 0, 0.4);
1111
+ }
1112
+ .media-control-skin-1 .media-control-cc ul li:first-child a {
1113
+ border-bottom-left-radius: 4px;
1114
+ border-bottom-right-radius: 4px;
1115
+ }
1116
+ .media-control-skin-1 .media-control-cc ul li:last-child a {
1117
+ border-top-left-radius: 4px;
1118
+ border-top-right-radius: 4px;
1119
+ }
1120
+ .media-control-skin-1 .media-control-cc {
1121
+ position: relative;
1122
+ order: 85;
1123
+ }
1124
+
1125
+ ::cue {
1126
+ visibility: hidden !important;
1127
+ font-size: 0 !important;
1128
+ }
1129
+
1130
+ .ios-fullscreen::cue {
1131
+ visibility: visible !important;
1132
+ font-size: 1em !important;
1133
+ }
1134
+
1135
+ .container .gplayer-cc-line {
1136
+ position: absolute;
1137
+ bottom: calc(var(--bottom-panel) + 5px);
1138
+ width: 100%;
1139
+ transition: transform 0.3s ease-out;
1140
+ }
1141
+ .container .gplayer-cc-line.media-control-cc-pulled {
1142
+ transform: translateY(var(--bottom-panel));
914
1143
  }
915
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
916
- height: 20px;
1144
+ .container .gplayer-cc-line p {
1145
+ width: auto;
1146
+ background-color: rgba(0, 0, 0, 0.4);
1147
+ color: white;
1148
+ display: inline-block;
917
1149
  }[data-player] {
918
1150
  --bottom-panel: 40px;
919
1151
  }
@@ -1535,183 +1767,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1535
1767
  100% {
1536
1768
  color: #B80000;
1537
1769
  }
1538
- }.player-poster {
1539
- display: flex;
1540
- justify-content: center;
1541
- align-items: center;
1542
- position: absolute;
1543
- height: 100%;
1544
- width: 100%;
1545
- z-index: 998;
1546
- top: 0;
1547
- left: 0;
1548
- background-color: #000;
1549
- background-size: cover;
1550
- background-repeat: no-repeat;
1551
- background-position: 50% 50%;
1552
- }
1553
- .player-poster.clickable {
1554
- cursor: pointer;
1555
- }
1556
- .player-poster:hover .play-wrapper {
1557
- opacity: 1;
1558
- }
1559
- .player-poster .play-wrapper {
1560
- width: 100%;
1561
- height: 25%;
1562
- margin: 0 auto;
1563
- opacity: 0.75;
1564
- transition: opacity 0.1s ease;
1565
- }
1566
- .player-poster .play-wrapper svg {
1567
- height: 100%;
1568
- display: inline;
1569
- }
1570
- .player-poster .play-wrapper svg path {
1571
- fill: #fff;
1572
- }.quality-levels li.disabled {
1573
- opacity: 0.5;
1574
- pointer-events: none;
1575
- }
1576
- .quality-levels li.current {
1577
- background-color: #000;
1578
- }.seek-time {
1579
- position: absolute;
1580
- white-space: nowrap;
1581
- height: 20px;
1582
- line-height: 20px;
1583
- font-size: 0;
1584
- left: -100%;
1585
- bottom: 55px;
1586
- background-color: rgba(2, 2, 2, 0.5);
1587
- z-index: 9999;
1588
- transition: opacity 0.1s ease;
1589
- }
1590
- .seek-time.hidden {
1591
- opacity: 0;
1592
- }
1593
- .seek-time .seek-time__pos {
1594
- display: inline-block;
1595
- color: white;
1596
- font-size: 10px;
1597
- padding-left: 7px;
1598
- padding-right: 7px;
1599
- vertical-align: top;
1600
- }
1601
- .seek-time .seek-time__duration {
1602
- display: inline-block;
1603
- color: rgba(255, 255, 255, 0.5);
1604
- font-size: 10px;
1605
- padding-right: 7px;
1606
- vertical-align: top;
1607
- }
1608
- .seek-time .seek-time__duration::before {
1609
- content: "|";
1610
- margin-right: 7px;
1611
- }.share_plugin[data-share] {
1612
- pointer-events: auto;
1613
- z-index: 5;
1614
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1615
- }
1616
- .share_plugin[data-share].share-hide .share-button-container {
1617
- right: -50px;
1618
- }
1619
- .share_plugin[data-share] .share-button-container {
1620
- cursor: pointer;
1621
- width: 36px;
1622
- height: 36px;
1623
- background-color: rgba(74, 74, 74, 0.6);
1624
- border-radius: 4px;
1625
- position: absolute;
1626
- right: 10px;
1627
- top: 10px;
1628
- padding-top: 6px;
1629
- transition: all 0.3s ease-out;
1630
- }
1631
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1632
- background-color: transparent;
1633
- border: 0;
1634
- margin: 0 6px;
1635
- padding: 0;
1636
- cursor: pointer;
1637
- display: inline-block;
1638
- width: 19px;
1639
- height: 20px;
1640
- }
1641
- .share_plugin[data-share] .share-container {
1642
- pointer-events: auto;
1643
- position: absolute;
1644
- width: 280px;
1645
- background-color: white;
1646
- transform: translate(0, 50%);
1647
- transform: translate(-50%, -50%);
1648
- left: 50%;
1649
- /* margin-left: -140px; */
1650
- top: calc(50% - 20px);
1651
- /* margin-top: -170px; */
1652
- }
1653
- .share_plugin[data-share] .share-container .share-container-header {
1654
- text-align: left;
1655
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1656
- }
1657
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1658
- display: inline-block;
1659
- font-size: 16px;
1660
- margin: 5px;
1661
- }
1662
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1663
- display: inline-block;
1664
- width: 24px;
1665
- float: right;
1666
- margin: 5px;
1667
- cursor: pointer;
1668
- }
1669
- .share_plugin[data-share] .share-container .share-container-main {
1670
- margin-bottom: 8px;
1671
- }
1672
- .share_plugin[data-share] .share-container .share-container-main > div {
1673
- text-align: left;
1674
- font-size: 14px;
1675
- padding: 5px;
1676
- }
1677
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--link, .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1678
- overflow: hidden;
1679
- text-overflow: ellipsis;
1680
- color: #818181;
1681
- border: solid 1px #d3d3d3;
1682
- width: calc(100% - 10px);
1683
- padding: 5px;
1684
- }
1685
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1686
- max-height: 90px;
1687
- resize: none;
1688
- }
1689
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1690
- width: 32px;
1691
- display: inline-block;
1692
- margin-right: 5px;
1693
- cursor: pointer;
1694
- }.container-with-poster-clickable .mc-skip-time {
1695
- height: 0;
1696
- }
1697
-
1698
- .mc-skip-time {
1699
- position: absolute;
1700
- width: 100%;
1701
- height: calc(100% - 50px);
1702
- z-index: 9998;
1703
- background-color: transparent;
1704
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1705
- }
1706
- .mc-skip-time .skip-container {
1707
- width: 100%;
1708
- height: 100%;
1709
- display: flex;
1710
- justify-content: space-between;
1711
- }
1712
- .mc-skip-time .skip-container .skip-item {
1713
- flex: 1 0 0px;
1714
- height: 100%;
1715
1770
  }.spinner-three-bounce[data-spinner] {
1716
1771
  position: absolute;
1717
1772
  width: 70px;
@@ -1750,67 +1805,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1750
1805
  40% {
1751
1806
  transform: scale(1);
1752
1807
  }
1753
- }.media-control-skin-1 .media-control-cc button.media-control-button {
1754
- display: flex;
1755
- justify-content: center;
1756
- padding: 0;
1757
- align-items: center;
1758
- vertical-align: top;
1759
- }
1760
- .media-control-skin-1 .media-control-cc button.media-control-button:hover {
1761
- color: white;
1762
- }
1763
- .media-control-skin-1 .media-control-cc ul li {
1764
- text-align: center;
1765
- }
1766
- .media-control-skin-1 .media-control-cc ul li a {
1767
- height: 30px;
1768
- padding: 5px 10px;
1769
- color: #fffffe;
1770
- }
1771
- .media-control-skin-1 .media-control-cc ul li a:hover {
1772
- background-color: rgba(0, 0, 0, 0.4);
1773
- }
1774
- .media-control-skin-1 .media-control-cc ul li.current a {
1775
- background-color: rgba(0, 0, 0, 0.4);
1776
- }
1777
- .media-control-skin-1 .media-control-cc ul li:first-child a {
1778
- border-bottom-left-radius: 4px;
1779
- border-bottom-right-radius: 4px;
1780
- }
1781
- .media-control-skin-1 .media-control-cc ul li:last-child a {
1782
- border-top-left-radius: 4px;
1783
- border-top-right-radius: 4px;
1784
- }
1785
- .media-control-skin-1 .media-control-cc {
1786
- position: relative;
1787
- order: 85;
1788
- }
1789
-
1790
- ::cue {
1791
- visibility: hidden !important;
1792
- font-size: 0 !important;
1793
- }
1794
-
1795
- .ios-fullscreen::cue {
1796
- visibility: visible !important;
1797
- font-size: 1em !important;
1798
- }
1799
-
1800
- .container .gplayer-cc-line {
1801
- position: absolute;
1802
- bottom: calc(var(--bottom-panel) + 5px);
1803
- width: 100%;
1804
- transition: transform 0.3s ease-out;
1805
- }
1806
- .container .gplayer-cc-line.media-control-cc-pulled {
1807
- transform: translateY(var(--bottom-panel));
1808
- }
1809
- .container .gplayer-cc-line p {
1810
- width: auto;
1811
- background-color: rgba(0, 0, 0, 0.4);
1812
- color: white;
1813
- display: inline-block;
1814
1808
  }.scrub-thumbnails {
1815
1809
  position: absolute;
1816
1810
  bottom: 52px;
@@ -1874,6 +1868,12 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1874
1868
  }
1875
1869
  .scrub-thumbnails .backdrop .carousel img {
1876
1870
  width: auto;
1871
+ }.quality-levels li.disabled {
1872
+ opacity: 0.5;
1873
+ pointer-events: none;
1874
+ }
1875
+ .quality-levels li.current {
1876
+ background-color: #000;
1877
1877
  }.player-logo[data-logo] {
1878
1878
  position: absolute;
1879
1879
  z-index: 2;