@playkit-js/playkit-js-dual-screen 3.1.5 → 3.1.6-canary.2-b0a1d2f

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.1.6-canary.2-b0a1d2f](https://github.com/kaltura/playkit-js-dual-screen/compare/v3.1.5...v3.1.6-canary.2-b0a1d2f) (2023-05-16)
+
+
+
 ### [3.1.5](https://github.com/kaltura/playkit-js-dual-screen/compare/v3.1.4...v3.1.5) (2023-05-15)
 
 

package/cypress/e2e/dual-screen.cy.ts

@@ -0,0 +1,353 @@
+// @ts-ignore
+import {core} from '@playkit-js/kaltura-player-js';
+import {mockKalturaBe, loadPlayer, MANIFEST, MANIFEST_SAFARI, getPlayer} from './env';
+
+const {EventType, FakeEvent, Error} = core;
+
+describe('Dual-Screen plugin', () => {
+  beforeEach(() => {
+    // manifest
+    cy.intercept('GET', '**/a.m3u8*', Cypress.browser.name === 'webkit' ? MANIFEST_SAFARI : MANIFEST);
+    // thumbnails
+    cy.intercept('GET', '**/width/164/vid_slices/100', {fixture: '100.jpeg'});
+    cy.intercept('GET', '**/height/360/width/640', {fixture: '640.jpeg'});
+    // kava
+    cy.intercept('GET', '**/index.php?service=analytics*', {});
+  });
+
+  describe('dual-screen layouts', () => {
+    it("should not render dual-screen layout if main entry doesn't have child entries", () => {
+      mockKalturaBe('dual-screen-0-media.json', 'cue-points-empty.json');
+      loadPlayer().then(() => {
+        cy.get('[data-testid="dualscreen_pipChildren"]', {timeout: 1000}).should('not.exist');
+        cy.get('[data-testid="dualscreen_pipParent"]', {timeout: 1000}).should('not.exist');
+      });
+    });
+    it('should render PiP dual-screen layout', () => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(() => {
+        cy.get('[data-testid="dualscreen_pipChildren"]').should('exist');
+        cy.get('[data-testid="dualscreen_pipParent"]').should('exist');
+        cy.get('[data-testid="dualscreen_multiscreenWrapper"]').should('not.exist');
+      });
+    });
+    it('should render SbS dual-screen layout', () => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'SideBySide'}).then(() => {
+        cy.get('[data-testid="dualscreen_sideBySideWrapper"]').should('exist');
+      });
+    });
+    it('should render SingleMedia dual-screen layout if main entry has child entry', () => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'SingleMedia'}).then(() => {
+        cy.get('[data-testid="dualscreen_pipMinimized"]').should('exist');
+        cy.get('[data-testid="dualscreen_pipParent"]').should('exist');
+      });
+    });
+    it('should render dual-screen layout with multiscreen', () => {
+      mockKalturaBe('dual-screen-2-media.json', 'cue-points-empty.json');
+      loadPlayer().then(() => {
+        cy.get('[data-testid="dualscreen_multiscreenWrapper"]').should('exist');
+      });
+    });
+  });
+
+  describe('PIP layout', () => {
+    it('should change layout to SideBySide', () => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(() => {
+        cy.get('[data-testid="dualscreen_sideBySideWrapper"]').should('not.exist');
+        cy.get('[data-testid="dualscreen_pipChildren"]').within(() => {
+          cy.get('[data-testid="dualscreen_switchToSideBySide"]').click({force: true});
+        });
+        cy.get('[data-testid="dualscreen_sideBySideWrapper"]').should('exist');
+        cy.get('[data-testid="dualscreen_pipChildren"]').should('not.exist');
+        cy.get('[data-testid="dualscreen_pipParent"]').should('not.exist');
+      });
+    });
+    it('should change layout to PIP inverse', () => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(() => {
+        cy.get('[data-testid="dualscreen_pipChildren"]').within(() => {
+          cy.get('[data-testid="dualscreen_inversePIP"]').click({force: true});
+        });
+        cy.get('[data-testid="dualscreen_pipChildren"]').should('exist');
+        cy.get('[data-testid="dualscreen_pipParent"]').should('exist');
+      });
+    });
+    it('should change layout to SingleMedia', () => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(() => {
+        cy.get('[data-testid="dualscreen_pipMinimized"]').should('not.exist');
+        cy.get('[data-testid="dualscreen_pipChildren"]').within(() => {
+          cy.get('[data-testid="dualscreen_switchToSingleMedia"]').click({force: true});
+        });
+        cy.get('[data-testid="dualscreen_pipParent"]').should('exist');
+        cy.get('[data-testid="dualscreen_pipMinimized"]').should('exist');
+        cy.get('[data-testid="dualscreen_pipChildren"]').should('not.exist');
+      });
+    });
+  });
+
+  describe('SingleMedia layout', () => {
+    it('should change layout to PIP', () => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'SingleMedia'}).then(() => {
+        cy.get('[data-testid="dualscreen_pipMinimized"]').within(() => {
+          cy.get('[data-testid="dualscreen_switchToPIP"]').click({force: true});
+        });
+        cy.get('[data-testid="dualscreen_pipChildren"]').should('exist');
+        cy.get('[data-testid="dualscreen_pipParent"]').should('exist');
+        cy.get('[data-testid="dualscreen_pipMinimized"]').should('not.exist');
+      });
+    });
+    it('should change layout to SingleMedia inverse', () => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'SingleMedia'}).then(() => {
+        cy.get('[data-testid="dualscreen_pipMinimized"]').within(() => {
+          cy.get('[data-testid="dualscreen_switchToPrimary"]').click({force: true});
+        });
+        cy.get('[data-testid="dualscreen_pipParent"]').should('exist');
+        cy.get('[data-testid="dualscreen_pipMinimized"]').should('exist');
+      });
+    });
+  });
+
+  describe('SideBySide layout', () => {
+    it('should change layout to PIP', () => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'SideBySide'}).then(() => {
+        cy.get('[data-testid="dualscreen_sideBySideWrapper"]').within(() => {
+          cy.get('[data-testid="dualscreen_switchToPIP"]').should('have.length', 2);
+          cy.get('[data-testid="dualscreen_switchToPIP"]').eq(1).click({force: true});
+        });
+        cy.get('[data-testid="dualscreen_sideBySideWrapper"]').should('not.exist');
+        cy.get('[data-testid="dualscreen_pipChildren"]').should('exist');
+        cy.get('[data-testid="dualscreen_pipParent"]').should('exist');
+      });
+    });
+  });
+
+  describe('Image player', () => {
+    it('should render image player', () => {
+      mockKalturaBe('dual-screen-0-media.json', 'cue-points.json');
+      loadPlayer({}, {startTime: 15}).then(() => {
+        cy.get('[data-testid="dualscreen_imagePlayer"]').should('exist');
+      });
+    });
+    it('should render image player when playback reached slide start-time', () => {
+      mockKalturaBe('dual-screen-0-media.json', 'cue-points.json');
+      loadPlayer().then(player => {
+        cy.get('[data-testid="dualscreen_imagePlayer"]')
+          .should('not.exist')
+          .then(() => {
+            player.currentTime = 15;
+            cy.get('[data-testid="dualscreen_imagePlayer"]').should('exist');
+          });
+      });
+    });
+    it("should hide image player if playback haven't reached slide start-time", () => {
+      mockKalturaBe('dual-screen-0-media.json', 'cue-points.json');
+      loadPlayer({}, {startTime: 15}).then(player => {
+        cy.get('[data-testid="dualscreen_imagePlayer"]')
+          .should('exist')
+          .then(() => {
+            player.currentTime = 0;
+            cy.get('[data-testid="dualscreen_imagePlayer"]').should('not.exist');
+          });
+      });
+    });
+  });
+
+  describe('Multiscreen', () => {
+    it('should render one multiscreen wrapper with multiscreen player', () => {
+      mockKalturaBe('dual-screen-2-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(() => {
+        cy.get('[data-testid="dualscreen_multiscreen"]').should('have.length', 1);
+        cy.get('[data-testid="dualscreen_multiscreen"]').within(() => {
+          cy.get('[data-testid="dualscreen_multiscreenPlayer"]').should('have.length', 1);
+        });
+      });
+    });
+    it.skip('should render multiscreen wrapper with 2 players', () => {
+      // TODO: enable test after fix done for image player in multiscreen
+      mockKalturaBe('dual-screen-2-media.json', 'cue-points.json');
+      loadPlayer({}, {startTime: 15}).then(() => {
+        cy.get('[data-testid="dualscreen_multiscreen"]').within(() => {
+          cy.get('[data-testid="dualscreen_multiscreenPlayer"]').should('have.length', 2);
+        });
+      });
+    });
+    it('should toggle multiscreen menu', () => {
+      mockKalturaBe('dual-screen-2-media.json', 'cue-points-empty.json');
+      loadPlayer().then(() => {
+        cy.get('[data-testid="dualscreen_multiscreen"]').should('have.css', 'visibility', 'hidden');
+        cy.get('[data-testid="dualscreen_multiscreenButton"]').click({force: true});
+        cy.get('[data-testid="dualscreen_multiscreen"]').should('have.css', 'visibility', 'visible');
+        cy.get('[data-testid="dualscreen_multiscreenButton"]').click({force: true});
+        cy.get('[data-testid="dualscreen_multiscreen"]').should('have.css', 'visibility', 'hidden');
+      });
+    });
+    it('should close multiscreen menu on document click', () => {
+      mockKalturaBe('dual-screen-2-media.json', 'cue-points-empty.json');
+      loadPlayer().then(() => {
+        cy.get('[data-testid="dualscreen_multiscreenButton"]').click({force: true});
+        cy.get('[data-testid="dualscreen_multiscreen"]').should('have.css', 'visibility', 'visible');
+        cy.get('[data-testid="dualscreen_pipChildren"]').click({force: true});
+        cy.get('[data-testid="dualscreen_multiscreen"]').should('have.css', 'visibility', 'hidden');
+      });
+    });
+    it('should render 2 multiscreen wrappers', () => {
+      mockKalturaBe('dual-screen-2-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'SideBySide'}).then(() => {
+        cy.get('[data-testid="dualscreen_multiscreen"]').should('have.length', 2);
+      });
+    });
+    it('should render 2 minimized players', () => {
+      mockKalturaBe('dual-screen-2-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'SingleMedia'}).then(() => {
+        cy.get('[data-testid="dualscreen_multiscreen"]').should('not.exist');
+        cy.get('[data-testid="dualscreen_pipMinimized"]').should('have.length', 1);
+        cy.get('[data-testid="dualscreen_pipMinimizedPlayer"]').should('have.length', 2);
+      });
+    });
+  });
+
+  describe('Video sync manager', () => {
+    it('should sync play & pause events', done => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(playerMain => {
+        cy.get('[data-testid="dualscreen_pipChildren"]').then(() => {
+          getPlayer('secondaryPlaceholder-1_3vus9bhe').then(playerSecondary => {
+            playerSecondary.addEventListener(EventType.PAUSE, () => {
+              playerMain.play();
+              playerSecondary.addEventListener(EventType.PLAY, () => {
+                done();
+              });
+            });
+            playerMain.pause();
+          });
+        });
+      });
+    });
+
+    it('should sync seek event', done => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(playerMain => {
+        playerMain.pause();
+        cy.get('[data-testid="dualscreen_pipChildren"]').then(() => {
+          getPlayer('secondaryPlaceholder-1_3vus9bhe').then(playerSecondary => {
+            const listener = () => {
+              playerSecondary.removeEventListener(EventType.SEEKED, listener);
+              done();
+            };
+            playerSecondary.addEventListener(EventType.SEEKED, listener);
+            playerMain.currentTime = 5;
+          });
+        });
+      });
+    });
+
+    it('should sync ended event', done => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(playerMain => {
+        cy.get('[data-testid="dualscreen_pipChildren"]').then(() => {
+          getPlayer('secondaryPlaceholder-1_3vus9bhe').then(playerSecondary => {
+            playerMain.addEventListener(EventType.ENDED, () => {
+              try {
+                expect(playerSecondary.paused).to.be.true;
+                done();
+              } catch (e) {
+                done(e);
+              }
+            });
+            playerMain.dispatchEvent(new FakeEvent(EventType.ENDED));
+          });
+        });
+      });
+    });
+
+    it('should handle error', done => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(playerMain => {
+        cy.get('[data-testid="dualscreen_pipChildren"]').then(() => {
+          getPlayer('secondaryPlaceholder-1_3vus9bhe').then(playerSecondary => {
+            playerMain.addEventListener(EventType.ERROR, () => {
+              done();
+            });
+            playerSecondary.dispatchEvent(
+              new FakeEvent(
+                EventType.ERROR,
+                new Error(Error.Severity.CRITICAL, Error.Category.PLAYER, Error.Code.VIDEO_ERROR, {message: 'fake error'})
+              )
+            );
+          });
+        });
+      });
+    });
+
+    it('should sync primary and secondary players on seek', done => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(playerMain => {
+        cy.get('[data-testid="dualscreen_pipChildren"]').then(() => {
+          getPlayer('secondaryPlaceholder-1_3vus9bhe').then(playerSecondary => {
+            const listener = () => {
+              if (expect(playerSecondary.currentTime).to.be.closeTo(playerMain.currentTime, 0.5)) {
+                playerSecondary.removeEventListener(EventType.SEEKED, listener);
+                done();
+              }
+            };
+            playerSecondary.addEventListener(EventType.SEEKED, listener);
+            playerMain.currentTime = 5;
+          });
+        });
+      });
+    });
+
+    it('should test high accurate sync', done => {
+      mockKalturaBe('dual-screen-1-media.json', 'cue-points-empty.json');
+      loadPlayer({layout: 'PIP'}).then(playerMain => {
+        cy.get('[data-testid="dualscreen_pipChildren"]').then(() => {
+          getPlayer('secondaryPlaceholder-1_3vus9bhe').then(playerSecondary => {
+            const listener = () => {
+              if (expect(playerSecondary.currentTime).to.be.closeTo(playerMain.currentTime, 0.1)) {
+                playerSecondary.removeEventListener(EventType.TIME_UPDATE, listener);
+                done();
+              }
+            };
+            playerSecondary.addEventListener(EventType.TIME_UPDATE, listener);
+            playerMain.currentTime = 10;
+          });
+        });
+      });
+    });
+  });
+
+  describe('Image sync manager', () => {
+    it('should handle TIMED_METADATA_ADDED event', done => {
+      mockKalturaBe('dual-screen-0-media.json', 'cue-points.json');
+      loadPlayer().then(player => {
+        player.addEventListener(EventType.TIMED_METADATA_ADDED, ({payload}: any) => {
+          expect(payload.cues.length).to.eql(2);
+          expect(payload.cues[0].id).to.eql('1_0h1uf07a');
+          expect(payload.cues[0].startTime).to.eql(10);
+          expect(payload.cues[0].endTime).to.eql(15);
+          done();
+        });
+      });
+    });
+    it('should handle TIMED_METADATA event', done => {
+      mockKalturaBe('dual-screen-0-media.json', 'cue-points.json');
+      loadPlayer().then(player => {
+        player.addEventListener(EventType.TIMED_METADATA, ({payload}: any) => {
+          expect(payload.cues.length).to.eql(1);
+          expect(payload.cues[0].id).to.eql('1_0h1uf07a');
+          expect(payload.cues[0].startTime).to.eql(10);
+          expect(payload.cues[0].endTime).to.eql(15);
+          done();
+        });
+        player.currentTime = 10;
+      });
+    });
+  });
+});

