Add playlist embed E2E test

4 files changed, 109 insertions, 52 deletions

diff --git a/client/e2e/src/po/player.po.ts b/client/e2e/src/po/player.po.ts
new file mode 100644
index 000000000..c03f20c68
--- /dev/null
+++ b/client/e2e/src/po/player.po.ts
@@ -0,0 +1,54 @@
+import { browser, by, element, ExpectedConditions } from 'protractor'
+import { browserSleep, isIOS, isMobileDevice } from '../utils'
+
+export class PlayerPage {
+
+  getWatchVideoPlayerCurrentTime () {
+    return element(by.css('.video-js .vjs-current-time-display'))
+      .getText()
+      .then((t: string) => t.split(':')[1])
+      .then(seconds => parseInt(seconds, 10))
+  }
+
+  waitUntilPlaylistInfo (text: string) {
+    const elem = element(by.css('.video-js .vjs-playlist-info'))
+
+    return browser.wait(browser.ExpectedConditions.textToBePresentInElement(elem, text))
+  }
+
+  async playAndPauseVideo (isAutoplay: boolean) {
+    // Autoplay is disabled on iOS
+    if (isAutoplay === false || await isIOS()) {
+      await this.clickOnPlayButton()
+    }
+
+    await browserSleep(2000)
+    await browser.wait(browser.ExpectedConditions.invisibilityOf(element(by.css('.vjs-loading-spinner'))))
+
+    const videojsEl = element(by.css('div.video-js'))
+    await browser.wait(browser.ExpectedConditions.elementToBeClickable(videojsEl))
+
+    // On Android, we need to click twice on "play" (BrowserStack particularity)
+    if (await isMobileDevice()) {
+      await browserSleep(5000)
+
+      await videojsEl.click()
+    }
+
+    browser.ignoreSynchronization = false
+    await browserSleep(7000)
+    browser.ignoreSynchronization = true
+
+    await videojsEl.click()
+  }
+
+  async playVideo () {
+    return this.clickOnPlayButton()
+  }
+
+  private async clickOnPlayButton () {
+    const playButton = element(by.css('.vjs-big-play-button'))
+    await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton))
+    await playButton.click()
+  }
+}
diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts
index 35ec773af..fb9c3a000 100644
--- a/client/e2e/src/po/video-watch.po.ts
+++ b/client/e2e/src/po/video-watch.po.ts
@@ -1,5 +1,5 @@
 import { browser, by, element, ElementFinder, ExpectedConditions } from 'protractor'
