From 156c50af3085468a47b8ae73fe8cfcae46b42398 Mon Sep 17 00:00:00 2001 From: Lucas Declercq Date: Sat, 6 Oct 2018 19:17:21 +0200 Subject: Add downloadingEnabled property to video model --- client/src/app/shared/video-import/video-import.service.ts | 1 + client/src/app/shared/video/video-details.model.ts | 2 ++ client/src/app/shared/video/video-edit.model.ts | 5 ++++- client/src/app/shared/video/video.service.ts | 1 + .../video-add-components/video-import-torrent.component.ts | 2 ++ .../+video-edit/video-add-components/video-import-url.component.ts | 2 ++ .../+video-edit/video-add-components/video-upload.component.ts | 2 ++ client/src/app/videos/+video-watch/video-watch.component.html | 2 +- client/src/app/videos/+video-watch/video-watch.component.ts | 4 ++++ 9 files changed, 19 insertions(+), 2 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/shared/video-import/video-import.service.ts b/client/src/app/shared/video-import/video-import.service.ts index 7ae66ddfc..74c458645 100644 --- a/client/src/app/shared/video-import/video-import.service.ts +++ b/client/src/app/shared/video-import/video-import.service.ts @@ -81,6 +81,7 @@ export class VideoImportService { nsfw: video.nsfw, waitTranscoding: video.waitTranscoding, commentsEnabled: video.commentsEnabled, + downloadingEnabled: video.downloadingEnabled, thumbnailfile: video.thumbnailfile, previewfile: video.previewfile, scheduleUpdate diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts index fa4ca7f93..ad85641dc 100644 --- a/client/src/app/shared/video/video-details.model.ts +++ b/client/src/app/shared/video/video-details.model.ts @@ -12,6 +12,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { files: VideoFile[] account: Account commentsEnabled: boolean + downloadingEnabled: boolean waitTranscoding: boolean state: VideoConstant @@ -29,6 +30,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { this.tags = hash.tags this.support = hash.support this.commentsEnabled = hash.commentsEnabled + this.downloadingEnabled = hash.downloadingEnabled this.buildLikeAndDislikePercents() } diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts index 0046be964..47703ff79 100644 --- a/client/src/app/shared/video/video-edit.model.ts +++ b/client/src/app/shared/video/video-edit.model.ts @@ -14,6 +14,7 @@ export class VideoEdit implements VideoUpdate { tags: string[] nsfw: boolean commentsEnabled: boolean + downloadingEnabled: boolean waitTranscoding: boolean channelId: number privacy: VideoPrivacy @@ -26,7 +27,7 @@ export class VideoEdit implements VideoUpdate { id?: number scheduleUpdate?: VideoScheduleUpdate - constructor (video?: Video & { tags: string[], commentsEnabled: boolean, support: string, thumbnailUrl: string, previewUrl: string }) { + constructor (video?: Video & { tags: string[], commentsEnabled: boolean, downloadingEnabled: boolean, support: string, thumbnailUrl: string, previewUrl: string }) { if (video) { this.id = video.id this.uuid = video.uuid @@ -38,6 +39,7 @@ export class VideoEdit implements VideoUpdate { this.tags = video.tags this.nsfw = video.nsfw this.commentsEnabled = video.commentsEnabled + this.downloadingEnabled = video.downloadingEnabled this.waitTranscoding = video.waitTranscoding this.channelId = video.channel.id this.privacy = video.privacy.id @@ -80,6 +82,7 @@ export class VideoEdit implements VideoUpdate { tags: this.tags, nsfw: this.nsfw, commentsEnabled: this.commentsEnabled, + downloadingEnabled: this.downloadingEnabled, waitTranscoding: this.waitTranscoding, channelId: this.channelId, privacy: this.privacy diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts index 724a0bde9..c0339dd39 100644 --- a/client/src/app/shared/video/video.service.ts +++ b/client/src/app/shared/video/video.service.ts @@ -95,6 +95,7 @@ export class VideoService implements VideosProvider { nsfw: video.nsfw, waitTranscoding: video.waitTranscoding, commentsEnabled: video.commentsEnabled, + downloadingEnabled: video.downloadingEnabled, thumbnailfile: video.thumbnailfile, previewfile: video.previewfile, scheduleUpdate 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 0f7184ff8..57cf0e395 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 @@ -77,6 +77,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca privacy: this.firstStepPrivacyId, waitTranscoding: false, commentsEnabled: true, + downloadingEnabled: true, channelId: this.firstStepChannelId } @@ -91,6 +92,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca this.video = new VideoEdit(Object.assign(res.video, { commentsEnabled: videoUpdate.commentsEnabled, + downloadingEnabled: videoUpdate.downloadingEnabled, support: null, thumbnailUrl: null, previewUrl: null 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..11db4a7ef 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 @@ -69,6 +69,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom privacy: this.firstStepPrivacyId, waitTranscoding: false, commentsEnabled: true, + downloadingEnabled: true, channelId: this.firstStepChannelId } @@ -83,6 +84,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom this.video = new VideoEdit(Object.assign(res.video, { commentsEnabled: videoUpdate.commentsEnabled, + downloadingEnabled: videoUpdate.downloadingEnabled, support: null, thumbnailUrl: null, previewUrl: null 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 941dc5441..53f72f4e6 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 @@ -159,6 +159,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy const nsfw = false const waitTranscoding = true const commentsEnabled = true + const downloadingEnabled = true const channelId = this.firstStepChannelId.toString() const formData = new FormData() @@ -167,6 +168,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy formData.append('privacy', VideoPrivacy.PRIVATE.toString()) formData.append('nsfw', '' + nsfw) formData.append('commentsEnabled', '' + commentsEnabled) + formData.append('downloadingEnabled', '' + downloadingEnabled) formData.append('waitTranscoding', '' + waitTranscoding) formData.append('channelId', '' + channelId) formData.append('videofile', videofile) diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 770785d02..ba04d638f 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -80,7 +80,7 @@
- + Download 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 c5deddf05..7cc831ab1 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -313,6 +313,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video && this.video.state.id === VideoState.TO_TRANSCODE } + isVideoDownloadable () { + return this.video && this.video.downloadingEnabled + } + isVideoToImport () { return this.video && this.video.state.id === VideoState.TO_IMPORT } -- cgit v1.2.3 From e0d827e29afc1b29eaf550deb0627c13088c0c65 Mon Sep 17 00:00:00 2001 From: Lucas Declercq Date: Sat, 6 Oct 2018 19:18:00 +0200 Subject: Only show download button if downloadingEnabled is set to true --- client/src/app/videos/+video-edit/shared/video-edit.component.html | 5 +++++ client/src/app/videos/+video-edit/shared/video-edit.component.ts | 2 ++ 2 files changed, 7 insertions(+) (limited to 'client/src/app') diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index 33c766d87..46eb019b1 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -125,6 +125,11 @@ i18n-labelText labelText="Enable video comments" > + + Date: Mon, 8 Oct 2018 14:42:55 +0200 Subject: Fix some defaults values + indentation --- client/src/app/videos/+video-edit/shared/video-edit.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index 46eb019b1..70d535055 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -126,8 +126,8 @@ > Date: Mon, 8 Oct 2018 14:45:22 +0200 Subject: Rename downloadingEnabled property to downloadEnabled --- client/src/app/shared/video-import/video-import.service.ts | 2 +- client/src/app/shared/video/video-details.model.ts | 4 ++-- client/src/app/shared/video/video-edit.model.ts | 8 ++++---- client/src/app/shared/video/video.service.ts | 2 +- .../src/app/videos/+video-edit/shared/video-edit.component.html | 2 +- client/src/app/videos/+video-edit/shared/video-edit.component.ts | 4 ++-- .../video-add-components/video-import-torrent.component.ts | 4 ++-- .../video-add-components/video-import-url.component.ts | 4 ++-- .../+video-edit/video-add-components/video-upload.component.ts | 4 ++-- client/src/app/videos/+video-watch/video-watch.component.ts | 2 +- 10 files changed, 18 insertions(+), 18 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/shared/video-import/video-import.service.ts b/client/src/app/shared/video-import/video-import.service.ts index 74c458645..2163eb905 100644 --- a/client/src/app/shared/video-import/video-import.service.ts +++ b/client/src/app/shared/video-import/video-import.service.ts @@ -81,7 +81,7 @@ export class VideoImportService { nsfw: video.nsfw, waitTranscoding: video.waitTranscoding, commentsEnabled: video.commentsEnabled, - downloadingEnabled: video.downloadingEnabled, + downloadEnabled: video.downloadEnabled, thumbnailfile: video.thumbnailfile, previewfile: video.previewfile, scheduleUpdate diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts index ad85641dc..5ff3926c4 100644 --- a/client/src/app/shared/video/video-details.model.ts +++ b/client/src/app/shared/video/video-details.model.ts @@ -12,7 +12,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { files: VideoFile[] account: Account commentsEnabled: boolean - downloadingEnabled: boolean + downloadEnabled: boolean waitTranscoding: boolean state: VideoConstant @@ -30,7 +30,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { this.tags = hash.tags this.support = hash.support this.commentsEnabled = hash.commentsEnabled - this.downloadingEnabled = hash.downloadingEnabled + this.downloadEnabled = hash.downloadEnabled this.buildLikeAndDislikePercents() } diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts index 47703ff79..e385004e5 100644 --- a/client/src/app/shared/video/video-edit.model.ts +++ b/client/src/app/shared/video/video-edit.model.ts @@ -14,7 +14,7 @@ export class VideoEdit implements VideoUpdate { tags: string[] nsfw: boolean commentsEnabled: boolean - downloadingEnabled: boolean + downloadEnabled: boolean waitTranscoding: boolean channelId: number privacy: VideoPrivacy @@ -27,7 +27,7 @@ export class VideoEdit implements VideoUpdate { id?: number scheduleUpdate?: VideoScheduleUpdate - constructor (video?: Video & { tags: string[], commentsEnabled: boolean, downloadingEnabled: boolean, support: string, thumbnailUrl: string, previewUrl: string }) { + constructor (video?: Video & { tags: string[], commentsEnabled: boolean, downloadEnabled: boolean, support: string, thumbnailUrl: string, previewUrl: string }) { if (video) { this.id = video.id this.uuid = video.uuid @@ -39,7 +39,7 @@ export class VideoEdit implements VideoUpdate { this.tags = video.tags this.nsfw = video.nsfw this.commentsEnabled = video.commentsEnabled - this.downloadingEnabled = video.downloadingEnabled + this.downloadEnabled = video.downloadEnabled this.waitTranscoding = video.waitTranscoding this.channelId = video.channel.id this.privacy = video.privacy.id @@ -82,7 +82,7 @@ export class VideoEdit implements VideoUpdate { tags: this.tags, nsfw: this.nsfw, commentsEnabled: this.commentsEnabled, - downloadingEnabled: this.downloadingEnabled, + downloadEnabled: this.downloadEnabled, waitTranscoding: this.waitTranscoding, channelId: this.channelId, privacy: this.privacy diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts index c0339dd39..c9d6da7a4 100644 --- a/client/src/app/shared/video/video.service.ts +++ b/client/src/app/shared/video/video.service.ts @@ -95,7 +95,7 @@ export class VideoService implements VideosProvider { nsfw: video.nsfw, waitTranscoding: video.waitTranscoding, commentsEnabled: video.commentsEnabled, - downloadingEnabled: video.downloadingEnabled, + downloadEnabled: video.downloadEnabled, thumbnailfile: video.thumbnailfile, previewfile: video.previewfile, scheduleUpdate diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index 70d535055..8c74a1ca6 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -126,7 +126,7 @@ > 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 b09664376..1dae931e2 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 @@ -80,7 +80,7 @@ export class VideoEditComponent implements OnInit, OnDestroy { const defaultValues = { nsfw: 'false', commentsEnabled: 'true', - downloadingEnabled: 'true', + downloadEnabled: 'true', waitTranscoding: 'true', tags: [] } @@ -90,7 +90,7 @@ export class VideoEditComponent implements OnInit, OnDestroy { channelId: this.videoValidatorsService.VIDEO_CHANNEL, nsfw: null, commentsEnabled: null, - downloadingEnabled: null, + downloadEnabled: null, waitTranscoding: null, category: this.videoValidatorsService.VIDEO_CATEGORY, licence: this.videoValidatorsService.VIDEO_LICENCE, 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 57cf0e395..0f6fd17a9 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 @@ -77,7 +77,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca privacy: this.firstStepPrivacyId, waitTranscoding: false, commentsEnabled: true, - downloadingEnabled: true, + downloadEnabled: true, channelId: this.firstStepChannelId } @@ -92,7 +92,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca this.video = new VideoEdit(Object.assign(res.video, { commentsEnabled: videoUpdate.commentsEnabled, - downloadingEnabled: videoUpdate.downloadingEnabled, + downloadEnabled: videoUpdate.downloadEnabled, support: null, thumbnailUrl: null, previewUrl: null 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 11db4a7ef..fbc85c74f 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 @@ -69,7 +69,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom privacy: this.firstStepPrivacyId, waitTranscoding: false, commentsEnabled: true, - downloadingEnabled: true, + downloadEnabled: true, channelId: this.firstStepChannelId } @@ -84,7 +84,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom this.video = new VideoEdit(Object.assign(res.video, { commentsEnabled: videoUpdate.commentsEnabled, - downloadingEnabled: videoUpdate.downloadingEnabled, + downloadEnabled: videoUpdate.downloadEnabled, support: null, thumbnailUrl: null, previewUrl: null 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 53f72f4e6..ac6c1786f 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 @@ -159,7 +159,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy const nsfw = false const waitTranscoding = true const commentsEnabled = true - const downloadingEnabled = true + const downloadEnabled = true const channelId = this.firstStepChannelId.toString() const formData = new FormData() @@ -168,7 +168,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy formData.append('privacy', VideoPrivacy.PRIVATE.toString()) formData.append('nsfw', '' + nsfw) formData.append('commentsEnabled', '' + commentsEnabled) - formData.append('downloadingEnabled', '' + downloadingEnabled) + formData.append('downloadEnabled', '' + downloadEnabled) formData.append('waitTranscoding', '' + waitTranscoding) formData.append('channelId', '' + channelId) formData.append('videofile', videofile) 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 7cc831ab1..a7fd45695 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -314,7 +314,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } isVideoDownloadable () { - return this.video && this.video.downloadingEnabled + return this.video && this.video.downloadEnabled } isVideoToImport () { -- cgit v1.2.3 From 8ea1597fdbb2eb8ef71e805cf175e88ae05629c0 Mon Sep 17 00:00:00 2001 From: Lucas Declercq Date: Mon, 8 Oct 2018 16:33:02 +0200 Subject: Fix too big line length --- client/src/app/shared/video/video-edit.model.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'client/src/app') diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts index e385004e5..5bb0510f9 100644 --- a/client/src/app/shared/video/video-edit.model.ts +++ b/client/src/app/shared/video/video-edit.model.ts @@ -27,7 +27,15 @@ export class VideoEdit implements VideoUpdate { id?: number scheduleUpdate?: VideoScheduleUpdate - constructor (video?: Video & { tags: string[], commentsEnabled: boolean, downloadEnabled: boolean, support: string, thumbnailUrl: string, previewUrl: string }) { + constructor ( + video?: Video & { + tags: string[], + commentsEnabled: boolean, + downloadEnabled: boolean, + support: string, + thumbnailUrl: string, + previewUrl: string + }) { if (video) { this.id = video.id this.uuid = video.uuid -- cgit v1.2.3 From 5abb9fbbd12e7097e348d6a38622d364b1fa47ed Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 10 Jan 2019 15:39:51 +0100 Subject: Add ability to unfederate a local video (on blacklist) --- .../video-blacklist-list/video-blacklist-list.component.html | 6 ++++-- .../video-blacklist-list/video-blacklist-list.component.ts | 6 ++++++ client/src/app/+admin/users/user-list/user-list.component.html | 3 +++ .../src/app/shared/video-blacklist/video-blacklist.service.ts | 7 +++++-- .../videos/+video-watch/modal/video-blacklist.component.html | 7 +++++++ .../app/videos/+video-watch/modal/video-blacklist.component.ts | 10 +++++++--- 6 files changed, 32 insertions(+), 7 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html index 7cef787d2..6398af218 100644 --- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html +++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html @@ -7,6 +7,7 @@ Video name Sensitive + Unfederated Date @@ -26,7 +27,8 @@ - {{ videoBlacklist.video.nsfw }} + {{ booleanToText(videoBlacklist.video.nsfw) }} + {{ booleanToText(videoBlacklist.unfederated) }} {{ videoBlacklist.createdAt }} @@ -37,7 +39,7 @@ - + Blacklist reason: {{ videoBlacklist.reason }} diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts index a02e84f67..6c6f17f0c 100644 --- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts +++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts @@ -46,6 +46,12 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit { return Video.buildClientUrl(videoBlacklist.video.uuid) } + booleanToText (value: boolean) { + if (value === true) return this.i18n('yes') + + return this.i18n('no') + } + async removeVideoFromBlacklist (entry: VideoBlacklist) { const confirmMessage = this.i18n( 'Do you really want to remove this video from the blacklist? It will be available again in the videos list.' diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index 556ab3c5d..8c03a924b 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -65,7 +65,9 @@ (banned) + {{ user.email }} + ? {{ user.email }} @@ -76,6 +78,7 @@ + {{ user.videoQuotaUsed }} / {{ user.videoQuota }} {{ user.roleLabel }} {{ user.createdAt }} diff --git a/client/src/app/shared/video-blacklist/video-blacklist.service.ts b/client/src/app/shared/video-blacklist/video-blacklist.service.ts index 7d39fd4f2..94e46d7c2 100644 --- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts +++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts @@ -36,8 +36,11 @@ export class VideoBlacklistService { ) } - blacklistVideo (videoId: number, reason?: string) { - const body = reason ? { reason } : {} + blacklistVideo (videoId: number, reason: string, unfederate: boolean) { + const body = { + unfederate, + reason + } return this.authHttp.post(VideoBlacklistService.BASE_VIDEOS_URL + videoId + '/blacklist', body) .pipe( diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html index c436501b4..83600fa81 100644 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html +++ b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html @@ -15,6 +15,13 @@
+
+ +
+
Cancel diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts b/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts index 357ce39ce..50a7cadd1 100644 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts @@ -34,9 +34,12 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit { } ngOnInit () { + const defaultValues = { unfederate: 'true' } + this.buildForm({ - reason: this.videoBlacklistValidatorsService.VIDEO_BLACKLIST_REASON - }) + reason: this.videoBlacklistValidatorsService.VIDEO_BLACKLIST_REASON, + unfederate: null + }, defaultValues) } show () { @@ -50,8 +53,9 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit { blacklist () { const reason = this.form.value[ 'reason' ] || undefined + const unfederate = this.video.isLocal ? this.form.value[ 'unfederate' ] : undefined - this.videoBlacklistService.blacklistVideo(this.video.id, reason) + this.videoBlacklistService.blacklistVideo(this.video.id, reason, unfederate) .subscribe( () => { this.notifier.success(this.i18n('Video blacklisted.')) -- cgit v1.2.3 From 9b4b15f91c485f9a7fe2ed314b4101f4b7506b38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20B=C3=A9ranger?= <43744761+auberanger@users.noreply.github.com> Date: Mon, 14 Jan 2019 09:06:48 +0100 Subject: WIP : Indicate to users how "trending" works (#1458) * Get the INTERVAL_DAYS const in the video-trending component * Change Trending section title * Add a tooltip to explain how trending section works * Minor CSS fix for the my-feed popover next to the titlepage --- client/src/app/core/server/server.service.ts | 5 +++++ client/src/app/shared/video/abstract-video-list.html | 5 ++++- client/src/app/shared/video/abstract-video-list.scss | 2 +- client/src/app/shared/video/abstract-video-list.ts | 2 ++ client/src/app/videos/video-list/video-trending.component.ts | 12 ++++++++++-- 5 files changed, 22 insertions(+), 4 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts index f33e6f20c..4ae72427b 100644 --- a/client/src/app/core/server/server.service.ts +++ b/client/src/app/core/server/server.service.ts @@ -87,6 +87,11 @@ export class ServerService { enabled: false } } + }, + trending: { + videos: { + intervalDays: 0 + } } } private videoCategories: Array> = [] diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html index 29492351b..1f97bc389 100644 --- a/client/src/app/shared/video/abstract-video-list.html +++ b/client/src/app/shared/video/abstract-video-list.html @@ -1,8 +1,11 @@
- {{ titlePage }} +
+ {{ titlePage }} +
+
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss index 9fb3fd4d6..292ede698 100644 --- a/client/src/app/shared/video/abstract-video-list.scss +++ b/client/src/app/shared/video/abstract-video-list.scss @@ -19,8 +19,8 @@ my-feed { display: inline-block; - position: relative; top: 1px; + min-width: 60px; } .moderation-block { diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index d234c8bfa..d74384293 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -39,6 +39,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { ownerDisplayType: OwnerDisplayType = 'account' firstLoadedPage: number displayModerationBlock = false + trendingDays: number + titleTooltip: string protected baseVideoWidth = 215 protected baseVideoHeight = 205 diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts index accc5bfe5..d3c0f5316 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts @@ -8,7 +8,7 @@ import { VideoSortField } from '../../shared/video/sort-field.type' import { VideoService } from '../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' import { ScreenService } from '@app/shared/misc/screen.service' -import { Notifier } from '@app/core' +import { Notifier, ServerService } from '@app/core' @Component({ selector: 'my-videos-trending', @@ -19,6 +19,7 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, titlePage: string currentRoute = '/videos/trending' defaultSort: VideoSortField = '-trending' + trendingDays: number constructor ( protected router: Router, @@ -27,12 +28,19 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, protected authService: AuthService, protected location: Location, protected screenService: ScreenService, + private serverService: ServerService, protected i18n: I18n, private videoService: VideoService ) { super() - this.titlePage = i18n('Trending') + this.trendingDays = this.serverService.getConfig().trending.videos.intervalDays + + this.titlePage = this.i18n('Trending for the last ') + this.trendingDays === 1 ? this.titlePage += '24 hours' : this.titlePage += this.trendingDays + ' days' + + this.titleTooltip = this.i18n('trending videos are those totalizing the greatest number of views during the last ') + this.trendingDays === 1 ? this.titleTooltip += '24 hours.' : this.titleTooltip += this.trendingDays + ' days.' } ngOnInit () { -- cgit v1.2.3 From f242c2e01e3423ad63a9a6d904062256d60b6971 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 10 Jan 2019 16:28:31 +0100 Subject: Improve "no notifications" message --- client/src/app/menu/avatar-notification.component.scss | 1 + client/src/app/shared/users/user-notifications.component.scss | 7 +++++++ 2 files changed, 8 insertions(+) (limited to 'client/src/app') diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index c86667469..47d04ace3 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -11,6 +11,7 @@ font-family: $main-fonts; overflow-y: auto; max-height: 500px; + min-width: 200px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); .notifications-header { diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss index 0493b10d9..0ae26ea39 100644 --- a/client/src/app/shared/users/user-notifications.component.scss +++ b/client/src/app/shared/users/user-notifications.component.scss @@ -1,3 +1,10 @@ +.no-notification { + display: flex; + justify-content: center; + align-items: center; + padding: 20px 0; +} + .notification { display: flex; justify-content: space-between; -- cgit v1.2.3 From 033bc0efc2ab2c517b4d7d53d09930b85f092b50 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 11 Jan 2019 16:58:33 +0100 Subject: Fix NSFW blur on search --- client/src/app/search/search.component.html | 2 +- client/src/app/search/search.component.ts | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html index 3a87ea1de..82a5f0f26 100644 --- a/client/src/app/search/search.component.html +++ b/client/src/app/search/search.component.html @@ -48,7 +48,7 @@
- +
{{ result.name }} diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts index 474b72824..c4a4b1fde 100644 --- a/client/src/app/search/search.component.ts +++ b/client/src/app/search/search.component.ts @@ -1,6 +1,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import { AuthService, Notifier } from '@app/core' +import { AuthService, Notifier, ServerService } from '@app/core' import { forkJoin, Subscription } from 'rxjs' import { SearchService } from '@app/search/search.service' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' @@ -41,7 +41,8 @@ export class SearchComponent implements OnInit, OnDestroy { private metaService: MetaService, private notifier: Notifier, private searchService: SearchService, - private authService: AuthService + private authService: AuthService, + private serverService: ServerService ) { } ngOnInit () { @@ -75,6 +76,10 @@ export class SearchComponent implements OnInit, OnDestroy { if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe() } + isVideoBlur (video: Video) { + return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig()) + } + isVideoChannel (d: VideoChannel | Video): d is VideoChannel { return d instanceof VideoChannel } -- cgit v1.2.3 From 7b95f31385eca59ac18197539de30268acc18986 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 09:11:28 +0100 Subject: Help translators to translate trending title/tooltip --- client/src/app/shared/video/abstract-video-list.ts | 1 - .../videos/video-list/video-trending.component.ts | 22 +++++++++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index d74384293..b0633be4a 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -39,7 +39,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { ownerDisplayType: OwnerDisplayType = 'account' firstLoadedPage: number displayModerationBlock = false - trendingDays: number titleTooltip: string protected baseVideoWidth = 215 diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts index d3c0f5316..881ab2174 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts @@ -19,7 +19,6 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, titlePage: string currentRoute = '/videos/trending' defaultSort: VideoSortField = '-trending' - trendingDays: number constructor ( protected router: Router, @@ -33,20 +32,25 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, private videoService: VideoService ) { super() - - this.trendingDays = this.serverService.getConfig().trending.videos.intervalDays - - this.titlePage = this.i18n('Trending for the last ') - this.trendingDays === 1 ? this.titlePage += '24 hours' : this.titlePage += this.trendingDays + ' days' - - this.titleTooltip = this.i18n('trending videos are those totalizing the greatest number of views during the last ') - this.trendingDays === 1 ? this.titleTooltip += '24 hours.' : this.titleTooltip += this.trendingDays + ' days.' } ngOnInit () { super.ngOnInit() this.generateSyndicationList() + + const trendingDays = this.serverService.getConfig().trending.videos.intervalDays + + if (trendingDays === 1) { + this.titlePage = this.i18n('Trending for the last 24 hours') + this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours.') + } else { + this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays }) + this.titleTooltip = this.i18n( + 'Trending videos are those totalizing the greatest number of views during the last {{days}} days.', + { days: trendingDays } + ) + } } ngOnDestroy () { -- cgit v1.2.3 From b4593cd7ff34b94b60f6bfa0b57e371d74d63aa2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 10:24:49 +0100 Subject: Warn user when they want to delete a channel Because they will not be able to create another channel with the same actor name --- .../my-account-video-channels.component.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts index 0ab3e2067..da2c5bcd3 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts @@ -35,10 +35,14 @@ export class MyAccountVideoChannelsComponent implements OnInit { async deleteVideoChannel (videoChannel: VideoChannel) { const res = await this.confirmService.confirmWithInput( this.i18n( - 'Do you really want to delete {{videoChannelName}}? It will delete all videos uploaded in this channel too.', - { videoChannelName: videoChannel.displayName } + 'Do you really want to delete {{channelDisplayName}}? It will delete all videos uploaded in this channel, ' + + 'and you will not be able to create another channel with the same name ({{channelName}})!', + { channelDisplayName: videoChannel.displayName, channelName: videoChannel.name } + ), + this.i18n( + 'Please type the display name of the video channel ({{displayName}}) to confirm', + { displayName: videoChannel.displayName } ), - this.i18n('Please type the name of the video channel to confirm'), videoChannel.displayName, this.i18n('Delete') ) -- cgit v1.2.3 From b5487ff4a5c0bb2acaca79ee00df26a83886c889 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 11:52:15 +0100 Subject: Add error message when trying to upload .ass subtitles --- client/src/app/shared/forms/reactive-file.component.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'client/src/app') diff --git a/client/src/app/shared/forms/reactive-file.component.ts b/client/src/app/shared/forms/reactive-file.component.ts index c3986838f..f60c38e8d 100644 --- a/client/src/app/shared/forms/reactive-file.component.ts +++ b/client/src/app/shared/forms/reactive-file.component.ts @@ -53,6 +53,17 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor { return } + const extension = '.' + file.name.split('.').pop() + if (this.extensions.includes(extension) === false) { + const message = this.i18n( + 'PeerTube cannot handle this kind of file. Accepted extensions are {{extensions}}.', + { extensions: this.allowedExtensionsMessage } + ) + this.notifier.error(message) + + return + } + this.file = file this.propagateChange(this.file) -- cgit v1.2.3 From 674a66bbda7ceb7aed3c2e6aefddc2793207d94b Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 14:55:43 +0100 Subject: Add unload listener on video upload/update --- .../video-add-components/video-upload.component.html | 4 ++++ .../app/videos/+video-edit/video-add.component.ts | 14 ++++++++++++-- .../app/videos/+video-edit/video-update.component.ts | 20 ++++++++++++++++---- 3 files changed, 32 insertions(+), 6 deletions(-) (limited to 'client/src/app') 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 289a28c66..826e54d25 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 @@ -42,6 +42,10 @@ {{ error }}
+
+ Congratulations! Your video is now available in your private library. +
+
Date: Mon, 14 Jan 2019 15:12:20 +0100 Subject: Fix scroll in notifications page --- client/src/app/menu/avatar-notification.component.scss | 1 + client/src/app/shared/users/user-notifications.component.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'client/src/app') diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index 47d04ace3..807385022 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -13,6 +13,7 @@ max-height: 500px; min-width: 200px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); + overflow-y: auto; .notifications-header { display: flex; diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts index 682116226..50c495a9a 100644 --- a/client/src/app/shared/users/user-notifications.component.ts +++ b/client/src/app/shared/users/user-notifications.component.ts @@ -21,7 +21,7 @@ export class UserNotificationsComponent implements OnInit { componentPagination: ComponentPagination = { currentPage: 1, - itemsPerPage: 10, + itemsPerPage: 20, totalItems: null } -- cgit v1.2.3 From 9a39392a7e6b3f180104856a4ea893e5baf86a02 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 15:32:09 +0100 Subject: Fix notification socket Should be in core module to share the same subject to all the app --- client/src/app/core/auth/auth.service.ts | 4 +-- client/src/app/core/core.module.ts | 4 ++- client/src/app/core/notification/index.ts | 1 + .../user-notification-socket.service.ts | 41 +++++++++++++++++++++ .../app/menu/avatar-notification.component.html | 2 +- .../src/app/menu/avatar-notification.component.ts | 5 +-- .../app/shared/users/user-notification.service.ts | 42 ++++++---------------- .../shared/users/user-notifications.component.ts | 3 +- 8 files changed, 63 insertions(+), 39 deletions(-) create mode 100644 client/src/app/core/notification/user-notification-socket.service.ts (limited to 'client/src/app') diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts index 79ea32ced..eaa822e0f 100644 --- a/client/src/app/core/auth/auth.service.ts +++ b/client/src/app/core/auth/auth.service.ts @@ -3,12 +3,12 @@ import { catchError, map, mergeMap, share, tap } from 'rxjs/operators' import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' import { Router } from '@angular/router' -import { Notifier } from '@app/core/notification' +import { Notifier } from '@app/core/notification/notifier.service' import { OAuthClientLocal, User as UserServerModel, UserRefreshToken } from '../../../../../shared' import { User } from '../../../../../shared/models/users' import { UserLogin } from '../../../../../shared/models/users/user-login.model' import { environment } from '../../../environments/environment' -import { RestExtractor } from '../../shared/rest' +import { RestExtractor } from '../../shared/rest/rest-extractor.service' import { AuthStatus } from './auth-status.model' import { AuthUser } from './auth-user.model' import { objectToUrlEncoded } from '@app/shared/misc/utils' diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts index 7c0d4ac8f..3bc0e2885 100644 --- a/client/src/app/core/core.module.ts +++ b/client/src/app/core/core.module.ts @@ -18,6 +18,7 @@ import { CheatSheetComponent } from './hotkeys' import { ToastModule } from 'primeng/toast' import { Notifier } from './notification' import { MessageService } from 'primeng/api' +import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service' @NgModule({ imports: [ @@ -60,7 +61,8 @@ import { MessageService } from 'primeng/api' UserRightGuard, RedirectService, Notifier, - MessageService + MessageService, + UserNotificationSocket ] }) export class CoreModule { diff --git a/client/src/app/core/notification/index.ts b/client/src/app/core/notification/index.ts index 8b0cfde5f..3e8d9ea65 100644 --- a/client/src/app/core/notification/index.ts +++ b/client/src/app/core/notification/index.ts @@ -1 +1,2 @@ export * from './notifier.service' +export * from './user-notification-socket.service' diff --git a/client/src/app/core/notification/user-notification-socket.service.ts b/client/src/app/core/notification/user-notification-socket.service.ts new file mode 100644 index 000000000..f367d9ae4 --- /dev/null +++ b/client/src/app/core/notification/user-notification-socket.service.ts @@ -0,0 +1,41 @@ +import { Injectable } from '@angular/core' +import { environment } from '../../../environments/environment' +import { UserNotification as UserNotificationServer } from '../../../../../shared' +import { Subject } from 'rxjs' +import * as io from 'socket.io-client' +import { AuthService } from '../auth' + +export type NotificationEvent = 'new' | 'read' | 'read-all' + +@Injectable() +export class UserNotificationSocket { + private notificationSubject = new Subject<{ type: NotificationEvent, notification?: UserNotificationServer }>() + + private socket: SocketIOClient.Socket + + constructor ( + private auth: AuthService + ) {} + + dispatch (type: NotificationEvent, notification?: UserNotificationServer) { + this.notificationSubject.next({ type, notification }) + } + + getMyNotificationsSocket () { + const socket = this.getSocket() + + socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n)) + + return this.notificationSubject.asObservable() + } + + private getSocket () { + if (this.socket) return this.socket + + this.socket = io(environment.apiUrl + '/user-notifications', { + query: { accessToken: this.auth.getAccessToken() } + }) + + return this.socket + } +} diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html index 2f0b7c669..4ef3f0e89 100644 --- a/client/src/app/menu/avatar-notification.component.html +++ b/client/src/app/menu/avatar-notification.component.html @@ -17,7 +17,7 @@ >
- + See all your notifications diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts index 60e090726..f1af08096 100644 --- a/client/src/app/menu/avatar-notification.component.ts +++ b/client/src/app/menu/avatar-notification.component.ts @@ -2,7 +2,7 @@ import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core' import { User } from '../shared/users/user.model' import { UserNotificationService } from '@app/shared/users/user-notification.service' import { Subscription } from 'rxjs' -import { Notifier } from '@app/core' +import { Notifier, UserNotificationSocket } from '@app/core' import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' import { NavigationEnd, Router } from '@angular/router' import { filter } from 'rxjs/operators' @@ -23,6 +23,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy { constructor ( private userNotificationService: UserNotificationService, + private userNotificationSocket: UserNotificationSocket, private notifier: Notifier, private router: Router ) {} @@ -53,7 +54,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy { } private subscribeToNotifications () { - this.notificationSub = this.userNotificationService.getMyNotificationsSocket() + this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket() .subscribe(data => { if (data.type === 'new') return this.unreadNotifications++ if (data.type === 'read') return this.unreadNotifications-- diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts index 2dfee8060..67ed8f74e 100644 --- a/client/src/app/shared/users/user-notification.service.ts +++ b/client/src/app/shared/users/user-notification.service.ts @@ -1,30 +1,28 @@ import { Injectable } from '@angular/core' import { HttpClient, HttpParams } from '@angular/common/http' -import { RestExtractor, RestService } from '@app/shared/rest' +import { RestExtractor, RestService } from '../rest' import { catchError, map, tap } from 'rxjs/operators' import { environment } from '../../../environments/environment' import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '../../../../../shared' -import { UserNotification } from '@app/shared/users/user-notification.model' -import { Subject } from 'rxjs' -import * as io from 'socket.io-client' -import { AuthService } from '@app/core' -import { ComponentPagination } from '@app/shared/rest/component-pagination.model' -import { User } from '@app/shared' +import { UserNotification } from './user-notification.model' +import { AuthService } from '../../core' +import { ComponentPagination } from '../rest/component-pagination.model' +import { User } from '..' +import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service' @Injectable() export class UserNotificationService { static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications' static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings' - private notificationSubject = new Subject<{ type: 'new' | 'read' | 'read-all', notification?: UserNotification }>() - private socket: SocketIOClient.Socket constructor ( private auth: AuthService, private authHttp: HttpClient, private restExtractor: RestExtractor, - private restService: RestService + private restService: RestService, + private userNotificationSocket: UserNotificationSocket ) {} listMyNotifications (pagination: ComponentPagination, unread?: boolean, ignoreLoadingBar = false) { @@ -48,16 +46,6 @@ export class UserNotificationService { .pipe(map(n => n.total)) } - getMyNotificationsSocket () { - const socket = this.getSocket() - - socket.on('new-notification', (n: UserNotificationServer) => { - this.notificationSubject.next({ type: 'new', notification: new UserNotification(n) }) - }) - - return this.notificationSubject.asObservable() - } - markAsRead (notification: UserNotification) { const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read' @@ -67,7 +55,7 @@ export class UserNotificationService { return this.authHttp.post(url, body, { headers }) .pipe( map(this.restExtractor.extractDataBool), - tap(() => this.notificationSubject.next({ type: 'read' })), + tap(() => this.userNotificationSocket.dispatch('read')), catchError(res => this.restExtractor.handleError(res)) ) } @@ -79,7 +67,7 @@ export class UserNotificationService { return this.authHttp.post(url, {}, { headers }) .pipe( map(this.restExtractor.extractDataBool), - tap(() => this.notificationSubject.next({ type: 'read-all' })), + tap(() => this.userNotificationSocket.dispatch('read-all')), catchError(res => this.restExtractor.handleError(res)) ) } @@ -94,16 +82,6 @@ export class UserNotificationService { ) } - private getSocket () { - if (this.socket) return this.socket - - this.socket = io(environment.apiUrl + '/user-notifications', { - query: { accessToken: this.auth.getAccessToken() } - }) - - return this.socket - } - private formatNotification (notification: UserNotificationServer) { return new UserNotification(notification) } diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts index 50c495a9a..e3913ba56 100644 --- a/client/src/app/shared/users/user-notifications.component.ts +++ b/client/src/app/shared/users/user-notifications.component.ts @@ -13,6 +13,7 @@ import { UserNotification } from '@app/shared/users/user-notification.model' export class UserNotificationsComponent implements OnInit { @Input() ignoreLoadingBar = false @Input() infiniteScroll = true + @Input() itemsPerPage = 20 notifications: UserNotification[] = [] @@ -21,7 +22,7 @@ export class UserNotificationsComponent implements OnInit { componentPagination: ComponentPagination = { currentPage: 1, - itemsPerPage: 20, + itemsPerPage: this.itemsPerPage, totalItems: null } -- cgit v1.2.3 From 1506307f2f903ce0f80155072a33345c702b7c76 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 16:48:38 +0100 Subject: Increase abuse length to 3000 And correctly handle new lines --- .../about-instance/about-instance.component.ts | 2 +- .../account-about/account-about.component.ts | 4 +- .../+admin/moderation/moderation.component.scss | 1 + .../video-abuse-list.component.html | 4 +- .../video-abuse-list/video-abuse-list.component.ts | 8 +- .../video-blacklist-list.component.html | 2 +- .../video-blacklist-list.component.ts | 6 ++ .../video-channel-about.component.ts | 2 +- .../video-abuse-validators.service.ts | 8 +- .../shared/forms/markdown-textarea.component.ts | 2 +- client/src/app/shared/misc/help.component.ts | 2 +- client/src/app/shared/misc/utils.ts | 13 ++- .../app/shared/renderer/html-renderer.service.ts | 35 +++++++ client/src/app/shared/renderer/index.ts | 3 + .../src/app/shared/renderer/linkifier.service.ts | 115 +++++++++++++++++++++ client/src/app/shared/renderer/markdown.service.ts | 79 ++++++++++++++ client/src/app/shared/shared.module.ts | 9 +- .../app/shared/video-abuse/video-abuse.service.ts | 4 +- .../+video-watch/comment/linkifier.service.ts | 115 --------------------- .../comment/video-comment.component.ts | 27 +---- .../+video-watch/comment/video-comment.service.ts | 6 +- .../+video-watch/modal/video-support.component.ts | 3 +- .../videos/+video-watch/video-watch.component.ts | 2 +- .../app/videos/+video-watch/video-watch.module.ts | 4 - client/src/app/videos/shared/index.ts | 1 - client/src/app/videos/shared/markdown.service.ts | 79 -------------- 26 files changed, 284 insertions(+), 252 deletions(-) create mode 100644 client/src/app/shared/renderer/html-renderer.service.ts create mode 100644 client/src/app/shared/renderer/index.ts create mode 100644 client/src/app/shared/renderer/linkifier.service.ts create mode 100644 client/src/app/shared/renderer/markdown.service.ts delete mode 100644 client/src/app/videos/+video-watch/comment/linkifier.service.ts delete mode 100644 client/src/app/videos/shared/index.ts delete mode 100644 client/src/app/videos/shared/markdown.service.ts (limited to 'client/src/app') diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts index d3ee8a1e4..a1b30fa8c 100644 --- a/client/src/app/+about/about-instance/about-instance.component.ts +++ b/client/src/app/+about/about-instance/about-instance.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit, ViewChild } from '@angular/core' import { Notifier, ServerService } from '@app/core' -import { MarkdownService } from '@app/videos/shared' import { I18n } from '@ngx-translate/i18n-polyfill' import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' import { InstanceService } from '@app/shared/instance/instance.service' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-about-instance', diff --git a/client/src/app/+accounts/account-about/account-about.component.ts b/client/src/app/+accounts/account-about/account-about.component.ts index 6f3e6caa0..13890a0ee 100644 --- a/client/src/app/+accounts/account-about/account-about.component.ts +++ b/client/src/app/+accounts/account-about/account-about.component.ts @@ -1,9 +1,9 @@ -import { Component, OnInit, OnDestroy } from '@angular/core' +import { Component, OnDestroy, OnInit } from '@angular/core' import { Account } from '@app/shared/account/account.model' import { AccountService } from '@app/shared/account/account.service' import { I18n } from '@ngx-translate/i18n-polyfill' import { Subscription } from 'rxjs' -import { MarkdownService } from '@app/videos/shared' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-account-about', diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss index 02ccfc8ca..13b019c5b 100644 --- a/client/src/app/+admin/moderation/moderation.component.scss +++ b/client/src/app/+admin/moderation/moderation.component.scss @@ -10,6 +10,7 @@ font-weight: $font-semibold; min-width: 200px; display: inline-block; + vertical-align: top; } .moderation-expanded-text { diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html index e862d5162..05b549de6 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html @@ -51,11 +51,11 @@
Reason: - {{ videoAbuse.reason }} +
Moderation comment: - {{ videoAbuse.moderationComment }} +
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts index f64234b74..00c871659 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts @@ -9,6 +9,7 @@ import { DropdownAction } from '../../../shared/buttons/action-dropdown.componen import { ConfirmService } from '../../../core/index' import { ModerationCommentModalComponent } from './moderation-comment-modal.component' import { Video } from '../../../shared/video/video.model' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-video-abuse-list', @@ -30,7 +31,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { private notifier: Notifier, private videoAbuseService: VideoAbuseService, private confirmService: ConfirmService, - private i18n: I18n + private i18n: I18n, + private markdownRenderer: MarkdownService ) { super() @@ -108,6 +110,10 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { } + toHtml (text: string) { + return this.markdownRenderer.textMarkdownToHTML(text) + } + protected loadData () { return this.videoAbuseService.getVideoAbuses(this.pagination, this.sort) .subscribe( diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html index 6398af218..247f441c1 100644 --- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html +++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html @@ -41,7 +41,7 @@ Blacklist reason: - {{ videoBlacklist.reason }} + diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts index 6c6f17f0c..b27bbbfef 100644 --- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts +++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts @@ -7,6 +7,7 @@ import { VideoBlacklist } from '../../../../../../shared' import { I18n } from '@ngx-translate/i18n-polyfill' import { DropdownAction } from '../../../shared/buttons/action-dropdown.component' import { Video } from '../../../shared/video/video.model' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-video-blacklist-list', @@ -26,6 +27,7 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit { private notifier: Notifier, private confirmService: ConfirmService, private videoBlacklistService: VideoBlacklistService, + private markdownRenderer: MarkdownService, private i18n: I18n ) { super() @@ -52,6 +54,10 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit { return this.i18n('no') } + toHtml (text: string) { + return this.markdownRenderer.textMarkdownToHTML(text) + } + async removeVideoFromBlacklist (entry: VideoBlacklist) { const confirmMessage = this.i18n( 'Do you really want to remove this video from the blacklist? It will be available again in the videos list.' diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts index ea7b0e118..895b19064 100644 --- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts +++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts @@ -3,7 +3,7 @@ import { VideoChannelService } from '@app/shared/video-channel/video-channel.ser import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { I18n } from '@ngx-translate/i18n-polyfill' import { Subscription } from 'rxjs' -import { MarkdownService } from '@app/videos/shared' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-video-channel-about', diff --git a/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts b/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts index 6e9806611..fcc966b84 100644 --- a/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts +++ b/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts @@ -10,20 +10,20 @@ export class VideoAbuseValidatorsService { constructor (private i18n: I18n) { this.VIDEO_ABUSE_REASON = { - VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ], + VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ], MESSAGES: { 'required': this.i18n('Report reason is required.'), 'minlength': this.i18n('Report reason must be at least 2 characters long.'), - 'maxlength': this.i18n('Report reason cannot be more than 300 characters long.') + 'maxlength': this.i18n('Report reason cannot be more than 3000 characters long.') } } this.VIDEO_ABUSE_MODERATION_COMMENT = { - VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ], + VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ], MESSAGES: { 'required': this.i18n('Moderation comment is required.'), 'minlength': this.i18n('Moderation comment must be at least 2 characters long.'), - 'maxlength': this.i18n('Moderation comment cannot be more than 300 characters long.') + 'maxlength': this.i18n('Moderation comment cannot be more than 3000 characters long.') } } } diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts index b99169ed2..e87aca0d4 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.ts +++ b/client/src/app/shared/forms/markdown-textarea.component.ts @@ -1,10 +1,10 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators' import { Component, forwardRef, Input, OnInit } from '@angular/core' import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' -import { MarkdownService } from '@app/videos/shared' import { Subject } from 'rxjs' import truncate from 'lodash-es/truncate' import { ScreenService } from '@app/shared/misc/screen.service' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-markdown-textarea', diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts index ba0452e77..f3426f70f 100644 --- a/client/src/app/shared/misc/help.component.ts +++ b/client/src/app/shared/misc/help.component.ts @@ -1,6 +1,6 @@ import { Component, Input, OnChanges, OnInit } from '@angular/core' -import { MarkdownService } from '@app/videos/shared' import { I18n } from '@ngx-translate/i18n-polyfill' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-help', diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index 78e8e9682..7cc6055c2 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -102,12 +102,18 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) { return fd } -function lineFeedToHtml (obj: any, keyToNormalize: string) { +function objectLineFeedToHtml (obj: any, keyToNormalize: string) { return immutableAssign(obj, { - [keyToNormalize]: obj[keyToNormalize].replace(/\r?\n|\r/g, '
') + [keyToNormalize]: lineFeedToHtml(obj[keyToNormalize]) }) } +function lineFeedToHtml (text: string) { + if (!text) return text + + return text.replace(/\r?\n|\r/g, '
') +} + function removeElementFromArray (arr: T[], elem: T) { const index = arr.indexOf(elem) if (index !== -1) arr.splice(index, 1) @@ -131,6 +137,7 @@ function scrollToTop () { export { sortBy, durationToString, + lineFeedToHtml, objectToUrlEncoded, getParameterByName, populateAsyncUserVideoChannels, @@ -138,7 +145,7 @@ export { dateToHuman, immutableAssign, objectToFormData, - lineFeedToHtml, + objectLineFeedToHtml, removeElementFromArray, scrollToTop } diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts new file mode 100644 index 000000000..d49df9b6d --- /dev/null +++ b/client/src/app/shared/renderer/html-renderer.service.ts @@ -0,0 +1,35 @@ +import { Injectable } from '@angular/core' +import { LinkifierService } from '@app/shared/renderer/linkifier.service' +import * as sanitizeHtml from 'sanitize-html' + +@Injectable() +export class HtmlRendererService { + + constructor (private linkifier: LinkifierService) { + + } + + toSafeHtml (text: string) { + // Convert possible markdown to html + const html = this.linkifier.linkify(text) + + return sanitizeHtml(html, { + allowedTags: [ 'a', 'p', 'span', 'br' ], + allowedSchemes: [ 'http', 'https' ], + allowedAttributes: { + 'a': [ 'href', 'class', 'target' ] + }, + transformTags: { + a: (tagName, attribs) => { + return { + tagName, + attribs: Object.assign(attribs, { + target: '_blank', + rel: 'noopener noreferrer' + }) + } + } + } + }) + } +} diff --git a/client/src/app/shared/renderer/index.ts b/client/src/app/shared/renderer/index.ts new file mode 100644 index 000000000..39202b385 --- /dev/null +++ b/client/src/app/shared/renderer/index.ts @@ -0,0 +1,3 @@ +export * from './html-renderer.service' +export * from './linkifier.service' +export * from './markdown.service' diff --git a/client/src/app/shared/renderer/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts new file mode 100644 index 000000000..2529c9eaf --- /dev/null +++ b/client/src/app/shared/renderer/linkifier.service.ts @@ -0,0 +1,115 @@ +import { Injectable } from '@angular/core' +import { getAbsoluteAPIUrl } from '@app/shared/misc/utils' +// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged? +const linkify = require('linkifyjs') +const linkifyHtml = require('linkifyjs/html') + +@Injectable() +export class LinkifierService { + + static CLASSNAME = 'linkified' + + private linkifyOptions = { + className: { + mention: LinkifierService.CLASSNAME + '-mention', + url: LinkifierService.CLASSNAME + '-url' + } + } + + constructor () { + // Apply plugin + this.mentionWithDomainPlugin(linkify) + } + + linkify (text: string) { + return linkifyHtml(text, this.linkifyOptions) + } + + private mentionWithDomainPlugin (linkify: any) { + const TT = linkify.scanner.TOKENS // Text tokens + const { TOKENS: MT, State } = linkify.parser // Multi tokens, state + const MultiToken = MT.Base + const S_START = linkify.parser.start + + const TT_AT = TT.AT + const TT_DOMAIN = TT.DOMAIN + const TT_LOCALHOST = TT.LOCALHOST + const TT_NUM = TT.NUM + const TT_COLON = TT.COLON + const TT_SLASH = TT.SLASH + const TT_TLD = TT.TLD + const TT_UNDERSCORE = TT.UNDERSCORE + const TT_DOT = TT.DOT + + function MENTION (this: any, value: any) { + this.v = value + } + + linkify.inherits(MultiToken, MENTION, { + type: 'mentionWithDomain', + isLink: true, + toHref () { + return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1) + } + }) + + const S_AT = S_START.jump(TT_AT) // @ + const S_AT_SYMS = new State() + const S_MENTION = new State(MENTION) + const S_MENTION_DIVIDER = new State() + const S_MENTION_DIVIDER_SYMS = new State() + + // @_, + S_AT.on(TT_UNDERSCORE, S_AT_SYMS) + + // @_* + S_AT_SYMS + .on(TT_UNDERSCORE, S_AT_SYMS) + .on(TT_DOT, S_AT_SYMS) + + // Valid mention (not made up entirely of symbols) + S_AT + .on(TT_DOMAIN, S_MENTION) + .on(TT_LOCALHOST, S_MENTION) + .on(TT_TLD, S_MENTION) + .on(TT_NUM, S_MENTION) + + S_AT_SYMS + .on(TT_DOMAIN, S_MENTION) + .on(TT_LOCALHOST, S_MENTION) + .on(TT_TLD, S_MENTION) + .on(TT_NUM, S_MENTION) + + // More valid mentions + S_MENTION + .on(TT_DOMAIN, S_MENTION) + .on(TT_LOCALHOST, S_MENTION) + .on(TT_TLD, S_MENTION) + .on(TT_COLON, S_MENTION) + .on(TT_NUM, S_MENTION) + .on(TT_UNDERSCORE, S_MENTION) + + // Mention with a divider + S_MENTION + .on(TT_AT, S_MENTION_DIVIDER) + .on(TT_SLASH, S_MENTION_DIVIDER) + .on(TT_DOT, S_MENTION_DIVIDER) + + // Mention _ trailing stash plus syms + S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS) + S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS) + + // Once we get a word token, mentions can start up again + S_MENTION_DIVIDER + .on(TT_DOMAIN, S_MENTION) + .on(TT_LOCALHOST, S_MENTION) + .on(TT_TLD, S_MENTION) + .on(TT_NUM, S_MENTION) + + S_MENTION_DIVIDER_SYMS + .on(TT_DOMAIN, S_MENTION) + .on(TT_LOCALHOST, S_MENTION) + .on(TT_TLD, S_MENTION) + .on(TT_NUM, S_MENTION) + } +} diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts new file mode 100644 index 000000000..07017eca5 --- /dev/null +++ b/client/src/app/shared/renderer/markdown.service.ts @@ -0,0 +1,79 @@ +import { Injectable } from '@angular/core' + +import * as MarkdownIt from 'markdown-it' + +@Injectable() +export class MarkdownService { + static TEXT_RULES = [ + 'linkify', + 'autolink', + 'emphasis', + 'link', + 'newline', + 'list' + ] + static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ]) + + private textMarkdownIt: MarkdownIt.MarkdownIt + private enhancedMarkdownIt: MarkdownIt.MarkdownIt + + constructor () { + this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES) + this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES) + } + + textMarkdownToHTML (markdown: string) { + if (!markdown) return '' + + const html = this.textMarkdownIt.render(markdown) + return this.avoidTruncatedTags(html) + } + + enhancedMarkdownToHTML (markdown: string) { + if (!markdown) return '' + + const html = this.enhancedMarkdownIt.render(markdown) + return this.avoidTruncatedTags(html) + } + + private createMarkdownIt (rules: string[]) { + const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true }) + + for (let rule of rules) { + markdownIt.enable(rule) + } + + this.setTargetToLinks(markdownIt) + + return markdownIt + } + + private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) { + // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer + const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) { + return self.renderToken(tokens, idx, options) + } + + markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) { + const token = tokens[index] + + const targetIndex = token.attrIndex('target') + if (targetIndex < 0) token.attrPush([ 'target', '_blank' ]) + else token.attrs[targetIndex][1] = '_blank' + + const relIndex = token.attrIndex('rel') + if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ]) + else token.attrs[relIndex][1] = 'noopener noreferrer' + + // pass token to default renderer. + return defaultRender(tokens, index, options, env, self) + } + } + + private avoidTruncatedTags (html: string) { + return html.replace(/\*\*?([^*]+)$/, '$1') + .replace(/]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...') + .replace(/\[[^\]]+\]?\(?([^\)]+)$/, '$1') + + } +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index d1320aeec..384f5d722 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -6,7 +6,6 @@ import { RouterModule } from '@angular/router' import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component' import { HelpComponent } from '@app/shared/misc/help.component' import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' -import { MarkdownService } from '@app/videos/shared' import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes' import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared' @@ -34,10 +33,10 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { CustomConfigValidatorsService, + InstanceValidatorsService, LoginValidatorsService, ReactiveFileComponent, ResetPasswordValidatorsService, - InstanceValidatorsService, TextareaAutoResizeDirective, UserValidatorsService, VideoAbuseValidatorsService, @@ -67,6 +66,7 @@ import { UserHistoryService } from '@app/shared/users/user-history.service' import { UserNotificationService } from '@app/shared/users/user-notification.service' import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component' import { InstanceService } from '@app/shared/instance/instance.service' +import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer' @NgModule({ imports: [ @@ -167,7 +167,6 @@ import { InstanceService } from '@app/shared/instance/instance.service' UserService, VideoService, AccountService, - MarkdownService, VideoChannelService, VideoCaptionService, VideoImportService, @@ -192,6 +191,10 @@ import { InstanceService } from '@app/shared/instance/instance.service' UserHistoryService, InstanceService, + MarkdownService, + LinkifierService, + HtmlRendererService, + I18nPrimengCalendarService, ScreenService, diff --git a/client/src/app/shared/video-abuse/video-abuse.service.ts b/client/src/app/shared/video-abuse/video-abuse.service.ts index 61b7e1b98..b0b59ea0c 100644 --- a/client/src/app/shared/video-abuse/video-abuse.service.ts +++ b/client/src/app/shared/video-abuse/video-abuse.service.ts @@ -32,9 +32,7 @@ export class VideoAbuseService { reportVideo (id: number, reason: string) { const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + id + '/abuse' - const body = { - reason - } + const body = { reason } return this.authHttp.post(url, body) .pipe( diff --git a/client/src/app/videos/+video-watch/comment/linkifier.service.ts b/client/src/app/videos/+video-watch/comment/linkifier.service.ts deleted file mode 100644 index 2529c9eaf..000000000 --- a/client/src/app/videos/+video-watch/comment/linkifier.service.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { Injectable } from '@angular/core' -import { getAbsoluteAPIUrl } from '@app/shared/misc/utils' -// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged? -const linkify = require('linkifyjs') -const linkifyHtml = require('linkifyjs/html') - -@Injectable() -export class LinkifierService { - - static CLASSNAME = 'linkified' - - private linkifyOptions = { - className: { - mention: LinkifierService.CLASSNAME + '-mention', - url: LinkifierService.CLASSNAME + '-url' - } - } - - constructor () { - // Apply plugin - this.mentionWithDomainPlugin(linkify) - } - - linkify (text: string) { - return linkifyHtml(text, this.linkifyOptions) - } - - private mentionWithDomainPlugin (linkify: any) { - const TT = linkify.scanner.TOKENS // Text tokens - const { TOKENS: MT, State } = linkify.parser // Multi tokens, state - const MultiToken = MT.Base - const S_START = linkify.parser.start - - const TT_AT = TT.AT - const TT_DOMAIN = TT.DOMAIN - const TT_LOCALHOST = TT.LOCALHOST - const TT_NUM = TT.NUM - const TT_COLON = TT.COLON - const TT_SLASH = TT.SLASH - const TT_TLD = TT.TLD - const TT_UNDERSCORE = TT.UNDERSCORE - const TT_DOT = TT.DOT - - function MENTION (this: any, value: any) { - this.v = value - } - - linkify.inherits(MultiToken, MENTION, { - type: 'mentionWithDomain', - isLink: true, - toHref () { - return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1) - } - }) - - const S_AT = S_START.jump(TT_AT) // @ - const S_AT_SYMS = new State() - const S_MENTION = new State(MENTION) - const S_MENTION_DIVIDER = new State() - const S_MENTION_DIVIDER_SYMS = new State() - - // @_, - S_AT.on(TT_UNDERSCORE, S_AT_SYMS) - - // @_* - S_AT_SYMS - .on(TT_UNDERSCORE, S_AT_SYMS) - .on(TT_DOT, S_AT_SYMS) - - // Valid mention (not made up entirely of symbols) - S_AT - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - - S_AT_SYMS - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - - // More valid mentions - S_MENTION - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_COLON, S_MENTION) - .on(TT_NUM, S_MENTION) - .on(TT_UNDERSCORE, S_MENTION) - - // Mention with a divider - S_MENTION - .on(TT_AT, S_MENTION_DIVIDER) - .on(TT_SLASH, S_MENTION_DIVIDER) - .on(TT_DOT, S_MENTION_DIVIDER) - - // Mention _ trailing stash plus syms - S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS) - S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS) - - // Once we get a word token, mentions can start up again - S_MENTION_DIVIDER - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - - S_MENTION_DIVIDER_SYMS - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - } -} diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts index 00f0460a1..aba7f9d1c 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts @@ -1,11 +1,10 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core' -import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service' -import * as sanitizeHtml from 'sanitize-html' import { UserRight } from '../../../../../../shared/models/users' import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' import { AuthService } from '../../../core/auth' import { Video } from '../../../shared/video/video.model' import { VideoComment } from './video-comment.model' +import { HtmlRendererService } from '@app/shared/renderer' @Component({ selector: 'my-video-comment', @@ -29,7 +28,7 @@ export class VideoCommentComponent implements OnInit, OnChanges { newParentComments: VideoComment[] = [] constructor ( - private linkifierService: LinkifierService, + private htmlRenderer: HtmlRendererService, private authService: AuthService ) {} @@ -87,27 +86,7 @@ export class VideoCommentComponent implements OnInit, OnChanges { } private init () { - // Convert possible markdown to html - const html = this.linkifierService.linkify(this.comment.text) - - this.sanitizedCommentHTML = sanitizeHtml(html, { - allowedTags: [ 'a', 'p', 'span', 'br' ], - allowedSchemes: [ 'http', 'https' ], - allowedAttributes: { - 'a': [ 'href', 'class', 'target' ] - }, - transformTags: { - a: (tagName, attribs) => { - return { - tagName, - attribs: Object.assign(attribs, { - target: '_blank', - rel: 'noopener noreferrer' - }) - } - } - } - }) + this.sanitizedCommentHTML = this.htmlRenderer.toSafeHtml(this.comment.text) this.newParentComments = this.parentComments.concat([ this.comment ]) } diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts index 921447d5b..b8e5878c5 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts @@ -1,7 +1,7 @@ import { catchError, map } from 'rxjs/operators' import { HttpClient, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' -import { lineFeedToHtml } from '@app/shared/misc/utils' +import { objectLineFeedToHtml } from '@app/shared/misc/utils' import { Observable } from 'rxjs' import { ResultList, FeedFormat } from '../../../../../../shared/models' import { @@ -28,7 +28,7 @@ export class VideoCommentService { addCommentThread (videoId: number | string, comment: VideoCommentCreate) { const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads' - const normalizedComment = lineFeedToHtml(comment, 'text') + const normalizedComment = objectLineFeedToHtml(comment, 'text') return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment) .pipe( @@ -39,7 +39,7 @@ export class VideoCommentService { addCommentReply (videoId: number | string, inReplyToCommentId: number, comment: VideoCommentCreate) { const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comments/' + inReplyToCommentId - const normalizedComment = lineFeedToHtml(comment, 'text') + const normalizedComment = objectLineFeedToHtml(comment, 'text') return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment) .pipe( diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.ts b/client/src/app/videos/+video-watch/modal/video-support.component.ts index 154002120..deb8fbc67 100644 --- a/client/src/app/videos/+video-watch/modal/video-support.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts @@ -1,8 +1,7 @@ import { Component, Input, ViewChild } from '@angular/core' -import { MarkdownService } from '@app/videos/shared' - import { VideoDetails } from '../../../shared/video/video-details.model' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-video-support', 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 67c5254b3..ee504bc58 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -19,7 +19,6 @@ import { AuthService, ConfirmService } from '../../core' import { RestExtractor, VideoBlacklistService } from '../../shared' import { VideoDetails } from '../../shared/video/video-details.model' import { VideoService } from '../../shared/video/video.service' -import { MarkdownService } from '../shared' import { VideoDownloadComponent } from './modal/video-download.component' import { VideoReportComponent } from './modal/video-report.component' import { VideoShareComponent } from './modal/video-share.component' @@ -30,6 +29,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { environment } from '../../../environments/environment' import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils' import { VideoCaptionService } from '@app/shared/video-caption' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-video-watch', diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts index 54a12c126..2f448db78 100644 --- a/client/src/app/videos/+video-watch/video-watch.module.ts +++ b/client/src/app/videos/+video-watch/video-watch.module.ts @@ -1,9 +1,7 @@ import { NgModule } from '@angular/core' -import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service' import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' import { ClipboardModule } from 'ngx-clipboard' import { SharedModule } from '../../shared' -import { MarkdownService } from '../shared' import { VideoCommentAddComponent } from './comment/video-comment-add.component' import { VideoCommentComponent } from './comment/video-comment.component' import { VideoCommentService } from './comment/video-comment.service' @@ -46,8 +44,6 @@ import { RecommendationsModule } from '@app/videos/recommendations/recommendatio ], providers: [ - MarkdownService, - LinkifierService, VideoCommentService ] }) diff --git a/client/src/app/videos/shared/index.ts b/client/src/app/videos/shared/index.ts deleted file mode 100644 index 7a66944b9..000000000 --- a/client/src/app/videos/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './markdown.service' diff --git a/client/src/app/videos/shared/markdown.service.ts b/client/src/app/videos/shared/markdown.service.ts deleted file mode 100644 index 07017eca5..000000000 --- a/client/src/app/videos/shared/markdown.service.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { Injectable } from '@angular/core' - -import * as MarkdownIt from 'markdown-it' - -@Injectable() -export class MarkdownService { - static TEXT_RULES = [ - 'linkify', - 'autolink', - 'emphasis', - 'link', - 'newline', - 'list' - ] - static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ]) - - private textMarkdownIt: MarkdownIt.MarkdownIt - private enhancedMarkdownIt: MarkdownIt.MarkdownIt - - constructor () { - this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES) - this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES) - } - - textMarkdownToHTML (markdown: string) { - if (!markdown) return '' - - const html = this.textMarkdownIt.render(markdown) - return this.avoidTruncatedTags(html) - } - - enhancedMarkdownToHTML (markdown: string) { - if (!markdown) return '' - - const html = this.enhancedMarkdownIt.render(markdown) - return this.avoidTruncatedTags(html) - } - - private createMarkdownIt (rules: string[]) { - const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true }) - - for (let rule of rules) { - markdownIt.enable(rule) - } - - this.setTargetToLinks(markdownIt) - - return markdownIt - } - - private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) { - // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer - const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) { - return self.renderToken(tokens, idx, options) - } - - markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) { - const token = tokens[index] - - const targetIndex = token.attrIndex('target') - if (targetIndex < 0) token.attrPush([ 'target', '_blank' ]) - else token.attrs[targetIndex][1] = '_blank' - - const relIndex = token.attrIndex('rel') - if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ]) - else token.attrs[relIndex][1] = 'noopener noreferrer' - - // pass token to default renderer. - return defaultRender(tokens, index, options, env, self) - } - } - - private avoidTruncatedTags (html: string) { - return html.replace(/\*\*?([^*]+)$/, '$1') - .replace(/]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...') - .replace(/\[[^\]]+\]?\(?([^\)]+)$/, '$1') - - } -} -- cgit v1.2.3 From 3195cd1c118f5e020ab7e635d5a3dcdad2108b1a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 15 Jan 2019 09:25:26 +0100 Subject: Fix notification z-index on modals --- .../video-abuse-list/moderation-comment-modal.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html index 3a8424f68..952235c55 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html +++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html @@ -14,7 +14,7 @@
-
+
This comment can only be seen by you or the other moderators.
@@ -29,4 +29,4 @@
- \ No newline at end of file + -- cgit v1.2.3 From 457bb213b273a9b206cc5654eb085cede4e916ad Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 16 Jan 2019 16:05:40 +0100 Subject: Refactor how we use icons Inject them in an angular component so we can easily change their color --- .../contact-admin-modal.component.html | 2 +- .../moderation-comment-modal.component.html | 5 +- .../moderation-comment-modal.component.ts | 4 +- .../users/user-list/user-list.component.html | 2 +- .../users/user-list/user-list.component.scss | 4 +- .../my-account-history.component.scss | 4 +- .../my-account-notifications.component.html | 10 ++- .../my-account-notifications.component.scss | 4 +- .../my-account-accept-ownership.component.html | 3 +- .../my-account-video-channels.component.html | 2 +- .../my-account-video-channels.component.scss | 2 +- .../my-account-videos.component.html | 6 +- .../my-account-videos.component.scss | 11 ++- .../video-change-ownership.component.html | 3 +- client/src/app/app.component.html | 2 + client/src/app/core/confirm/confirm.component.html | 25 ------- client/src/app/core/confirm/confirm.component.scss | 17 ----- client/src/app/core/confirm/confirm.component.ts | 68 ------------------ client/src/app/core/confirm/index.ts | 1 - client/src/app/core/core.module.ts | 4 +- client/src/app/header/header.component.html | 2 +- client/src/app/header/header.component.scss | 10 +-- client/src/app/login/login.component.html | 3 +- .../app/menu/avatar-notification.component.scss | 2 +- .../src/app/menu/language-chooser.component.html | 2 +- client/src/app/search/search.component.scss | 4 +- client/src/app/shared/actor/actor.model.ts | 2 +- .../shared/buttons/action-dropdown.component.html | 2 +- .../shared/buttons/action-dropdown.component.scss | 9 +-- .../src/app/shared/buttons/button.component.html | 2 +- .../src/app/shared/buttons/button.component.scss | 34 ++------- client/src/app/shared/buttons/button.component.ts | 3 +- .../shared/buttons/delete-button.component.html | 2 +- .../app/shared/buttons/edit-button.component.html | 2 +- .../src/app/shared/confirm/confirm.component.html | 26 +++++++ .../src/app/shared/confirm/confirm.component.scss | 17 +++++ client/src/app/shared/confirm/confirm.component.ts | 68 ++++++++++++++++++ .../app/shared/icons/global-icon.component.html | 0 .../app/shared/icons/global-icon.component.scss | 4 ++ .../src/app/shared/icons/global-icon.component.ts | 47 +++++++++++++ client/src/app/shared/misc/help.component.html | 4 +- client/src/app/shared/misc/help.component.scss | 19 +++-- .../moderation/user-ban-modal.component.html | 7 +- .../shared/moderation/user-ban-modal.component.ts | 4 +- client/src/app/shared/shared.module.ts | 8 ++- .../app/shared/users/user-notification.model.ts | 37 +++++----- .../app/shared/users/user-notification.service.ts | 2 - .../shared/users/user-notifications.component.html | 82 ++++++++++++++++------ .../shared/users/user-notifications.component.scss | 46 +++++++----- .../shared/users/user-notifications.component.ts | 14 ++-- client/src/app/shared/video/feed.component.html | 9 +-- client/src/app/shared/video/feed.component.scss | 17 +++-- .../shared/video/video-miniature.component.scss | 4 +- client/src/app/shared/video/video.model.ts | 4 +- .../shared/video-caption-add-modal.component.html | 2 +- .../+video-edit/shared/video-edit.component.html | 2 +- .../+video-edit/shared/video-edit.component.scss | 17 ++--- .../video-import-torrent.component.html | 6 +- .../video-import-torrent.component.scss | 53 +------------- .../video-import-torrent.component.ts | 3 +- .../video-import-url.component.html | 6 +- .../video-import-url.component.scss | 45 ------------ .../video-import-url.component.ts | 2 +- .../video-add-components/video-send.scss | 54 ++++++++++++++ .../video-upload.component.html | 6 +- .../video-upload.component.scss | 44 +----------- .../video-add-components/video-upload.component.ts | 3 +- .../videos/+video-edit/video-update.component.html | 2 +- .../comment/video-comment.component.scss | 6 +- .../modal/video-blacklist.component.html | 2 +- .../modal/video-download.component.html | 2 +- .../+video-watch/modal/video-report.component.html | 2 +- .../+video-watch/modal/video-share.component.html | 2 +- .../modal/video-support.component.html | 2 +- .../videos/+video-watch/video-watch.component.html | 24 ++++--- .../videos/+video-watch/video-watch.component.scss | 80 ++++----------------- 76 files changed, 504 insertions(+), 538 deletions(-) delete mode 100644 client/src/app/core/confirm/confirm.component.html delete mode 100644 client/src/app/core/confirm/confirm.component.scss delete mode 100644 client/src/app/core/confirm/confirm.component.ts create mode 100644 client/src/app/shared/confirm/confirm.component.html create mode 100644 client/src/app/shared/confirm/confirm.component.scss create mode 100644 client/src/app/shared/confirm/confirm.component.ts create mode 100644 client/src/app/shared/icons/global-icon.component.html create mode 100644 client/src/app/shared/icons/global-icon.component.scss create mode 100644 client/src/app/shared/icons/global-icon.component.ts delete mode 100644 client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss create mode 100644 client/src/app/videos/+video-edit/video-add-components/video-send.scss (limited to 'client/src/app') diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html index 2b3fb32f3..b2cbd0873 100644 --- a/client/src/app/+about/about-instance/contact-admin-modal.component.html +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html @@ -1,7 +1,7 @@

Contact {{ instanceName }} administrator

- +
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html index 952235c55..303a788d2 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html +++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html @@ -1,7 +1,8 @@

Moderation comment

- + +
@@ -19,7 +20,7 @@
- Cancel + Cancel this.notifier.error(err.message) diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index 8c03a924b..69a4616a3 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -2,7 +2,7 @@
Users list
- + Create user
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index f235769f0..5274be01c 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -2,7 +2,7 @@ @import '_mixins'; .add-button { - @include create-button('../../../../assets/images/global/add.svg'); + @include create-button; } tr.banned { @@ -23,4 +23,4 @@ tr.banned { input { @include peertube-input-text(250px); } -} \ No newline at end of file +} diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss index 82150cbe3..e7c6863f1 100644 --- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss +++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss @@ -65,10 +65,10 @@ text-overflow: ellipsis; white-space: nowrap; font-size: 14px; - color: #585858; + color: $grey-foreground-color; &:hover { - color: #303030; + color: $grey-foreground-hover-color; } } } diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html index b98a1087e..d518b22ec 100644 --- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html @@ -1,7 +1,13 @@
- Notification preferences + + + Notification preferences + - +
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss index 86ac094c5..43d1f82ab 100644 --- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss @@ -5,16 +5,18 @@ display: flex; justify-content: space-between; font-size: 15px; - margin-bottom: 10px; + margin-bottom: 20px; a { @include peertube-button-link; @include grey-button; + @include button-with-icon(18px, 3px, -1px); } button { @include peertube-button; @include grey-button; + @include button-with-icon(20px, 3px, -1px); } } diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html index fd7d7d23b..674a4e8a2 100644 --- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html +++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html @@ -1,7 +1,8 @@

Accept ownership

- + +
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html index df74b19b6..51db2e75d 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html @@ -1,6 +1,6 @@
- + Create another video channel
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index 472cbb723..77fce138b 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -2,7 +2,7 @@ @import '_mixins'; .create-button { - @include create-button('../../../assets/images/global/add.svg'); + @include create-button; } /deep/ .action-button { diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html index a6911e4bf..69748ef37 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html @@ -32,7 +32,7 @@ - + Delete
@@ -45,7 +45,7 @@
@@ -53,4 +53,4 @@
- \ No newline at end of file + diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index a735562f8..39d0cf2f7 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss @@ -23,14 +23,11 @@ .action-button-delete-selection { @include peertube-button; @include orange-button; - } - - .icon.icon-delete-white { - @include icon(21px); + @include button-with-icon(21px); - position: relative; - top: -2px; - background-image: url('../../../assets/images/global/delete-white.svg'); + my-global-icon { + @include apply-svg-color(#fff); + } } } } diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html index 7c0df850d..22f127904 100644 --- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html +++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html @@ -1,7 +1,8 @@

Change ownership

- + +
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 3a60139e1..dfda556f5 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -37,7 +37,9 @@
+ +
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html deleted file mode 100644 index 43f0c6190..000000000 --- a/client/src/app/core/confirm/confirm.component.html +++ /dev/null @@ -1,25 +0,0 @@ - - -
-

{{ title }}

- -
- -
-
- -
- - -
-
- -
- Cancel - - -
- diff --git a/client/src/app/core/confirm/confirm.component.scss b/client/src/app/core/confirm/confirm.component.scss deleted file mode 100644 index 93dd7926b..000000000 --- a/client/src/app/core/confirm/confirm.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -.button { - padding: 0 13px; -} - -input[type=text] { - @include peertube-input-text(100%); - display: block; -} - -.form-group { - margin: 20px 0; -} - - diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts deleted file mode 100644 index 5138b7848..000000000 --- a/client/src/app/core/confirm/confirm.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core' -import { ConfirmService } from './confirm.service' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' - -@Component({ - selector: 'my-confirm', - templateUrl: './confirm.component.html', - styleUrls: [ './confirm.component.scss' ] -}) -export class ConfirmComponent implements OnInit { - @ViewChild('confirmModal') confirmModal: ElementRef - - title = '' - message = '' - expectedInputValue = '' - inputLabel = '' - - inputValue = '' - confirmButtonText = '' - - private openedModal: NgbModalRef - - constructor ( - private modalService: NgbModal, - private confirmService: ConfirmService, - private i18n: I18n - ) { } - - ngOnInit () { - this.confirmService.showConfirm.subscribe( - ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => { - this.title = title - this.message = message - - this.inputLabel = inputLabel - this.expectedInputValue = expectedInputValue - - this.confirmButtonText = confirmButtonText || this.i18n('Confirm') - - this.showModal() - } - ) - } - - @HostListener('document:keydown.enter') - confirm () { - if (this.openedModal) this.openedModal.close() - } - - isConfirmationDisabled () { - // No input validation - if (!this.inputLabel || !this.expectedInputValue) return false - - return this.expectedInputValue !== this.inputValue - } - - showModal () { - this.inputValue = '' - - this.openedModal = this.modalService.open(this.confirmModal) - - this.openedModal.result - .then(() => this.confirmService.confirmResponse.next(true)) - .catch(() => this.confirmService.confirmResponse.next(false)) - } -} diff --git a/client/src/app/core/confirm/index.ts b/client/src/app/core/confirm/index.ts index 44aabfc13..aca591e1a 100644 --- a/client/src/app/core/confirm/index.ts +++ b/client/src/app/core/confirm/index.ts @@ -1,2 +1 @@ -export * from './confirm.component' export * from './confirm.service' diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts index 3bc0e2885..4ef3b1e73 100644 --- a/client/src/app/core/core.module.ts +++ b/client/src/app/core/core.module.ts @@ -8,7 +8,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client' import { LoadingBarRouterModule } from '@ngx-loading-bar/router' import { AuthService } from './auth' -import { ConfirmComponent, ConfirmService } from './confirm' +import { ConfirmService } from './confirm' import { throwIfAlreadyLoaded } from './module-import-guard' import { LoginGuard, RedirectService, UserRightGuard } from './routing' import { ServerService } from './server' @@ -38,7 +38,6 @@ import { UserNotificationSocket } from '@app/core/notification/user-notification ], declarations: [ - ConfirmComponent, CheatSheetComponent ], @@ -48,7 +47,6 @@ import { UserNotificationSocket } from '@app/core/notification/user-notification ToastModule, - ConfirmComponent, CheatSheetComponent ], diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html index c23e0c55d..46a87c79c 100644 --- a/client/src/app/header/header.component.html +++ b/client/src/app/header/header.component.html @@ -5,6 +5,6 @@ - + Upload diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 2f9820665..cdc457b96 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -40,6 +40,7 @@ .upload-button { @include peertube-button-link; @include orange-button; + @include button-with-icon(22px, 3px, -1px); margin-right: 25px; @@ -47,15 +48,6 @@ margin-right: 0; } - .icon.icon-upload { - @include icon(22px); - - background-image: url('../../assets/images/header/upload-white.svg'); - height: 24px; - vertical-align: middle; - margin-right: 6px; - } - @media screen and (max-width: 600px) { margin-right: 10px; padding: 0 10px; diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html index 9b8146624..4efe3fb22 100644 --- a/client/src/app/login/login.component.html +++ b/client/src/app/login/login.component.html @@ -55,7 +55,8 @@

Forgot your password

- + +
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index 807385022..f6242eeae 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -42,7 +42,7 @@ justify-content: center; font-weight: $font-semibold; color: var(--mainForegroundColor); - height: 30px; + padding: 7px 0; } } } diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html index c79609898..a62b33dda 100644 --- a/client/src/app/menu/language-chooser.component.html +++ b/client/src/app/menu/language-chooser.component.html @@ -1,7 +1,7 @@

Change the language

- +
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index 3e074621b..6de13d276 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -87,10 +87,10 @@ text-overflow: ellipsis; white-space: nowrap; font-size: 14px; - color: #585858; + color: $grey-foreground-color; &:hover { - color: #303030; + color: $grey-foreground-hover-color; } } } diff --git a/client/src/app/shared/actor/actor.model.ts b/client/src/app/shared/actor/actor.model.ts index 811afb449..adecec1fc 100644 --- a/client/src/app/shared/actor/actor.model.ts +++ b/client/src/app/shared/actor/actor.model.ts @@ -16,7 +16,7 @@ export abstract class Actor implements ActorServer { avatarUrl: string - static GET_ACTOR_AVATAR_URL (actor: { avatar: Avatar }) { + static GET_ACTOR_AVATAR_URL (actor: { avatar?: { path: string } }) { const absoluteAPIUrl = getAbsoluteAPIUrl() if (actor && actor.avatar) return absoluteAPIUrl + actor.avatar.path diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html index 90651f217..114b1d71f 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.html +++ b/client/src/app/shared/buttons/action-dropdown.component.html @@ -3,7 +3,7 @@ class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }" ngbDropdownToggle role="button" > - + {{ label }}
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss index a4fcceeee..985b2ca88 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.scss +++ b/client/src/app/shared/buttons/action-dropdown.component.scss @@ -24,14 +24,11 @@ } &:hover, &:active, &:focus { - background-color: $grey-color; + background-color: $grey-background-color; } - .icon-action { - @include icon(21px); - - background-image: url('../../../assets/images/video/more.svg'); - top: -1px; + .more-icon { + width: 21px; } &.small { diff --git a/client/src/app/shared/buttons/button.component.html b/client/src/app/shared/buttons/button.component.html index 87a8daccf..b6df67102 100644 --- a/client/src/app/shared/buttons/button.component.html +++ b/client/src/app/shared/buttons/button.component.html @@ -1,4 +1,4 @@ - + {{ label }} diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss index 168102f09..be41669cd 100644 --- a/client/src/app/shared/buttons/button.component.scss +++ b/client/src/app/shared/buttons/button.component.scss @@ -3,41 +3,19 @@ .action-button { @include peertube-button-link; + @include button-with-icon(21px, 0, -2px); font-size: 15px; font-weight: $font-semibold; - color: #585858; - background-color: #E5E5E5; + color: $grey-foreground-color; + background-color: $grey-background-color; &:hover { - background-color: #EFEFEF; + background-color: $grey-background-hover-color; } - .icon { - @include icon(21px); - - position: relative; - top: -2px; - - &.icon-edit { - background-image: url('../../../assets/images/global/edit-grey.svg'); - } - - &.icon-delete-grey { - background-image: url('../../../assets/images/global/delete-grey.svg'); - } - - &.icon-im-with-her { - background-image: url('../../../assets/images/global/im-with-her.svg'); - } - - &.icon-tick { - background-image: url('../../../assets/images/global/tick.svg'); - } - - &.icon-cross { - background-image: url('../../../assets/images/global/cross.svg'); - } + my-global-icon { + @include apply-svg-color($grey-foreground-color); } } diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts index 1a1162f09..a91e9c7eb 100644 --- a/client/src/app/shared/buttons/button.component.ts +++ b/client/src/app/shared/buttons/button.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from '@angular/core' +import { GlobalIconName } from '@app/shared/icons/global-icon.component' @Component({ selector: 'my-button', @@ -9,7 +10,7 @@ import { Component, Input } from '@angular/core' export class ButtonComponent { @Input() label = '' @Input() className: string = undefined - @Input() icon: string = undefined + @Input() icon: GlobalIconName = undefined @Input() title: string = undefined getTitle () { diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html index 6c55d8104..4d12a84c0 100644 --- a/client/src/app/shared/buttons/delete-button.component.html +++ b/client/src/app/shared/buttons/delete-button.component.html @@ -1,5 +1,5 @@ - + {{ label }} Delete diff --git a/client/src/app/shared/buttons/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html index cecb780f3..da3addbae 100644 --- a/client/src/app/shared/buttons/edit-button.component.html +++ b/client/src/app/shared/buttons/edit-button.component.html @@ -1,5 +1,5 @@ - + {{ label }} Edit diff --git a/client/src/app/shared/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html new file mode 100644 index 000000000..65df1cd4d --- /dev/null +++ b/client/src/app/shared/confirm/confirm.component.html @@ -0,0 +1,26 @@ + + +
+

{{ title }}

+ + +
+ +
+
+ +
+ + +
+
+ +
+ Cancel + + +
+ diff --git a/client/src/app/shared/confirm/confirm.component.scss b/client/src/app/shared/confirm/confirm.component.scss new file mode 100644 index 000000000..93dd7926b --- /dev/null +++ b/client/src/app/shared/confirm/confirm.component.scss @@ -0,0 +1,17 @@ +@import '_variables'; +@import '_mixins'; + +.button { + padding: 0 13px; +} + +input[type=text] { + @include peertube-input-text(100%); + display: block; +} + +.form-group { + margin: 20px 0; +} + + diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts new file mode 100644 index 000000000..63c163da6 --- /dev/null +++ b/client/src/app/shared/confirm/confirm.component.ts @@ -0,0 +1,68 @@ +import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core' +import { ConfirmService } from '@app/core/confirm/confirm.service' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' + +@Component({ + selector: 'my-confirm', + templateUrl: './confirm.component.html', + styleUrls: [ './confirm.component.scss' ] +}) +export class ConfirmComponent implements OnInit { + @ViewChild('confirmModal') confirmModal: ElementRef + + title = '' + message = '' + expectedInputValue = '' + inputLabel = '' + + inputValue = '' + confirmButtonText = '' + + private openedModal: NgbModalRef + + constructor ( + private modalService: NgbModal, + private confirmService: ConfirmService, + private i18n: I18n + ) { } + + ngOnInit () { + this.confirmService.showConfirm.subscribe( + ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => { + this.title = title + this.message = message + + this.inputLabel = inputLabel + this.expectedInputValue = expectedInputValue + + this.confirmButtonText = confirmButtonText || this.i18n('Confirm') + + this.showModal() + } + ) + } + + @HostListener('document:keydown.enter') + confirm () { + if (this.openedModal) this.openedModal.close() + } + + isConfirmationDisabled () { + // No input validation + if (!this.inputLabel || !this.expectedInputValue) return false + + return this.expectedInputValue !== this.inputValue + } + + showModal () { + this.inputValue = '' + + this.openedModal = this.modalService.open(this.confirmModal) + + this.openedModal.result + .then(() => this.confirmService.confirmResponse.next(true)) + .catch(() => this.confirmService.confirmResponse.next(false)) + } +} diff --git a/client/src/app/shared/icons/global-icon.component.html b/client/src/app/shared/icons/global-icon.component.html new file mode 100644 index 000000000..e69de29bb diff --git a/client/src/app/shared/icons/global-icon.component.scss b/client/src/app/shared/icons/global-icon.component.scss new file mode 100644 index 000000000..6805fb6f7 --- /dev/null +++ b/client/src/app/shared/icons/global-icon.component.scss @@ -0,0 +1,4 @@ +/deep/ svg { + width: inherit; + height: inherit; +} diff --git a/client/src/app/shared/icons/global-icon.component.ts b/client/src/app/shared/icons/global-icon.component.ts new file mode 100644 index 000000000..5b9377e3e --- /dev/null +++ b/client/src/app/shared/icons/global-icon.component.ts @@ -0,0 +1,47 @@ +import { Component, ElementRef, Input, OnInit } from '@angular/core' + +const icons = { + 'add': require('../../../assets/images/global/add.html'), + 'syndication': require('../../../assets/images/global/syndication.html'), + 'help': require('../../../assets/images/global/help.html'), + 'sparkle': require('../../../assets/images/global/sparkle.html'), + 'alert': require('../../../assets/images/global/alert.html'), + 'cloud-error': require('../../../assets/images/global/cloud-error.html'), + 'user-add': require('../../../assets/images/global/user-add.html'), + 'no': require('../../../assets/images/global/no.html'), + 'cloud-download': require('../../../assets/images/global/cloud-download.html'), + 'undo': require('../../../assets/images/global/undo.html'), + 'circle-tick': require('../../../assets/images/global/circle-tick.html'), + 'cog': require('../../../assets/images/global/cog.html'), + 'download': require('../../../assets/images/global/download.html'), + 'edit': require('../../../assets/images/global/edit.html'), + 'im-with-her': require('../../../assets/images/global/im-with-her.html'), + 'delete': require('../../../assets/images/global/delete.html'), + 'cross': require('../../../assets/images/global/cross.html'), + 'validate': require('../../../assets/images/global/validate.html'), + 'dislike': require('../../../assets/images/video/dislike.html'), + 'heart': require('../../../assets/images/video/heart.html'), + 'like': require('../../../assets/images/video/like.html'), + 'more': require('../../../assets/images/video/more.html'), + 'share': require('../../../assets/images/video/share.html'), + 'upload': require('../../../assets/images/video/upload.html') +} + +export type GlobalIconName = keyof typeof icons + +@Component({ + selector: 'my-global-icon', + template: '', + styleUrls: [ './global-icon.component.scss' ] +}) +export class GlobalIconComponent implements OnInit { + @Input() iconName: GlobalIconName + + constructor (private el: ElementRef) {} + + ngOnInit () { + const nativeElement = this.el.nativeElement + + nativeElement.innerHTML = icons[this.iconName] + } +} diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html index 08a2fc367..444425c9f 100644 --- a/client/src/app/shared/misc/help.component.html +++ b/client/src/app/shared/misc/help.component.html @@ -25,4 +25,6 @@ [autoClose]="true" (onHidden)="onPopoverHidden()" (onShown)="onPopoverShown()" -> +> + + diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss index 047e53fab..4565d457a 100644 --- a/client/src/app/shared/misc/help.component.scss +++ b/client/src/app/shared/misc/help.component.scss @@ -2,13 +2,15 @@ @import '_mixins'; .help-tooltip-button { - @include icon(17px); - - position: relative; - top: -2px; - background-image: url('../../../assets/images/global/help.svg'); + cursor: pointer; border: none; - margin: 5px; + + my-global-icon { + width: 17px; + position: relative; + top: -2px; + margin: 5px; + } } /deep/ { @@ -24,8 +26,13 @@ color: #000; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + p:last-child { + margin-bottom: 0; + } + ul { padding-left: 20px; + margin-bottom: 0; } } } diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html index fa5cb7404..f38ea543d 100644 --- a/client/src/app/shared/moderation/user-ban-modal.component.html +++ b/client/src/app/shared/moderation/user-ban-modal.component.html @@ -1,7 +1,8 @@

Ban

- + +
@@ -19,7 +20,7 @@
- Cancel + Cancel
- \ No newline at end of file + diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts index f755ba0e8..942765301 100644 --- a/client/src/app/shared/moderation/user-ban-modal.component.ts +++ b/client/src/app/shared/moderation/user-ban-modal.component.ts @@ -42,7 +42,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit { this.openedModal = this.modalService.open(this.modal) } - hideBanUserModal () { + hide () { this.usersToBan = undefined this.openedModal.close() } @@ -60,7 +60,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit { this.notifier.success(message) this.userBanned.emit(this.usersToBan) - this.hideBanUserModal() + this.hide() }, err => this.notifier.error(err.message) diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 384f5d722..6f8625c7e 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -67,6 +67,8 @@ import { UserNotificationService } from '@app/shared/users/user-notification.ser import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component' import { InstanceService } from '@app/shared/instance/instance.service' import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer' +import { ConfirmComponent } from '@app/shared/confirm/confirm.component' +import { GlobalIconComponent } from '@app/shared/icons/global-icon.component' @NgModule({ imports: [ @@ -110,7 +112,9 @@ import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/sha UserBanModalComponent, UserModerationDropdownComponent, TopMenuDropdownComponent, - UserNotificationsComponent + UserNotificationsComponent, + ConfirmComponent, + GlobalIconComponent ], exports: [ @@ -151,6 +155,8 @@ import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/sha UserModerationDropdownComponent, TopMenuDropdownComponent, UserNotificationsComponent, + ConfirmComponent, + GlobalIconComponent, NumberFormatterPipe, ObjectLengthPipe, diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts index 5ff816fb8..c5996a8a1 100644 --- a/client/src/app/shared/users/user-notification.model.ts +++ b/client/src/app/shared/users/user-notification.model.ts @@ -1,4 +1,5 @@ -import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo } from '../../../../../shared' +import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared' +import { Actor } from '@app/shared/actor/actor.model' export class UserNotification implements UserNotificationServer { id: number @@ -6,10 +7,7 @@ export class UserNotification implements UserNotificationServer { read: boolean video?: VideoInfo & { - channel: { - id: number - displayName: string - } + channel: ActorInfo & { avatarUrl?: string } } videoImport?: { @@ -23,10 +21,7 @@ export class UserNotification implements UserNotificationServer { comment?: { id: number threadId: number - account: { - id: number - displayName: string - } + account: ActorInfo & { avatarUrl?: string } video: VideoInfo } @@ -40,18 +35,11 @@ export class UserNotification implements UserNotificationServer { video: VideoInfo } - account?: { - id: number - displayName: string - name: string - } + account?: ActorInfo & { avatarUrl?: string } actorFollow?: { id: number - follower: { - name: string - displayName: string - } + follower: ActorInfo & { avatarUrl?: string } following: { type: 'account' | 'channel' name: string @@ -76,12 +64,22 @@ export class UserNotification implements UserNotificationServer { this.read = hash.read this.video = hash.video + if (this.video) this.setAvatarUrl(this.video.channel) + this.videoImport = hash.videoImport + this.comment = hash.comment + if (this.comment) this.setAvatarUrl(this.comment.account) + this.videoAbuse = hash.videoAbuse + this.videoBlacklist = hash.videoBlacklist + this.account = hash.account + if (this.account) this.setAvatarUrl(this.account) + this.actorFollow = hash.actorFollow + if (this.actorFollow) this.setAvatarUrl(this.actorFollow.follower) this.createdAt = hash.createdAt this.updatedAt = hash.updatedAt @@ -150,4 +148,7 @@ export class UserNotification implements UserNotificationServer { return videoImport.targetUrl || videoImport.magnetUri || videoImport.torrentName } + private setAvatarUrl (actor: { avatarUrl?: string, avatar?: { path: string } }) { + actor.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(actor) + } } diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts index 67ed8f74e..f8a30955d 100644 --- a/client/src/app/shared/users/user-notification.service.ts +++ b/client/src/app/shared/users/user-notification.service.ts @@ -15,8 +15,6 @@ export class UserNotificationService { static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications' static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings' - private socket: SocketIOClient.Socket - constructor ( private auth: AuthService, private authHttp: HttpClient, diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html index 86379d941..caa518e7f 100644 --- a/client/src/app/shared/users/user-notifications.component.html +++ b/client/src/app/shared/users/user-notifications.component.html @@ -1,61 +1,101 @@
You don't have notifications.
-
+
-
+ - {{ notification.video.channel.displayName }} published a new video + + +
+ {{ notification.video.channel.displayName }} published a new video +
- Your video {{ notification.video.name }} has been unblacklisted + + +
+ Your video {{ notification.video.name }} has been unblacklisted +
- Your video {{ notification.videoBlacklist.video.name }} has been blacklisted + + +
+ Your video {{ notification.videoBlacklist.video.name }} has been blacklisted +
- A new video abuse has been created on video {{ notification.videoAbuse.video.name }} + + +
+ A new video abuse has been created on video {{ notification.videoAbuse.video.name }} +
- {{ notification.comment.account.displayName }} commented your video {{ notification.comment.video.name }} + + +
+ {{ notification.comment.account.displayName }} commented your video {{ notification.comment.video.name }} +
- Your video {{ notification.video.name }} has been published + + +
+ Your video {{ notification.video.name }} has been published +
- Your video import {{ notification.videoImportIdentifier }} succeeded + + +
+ Your video import {{ notification.videoImportIdentifier }} succeeded +
- Your video import {{ notification.videoImportIdentifier }} failed + + +
+ Your video import {{ notification.videoImportIdentifier }} failed +
- User {{ notification.account.name }} registered on your instance + + +
+ User {{ notification.account.name }} registered on your instance +
- {{ notification.actorFollow.follower.displayName }} is following + - - your channel {{ notification.actorFollow.following.displayName }} - - your account +
+ {{ notification.actorFollow.follower.displayName }} is following + + your channel {{ notification.actorFollow.following.displayName }} + your account +
- {{ notification.comment.account.displayName }} mentioned you on video {{ notification.comment.video.name }} + + +
+ {{ notification.comment.account.displayName }} mentioned you on video {{ notification.comment.video.name }} +
-
+ -
-
-
+
{{ notification.createdAt | myFromNow }}
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss index 0ae26ea39..315d504c9 100644 --- a/client/src/app/shared/users/user-notifications.component.scss +++ b/client/src/app/shared/users/user-notifications.component.scss @@ -1,3 +1,6 @@ +@import '_variables'; +@import '_mixins'; + .no-notification { display: flex; justify-content: center; @@ -7,31 +10,42 @@ .notification { display: flex; - justify-content: space-between; align-items: center; font-size: inherit; - padding: 15px 10px; + padding: 15px 5px 15px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.10); - .mark-as-read { - min-width: 35px; + &.unread { + background-color: rgba(0, 0, 0, 0.05); + } + + my-global-icon { + width: 24px; + margin-right: 11px; + margin-left: 3px; - .glyphicon { - display: none; - cursor: pointer; - color: rgba(20, 20, 20, 0.5) - } + @include apply-svg-color(#333); } - &.unread { - background-color: rgba(0, 0, 0, 0.05); + .avatar { + @include avatar(30px); + + margin-right: 10px; + } - &:hover .mark-as-read .glyphicon { - display: block; + .message { + flex-grow: 1; - &:hover { - color: rgba(20, 20, 20, 0.8); - } + a { + font-weight: $font-semibold; } } + + .from-date { + font-size: 0.85em; + color: $grey-foreground-color; + padding-left: 5px; + min-width: 70px; + text-align: right; + } } diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts index e3913ba56..b5f9fd399 100644 --- a/client/src/app/shared/users/user-notifications.component.ts +++ b/client/src/app/shared/users/user-notifications.component.ts @@ -20,11 +20,7 @@ export class UserNotificationsComponent implements OnInit { // So we can access it in the template UserNotificationType = UserNotificationType - componentPagination: ComponentPagination = { - currentPage: 1, - itemsPerPage: this.itemsPerPage, - totalItems: null - } + componentPagination: ComponentPagination constructor ( private userNotificationService: UserNotificationService, @@ -32,6 +28,12 @@ export class UserNotificationsComponent implements OnInit { ) { } ngOnInit () { + this.componentPagination = { + currentPage: 1, + itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable + totalItems: null + } + this.loadMoreNotifications() } @@ -58,6 +60,8 @@ export class UserNotificationsComponent implements OnInit { } markAsRead (notification: UserNotification) { + if (notification.read) return + this.userNotificationService.markAsRead(notification) .subscribe( () => { diff --git a/client/src/app/shared/video/feed.component.html b/client/src/app/shared/video/feed.component.html index 16116ba88..f7624ec01 100644 --- a/client/src/app/shared/video/feed.component.html +++ b/client/src/app/shared/video/feed.component.html @@ -1,10 +1,11 @@
- + class="icon-syndication" role="button" iconName="syndication" + > + {{ item.label }} -
\ No newline at end of file +
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss index 385764be0..ed1dc17d3 100644 --- a/client/src/app/shared/video/feed.component.scss +++ b/client/src/app/shared/video/feed.component.scss @@ -1,3 +1,4 @@ +@import '_variables'; @import '_mixins'; .video-feed { @@ -6,14 +7,12 @@ display: block; } - .icon { - @include icon(12px); + my-global-icon { + cursor: pointer; + width: 12px; + position: relative; + top: -2px; - &.icon-syndication { - position: relative; - top: -2px; - background-color: var(--mainForegroundColor); - mask-image: url('../../../assets/images/global/syndication.svg'); - } + @include apply-svg-color(var(--mainForegroundColor)) } -} \ No newline at end of file +} diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index 895879adc..f44bdf9a9 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -50,10 +50,10 @@ text-overflow: ellipsis; white-space: nowrap; font-size: 13px; - color: #585858; + color: $grey-foreground-color; &:hover { - color: #303030; + color: $grey-foreground-hover-color; } } } diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts index b92c96450..6ea83d13b 100644 --- a/client/src/app/shared/video/video.model.ts +++ b/client/src/app/shared/video/video.model.ts @@ -53,7 +53,7 @@ export class Video implements VideoServerModel { displayName: string url: string host: string - avatar: Avatar + avatar?: Avatar } channel: { @@ -63,7 +63,7 @@ export class Video implements VideoServerModel { displayName: string url: string host: string - avatar: Avatar + avatar?: Avatar } userHistory?: { diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html index 30aefdbfc..19043eee6 100644 --- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html +++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html @@ -3,7 +3,7 @@

Add caption

- +
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index bd52d686a..092c0e862 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -143,7 +143,7 @@
- + Add another caption
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index 25db8e8ed..cc32fb254 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss @@ -42,7 +42,7 @@ my-peertube-checkbox { text-align: right; .create-caption { - @include create-button('../../../../assets/images/global/add.svg'); + @include create-button; } } @@ -100,13 +100,14 @@ my-peertube-checkbox { display: inline-block; margin-right: 25px; - color: #585858; + color: $grey-foreground-color; font-size: 15px; } .submit-button { @include peertube-button; @include orange-button; + @include button-with-icon(20px, 1px); display: inline-block; @@ -119,16 +120,6 @@ my-peertube-checkbox { color: inherit; font-weight: $font-semibold; } - - .icon.icon-validate { - @include icon(20px); - - cursor: inherit; - position: relative; - top: -1px; - margin-right: 4px; - background-image: url('../../../../assets/images/global/validate.svg'); - } } } @@ -202,7 +193,7 @@ p-calendar { top: -1px; height: auto !important; vertical-align: middle !important; - fill: #585858 !important; + fill: $grey-foreground-color !important; } &:hover { 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 11a81ad66..28eb143c9 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 @@ -1,6 +1,6 @@
-
-
+
+
Select the torrent to import @@ -66,7 +66,7 @@ (click)="updateSecondStep()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }" > - +
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 00626cd7b..6d59ed834 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 @@ -1,45 +1,7 @@ @import 'variables'; @import 'mixins'; -$width-size: 190px; - -.peertube-select-container { - @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; - align-items: center; - - .icon.icon-upload { - @include icon(90px); - margin-bottom: 25px; - cursor: default; - - background-image: url('../../../../assets/images/video/upload.svg'); - } - - .button-file { - @include peertube-button-file(auto); - - min-width: 190px; - } - - .button-file-extension { - display: block; - font-size: 12px; - margin-top: 5px; - } - +.first-step-block { .torrent-or-magnet { margin: 10px 0; } @@ -47,19 +9,6 @@ $width-size: 190px; .form-group-magnet-uri { margin-bottom: 40px; } - - input[type=text] { - @include peertube-input-text($width-size); - display: block; - } - - input[type=button] { - @include peertube-button; - @include orange-button; - - width: $width-size; - margin-top: 30px; - } } 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 63db06919..307806bb9 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 @@ -18,7 +18,8 @@ import { scrollToTop } from '@app/shared/misc/utils' templateUrl: './video-import-torrent.component.html', styleUrls: [ '../shared/video-edit.component.scss', - './video-import-torrent.component.scss' + './video-import-torrent.component.scss', + './video-send.scss' ] }) export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate { 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 533446672..3550c3585 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 @@ -1,6 +1,6 @@
-
-
+
+
@@ -59,7 +59,7 @@ (click)="updateSecondStep()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }" > - +
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 deleted file mode 100644 index e907edc70..000000000 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss +++ /dev/null @@ -1,45 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -$width-size: 190px; - -.peertube-select-container { - @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; - align-items: center; - - .icon.icon-upload { - @include icon(90px); - margin-bottom: 25px; - cursor: default; - - background-image: url('../../../../assets/images/video/upload.svg'); - } - - input[type=text] { - @include peertube-input-text($width-size); - display: block; - } - - input[type=button] { - @include peertube-button; - @include orange-button; - - width: $width-size; - margin-top: 30px; - } -} - - 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 a1810b7a0..257c6e5db 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 @@ -18,7 +18,7 @@ import { scrollToTop } from '@app/shared/misc/utils' templateUrl: './video-import-url.component.html', styleUrls: [ '../shared/video-edit.component.scss', - './video-import-url.component.scss' + './video-send.scss' ] }) export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate { diff --git a/client/src/app/videos/+video-edit/video-add-components/video-send.scss b/client/src/app/videos/+video-edit/video-add-components/video-send.scss new file mode 100644 index 000000000..8769dd302 --- /dev/null +++ b/client/src/app/videos/+video-edit/video-add-components/video-send.scss @@ -0,0 +1,54 @@ +@import 'variables'; +@import 'mixins'; + +$width-size: 190px; + +.alert.alert-danger { + text-align: center; + + & > div { + font-weight: $font-semibold; + } +} + +.first-step-block { + display: flex; + flex-direction: column; + align-items: center; + + .upload-icon { + width: 90px; + margin-bottom: 25px; + + @include apply-svg-color(#C6C6C6); + } + + .peertube-select-container { + @include peertube-select-container($width-size); + } + + input[type=text] { + @include peertube-input-text($width-size); + display: block; + } + + input[type=button] { + @include peertube-button; + @include orange-button; + + width: $width-size; + margin-top: 30px; + } + + .button-file { + @include peertube-button-file(auto); + + min-width: 190px; + } + + .button-file-extension { + display: block; + font-size: 12px; + margin-top: 5px; + } +} 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 826e54d25..b252cd60a 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 @@ -1,6 +1,6 @@
-
-
+
+
Select the file to upload @@ -61,7 +61,7 @@ (click)="updateSecondStep()" [ngClass]="{ disabled: isPublishingButtonDisabled() }" > - +
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 4b2c86ae9..8adf8f169 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 @@ -1,47 +1,9 @@ @import 'variables'; @import 'mixins'; -.peertube-select-container { - @include peertube-select-container(190px); -} - -.alert.alert-danger { - text-align: center; - - & > div { - font-weight: $font-semibold; - } -} - -.upload-video { - display: flex; - flex-direction: column; - align-items: center; - - .form-group-channel { - margin-bottom: 20px; - margin-top: 35px; - } - - .icon.icon-upload { - @include icon(90px); - margin-bottom: 25px; - cursor: default; - - background-image: url('../../../../assets/images/video/upload.svg'); - } - - .button-file { - @include peertube-button-file(auto); - - min-width: 190px; - } - - .button-file-extension { - display: block; - font-size: 12px; - margin-top: 5px; - } +.first-step-block .form-group-channel { + margin-bottom: 20px; + margin-top: 35px; } .upload-progress-cancel { 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 aa40f8781..e4d54b654 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 @@ -20,7 +20,8 @@ import { scrollToTop } from '@app/shared/misc/utils' templateUrl: './video-upload.component.html', styleUrls: [ '../shared/video-edit.component.scss', - './video-upload.component.scss' + './video-upload.component.scss', + './video-send.scss' ] }) export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate { diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html index 0457778c0..4992bb369 100644 --- a/client/src/app/videos/+video-edit/video-update.component.html +++ b/client/src/app/videos/+video-edit/video-update.component.html @@ -13,7 +13,7 @@
- +
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss index 84da5727e..731ecbf8f 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss @@ -41,7 +41,7 @@ } .comment-date { - color: #585858; + color: $grey-foreground-color; margin-left: 10px; } } @@ -69,7 +69,7 @@ .comment-action-reply, .comment-action-delete { - color: #585858; + color: $grey-foreground-color; cursor: pointer; margin-right: 10px; @@ -108,4 +108,4 @@ .root-comment { font-size: 14px; } -} \ No newline at end of file +} diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html index 83600fa81..1a87bdcd4 100644 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html +++ b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html @@ -1,7 +1,7 @@

Blacklist video

- +
diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.html b/client/src/app/videos/+video-watch/modal/video-download.component.html index f46f92a17..2bb5d6d37 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.html +++ b/client/src/app/videos/+video-watch/modal/video-download.component.html @@ -1,7 +1,7 @@

Download video

- +
diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.html b/client/src/app/videos/+video-watch/modal/video-report.component.html index 733c01be0..b9434da26 100644 --- a/client/src/app/videos/+video-watch/modal/video-report.component.html +++ b/client/src/app/videos/+video-watch/modal/video-report.component.html @@ -1,7 +1,7 @@

Report video

- +
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html index 301f67f2d..9f3c37fe8 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.html +++ b/client/src/app/videos/+video-watch/modal/video-share.component.html @@ -1,7 +1,7 @@

Share

- +
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html index 00c304709..2a05224a8 100644 --- a/client/src/app/videos/+video-watch/modal/video-support.component.html +++ b/client/src/app/videos/+video-watch/modal/video-support.component.html @@ -1,7 +1,7 @@

Support

- +
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 770785d02..709eb91a8 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -53,55 +53,57 @@
- +
- +
- + Support
- + Share
- +
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 2586a2204..b03ed197d 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -183,6 +183,8 @@ $other-videos-width: 260px; .action-button { @include peertube-button; @include grey-button; + @include button-with-icon(21px, 0, -1px); + @include apply-svg-color($grey-foreground-color); font-size: 15px; font-weight: $font-semibold; @@ -194,53 +196,25 @@ $other-videos-width: 260px; display: none; } - .icon { - @include icon(21px); - - position: relative; - top: -2px; - - &.icon-like { - background-image: url('../../../assets/images/video/like-grey.svg'); - } - - &.icon-dislike { - background-image: url('../../../assets/images/video/dislike-grey.svg'); - } - - &.icon-support { - background-image: url('../../../assets/images/video/heart.svg'); - } - - &.icon-share { - background-image: url('../../../assets/images/video/share.svg'); - } - - &.icon-more { - background-image: url('../../../assets/images/video/more.svg'); - top: -1px; - } - } - - .icon-text { - margin-left: 3px; - } - &.action-button-like.activated { background-color: $green; - .icon-like { - background-image: url('../../../assets/images/video/like-white.svg'); + my-global-icon { + @include apply-svg-color(#fff); } } &.action-button-dislike.activated { background-color: $red; - .icon-dislike { - background-image: url('../../../assets/images/video/dislike-white.svg'); + my-global-icon { + @include apply-svg-color(#fff); } } + + .icon-text { + margin-left: 3px; + } } .action-more { @@ -249,36 +223,12 @@ $other-videos-width: 260px; .dropdown-menu .dropdown-item { padding: 6px 24px; - .icon { - @include icon(24px); + my-global-icon { + width: 24px; margin-right: 10px; position: relative; - top: -1px; - - &.icon-download { - background-image: url('../../../assets/images/video/download-black.svg'); - } - - &.icon-edit { - background-image: url('../../../assets/images/global/edit-black.svg'); - } - - &.icon-alert { - background-image: url('../../../assets/images/video/alert.svg'); - } - - &.icon-blacklist { - background-image: url('../../../assets/images/video/blacklist.svg'); - } - - &.icon-unblacklist { - background-image: url('../../../assets/images/global/undo.svg'); - } - - &.icon-delete { - background-image: url('../../../assets/images/global/delete-black.svg'); - } + top: -2px; } } } @@ -320,7 +270,7 @@ $other-videos-width: 260px; .video-info-description-more { cursor: pointer; font-weight: $font-semibold; - color: #585858; + color: $grey-foreground-color; font-size: 14px; .glyphicon { @@ -339,7 +289,7 @@ $other-videos-width: 260px; min-width: 91px; padding-right: 5px; display: inline-block; - color: #585858; + color: $grey-foreground-color; font-weight: $font-bold; } -- cgit v1.2.3 From 17bb716bc49b30cc8f22e32f73b9b53ab9ae560d Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 17 Jan 2019 11:16:08 +0100 Subject: Fix some styles Video edit tags, dropdown actions font ... --- client/src/app/header/header.component.scss | 1 + client/src/app/shared/buttons/button.component.scss | 1 - .../app/videos/+video-edit/shared/video-edit.component.scss | 13 ++++++------- 3 files changed, 7 insertions(+), 8 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index cdc457b96..cea415d9b 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -6,6 +6,7 @@ padding-left: 10px; margin-right: 15px; padding-right: 40px; // For the search icon + font-size: 14px; &::placeholder { color: var(--inputPlaceholderColor); diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss index be41669cd..04199a2a9 100644 --- a/client/src/app/shared/buttons/button.component.scss +++ b/client/src/app/shared/buttons/button.component.scss @@ -5,7 +5,6 @@ @include peertube-button-link; @include button-with-icon(21px, 0, -2px); - font-size: 15px; font-weight: $font-semibold; color: $grey-foreground-color; background-color: $grey-background-color; diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index cc32fb254..bb775cb0a 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss @@ -23,10 +23,6 @@ my-peertube-checkbox { display: block; } - input, select { - font-size: 15px - } - .label-tags + span { font-size: 15px; } @@ -167,10 +163,10 @@ p-calendar { } tag { - background-color: var(--inputColor) !important; + background-color: $grey-background-color !important; + color: #000 !important; border-radius: 3px !important; font-size: 15px !important; - color: var(--mainForegroundColor) !important; height: 30px !important; line-height: 30px !important; margin: 0 5px 0 0 !important; @@ -193,7 +189,10 @@ p-calendar { top: -1px; height: auto !important; vertical-align: middle !important; - fill: $grey-foreground-color !important; + + path { + fill: $grey-foreground-color !important; + } } &:hover { -- cgit v1.2.3 From f2fab901df31a0e7081f4bb225f28e98798950b0 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 17 Jan 2019 11:30:47 +0100 Subject: Fix invisible things in dark mode --- client/src/app/shared/misc/help.component.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss index 4565d457a..3898f3cda 100644 --- a/client/src/app/shared/misc/help.component.scss +++ b/client/src/app/shared/misc/help.component.scss @@ -10,6 +10,8 @@ position: relative; top: -2px; margin: 5px; + + @include apply-svg-color(var(--mainForegroundColor)) } } @@ -18,15 +20,15 @@ max-width: 300px; .popover-body { + font-family: $main-fonts; text-align: left; padding: 10px; font-size: 13px; - font-family: $main-fonts; - background-color: #fff; - color: #000; + background-color: var(--mainBackgroundColor); + color: var(--mainForegroundColor); box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); - p:last-child { + p { margin-bottom: 0; } -- cgit v1.2.3 From aa87909287c4f4d38696244e32828265b040c7d5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 17 Jan 2019 11:51:08 +0100 Subject: Fix calendar in dark mode --- client/src/app/menu/avatar-notification.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src/app') diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index f6242eeae..a21e7beac 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -73,7 +73,7 @@ justify-content: center; background-color: var(--mainColor); - color: var(--mainBackgroundColor); + color: var(#fff); font-size: 10px; font-weight: $font-semibold; -- cgit v1.2.3 From 38967f7b73cec6f6198c72d62f8d64bb88e6951c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 21 Jan 2019 13:52:46 +0100 Subject: Add server host in notification account field --- client/src/app/app.component.html | 2 +- client/src/app/shared/users/user-notification.model.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index dfda556f5..d398d4f35 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -30,7 +30,7 @@
diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts index c5996a8a1..3bb53ff45 100644 --- a/client/src/app/shared/users/user-notification.model.ts +++ b/client/src/app/shared/users/user-notification.model.ts @@ -136,8 +136,8 @@ export class UserNotification implements UserNotificationServer { return '/videos/watch/' + video.uuid } - private buildAccountUrl (account: { name: string }) { - return '/accounts/' + account.name + private buildAccountUrl (account: { name: string, host: string }) { + return '/accounts/' + Actor.CREATE_BY_STRING(account.name, account.host) } private buildVideoImportUrl () { -- cgit v1.2.3 From fdebd9a3bdcc3ea3881f2234a0f214c2588de3e4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 21 Jan 2019 14:03:04 +0100 Subject: Fix notification popover width --- client/src/app/menu/avatar-notification.component.scss | 13 ++++++++++--- client/src/app/menu/menu.component.scss | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index a21e7beac..e785db788 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -3,7 +3,7 @@ /deep/ { .popover-notifications.popover { - max-width: 400px; + max-width: none; .popover-body { padding: 0; @@ -11,9 +11,8 @@ font-family: $main-fonts; overflow-y: auto; max-height: 500px; - min-width: 200px; + width: 400px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); - overflow-y: auto; .notifications-header { display: flex; @@ -82,3 +81,11 @@ height: 15px; } } + +@media screen and (max-width: $mobile-view) { + /deep/ { + .popover-notifications.popover .popover-body { + width: 400px; + } + } +} diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index a4aaadc7f..24b1a4db3 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -243,7 +243,7 @@ menu { } } -@media screen and (max-width: 400px) { +@media screen and (max-width: $mobile-view) { .menu-wrapper { width: 100% !important; } -- cgit v1.2.3 From 0f80cb03c66f4eb429a296f7c722e91d78e29ade Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 21 Jan 2019 14:08:25 +0100 Subject: Add link to the profile who commented in notif --- client/src/app/shared/users/user-notification.model.ts | 1 + client/src/app/shared/users/user-notifications.component.html | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts index 3bb53ff45..125d2120c 100644 --- a/client/src/app/shared/users/user-notification.model.ts +++ b/client/src/app/shared/users/user-notification.model.ts @@ -95,6 +95,7 @@ export class UserNotification implements UserNotificationServer { case UserNotificationType.NEW_COMMENT_ON_MY_VIDEO: case UserNotificationType.COMMENT_MENTION: + this.accountUrl = this.buildAccountUrl(this.comment.account) this.commentUrl = [ this.buildVideoUrl(this.comment.video), { threadId: this.comment.threadId } ] break diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html index caa518e7f..0d69e0feb 100644 --- a/client/src/app/shared/users/user-notifications.component.html +++ b/client/src/app/shared/users/user-notifications.component.html @@ -40,7 +40,7 @@
- {{ notification.comment.account.displayName }} commented your video {{ notification.comment.video.name }} + {{ notification.comment.account.displayName }} commented your video {{ notification.comment.video.name }}
@@ -91,7 +91,7 @@
- {{ notification.comment.account.displayName }} mentioned you on video {{ notification.comment.video.name }} + {{ notification.comment.account.displayName }} mentioned you on video {{ notification.comment.video.name }}
-- cgit v1.2.3 From 572b8e02e258bfa921032dee593d3c2f129852b6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 21 Jan 2019 17:11:21 +0100 Subject: Fix trending days display on first load --- .../videos/video-list/video-trending.component.ts | 25 ++++++++++++---------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts index 881ab2174..6fd74e67a 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts @@ -39,18 +39,21 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, this.generateSyndicationList() - const trendingDays = this.serverService.getConfig().trending.videos.intervalDays + this.serverService.configLoaded.subscribe( + () => { + const trendingDays = this.serverService.getConfig().trending.videos.intervalDays - if (trendingDays === 1) { - this.titlePage = this.i18n('Trending for the last 24 hours') - this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours.') - } else { - this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays }) - this.titleTooltip = this.i18n( - 'Trending videos are those totalizing the greatest number of views during the last {{days}} days.', - { days: trendingDays } - ) - } + if (trendingDays === 1) { + this.titlePage = this.i18n('Trending for the last 24 hours') + this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours.') + } else { + this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays }) + this.titleTooltip = this.i18n( + 'Trending videos are those totalizing the greatest number of views during the last {{days}} days.', + { days: trendingDays } + ) + } + }) } ngOnDestroy () { -- cgit v1.2.3 From 307902e2b3248073aeb677e420aafd8b5e041117 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 24 Jan 2019 15:23:06 +0100 Subject: Try to fix Mac video upload --- client/src/app/+accounts/accounts.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts index 036264602..e8339b78b 100644 --- a/client/src/app/+accounts/accounts.component.ts +++ b/client/src/app/+accounts/accounts.component.ts @@ -26,8 +26,7 @@ export class AccountsComponent implements OnInit, OnDestroy { private notifier: Notifier, private restExtractor: RestExtractor, private redirectService: RedirectService, - private authService: AuthService, - private i18n: I18n + private authService: AuthService ) {} ngOnInit () { -- cgit v1.2.3 From 4afcdcfad88fbc75acd7f689cca3378421c681d1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 28 Jan 2019 09:55:09 +0100 Subject: Fix menu overflow on mobile screens --- client/src/app/menu/menu.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src/app') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 24b1a4db3..f30b89413 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -16,7 +16,7 @@ menu { height: 100%; white-space: nowrap; text-overflow: ellipsis; - overflow: hidden; + overflow: auto; color: var(--menuForegroundColor); display: flex; flex-direction: column; -- cgit v1.2.3 From 2c0070c8f31e6a28b1d52ee6e9965e21471abd5b Mon Sep 17 00:00:00 2001 From: Josh Morel Date: Mon, 28 Jan 2019 07:01:01 -0500 Subject: fix undefined change ownership icons --- .../my-account-ownership/my-account-ownership.component.html | 4 ++-- client/src/app/shared/icons/global-icon.component.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html index 379fd8bb1..5709e9f54 100644 --- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html +++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html @@ -40,10 +40,10 @@ Refuse diff --git a/client/src/app/shared/icons/global-icon.component.ts b/client/src/app/shared/icons/global-icon.component.ts index 5b9377e3e..e8ada0324 100644 --- a/client/src/app/shared/icons/global-icon.component.ts +++ b/client/src/app/shared/icons/global-icon.component.ts @@ -19,6 +19,7 @@ const icons = { 'delete': require('../../../assets/images/global/delete.html'), 'cross': require('../../../assets/images/global/cross.html'), 'validate': require('../../../assets/images/global/validate.html'), + 'tick': require('../../../assets/images/global/tick.html'), 'dislike': require('../../../assets/images/video/dislike.html'), 'heart': require('../../../assets/images/video/heart.html'), 'like': require('../../../assets/images/video/like.html'), -- cgit v1.2.3 From 2adfc7ea9a1f858db874df9fe322e7ae833db77c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 23 Jan 2019 15:36:45 +0100 Subject: Refractor videojs player Add fake p2p-media-loader plugin --- .../videos/+video-watch/video-watch.component.ts | 77 +++++++++++----------- 1 file changed, 37 insertions(+), 40 deletions(-) (limited to 'client/src/app') 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 ee504bc58..6e38af195 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -7,14 +7,9 @@ import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-supp import { MetaService } from '@ngx-meta/core' import { Notifier, ServerService } from '@app/core' import { forkJoin, Subscription } from 'rxjs' -// FIXME: something weird with our path definition in tsconfig and typings -// @ts-ignore -import videojs from 'video.js' -import 'videojs-hotkeys' import { Hotkey, HotkeysService } from 'angular2-hotkeys' import * as WebTorrent from 'webtorrent' import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' -import '../../../assets/player/peertube-videojs-plugin' import { AuthService, ConfirmService } from '../../core' import { RestExtractor, VideoBlacklistService } from '../../shared' import { VideoDetails } from '../../shared/video/video-details.model' @@ -24,12 +19,11 @@ import { VideoReportComponent } from './modal/video-report.component' import { VideoShareComponent } from './modal/video-share.component' import { VideoBlacklistComponent } from './modal/video-blacklist.component' import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component' -import { addContextMenu, getVideojsOptions, loadLocaleInVideoJS } from '../../../assets/player/peertube-player' import { I18n } from '@ngx-translate/i18n-polyfill' import { environment } from '../../../environments/environment' -import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils' import { VideoCaptionService } from '@app/shared/video-caption' import { MarkdownService } from '@app/shared/renderer' +import { PeertubePlayerManager } from '../../../assets/player/peertube-player-manager' @Component({ selector: 'my-video-watch', @@ -46,7 +40,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent - player: videojs.Player + player: any playerElement: HTMLVideoElement userRating: UserVideoRateType = null video: VideoDetails = null @@ -61,7 +55,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { remoteServerDown = false hotkeys: Hotkey[] - private videojsLocaleLoaded = false private paramsSub: Subscription constructor ( @@ -402,41 +395,45 @@ export class VideoWatchComponent implements OnInit, OnDestroy { src: environment.apiUrl + c.captionPath })) - const videojsOptions = getVideojsOptions({ - autoplay: this.isAutoplay(), - inactivityTimeout: 2500, - videoFiles: this.video.files, - videoCaptions: playerCaptions, - playerElement: this.playerElement, - videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null, - videoDuration: this.video.duration, - enableHotkeys: true, - peertubeLink: false, - poster: this.video.previewUrl, - startTime, - subtitle: urlOptions.subtitle, - theaterMode: true, - language: this.localeId, - - userWatching: this.user && this.user.videosHistoryEnabled === true ? { - url: this.videoService.getUserWatchingVideoUrl(this.video.uuid), - authorizationHeader: this.authService.getRequestHeaderValue() - } : undefined - }) + const options = { + common: { + autoplay: this.isAutoplay(), + playerElement: this.playerElement, + videoDuration: this.video.duration, + enableHotkeys: true, + inactivityTimeout: 2500, + poster: this.video.previewUrl, + startTime, + + theaterMode: true, + captions: videoCaptions.length !== 0, + peertubeLink: false, + + videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null, + embedUrl: this.video.embedUrl, + + language: this.localeId, + + subtitle: urlOptions.subtitle, - if (this.videojsLocaleLoaded === false) { - await loadLocaleInVideoJS(environment.apiUrl, videojs, isOnDevLocale() ? getDevLocale() : this.localeId) - this.videojsLocaleLoaded = true + userWatching: this.user && this.user.videosHistoryEnabled === true ? { + url: this.videoService.getUserWatchingVideoUrl(this.video.uuid), + authorizationHeader: this.authService.getRequestHeaderValue() + } : undefined, + + serverUrl: environment.apiUrl, + + videoCaptions: playerCaptions + }, + + webtorrent: { + videoFiles: this.video.files + } } - const self = this this.zone.runOutsideAngular(async () => { - videojs(this.playerElement, videojsOptions, function (this: videojs.Player) { - self.player = this - this.on('customError', ({ err }: { err: any }) => self.handleError(err)) - - addContextMenu(self.player, self.video.embedUrl) - }) + this.player = await PeertubePlayerManager.initialize('webtorrent', options) + this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) }) this.setVideoDescriptionHTML() -- cgit v1.2.3 From 092092969633bbcf6d4891a083ea497a7d5c3154 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 29 Jan 2019 08:37:25 +0100 Subject: Add hls support on server --- client/src/app/+admin/users/user-edit/user-edit.ts | 6 ++++- client/src/app/core/server/server.service.ts | 5 +++- client/src/app/shared/video/video-details.model.ts | 13 ++++++++++ .../videos/+video-watch/video-watch.component.ts | 28 ++++++++++++++++++---- 4 files changed, 45 insertions(+), 7 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts index 0b3511e8e..021b1feb4 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.ts +++ b/client/src/app/+admin/users/user-edit/user-edit.ts @@ -22,7 +22,9 @@ export abstract class UserEdit extends FormReactive { } computeQuotaWithTranscoding () { - const resolutions = this.serverService.getConfig().transcoding.enabledResolutions + const transcodingConfig = this.serverService.getConfig().transcoding + + const resolutions = transcodingConfig.enabledResolutions const higherResolution = VideoResolution.H_1080P let multiplier = 0 @@ -30,6 +32,8 @@ export abstract class UserEdit extends FormReactive { multiplier += resolution / higherResolution } + if (transcodingConfig.hls.enabled) multiplier *= 2 + return multiplier * parseInt(this.form.value['videoQuota'], 10) } diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts index 4ae72427b..c868ccdcc 100644 --- a/client/src/app/core/server/server.service.ts +++ b/client/src/app/core/server/server.service.ts @@ -51,7 +51,10 @@ export class ServerService { requiresEmailVerification: false }, transcoding: { - enabledResolutions: [] + enabledResolutions: [], + hls: { + enabled: false + } }, avatar: { file: { diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts index fa4ca7f93..f44b4138b 100644 --- a/client/src/app/shared/video/video-details.model.ts +++ b/client/src/app/shared/video/video-details.model.ts @@ -3,6 +3,8 @@ import { AuthUser } from '../../core' import { Video } from '../../shared/video/video.model' import { Account } from '@app/shared/account/account.model' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' +import { VideoStreamingPlaylist } from '../../../../../shared/models/videos/video-streaming-playlist.model' +import { VideoStreamingPlaylistType } from '../../../../../shared/models/videos/video-streaming-playlist.type' export class VideoDetails extends Video implements VideoDetailsServerModel { descriptionPath: string @@ -19,6 +21,10 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { likesPercent: number dislikesPercent: number + trackerUrls: string[] + + streamingPlaylists: VideoStreamingPlaylist[] + constructor (hash: VideoDetailsServerModel, translations = {}) { super(hash, translations) @@ -30,6 +36,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { this.support = hash.support this.commentsEnabled = hash.commentsEnabled + this.trackerUrls = hash.trackerUrls + this.streamingPlaylists = hash.streamingPlaylists + this.buildLikeAndDislikePercents() } @@ -53,4 +62,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100 this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100 } + + getHlsPlaylist () { + return this.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS) + } } 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 6e38af195..f77316712 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -23,7 +23,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { environment } from '../../../environments/environment' import { VideoCaptionService } from '@app/shared/video-caption' import { MarkdownService } from '@app/shared/renderer' -import { PeertubePlayerManager } from '../../../assets/player/peertube-player-manager' +import { P2PMediaLoaderOptions, PeertubePlayerManager, PlayerMode, WebtorrentOptions } from '../../../assets/player/peertube-player-manager' @Component({ selector: 'my-video-watch', @@ -424,15 +424,33 @@ export class VideoWatchComponent implements OnInit, OnDestroy { serverUrl: environment.apiUrl, videoCaptions: playerCaptions - }, + } + } - webtorrent: { + let mode: PlayerMode + const hlsPlaylist = this.video.getHlsPlaylist() + if (hlsPlaylist) { + mode = 'p2p-media-loader' + const p2pMediaLoader = { + playlistUrl: hlsPlaylist.playlistUrl, + segmentsSha256Url: hlsPlaylist.segmentsSha256Url, + redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl), + trackerAnnounce: this.video.trackerUrls, videoFiles: this.video.files - } + } as P2PMediaLoaderOptions + + Object.assign(options, { p2pMediaLoader }) + } else { + mode = 'webtorrent' + const webtorrent = { + videoFiles: this.video.files + } as WebtorrentOptions + + Object.assign(options, { webtorrent }) } this.zone.runOutsideAngular(async () => { - this.player = await PeertubePlayerManager.initialize('webtorrent', options) + this.player = await PeertubePlayerManager.initialize(mode, options) this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) }) -- cgit v1.2.3 From 6ec0b75beb9c8bcd84e178912319913b91830da2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 6 Feb 2019 10:39:50 +0100 Subject: Fallback HLS to webtorrent --- .../videos/+video-watch/video-watch.component.ts | 23 +++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) (limited to 'client/src/app') 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 f77316712..e1766255b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -23,7 +23,13 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { environment } from '../../../environments/environment' import { VideoCaptionService } from '@app/shared/video-caption' import { MarkdownService } from '@app/shared/renderer' -import { P2PMediaLoaderOptions, PeertubePlayerManager, PlayerMode, WebtorrentOptions } from '../../../assets/player/peertube-player-manager' +import { + P2PMediaLoaderOptions, + PeertubePlayerManager, + PeertubePlayerManagerOptions, + PlayerMode, + WebtorrentOptions +} from '../../../assets/player/peertube-player-manager' @Component({ selector: 'my-video-watch', @@ -395,10 +401,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { src: environment.apiUrl + c.captionPath })) - const options = { + const options: PeertubePlayerManagerOptions = { common: { autoplay: this.isAutoplay(), + playerElement: this.playerElement, + onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element, + videoDuration: this.video.duration, enableHotkeys: true, inactivityTimeout: 2500, @@ -424,6 +433,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { serverUrl: environment.apiUrl, videoCaptions: playerCaptions + }, + + webtorrent: { + videoFiles: this.video.files } } @@ -431,6 +444,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { const hlsPlaylist = this.video.getHlsPlaylist() if (hlsPlaylist) { mode = 'p2p-media-loader' + const p2pMediaLoader = { playlistUrl: hlsPlaylist.playlistUrl, segmentsSha256Url: hlsPlaylist.segmentsSha256Url, @@ -442,11 +456,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { Object.assign(options, { p2pMediaLoader }) } else { mode = 'webtorrent' - const webtorrent = { - videoFiles: this.video.files - } as WebtorrentOptions - - Object.assign(options, { webtorrent }) } this.zone.runOutsideAngular(async () => { -- cgit v1.2.3 From 597a9266d426aa04c2f229168e4285a76bea2c12 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 7 Feb 2019 15:56:17 +0100 Subject: Add player mode in watch/embed urls --- .../videos/+video-watch/video-watch.component.ts | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) (limited to 'client/src/app') 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 e1766255b..9f3a43a08 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -27,8 +27,7 @@ import { P2PMediaLoaderOptions, PeertubePlayerManager, PeertubePlayerManagerOptions, - PlayerMode, - WebtorrentOptions + PlayerMode } from '../../../assets/player/peertube-player-manager' @Component({ @@ -117,8 +116,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { .subscribe(([ video, captionsResult ]) => { const startTime = this.route.snapshot.queryParams.start const subtitle = this.route.snapshot.queryParams.subtitle + const playerMode = this.route.snapshot.queryParams.mode - this.onVideoFetched(video, captionsResult.data, { startTime, subtitle }) + this.onVideoFetched(video, captionsResult.data, { startTime, subtitle, playerMode }) .catch(err => this.handleError(err)) }) }) @@ -365,7 +365,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) } - private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], urlOptions: { startTime: number, subtitle: string }) { + private async onVideoFetched ( + video: VideoDetails, + videoCaptions: VideoCaption[], + urlOptions: { startTime?: number, subtitle?: string, playerMode?: string } + ) { this.video = video // Re init attributes @@ -440,10 +444,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } - let mode: PlayerMode - const hlsPlaylist = this.video.getHlsPlaylist() - if (hlsPlaylist) { - mode = 'p2p-media-loader' + const mode: PlayerMode = urlOptions.playerMode === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent' + + if (mode === 'p2p-media-loader') { + const hlsPlaylist = this.video.getHlsPlaylist() const p2pMediaLoader = { playlistUrl: hlsPlaylist.playlistUrl, @@ -454,8 +458,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } as P2PMediaLoaderOptions Object.assign(options, { p2pMediaLoader }) - } else { - mode = 'webtorrent' } this.zone.runOutsideAngular(async () => { -- cgit v1.2.3 From c7ca4c8be781753f86d806015b182f1ee5443fcf Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 8 Feb 2019 16:16:40 +0100 Subject: Fix client with google bot --- client/src/app/videos/+video-watch/video-watch.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'client/src/app') 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 9f3a43a08..e801f03ad 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -8,7 +8,6 @@ import { MetaService } from '@ngx-meta/core' import { Notifier, ServerService } from '@app/core' import { forkJoin, Subscription } from 'rxjs' import { Hotkey, HotkeysService } from 'angular2-hotkeys' -import * as WebTorrent from 'webtorrent' import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' import { AuthService, ConfirmService } from '../../core' import { RestExtractor, VideoBlacklistService } from '../../shared' @@ -90,7 +89,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ngOnInit () { if ( - WebTorrent.WEBRTC_SUPPORT === false || + !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false || peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' ) { this.hasAlreadyAcceptedPrivacyConcern = true -- cgit v1.2.3 From 328c78bc4a570a9aceaaa1a2124bacd4a0e8d295 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Sat, 6 Oct 2018 13:54:00 +0200 Subject: allow administration to change/reset a user's password --- client/src/app/+admin/admin.module.ts | 3 +- client/src/app/+admin/users/user-edit/index.ts | 1 + .../users/user-edit/user-edit.component.html | 10 +++ .../users/user-edit/user-edit.component.scss | 9 +- .../users/user-edit/user-password.component.html | 25 ++++++ .../users/user-edit/user-password.component.scss | 21 +++++ .../users/user-edit/user-password.component.ts | 100 +++++++++++++++++++++ .../users/user-edit/user-update.component.ts | 24 ++++- client/src/app/+admin/users/users.routes.ts | 3 +- client/src/app/shared/users/user.service.ts | 5 ++ 10 files changed, 197 insertions(+), 4 deletions(-) create mode 100644 client/src/app/+admin/users/user-edit/user-password.component.html create mode 100644 client/src/app/+admin/users/user-edit/user-password.component.scss create mode 100644 client/src/app/+admin/users/user-edit/user-password.component.ts (limited to 'client/src/app') diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts index c06ae1d60..f7f347105 100644 --- a/client/src/app/+admin/admin.module.ts +++ b/client/src/app/+admin/admin.module.ts @@ -10,7 +10,7 @@ import { FollowingListComponent } from './follows/following-list/following-list. import { JobsComponent } from './jobs/job.component' import { JobsListComponent } from './jobs/jobs-list/jobs-list.component' import { JobService } from './jobs/shared/job.service' -import { UserCreateComponent, UserListComponent, UsersComponent, UserUpdateComponent } from './users' +import { UserCreateComponent, UserListComponent, UsersComponent, UserUpdateComponent, UserPasswordComponent } from './users' import { ModerationCommentModalComponent, VideoAbuseListComponent, VideoBlacklistListComponent } from './moderation' import { ModerationComponent } from '@app/+admin/moderation/moderation.component' import { RedundancyCheckboxComponent } from '@app/+admin/follows/shared/redundancy-checkbox.component' @@ -36,6 +36,7 @@ import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } f UsersComponent, UserCreateComponent, UserUpdateComponent, + UserPasswordComponent, UserListComponent, ModerationComponent, diff --git a/client/src/app/+admin/users/user-edit/index.ts b/client/src/app/+admin/users/user-edit/index.ts index fd80a02e0..ec734ef92 100644 --- a/client/src/app/+admin/users/user-edit/index.ts +++ b/client/src/app/+admin/users/user-edit/index.ts @@ -1,2 +1,3 @@ export * from './user-create.component' export * from './user-update.component' +export * from './user-password.component' diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index 56cf7d17d..cbc06c157 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html @@ -81,3 +81,13 @@ + +
+ + +

Send a link to reset the password by mail to the user.

+ + +

Manually set the user password

+ +
\ No newline at end of file diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss index 6675f65cc..2b4aae83c 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.scss +++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss @@ -14,7 +14,7 @@ input:not([type=submit]) { @include peertube-select-container(340px); } -input[type=submit] { +input[type=submit], button { @include peertube-button; @include orange-button; @@ -25,3 +25,10 @@ input[type=submit] { margin-top: 5px; font-size: 11px; } + +.account-title { + @include in-content-small-title; + + margin-top: 55px; + margin-bottom: 30px; +} diff --git a/client/src/app/+admin/users/user-edit/user-password.component.html b/client/src/app/+admin/users/user-edit/user-password.component.html new file mode 100644 index 000000000..ee7d8dff5 --- /dev/null +++ b/client/src/app/+admin/users/user-edit/user-password.component.html @@ -0,0 +1,25 @@ +
+
+ +
+
+
+ +
+
+ +
+ +
+
+
+ {{ formErrors.password }} +
+
+ + +
\ No newline at end of file diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss new file mode 100644 index 000000000..9185e787c --- /dev/null +++ b/client/src/app/+admin/users/user-edit/user-password.component.scss @@ -0,0 +1,21 @@ +@import '_variables'; +@import '_mixins'; + +input:not([type=submit]):not([type=checkbox]) { + @include peertube-input-text(340px); + display: block; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: none; +} + +input[type=submit] { + @include peertube-button; + @include orange-button; + + margin-top: 10px; +} + +.input-group-append { + height: 30px; +} diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts new file mode 100644 index 000000000..1f9ccb4e8 --- /dev/null +++ b/client/src/app/+admin/users/user-edit/user-password.component.ts @@ -0,0 +1,100 @@ +import { Component, OnDestroy, OnInit, Input } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' +import { Subscription } from 'rxjs' +import * as generator from 'generate-password-browser' +import { NotificationsService } from 'angular2-notifications' +import { UserService } from '@app/shared/users/user.service' +import { ServerService } from '../../../core' +import { User, UserUpdate } from '../../../../../../shared' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service' +import { ConfigService } from '@app/+admin/config/shared/config.service' +import { FormReactive } from '../../../shared' + +@Component({ + selector: 'my-user-password', + templateUrl: './user-password.component.html', + styleUrls: [ './user-password.component.scss' ] +}) +export class UserPasswordComponent extends FormReactive implements OnInit, OnDestroy { + error: string + userId: number + username: string + showPassword = false + + private paramsSub: Subscription + + constructor ( + protected formValidatorService: FormValidatorService, + protected serverService: ServerService, + protected configService: ConfigService, + private userValidatorsService: UserValidatorsService, + private route: ActivatedRoute, + private router: Router, + private notificationsService: NotificationsService, + private userService: UserService, + private i18n: I18n + ) { + super() + } + + ngOnInit () { + this.buildForm({ + password: this.userValidatorsService.USER_PASSWORD + }) + + this.paramsSub = this.route.params.subscribe(routeParams => { + const userId = routeParams['id'] + this.userService.getUser(userId).subscribe( + user => this.onUserFetched(user), + + err => this.error = err.message + ) + }) + } + + ngOnDestroy () { + this.paramsSub.unsubscribe() + } + + formValidated () { + this.error = undefined + + const userUpdate: UserUpdate = this.form.value + + this.userService.updateUser(this.userId, userUpdate).subscribe( + () => { + this.notificationsService.success( + this.i18n('Success'), + this.i18n('Password changed for user {{username}}.', { username: this.username }) + ) + }, + + err => this.error = err.message + ) + } + + generatePassword () { + this.form.patchValue({ + password: generator.generate({ + length: 16, + excludeSimilarCharacters: true, + strict: true + }) + }) + } + + togglePasswordVisibility () { + this.showPassword = !this.showPassword + } + + getFormButtonTitle () { + return this.i18n('Update user password') + } + + private onUserFetched (userJson: User) { + this.userId = userJson.id + this.username = userJson.username + } +} diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts index 61e641823..cb74897d0 100644 --- a/client/src/app/+admin/users/user-edit/user-update.component.ts +++ b/client/src/app/+admin/users/user-edit/user-update.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core' +import { Component, OnDestroy, OnInit, Input } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Subscription } from 'rxjs' import { Notifier } from '@app/core' @@ -19,9 +19,12 @@ import { UserService } from '@app/shared' export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { error: string userId: number + userEmail: string username: string + isAdministration = false private paramsSub: Subscription + private isAdministrationSub: Subscription constructor ( protected formValidatorService: FormValidatorService, @@ -56,10 +59,15 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { err => this.error = err.message ) }) + + this.isAdministrationSub = this.route.data.subscribe(data => { + if (data.isAdministration) this.isAdministration = data.isAdministration + }) } ngOnDestroy () { this.paramsSub.unsubscribe() + this.isAdministrationSub.unsubscribe() } formValidated () { @@ -89,9 +97,23 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { return this.i18n('Update user') } + resetPassword () { + this.userService.askResetPassword(this.userEmail).subscribe( + () => { + this.notificationsService.success( + this.i18n('Success'), + this.i18n('An email asking for password reset has been sent to {{username}}.', { username: this.username }) + ) + }, + + err => this.error = err.message + ) + } + private onUserFetched (userJson: User) { this.userId = userJson.id this.username = userJson.username + this.userEmail = userJson.email this.form.patchValue({ email: userJson.email, diff --git a/client/src/app/+admin/users/users.routes.ts b/client/src/app/+admin/users/users.routes.ts index 8b3791bd3..460ebd89e 100644 --- a/client/src/app/+admin/users/users.routes.ts +++ b/client/src/app/+admin/users/users.routes.ts @@ -44,7 +44,8 @@ export const UsersRoutes: Routes = [ data: { meta: { title: 'Update a user' - } + }, + isAdministration: true } } ] diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts index cc5c051f1..d0abc7def 100644 --- a/client/src/app/shared/users/user.service.ts +++ b/client/src/app/shared/users/user.service.ts @@ -103,6 +103,11 @@ export class UserService { ) } + resetUserPassword (userId: number) { + return this.authHttp.post(UserService.BASE_USERS_URL + userId + '/reset-password', {}) + .pipe(catchError(err => this.restExtractor.handleError(err))) + } + verifyEmail (userId: number, verificationString: string) { const url = `${UserService.BASE_USERS_URL}/${userId}/verify-email` const body = { -- cgit v1.2.3 From a3342ce250936c30dc6df7563f4e984c172f61c1 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Mon, 8 Oct 2018 15:56:56 +0200 Subject: remove isAdministration --- client/src/app/+admin/users/user-edit/user-edit.component.html | 10 ++++------ .../app/+admin/users/user-edit/user-password.component.html | 4 ++-- client/src/app/+admin/users/user-edit/user-update.component.ts | 7 ------- client/src/app/+admin/users/users.routes.ts | 3 +-- 4 files changed, 7 insertions(+), 17 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index cbc06c157..b06c91ff3 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html @@ -82,12 +82,10 @@ -
-

Send a link to reset the password by mail to the user.

- +

Send a link to reset the password by mail to the user.

+ -

Manually set the user password

- -
\ No newline at end of file +

Manually set the user password

+ diff --git a/client/src/app/+admin/users/user-edit/user-password.component.html b/client/src/app/+admin/users/user-edit/user-password.component.html index ee7d8dff5..267422bdd 100644 --- a/client/src/app/+admin/users/user-edit/user-password.component.html +++ b/client/src/app/+admin/users/user-edit/user-password.component.html @@ -8,7 +8,7 @@
@@ -22,4 +22,4 @@
- \ No newline at end of file + diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts index cb74897d0..4e4002a73 100644 --- a/client/src/app/+admin/users/user-edit/user-update.component.ts +++ b/client/src/app/+admin/users/user-edit/user-update.component.ts @@ -21,10 +21,8 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { userId: number userEmail: string username: string - isAdministration = false private paramsSub: Subscription - private isAdministrationSub: Subscription constructor ( protected formValidatorService: FormValidatorService, @@ -59,15 +57,10 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { err => this.error = err.message ) }) - - this.isAdministrationSub = this.route.data.subscribe(data => { - if (data.isAdministration) this.isAdministration = data.isAdministration - }) } ngOnDestroy () { this.paramsSub.unsubscribe() - this.isAdministrationSub.unsubscribe() } formValidated () { diff --git a/client/src/app/+admin/users/users.routes.ts b/client/src/app/+admin/users/users.routes.ts index 460ebd89e..8b3791bd3 100644 --- a/client/src/app/+admin/users/users.routes.ts +++ b/client/src/app/+admin/users/users.routes.ts @@ -44,8 +44,7 @@ export const UsersRoutes: Routes = [ data: { meta: { title: 'Update a user' - }, - isAdministration: true + } } } ] -- cgit v1.2.3 From 2c2baef6f30625794cf1f4f72c184527a4d82562 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Mon, 8 Oct 2018 21:05:57 +0200 Subject: move user-password to Input decorator --- .../src/app/+admin/users/user-edit/user-edit.component.html | 2 +- .../app/+admin/users/user-edit/user-password.component.ts | 12 ++---------- 2 files changed, 3 insertions(+), 11 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index b06c91ff3..6944ec435 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html @@ -88,4 +88,4 @@

Manually set the user password

- + diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts index 1f9ccb4e8..99c4c8a59 100644 --- a/client/src/app/+admin/users/user-edit/user-password.component.ts +++ b/client/src/app/+admin/users/user-edit/user-password.component.ts @@ -19,10 +19,11 @@ import { FormReactive } from '../../../shared' }) export class UserPasswordComponent extends FormReactive implements OnInit, OnDestroy { error: string - userId: number username: string showPassword = false + @Input() userId: number + private paramsSub: Subscription constructor ( @@ -43,15 +44,6 @@ export class UserPasswordComponent extends FormReactive implements OnInit, OnDes this.buildForm({ password: this.userValidatorsService.USER_PASSWORD }) - - this.paramsSub = this.route.params.subscribe(routeParams => { - const userId = routeParams['id'] - this.userService.getUser(userId).subscribe( - user => this.onUserFetched(user), - - err => this.error = err.message - ) - }) } ngOnDestroy () { -- cgit v1.2.3 From 67b1d3fed765278bdc876cce393ef56d56942df0 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Sat, 8 Dec 2018 15:37:36 +0100 Subject: cleanup and remove paramSubs --- client/src/app/+admin/users/user-edit/user-edit.component.html | 10 ++++++---- .../app/+admin/users/user-edit/user-password.component.html | 4 ++-- .../src/app/+admin/users/user-edit/user-password.component.ts | 5 +---- 3 files changed, 9 insertions(+), 10 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index 6944ec435..3ce246771 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html @@ -82,10 +82,12 @@ +
-

Send a link to reset the password by mail to the user.

- +

Send a link to reset the password by mail to the user.

+ -

Manually set the user password

- +

Manually set the user password

+ +
\ No newline at end of file diff --git a/client/src/app/+admin/users/user-edit/user-password.component.html b/client/src/app/+admin/users/user-edit/user-password.component.html index 267422bdd..822e4688e 100644 --- a/client/src/app/+admin/users/user-edit/user-password.component.html +++ b/client/src/app/+admin/users/user-edit/user-password.component.html @@ -1,4 +1,4 @@ -
+
@@ -12,7 +12,7 @@ formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" >
-
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts index 99c4c8a59..30cd21ccd 100644 --- a/client/src/app/+admin/users/user-edit/user-password.component.ts +++ b/client/src/app/+admin/users/user-edit/user-password.component.ts @@ -1,6 +1,5 @@ import { Component, OnDestroy, OnInit, Input } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import { Subscription } from 'rxjs' import * as generator from 'generate-password-browser' import { NotificationsService } from 'angular2-notifications' import { UserService } from '@app/shared/users/user.service' @@ -24,8 +23,6 @@ export class UserPasswordComponent extends FormReactive implements OnInit, OnDes @Input() userId: number - private paramsSub: Subscription - constructor ( protected formValidatorService: FormValidatorService, protected serverService: ServerService, @@ -47,7 +44,7 @@ export class UserPasswordComponent extends FormReactive implements OnInit, OnDes } ngOnDestroy () { - this.paramsSub.unsubscribe() + // } formValidated () { -- cgit v1.2.3 From b426edd4854adc6e65844d8c54b8998e792b5778 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 11 Feb 2019 09:30:29 +0100 Subject: Cleanup reset user password by admin And add some tests --- .../users/user-edit/user-edit.component.html | 16 ++++++---- .../users/user-edit/user-edit.component.scss | 13 ++++++++ client/src/app/+admin/users/user-edit/user-edit.ts | 5 ++++ .../users/user-edit/user-password.component.html | 16 ++++------ .../users/user-edit/user-password.component.scss | 1 + .../users/user-edit/user-password.component.ts | 35 ++++------------------ .../users/user-edit/user-update.component.ts | 5 ++-- client/src/app/shared/users/user.service.ts | 5 ---- 8 files changed, 42 insertions(+), 54 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index 3ce246771..c6566da24 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html @@ -82,12 +82,16 @@ -
+
-

Send a link to reset the password by mail to the user.

- +
+ + +
-

Manually set the user password

- -
\ No newline at end of file +
+ + +
+
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss index 2b4aae83c..c1cc4ca45 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.scss +++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss @@ -32,3 +32,16 @@ input[type=submit], button { margin-top: 55px; margin-bottom: 30px; } + +.danger-zone { + .reset-password-email { + margin-bottom: 30px; + padding-bottom: 30px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + + button { + display: block; + margin-top: 0; + } + } +} diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts index 021b1feb4..649b35b0c 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.ts +++ b/client/src/app/+admin/users/user-edit/user-edit.ts @@ -8,6 +8,7 @@ export abstract class UserEdit extends FormReactive { videoQuotaDailyOptions: { value: string, label: string }[] = [] roles = Object.keys(USER_ROLE_LABELS).map(key => ({ value: key.toString(), label: USER_ROLE_LABELS[key] })) username: string + userId: number protected abstract serverService: ServerService protected abstract configService: ConfigService @@ -37,6 +38,10 @@ export abstract class UserEdit extends FormReactive { return multiplier * parseInt(this.form.value['videoQuota'], 10) } + resetPassword () { + return + } + protected buildQuotaOptions () { // These are used by a HTML select, so convert key into strings this.videoQuotaOptions = this.configService diff --git a/client/src/app/+admin/users/user-edit/user-password.component.html b/client/src/app/+admin/users/user-edit/user-password.component.html index 822e4688e..a1e1f6216 100644 --- a/client/src/app/+admin/users/user-edit/user-password.component.html +++ b/client/src/app/+admin/users/user-edit/user-password.component.html @@ -1,19 +1,15 @@
-
-
-
- -
-
- +
- +
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss index 9185e787c..217d585af 100644 --- a/client/src/app/+admin/users/user-edit/user-password.component.scss +++ b/client/src/app/+admin/users/user-edit/user-password.component.scss @@ -3,6 +3,7 @@ input:not([type=submit]):not([type=checkbox]) { @include peertube-input-text(340px); + display: block; border-top-right-radius: 0; border-bottom-right-radius: 0; diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts index 30cd21ccd..5b3040440 100644 --- a/client/src/app/+admin/users/user-edit/user-password.component.ts +++ b/client/src/app/+admin/users/user-edit/user-password.component.ts @@ -1,14 +1,11 @@ -import { Component, OnDestroy, OnInit, Input } from '@angular/core' +import { Component, Input, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import * as generator from 'generate-password-browser' -import { NotificationsService } from 'angular2-notifications' import { UserService } from '@app/shared/users/user.service' -import { ServerService } from '../../../core' +import { Notifier } from '../../../core' import { User, UserUpdate } from '../../../../../../shared' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service' -import { ConfigService } from '@app/+admin/config/shared/config.service' import { FormReactive } from '../../../shared' @Component({ @@ -16,7 +13,7 @@ import { FormReactive } from '../../../shared' templateUrl: './user-password.component.html', styleUrls: [ './user-password.component.scss' ] }) -export class UserPasswordComponent extends FormReactive implements OnInit, OnDestroy { +export class UserPasswordComponent extends FormReactive implements OnInit { error: string username: string showPassword = false @@ -25,12 +22,10 @@ export class UserPasswordComponent extends FormReactive implements OnInit, OnDes constructor ( protected formValidatorService: FormValidatorService, - protected serverService: ServerService, - protected configService: ConfigService, private userValidatorsService: UserValidatorsService, private route: ActivatedRoute, private router: Router, - private notificationsService: NotificationsService, + private notifier: Notifier, private userService: UserService, private i18n: I18n ) { @@ -43,10 +38,6 @@ export class UserPasswordComponent extends FormReactive implements OnInit, OnDes }) } - ngOnDestroy () { - // - } - formValidated () { this.error = undefined @@ -54,8 +45,7 @@ export class UserPasswordComponent extends FormReactive implements OnInit, OnDes this.userService.updateUser(this.userId, userUpdate).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), + this.notifier.success( this.i18n('Password changed for user {{username}}.', { username: this.username }) ) }, @@ -64,16 +54,6 @@ export class UserPasswordComponent extends FormReactive implements OnInit, OnDes ) } - generatePassword () { - this.form.patchValue({ - password: generator.generate({ - length: 16, - excludeSimilarCharacters: true, - strict: true - }) - }) - } - togglePasswordVisibility () { this.showPassword = !this.showPassword } @@ -81,9 +61,4 @@ export class UserPasswordComponent extends FormReactive implements OnInit, OnDes getFormButtonTitle () { return this.i18n('Update user password') } - - private onUserFetched (userJson: User) { - this.userId = userJson.id - this.username = userJson.username - } } diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts index 4e4002a73..94ef87b08 100644 --- a/client/src/app/+admin/users/user-edit/user-update.component.ts +++ b/client/src/app/+admin/users/user-edit/user-update.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit, Input } from '@angular/core' +import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Subscription } from 'rxjs' import { Notifier } from '@app/core' @@ -93,8 +93,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { resetPassword () { this.userService.askResetPassword(this.userEmail).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), + this.notifier.success( this.i18n('An email asking for password reset has been sent to {{username}}.', { username: this.username }) ) }, diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts index d0abc7def..cc5c051f1 100644 --- a/client/src/app/shared/users/user.service.ts +++ b/client/src/app/shared/users/user.service.ts @@ -103,11 +103,6 @@ export class UserService { ) } - resetUserPassword (userId: number) { - return this.authHttp.post(UserService.BASE_USERS_URL + userId + '/reset-password', {}) - .pipe(catchError(err => this.restExtractor.handleError(err))) - } - verifyEmail (userId: number, verificationString: string) { const url = `${UserService.BASE_USERS_URL}/${userId}/verify-email` const body = { -- cgit v1.2.3 From 501e961199578129629cf0567033d13efced9904 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 11 Feb 2019 12:00:19 +0100 Subject: Move enabled download/comments in advanced tab --- .../+video-edit/shared/video-edit.component.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index 7fd9af208..59ba15b53 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -120,16 +120,6 @@ i18n-helpHtml helpHtml="Some instances do not list videos containing mature or explicit content by default." > - - - -
+ + + +
-- cgit v1.2.3