@npo/player 1.22.5 → 1.23.1

package/lib/ui/handlers/streamhandler.js

@@ -0,0 +1,51 @@
+import { processNicam } from './nicamhandler';
+import * as playerAction from '../../js/playeractions/playeractions';
+import { PlayerEvent } from 'bitmovin-player';
+import { initSegment } from '../../services/segmentHandlers/initSegment';
+import { handleLiveStreamControls } from '../../services/liveStreamHandlers/handleLiveStreamControls';
+import { removeEventListeners } from '../../services/eventListenerHandlers/removeEventListeners';
+export function processStream(streamObject, container, streamOptions, player, uiManager, sourceConfig, playerContext) {
+    if (!streamObject)
+        return;
+    if (uiManager == undefined)
+        return;
+    removeEventListeners(playerContext);
+    processNicam(streamObject, container.querySelector('.bmpui-nicam'), streamOptions);
+    initSegment(playerContext, {
+        segment: streamObject.segment,
+        fragment: streamOptions?.fragments
+    });
+    if (streamOptions?.startOffset) {
+        playerAction.handleStartOffset(player, streamOptions.startOffset);
+    }
+    const isLiveStream = streamObject.stream.isLiveStream;
+    const isLiveStreamNoDvr = isLiveStream && streamObject.stream.hasDvrWindow === false;
+    const isAudioOnly = streamObject.stream.avType === 'aod' || streamObject.stream.avType === 'audio';
+    const playerContainer = container.querySelector('.bmpui-ui-uicontainer');
+    const poster = container.querySelector('.bitmovinplayer-poster');
+    const audioOnlyClass = 'audio-only';
+    const liveStreamNoDvrClass = 'livestream-no-dvr';
+    if (isLiveStream && !isLiveStreamNoDvr) {
+        handleLiveStreamControls(playerContext);
+    }
+    if (isLiveStreamNoDvr) {
+        playerContainer?.classList.add(liveStreamNoDvrClass);
+    }
+    else {
+        playerContainer?.classList.remove(liveStreamNoDvrClass);
+    }
+    if (isAudioOnly) {
+        playerContainer?.classList.add(audioOnlyClass);
+        poster?.classList.add(audioOnlyClass);
+    }
+    else {
+        playerContainer?.classList.remove(audioOnlyClass);
+        poster?.classList.remove(audioOnlyClass);
+    }
+    const isAutoplayEnabled = player.getConfig()?.playback?.autoplay ?? false;
+    if (isAutoplayEnabled && (sourceConfig?.progressive || streamObject?.stream?.streamProfile === 'progressive')) {
+        player.on(PlayerEvent.SourceLoaded, () => {
+            player?.play();
+        });
+    }
+}