-import { browserSleep, isIOS, isMobileDevice } from '../utils'
+import { browserSleep, isMobileDevice } from '../utils'
 
 export class VideoWatchPage {
   async goOnVideosList (isMobileDevice: boolean, isSafari: boolean) {
@@ -37,43 +37,24 @@ export class VideoWatchPage {
     return browser.wait(browser.ExpectedConditions.textToBePresentInElement(elem, videoName))
   }
 
-  getWatchVideoPlayerCurrentTime () {
-    return element(by.css('.video-js .vjs-current-time-display'))
-      .getText()
-      .then((t: string) => t.split(':')[1])
-      .then(seconds => parseInt(seconds, 10))
-  }
-
   getVideoName () {
     return this.getVideoNameElement().getText()
   }
 
-  async playAndPauseVideo (isAutoplay: boolean) {
-    // Autoplay is disabled on iOS
-    if (isAutoplay === false || await isIOS()) {
-      const playButton = element(by.css('.vjs-big-play-button'))
-      await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton))
-      await playButton.click()
-    }
-
-    await browserSleep(2000)
-    await browser.wait(browser.ExpectedConditions.invisibilityOf(element(by.css('.vjs-loading-spinner'))))
-
-    const videojsEl = element(by.css('div.video-js'))
-    await browser.wait(browser.ExpectedConditions.elementToBeClickable(videojsEl))
-
-    // On Android, we need to click twice on "play" (BrowserStack particularity)
-    if (await isMobileDevice()) {
-      await browserSleep(5000)
+  async goOnAssociatedEmbed () {
+    let url = await browser.getCurrentUrl()
+    url = url.replace('/watch/', '/embed/')
+    url = url.replace(':3333', ':9001')
 
-      await videojsEl.click()
-    }
+    return browser.get(url)
+  }
 
-    browser.ignoreSynchronization = false
-    await browserSleep(7000)
-    browser.ignoreSynchronization = true
+  async goOnP2PMediaLoaderEmbed () {
+    return browser.get('https://peertube2.cpy.re/videos/embed/969bf103-7818-43b5-94a0-de159e13de50')
+  }
 
-    await videojsEl.click()
+  async goOnP2PMediaLoaderPlaylistEmbed () {
+    return browser.get('https://peertube2.cpy.re/video-playlists/embed/73804a40-da9a-40c2-b1eb-2c6d9eec8f0a')
   }
 
   async clickOnVideo (videoName: string) {
@@ -101,18 +82,6 @@ export class VideoWatchPage {
     return textToReturn
   }
 
-  async goOnAssociatedEmbed () {
-    let url = await browser.getCurrentUrl()
-    url = url.replace('/watch/', '/embed/')
-    url = url.replace(':3333', ':9001')
-
-    return browser.get(url)
-  }
-
-  async goOnP2PMediaLoaderEmbed () {
-    return browser.get('https://peertube2.cpy.re/videos/embed/969bf103-7818-43b5-94a0-de159e13de50')
-  }
-
   async clickOnUpdate () {
     const dropdown = element(by.css('my-video-actions-dropdown .action-button'))
     await dropdown.click()
diff --git a/client/e2e/src/videos.e2e-spec.ts b/client/e2e/src/videos.e2e-spec.ts
index 75fa89e28..97d1b827c 100644
--- a/client/e2e/src/videos.e2e-spec.ts
+++ b/client/e2e/src/videos.e2e-spec.ts
@@ -2,6 +2,7 @@ import { browser } from 'protractor'
 import { AppPage } from './po/app.po'
 import { LoginPage } from './po/login.po'
 import { MyAccountPage } from './po/my-account'
+import { PlayerPage } from './po/player.po'
 import { VideoUpdatePage } from './po/video-update.po'
 import { VideoUploadPage } from './po/video-upload.po'
 import { VideoWatchPage } from './po/video-watch.po'
@@ -23,6 +24,7 @@ describe('Videos workflow', () => {
   let myAccountPage: MyAccountPage
   let loginPage: LoginPage
   let appPage: AppPage
+  let playerPage: PlayerPage
 
   let videoName = new Date().getTime() + ' video'
   const video2Name = new Date().getTime() + ' second video'
@@ -36,6 +38,7 @@ describe('Videos workflow', () => {
     myAccountPage = new MyAccountPage()
     loginPage = new LoginPage()
     appPage = new AppPage()
+    playerPage = new PlayerPage()
 
     if (await isIOS()) {
       // iOS does not seem to work with protractor
@@ -99,8 +102,8 @@ describe('Videos workflow', () => {
   it('Should play the video', async () => {
     videoWatchUrl = await browser.getCurrentUrl()
 
-    await videoWatchPage.playAndPauseVideo(true)
-    expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
+    await playerPage.playAndPauseVideo(true)
+    expect(playerPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
   })
 
   it('Should watch the associated embed video', async () => {
@@ -108,8 +111,8 @@ describe('Videos workflow', () => {
 
     await videoWatchPage.goOnAssociatedEmbed()
 
-    await videoWatchPage.playAndPauseVideo(false)
-    expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
+    await playerPage.playAndPauseVideo(false)
+    expect(playerPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
 
     await browser.waitForAngularEnabled(true)
   })
@@ -119,8 +122,8 @@ describe('Videos workflow', () => {
 
     await videoWatchPage.goOnP2PMediaLoaderEmbed()
 
-    await videoWatchPage.playAndPauseVideo(false)
-    expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
+    await playerPage.playAndPauseVideo(false)
+    expect(playerPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
 
     await browser.waitForAngularEnabled(true)
   })
@@ -178,19 +181,44 @@ describe('Videos workflow', () => {
 
     await myAccountPage.playPlaylist()
 
+    await browser.waitForAngularEnabled(false)
+
     await videoWatchPage.waitUntilVideoName(video2Name, 20000 * 1000)
+
+    await browser.waitForAngularEnabled(true)
   })
 
   it('Should watch the webtorrent playlist in the embed', async () => {
     if (await skipIfUploadNotSupported()) return
 
+    const accessToken = await browser.executeScript(`return window.localStorage.getItem('access_token');`)
+    const refreshToken = await browser.executeScript(`return window.localStorage.getItem('refresh_token');`)
+
     await browser.waitForAngularEnabled(false)
 
     await myAccountPage.goOnAssociatedPlaylistEmbed()
 
-    await videoWatchPage.playAndPauseVideo(false)
+    await browser.executeScript(`window.localStorage.setItem('access_token', '${accessToken}');`)
+    await browser.executeScript(`window.localStorage.setItem('refresh_token', '${refreshToken}');`)
+    await browser.executeScript(`window.localStorage.setItem('token_type', 'Bearer');`)
 
-    await videoWatchPage.waitUntilVideoName(video2Name, 20000 * 1000)
+    await browser.refresh()
+
+    await playerPage.playVideo()
+
+    await playerPage.waitUntilPlaylistInfo('2/2')
+
+    await browser.waitForAngularEnabled(true)
+  })
+
+  it('Should watch the HLS playlist in the embed', async () => {
+    await browser.waitForAngularEnabled(false)
+
+    await videoWatchPage.goOnP2PMediaLoaderPlaylistEmbed()
+
+    await playerPage.playVideo()
+
+    await playerPage.waitUntilPlaylistInfo('2/2')
 
     await browser.waitForAngularEnabled(true)
   })
@@ -198,6 +226,9 @@ describe('Videos workflow', () => {
   it('Should delete the video 2', async () => {
     if (await skipIfUploadNotSupported()) return
 
+    // Go to the dev website
+    await browser.get(videoWatchUrl)
+
     await myAccountPage.navigateToMyVideos()
 
     await myAccountPage.removeVideo(video2Name)
diff --git a/client/src/assets/player/playlist/playlist-menu.ts b/client/src/assets/player/playlist/playlist-menu.ts
index 37284fb44..a2583047b 100644
--- a/client/src/assets/player/playlist/playlist-menu.ts
+++ b/client/src/assets/player/playlist/playlist-menu.ts
@@ -65,8 +65,11 @@ class PlaylistMenu extends Component {
       className: 'title'
     })
 
+    const playlistChannel = options.playlist.videoChannel
     const leftSubtitle = super.createEl('div', {
-      innerHTML: this.player().localize('By {1}', [ options.playlist.videoChannel.displayName ]),
+      innerHTML: playlistChannel
+        ? this.player().localize('By {1}', [ playlistChannel.displayName ])
+        : '',
       className: 'channel'
     })