package/cypress/e2e/env.ts

@@ -0,0 +1,74 @@
+export const MANIFEST = `#EXTM3U
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="en",NAME="English",AUTOSELECT=YES,DEFAULT=YES,URI="${location.origin}/media/index_1.m3u8",SUBTITLES="subs"
+#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=509496,RESOLUTION=480x272,AUDIO="audio",SUBTITLES="subs"
+${location.origin}/media/index.m3u8`;
+
+export const MANIFEST_SAFARI = `#EXTM3U
+#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",DEFAULT=NO,AUTOSELECT=YES,FORCED=NO,LANGUAGE="en",URI="${location.origin}/media/index_1.m3u8"
+#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=504265,RESOLUTION=480x272,AUDIO="audio",SUBTITLES="subs"
+${location.origin}/media/index.m3u8`;
+
+export const getPlayer = (id = 'player-placeholder') => {
+  // @ts-ignore
+  return cy.window().then($win => $win.KalturaPlayer.getPlayers()[id]);
+};
+
+export const preparePage = (puginConf = {}, playbackConf = {}) => {
+  cy.visit('index.html');
+  return cy.window().then(win => {
+    try {
+      // @ts-ignore
+      var kalturaPlayer = win.KalturaPlayer.setup({
+        targetId: 'player-placeholder',
+        provider: {
+          partnerId: -1,
+          env: {
+            cdnUrl: 'http://mock-cdn',
+            serviceUrl: 'http://mock-api'
+          }
+        },
+        plugins: {
+          dualscreen: puginConf,
+          kalturaCuepoints: {}
+        },
+        playback: {muted: true, autoplay: true, ...playbackConf}
+      });
+      return kalturaPlayer.loadMedia({entryId: '0_wifqaipd'});
+    } catch (e: any) {
+      return Promise.reject(e.message);
+    }
+  });
+};
+
+const checkRequest = (reqBody: any, service: string, action: string) => {
+  return reqBody?.service === service && reqBody?.action === action;
+};
+
+export const loadPlayer = (puginConf = {}, playbackConf: Record<string, any> = {}) => {
+  return preparePage(puginConf, playbackConf).then(() =>
+    getPlayer().then(kalturaPlayer => {
+      if (playbackConf.autoplay) {
+        return kalturaPlayer.ready().then(() => kalturaPlayer);
+      }
+      return kalturaPlayer;
+    })
+  );
+};
+
+export const mockKalturaBe = (dualScreenFixture: string, cuesFixture: string) => {
+  cy.intercept('http://mock-api/service/multirequest', req => {
+    if (checkRequest(req.body[2], 'baseEntry', 'list')) {
+      if (req.body[2].filter.parentEntryIdEqual) {
+        return req.reply({fixture: dualScreenFixture});
+      }
+      return req.reply({fixture: 'base_entry.json'});
+    }
+    if (checkRequest(req.body[2], 'cuepoint_cuepoint', 'list')) {
+      return req.reply({fixture: cuesFixture});
+    }
+    if (checkRequest(req.body[2], 'thumbAsset', 'getUrl')) {
+      return req.reply({fixture: 'thumb-url.json'});
+    }
+  });
+  cy.intercept('GET', '**/ks/123', {fixture: 'thumb-asset.jpeg'}).as('getSlides');
+};