package/lib/{src/js/ui → 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';
+import { CustomMessageHandlerInterface, CustomMessages } from '../types/interfaces';
 export declare function sendCustomMessage(message: CustomMessages, data?: CustomMessageHandlerInterface): CustomMessageHandlerInterface;
 export declare function nativeMobileUIContainer(player: PlayerAPI): UIContainer;

package/lib/{js/ui → ui}/nativemobileuicontainer.js

@@ -1,21 +1,17 @@
-import { BufferingOverlay, CastStatusOverlay, ErrorMessageOverlay, PlaybackToggleOverlay, PlayerUtils, SubtitleOverlay, UIContainer, } from 'bitmovin-player-ui';
+import { BufferingOverlay, CastStatusOverlay, ErrorMessageOverlay, PlaybackToggleOverlay, PlayerUtils, SubtitleOverlay, UIContainer } from 'bitmovin-player-ui';
 import { createCTABar } from './components/nativemobile/ctabar';
 import { createControlBar } from './components/nativemobile/controlbar';
 import { createTopBar } from './components/nativemobile/topbar';
-import { createSettingsPanel } from './components/settingspanel';
 import { createMiddleButtons } from './components/nativemobile/buttons';
 import { createTitleBar } from './components/nativemobile/titlebar';
 const defaultData = {
-    defaultActionRequired: true,
+    defaultActionRequired: true
 };
 export function sendCustomMessage(message, data) {
     try {
-        if (data !== undefined) {
-            return JSON.parse(window.bitmovin.customMessageHandler.sendSynchronous(message, JSON.stringify(data)));
-        }
-        else {
-            return JSON.parse(window.bitmovin.customMessageHandler.sendSynchronous(message));
-        }
+        return data === undefined
+            ? JSON.parse(window.bitmovin.customMessageHandler.sendSynchronous(message))
+            : JSON.parse(window.bitmovin.customMessageHandler.sendSynchronous(message, JSON.stringify(data)));
     }
     catch {
         return defaultData;
@@ -23,10 +19,9 @@ export function sendCustomMessage(message, data) {
 }
 export function nativeMobileUIContainer(player) {
     const middleButtons = createMiddleButtons(player);
-    const settingsPanel = createSettingsPanel(player);
     const ctaBar = createCTABar(player);
-    const topBar = createTopBar(player, settingsPanel);
-    const controlBar = createControlBar(player, settingsPanel);
+    const topBar = createTopBar(player);
+    const controlBar = createControlBar(player);
     const errorMessageOverlay = new ErrorMessageOverlay();
     return new UIContainer({
         components: [
@@ -42,6 +37,6 @@ export function nativeMobileUIContainer(player) {
             errorMessageOverlay
         ],
         cssClasses: ['npo-player', 'native-mobile'],
-        hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused, PlayerUtils.PlayerState.Finished],
+        hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused, PlayerUtils.PlayerState.Finished]
     });
 }

package/lib/{js/ui → ui}/nativemobileuifactory.js

@@ -1,25 +1,25 @@
 import { PlayerEvent } from 'bitmovin-player';
 import { UIManager } from 'bitmovin-player-ui';
-import { customSpecificErrorMessageOverlayConfig } from '../playeractions/handlers/customerrors';
-import { localizationConfig } from '../utilities/localizationconfig';
+import { customSpecificErrorMessageOverlayConfig } from '../js/playeractions/handlers/customerrors';
+import { localizationConfig } from '../js/settings/localization';
 import { nativeMobileUIContainer, sendCustomMessage } from './nativemobileuicontainer';
-import { addFragments } from '../ui/components/nativemobile/addFragments';
-import { CustomMessages } from '../../types/interfaces';
+import { CustomMessages } from '../types/interfaces';
 import { processNicam } from './handlers/nicamhandler';
-import { removeFragments } from '../fragments/removefragments';
-import { getPlayerElement, removePlayerElementClass } from '../utilities/utilities';
+import { getElementByQuery, removeClassFromElementByQuery } from '../js/utilities/utilities.element';
 import { handleLiveStreamNoDvr } from './handlers/domhandlers';
-import { removeReplayClass } from '../playeractions/handlers/removereplayclass';
+import { removeReplayClass } from '../js/playeractions/handlers/removereplayclass';
+let adBreakActive = false;
 export function nativeMobileUiFactory(player, config = {}) {
     UIManager.setLocalizationConfig(localizationConfig);
-    const containerElement = getPlayerElement(player, '.bmpui-npo-player');
-    const nicamElement = getPlayerElement(player, '.bmpui-nicam');
-    const seekbarTitleElement = getPlayerElement(player, '.bmpui-seekbar-label-title');
-    let adBreakActive = false;
+    const nicamElement = getElementByQuery({ container: player.getContainer(), query: '.bmpui-nicam' });
+    const seekbarTitleElement = getElementByQuery({
+        container: player.getContainer(),
+        query: '.bmpui-seekbar-label-title'
+    });
     const uiConfig = {
         ...config,
         errorMessages: customSpecificErrorMessageOverlayConfig,
-        disableAutoHideWhenHovered: true,
+        disableAutoHideWhenHovered: true
     };
     const mobileUIManager = new UIManager(player, nativeMobileUIContainer(player), uiConfig);
     let _webData = {};
@@ -33,8 +33,11 @@ export function nativeMobileUiFactory(player, config = {}) {
             nicamElement.innerHTML = '';
         if (seekbarTitleElement)
             seekbarTitleElement.textContent = '';
-        removePlayerElementClass(player, '.bmpui-npo-player', 'livestream-no-dvr');
-        removeFragments(mobileUIManager);
+        removeClassFromElementByQuery({
+            className: 'livestream-no-dvr',
+            container: player.getContainer(),
+            query: '.bmpui-npo-player'
+        });
     };
     const updateUI = () => {
         if (_webData.assets.preroll) {
@@ -42,16 +45,10 @@ export function nativeMobileUiFactory(player, config = {}) {
             player.on(PlayerEvent.AdBreakFinished, setAdBreakActiveToFalse);
         }
         if (_webData.metadata?.ageRating)
-            processNicam(_webData, nicamElement, null);
+            processNicam(_webData, nicamElement, undefined);
         if (seekbarTitleElement)
             seekbarTitleElement.textContent = _webData.title || '';
-        handleLiveStreamNoDvr(player, _webData, containerElement);
-        const section = _webData.segment ? {
-            start: _webData.segment.inpoint,
-            end: _webData.segment.outpoint,
-            title: _webData?.title || '',
-        } : null;
-        addFragments(player, mobileUIManager, section);
+        handleLiveStreamNoDvr(player, _webData);
     };
     const setAdBreakActiveToFalse = () => {
         adBreakActive = false;
@@ -85,7 +82,7 @@ export function nativeMobileUiFactory(player, config = {}) {
         const input = data.input;
         if (input) {
             const uiComponents = mobileUIManager.activeUi.getUI().getComponents();
-            const errorMessageOverlay = uiComponents.find(component => component.getConfig().cssClass === 'ui-errormessage-overlay');
+            const errorMessageOverlay = uiComponents.find((component) => component.getConfig().cssClass === 'ui-errormessage-overlay');
             if (!errorMessageOverlay)
                 return;
             try {

package/lib/ui/nativemobileuifactory.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/lib/{js/ui → ui}/nativemobileuifactory.test.js

@@ -1,9 +1,10 @@
 import { nativeMobileUiFactory } from './nativemobileuifactory';
-import { CustomMessages } from '../../types/interfaces';
+import { CustomMessages } from '../types/interfaces';
+import '@testing-library/jest-dom';
 const title = 'Test Stream';
 let storedCallbacks = {};
 jest.mock('bitmovin-player-ui', () => {
-    return jest.requireActual('../../../tests/mocks/mockPlayerUi').mockPlayerUi;
+    return jest.requireActual('../../tests/mocks/mockPlayerUi').mockPlayerUi;
 });
 describe('nativeMobileUiFactory', () => {
     let mockPlayer;
@@ -23,15 +24,16 @@ describe('nativeMobileUiFactory', () => {
             on: jest.fn(),
             off: jest.fn(),
             getContainer: () => containerElement,
-            getVolume: jest.fn().mockReturnValue(50),
+            getVolume: jest.fn().mockReturnValue(50)
         };
         storedCallbacks = {};
         if (storedCallbacks) {
+            ;
             window.bitmovin = window.bitmovin || {};
             window.bitmovin.customMessageHandler = {
                 on: jest.fn((messageType, callbackFn) => {
                     storedCallbacks[messageType] = callbackFn;
-                }),
+                })
             };
         }
         nativeMobileUiFactory(mockPlayer);
@@ -41,14 +43,14 @@ describe('nativeMobileUiFactory', () => {
             title: title,
             metadata: {
                 ageRating: '12',
-                nicam: ['GEWELD', 'ANGST', 'GROF_TAALGEBRUIK'],
+                nicam: ['GEWELD', 'ANGST', 'GROF_TAALGEBRUIK']
             },
             stream: {
                 isLiveStream: true,
                 hasDvrWindow: false
             },
             assets: {
-                preroll: null,
+                preroll: undefined
             }
         };
         if (storedCallbacks[CustomMessages.SET_STREAM_LINK]) {

package/lib/{src/js/ui → ui}/uicontainer.d.ts

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

package/lib/{js/ui → ui}/uicontainer.js

@@ -7,32 +7,37 @@ import { createTopBar } from './components/topbar';
 import { createControlBar } from './components/controlbar';
 import { createAudioControlBar } from './components/audio/controlbar';
 import { createTitleBar } from './components/titlebar';
-import { localize } from '../utilities/utilities';
-import { localizationConfig } from '../utilities/localizationconfig';
-import { NpoPlayerUIVariants } from '../../types/interfaces';
+import { localizeKey } from '../js/utilities/utilities.locale';
+import { localizationConfig } from '../js/settings/localization';
+import { NpoPlayerUIVariants } from '../types/interfaces';
 export function createUIContainer(npoplayer, player, variant, container) {
-    let cssClassArray = ['npo-player'];
+    const cssClassArray = ['npo-player'];
     let uiDelay = 3000;
-    container.setAttribute('data-npo-player-version', npoplayer.version);
+    container.dataset.npoPlayerVersion = npoplayer.version;
     container.classList.remove('bitmovinplayer-audio-container');
-    if (variant === NpoPlayerUIVariants.DEFAULT) {
-        uiDelay = 3000;
-    }
-    else if (variant === NpoPlayerUIVariants.AD) {
-        uiDelay = -1;
-        cssClassArray.push('ster-ad');
-    }
-    else if (variant === NpoPlayerUIVariants.AUDIO) {
-        uiDelay = -1;
-        container.classList.add('bitmovinplayer-audio-container');
-        cssClassArray.push('audio');
+    switch (variant) {
+        case NpoPlayerUIVariants.DEFAULT: {
+            uiDelay = 3000;
+            break;
+        }
+        case NpoPlayerUIVariants.AD: {
+            uiDelay = -1;
+            cssClassArray.push('ster-ad');
+            break;
+        }
+        case NpoPlayerUIVariants.AUDIO: {
+            uiDelay = -1;
+            container.classList.add('bitmovinplayer-audio-container');
+            cssClassArray.push('audio');
+            break;
+        }
     }
     const middleButtons = createMiddleButtons(player);
     const playNextScreen = createPlayNextScreen(player, npoplayer);
     const settingsPanel = createSettingsPanel(npoplayer);
     const ctaBar = createCTABar(player, npoplayer, variant);
-    const topBar = createTopBar(player, settingsPanel);
-    const controlBar = createControlBar(npoplayer, settingsPanel);
+    const topBar = createTopBar(npoplayer);
+    const controlBar = createControlBar(npoplayer);
     const titleBar = createTitleBar(npoplayer);
     const playbackToggleOverlay = new PlaybackToggleOverlay();
     const audioControlbar = createAudioControlBar(npoplayer);
@@ -45,44 +50,25 @@ export function createUIContainer(npoplayer, player, variant, container) {
         bufferingOverlay,
         playbackToggleOverlay,
         new CastStatusOverlay(),
-        middleButtons,
-    ];
-    const baseComponentsAfter = [
-        errorMessageOverlay
+        middleButtons
     ];
-    let conditionalComponents = [];
+    const baseComponentsAfter = [errorMessageOverlay];
+    const conditionalComponents = [];
     if (variant === NpoPlayerUIVariants.DEFAULT) {
-        conditionalComponents.push(...baseComponentsBefore);
-        conditionalComponents.push(playNextScreen);
-        conditionalComponents.push(controlBar);
-        conditionalComponents.push(ctaBar);
-        conditionalComponents.push(titleBar);
-        conditionalComponents.push(topBar);
+        conditionalComponents.push(...baseComponentsBefore, playNextScreen, controlBar, ctaBar, titleBar, topBar);
     }
     if (variant === NpoPlayerUIVariants.AUDIO) {
-        conditionalComponents.push(new PlaybackToggleButton());
-        conditionalComponents.push(audioControlbar);
-        conditionalComponents.push(titleBar);
+        conditionalComponents.push(new PlaybackToggleButton(), audioControlbar, titleBar);
     }
     if (variant === NpoPlayerUIVariants.AD) {
-        conditionalComponents.push(...baseComponentsBefore);
-        conditionalComponents.push(controlBar);
-        conditionalComponents.push(ctaBar);
+        conditionalComponents.push(...baseComponentsBefore, controlBar, ctaBar);
     }
     UIManager.setLocalizationConfig(localizationConfig);
     return new UIContainer({
         components: [...conditionalComponents, ...baseComponentsAfter],
         cssClasses: cssClassArray,
-        ariaLabel: localize('player'),
+        ariaLabel: localizeKey('player'),
         hideDelay: uiDelay,
-        hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused],
+        hidePlayerStateExceptions: [PlayerUtils.PlayerState.Paused]
     });
 }
-export function removeUIContainer(container) {
-    for (let i = 0; i < container.attributes.length; i += 1) {
-        const attributeName = container.attributes[i].name;
-        if (attributeName.startsWith('data-')) {
-            container.removeAttribute(attributeName);
-        }
-    }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npo/player",
-  "version": "1.22.5",
+  "version": "1.23.1",
   "description": "NPO Player",
   "author": "Publieke Omroep <player@npo.nl>",
   "contributors": [
@@ -16,9 +16,9 @@
   "types": "./lib/npoplayer.d.ts",
   "scripts": {
     "build": "webpack --hot",
-    "build:scss": "npm run build:web-styles && npm run build:mobile-styles && mkdir -p dist && cp src/scss/*.css dist && cp src/scss/*.css.map dist",
-    "build:web-styles": "sass src/scss/npoplayer.scss:src/scss/npoplayer.css --style=compressed && postcss src/scss/npoplayer.css --use autoprefixer postcss-import -o src/scss/npoplayer.css",
-    "build:mobile-styles": "sass src/scss/npoplayer-mobile.scss:src/scss/npoplayer-mobile.css --style=compressed && postcss src/scss/npoplayer-mobile.css --use autoprefixer postcss-import -o src/scss/npoplayer-mobile.css",
+    "build:scss": "npm run build:web-styles && npm run build:mobile-styles && mkdir -p dist && cp src/style/*.css dist && mkdir src/scss && cp src/style/*.css.map dist && cp src/style/*.css src/scss && cp src/style/*.css.map src/scss",
+    "build:web-styles": "sass src/style/npoplayer.scss:src/style/npoplayer.css --style=compressed && postcss src/style/npoplayer.css --use autoprefixer postcss-import -o src/style/npoplayer.css",
+    "build:mobile-styles": "sass src/style/npoplayer-mobile.scss:src/style/npoplayer-mobile.css --style=compressed && postcss src/style/npoplayer-mobile.css --use autoprefixer postcss-import -o src/style/npoplayer-mobile.css",
     "build:cdn": "npm run build && bash build-cdn.sh",
     "lint": "eslint src --fix",
     "bundle": "npm run lint && bash build-lib.sh && npm run build:scss && npm run build:cdn",
@@ -33,16 +33,17 @@
     "README.md",
     "CHANGELOG.md",
     "lib",
-    "src/scss/components",
-    "src/scss/variants",
-    "src/scss/vars",
-    "src/scss/npoplayer.scss",
-    "src/scss/npoplayer.css"
+    "src/style/components",
+    "src/style/variants",
+    "src/style/vars",
+    "src/style/npoplayer.scss",
+    "src/style/npoplayer.css"
   ],
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
+    "@testing-library/jest-dom": "^6.4.5",
     "@types/fs-extra": "^11.0.1",
     "@types/jest": "^29.4.0",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
@@ -52,11 +53,16 @@
     "babel-loader": "^8.3.0",
     "css-loader": "^6.7.3",
     "eslint": "^8.38.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^34.0.1",
     "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-sonarjs": "^0.23.0",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-unicorn": "^52.0.0",
     "fs-extra": "^11.1.1",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^29.4.1",
@@ -70,6 +76,7 @@
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",
     "postcss-scss": "^4.0.7",
+    "prettier": "^3.2.5",
     "sass": "^1.58.0",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
@@ -82,9 +89,9 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@npotag/tag": "^3.0.1",
-    "bitmovin-player": "8.151.0",
-    "bitmovin-player-ui": "3.60.0"
+    "@npotag/tag": "3.1.2",
+    "bitmovin-player": "8.166.0",
+    "bitmovin-player-ui": "3.64.0"
   },
   "browserslist": [
     "defaults",

package/src/{scss → style}/components/_controlbars.scss

@@ -24,3 +24,7 @@
         margin: 0 auto;
     }
 }
+
+&.audio-only .bmpui-ui-controlbar .bmpui-ui-piptogglebutton {
+    display: none;
+}

package/src/{scss → style}/components/_icons.scss

@@ -13,6 +13,12 @@
     padding: 0 5px;
     margin: 0;
 
+    &[disabled] {
+        opacity: .5;
+        pointer-events: none;
+        cursor: default;
+    }
+
     &:focus-visible {
         @include focusStyle();
         border-radius: 2px;

package/src/style/components/_poster.scss

@@ -0,0 +1,3 @@
+.bitmovinplayer-poster.audio-only {
+  display: block !important;
+}

package/src/{scss → style}/components/_settingspanel.scss

@@ -29,7 +29,7 @@ $settings-panel-line-height: 19px;
         overflow: hidden;
     }
 
-    .bmpui-ui-settingspanelpageopenbutton:focus {
+    .bmpui-ui-settingspanelpageopenbutton:focus-visible {
         box-shadow: none;
 
         .bmpui-label {
@@ -215,4 +215,18 @@ $settings-panel-line-height: 19px;
             }
         }
     }
+}
+
+&.bmpui-settings-panel-shown {
+    .bmpui-ui-controlbar.bmpui-ui-controlbar-bottom.bmpui-hidden,
+    .bmpui-ui-titlebar.bmpui-metadata.bmpui-hidden {
+        opacity: 1;
+    }
+
+    &.bmpui-layout-max-width-400,
+    &.bmpui-layout-max-width-600 {
+        .bmpui-ui-titlebar.bmpui-titlebar-small.bmpui-hidden {
+            opacity: 1;
+        }
+    }
 }

package/src/{scss → style}/components/_subtitles.scss

@@ -1,5 +1,23 @@
-/* Subtitles */
+$breakpoints: (
+  600px: 1.593em,
+  700px: 1.867em,
+  1200px: 3.2em,
+  1440px: 3.84em
+);
+
+@mixin responsive-font($size, $span-size) {
+  font-size: $size !important;
+
+  span {
+    font-size: $span-size !important;
+  }
+}
+
 .bmpui-ui-subtitle-overlay {
+    p {
+        display: inline-block;
+    }
+
     .bmpui-container-wrapper {
         display: block;
         width: 100%;
@@ -26,24 +44,15 @@
             left: 0 !important;
             right: 0!important;
             top: auto !important;
-            font-size: 1em !important;
             font-weight: 400 !important;
             padding: 0 18px;
+            line-height: 1.2;
+            @include responsive-font(1em, 1em);
 
-            @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;
+            @each $bp, $size in $breakpoints {
+                @container (min-width: $bp) {
+                    @include responsive-font($size, $size);
+                }
             }
         }
     }