@npo/player 1.13.2 → 1.15.0

package/lib/src/js/drm/{verifydrm.d.ts → handlers/verifydrm.d.ts}

@@ -1,4 +1,4 @@
-import type NpoPlayer from '../../npoplayer';
-import { type ApiPayload } from '../../types/interfaces';
+import type NpoPlayer from '../../../npoplayer';
+import { type ApiPayload } from '../../../types/interfaces';
 import type { PlayerAPI } from 'bitmovin-player';
 export declare function verifyDRM(npoplayer: NpoPlayer, player: PlayerAPI, payload: ApiPayload): Promise<void>;

package/lib/src/js/playeractions/handlers/mediasessionactions.d.ts

@@ -0,0 +1,2 @@
+import { PlayerAPI, SourceConfig } from "bitmovin-player";
+export declare function setupMediaSessionActionHandlers(player: PlayerAPI, sourceConfig: SourceConfig, _streamObject: any): void;

package/lib/src/js/playeractions/handlers/processsourceconfig.d.ts

@@ -0,0 +1,3 @@
+import { StreamObject } from 'types/interfaces';
+import { SourceConfig } from 'bitmovin-player';
+export declare function processSourceConfig(_sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm?: string | null): SourceConfig;

package/lib/src/js/playeractions/playeractions.d.ts

@@ -2,3 +2,4 @@ export { resolveKeyPress } from "./handlers/resolvekeypress";
 export { handleStartOffset, handleLiveOffsetLogic, shiftToProgramStart } from "./handlers/handleoffsets";
 export { handlePlayerError } from "./handlers/error";
 export { processPlayerConfig } from "./handlers/processplayerconfig";
+export { processSourceConfig } from "./handlers/processsourceconfig";

package/lib/src/js/ui/components/audio/controlbar.d.ts

@@ -0,0 +1,3 @@
+import { ControlBar } from 'bitmovin-player-ui';
+import type NpoPlayer from '../../../../npoplayer';
+export declare function createAudioControlBar(npoplayer: NpoPlayer): ControlBar;

package/lib/src/js/ui/components/nativemobile/buttons.d.ts

@@ -20,8 +20,8 @@ export declare function createGoBackLiveButton(player: PlayerAPI): Button<{
 }>;
 export declare function createSettingsButton(settingsPanel: SettingsPanel): SettingsToggleButton;
 export declare function createPlaybackToggleButton(): PlaybackToggleButton;
-export declare function createVolumeToggleButton(): VolumeToggleButton;
-export declare function createPictureInPictureToggleButton(): PictureInPictureToggleButton;
+export declare function createVolumeToggleButton(player: PlayerAPI): VolumeToggleButton;
+export declare function createPictureInPictureToggleButton(player: PlayerAPI): PictureInPictureToggleButton;
 export declare function createAirPlayToggleButton(): AirPlayToggleButton;
 export declare function createCastToggleButton(): CastToggleButton;
-export declare function createFullscreenToggleButton(): FullscreenToggleButton;
+export declare function createFullscreenToggleButton(player: PlayerAPI): FullscreenToggleButton;

package/lib/src/js/ui/components/seekbar.d.ts

@@ -0,0 +1,6 @@
+import { Container, PlaybackTimeLabel, SeekBar } from 'bitmovin-player-ui';
+import type NpoPlayer from '../../../npoplayer';
+export declare function createSeekBar(npoplayer: NpoPlayer): Container<{
+    components: (PlaybackTimeLabel | SeekBar)[];
+    cssClasses: string[];
+}>;

package/lib/src/js/ui/nativemobileuicontainer.d.ts

@@ -1,5 +1,5 @@
 import { UIContainer } from 'bitmovin-player-ui';
 import { PlayerAPI } from 'bitmovin-player';
 import { CustomMessageHandlerInterface, CustomMessages } from '../../types/interfaces';
-export declare function sendCustomMessage(message: CustomMessages, data?: CustomMessageHandlerInterface): any;
+export declare function sendCustomMessage(message: CustomMessages, data?: CustomMessageHandlerInterface): CustomMessageHandlerInterface;
 export declare function nativeMobileUIContainer(player: PlayerAPI): UIContainer;

package/lib/src/js/ui/uicontainer.d.ts

@@ -1,4 +1,5 @@
 import type NpoPlayer from '../../npoplayer';
 import { UIContainer } from 'bitmovin-player-ui';
 import { PlayerAPI } from 'bitmovin-player';
