@npo/player 1.20.4 → 1.21.1

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 (84) hide show
  1. package/README.md +5 -0
  2. package/lib/js/api/getstreamobject.test.js +2 -2
  3. package/lib/js/markers/updateLiveMarkers.d.ts +4 -0
  4. package/lib/js/markers/updateLiveMarkers.js +21 -0
  5. package/lib/js/markers/updateLiveMarkers.test.d.ts +1 -0
  6. package/lib/js/markers/updateLiveMarkers.test.js +53 -0
  7. package/lib/js/playeractions/handlers/error.d.ts +2 -2
  8. package/lib/js/playeractions/handlers/processsourceconfig.d.ts +1 -1
  9. package/lib/js/playeractions/handlers/processsourceconfig.js +7 -7
  10. package/lib/js/ui/components/adbutton.js +1 -1
  11. package/lib/js/ui/components/buttons.js +2 -2
  12. package/lib/js/ui/components/nativemobile/buttons.d.ts +7 -1
  13. package/lib/js/ui/components/nativemobile/buttons.js +27 -4
  14. package/lib/js/ui/components/nativemobile/controlbar.js +1 -2
  15. package/lib/js/ui/components/nativemobile/playnext.d.ts +2 -1
  16. package/lib/js/ui/components/nativemobile/playnext.js +5 -4
  17. package/lib/js/ui/components/settingspanel.js +30 -23
  18. package/lib/js/ui/components/shared/playnextscreen.d.ts +2 -2
  19. package/lib/js/ui/components/shared/playnextscreen.js +14 -2
  20. package/lib/js/ui/components/shared/playnextstreen.test.d.ts +6 -0
  21. package/lib/js/ui/components/shared/playnextstreen.test.js +56 -0
  22. package/lib/js/ui/handlers/accessibilityhandler.js +26 -2
  23. package/lib/js/ui/handlers/accessibilityhandler.test.d.ts +1 -0
  24. package/lib/js/ui/handlers/accessibilityhandler.test.js +63 -0
  25. package/lib/js/ui/handlers/domhandlers.d.ts +3 -0
  26. package/lib/js/ui/handlers/domhandlers.js +7 -0
  27. package/lib/js/ui/handlers/domhandlers.test.d.ts +1 -0
  28. package/lib/js/ui/handlers/domhandlers.test.js +49 -0
  29. package/lib/js/ui/handlers/nicamhandler.js +1 -1
  30. package/lib/js/ui/handlers/streamhandler.js +4 -4
  31. package/lib/js/ui/nativemobileuicontainer.js +5 -5
  32. package/lib/js/ui/nativemobileuifactory.js +82 -42
  33. package/lib/js/ui/nativemobileuifactory.test.d.ts +1 -0
  34. package/lib/js/ui/nativemobileuifactory.test.js +66 -0
  35. package/lib/js/ui/uicontainer.js +4 -3
  36. package/lib/js/utilities/utilities.d.ts +3 -0
  37. package/lib/js/utilities/utilities.js +9 -0
  38. package/lib/lang/nl.json +1 -1
  39. package/lib/npoplayer-bridge.test.d.ts +1 -0
  40. package/lib/npoplayer-bridge.test.js +23 -0
  41. package/lib/npoplayer.d.ts +2 -1
  42. package/lib/npoplayer.js +13 -4
  43. package/lib/npoplayer.test.js +4 -4
  44. package/lib/package.json +3 -2
  45. package/lib/src/js/markers/updateLiveMarkers.d.ts +4 -0
  46. package/lib/src/js/markers/updateLiveMarkers.test.d.ts +1 -0
  47. package/lib/src/js/playeractions/handlers/error.d.ts +2 -2
  48. package/lib/src/js/playeractions/handlers/processsourceconfig.d.ts +1 -1
  49. package/lib/src/js/ui/components/nativemobile/buttons.d.ts +7 -1
  50. package/lib/src/js/ui/components/nativemobile/playnext.d.ts +2 -1
  51. package/lib/src/js/ui/components/shared/playnextscreen.d.ts +2 -2
  52. package/lib/src/js/ui/components/shared/playnextstreen.test.d.ts +6 -0
  53. package/lib/src/js/ui/handlers/accessibilityhandler.test.d.ts +1 -0
  54. package/lib/src/js/ui/handlers/domhandlers.d.ts +3 -0
  55. package/lib/src/js/ui/handlers/domhandlers.test.d.ts +1 -0
  56. package/lib/src/js/ui/nativemobileuifactory.test.d.ts +1 -0
  57. package/lib/src/js/utilities/utilities.d.ts +3 -0
  58. package/lib/src/npoplayer-bridge.test.d.ts +1 -0
  59. package/lib/src/npoplayer.d.ts +2 -1
  60. package/lib/src/types/interfaces.d.ts +26 -2
  61. package/lib/tests/mocks/mockNpoplayer.js +4 -1
  62. package/lib/types/interfaces.d.ts +26 -2
  63. package/lib/types/interfaces.js +12 -2
  64. package/package.json +3 -2
  65. package/src/scss/components/_advert.scss +34 -68
  66. package/src/scss/components/_hugeplaybacktogglebutton.scss +11 -0
  67. package/src/scss/components/_icons.scss +50 -40
  68. package/src/scss/components/_nicam.scss +9 -2
  69. package/src/scss/components/_playnext.scss +5 -1
  70. package/src/scss/components/_replay.scss +1 -1
  71. package/src/scss/components/_seekbar.scss +13 -0
  72. package/src/scss/components/_settingspanel.scss +37 -12
  73. package/src/scss/components/_textbuttons.scss +12 -11
  74. package/src/scss/components/_volumeslider.scss +5 -0
  75. package/src/scss/components/audio/_playbutton.scss +6 -0
  76. package/src/scss/components/audio/_volumeslider.scss +6 -1
  77. package/src/scss/npoplayer.css +85 -56
  78. package/src/scss/npoplayer.scss +3 -0
  79. package/src/scss/variants/_player-base.scss +1 -9
  80. package/src/scss/variants/_player-large.scss +20 -0
  81. package/src/scss/variants/_player-medium.scss +31 -1
  82. package/src/scss/variants/_player-native-mobile.scss +4 -0
  83. package/src/scss/variants/_player-small.scss +41 -8
  84. package/src/scss/vars/_colors.scss +1 -0
