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"