3 files changed, 53 insertions, 31 deletions

diff --git a/client/e2e/src/po/video-upload.po.ts b/client/e2e/src/po/video-upload.po.ts
index 1ac696107..1978707e3 100644
--- a/client/e2e/src/po/video-upload.po.ts
+++ b/client/e2e/src/po/video-upload.po.ts
@@ -3,16 +3,26 @@ import { FileDetector } from 'selenium-webdriver/remote'
 import { join } from 'path'
 
 export class VideoUploadPage {
-  navigateTo () {
-    return browser.get('/videos/upload')
+  async navigateTo () {
+    await element(by.css('.header .upload-button')).click()
+
+    return browser.wait(browser.ExpectedConditions.visibilityOf(element(by.css('.upload-video-container'))))
   }
 
   async uploadVideo () {
     browser.setFileDetector(new FileDetector())
 
     const fileToUpload = join(__dirname, '../../fixtures/video.mp4')
+    const fileInputSelector = '.upload-video-container input[type=file]'
+    const parentFileInput = '.upload-video .button-file'
+
+    // Avoid sending keys on non visible element
+    await browser.executeScript(`document.querySelector('${fileInputSelector}').style.opacity = 1`)
+    // await browser.executeScript(`document.querySelector('${fileInputSelector}').style.opacity = 1`)
+    await browser.executeScript(`document.querySelector('${parentFileInput}').style.overflow = 'initial'`)
 
-    await element(by.css('.upload-video-container input[type=file]')).sendKeys(fileToUpload)
+    const elem = element(by.css(fileInputSelector))
+    await elem.sendKeys(fileToUpload)
 
     // Wait for the upload to finish
     await browser.wait(browser.ExpectedConditions.elementToBeClickable(this.getSecondStepSubmitButton()))
diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts
index 0f37e3e33..19d02ff51 100644
--- a/client/e2e/src/po/video-watch.po.ts
+++ b/client/e2e/src/po/video-watch.po.ts
@@ -1,7 +1,7 @@
 import { by, element, browser } from 'protractor'
 
 export class VideoWatchPage {
-  async goOnVideosList (isIphoneDevice: boolean) {
+  async goOnVideosList (isIphoneDevice: boolean, isSafari: boolean) {
     let url: string
 
     if (isIphoneDevice === true) {
@@ -12,11 +12,16 @@ export class VideoWatchPage {
     }
 
     await browser.get(url)
-    return browser.wait(browser.ExpectedConditions.elementToBeClickable(element(this.getFirstVideoListSelector())))
+
+    // Waiting the following element does not work on Safari...
+    if (isSafari === true) return browser.sleep(3000)
+
+    const elem = element.all(by.css('.videos .video-miniature .video-miniature-name')).first()
+    return browser.wait(browser.ExpectedConditions.visibilityOf(elem))
   }
 
   getVideosListName () {
-    return element.all(this.getFirstVideoListSelector())
+    return element.all(by.css('.videos .video-miniature .video-miniature-name'))
                   .getText()
                   .then((texts: any) => texts.map(t => t.trim()))
   }
@@ -33,19 +38,19 @@ export class VideoWatchPage {
       .then(seconds => parseInt(seconds, 10))
   }
 
-  async pauseVideo (pauseAfterMs: number, isMobileDevice: boolean, isIphoneDevice: boolean) {
-    if (isMobileDevice === true) {
-      if (isIphoneDevice === false) {
-        const playButton = element(by.css('.vjs-big-play-button'))
-        await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton))
-        await playButton.click()
-      } else {
-        const playButton = element(by.css('video'))
-        await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton))
-        await playButton.click()
-      }
+  async pauseVideo (pauseAfterMs: number, isAutoplay: boolean, isSafari: boolean) {
+    if (isAutoplay === false) {
+      const playButton = element(by.css('.vjs-big-play-button'))
+      await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton))
+      await playButton.click()
+    }
+
+    if (isSafari === true) {
+      await browser.sleep(1000)
+      await element(by.css('.vjs-play-control')).click()
     }
 
+    await browser.sleep(1000)
     await browser.wait(browser.ExpectedConditions.invisibilityOf(element(by.css('.vjs-loading-spinner'))))
 
     const el = element(by.css('div.video-js'))
@@ -53,11 +58,7 @@ export class VideoWatchPage {
 
     await browser.sleep(pauseAfterMs)
 
-    if (isIphoneDevice === true) {
-      // document.webkitCancelFullScreen()
-    } else {
-      return el.click()
-    }
+    return el.click()
   }
 
   async clickOnVideo (videoName: string) {
@@ -69,7 +70,7 @@ export class VideoWatchPage {
   }
 
   async clickOnFirstVideo () {
-    const video = element(by.css('.videos .video-miniature:first-child .video-miniature-name'))
+    const video = element.all(by.css('.videos .video-miniature .video-miniature-name')).first()
     await browser.wait(browser.ExpectedConditions.elementToBeClickable(video))
     const textToReturn = video.getText()
 
@@ -79,7 +80,11 @@ export class VideoWatchPage {
     return textToReturn
   }
 
-  private getFirstVideoListSelector () {
-    return by.css('.videos .video-miniature-name')
+  async goOnAssociatedEmbed () {
+    let url = await browser.getCurrentUrl()
+    url = url.replace('/watch/', '/embed/')
+    url = url.replace(':3333', ':9001')
+
+    return browser.get(url)
   }
 }
diff --git a/client/e2e/src/videos.e2e-spec.ts b/client/e2e/src/videos.e2e-spec.ts
index c21bc163e..f216f8dd1 100644
--- a/client/e2e/src/videos.e2e-spec.ts
+++ b/client/e2e/src/videos.e2e-spec.ts
@@ -10,6 +10,7 @@ describe('Videos workflow', () => {
   const videoName = new Date().getTime() + ' video'
   let isMobileDevice = false
   let isIphoneDevice = false
+  let isSafari = false
 
   beforeEach(async () => {
     browser.waitForAngularEnabled(false)
@@ -21,6 +22,7 @@ describe('Videos workflow', () => {
     const caps = await browser.getCapabilities()
     isMobileDevice = caps.get('realMobile') === 'true' || caps.get('realMobile') === true
     isIphoneDevice = caps.get('device') === 'iphone'
+    isSafari = caps.get('browserName') && caps.get('browserName').toLowerCase() === 'safari'
   })
 
   it('Should log in', () => {
@@ -38,14 +40,14 @@ describe('Videos workflow', () => {
       return
     }
 
-    pageUploadPage.navigateTo()
+    await pageUploadPage.navigateTo()
 
     await pageUploadPage.uploadVideo()
     return pageUploadPage.validSecondUploadStep(videoName)
   })
 
   it('Should list the video', async () => {
-    await videoWatchPage.goOnVideosList(isIphoneDevice)
+    await videoWatchPage.goOnVideosList(isIphoneDevice, isSafari)
 
     if (isMobileDevice) {
       console.log('Skipping because we are on a real device and BrowserStack does not support file upload.')
@@ -59,16 +61,21 @@ describe('Videos workflow', () => {
   it('Should go on video watch page', async () => {
     let videoNameToExcept = videoName
 
-    if (isMobileDevice && isIphoneDevice) videoNameToExcept = 'PeerTube_Mobile.v.1'
-
-    if (isMobileDevice && isIphoneDevice === false) videoNameToExcept = await videoWatchPage.clickOnFirstVideo()
+    if (isMobileDevice) videoNameToExcept = await videoWatchPage.clickOnFirstVideo()
     else await videoWatchPage.clickOnVideo(videoName)
 
     return videoWatchPage.waitWatchVideoName(videoNameToExcept)
   })
 
   it('Should play the video', async () => {
-    await videoWatchPage.pauseVideo(7000, isMobileDevice, isIphoneDevice)
+    await videoWatchPage.pauseVideo(7000, !isMobileDevice, isSafari)
+    expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
+  })
+
+  it('Should watch the associated embed video', async () => {
+    await videoWatchPage.goOnAssociatedEmbed()
+
+    await videoWatchPage.pauseVideo(7000, false, isSafari)
     expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
   })
 })