package/src/scss/npoplayer.scss CHANGED
@@ -2,6 +2,9 @@
2
2
 
3
3
  $cdn: 'https://cdn.npoplayer.nl/assets/';
4
4
 
5
+ // mixins
6
+ @import './mixins/focus';
7
+
5
8
  // Colors
6
9
  @import './vars/colors';
7
10
 
package/src/scss/variants/_player-base.scss CHANGED
@@ -54,21 +54,13 @@
54
54
  }
55
55
  }
56
56
 
57
- &.bmpui-player-state-paused {
58
- &.bmpui-controls-shown {
59
- .bmpui-ui-hugeplaybacktogglebutton {
60
- visibility: hidden;
61
- }
62
- }
63
- }
64
-
65
57
  &.livestream-no-dvr {
66
58
  .bmpui-ui-rewindbutton,
67
59
  .bmpui-ui-forwardbutton {
68
60
  display: none;
69
61
  }
70
62
 
71
- .bmpui-ui-playbacktogglebutton.bmpui-on {
63
+ .bmpui-ui-playbacktogglebutton.bmpui-on .bmpui-label {
72
64
  mask-image: var(--npo-player-icon-stop);
73
65
  }
74
66
  }
package/src/scss/variants/_player-large.scss CHANGED
@@ -31,6 +31,16 @@
31
31
  padding-bottom: 140px;
32
32
  }
33
33
 
34
+ .bmpui-ui-textbutton {
35
+ height: 48px;
36
+ padding: 14px 20px;
37
+ border-radius: 10px;
38
+
39
+ .bmpui-label {
40
+ font-size: 16px;
41
+ }
42
+ }
43
+
34
44
  &.bmpui-ster-ad {
35
45
  .bmpui-ui-controlbar .bmpui-controlbar-bottom {
36
46
  display: block !important;
@@ -51,4 +61,14 @@
51
61
  padding-bottom: 130px;
52
62
  }
53
63
  }
