@npo/player 1.23.2 → 1.24.0

package/lib/services/liveStreamHandlers/handleLiveStreamControls.test.js

@@ -0,0 +1,65 @@
+import '@testing-library/jest-dom';
+import { NpoPlayerEvent } from '../../types/events';
+import { handleLiveStreamControls, updateForwardButtonState, toggleForwardButtons } from './handleLiveStreamControls';
+import createPlayerContextMock from '../../../tests/mocks/playerContextMock';
+export const TIME_SHIFT_THRESHOLD = -10;
+describe('handleLiveStreamControls', () => {
+    let mockPlayerContext;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockPlayerContext = createPlayerContextMock();
+    });
+    it('should add TimeChanged event listener and store it in eventListeners', () => {
+        handleLiveStreamControls(mockPlayerContext);
+        expect(mockPlayerContext.player.on).toHaveBeenCalledWith(NpoPlayerEvent.TimeChanged, mockPlayerContext.npoplayer.eventListeners?.liveStreamHandleTimeChangedCallback);
+        expect(mockPlayerContext.npoplayer.eventListeners?.liveStreamHandleTimeChangedCallback).toBeDefined();
+    });
+});
+describe('updateForwardButtonState', () => {
+    let mockPlayerContext;
+    let mockForwardButtons;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockPlayerContext = createPlayerContextMock();
+        document.body.innerHTML = `
+      <div class="bmpui-ui-forwardbutton"></div>
+      <div class="bmpui-ui-forwardbutton"></div>
+    `;
+        mockForwardButtons = document.querySelectorAll('.bmpui-ui-forwardbutton');
+        jest.spyOn(mockPlayerContext.player, 'getTimeShift').mockReturnValue(TIME_SHIFT_THRESHOLD - 5);
+        jest.spyOn(mockPlayerContext.player, 'getContainer').mockReturnValue({
+            querySelectorAll: jest.fn().mockReturnValue(mockForwardButtons)
+        });
+    });
+    it('should update forward buttons state based on timeShift', () => {
+        updateForwardButtonState(mockPlayerContext.player);
+        expect(mockPlayerContext.player.off).toHaveBeenCalledWith(NpoPlayerEvent.TimeChanged, expect.any(Function));
+        for (const forwardButton of mockForwardButtons) {
+            expect(forwardButton).toBeEnabled();
+        }
+    });
+});
+describe('toggleForwardButtons', () => {
+    let mockForwardButtons;
+    beforeEach(() => {
+        document.body.innerHTML = `
+      <div class="bmpui-ui-forwardbutton"></div>
+      <div class="bmpui-ui-forwardbutton"></div>
+    `;
+        mockForwardButtons = document.querySelectorAll('.bmpui-ui-forwardbutton');
+    });
+    it('should disable forward buttons if timeShift > TIME_SHIFT_THRESHOLD', () => {
+        toggleForwardButtons(mockForwardButtons, TIME_SHIFT_THRESHOLD + 5);
+        for (const forwardButton of mockForwardButtons) {
+            expect(forwardButton).toHaveAttribute('disabled', 'true');
+        }
+    });
+    it('should enable forward buttons if timeShift <= TIME_SHIFT_THRESHOLD', () => {
+        for (const button of mockForwardButtons)
+            button.setAttribute('disabled', 'true');
+        toggleForwardButtons(mockForwardButtons, TIME_SHIFT_THRESHOLD - 5);
+        for (const forwardButton of mockForwardButtons) {
+            expect(forwardButton).toBeEnabled();
+        }
+    });
+});

package/lib/services/localStorageHandlers/localStorageHandlers.d.ts

@@ -1,4 +1,4 @@
-import { LocalStorageData, LocalStorageValues, PlayerContext } from 'types/interfaces';
+import { LocalStorageData, LocalStorageValues, PlayerContext } from '../../types/interfaces';
 export declare function setLocalStorage(key: LocalStorageValues, value: any): void;
 export declare function getLocalStorage(): LocalStorageData;
 export declare function setValuesBasedOnLocalStorage(playerContext: PlayerContext): void;

package/lib/services/localStorageHandlers/localStorageHandlers.test.js

