diff --git a/src/components/side-by-side/side-by-side-wrapper.tsx b/src/components/side-by-side/side-by-side-wrapper.tsx index 6185b05..4c14a62 100644 --- a/src/components/side-by-side/side-by-side-wrapper.tsx +++ b/src/components/side-by-side/side-by-side-wrapper.tsx @@ -4,36 +4,28 @@ import {Animations} from '../../enums'; import {ResponsiveManager} from '../responsive-manager'; import * as styles from './side-by-side.scss'; +interface SideProps { + player: KalturaPlayerTypes.Player | KalturaPlayerTypes.ImagePlayer; + onExpand: () => void; +} + interface SideBySideWrapperComponentProps { - leftPlayer: KalturaPlayerTypes.Player | KalturaPlayerTypes.ImagePlayer; - rightPlayer: KalturaPlayerTypes.Player | KalturaPlayerTypes.ImagePlayer; - switchToPIP: Function; - switchToPIPMinimized: Function; - switchToPIPInverse: Function; + leftSideProps: SideProps; + rightSideProps: SideProps; onSizeChange: () => void; - inverse: boolean; + onMinSize: () => void; } export class SideBySideWrapper extends Component { - render({leftPlayer, rightPlayer, switchToPIP, switchToPIPMinimized, onSizeChange, switchToPIPInverse, inverse}: SideBySideWrapperComponentProps) { - const leftSideProps = { - player: inverse ? rightPlayer : leftPlayer, - onExpand: inverse ? () => switchToPIPInverse(true, Animations.ScaleRight) : () => switchToPIP(true, Animations.ScaleRight), - animation: Animations.ScaleLeft - }; - const rightSideProps = { - player: inverse ? leftPlayer : rightPlayer, - onExpand: inverse ? () => switchToPIP(true, Animations.ScaleLeft) : () => switchToPIPInverse(true, Animations.ScaleLeft), - animation: Animations.Fade - }; + render({leftSideProps, rightSideProps, onSizeChange, onMinSize}: SideBySideWrapperComponentProps) { return ( { - switchToPIPMinimized(false); + onMinSize(); }} onDefaultSize={onSizeChange}>
- - + +
); diff --git a/src/dualscreen.tsx b/src/dualscreen.tsx index d39dae9..5a0b320 100755 --- a/src/dualscreen.tsx +++ b/src/dualscreen.tsx @@ -2,9 +2,9 @@ import {h} from 'preact'; import {DualScreenConfig} from './types/DualScreenConfig'; import {PipChild, PipParent} from './components/pip'; import {PipMinimized} from './components/pip-minimized'; -import {Position, Animations, Layout, ReservedPresetAreas, PlayerType} from './enums'; +import {Animations, Layout, PlayerType, Position, ReservedPresetAreas} from './enums'; import {VideoSyncManager} from './video-sync-manager'; -import {ImageSyncManager} from './image-sync-manager'; +import {ImageSyncManager, ViewChangeData} from './image-sync-manager'; import {ResponsiveManager} from './components/responsive-manager'; import {SecondaryMediaLoader} from './providers/secondary-media-loader'; import {DragAndSnapManager} from './components/drag-and-snap-manager'; @@ -14,6 +14,7 @@ import {DualScreenEngineDecorator} from './dualscreen-engine-decorator'; import {ImagePlayer, SlideItem} from './image-player'; // @ts-ignore import {core} from 'kaltura-player-js'; + const {EventType} = core; const PRESETS = ['Playback', 'Live', 'Ads']; @@ -21,8 +22,7 @@ const PRESETS = ['Playback', 'Live', 'Ads']; export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngineDecoratorProvider { public secondaryKalturaPlayer: KalturaPlayerTypes.Player; private _player: KalturaPlayerTypes.Player; - private _layout: Layout = Layout.PIP; - private _inverse = false; + private _layout: Layout; private _pipPosition: Position = Position.BottomRight; private _removeActivesArr: Function[] = []; private _videoSyncManager?: VideoSyncManager; @@ -32,8 +32,8 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine private _readyPromise: Promise; private _imagePlayer: ImagePlayer; private _secondaryPlayerType = PlayerType.VIDEO; - private _singleLayout = true; private _pipPortraitMode = false; + private _originalVideoElementParent?: HTMLElement; /** * The default configuration of the plugin. @@ -58,8 +58,7 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine this._imagePlayer = new ImagePlayer(this._onActiveSlideChanged); this._readyPromise = this._makeReadyPromise(); this._addBindings(); - this._layout = this.config.layout; - this._inverse = this.config.inverse; + this._layout = Layout.Hidden; this._pipPosition = this.config.position; } @@ -88,8 +87,7 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine } reset(): void { - this._resetMode(); - this._setSingleLayout(); + this._setDefaultMode(); this._imagePlayer.reset(); this._readyPromise = this._makeReadyPromise(); } @@ -107,11 +105,14 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine this.eventManager.listen(this.player, this.player.Event.PLAYBACK_ENDED, () => { this._playbackEnded = true; }); + this.eventManager.listenOnce(this.player, this.player.Event.FIRST_PLAY, () => { + this._originalVideoElementParent = this.player.getVideoElement().parentElement!; + }); this.eventManager.listen(this.player, this.player.Event.PLAY, () => { if (this._playbackEnded) { // reset mode and pip-position on replay this._playbackEnded = false; - this._resetMode(); + this._setDefaultMode(); this._setMode(); } }); @@ -122,21 +123,44 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine }; private _setMode = () => { - this._singleLayout = false; - if (this._layout === Layout.PIP) { - this._inverse ? this._switchToPIPInverse(false) : this._switchToPIP(false); - return; - } - if (this._layout === Layout.SingleMedia) { - this._inverse ? this._switchToPIPMinimizedInverse(false) : this._switchToPIPMinimized(false); - return; + switch (this._layout) { + case Layout.PIP: + this._switchToPIP(); + break; + case Layout.PIPInverse: + this._switchToPIPInverse(); + break; + case Layout.SingleMedia: + this._switchToSingleMedia(); + break; + case Layout.SingleMediaInverse: + this._switchToSingleMediaInverse(); + break; + case Layout.SideBySide: + this._switchToSideBySide(); + break; + case Layout.SideBySideInverse: + this._switchToSideBySideInverse(); + break; + default: + this._switchToHidden(); } - this._switchToSideBySide(false); }; - private _resetMode = () => { - this._layout = this.config.layout; - this._inverse = this.config.inverse; + private _setDefaultMode = () => { + switch (this.config.layout) { + case Layout.PIP: + this._layout = this.config.inverse ? Layout.PIPInverse : Layout.PIP; + break; + case Layout.SideBySide: + this._layout = this.config.inverse ? Layout.SideBySideInverse : Layout.SideBySide; + break; + case Layout.SingleMedia: + this._layout = this.config.inverse ? Layout.SingleMediaInverse : Layout.SingleMedia; + break; + default: + this._layout = Layout.Hidden; + } this._pipPosition = this.config.position; this._pipPortraitMode = false; }; @@ -148,11 +172,6 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine this._removeActivesArr = []; } - private _setSingleLayout = () => { - this._removeActives(); - this._singleLayout = true; - }; - private _setPipPosition = (position: Position) => { this._pipPosition = position; }; @@ -161,13 +180,20 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine return this._pipPosition; }; - private _switchToPIP = (manualChange: boolean, parentAnimation: Animations = Animations.None) => { - setSubtitlesOnTop(true); - if (manualChange) { - this._layout = Layout.PIP; - this._inverse = false; + private _switchToHidden = () => { + this._layout = Layout.Hidden; + this._removeActives(); + }; + + private _switchToPIP = (parentAnimation: Animations = Animations.None) => { + if (this._layout === Layout.PIP && this._removeActivesArr.length) { + return; } + this._layout = Layout.PIP; + + setSubtitlesOnTop(true); this._removeActives(); + this._removeActivesArr.push( this._player.ui.addComponent({ label: 'kaltura-dual-screen-pip', @@ -176,9 +202,8 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine get: () => }) ); - const origPlayerParent: HTMLElement = this._player.getVideoElement().parentElement!; this._removeActivesArr.push(() => { - origPlayerParent.appendChild(this._player.getVideoElement()); + this._originalVideoElementParent!.appendChild(this._player.getVideoElement()); }); this._removeActivesArr.push( this._player.ui.addComponent({ @@ -188,7 +213,7 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine get: () => ( { - this._switchToPIPMinimized(false); + this._switchToSingleMedia(); }} onDefaultSize={this._setMode}> this._switchToPIPMinimized(true)} - onSideBySideSwitch={() => this._switchToSideBySide(true)} - onInversePIP={() => this._switchToPIPInverse(true, Animations.Fade)} + hide={() => this._switchToSingleMedia()} + onSideBySideSwitch={() => this._switchToSideBySide()} + onInversePIP={() => this._switchToPIPInverse(Animations.Fade)} portrait={this._pipPortraitMode} aspectRatio={this.config.childAspectRatio} /> @@ -213,13 +238,13 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine ); }; - private _switchToPIPInverse = (manualChange: boolean, parentAnimation: Animations = Animations.None) => { - setSubtitlesOnTop(true); - - if (manualChange) { - this._layout = Layout.PIP; - this._inverse = true; + private _switchToPIPInverse = (parentAnimation: Animations = Animations.None) => { + if (this._layout === Layout.PIPInverse && this._removeActivesArr.length) { + return; } + this._layout = Layout.PIPInverse; + + setSubtitlesOnTop(true); this._removeActives(); this._removeActivesArr.push( @@ -230,9 +255,8 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine get: () => }) ); - const origPlayerParent: HTMLElement = this._player.getVideoElement().parentElement!; this._removeActivesArr.push(() => { - origPlayerParent.appendChild(this._player.getVideoElement()); + this._originalVideoElementParent!.appendChild(this._player.getVideoElement()); }); this._removeActivesArr.push( this._player.ui.addComponent({ @@ -242,7 +266,7 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine get: () => ( { - this._switchToPIPMinimizedInverse(false); + this._switchToSingleMediaInverse(); }} onDefaultSize={this._setMode}> this._switchToPIPMinimizedInverse(true)} - onSideBySideSwitch={() => this._switchToSideBySide(true)} - onInversePIP={() => this._switchToPIP(true, Animations.Fade)} + hide={() => this._switchToSingleMediaInverse()} + onSideBySideSwitch={() => this._switchToSideBySide()} + onInversePIP={() => this._switchToPIP(Animations.Fade)} aspectRatio={this.config.childAspectRatio} /> @@ -266,14 +290,15 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine ); }; - private _switchToPIPMinimized = (manualChange: boolean, parentAnimation: Animations = Animations.None) => { - setSubtitlesOnTop(false); - - if (manualChange) { - this._layout = Layout.SingleMedia; - this._inverse = false; + private _switchToSingleMedia = (parentAnimation: Animations = Animations.None) => { + if (this._layout === Layout.SingleMedia && this._removeActivesArr.length) { + return; } + this._layout = Layout.SingleMedia; + + setSubtitlesOnTop(false); this._removeActives(); + this._removeActivesArr.push( this._player.ui.addComponent({ label: 'kaltura-dual-screen-pip', @@ -290,9 +315,9 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine get: () => ( this._switchToPIP(true)} + show={() => this._switchToPIP()} player={this._getSecondaryPlayer()} - onInverse={() => this._switchToPIPMinimizedInverse(true, Animations.Fade)} + onInverse={() => this._switchToSingleMediaInverse(Animations.Fade)} /> ) @@ -300,13 +325,13 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine ); }; - private _switchToPIPMinimizedInverse = (manualChange: boolean, parentAnimation: Animations = Animations.None) => { - setSubtitlesOnTop(false); - - if (manualChange) { - this._layout = Layout.SingleMedia; - this._inverse = true; + private _switchToSingleMediaInverse = (parentAnimation: Animations = Animations.None) => { + if (this._layout === Layout.SingleMediaInverse && this._removeActivesArr.length) { + return; } + this._layout = Layout.SingleMediaInverse; + + setSubtitlesOnTop(false); this._removeActives(); this._removeActivesArr.push( @@ -325,9 +350,9 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine get: () => ( this._switchToPIPInverse(true)} + show={() => this._switchToPIPInverse()} player={this._player} - onInverse={() => this._switchToPIPMinimized(true, Animations.Fade)} + onInverse={() => this._switchToSingleMedia(Animations.Fade)} /> ) @@ -335,19 +360,67 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine ); }; - private _switchToSideBySide = (manualChange: boolean) => { + private _switchToSideBySide = () => { + if (this._layout === Layout.SideBySide && this._removeActivesArr.length) { + return; + } + this._layout = Layout.SideBySide; + setSubtitlesOnTop(true); + this._removeActives(); - if (manualChange) { - this._layout = Layout.SideBySide; + this._removeActivesArr.push(() => { + this._originalVideoElementParent!.appendChild(this._player.getVideoElement()); + }); + + const leftSideProps = { + player: this._player, + onExpand: () => this._switchToPIP(Animations.ScaleRight) + }; + const rightSideProps = { + player: this._getSecondaryPlayer(), + onExpand: () => this._switchToPIPInverse(Animations.ScaleLeft) + }; + + this._removeActivesArr.push( + this._player.ui.addComponent({ + label: 'kaltura-dual-screen-side-by-side', + presets: PRESETS, + container: ReservedPresetAreas.VideoContainer, + get: () => ( + + ) + }) + ); + }; + + private _switchToSideBySideInverse = () => { + if (this._layout === Layout.SideBySideInverse && this._removeActivesArr.length) { + return; } + this._layout = Layout.SideBySideInverse; + + setSubtitlesOnTop(true); this._removeActives(); - const origPlayerParent: HTMLElement = this._player.getVideoElement().parentElement!; this._removeActivesArr.push(() => { - origPlayerParent.appendChild(this._player.getVideoElement()); + this._originalVideoElementParent!.appendChild(this._player.getVideoElement()); }); + const leftSideProps = { + player: this._getSecondaryPlayer(), + onExpand: () => this._switchToPIPInverse(Animations.ScaleRight) + }; + const rightSideProps = { + player: this._player, + onExpand: () => this._switchToPIP(Animations.ScaleLeft) + }; + this._removeActivesArr.push( this._player.ui.addComponent({ label: 'kaltura-dual-screen-side-by-side', @@ -355,13 +428,10 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine container: ReservedPresetAreas.VideoContainer, get: () => ( ) }) @@ -371,31 +441,66 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine private _onActiveSlideChanged = (slideItem: SlideItem | null) => { if (!slideItem || slideItem.errored) { // deactivate dual-screen layout - this._setSingleLayout(); + this._switchToHidden(); return; } if (slideItem.portrait !== this._pipPortraitMode) { this._pipPortraitMode = slideItem.portrait; - if (this._layout === Layout.PIP && !this._inverse) { + if (this._layout === Layout.PIP) { // update PIP component this._setMode(); return; } } // apply dual-screen layout - if (this._singleLayout) { + if (this._layout === Layout.Hidden) { + this._setDefaultMode(); this._setMode(); } }; private _getThumbs() { - const kalturaCuePointService :any = this._player.getService('kalturaCuepoints'); - kalturaCuePointService?.registerTypes([kalturaCuePointService.CuepointType.SLIDE]); + const kalturaCuePointService: any = this._player.getService('kalturaCuepoints'); + kalturaCuePointService?.registerTypes([kalturaCuePointService.CuepointType.SLIDE, kalturaCuePointService.CuepointType.VIEW_CHANGE]); } + private _onSlideViewChanged = ({playerViewModeId}: ViewChangeData, viewModeLockState: boolean) => { + if (viewModeLockState) { + this._switchToHidden(); + return; + } + switch (playerViewModeId) { + case 'parent-only': + if (this._layout !== Layout.SingleMedia) { + this._switchToSingleMedia(); + } + break; + case 'pip-parent-in-large': + if (this._layout !== Layout.PIP) { + this._switchToPIP(); + } + break; + case 'pip-parent-in-small': + if (this._layout !== Layout.PIPInverse) { + this._switchToPIPInverse(); + } + break; + case 'sbs-parent-in-left': + if (this._layout !== Layout.SideBySide) { + this._switchToSideBySide(); + } + break; + case 'sbs-parent-in-right': + if (this._layout !== Layout.SideBySideInverse) { + this._switchToSideBySideInverse(); + } + break; + } + }; + private _getSecondaryMedia() { this._player.provider - .doRequest([{loader: SecondaryMediaLoader, params: {parentEntryId: this._player.getMediaInfo().entryId}}]) + .doRequest([{loader: SecondaryMediaLoader, params: {parentEntryId: this._player.sources.id}}]) .then((data: Map) => { if (data && data.has(SecondaryMediaLoader.id)) { const secondaryMediaLoader = data.get(SecondaryMediaLoader.id); @@ -409,6 +514,7 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine this._videoSyncManager = new VideoSyncManager(this.eventManager, this.player, this.secondaryKalturaPlayer, this.logger); this.eventManager.listen(this.secondaryKalturaPlayer, this.player.Event.FIRST_PLAYING, () => { this.logger.debug('secondary player first playing - show dual mode'); + this._setDefaultMode(); this._setMode(); }); this.secondaryKalturaPlayer.loadMedia({entryId, ks: this._player.config.session.ks}); @@ -416,7 +522,7 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine this.logger.warn('Secondary entry id not found'); // subscribe on timed metadata events for image player this._secondaryPlayerType = PlayerType.IMAGE; - this._imageSyncManager = new ImageSyncManager(this.eventManager, this.player, this._imagePlayer, this.logger); + this._imageSyncManager = new ImageSyncManager(this.eventManager, this.player, this._imagePlayer, this.logger, this._onSlideViewChanged); this._resolveReadyPromise(); } } @@ -462,5 +568,4 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine destroy(): void { this.eventManager.destroy(); } - } diff --git a/src/enums/layoutEnum.ts b/src/enums/layoutEnum.ts index 06fbf5a..b6f5430 100644 --- a/src/enums/layoutEnum.ts +++ b/src/enums/layoutEnum.ts @@ -1,5 +1,9 @@ export enum Layout { PIP = 'PIP', + PIPInverse = 'PIPInverse', SingleMedia = 'SingleMedia', - SideBySide = 'SideBySide' + SingleMediaInverse = 'SingleMediaInverse', + SideBySide = 'SideBySide', + SideBySideInverse = 'SideBySideInverse', + Hidden = 'Hidden' } diff --git a/src/image-player/image-player.tsx b/src/image-player/image-player.tsx index 11cb683..ffafdc2 100644 --- a/src/image-player/image-player.tsx +++ b/src/image-player/image-player.tsx @@ -25,6 +25,10 @@ export class ImagePlayer { this._onActiveChange = onActiveChanged; } + get active() { + return this._activeImage; + } + public addImage = (item: SlideItem) => { if (!this._images.length || (this._activeImage && this._images[this._images.length - 1].id === this._activeImage.id)) { // preload first or new image @@ -35,6 +39,10 @@ export class ImagePlayer { public setActive = (activeId: string | null) => { if (!activeId) { + if (!this._activeImage) { + // prevent remove image if active is null + return; + } // remove active image this._imagePlayer.style.backgroundImage = 'none'; this._activeImage = null; diff --git a/src/image-sync-manager.ts b/src/image-sync-manager.ts index 54851d4..1ed3e4e 100644 --- a/src/image-sync-manager.ts +++ b/src/image-sync-manager.ts @@ -2,43 +2,55 @@ import {cuepoint} from 'kaltura-player-js'; import {ImagePlayer} from './image-player'; -export const ThumbCuePointType = 'thumbCuePoint.Thumb'; // TODO: use enum and interface from cue-point service once it got deployed - interface TimedMetadata { payload: { - cues: Array<{ - track: { - label: string; - }; - value: { - data: { - id: string; - cuePointType: string; - assetUrl: string; - }; - key: string; - }; - }>; + cues: Array; + label: string; + }; +} + +interface Cue { + track: { + label: string; + }; + value: { + data: { + id: string; + cuePointType: string; + assetUrl: string; + partnerData: ViewChangeData; + }; + key: string; }; } +export interface ViewChangeData { + playerViewModeId?: string; + viewModeLockState?: string; +} + export class ImageSyncManager { _eventManager: KalturaPlayerTypes.EventManager; _mainPlayer: KalturaPlayerTypes.Player; _imagePlayer: ImagePlayer; _logger: KalturaPlayerTypes.Logger; + _onSlideViewChanged: (viewChangeData: ViewChangeData, viewModeLockState: boolean) => void; + _kalturaCuePointService: any; constructor( eventManager: KalturaPlayerTypes.EventManager, mainPlayer: KalturaPlayerTypes.Player, imagePlayer: ImagePlayer, - logger: KalturaPlayerTypes.Logger + logger: KalturaPlayerTypes.Logger, + onSlideViewChanged: (viewChangeData: ViewChangeData, viewModeLockState: boolean) => void ) { this._eventManager = eventManager; this._mainPlayer = mainPlayer; this._imagePlayer = imagePlayer; this._logger = logger; + this._onSlideViewChanged = onSlideViewChanged; this._syncEvents(); + this._kalturaCuePointService = this._mainPlayer.getService('kalturaCuepoints'); } private _syncEvents = () => { @@ -46,16 +58,29 @@ export class ImageSyncManager { this._eventManager.listen(this._mainPlayer, this._mainPlayer.Event.TIMED_METADATA_ADDED, this._onTimedMetadataAdded); }; - private _onTimedMetadata = ({payload}: TimedMetadata) => { - const activeSlide = payload.cues?.find(cue => { - return cue.track?.label === cuepoint.CUE_POINTS_TEXT_TRACK && cue.value?.data?.cuePointType === ThumbCuePointType; - }); - this._imagePlayer.setActive(activeSlide ? activeSlide.value.data.id : null); + private _onTimedMetadata = () => { + // TODO: use single "metadata" TextTrack once cue-point manager become use it + const kalturaCuePoints = this._mainPlayer.cuePointManager.getActiveCuePoints(); + if (kalturaCuePoints.length) { + const activeSlide = Array.from(kalturaCuePoints).find(cue => { + return cue.value?.data?.cuePointType === this._kalturaCuePointService.KalturaCuePointType.THUMB; + }); + // TODO: consider set single layout from view-change cue-points + this._imagePlayer.setActive(activeSlide ? activeSlide.value.data.id : null); + + const viewChanges = Array.from(kalturaCuePoints).filter(cue => { + return cue.value?.data?.cuePointType === this._kalturaCuePointService.KalturaCuePointType.CODE; + }); + const lock = viewChanges.find(viewChange => (viewChange.value?.data?.partnerData?.viewModeLockState === 'locked')); + viewChanges.forEach(viewChange => { + this._onSlideViewChanged(viewChange.value.data.partnerData, !!lock); + }); + } }; private _onTimedMetadataAdded = ({payload}: TimedMetadata) => { payload.cues.forEach(cue => { - if (cue?.value?.key === cuepoint.CUE_POINT_KEY && cue.value?.data?.cuePointType === ThumbCuePointType) { + if (cue?.value?.key === cuepoint.CUE_POINT_KEY && cue.value?.data?.cuePointType === this._kalturaCuePointService.KalturaCuePointType.THUMB) { this._imagePlayer.addImage({ id: cue.value.data.id, imageUrl: cue.value.data.assetUrl, diff --git a/test/src/image-sync-manager.spec.js b/test/src/image-sync-manager.spec.js index ac7e50f..8879816 100644 --- a/test/src/image-sync-manager.spec.js +++ b/test/src/image-sync-manager.spec.js @@ -1,7 +1,6 @@ import {setup} from 'kaltura-player-js'; import * as TestUtils from './utils/test-utils'; import {core, cuepoint} from 'kaltura-player-js'; -import {ThumbCuePointType} from '../../src/image-sync-manager'; const {EventType} = core; describe('KDualscreenPlugin', function () { @@ -63,11 +62,11 @@ describe('KDualscreenPlugin', function () { it('should handle TIMED_METADATA_ADDED event', done => { player.addEventListener(EventType.TIMED_METADATA_ADDED, ({payload}) => { expect(payload.cues[0].value.key).to.eql(cuepoint.CUE_POINT_KEY); - expect(payload.cues[0].value.data.cuePointType).to.eql(ThumbCuePointType); + expect(payload.cues[0].value.data.cuePointType).to.eql("thumbCuePoint.Thumb"); done(); }); player.addEventListener(EventType.MEDIA_LOADED, () => { - player.cuePointManager.addCuePoints([kalturaCuePoint]); + player.cuePointManager.addCuePoints([kalturaCuePoint]); }); player.play(); }); diff --git a/test/src/video-sync-manager.spec.js b/test/src/video-sync-manager.spec.js index 52b8915..457c831 100644 --- a/test/src/video-sync-manager.spec.js +++ b/test/src/video-sync-manager.spec.js @@ -53,14 +53,14 @@ describe('KDualscreenPlugin', function () { }); }); - describe('VideoSyncManager', () => { - beforeEach(() => { - sandbox = sinon.createSandbox(); - [playerMain, playerSecondary] = targets.map(target => { - return setup({...config, targetId: target}); - }); + beforeEach(() => { + sandbox = sinon.createSandbox(); + [playerMain, playerSecondary] = targets.map(target => { + return setup({...config, targetId: target}); }); + }); + describe('VideoSyncManager', () => { it('should sync play & pause events', done => { new VideoSyncManager(new EventManager(), playerMain, playerSecondary, {debug: TestUtils.noop}); playerSecondary.addEventListener(EventType.PLAY, () => {