From fe05c3acbd48c72ac7e503bebde91830121a0bf1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 16 Nov 2018 09:16:41 +0100 Subject: Fix player progress bar when changing resolution --- client/src/assets/player/images/tick-white.svg | 12 ++++++++++++ client/src/assets/player/images/tick.svg | 12 ------------ client/src/assets/player/peertube-videojs-plugin.ts | 5 +++++ client/src/sass/player/settings-menu.scss | 4 ++-- 4 files changed, 19 insertions(+), 14 deletions(-) create mode 100644 client/src/assets/player/images/tick-white.svg delete mode 100644 client/src/assets/player/images/tick.svg (limited to 'client') diff --git a/client/src/assets/player/images/tick-white.svg b/client/src/assets/player/images/tick-white.svg new file mode 100644 index 000000000..d329e6bfb --- /dev/null +++ b/client/src/assets/player/images/tick-white.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/assets/player/images/tick.svg b/client/src/assets/player/images/tick.svg deleted file mode 100644 index d329e6bfb..000000000 --- a/client/src/assets/player/images/tick.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 40da5f1f7..4fd5a9be2 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -111,6 +111,8 @@ class PeerTubePlugin extends Plugin { const muted = getStoredMute() if (muted !== undefined) this.player.muted(muted) + this.player.duration(options.videoDuration) + this.initializePlayer() this.runTorrentInfoScheduler() this.runViewAdd() @@ -302,6 +304,9 @@ class PeerTubePlugin extends Plugin { this.flushVideoFile(previousVideoFile) + // Update progress bar (just for the UI), do not wait rendering + if (options.seek) this.player.currentTime(options.seek) + const renderVideoOptions = { autoplay: false, controls: true } renderVideo(torrent.files[ 0 ], this.playerElement, renderVideoOptions, (err, renderer) => { this.renderer = renderer diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss index d065e72fb..61965c85e 100644 --- a/client/src/sass/player/settings-menu.scss +++ b/client/src/sass/player/settings-menu.scss @@ -171,7 +171,7 @@ $setting-transition-easing: ease-out; left: 8px; content: ' '; margin-top: 1px; - background-image: url('#{$assets-path}/player/images/tick.svg'); + background-image: url('#{$assets-path}/player/images/tick-white.svg'); } } } @@ -197,4 +197,4 @@ $setting-transition-easing: ease-out; } } } -} \ No newline at end of file +} -- cgit v1.2.3 From 7373507fa830b0f18cb4cd95dfd923b1600e501d Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 16 Nov 2018 10:05:25 +0100 Subject: Improve video upload error handling --- client/src/app/shared/misc/utils.ts | 7 ++++++- .../video-add-components/video-import-torrent.component.html | 7 ++++++- .../video-add-components/video-import-torrent.component.scss | 8 ++++++++ .../video-add-components/video-import-torrent.component.ts | 9 ++++++--- .../video-add-components/video-import-url.component.html | 8 +++++++- .../video-add-components/video-import-url.component.scss | 8 ++++++++ .../video-add-components/video-import-url.component.ts | 9 ++++++--- .../app/videos/+video-edit/video-add-components/video-send.ts | 1 + .../video-add-components/video-upload.component.html | 9 +++++++-- .../video-add-components/video-upload.component.scss | 10 +++++++++- .../+video-edit/video-add-components/video-upload.component.ts | 9 +++++++-- client/src/app/videos/+video-edit/video-add.component.html | 8 ++++---- client/src/app/videos/+video-edit/video-add.component.ts | 5 +++++ 13 files changed, 80 insertions(+), 18 deletions(-) (limited to 'client') diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index 78be2e5dd..78e8e9682 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -124,6 +124,10 @@ function sortBy (obj: any[], key1: string, key2?: string) { }) } +function scrollToTop () { + window.scroll(0, 0) +} + export { sortBy, durationToString, @@ -135,5 +139,6 @@ export { immutableAssign, objectToFormData, lineFeedToHtml, - removeElementFromArray + removeElementFromArray, + scrollToTop } diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html index a933a64f0..11a81ad66 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html @@ -45,7 +45,12 @@ -
+
+
Sorry, but something went wrong
+ {{ error }} +
+ +
Congratulations, the video will be imported with BitTorrent! You can already add information about this video.
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss index 262b0b68e..00626cd7b 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss @@ -7,6 +7,14 @@ $width-size: 190px; @include peertube-select-container($width-size); } +.alert.alert-danger { + text-align: center; + + & > div { + font-weight: $font-semibold; + } +} + .import-video-torrent { display: flex; flex-direction: column; diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts index e13c06ce9..13776ae36 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts @@ -12,6 +12,7 @@ import { VideoEdit } from '@app/shared/video/video-edit.model' import { FormValidatorService } from '@app/shared' import { VideoCaptionService } from '@app/shared/video-caption' import { VideoImportService } from '@app/shared/video-import' +import { scrollToTop } from '@app/shared/misc/utils' @Component({ selector: 'my-video-import-torrent', @@ -23,9 +24,9 @@ import { VideoImportService } from '@app/shared/video-import' }) export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate { @Output() firstStepDone = new EventEmitter() + @Output() firstStepError = new EventEmitter() @ViewChild('torrentfileInput') torrentfileInput: ElementRef - videoFileName: string magnetUri = '' isImportingVideo = false @@ -33,6 +34,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca isUpdatingVideo = false video: VideoEdit + error: string protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC @@ -104,6 +106,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca err => { this.loadingBar.complete() this.isImportingVideo = false + this.firstStepError.emit() this.notificationsService.error(this.i18n('Error'), err.message) } ) @@ -129,8 +132,8 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca }, err => { - this.isUpdatingVideo = false - this.notificationsService.error(this.i18n('Error'), err.message) + this.error = err.message + scrollToTop() console.error(err) } ) diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html index 9f5fc6d22..533446672 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html @@ -37,7 +37,13 @@
-
+ +
+
Sorry, but something went wrong
+ {{ error }} +
+ +
Congratulations, the video behind {{ targetUrl }} will be imported! You can already add information about this video.
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss index 7c6deda1d..e907edc70 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss @@ -7,6 +7,14 @@ $width-size: 190px; @include peertube-select-container($width-size); } +.alert.alert-danger { + text-align: center; + + & > div { + font-weight: $font-semibold; + } +} + .import-video-url { display: flex; flex-direction: column; diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts index 031e557ed..9cdface75 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts @@ -12,6 +12,7 @@ import { VideoEdit } from '@app/shared/video/video-edit.model' import { FormValidatorService } from '@app/shared' import { VideoCaptionService } from '@app/shared/video-caption' import { VideoImportService } from '@app/shared/video-import' +import { scrollToTop } from '@app/shared/misc/utils' @Component({ selector: 'my-video-import-url', @@ -23,15 +24,16 @@ import { VideoImportService } from '@app/shared/video-import' }) export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate { @Output() firstStepDone = new EventEmitter() + @Output() firstStepError = new EventEmitter() targetUrl = '' - videoFileName: string isImportingVideo = false hasImportedVideo = false isUpdatingVideo = false video: VideoEdit + error: string protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC @@ -96,6 +98,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom err => { this.loadingBar.complete() this.isImportingVideo = false + this.firstStepError.emit() this.notificationsService.error(this.i18n('Error'), err.message) } ) @@ -121,8 +124,8 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom }, err => { - this.isUpdatingVideo = false - this.notificationsService.error(this.i18n('Error'), err.message) + this.error = err.message + scrollToTop() console.error(err) } ) diff --git a/client/src/app/videos/+video-edit/video-add-components/video-send.ts b/client/src/app/videos/+video-edit/video-add-components/video-send.ts index 1bf22e1a9..71d2544d8 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-send.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-send.ts @@ -21,6 +21,7 @@ export abstract class VideoSend extends FormReactive implements OnInit { firstStepChannelId = 0 abstract firstStepDone: EventEmitter + abstract firstStepError: EventEmitter protected abstract readonly DEFAULT_VIDEO_PRIVACY: VideoPrivacy protected loadingBar: LoadingBarService diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html index fa57c8cb5..a09f54dfc 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html @@ -29,7 +29,7 @@
-
+
+
+
Sorry, but something went wrong
+ {{ error }} +
+
- \ No newline at end of file + diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss index dbae5230d..cf1725ef9 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss @@ -5,6 +5,14 @@ @include peertube-select-container(190px); } +.alert.alert-danger { + text-align: center; + + & > div { + font-weight: $font-semibold; + } +} + .upload-video { display: flex; flex-direction: column; @@ -82,4 +90,4 @@ margin-left: 10px; } -} \ No newline at end of file +} diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts index 8e2d0deaf..3fcb71ac3 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts @@ -14,6 +14,7 @@ import { VideoSend } from '@app/videos/+video-edit/video-add-components/video-se import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service' import { FormValidatorService, UserService } from '@app/shared' import { VideoCaptionService } from '@app/shared/video-caption' +import { scrollToTop } from '@app/shared/misc/utils' @Component({ selector: 'my-video-upload', @@ -25,6 +26,7 @@ import { VideoCaptionService } from '@app/shared/video-caption' }) export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate { @Output() firstStepDone = new EventEmitter() + @Output() firstStepError = new EventEmitter() @ViewChild('videofileInput') videofileInput: ElementRef // So that it can be accessed in the template @@ -43,6 +45,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy uuid: '' } + error: string + protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC constructor ( @@ -201,6 +205,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy this.isUploadingVideo = false this.videoUploadPercents = 0 this.videoUploadObservable = null + this.firstStepError.emit() this.notificationsService.error(this.i18n('Error'), err.message) } ) @@ -235,8 +240,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy }, err => { - this.isUpdatingVideo = false - this.notificationsService.error(this.i18n('Error'), err.message) + this.error = err.message + scrollToTop() console.error(err) } ) diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html index e14e23aed..72a233b72 100644 --- a/client/src/app/videos/+video-edit/video-add.component.html +++ b/client/src/app/videos/+video-edit/video-add.component.html @@ -6,24 +6,24 @@ - + Upload a file - + Import with URL - + Import with torrent - + diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts index 1a9247dbe..57a9d0ca7 100644 --- a/client/src/app/videos/+video-edit/video-add.component.ts +++ b/client/src/app/videos/+video-edit/video-add.component.ts @@ -27,6 +27,11 @@ export class VideoAddComponent implements CanComponentDeactivate { this.videoName = videoName } + onError () { + this.videoName = undefined + this.secondStepType = undefined + } + canDeactivate () { if (this.secondStepType === 'upload') return this.videoUpload.canDeactivate() if (this.secondStepType === 'import-url') return this.videoImportUrl.canDeactivate() -- cgit v1.2.3 From 8d4273463fb19d503b1aa0a32dc289f292ed614e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 16 Nov 2018 15:02:48 +0100 Subject: Check follow constraints when getting a video --- client/src/app/videos/+video-watch/video-watch.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client') diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index d0151ceb1..09ee96bdc 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -114,7 +114,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) .pipe( // If 401, the video is private or blacklisted so redirect to 404 - catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 404 ])) + catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ])) ) .subscribe(([ video, captionsResult ]) => { const startTime = this.route.snapshot.queryParams.start -- cgit v1.2.3 From d8c9996ce2b4de3ef1f2d36f63e461006bab58ed Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 16 Nov 2018 17:02:21 +0100 Subject: Improve message visibility on signup --- client/src/app/signup/signup.component.html | 3 ++- client/src/app/signup/signup.component.ts | 20 +++++++++++--------- .../shared/video-caption-add-modal.component.ts | 1 + 3 files changed, 14 insertions(+), 10 deletions(-) (limited to 'client') diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html index 531a97814..0207a166e 100644 --- a/client/src/app/signup/signup.component.html +++ b/client/src/app/signup/signup.component.html @@ -4,6 +4,7 @@ Create an account +
{{ info }}
{{ error }}
@@ -59,7 +60,7 @@
- +
diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts index cf2657b85..607d64893 100644 --- a/client/src/app/signup/signup.component.ts +++ b/client/src/app/signup/signup.component.ts @@ -12,7 +12,9 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val styleUrls: [ './signup.component.scss' ] }) export class SignupComponent extends FormReactive implements OnInit { + info: string = null error: string = null + signupDone = false constructor ( protected formValidatorService: FormValidatorService, @@ -50,17 +52,17 @@ export class SignupComponent extends FormReactive implements OnInit { this.userService.signup(userCreate).subscribe( () => { + this.signupDone = true + if (this.requiresEmailVerification) { - this.notificationsService.alert( - this.i18n('Welcome'), - this.i18n('Please check your email to verify your account and complete signup.') - ) - } else { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Registration for {{username}} complete.', { username: userCreate.username }) - ) + this.info = this.i18n('Welcome! Now please check your emails to verify your account and complete signup.') + return } + + this.notificationsService.success( + this.i18n('Success'), + this.i18n('Registration for {{username}} complete.', { username: userCreate.username }) + ) this.redirectService.redirectToHomepage() }, diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts index 796fbe531..eaf819726 100644 --- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts +++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts @@ -60,6 +60,7 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni hide () { this.closingModal = true this.openedModal.close() + this.form.reset() } isReplacingExistingCaption () { -- cgit v1.2.3 From 43e9d2af7d3525bc709e4c6d15fe85f65795f5fa Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 16 Nov 2018 17:06:19 +0100 Subject: Auto login user on signup --- client/src/app/signup/signup.component.ts | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) (limited to 'client') diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts index 607d64893..3341d4e09 100644 --- a/client/src/app/signup/signup.component.ts +++ b/client/src/app/signup/signup.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core' import { NotificationsService } from 'angular2-notifications' import { UserCreate } from '../../../../shared' import { FormReactive, UserService, UserValidatorsService } from '../shared' -import { RedirectService, ServerService } from '@app/core' +import { AuthService, RedirectService, ServerService } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' @@ -18,6 +18,7 @@ export class SignupComponent extends FormReactive implements OnInit { constructor ( protected formValidatorService: FormValidatorService, + private authService: AuthService, private userValidatorsService: UserValidatorsService, private notificationsService: NotificationsService, private userService: UserService, @@ -59,11 +60,20 @@ export class SignupComponent extends FormReactive implements OnInit { return } - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Registration for {{username}} complete.', { username: userCreate.username }) - ) - this.redirectService.redirectToHomepage() + // Auto login + this.authService.login(userCreate.username, userCreate.password) + .subscribe( + () => { + this.notificationsService.success( + this.i18n('Success'), + this.i18n('You are now logged in as {{username}}!', { username: userCreate.username }) + ) + + this.redirectService.redirectToHomepage() + }, + + err => this.error = err.message + ) }, err => this.error = err.message -- cgit v1.2.3