@npo/player 1.15.2 → 1.16.0

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 (33) hide show
  1. package/lib/js/playeractions/handlers/processplayerconfig.js +1 -0
  2. package/lib/js/playeractions/handlers/processplayerconfig.js.map +1 -1
  3. package/lib/js/ui/components/ctabar.d.ts +2 -1
  4. package/lib/js/ui/components/ctabar.js +9 -7
  5. package/lib/js/ui/components/ctabar.js.map +1 -1
  6. package/lib/js/ui/uicontainer.js +3 -2
  7. package/lib/js/ui/uicontainer.js.map +1 -1
  8. package/lib/js/utilities/utilities.d.ts +1 -0
  9. package/lib/js/utilities/utilities.js +6 -1
  10. package/lib/js/utilities/utilities.js.map +1 -1
  11. package/lib/js/utilities/utilities.test.js +33 -1
  12. package/lib/js/utilities/utilities.test.js.map +1 -1
  13. package/lib/npoplayer.d.ts +1 -0
  14. package/lib/npoplayer.js +12 -4
  15. package/lib/npoplayer.js.map +1 -1
  16. package/lib/package.json +1 -1
  17. package/lib/src/js/ui/components/ctabar.d.ts +2 -1
  18. package/lib/src/js/utilities/utilities.d.ts +1 -0
  19. package/lib/src/npoplayer.d.ts +1 -0
  20. package/package.json +1 -1
  21. package/src/scss/components/_advert.scss +69 -12
  22. package/src/scss/components/_replay.scss +2 -2
  23. package/src/scss/components/_seekbar.scss +8 -0
  24. package/src/scss/components/audio/_bottombar.scss +10 -3
  25. package/src/scss/components/audio/_metadata.scss +1 -1
  26. package/src/scss/components/audio/_playbutton.scss +30 -49
  27. package/src/scss/components/audio/_seekbar.scss +2 -0
  28. package/src/scss/components/audio/_topbar.scss +0 -15
  29. package/src/scss/components/audio/_vars.scss +1 -1
  30. package/src/scss/components/audio/_volumeslider.scss +2 -1
  31. package/src/scss/npoplayer.css +33 -25
  32. package/src/scss/variants/_player-large.scss +10 -0
  33. package/src/scss/vars/_icons.scss +1 -0
package/src/scss/components/audio/_playbutton.scss CHANGED
@@ -1,66 +1,47 @@
1
- .bmpui-ui-playbacktoggle-overlay {
2
- display: none;
3
- animation: none;
4
- }
5
-
6
- &.bmpui-player-state-playing,
7
- &.bmpui-player-state-paused,
8
- &.bmpui-player-state-idle,
9
- &.bmpui-player-state-prepared,
10
- &.bmpui-player-state-finished {
11
- .bmpui-ui-playbacktoggle-overlay {
12
- display: block;
13
- animation: none;
14
- }
15
- }
16
-
17
- .bmpui-ui-playbacktoggle-overlay {
18
- opacity: 1;
1
+ .bmpui-ui-playbacktogglebutton {
19
2
  width: 64px;
20
3
  height: 64px;
4
+ position: absolute;
21
5
  top: $player-spacing;
22
6
  margin-top: $player-spacing-inner;
23
7
  left: $player-spacing-left;
24
-
25
- .bmpui-ui-hugeplaybacktogglebutton {
26
- padding: 0;
27
-
28
- .bmpui-image {
29
- &::before {
30
- top: 0;
31
- left: 0;
32
- width: 100%;
33
- height: 100%;
34
- background-color: var(--npo-player-primarycolor);
35
- }
36
-
37
- &::after {
38
- background-color: var(--npo-audio-player-background-color);
39
- }
40
- }
41
-
42
- &.bmpui-on .bmpui-image {
43
- animation: none;
44
- transition: none;
45
- visibility: visible;
46
-
47
- &:after {
48
- mask-image: var(--npo-player-icon-pause);
49
- }
50
- }
8
+ mask-image: none;
9
+ border-radius: 50%;
10
+
11
+ &::before {
12
+ content: '';
13
+ position: absolute;
14
+ background-color: var(--npo-audio-player-background-color);
15
+ width: 100%;
16
+ height: 100%;
17
+ top: 0;
18
+ left: 0;
19
+ mask-image: var(--npo-player-icon-play);
20
+ mask-size: 36px;
21
+ mask-position: 50% 50%;
22
+ mask-repeat: no-repeat;
51
23
  }
24
+
25
+ &.bmpui-on::before {
26
+ mask-image: var(--npo-player-icon-pause);
27
+ }
52
28
  }
53
29
 
54
30
  &.bmpui-layout-max-width-400 {
55
- .bmpui-ui-playbacktoggle-overlay {
31
+ .bmpui-ui-playbacktogglebutton {
56
32
  width: 36px;
57
33
  height: 36px;
58
34
  left: 90px;
59
35
  margin-top: 7px;
60
36
 
61
- .bmpui-image::after {
62
- width: 60px;
63
- height: 60px;
37
+ &::before {
38
+ mask-size: 24px;
64
39
  }
65
40
  }
41
+ }
42
+
43
+ &.bmpui-player-state-finished {
44
+ .bmpui-ui-playbacktogglebutton::before {
45
+ mask-image: var(--npo-player-icon-replay);
46
+ }
66
47
  }
package/src/scss/components/audio/_seekbar.scss CHANGED
@@ -8,6 +8,8 @@
8
8
  }
9
9
 
10
10
  .bmpui-ui-seekbar {
11
+ display: block;
12
+
11
13
  .bmpui-seekbar {
12
14
  .bmpui-seekbar-playbackposition-marker {
13
15
  background-color: var(--npo-player-primarycolor);
package/src/scss/components/audio/_topbar.scss CHANGED
@@ -1,18 +1,3 @@
1
- // hide when not ready yet
2
- .bmpui-controlbar-top {
3
- display: none;
4
- }
5
-
6
- &.bmpui-player-state-playing,
7
- &.bmpui-player-state-paused,
8
- &.bmpui-player-state-idle,
9
- &.bmpui-player-state-prepared,
10
- &.bmpui-player-state-finished {
11
- .bmpui-controlbar-top {
12
- display: block;
13
- }
14
- }
15
-
16
1
  .bmpui-ui-controlbar-top,
17
2
  .bmpui-ui-titlebar {
18
3
  background: none;
package/src/scss/components/audio/_vars.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  $player-height: 160px;
2
- $player-height-small: 135px;
2
+ $player-height-small: 120px;
3
3
  $player-spacing: 20px;
4
4
  $player-spacing-inner: 15px;
5
5
  $player-spacing-left: 160px;
package/src/scss/components/audio/_volumeslider.scss CHANGED
@@ -28,7 +28,8 @@
28
28
  }
29
29
  }
30
30
 
31
- &.bmpui-layout-max-width-400 {
31
+ &.bmpui-layout-max-width-400,
32
+ &.bmpui-layout-max-width-600 {
32
33
  .bmpui-ui-volumetogglebutton {
33
34
  margin: 0;
34
35
  }