-export declare function createUIContainer(npoplayer: NpoPlayer, player: PlayerAPI, variant: string): UIContainer;
+import { NpoPlayerUIVariants } from '../../types/interfaces';
+export declare function createUIContainer(npoplayer: NpoPlayer, player: PlayerAPI, variant: NpoPlayerUIVariants, container: HTMLElement): UIContainer;

package/lib/src/npoplayer.d.ts

@@ -3,7 +3,8 @@ import { type InitialisationProps } from '@npotag/tag/dist/types/src/npoTag';
 import { type PlayerAPI, type PlayerConfig, type SourceConfig } from 'bitmovin-player';
 import { UIManager } from 'bitmovin-player-ui';
 import { LogEmitter } from './types/classes';
-import { type DRMProfile, type ApiPayload, type Fragments, type NPOTagObject, type Profile, type Section, type StreamObject, type StreamOptions, type UIComponents } from './types/interfaces';
+import { type DRMProfile, type ApiPayload, type Fragments, type NPOTagObject, type Section, type StreamObject, type StreamOptions, type UIComponents, NpoPlayerUIVariants } from './types/interfaces';
+export { type PlayerConfig, type InitialisationProps, type NPOTagObject, type StreamOptions, NpoPlayerUIVariants, };
 export default class NpoPlayer {
     playerConfig: PlayerConfig;
     sourceConfig: SourceConfig;
@@ -22,13 +23,12 @@ export default class NpoPlayer {
     adBreakActive: boolean;
     version: string;
     drmProfile: DRMProfile;
-    constructor(_container: HTMLElement, _playerConfig: PlayerConfig, _npotag?: InitialisationProps | null, _npotaginstance?: NPOTag);
-    initPlayer(_container: HTMLElement, playerConfig: PlayerConfig): void;
+    variant: NpoPlayerUIVariants;
+    constructor(_container: HTMLElement, _playerConfig: PlayerConfig, _npotag?: InitialisationProps | null, _npotaginstance?: NPOTag | undefined, _variant?: NpoPlayerUIVariants);
+    initPlayer(_container: HTMLElement, playerConfig: PlayerConfig, variant: NpoPlayerUIVariants): void;
     loadStream(source: string, options?: StreamOptions): Promise<void>;
-    createUIManager(player: PlayerAPI, variant: string): Promise<void>;
+    createUIManager(player: PlayerAPI, variant: NpoPlayerUIVariants): Promise<void>;
     setFragments(fragments: Fragments): Promise<void>;
-    decideProfile(preferredDRM?: string): Promise<Profile>;
-    processSourceConfig(_sourceConfig: SourceConfig | undefined, _streamObject: StreamObject, drm?: string | null): SourceConfig;
     doError(input: any, status?: number): void;
     keyPress(e: KeyboardEvent): void;
     setVolume(volume: number): void;
@@ -42,5 +42,4 @@ export default class NpoPlayer {
     doPlayNext(): void;
     destroy(): boolean;
     unload(): boolean;
-    isFairPlayDrmSupported(ks?: any): boolean;
 }

package/lib/src/types/interfaces.d.ts

@@ -30,6 +30,7 @@ interface StreamObject_Stream {
     drmToken?: string;
     drmType: string;
     streamProfile: string;
+    sourceProfile: string;
     streamURL: string;
     isLiveStream?: boolean;
     hasDvrWindow?: boolean;
@@ -125,4 +126,9 @@ export declare enum CustomMessages {
     TOGGLE_PLAY_PAUSE = "togglePlayPause",
     TOGGLE_SETTINGS_PANEL = "toggleSettingsPanel"
 }
+export declare enum NpoPlayerUIVariants {
+    DEFAULT = "default",
+    AUDIO = "audio",
+    AD = "ad"
+}
 export {};

package/lib/types/interfaces.d.ts

@@ -30,6 +30,7 @@ interface StreamObject_Stream {
     drmToken?: string;
     drmType: string;
     streamProfile: string;
+    sourceProfile: string;
     streamURL: string;
     isLiveStream?: boolean;
     hasDvrWindow?: boolean;
@@ -125,4 +126,9 @@ export declare enum CustomMessages {
     TOGGLE_PLAY_PAUSE = "togglePlayPause",
     TOGGLE_SETTINGS_PANEL = "toggleSettingsPanel"
 }
+export declare enum NpoPlayerUIVariants {
+    DEFAULT = "default",
+    AUDIO = "audio",
+    AD = "ad"
+}
 export {};

package/lib/types/interfaces.js

@@ -15,4 +15,10 @@ export var CustomMessages;
     CustomMessages["TOGGLE_PLAY_PAUSE"] = "togglePlayPause";
     CustomMessages["TOGGLE_SETTINGS_PANEL"] = "toggleSettingsPanel";
 })(CustomMessages || (CustomMessages = {}));
+export var NpoPlayerUIVariants;
+(function (NpoPlayerUIVariants) {
+    NpoPlayerUIVariants["DEFAULT"] = "default";
+    NpoPlayerUIVariants["AUDIO"] = "audio";
+    NpoPlayerUIVariants["AD"] = "ad";
+})(NpoPlayerUIVariants || (NpoPlayerUIVariants = {}));
 //# sourceMappingURL=interfaces.js.map

package/lib/types/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/types/interfaces.ts"],"names":[],"mappings":"AAmIA,MAAM,CAAN,IAAY,cAeX;AAfD,WAAY,cAAc;IACtB,gDAA8B,CAAA;IAC9B,6DAA2C,CAAA;IAC3C,mDAAiC,CAAA;IACjC,gEAA8C,CAAA;IAC9C,6CAA2B,CAAA;IAC3B,sDAAoC,CAAA;IACpC,mDAAiC,CAAA;IACjC,kDAAgC,CAAA;IAChC,wDAAsC,CAAA;IACtC,6DAA2C,CAAA;IAC3C,4CAA0B,CAAA;IAC1B,0CAAwB,CAAA;IACxB,uDAAqC,CAAA;IACrC,+DAA6C,CAAA;AACjD,CAAC,EAfW,cAAc,KAAd,cAAc,QAezB"}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/types/interfaces.ts"],"names":[],"mappings":"AAoIA,MAAM,CAAN,IAAY,cAeX;AAfD,WAAY,cAAc;IACtB,gDAA8B,CAAA;IAC9B,6DAA2C,CAAA;IAC3C,mDAAiC,CAAA;IACjC,gEAA8C,CAAA;IAC9C,6CAA2B,CAAA;IAC3B,sDAAoC,CAAA;IACpC,mDAAiC,CAAA;IACjC,kDAAgC,CAAA;IAChC,wDAAsC,CAAA;IACtC,6DAA2C,CAAA;IAC3C,4CAA0B,CAAA;IAC1B,0CAAwB,CAAA;IACxB,uDAAqC,CAAA;IACrC,+DAA6C,CAAA;AACjD,CAAC,EAfW,cAAc,KAAd,cAAc,QAezB;AAED,MAAM,CAAN,IAAY,mBAIX;AAJD,WAAY,mBAAmB;IAC3B,0CAAmB,CAAA;IACnB,sCAAe,CAAA;IACf,gCAAS,CAAA;AACb,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.13.2",
+  "version": "1.15.0",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -81,8 +81,8 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@npotag/tag": "^2.1.0",
-    "bitmovin-player": "^8.125.0",
+    "@npotag/tag": "^3.0.0",
+    "bitmovin-player": "8.125.0",
     "bitmovin-player-ui": "^3.48.0"
   },
   "browserslist": [

package/src/scss/components/_audio.scss

@@ -0,0 +1,4 @@
+.bitmovinplayer-container.bitmovinplayer-audio-container {
+  height: 100px;
+  min-height: 100px;
+}

package/src/scss/components/_buffering.scss

@@ -1,42 +1,49 @@
 .bmpui-ui-buffering-overlay {
-    background-color: var(--npo-player-bufferingcolor);
-    display: block;
+  background-color: var(--npo-player-bufferingcolor);
+  display: block;
+  pointer-events: none;
 
-    .bmpui-container-wrapper {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-
-        .bmpui-ui-buffering-overlay-indicator:first-child,
-        .bmpui-ui-buffering-overlay-indicator:last-child {
-            display: none;
-            animation: none;
-            background: none;
-        }
-    }
+  >* {
+    pointer-events: none;
+  }
 
-    .bmpui-ui-buffering-overlay-indicator {
-        width: 56px;
-        height: 56px;
-        border-radius: 50%;
-        background-image: conic-gradient(var(--npo-player-primarycolor), transparent);
-        mask: radial-gradient(transparent 20px, var(--npo-player-primarycolor) 20px);
-        animation: rotation 2s infinite ease-in;
+  .bmpui-container-wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+
+    .bmpui-ui-buffering-overlay-indicator:first-child,
+    .bmpui-ui-buffering-overlay-indicator:last-child {
+      display: none;
+      animation: none;
+      background: none;
     }
+  }
 
-    &.bmpui-hidden {
-      .bmpui-ui-buffering-overlay-indicator {
-        animation: none;
-      }
+  .bmpui-ui-buffering-overlay-indicator {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background-image: conic-gradient(var(--npo-player-primarycolor), transparent);
+    mask: radial-gradient(transparent 20px, var(--npo-player-primarycolor) 20px);
+    animation: none;
+    pointer-events: none;
+  }
+
+  &.bmpui-hidden {
+    .bmpui-ui-buffering-overlay-indicator {
+      animation: none;
     }
+  }
 
 }
 
 /* loading state */
 &:not(.bmpui-player-state-prepared):not(.bmpui-player-state-playing):not(.bmpui-player-state-paused):not(.bmpui-player-state-finished) {
+
   .bmpui-ui-buffering-overlay,
   .bmpui-ui-buffering-overlay.bmpui-hidden {
     display: block;
@@ -54,7 +61,8 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
-}
+}

package/src/scss/components/_hugeplaybacktogglebutton.scss

@@ -49,7 +49,7 @@
         }
 
         &:before {
-            border-radius: 500px;
+            border-radius: 50%;
             background: rgba(0, 0, 0, 0.5);
         }
 

package/src/scss/components/_icons.scss

@@ -13,7 +13,7 @@
     margin: 0;
     background-size: contain;
     background-color: var(--npo-player-iconcolor);
-    background-image: none;
+    background-image: none !important;
     mask-size: contain;
     mask-position: 50% 50%;
     mask-repeat: no-repeat;

package/src/scss/components/_replay.scss

@@ -20,13 +20,8 @@
         background-color: var(--npo-player-iconcolor);
         mask-size: 48px;
         mask-image: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.2721 14.1005C10.4911 13.3195 10.4911 12.0531 11.2721 11.2721C18.3015 4.24264 29.6985 4.24264 36.728 11.2721C43.7574 18.3015 43.7574 29.6985 36.728 36.7279C29.6985 43.7574 18.3015 43.7574 11.2721 36.7279C10.4911 35.9469 10.4911 34.6805 11.2721 33.8995C12.0532 33.1184 13.3195 33.1184 14.1005 33.8995C19.5679 39.3668 28.4322 39.3668 33.8995 33.8995C39.3669 28.4322 39.3669 19.5678 33.8995 14.1005C28.4322 8.63316 19.5679 8.63316 14.1005 14.1005C13.3195 14.8816 12.0532 14.8816 11.2721 14.1005Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.199 4.00983C12.2981 4.11974 13.1 5.09983 12.9901 6.19891L12.2333 13.7666L19.801 13.0098C20.9001 12.8999 21.8802 13.7018 21.9901 14.8009C22.1 15.9 21.2981 16.8801 20.199 16.99L10.199 17.99C9.60213 18.0497 9.00997 17.8383 8.5858 17.4141C8.16163 16.99 7.95025 16.3978 8.00994 15.8009L9.00994 5.8009C9.11985 4.70181 10.0999 3.89992 11.199 4.00983Z" fill="white"/></svg>') !important;
-        transition: transform .25s ease-in;
       }
     }
