11 files changed, 63 insertions, 32 deletions

diff --git a/client/e2e/local-protractor.conf.js b/client/e2e/local-protractor.conf.js
index 53edf26f2..a4990fcef 100644
--- a/client/e2e/local-protractor.conf.js
+++ b/client/e2e/local-protractor.conf.js
@@ -7,20 +7,21 @@ exports.config = {
   allScriptsTimeout: 25000,
   specs: ['./src/**/*.e2e-spec.ts'],
 
-  seleniumAddress: 'http://localhost:4444/wd/hub',
+  directConnect: true,
 
   capabilities: {
     'browserName': 'firefox',
     'moz:firefoxOptions': {
-      'args': ["-headless"],
-      "log": {
+      binary: '/usr/bin/firefox-esr',
+      // args: ["-headless"],
+      log: {
         "level": "info" // default is "info"
       }
     }
   },
 
   // maxSessions: 1,
-  baseUrl: 'http://localhost:3333/',
+  baseUrl: 'http://localhost:3000/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
diff --git a/client/e2e/protractor.conf.js b/client/e2e/protractor.conf.js
index c5c913a4a..51d0b220d 100644
--- a/client/e2e/protractor.conf.js
+++ b/client/e2e/protractor.conf.js
@@ -18,7 +18,6 @@ exports.config = {
   multiCapabilities: [
     {
       browserName: 'Chrome',
-      version: '66',
       name: 'Latest Chrome Desktop'
     },
     {
@@ -28,17 +27,15 @@ exports.config = {
     },
     {
       browserName: 'Firefox',
-      version: '52', // ESR,
-      name: 'Old Firefox ESR Desktop'
+      version: '60', // ESR,
+      name: 'Firefox ESR Desktop'
     },
     {
       browserName: 'Firefox',
-      version: '60',
       name: 'Latest Firefox Desktop'
     },
     {
       browserName: 'Edge',
-      version: '16',
       name: 'Latest Edge Desktop'
     },
     {
diff --git a/client/e2e/src/po/login.po.ts b/client/e2e/src/po/login.po.ts
index 40f958d2b..90b65c7ea 100644
--- a/client/e2e/src/po/login.po.ts
+++ b/client/e2e/src/po/login.po.ts
@@ -11,6 +11,10 @@ export class LoginPage {
 
     await element(by.css('form input[type=submit]')).click()
 
-    return browser.wait(browser.ExpectedConditions.urlContains('/videos/'))
+    expect(this.getLoggedInInfo().getText()).toContain('root')
+  }
+
+  private getLoggedInInfo () {
+    return element(by.css('.logged-in-display-name'))
   }
 }
diff --git a/client/e2e/src/po/video-upload.po.ts b/client/e2e/src/po/video-upload.po.ts
index 1978707e3..f79927abc 100644
--- a/client/e2e/src/po/video-upload.po.ts
+++ b/client/e2e/src/po/video-upload.po.ts
@@ -14,13 +14,14 @@ export class VideoUploadPage {
 
     const fileToUpload = join(__dirname, '../../fixtures/video.mp4')
     const fileInputSelector = '.upload-video-container input[type=file]'
-    const parentFileInput = '.upload-video .button-file'
+    const parentFileInput = '.upload-video-container .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 browser.sleep(1000)
+
     const elem = element(by.css(fileInputSelector))
     await elem.sendKeys(fileToUpload)
 
diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts
index d1e2a73b8..8369e1486 100644
--- a/client/e2e/src/po/video-watch.po.ts
+++ b/client/e2e/src/po/video-watch.po.ts
@@ -44,7 +44,7 @@ export class VideoWatchPage {
       .then(seconds => parseInt(seconds, 10))
   }
 
-  async pauseVideo (isAutoplay: boolean, isMobileDevice: boolean) {
+  async playAndPauseVideo (isAutoplay: boolean, isMobileDevice: boolean) {
     if (isAutoplay === false) {
       const playButton = element(by.css('.vjs-big-play-button'))
       await browser.wait(browser.ExpectedConditions.elementToBeClickable(playButton))
@@ -97,4 +97,8 @@ export class VideoWatchPage {
 
     return browser.get(url)
   }
+
+  async goOnP2PMediaLoaderEmbed () {
+    return browser.get('https://peertube2.cpy.re/videos/embed/4b997fc0-e106-42d9-bff9-ae9d64902bbb?mode=p2p-media-loader')
+  }
 }
diff --git a/client/e2e/src/videos.e2e-spec.ts b/client/e2e/src/videos.e2e-spec.ts
index 606b6ac5d..7f8ba71b1 100644
--- a/client/e2e/src/videos.e2e-spec.ts
+++ b/client/e2e/src/videos.e2e-spec.ts
@@ -12,8 +12,6 @@ describe('Videos workflow', () => {
   let isSafari = false
 
   beforeEach(async () => {
-    await browser.waitForAngularEnabled(false)
-
     videoWatchPage = new VideoWatchPage()
     pageUploadPage = new VideoUploadPage()
     loginPage = new LoginPage()
@@ -21,6 +19,14 @@ describe('Videos workflow', () => {
     const caps = await browser.getCapabilities()
     isMobileDevice = caps.get('realMobile') === 'true' || caps.get('realMobile') === true
     isSafari = caps.get('browserName') && caps.get('browserName').toLowerCase() === 'safari'
+
+    if (isMobileDevice) {
+      console.log('Mobile device detected.')
+    }
+
+    if (isSafari) {
+      console.log('Safari detected.')
+    }
   })
 
   it('Should log in', () => {
@@ -66,14 +72,29 @@ describe('Videos workflow', () => {
   })
 
   it('Should play the video', async () => {
-    await videoWatchPage.pauseVideo(!isMobileDevice, isMobileDevice)
+    await videoWatchPage.playAndPauseVideo(true, isMobileDevice)
     expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
   })
 
   it('Should watch the associated embed video', async () => {
+    await browser.waitForAngularEnabled(false)
+
     await videoWatchPage.goOnAssociatedEmbed()
 
-    await videoWatchPage.pauseVideo(false, isMobileDevice)
+    await videoWatchPage.playAndPauseVideo(false, isMobileDevice)
     expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
+
+    await browser.waitForAngularEnabled(true)
+  })
+
+  it('Should watch the p2p media loader embed video', async () => {
+    await browser.waitForAngularEnabled(false)
+
+    await videoWatchPage.goOnP2PMediaLoaderEmbed()
+
+    await videoWatchPage.playAndPauseVideo(false, isMobileDevice)
+    expect(videoWatchPage.getWatchVideoPlayerCurrentTime()).toBeGreaterThanOrEqual(2)
+
+    await browser.waitForAngularEnabled(true)
   })
 })
diff --git a/client/src/app/core/notification/user-notification-socket.service.ts b/client/src/app/core/notification/user-notification-socket.service.ts
index 493f03e35..3f22da476 100644
--- a/client/src/app/core/notification/user-notification-socket.service.ts
+++ b/client/src/app/core/notification/user-notification-socket.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, NgZone } from '@angular/core'
 import { environment } from '../../../environments/environment'
 import { UserNotification as UserNotificationServer } from '../../../../../shared'
 import { Subject } from 'rxjs'
@@ -13,7 +13,8 @@ export class UserNotificationSocket {
   private socket: SocketIOClient.Socket
 
   constructor (
-    private auth: AuthService
+    private auth: AuthService,
+    private ngZone: NgZone
   ) {}
 
   dispatch (type: NotificationEvent, notification?: UserNotificationServer) {
@@ -32,10 +33,12 @@ export class UserNotificationSocket {
     // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
     const io: typeof import ('socket.io-client') = (await import('socket.io-client') as any).default
 
-    this.socket = io(environment.apiUrl + '/user-notifications', {
-      query: { accessToken: this.auth.getAccessToken() }
-    })
+    this.ngZone.runOutsideAngular(() => {
+      this.socket = io(environment.apiUrl + '/user-notifications', {
+        query: { accessToken: this.auth.getAccessToken() }
+      })
 
-    this.socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
+      this.socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
+    })
   }
 }
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index e57baba5c..b9fd9182f 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -54,8 +54,8 @@ $play-overlay-width: 18px;
 
     transition: all $play-overlay-transition;
 
-    border-top: calc(#{$play-overlay-height} / 2) solid transparent;
-    border-bottom: calc(#{$play-overlay-height} / 2) solid transparent;
+    border-top: ($play-overlay-height / 2) solid transparent;
+    border-bottom: ($play-overlay-height / 2) solid transparent;
 
     border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
 
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
index c7ebcec25..c80efd802 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { Component, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared'
@@ -62,7 +62,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     private router: Router,
     private notifier: Notifier,
     private serverService: ServerService,
-    private i18nPrimengCalendarService: I18nPrimengCalendarService
+    private i18nPrimengCalendarService: I18nPrimengCalendarService,
+    private ngZone: NgZone
   ) {
     this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS
     this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES
@@ -132,9 +133,11 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     this.videoLicences = this.serverService.getVideoLicences()
     this.videoLanguages = this.serverService.getVideoLanguages()
 
-    this.schedulerInterval = setInterval(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute
-
     this.initialVideoCaptions = this.videoCaptions.map(c => c.language.id)
+
+    this.ngZone.runOutsideAngular(() => {
+      this.schedulerInterval = setInterval(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute
+    })
   }
 
   ngOnDestroy () {
diff --git a/scripts/e2e/index.sh b/scripts/e2e/index.sh
index cf2e04356..3856af06e 100755
--- a/scripts/e2e/index.sh
+++ b/scripts/e2e/index.sh
@@ -6,7 +6,6 @@ npm run clean:server:test
 
 (
     cd client
-    npm run webdriver-manager update
     npm run webpack -- --config webpack/webpack.video-embed.js --mode development
 )
 
diff --git a/scripts/e2e/local.sh b/scripts/e2e/local.sh
index 65ec653dc..b883ccaa3 100755
--- a/scripts/e2e/local.sh
+++ b/scripts/e2e/local.sh
@@ -6,11 +6,9 @@ npm run clean:server:test
 
 (
     cd client
-    npm run webdriver-manager update
     npm run webpack -- --config webpack/webpack.video-embed.js --mode development
 )
 
 npm run concurrently -- -k -s first \
-    "cd client && npm run webdriver-manager start" \
     "cd client && npm run ng -- e2e --port 3333 -c local" \
     "NODE_ENV=test NODE_APP_INSTANCE=1 NODE_CONFIG='{ \"log\": { \"level\": \"warning\" } }' npm start"