@@ -67,7 +67,6 @@ describe('localStorageHandler', () => {
                     playerConfig: {},
                     initPlayer: () => { },
                     loadStream: () => Promise.resolve(),
-                    createUIManager: async () => { },
                     doError: () => { },
                     play: async () => { },
                     pause: () => { },

package/lib/services/npoPlayerAPI/contants.d.ts

@@ -0,0 +1,5 @@
+export declare const DEFAULT_UI_DELAY = 3000;
+export declare const PREVENT_UI_DELAY = -1;
+export declare const VOLUME_STEP = 10;
+export declare const VOLUME_MIN = 0;
+export declare const VOLUME_MAX = 100;

package/lib/services/npoPlayerAPI/contants.js

@@ -0,0 +1,5 @@
+export const DEFAULT_UI_DELAY = 3000;
+export const PREVENT_UI_DELAY = -1;
+export const VOLUME_STEP = 10;
+export const VOLUME_MIN = 0;
+export const VOLUME_MAX = 100;

package/lib/services/npoPlayerAPI/npoPlayerAPI.d.ts

@@ -1,5 +1,7 @@
-import { PlayerAPI, PlayerEvent, PlayerEventCallback, SourceConfig, TimeMode, ViewMode } from 'bitmovin-player';
-import { Technology } from 'types/interfaces';
+import { AdBreak, AdConfig, PlayerAPI, PlayerConfig, SourceConfig, TimeMode, ViewMode } from 'bitmovin-player';
+import { UIManager } from 'bitmovin-player-ui';
+import { NpoPlayerUIVariants, PlayerContext, Technology } from 'types/interfaces';
+import { NpoPlayerEventCallback, NpoPlayerEvent } from '../../types/events';
 export declare class NpoPlayerAPI {
     playerAPI: PlayerAPI;
     constructor(playerAPI: PlayerAPI);
@@ -10,21 +12,31 @@ export declare class NpoPlayerAPI {
     unmute(): void;
     getVolume(): number;
     setVolume(level: number): void;
+    increaseVolume(): void;
+    decreaseVolume(): void;
     setViewMode(viewMode: ViewMode): void;
     getViewMode(): ViewMode;
     areSubtitlesEnabled(): boolean;
     enableSubtitles(): void;
     isPaused(): boolean;
     isMuted(): boolean;
+    isLive(): boolean;
     getSupportedDRM(): Promise<string[]>;
     getSupportedTech(): Technology[];
-    off(eventType: PlayerEvent, callback: PlayerEventCallback): void;
-    on(eventType: PlayerEvent, callback: PlayerEventCallback): void;
+    off(eventType: NpoPlayerEvent, callback: NpoPlayerEventCallback): void;
+    on(eventType: NpoPlayerEvent, callback: NpoPlayerEventCallback): void;
     seek(time: number): void;
+    timeShift(time: number): void;
     getContainer(): HTMLElement;
     getNpoPlayerElement(): Element | null;
     addClassToNpoPlayerElement(className: string): void | undefined;
     removeClassFromNpoPlayerElement(className: string): void | undefined;
+    toggleClassOnNpoPlayerElement(className: string, toggle: boolean): void | undefined;
     getCurrentTime(mode?: TimeMode | undefined): number;
+    getDuration(): number;
     getTimeShift(): number;
+    scheduleAds(adConfig: AdConfig): Promise<AdBreak[]>;
+    getActiveAdBreak(): AdBreak | null;
+    getConfig(mergedConfig?: boolean): PlayerConfig;
+    createUIManager(playerContext: PlayerContext, variant: NpoPlayerUIVariants): Promise<void | UIManager>;
 }

package/lib/services/npoPlayerAPI/npoPlayerAPI.js

@@ -1,3 +1,10 @@
+import { UIManager } from 'bitmovin-player-ui';
+import { customSpecificErrorMessageOverlayConfig } from '../../js/playeractions/handlers/customerrors';
+import { processStream } from '../../ui/handlers/streamhandler';
+import { createUIContainer } from '../../ui/uicontainer';
+import { playerEventMap } from '../../types/events';
+import { VOLUME_MAX, VOLUME_MIN, VOLUME_STEP } from './contants';
+const externalCallbacksMap = new WeakMap();
 export class NpoPlayerAPI {
     constructor(playerAPI) {
         this.playerAPI = playerAPI;
@@ -21,7 +28,16 @@ export class NpoPlayerAPI {
         return this.playerAPI.getVolume();
     }
     setVolume(level) {
-        this.playerAPI.setVolume(level);
+        const volume = Math.max(VOLUME_MIN, Math.min(VOLUME_MAX, level));
+        this.playerAPI.setVolume(volume);
+    }
+    increaseVolume() {
+        const currentVolume = this.getVolume();
+        this.setVolume(currentVolume + VOLUME_STEP);
+    }
+    decreaseVolume() {
+        const currentVolume = this.getVolume();
+        this.setVolume(currentVolume - VOLUME_STEP);
     }
     setViewMode(viewMode) {
         this.playerAPI.setViewMode(viewMode);
@@ -55,6 +71,9 @@ export class NpoPlayerAPI {
     isMuted() {
         return this.playerAPI.isMuted();
     }
+    isLive() {
+        return this.playerAPI.isLive();
+    }
     async getSupportedDRM() {
         return (await this.playerAPI.getSupportedDRM());
     }
@@ -62,14 +81,30 @@ export class NpoPlayerAPI {
         return this.playerAPI.getSupportedTech();
     }
     off(eventType, callback) {
-        this.playerAPI.off(eventType, callback);
+        const externalEventType = playerEventMap[eventType];
+        const externalCallback = externalCallbacksMap.get(callback);
+        if (externalCallback) {
+            this.playerAPI.off(externalEventType, externalCallback);
+            externalCallbacksMap.delete(callback);
+        }
     }
     on(eventType, callback) {
-        this.playerAPI.on(eventType, callback);
+        const externalEventType = playerEventMap[eventType];
+        let externalCallback = externalCallbacksMap.get(callback);
+        if (!externalCallback) {
+            externalCallback = (args) => {
+                callback(args);
+            };
+            externalCallbacksMap.set(callback, externalCallback);
+        }
+        this.playerAPI.on(externalEventType, externalCallback);
     }
     seek(time) {
         this.playerAPI.seek(time);
     }
+    timeShift(time) {
+        this.playerAPI.timeShift(time);
+    }
     getContainer() {
         return this.playerAPI.getContainer();
     }
@@ -82,10 +117,37 @@ export class NpoPlayerAPI {
     removeClassFromNpoPlayerElement(className) {
         this.getNpoPlayerElement()?.classList.remove(className);
     }
+    toggleClassOnNpoPlayerElement(className, toggle) {
+        this.getNpoPlayerElement()?.classList.toggle(className, toggle);
+    }
     getCurrentTime(mode) {
         return this.playerAPI.getCurrentTime(mode);
     }
+    getDuration() {
+        return this.playerAPI.getDuration();
+    }
     getTimeShift() {
         return this.playerAPI.getTimeShift();
     }
+    async scheduleAds(adConfig) {
+        return this.playerAPI.ads.schedule(adConfig);
+    }
+    getActiveAdBreak() {
+        return this.playerAPI.ads.getActiveAdBreak();
+    }
+    getConfig(mergedConfig) {
+        return this.playerAPI.getConfig(mergedConfig);
+    }
+    async createUIManager(playerContext, variant) {
+        if (playerContext.npoplayer.uiManager === undefined || variant !== playerContext.npoplayer.variant) {
+            const uiConfig = {
+                errorMessages: customSpecificErrorMessageOverlayConfig,
+                disableAutoHideWhenHovered: true,
+                seekbarSnappingEnabled: false
+            };
+            playerContext.npoplayer.uiManager = new UIManager(this.playerAPI, createUIContainer(playerContext.npoplayer, this.playerAPI, variant, playerContext.npoplayer.container), uiConfig);
+            playerContext.npoplayer.variant = variant;
+        }
+        processStream(playerContext);
+    }
 }

package/lib/services/npoPlayerAPI/npoPlayerAPI.test.js

@@ -1,4 +1,6 @@
 import { NpoPlayerAPI } from './npoPlayerAPI';
+import createPlayerContextMock from '../../../tests/mocks/playerContextMock';
+import { NpoPlayerEvent } from '../../types/events';
 describe('NpoPlayerAPI', () => {
     let mockPlayerAPI;
     let npoPlayerAPI;
@@ -11,7 +13,9 @@ describe('NpoPlayerAPI', () => {
             setViewMode: jest.fn(),
             getViewMode: jest.fn(),
             isPaused: jest.fn(),
-            isMuted: jest.fn()
+            isMuted: jest.fn(),
+            on: jest.fn(),
+            off: jest.fn()
         };
         npoPlayerAPI = new NpoPlayerAPI(mockPlayerAPI);
     });
@@ -48,4 +52,65 @@ describe('NpoPlayerAPI', () => {
         npoPlayerAPI.isMuted();
         expect(mockPlayerAPI.isMuted).toHaveBeenCalled();
     });
+    describe('NpoPlayerAPI Volume Control Tests', () => {
+        let playerContextMock;
+        beforeEach(() => {
+            playerContextMock = createPlayerContextMock();
+            playerContextMock.player.setVolume(50);
+        });
+        test('should set volume to a specific value', () => {
+            playerContextMock.player.setVolume(30);
+            expect(playerContextMock.player.getVolume()).toBe(30);
+        });
+        test('should not set volume above the maximum', () => {
+            playerContextMock.player.setVolume(110);
+            expect(playerContextMock.player.getVolume()).toBe(100);
+        });
+        test('should not set volume below the minimum', () => {
+            playerContextMock.player.setVolume(-10);
+            expect(playerContextMock.player.getVolume()).toBe(0);
+        });
+        test('should increase volume by 10', () => {
+            playerContextMock.player.increaseVolume();
+            expect(playerContextMock.player.getVolume()).toBe(60);
+        });
+        test('should not increase volume above the maximum', () => {
+            playerContextMock.player.setVolume(95);
+            playerContextMock.player.increaseVolume();
+            expect(playerContextMock.player.getVolume()).toBe(100);
+        });
+        test('should decrease volume by 10', () => {
+            playerContextMock.player.decreaseVolume();
+            expect(playerContextMock.player.getVolume()).toBe(40);
+        });
+        test('should not decrease volume below the minimum', () => {
+            playerContextMock.player.setVolume(5);
+            playerContextMock.player.decreaseVolume();
+            expect(playerContextMock.player.getVolume()).toBe(0);
+        });
+    });
+    describe('Event handling', () => {
+        it('should add an event listener', () => {
+            const eventType = NpoPlayerEvent.TimeChanged;
+            const callback = jest.fn();
+            npoPlayerAPI.on(eventType, callback);
+            expect(mockPlayerAPI.on).toHaveBeenCalledWith(expect.any(String), expect.any(Function));
+        });
+        it('should remove an event listener', () => {
+            const eventType = NpoPlayerEvent.TimeChanged;
+            const callback = jest.fn();
+            npoPlayerAPI.on(eventType, callback);
+            npoPlayerAPI.off(eventType, callback);
+            expect(mockPlayerAPI.off).toHaveBeenCalledWith(expect.any(String), expect.any(Function));
+        });
+        it('should trigger the correct callback when event is emitted', () => {
+            const eventType = NpoPlayerEvent.TimeChanged;
+            const callback = jest.fn();
+            const mockArgs = { time: 123 };
+            npoPlayerAPI.on(eventType, callback);
+            const externalCallback = mockPlayerAPI.on.mock.calls[0][1];
+            externalCallback(mockArgs);
+            expect(callback).toHaveBeenCalledWith(mockArgs);
+        });
+    });
 });

package/lib/services/segmentHandlers/addSegmentEventListeners.js

@@ -1,12 +1,12 @@
-import { PlayerEvent } from 'bitmovin-player';
+import { NpoPlayerEvent } from '../../types/events';
 import { handleSegmentTimeChanged } from './handleSegmentTimeChanged';
 import { handleSegmentSeek } from './handleSegmentSeek';
 export const addSegmentEventListeners = (playerContext, segment) => {
     const segmentHandleTimeChangedCallback = handleSegmentTimeChanged(playerContext, segment);
     const segmentSeekFunctionCallback = handleSegmentSeek(playerContext, segment);
     const { player, npoplayer } = playerContext;
-    player.on(PlayerEvent.TimeChanged, segmentHandleTimeChangedCallback);
-    player.on(PlayerEvent.Seek, segmentSeekFunctionCallback);
+    player.on(NpoPlayerEvent.TimeChanged, segmentHandleTimeChangedCallback);
+    player.on(NpoPlayerEvent.Seek, segmentSeekFunctionCallback);
     npoplayer.eventListeners = {
         segmentHandleTimeChangedCallback,
         segmentSeekFunctionCallback

package/lib/services/segmentHandlers/addSegmentEventListeners.test.js

@@ -2,7 +2,7 @@ import { PlayerEvent } from 'bitmovin-player';
 import { addSegmentEventListeners } from './addSegmentEventListeners';
 import { handleSegmentTimeChanged } from './handleSegmentTimeChanged';
 import { handleSegmentSeek } from './handleSegmentSeek';
-import { mockPlayerContext } from '../../../tests/mocks/mockPlayerContext';
+import createPlayerContextMock from '../../../tests/mocks/playerContextMock';
 jest.mock('./handleSegmentTimeChanged', () => ({
     handleSegmentTimeChanged: jest.fn()
 }));
@@ -10,32 +10,33 @@ jest.mock('./handleSegmentSeek', () => ({
     handleSegmentSeek: jest.fn()
 }));
 describe('addSegmentEventListeners', () => {
+    let mockPlayerContext;
     const segment = { inpoint: 10, outpoint: 20, duration: 10 };
-    const context = { ...mockPlayerContext };
     beforeEach(() => {
         jest.clearAllMocks();
+        mockPlayerContext = createPlayerContextMock();
     });
     it('should add TimeChanged event listener', () => {
         const segmentHandleTimeChangedCallback = jest.fn();
         handleSegmentTimeChanged.mockReturnValue(segmentHandleTimeChangedCallback);
-        addSegmentEventListeners(context, segment);
-        expect(context.player.on).toHaveBeenCalledWith(PlayerEvent.TimeChanged, segmentHandleTimeChangedCallback);
-        expect(handleSegmentTimeChanged).toHaveBeenCalledWith(context, segment);
+        addSegmentEventListeners(mockPlayerContext, segment);
+        expect(mockPlayerContext.player.on).toHaveBeenCalledWith(PlayerEvent.TimeChanged, segmentHandleTimeChangedCallback);
+        expect(handleSegmentTimeChanged).toHaveBeenCalledWith(mockPlayerContext, segment);
     });
     it('should add Seek event listener', () => {
         const segmentSeekFunctionCallback = jest.fn();
         handleSegmentSeek.mockReturnValue(segmentSeekFunctionCallback);
         addSegmentEventListeners(mockPlayerContext, segment);
-        expect(context.player.on).toHaveBeenCalledWith(PlayerEvent.Seek, segmentSeekFunctionCallback);
-        expect(handleSegmentSeek).toHaveBeenCalledWith(context, segment);
+        expect(mockPlayerContext.player.on).toHaveBeenCalledWith(PlayerEvent.Seek, segmentSeekFunctionCallback);
+        expect(handleSegmentSeek).toHaveBeenCalledWith(mockPlayerContext, segment);
     });
     it('should set segmentEventListeners in playerContext', () => {
         const segmentHandleTimeChangedCallback = jest.fn();
         const segmentSeekFunctionCallback = jest.fn();
         handleSegmentTimeChanged.mockReturnValue(segmentHandleTimeChangedCallback);
         handleSegmentSeek.mockReturnValue(segmentSeekFunctionCallback);
-        addSegmentEventListeners(context, segment);
-        expect(context.npoplayer.eventListeners).toEqual({
+        addSegmentEventListeners(mockPlayerContext, segment);
+        expect(mockPlayerContext.npoplayer.eventListeners).toEqual({
             segmentHandleTimeChangedCallback,
             segmentSeekFunctionCallback
         });

package/lib/services/segmentHandlers/convertFragmentToSegment.d.ts

@@ -1,2 +1,2 @@
-import { Fragment, Segment } from 'types/interfaces';
+import { Fragment, Segment } from '../../types/interfaces';
 export declare function convertFragmentToSegment(fragment: Fragment): Segment;

package/lib/services/segmentHandlers/handleSegmentSeek.d.ts

@@ -1,4 +1,4 @@
-import { PlayerContext, Segment } from 'types/interfaces';
+import { PlayerContext, Segment } from '../../types/interfaces';
 export declare const handleSegmentSeek: (playerContext: PlayerContext, segment: Segment) => (e: any) => void;
 export declare const getSeekTarget: (event: any) => number;
 export declare const isSeekOutsideSegment: (seekTarget: number, segment: Segment) => boolean;

package/lib/services/segmentHandlers/handleSegmentSeek.test.js

@@ -1,6 +1,6 @@
 import { handleSegmentSeek, getSeekTarget, isSeekOutsideSegment, clampSeekTarget } from './handleSegmentSeek';
-import { mockPlayerContext } from '../../../tests/mocks/mockPlayerContext';
-describe('segmentHandler', () => {
+import createPlayerContextMock from '../../../tests/mocks/playerContextMock';
+describe('handleSegmentSeek', () => {
     const SEGMENT_INPOINT = 500;
     const SEGMENT_OUTPOINT = 1500;
     const SEGMENT_DURATION = 1000;
@@ -8,14 +8,14 @@ describe('segmentHandler', () => {
     const SEEK_TARGET_ABOVE = 1600;
     const SEEK_TARGET_BELOW = 400;
     let segment;
+    let mockPlayerContext;
     beforeEach(() => {
         segment = {
             inpoint: SEGMENT_INPOINT,
             outpoint: SEGMENT_OUTPOINT,
             duration: SEGMENT_DURATION
         };
-    });
-    afterEach(() => {
+        mockPlayerContext = createPlayerContextMock();
         jest.clearAllMocks();
     });
     describe('getSeekTarget', () => {

package/lib/services/segmentHandlers/handleSegmentTimeChanged.d.ts

@@ -1,2 +1,2 @@
-import { PlayerContext, Segment } from 'types/interfaces';
+import { PlayerContext, Segment } from '../../types/interfaces';
 export declare const handleSegmentTimeChanged: (playerContext: PlayerContext, segment: Segment) => (e: any) => void;

package/lib/services/segmentHandlers/handleSegmentTimeChanged.test.js

@@ -1,34 +1,43 @@
-import { mockPlayerContext } from '../../../tests/mocks/mockPlayerContext';
 import { handleSegmentTimeChanged } from './handleSegmentTimeChanged';
+import createPlayerContextMock from '../../../tests/mocks/playerContextMock';
 describe('handleSegmentTimeChanged', () => {
-    const segment = { inpoint: 10, outpoint: 20, duration: 10 };
-    const context = { ...mockPlayerContext };
+    let mockPlayerContext;
+    let mockSegment;
+    const INPOINT = 10;
+    const OUTPOINT = 20;
     beforeEach(() => {
         jest.clearAllMocks();
+        mockPlayerContext = createPlayerContextMock();
+        mockSegment = { inpoint: INPOINT, outpoint: OUTPOINT, duration: OUTPOINT - INPOINT };
     });
-    it('should seek and pause player, and add class when time is greater than outpoint and isFinished is false', () => {
-        const handler = handleSegmentTimeChanged(context, segment);
-        handler({ time: 30 });
-        expect(context.player.seek).toHaveBeenCalledWith(20);
-        expect(context.player.pause).toHaveBeenCalled();
-        expect(context.player.addClassToNpoPlayerElement).toHaveBeenCalledWith('bmpui-player-state-replay');
+    it('should seek to inpoint and pause when time is greater than outpoint', () => {
+        const event = { time: OUTPOINT + 1 };
+        const handler = handleSegmentTimeChanged(mockPlayerContext, mockSegment);
+        handler(event);
+        expect(mockPlayerContext.player.seek).toHaveBeenCalledWith(Math.max(INPOINT, OUTPOINT));
+        expect(mockPlayerContext.player.pause).toHaveBeenCalled();
+        expect(mockPlayerContext.player.addClassToNpoPlayerElement).toHaveBeenCalledWith('bmpui-player-state-replay');
     });
-    it('should reset isFinished and seek to inpoint when time is less than inpoint', () => {
-        const handler = handleSegmentTimeChanged(context, segment);
-        handler({ time: 30 });
-        handler({ time: 9 });
-        expect(context.player.seek).toHaveBeenCalledWith(10);
+    it('should seek to inpoint when time is less than inpoint', () => {
+        const event = { time: INPOINT - 1 };
+        const handler = handleSegmentTimeChanged(mockPlayerContext, mockSegment);
+        handler(event);
+        expect(mockPlayerContext.player.seek).toHaveBeenCalledWith(INPOINT);
     });
-    it('should reset isFinished and seek to inpoint when time is greater than outpoint and isFinished is true', () => {
-        const handler = handleSegmentTimeChanged(context, segment);
-        handler({ time: 21 });
-        handler({ time: 22 });
-        expect(context.player.seek).toHaveBeenCalledWith(10);
+    it('should seek to inpoint when time is greater than outpoint and isFinished is true', () => {
+        const event = { time: OUTPOINT + 1 };
+        const handler = handleSegmentTimeChanged(mockPlayerContext, mockSegment);
+        handler(event);
+        handler({ time: INPOINT - 1 });
+        handler(event);
+        expect(mockPlayerContext.player.seek).toHaveBeenCalledWith(INPOINT);
     });
-    it('should not call pause if time is within inpoint and outpoint', () => {
-        const handler = handleSegmentTimeChanged(context, segment);
-        handler({ time: 15 });
-        expect(context.player.seek).not.toHaveBeenCalled();
-        expect(context.player.pause).not.toHaveBeenCalled();
+    it('should not seek or pause when time is between inpoint and outpoint', () => {
+        const event = { time: (INPOINT + OUTPOINT) / 2 };
+        const handler = handleSegmentTimeChanged(mockPlayerContext, mockSegment);
+        handler(event);
+        expect(mockPlayerContext.player.seek).not.toHaveBeenCalled();
+        expect(mockPlayerContext.player.pause).not.toHaveBeenCalled();
+        expect(mockPlayerContext.player.addClassToNpoPlayerElement).not.toHaveBeenCalled();
     });
 });

package/lib/services/segmentHandlers/initSegment.d.ts

@@ -1,4 +1,4 @@
-import { Fragment, PlayerContext, Segment } from 'types/interfaces';
+import { Fragment, PlayerContext, Segment } from '../../types/interfaces';
 type SegmentOrFragment = {
     segment?: Segment;
     fragment?: Fragment;

package/lib/services/segmentHandlers/initSegment.test.js

@@ -1,7 +1,7 @@
 import { initSegment } from './initSegment';
 import { addSegmentEventListeners } from './addSegmentEventListeners';
 import { convertFragmentToSegment } from './convertFragmentToSegment';
-import { mockPlayerContext } from '../../../tests/mocks/mockPlayerContext';
+import createPlayerContextMock from '../../../tests/mocks/playerContextMock';
 jest.mock('./addSegmentEventListeners');
 jest.mock('./convertFragmentToSegment');
 const createMockSegment = () => ({ inpoint: 10, outpoint: 20, duration: 10 });
@@ -9,8 +9,10 @@ const createMockFragment = () => ({
     sections: [{ time: 0, duration: 10, title: 'Dummy fragment' }]
 });
 describe('initSegment', () => {
+    let mockPlayerContext;
     beforeEach(() => {
         jest.clearAllMocks();
+        mockPlayerContext = createPlayerContextMock();
     });
     it('should convert fragment to segment and seek to inpoint', () => {
         const mockFragment = createMockFragment();

package/lib/services/segmentHandlers/setSegmentMarkers.d.ts

@@ -1,2 +1,2 @@
-import { Segment, TimeLineMarker } from 'types/interfaces';
+import { Segment, TimeLineMarker } from '../../types/interfaces';
 export declare function setSegmentMarkers(segment: Segment, title: string): Array<TimeLineMarker>;

package/lib/services/services.d.ts

@@ -1,4 +1,4 @@
-import { ApiPayload, Fragment, PlayerContext, Profile, Segment, TimeLineMarker, LocalStorageData, LocalStorageValues } from 'types/interfaces';
+import { ApiPayload, Fragment, PlayerContext, Profile, Segment, TimeLineMarker, LocalStorageData, LocalStorageValues, NpoPlayerUIVariants } from '../types/interfaces';
 import { AVType } from '@npotag/tag/dist/types/src/streamTracker';
 export declare class NpoPlayerServices {
     getAVType(avType: string): AVType;
@@ -11,4 +11,6 @@ export declare class NpoPlayerServices {
     getStoredUserPrefs(): LocalStorageData;
     handleUserPrefs(playerContext: PlayerContext): void;
     setAccessibilityAttributes(playerContext: PlayerContext): void;
+    schedulePreRolls(playerContext: PlayerContext): Promise<void>;
+    handleVerticalVideoControls(playerContext: PlayerContext, variant: NpoPlayerUIVariants): void;
 }

package/lib/services/services.js

@@ -5,6 +5,8 @@ import * as DRMHandlers from './drmHandlers/drmhandlers';
 import { setupAccessibilityAttributes } from './a11y/setup';
 import { getLocalStorage, setLocalStorage, setValuesBasedOnLocalStorage } from './localStorageHandlers/localStorageHandlers';
 import { getAVType } from './avTypeHandlers/getAVType';
+import { handlePreRolls } from './advertHandlers/handlePreRolls';
+import { handleVerticalVideoControls } from './verticalVideoHandlers/handleVerticalVideoControls';
 export class NpoPlayerServices {
     getAVType(avType) {
         return getAVType(avType);
@@ -44,4 +46,10 @@ export class NpoPlayerServices {
         }
         return setupAccessibilityAttributes(playerContext);
     }
+    async schedulePreRolls(playerContext) {
+        await handlePreRolls(playerContext);
+    }
+    handleVerticalVideoControls(playerContext, variant) {
+        return handleVerticalVideoControls(playerContext, variant);
+    }
 }

package/lib/services/verticalVideoHandlers/handleVerticalVideoControls.d.ts

@@ -0,0 +1,2 @@
+import { PlayerContext, NpoPlayerUIVariants } from '../../types/interfaces';
+export declare const handleVerticalVideoControls: (playerContext: PlayerContext, variant: NpoPlayerUIVariants) => void;

package/lib/services/verticalVideoHandlers/handleVerticalVideoControls.js

@@ -0,0 +1,8 @@
+import { NpoPlayerUIVariants } from '../../types/interfaces';
+export const handleVerticalVideoControls = (playerContext, variant) => {
+    const MAX_DURATION_IN_SECONDS = 30;
+    const isShortVideo = playerContext.player.getDuration() <= MAX_DURATION_IN_SECONDS;
+    const hasVerticalUI = variant === NpoPlayerUIVariants.VERTICAL;
+    const isVerticalShortVideo = hasVerticalUI && isShortVideo;
+    playerContext.player.toggleClassOnNpoPlayerElement('vertical-short-video', isVerticalShortVideo);
+};

package/lib/services/verticalVideoHandlers/handleVerticalVideoControls.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/services/verticalVideoHandlers/handleVerticalVideoControls.test.js

@@ -0,0 +1,36 @@
+import { NpoPlayerUIVariants } from '../../types/interfaces';
+import { handleVerticalVideoControls } from './handleVerticalVideoControls';
+import createPlayerContextMock from '../../../tests/mocks/playerContextMock';
+describe('handleVerticalVideoControls', () => {
+    const playerContextMock = createPlayerContextMock();
+    const shortVideoClass = 'vertical-short-video';
+    const shortVideoDuration = 20;
+    const longVideoDuration = 60;
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    test('should add vertical-short-video class for vertical UI and short video', () => {
+        ;
+        playerContextMock.player.getDuration.mockReturnValue(shortVideoDuration);
+        handleVerticalVideoControls(playerContextMock, NpoPlayerUIVariants.VERTICAL);
+        expect(playerContextMock.player.toggleClassOnNpoPlayerElement).toHaveBeenCalledWith(shortVideoClass, true);
+    });
+    test('should not add vertical-short-video class for vertical UI and long video', () => {
+        ;
+        playerContextMock.player.getDuration.mockReturnValue(longVideoDuration);
+        handleVerticalVideoControls(playerContextMock, NpoPlayerUIVariants.VERTICAL);
+        expect(playerContextMock.player.toggleClassOnNpoPlayerElement).toHaveBeenCalledWith(shortVideoClass, false);
+    });
+    test('should not add vertical-short-video class for non-vertical UI and short video', () => {
+        ;
+        playerContextMock.player.getDuration.mockReturnValue(shortVideoDuration);
+        handleVerticalVideoControls(playerContextMock, NpoPlayerUIVariants.DEFAULT);
+        expect(playerContextMock.player.toggleClassOnNpoPlayerElement).toHaveBeenCalledWith(shortVideoClass, false);
+    });
+    test('should not add vertical-short-video class for non-vertical UI and long video', () => {
+        ;
+        playerContextMock.player.getDuration.mockReturnValue(longVideoDuration);
+        handleVerticalVideoControls(playerContextMock, NpoPlayerUIVariants.DEFAULT);
+        expect(playerContextMock.player.toggleClassOnNpoPlayerElement).toHaveBeenCalledWith(shortVideoClass, false);
+    });
+});