64
+
65
+ .bmpui-ui-settings-panel {
66
+ bottom: 88px;
67
+ }
68
+
69
+ .bmpui-controlbar-textbuttons {
70
+ &::before {
71
+ height: 144px;
72
+ }
73
+ }
54
74
  }
package/src/scss/variants/_player-medium.scss CHANGED
@@ -28,4 +28,34 @@
28
28
  padding-bottom: 106px;
29
29
  }
30
30
  }
31
- }
31
+
32
+ .bmpui-ui-textbutton {
33
+ height: 40px;
34
+ padding: 11px 16px;
35
+ border-radius: 10px;
36
+
37
+ .bmpui-label {
38
+ font-size: 14px;
39
+ }
40
+ }
41
+
42
+ .bmpui-controlbar-textbuttons {
43
+ &::before {
44
+ height: 112px;
45
+ }
46
+ }
47
+ }
48
+
49
+ .bmpui-npo-player.bmpui-layout-max-width-1200 {
50
+ .bmpui-adLabel {
51
+ top: 26px;
52
+ left: 24px;
53
+ }
54
+
55
+ .bmpui-controlbar-textbuttons {
56
+ &::before {
57
+ height: 144px;
58
+ }
59
+ }
60
+ }
61
+
package/src/scss/variants/_player-native-mobile.scss CHANGED
@@ -2,4 +2,8 @@
2
2
  .bmpui-seekbar-playbackposition-marker {
3
3
  margin-top: -1px;
4
4
  }
5
+ .bmpui-overlay-playnext {
6
+ background-color: none;
7
+ bottom: 25%;
8
+ }
5
9
  }
package/src/scss/variants/_player-small.scss CHANGED
@@ -17,6 +17,15 @@
17
17
  align-items: center;
18
18
  width: 100%;
19
19
  }
20
+
21
+ button {
22
+ padding: 0;
23
+ }
24
+
25
+ .bmpui-label {
26
+ width: 24px;
27
+ height: 24px;
28
+ }
20
29
  }
21
30
 
22
31
  .bmpui-setting-header {
@@ -87,14 +96,6 @@
87
96
  }
88
97
  }
89
98
 
90
- &.bmpui-player-state-paused {
91
- &.bmpui-controls-hidden {
92
- .bmpui-ui-playbacktoggle-overlay {
93
- display: unset;
94
- }
95
- }
96
- }
97
-
98
99
  .bmpui-ui-subtitle-overlay.bmpui-controlbar-visible {
99
100
  bottom: 1.5em;
100
101
  }
@@ -104,4 +105,36 @@
104
105
  padding-bottom: 40px;
105
106
  }
106
107
  }
108
+
109
+ .bmpui-controlbar-middle {
110
+ .bmpui-ui-rewindbutton,
111
+ .bmpui-ui-forwardbutton,
112
+ .bmpui-ui-playbacktogglebutton {
113
+ width: 40px;
114
+ height: 40px;
115
+ padding: 0;
116
+
117
+ &:focus-visible {
118
+ @include focusStyle(2px);
119
+ border-radius: 2px;
120
+ }
121
+
122
+ .bmpui-label {
123
+ display: block;
124
+ width: 40px;
125
+ height: 40px;
126
+ }
127
+ }
128
+ }
129
+ }
130
+
131
+ .bmpui-npo-player.bmpui-layout-max-width-400 {
132
+ .bmpui-adLabel {
133
+ font-size: 13px;
134
+
135
+ &::before {
136
+ height: 38px;
137
+ width: 32px;
138
+ }
139
+ }
107
140
  }
package/src/scss/vars/_colors.scss CHANGED
@@ -16,6 +16,7 @@
16
16
  --npo-player-graycolor-dark: #030e1e;
17
17
  --npo-player-iconcolor: #fff;
18
18
  --npo-player-iconcolor-active: var(--npo-player-primarycolor);
19
+ --npo-player-focuscolor: #fff;
19
20
  --npo-player-seekbar-marker: #fff;
20
21
  --npo-player-seekbar-background: #fff;
21
22
  --npo-player-seekbar-playbackposition-background: linear-gradient(90deg, var(--npo-player-primarycolor) 0%, var(--npo-player-primarycolor-light) 100%);