-
-    .bmpui-image:hover:after {
-      transform: rotate(-135deg);
-    }
   }
 
   .bmpui-ui-playbacktogglebutton.bmpui-off {

package/src/scss/components/_seekbar.scss

@@ -13,16 +13,16 @@ $seekbar-border-radius: 2px;
         margin-top: 5px;
 
         .bmpui-seekbar-marker {
-            background-color: var(--npo-player-primarycolor);
+            background-color: var(--npo-player-seekbar-marker);
         }
 
         .bmpui-seekbar-backdrop {
-            background-color: var(--npo-player-white);
+            background-color: var(--npo-player-seekbar-background);
             opacity: 0.75;
         }
 
         .bmpui-seekbar-playbackposition {
-            background: linear-gradient(90deg, var(--npo-player-primarycolor) 0%, var(--npo-player-primarycolor-light) 100%);
+            background: var(--npo-player-seekbar-playbackposition-background);
         }
 
         .bmpui-seekbar-seekposition {
@@ -47,6 +47,10 @@ $seekbar-border-radius: 2px;
             margin-top: -$seekbar-height;
         }
 
+        .bmpui-seekbar-bufferlevel {
+            background-color: var(--npo-player-seekbar-bufferlevel-background);
+          }
+
         .bmpui-seekbar-markers {
             position: relative;
             overflow: hidden;
@@ -62,8 +66,8 @@ $seekbar-border-radius: 2px;
         }
 
         .bmpui-seekbar-playbackposition-marker {
-            background-color: var(--npo-player-textcolor);
-            border-color: var(--npo-player-textcolor);
+            background-color: var(--npo-player-seekbar-marker);
+            border-color: currentColor;
             width: 16px;
             height: 16px;
 

package/src/scss/components/_settingspanel.scss

@@ -171,14 +171,18 @@ $settings-panel-line-height: 19px;
                 line-height: $settings-panel-line-height;
                 color: var(--npo-player-textcolor);
                 opacity: 1;
+                padding-top: 16px;
 
-                span {
-                    padding-left: 35px;
+                .bmpui-label {
+                    padding-left: 32px;
+                    display: flex;
+                    width: 100%;
 
                     &::before {
                         border-bottom: 0.17em solid var(--npo-player-textcolor);
                         border-left: 0.17em solid var(--npo-player-textcolor);
                         width: 0.5em;
+                        top: auto;
                         height: 0.5em;
                         margin-left: -25px;
                     }

package/src/scss/components/_subtitles.scss

@@ -1,32 +1,50 @@
 /* Subtitles */
-.bmpui-subtitle-region-container {
-    font-size: 15.22px !important;
-    position: static !important;
-    .bmpui-ui-subtitle-label {
-        /*Scale to container size*/
-        position: absolute;
-        overflow-wrap: break-word;
-        overflow: hidden;
-        flex-flow: column nowrap;
-        display: inline-flex;
-        writing-mode: horizontal-tb;
-        text-align: center;
+.bmpui-ui-subtitle-overlay {
+    .bmpui-container-wrapper {
+        display: block;
         width: 100%;
-        justify-content: center;
-        font-size: 1em !important;
-        font-weight: 400 !important;
-        inset: 78% auto 0px 0% !important;
-        @container (min-width: 600px) {
-            font-size: 1.593em !important;
-        }
-        @container (min-width: 700px) {
-            font-size: 1.867em !important;
-        }
-        @container (min-width: 1200px) {
-            font-size: 3.2em !important;
-        }
-        @container (min-width: 1440px) {
-            font-size: 3.84em !important;
+        height: 100%;
+    }
+
+    .bmpui-subtitle-region-container {
+        font-size: 15.22px !important;
+        position: static !important;
+        display: block;
+        width: 100%;
+        height: 100%;
+
+        .bmpui-ui-subtitle-label {
+            box-sizing: border-box;
+            position: absolute;
+            overflow-wrap: break-word;
+            overflow: hidden;
+            writing-mode: horizontal-tb;
+            width: 100% !important;
+            display: block !important;
+            bottom: 18px !important;
+            left: 0 !important;
+            right: 0!important;
+            top: auto !important;
+            font-size: 1em !important;
+            font-weight: 400 !important;
+            inset: none !important;
+            padding: 0 18px;
+
+            @container (min-width: 600px) {
+                font-size: 1.593em !important;
+            }
+
+            @container (min-width: 700px) {
+                font-size: 1.867em !important;
+            }
+
+            @container (min-width: 1200px) {
+                font-size: 3.2em !important;
+            }
+
+            @container (min-width: 1440px) {
+                font-size: 3.84em !important;
+            }
         }
     }
 }

package/src/scss/components/_volumeslider.scss

@@ -29,6 +29,7 @@
 }
 
 // vertical slider in topbar
+&.bmpui-audio,
 .bmpui-controlbar-small {
     .bmpui-ui-volumeslider.bmpui-vertical {
         position: absolute;

package/src/scss/components/audio/_bottombar.scss

@@ -0,0 +1,43 @@
+.bmpui-ui-controlbar {
+  background: none;
+
+  &.bmpui-ui-controlbar-bottom {
+    height: auto;
+    padding-left: $player-spacing-left;
+    padding-bottom: $player-spacing;
+
+    >.bmpui-container-wrapper {
+      display: flex;
+      width: 100%;
+    }
+
+    .bmpui-ui-container.bmpui-controlbar-top {
+      width: 100%;
+    }
+
+    .bmpui-ui-controlbar {
+      background: none;
+      padding: 0;
+      position: relative;
+    }
+
+    .bmpui-controlbar-bottom {
+      padding: 0 !important;
+
+      .bmpui-container-wrapper {
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
+&.bmpui-layout-max-width-400 {
+  .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom {
+    display: block;
+    padding: 0 20px 10px;
+  }
+
+  .bmpui-ui-container.bmpui-controlbar-bottom {
+    display: block;
+  }
+}

package/src/scss/components/audio/_buffering.scss

@@ -0,0 +1,8 @@
+// not used right now
+.bmpui-ui-buffering-overlay {
+  width: 64px;
+  height: 64px;
+  top: $player-spacing;
+  margin-top: $player-spacing-inner;
+  left: $player-spacing-left;
+}

package/src/scss/components/audio/_errors.scss

@@ -0,0 +1,13 @@
+.bmpui-ui-errormessage-overlay {
+  background-color: var(--npo-audio-player-background-color);
+  z-index: 100;
+
+  &::before {
+    display: none;
+  }
+
+  .bmpui-ui-errormessage-label {
+    text-shadow: none;
+    color: var(--npo-audio-player-text-color);
+  }
+}

package/src/scss/components/audio/_metadata.scss

@@ -0,0 +1,38 @@
+.bmpui-metadata {
+  padding: 0;
+  display: block !important;
+
+  .bmpui-label-metadata-title {
+    padding: $player-spacing 40px 0 $player-spacing-left;
+    text-shadow: none;
+    font-size: 16px;
+    line-height: 20.83px;
+    margin-left: 79px;
+    margin-top: $player-spacing-inner;
+
+    // Max 3 lines
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bmpui-label-metadata-description,
+  .bmpui-nicam {
+    display: none;
+  }
+}
+
+&.bmpui-layout-max-width-400 {
+  .bmpui-label-metadata-title {
+    padding-left: 55px;
+    padding-top: 0;
+    margin-top: 13px;
+    font-size: 14px;
+    line-height: 17.01px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+  }
+}

package/src/scss/components/audio/_playbutton.scss

@@ -0,0 +1,66 @@
+.bmpui-ui-playbacktoggle-overlay {
+  display: none;
+  animation: none;
+}
+
+&.bmpui-player-state-playing,
+&.bmpui-player-state-paused,
+&.bmpui-player-state-idle,
+&.bmpui-player-state-prepared,
+&.bmpui-player-state-finished {
+  .bmpui-ui-playbacktoggle-overlay {
+    display: block;
+    animation: none;
+  }
+}
+
+.bmpui-ui-playbacktoggle-overlay {
+  opacity: 1;
+  width: 64px;
+  height: 64px;
+  top: $player-spacing;
+  margin-top: $player-spacing-inner;
+  left: $player-spacing-left;
+
+  .bmpui-ui-hugeplaybacktogglebutton {
+    padding: 0;
+
+    .bmpui-image {
+      &::before {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--npo-player-primarycolor);
+      }
+
+      &::after {
+        background-color: var(--npo-audio-player-background-color);
+      }
+    }
+
+    &.bmpui-on .bmpui-image {
+      animation: none;
+      transition: none;
+      visibility: visible;
+
+      &:after {
+        mask-image: var(--npo-player-icon-pause);
+      }
+    }
+  }
+}
+
+&.bmpui-layout-max-width-400 {
+  .bmpui-ui-playbacktoggle-overlay {
+    width: 36px;
+    height: 36px;
+    left: 90px;
+    margin-top: 7px;
+
+    .bmpui-image::after {
+      width: 60px;
+      height: 60px;
+    }
+  }
+}

package/src/scss/components/audio/_poster.scss

@@ -0,0 +1,19 @@
+.bitmovinplayer-poster {
+  top: $player-spacing;
+  left: $player-spacing;
+  height: 120px;
+  width: 120px;
+  width: auto;
+  right: auto;
+  bottom: auto;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--npo-audio-player-poster-border-radius);
+  background-color: var(--npo-audio-player-poster-background);
+  display: block !important;
+  z-index: 1;
+
+  @container (max-width: 400px) {
+    width: 50px;
+    height: 50px;
+  }
+}