From: Chocobozzz Date: Wed, 6 Feb 2019 11:26:58 +0000 (+0100) Subject: Merge branch 'release/v1.2.0' X-Git-Tag: v1.3.0-rc.2~11^2~1 X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=73471b1a52f242e86364ffb077ea6cadb3b07ae2;hp=c22419dd265c0c7185bf4197a1cb286eb3d8ebc0;p=github%2FChocobozzz%2FPeerTube.git Merge branch 'release/v1.2.0' --- diff --git a/.travis.yml b/.travis.yml index 3a73e4fc0..d252ae625 100644 --- a/.travis.yml +++ b/.travis.yml @@ -48,12 +48,12 @@ matrix: - env: TEST_SUITE=jest script: - - travis_retry npm run travis -- "$TEST_SUITE" + - NODE_PENDING_JOB_WAIT=1000 travis_retry npm run travis -- "$TEST_SUITE" after_failure: - - cat test1/logs/all-logs.log - - cat test2/logs/all-logs.log - - cat test3/logs/all-logs.log - - cat test4/logs/all-logs.log - - cat test5/logs/all-logs.log - - cat test6/logs/all-logs.log + - cat test1/logs/peertube.log + - cat test2/logs/peertube.log + - cat test3/logs/peertube.log + - cat test4/logs/peertube.log + - cat test5/logs/peertube.log + - cat test6/logs/peertube.log diff --git a/CHANGELOG.md b/CHANGELOG.md index cce6e7402..13bec7535 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,101 @@ # Changelog +## v1.2.0 + +### BREAKING CHANGES + + * **Docker:** `PEERTUBE_TRUST_PROXY` env variable is now an array ([LecygneNoir](https://github.com/LecygneNoir)) + * **Docker:** Check you have all the storage fields in your `/config/production.yaml` file: https://github.com/Chocobozzz/PeerTube/blob/develop/support/docker/production/config/production.yaml#L34 + * **nginx:** Add redundancy endpoint in static file. **You should add it in your nginx configuration: https://github.com/Chocobozzz/PeerTube/blob/develop/support/doc/production.md#nginx** + * **nginx:** Add socket io endpoint. **You should add it in your nginx configuration: https://github.com/Chocobozzz/PeerTube/blob/develop/support/doc/production.md#nginx** + * Moderators can manage users now (add/delete/update/block) + * Add `tmp` and `redundancy` directories in configuration file. **You should configure them in your production.yaml** + +### Maintenance + + * Check free storage before upgrading in upgrade script ([@Nutomic](https://github.com/nutomic)) + * Explain that PeerTube must be stopped in prune storage script + * Add some security directives in the systemd unit configuration file ([@rigelk](https://github.com/rigelk) & [@mkoppmann](https://github.com/mkoppmann)) + * Update FreeBSD startup script ([@gegeweb](https://github.com/gegeweb)) + +### Docker + + * Patch docker entrypoint to speed up the chown at startup ([LecygneNoir](https://github.com/LecygneNoir)) + +### Features + + * Add Russian, Polish and Italian languages + * Add user notifications: + * Notification types: + * Comment on my video + * New video from my subscriptions + * New video abuses (for moderators) + * Blacklist/Unblacklist on my video + * Video import finished (error or success) + * Pending video published (after transcoding or a scheduled update) + * My account or one of my channel has a new follower + * Someone (except muted accounts) mentioned me in comments + * A user registered on the instance (for moderators) + * Notification actions: + * Add a web notification + * Send an english email + * Add contact form in about page (**enabled by default**) + * Add ability to unfederate a local video in blacklist modal (**checkbox checked by default**) + * Support additional video extensions if transcoding is enabled (**enabled by default**) + * Redirect to the last url on login + * Add ability to automatically set the video caption in URL. Example: https://peertube2.cpy.re/videos/watch/9c9de5e8-0a1e-484a-b099-e80766180a6d?subtitle=ru + * Automatically enable the last selected caption when watching a video + * Add ability to disable, clear and list user videos history + * Add a button to help to translate peertube + * Add text in the report modal to explain to whom the report will be sent + * Open my account menu entries on hover + * Explain what features are enabled on the instance in the about page + * Add an error message in the forgot password modal if the instance email system is not configured + * Add sitemap + * Add well known url to change password ([@rigelk](https://github.com/rigelk)) + * Remove 8GB video upload limit on client side. There may still be such limit depending on the reverse proxy configuration ([@scanlime](https://github.com/scanlime)) + * Add CSP ([@rigelk](https://github.com/rigelk) & [@Nutomic](https://github.com/nutomic)) + * Update title and description HTML tags when rendering video HTML page + * Add webfinger support for remote follows ([@acid-chicken](https://github.com/acid-chicken)) + * Add tooltip to explain how the trending algorithm works ([@auberanger](https://github.com/auberanger)) + * Warn users when they want to delete a channel because they will not be able to create another channel with the same name + * Warn users when they leave the video upload/update (on page refresh/tab close) + * Set max user name, user display name, channel name and channel display name lengths to 50 characters ([@McFlat](https://github.com/mcflat)) + * Increase video abuse length to 3000 characters + * Add totalLocalVideoFilesSize in the stats endpoint + +## Bug fixes + + * Fix the addition of captions to a video + * Fix federation of some videos + * Fix NSFW blur on search + * Add error message when trying to upload .ass subtitles + * Fix default homepage in the progressive web application + * Don't crash on queue error + * Fix EXDEV errors if you have multiple mount points + * Fix broken audio in transcoding with some videos + * Fix crash on getVideoFileStream issue + * Fix followers search + * Remove trailing `/` in CLI import script ([@HesioZ](https://github.com/HesioZ/)) + * Use origin video url in canonical tag + * Fix captions in HTTP fallback + * Automatically refresh remote actors to fix deleted remote actors that are still displayed on some instances + * Add missing translations in video embed page + * Fix some styling issues in dark mode + * Fix transcoding issues with some videos + * Fix Mac OS mkv/avi upload + * Fix menu overflow on mobile + * Fix ownership button icons ([@joshmorel](https://github.com/joshmorel)) + + ## v1.1.0 ***Since v1.0.1*** +### BREAKING CHANGES + + * **Docker:** `PEERTUBE_TRUST_PROXY` env variable is now an array ([LecygneNoir](https://github.com/LecygneNoir)) + ### Maintenance * Improve REST API documentation: https://docs.joinpeertube.org/api.html ([@rigelk](https://github.com/rigelk)) @@ -26,7 +118,6 @@ * Add postfix image * Redirect HTTP -> HTTPS * Disable Træfik web UI - * Add ability to set an array in `PEERTUBE_TRUST_PROXY` ([LecygneNoir](https://github.com/LecygneNoir)) ### Features diff --git a/CREDITS.md b/CREDITS.md index ad5125227..509f9800d 100644 --- a/CREDITS.md +++ b/CREDITS.md @@ -6,25 +6,27 @@ * [Nutomic](https://github.com/Nutomic) * [Jorropo](https://github.com/Jorropo) * [BO41](https://github.com/BO41) + * [joshmorel](https://github.com/joshmorel) + * [buoyantair](https://github.com/buoyantair) * [bnjbvr](https://github.com/bnjbvr) * [DavidLibeau](https://github.com/DavidLibeau) * [jankeromnes](https://github.com/jankeromnes) - * [joshmorel](https://github.com/joshmorel) * [JohnXLivingston](https://github.com/JohnXLivingston) * [kaiyou](https://github.com/kaiyou) + * [McFlat](https://github.com/McFlat) * [DimitriGilbert](https://github.com/DimitriGilbert) * [floSoX](https://github.com/floSoX) * [Green-Star](https://github.com/Green-Star) + * [thomaskuntzz](https://github.com/thomaskuntzz) * [rezonant](https://github.com/rezonant) * [ldidry](https://github.com/ldidry) - * [McFlat](https://github.com/McFlat) * [okhin](https://github.com/okhin) * [daftaupe](https://github.com/daftaupe) - * [thomaskuntzz](https://github.com/thomaskuntzz) * [LecygneNoir](https://github.com/LecygneNoir) * [fflorent](https://github.com/fflorent) * [dedesite](https://github.com/dedesite) * [Nautigsam](https://github.com/Nautigsam) + * [scanlime](https://github.com/scanlime) * [tcitworld](https://github.com/tcitworld) * [am97](https://github.com/am97) * [dadall](https://github.com/dadall) @@ -35,7 +37,6 @@ * [jocelynj](https://github.com/jocelynj) * [lucas-dclrcq](https://github.com/lucas-dclrcq) * [lucaspontoexe](https://github.com/lucaspontoexe) - * [scanlime](https://github.com/scanlime) * [flyingrub](https://github.com/flyingrub) * [SerCom-KC](https://github.com/SerCom-KC) * [valvin1](https://github.com/valvin1) @@ -43,6 +44,7 @@ * [sticmac](https://github.com/sticmac) * [barbeque](https://github.com/barbeque) * [luzpaz](https://github.com/luzpaz) + * [acid-chicken](https://github.com/acid-chicken) * [louistio](https://github.com/louistio) * [qsypoq](https://github.com/qsypoq) * [daker](https://github.com/daker) @@ -65,6 +67,7 @@ * [grizio](https://github.com/grizio) * [Glandos](https://github.com/Glandos) * [lanodan](https://github.com/lanodan) + * [HesioZ](https://github.com/HesioZ) * [jagannathBhat](https://github.com/jagannathBhat) * [jlebras](https://github.com/jlebras) * [alcalyn](https://github.com/alcalyn) @@ -73,7 +76,9 @@ * [zapashcanon](https://github.com/zapashcanon) * [mart-e](https://github.com/mart-e) * [0mp](https://github.com/0mp) + * [mkoppmann](https://github.com/mkoppmann) * [1000i100](https://github.com/1000i100) + * [roipoussiere](https://github.com/roipoussiere) * [zeograd](https://github.com/zeograd) * [PhieF](https://github.com/PhieF) * [Quenty31](https://github.com/Quenty31) @@ -125,11 +130,14 @@ * [h3zjp](https://trad.framasoft.org/zanata/profile/view/h3zjp) * [jfblanc](https://trad.framasoft.org/zanata/profile/view/jfblanc) * [jhertel](https://trad.framasoft.org/zanata/profile/view/jhertel) + * [jmf](https://trad.framasoft.org/zanata/profile/view/jmf) * [jorropo](https://trad.framasoft.org/zanata/profile/view/jorropo) + * [kairozen](https://trad.framasoft.org/zanata/profile/view/kairozen) * [kedemferre](https://trad.framasoft.org/zanata/profile/view/kedemferre) * [kousha](https://trad.framasoft.org/zanata/profile/view/kousha) * [krkk](https://trad.framasoft.org/zanata/profile/view/krkk) * [landrok](https://trad.framasoft.org/zanata/profile/view/landrok) + * [leeroyepold48](https://trad.framasoft.org/zanata/profile/view/leeroyepold48) * [m4sk1n](https://trad.framasoft.org/zanata/profile/view/m4sk1n) * [matograine](https://trad.framasoft.org/zanata/profile/view/matograine) * [medow](https://trad.framasoft.org/zanata/profile/view/medow) @@ -167,6 +175,10 @@ * [xinayder](https://trad.framasoft.org/zanata/profile/view/xinayder) * [xosem](https://trad.framasoft.org/zanata/profile/view/xosem) * [zveryok](https://trad.framasoft.org/zanata/profile/view/zveryok) + * [aditoo](https://trad.framasoft.org/zanata/profile/view/aditoo) + * [autom](https://trad.framasoft.org/zanata/profile/view/autom) + * [curupira](https://trad.framasoft.org/zanata/profile/view/curupira) + * [leeroyepold48](https://trad.framasoft.org/zanata/profile/view/leeroyepold48) # Design diff --git a/FAQ.md b/FAQ.md index 1e586161c..e335868f8 100644 --- a/FAQ.md +++ b/FAQ.md @@ -13,6 +13,8 @@ - [Will an index of all the videos of servers you follow be too large for small servers?](#will-an-index-of-all-the-videos-of-servers-you-follow-be-too-large-for-small-servers) - [Which container formats can I use for the videos I want to upload?](#which-container-formats-can-i-use-for-the-videos-i-want-to-upload) - [I want to change my domain name, how can I do that?](#i-want-to-change-my-domain-name-how-can-i-do-that) +- [Why do we have to put our Twitter username in PeerTube configuration?](#why-do-we-have-to-put-our-twitter-username-in-peertube-configuration) +- [How video views are calculated?](#how-video-views-are-calculated) - [Should I have a big server to run PeerTube?](#should-i-have-a-big-server-to-run-peertube) - [Can I seed videos with my classic BitTorrent client (Transmission, rTorrent...)?](#can-i-seed-videos-with-my-classic-bittorrent-client-transmission-rtorrent) - [Why host on GitHub and Framagit?](#why-host-on-github-and-framagit) @@ -89,6 +91,18 @@ WEBM, MP4 or OGV videos. You can't. You'll need to reinstall an instance and reupload your videos. +## Why do we have to put our Twitter username in PeerTube configuration? + +You don't have to: we set a default value if you don't have a Twitter account. +We need this information because Twitter requires an account for links share/videos embed on their platform. + + +## How video views are calculated? + +Your web browser sends a view to the server after 30 seconds of playback. Then, the IP cannot send another view in the next hour. +Views are buffered, so don't panic if the view counter stays the same after you watched a video. + + ## Should I have a big server to run PeerTube? Not really. For instance, the demonstration server [https://peertube.cpy.re](https://peertube.cpy.re) has 2 vCore and 2GB of RAM and consumes on average: diff --git a/README.md b/README.md index a3669353b..a9b4eb54a 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,16 @@ Be part of a network of multiple small federated, interoperable video hosting providers. Follow video creators and create videos. No vendor lock-in. All on a platform that is community-owned and ad-free.

+

+ Developed with ❤ by Framasoft +

+ +

+ + Framasoft logo + +

+

Client @@ -123,7 +133,7 @@ You can also join the cheerful bunch that makes our community: * Chat: * IRC : **[#peertube on chat.freenode.net:6697](https://kiwiirc.com/client/irc.freenode.net/#peertube)** - * Matrix (bridged on the IRC channel) : **[#peertube:matrix.org](https://matrix.to/#/#peertube:matrix.org)** + * Matrix (bridged on IRC and [Discord](https://discord.gg/wj8DDUT)) : **[#peertube:matrix.org](https://matrix.to/#/#peertube:matrix.org)** * Forum: * Framacolibri: [https://framacolibri.org/c/peertube](https://framacolibri.org/c/peertube) diff --git a/client/package.json b/client/package.json index 3761a641a..31fc77887 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "peertube-client", - "version": "1.1.0", + "version": "1.2.0", "private": true, "licence": "GPLv3", "author": { @@ -63,26 +63,26 @@ "setupTestFrameworkScriptFile": "/src/setupJest.ts" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.10.0", - "@angular/animations": "~7.0.2", - "@angular/cli": "~7.0.4", - "@angular/common": "~7.0.2", - "@angular/compiler": "~7.0.2", - "@angular/compiler-cli": "~7.0.2", - "@angular/core": "~7.0.2", - "@angular/forms": "~7.0.2", - "@angular/http": "~7.0.2", - "@angular/language-service": "~7.0.2", - "@angular/platform-browser": "~7.0.2", - "@angular/platform-browser-dynamic": "~7.0.2", - "@angular/router": "~7.0.2", - "@angular/service-worker": "~7.0.2", + "@angular-devkit/build-angular": "~0.11.1", + "@angular/animations": "~7.1.1", + "@angular/cli": "~7.1.1", + "@angular/common": "~7.1.1", + "@angular/compiler": "~7.1.1", + "@angular/compiler-cli": "~7.1.1", + "@angular/core": "~7.1.1", + "@angular/forms": "~7.1.1", + "@angular/http": "~7.1.1", + "@angular/language-service": "~7.1.1", + "@angular/platform-browser": "~7.1.1", + "@angular/platform-browser-dynamic": "~7.1.1", + "@angular/router": "~7.1.1", + "@angular/service-worker": "~7.1.1", "@angularclass/hmr": "^2.1.3", "@neos21/bootstrap3-glyphicons": "^1.0.1", "@ng-bootstrap/ng-bootstrap": "^4.0.0", - "@ngx-loading-bar/core": "^2.2.0", - "@ngx-loading-bar/http-client": "^2.2.0", - "@ngx-loading-bar/router": "^2.2.0", + "@ngx-loading-bar/core": "^3.0.0", + "@ngx-loading-bar/http-client": "^3.0.0", + "@ngx-loading-bar/router": "^3.0.0", "@ngx-meta/core": "^6.0.0-rc.1", "@ngx-translate/i18n-polyfill": "^1.0.0", "@types/core-js": "^2.5.0", @@ -94,10 +94,10 @@ "@types/markdown-it": "^0.0.5", "@types/node": "^10.9.2", "@types/sanitize-html": "1.18.0", + "@types/socket.io-client": "^1.4.32", "@types/video.js": "^7.2.5", "@types/webtorrent": "^0.98.4", "angular2-hotkeys": "^2.1.2", - "angular2-notifications": "^1.0.2", "awesome-typescript-loader": "5.2.1", "bootstrap": "^4.1.3", "buffer": "^5.1.0", @@ -132,7 +132,7 @@ "node-sass": "^4.9.3", "npm-font-source-sans-pro": "^1.0.2", "path-browserify": "^1.0.0", - "primeng": "^6.1.2", + "primeng": "^7.0.0", "process": "^0.11.10", "protractor": "^5.3.2", "purify-css": "^1.2.5", @@ -142,6 +142,7 @@ "sanitize-html": "^1.18.4", "sass-loader": "^7.1.0", "sass-resources-loader": "^2.0.0", + "socket.io-client": "^2.2.0", "stream-browserify": "^2.0.1", "stream-http": "^3.0.0", "terser-webpack-plugin": "^1.1.0", @@ -153,7 +154,6 @@ "videojs-contextmenu-ui": "^5.0.0", "videojs-dock": "^2.0.2", "videojs-hotkeys": "^0.2.21", - "webpack": "^4.17.1", "webpack-bundle-analyzer": "^3.0.2", "webpack-cli": "^3.0.8", "webtorrent": "https://github.com/webtorrent/webtorrent#e9b209c7970816fc29e0cc871157a4918d66001d", diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html index 5970cac01..8c700752e 100644 --- a/client/src/app/+about/about-instance/about-instance.component.html +++ b/client/src/app/+about/about-instance/about-instance.component.html @@ -1,39 +1,52 @@ -

- About {{ instanceName }} instance -
+
+
+
+
About {{ instanceName }} instance
-
-
{{ shortDescription }}
-
+
Contact administrator
+
-
-
Description
+
+
{{ shortDescription }}
+
-
-
+
+
Description
-
-
Terms
+
+
-
-
+
+
Terms
- -
- User registration is allowed and +
-
- User registration is currently not allowed. +
+ +
-
\ No newline at end of file +
+ + diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss index b451e85aa..75cf57322 100644 --- a/client/src/app/+about/about-instance/about-instance.component.scss +++ b/client/src/app/+about/about-instance/about-instance.component.scss @@ -2,9 +2,19 @@ @import '_mixins'; .about-instance-title { - font-size: 20px; - font-weight: bold; - margin-bottom: 15px; + display: flex; + justify-content: space-between; + + & > div { + font-size: 20px; + font-weight: bold; + margin-bottom: 15px; + } + + & > .contact-admin { + @include peertube-button; + @include orange-button; + } } .section-title { 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 354f52ce7..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,23 +1,26 @@ -import { Component, OnInit } from '@angular/core' -import { ServerService } from '@app/core' -import { MarkdownService } from '@app/videos/shared' -import { NotificationsService } from 'angular2-notifications' +import { Component, OnInit, ViewChild } from '@angular/core' +import { Notifier, ServerService } from '@app/core' 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', templateUrl: './about-instance.component.html', styleUrls: [ './about-instance.component.scss' ] }) - export class AboutInstanceComponent implements OnInit { + @ViewChild('contactAdminModal') contactAdminModal: ContactAdminModalComponent + shortDescription = '' descriptionHTML = '' termsHTML = '' constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private serverService: ServerService, + private instanceService: InstanceService, private markdownService: MarkdownService, private i18n: I18n ) {} @@ -34,8 +37,12 @@ export class AboutInstanceComponent implements OnInit { return this.serverService.getConfig().signup.allowed } + get isContactFormEnabled () { + return this.serverService.getConfig().email.enabled && this.serverService.getConfig().contactForm.enabled + } + ngOnInit () { - this.serverService.getAbout() + this.instanceService.getAbout() .subscribe( res => { this.shortDescription = res.instance.shortDescription @@ -43,8 +50,12 @@ export class AboutInstanceComponent implements OnInit { this.termsHTML = this.markdownService.textMarkdownToHTML(res.instance.terms) }, - err => this.notificationsService.error(this.i18n('Error getting about from server'), err) + () => this.notifier.error(this.i18n('Cannot get about information from server')) ) } + openContactModal () { + return this.contactAdminModal.show() + } + } 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 new file mode 100644 index 000000000..b2cbd0873 --- /dev/null +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html @@ -0,0 +1,50 @@ + +
+

Contact {{ instanceName }} administrator

+ +
+ +
+ +
+
+ + +
{{ formErrors.fromName }}
+
+ +
+ + +
{{ formErrors.fromEmail }}
+
+ +
+ + +
{{ formErrors.body }}
+
+ +
{{ error }}
+ +
+ + Cancel + + + +
+
+ +
+ diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss new file mode 100644 index 000000000..260d77888 --- /dev/null +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss @@ -0,0 +1,11 @@ +@import 'variables'; +@import 'mixins'; + +input[type=text] { + @include peertube-input-text(340px); + display: block; +} + +textarea { + @include peertube-textarea(100%, 200px); +} diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.ts b/client/src/app/+about/about-instance/contact-admin-modal.component.ts new file mode 100644 index 000000000..7d79c2215 --- /dev/null +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.ts @@ -0,0 +1,77 @@ +import { Component, OnInit, ViewChild } from '@angular/core' +import { Notifier, ServerService } from '@app/core' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' +import { FormReactive, InstanceValidatorsService } from '@app/shared' +import { InstanceService } from '@app/shared/instance/instance.service' + +@Component({ + selector: 'my-contact-admin-modal', + templateUrl: './contact-admin-modal.component.html', + styleUrls: [ './contact-admin-modal.component.scss' ] +}) +export class ContactAdminModalComponent extends FormReactive implements OnInit { + @ViewChild('modal') modal: NgbModal + + error: string + + private openedModal: NgbModalRef + + constructor ( + protected formValidatorService: FormValidatorService, + private modalService: NgbModal, + private instanceValidatorsService: InstanceValidatorsService, + private instanceService: InstanceService, + private serverService: ServerService, + private notifier: Notifier, + private i18n: I18n + ) { + super() + } + + get instanceName () { + return this.serverService.getConfig().instance.name + } + + ngOnInit () { + this.buildForm({ + fromName: this.instanceValidatorsService.FROM_NAME, + fromEmail: this.instanceValidatorsService.FROM_EMAIL, + body: this.instanceValidatorsService.BODY + }) + } + + show () { + this.openedModal = this.modalService.open(this.modal, { keyboard: false }) + } + + hide () { + this.form.reset() + this.error = undefined + + this.openedModal.close() + this.openedModal = null + } + + sendForm () { + const fromName = this.form.value['fromName'] + const fromEmail = this.form.value[ 'fromEmail' ] + const body = this.form.value[ 'body' ] + + this.instanceService.contactAdministrator(fromEmail, fromName, body) + .subscribe( + () => { + this.notifier.success(this.i18n('Your message has been sent.')) + this.hide() + }, + + err => { + this.error = err.status === 403 + ? this.i18n('You already sent this form recently') + : err.message + } + ) + } +} diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts index ff6e8ef41..9c6b29740 100644 --- a/client/src/app/+about/about.module.ts +++ b/client/src/app/+about/about.module.ts @@ -5,6 +5,7 @@ import { AboutComponent } from './about.component' import { SharedModule } from '../shared' import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component' import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component' +import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' @NgModule({ imports: [ @@ -15,7 +16,8 @@ import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertub declarations: [ AboutComponent, AboutInstanceComponent, - AboutPeertubeComponent + AboutPeertubeComponent, + ContactAdminModalComponent ], exports: [ 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/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts index e5c1f58b0..13b634a01 100644 --- a/client/src/app/+accounts/account-videos/account-videos.component.ts +++ b/client/src/app/+accounts/account-videos/account-videos.component.ts @@ -2,7 +2,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Location } from '@angular/common' import { immutableAssign } from '@app/shared/misc/utils' -import { NotificationsService } from 'angular2-notifications' import { AuthService } from '../../core/auth' import { ConfirmService } from '../../core/confirm' import { AbstractVideoList } from '../../shared/video/abstract-video-list' @@ -13,6 +12,7 @@ import { tap } from 'rxjs/operators' import { I18n } from '@ngx-translate/i18n-polyfill' import { Subscription } from 'rxjs' import { ScreenService } from '@app/shared/misc/screen.service' +import { Notifier } from '@app/core' @Component({ selector: 'my-account-videos', @@ -35,7 +35,7 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit, protected router: Router, protected route: ActivatedRoute, protected authService: AuthService, - protected notificationsService: NotificationsService, + protected notifier: Notifier, protected confirmService: ConfirmService, protected location: Location, protected screenService: ScreenService, diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts index e19927d6b..e8339b78b 100644 --- a/client/src/app/+accounts/accounts.component.ts +++ b/client/src/app/+accounts/accounts.component.ts @@ -5,10 +5,9 @@ import { Account } from '@app/shared/account/account.model' import { RestExtractor, UserService } from '@app/shared' import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators' import { Subscription } from 'rxjs' -import { NotificationsService } from 'angular2-notifications' +import { AuthService, Notifier, RedirectService } from '@app/core' import { User, UserRight } from '../../../../shared' import { I18n } from '@ngx-translate/i18n-polyfill' -import { AuthService, RedirectService } from '@app/core' @Component({ templateUrl: './accounts.component.html', @@ -24,11 +23,10 @@ export class AccountsComponent implements OnInit, OnDestroy { private route: ActivatedRoute, private userService: UserService, private accountService: AccountService, - private notificationsService: NotificationsService, + private notifier: Notifier, private restExtractor: RestExtractor, private redirectService: RedirectService, - private authService: AuthService, - private i18n: I18n + private authService: AuthService ) {} ngOnInit () { @@ -43,7 +41,7 @@ export class AccountsComponent implements OnInit, OnDestroy { .subscribe( account => this.account = account, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -69,7 +67,7 @@ export class AccountsComponent implements OnInit, OnDestroy { .subscribe( user => this.user = user, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html index fd4d3d9c9..52eb00d93 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html @@ -7,169 +7,169 @@
Instance
-
- - -
- {{ formErrors.instanceName }} + +
+ + +
{{ formErrors.instance.name }}
-
-
- - -
- {{ formErrors.instanceShortDescription }} +
+ + +
{{ formErrors.instance.shortDescription }}
-
-
- - -
- {{ formErrors.instanceDescription }} +
+ + +
{{ formErrors.instance.description }}
-
-
- - -
- {{ formErrors.instanceTerms }} +
+ + +
{{ formErrors.instance.terms }}
-
-
- -
- +
+ +
+ +
+
{{ formErrors.instance.defaultClientRoute }}
-
- {{ formErrors.instanceDefaultClientRoute }} + +
+ + + +
+ +
+
{{ formErrors.instance.defaultNSFWPolicy }}
-
+ -
- - +
Signup
-
- + +
+
-
- {{ formErrors.instanceDefaultNSFWPolicy }} + +
+
-
-
Signup
+
+ + +
{{ formErrors.signup.limit }}
+
+ -
- -
+
Users
-
- -
+ +
+ +
+ +
+
{{ formErrors.user.videoQuota }}
+
-
- - -
- {{ formErrors.signupLimit }} +
+ +
+ +
+
{{ formErrors.user.videoQuotaDaily }}
-
+
Import
-
- -
+ + -
- -
+
+ +
+ +
+ +
+ + +
Administrator
-
+
-
- {{ formErrors.adminEmail }} -
+
{{ formErrors.admin.email }}
-
Users
- -
- -
- -
-
- {{ formErrors.userVideoQuota }} -
+
+
-
- -
- -
-
- {{ formErrors.userVideoQuotaDaily }} -
-
@@ -177,30 +177,35 @@
Twitter
-
- - - -
- {{ formErrors.servicesTwitterUsername }} -
-
+ + + +
+ + + +
{{ formErrors.services.twitter.username }}
+
+ +
+ +
+ + + -
- -
@@ -209,37 +214,48 @@
Transcoding
-
- -
+ +
+ +
- + -
- -
- +
+
-
- {{ formErrors.transcodingThreads }} + +
+ +
+ +
+
{{ formErrors.transcoding.threads }}
-
-
- -
- + +
+ +
+ + + +
Cache @@ -250,74 +266,73 @@ >
-
- - -
- {{ formErrors.cachePreviewsSize }} + +
+ + +
{{ formErrors.cache.previews.size }}
-
-
- - -
- {{ formErrors.cacheCaptionsSize }} +
+ + +
{{ formErrors.cache.captions.size }}
-
+
Customizations
-
- - - -
- {{ formErrors.customizationJavascript }} -
-
+ + +
+ + + +
{{ formErrors.instance.customizations.javascript }}
+
+ +
+ + + +
{{ formErrors.instance.customizations.css }}
+
+ + -
- - - -
- {{ formErrors.customizationCSS }} -
-
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts index f48b6fc1a..654a076b0 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core' import { ConfigService } from '@app/+admin/config/shared/config.service' import { ServerService } from '@app/core/server/server.service' import { CustomConfigValidatorsService, FormReactive, UserValidatorsService } from '@app/shared' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { CustomConfig } from '../../../../../../shared/models/server/custom-config.model' import { I18n } from '@ngx-translate/i18n-polyfill' import { BuildFormDefaultValues, FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' @@ -18,14 +18,11 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { resolutions: string[] = [] transcodingThreadOptions: { label: string, value: number }[] = [] - private oldCustomJavascript: string - private oldCustomCSS: string - constructor ( protected formValidatorService: FormValidatorService, private customConfigValidatorsService: CustomConfigValidatorsService, private userValidatorsService: UserValidatorsService, - private notificationsService: NotificationsService, + private notifier: Notifier, private configService: ConfigService, private serverService: ServerService, private i18n: I18n @@ -58,40 +55,78 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { } getResolutionKey (resolution: string) { - return 'transcodingResolution' + resolution + return 'transcoding.resolutions.' + resolution } ngOnInit () { - const formGroupData: { [key: string]: any } = { - instanceName: this.customConfigValidatorsService.INSTANCE_NAME, - instanceShortDescription: this.customConfigValidatorsService.INSTANCE_SHORT_DESCRIPTION, - instanceDescription: null, - instanceTerms: null, - instanceDefaultClientRoute: null, - instanceDefaultNSFWPolicy: null, - servicesTwitterUsername: this.customConfigValidatorsService.SERVICES_TWITTER_USERNAME, - servicesTwitterWhitelisted: null, - cachePreviewsSize: this.customConfigValidatorsService.CACHE_PREVIEWS_SIZE, - cacheCaptionsSize: this.customConfigValidatorsService.CACHE_CAPTIONS_SIZE, - signupEnabled: null, - signupLimit: this.customConfigValidatorsService.SIGNUP_LIMIT, - signupRequiresEmailVerification: null, - importVideosHttpEnabled: null, - importVideosTorrentEnabled: null, - adminEmail: this.customConfigValidatorsService.ADMIN_EMAIL, - userVideoQuota: this.userValidatorsService.USER_VIDEO_QUOTA, - userVideoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY, - transcodingThreads: this.customConfigValidatorsService.TRANSCODING_THREADS, - transcodingEnabled: null, - customizationJavascript: null, - customizationCSS: null + const formGroupData: { [key in keyof CustomConfig ]: any } = { + instance: { + name: this.customConfigValidatorsService.INSTANCE_NAME, + shortDescription: this.customConfigValidatorsService.INSTANCE_SHORT_DESCRIPTION, + description: null, + terms: null, + defaultClientRoute: null, + defaultNSFWPolicy: null, + customizations: { + javascript: null, + css: null + } + }, + services: { + twitter: { + username: this.customConfigValidatorsService.SERVICES_TWITTER_USERNAME, + whitelisted: null + } + }, + cache: { + previews: { + size: this.customConfigValidatorsService.CACHE_PREVIEWS_SIZE + }, + captions: { + size: this.customConfigValidatorsService.CACHE_CAPTIONS_SIZE + } + }, + signup: { + enabled: null, + limit: this.customConfigValidatorsService.SIGNUP_LIMIT, + requiresEmailVerification: null + }, + import: { + videos: { + http: { + enabled: null + }, + torrent: { + enabled: null + } + } + }, + admin: { + email: this.customConfigValidatorsService.ADMIN_EMAIL + }, + contactForm: { + enabled: null + }, + user: { + videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA, + videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY + }, + transcoding: { + enabled: null, + threads: this.customConfigValidatorsService.TRANSCODING_THREADS, + allowAdditionalExtensions: null, + resolutions: {} + } } - const defaultValues: BuildFormDefaultValues = {} + const defaultValues = { + transcoding: { + resolutions: {} + } + } for (const resolution of this.resolutions) { - const key = this.getResolutionKey(resolution) - defaultValues[key] = 'false' - formGroupData[key] = null + defaultValues.transcoding.resolutions[resolution] = 'false' + formGroupData.transcoding.resolutions[resolution] = null } this.buildForm(formGroupData) @@ -101,90 +136,25 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { res => { this.customConfig = res - this.oldCustomCSS = this.customConfig.instance.customizations.css - this.oldCustomJavascript = this.customConfig.instance.customizations.javascript - this.updateForm() // Force form validation this.forceCheck() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } isTranscodingEnabled () { - return this.form.value['transcodingEnabled'] === true + return this.form.value['transcoding']['enabled'] === true } isSignupEnabled () { - return this.form.value['signupEnabled'] === true + return this.form.value['signup']['enabled'] === true } async formValidated () { - const data: CustomConfig = { - instance: { - name: this.form.value['instanceName'], - shortDescription: this.form.value['instanceShortDescription'], - description: this.form.value['instanceDescription'], - terms: this.form.value['instanceTerms'], - defaultClientRoute: this.form.value['instanceDefaultClientRoute'], - defaultNSFWPolicy: this.form.value['instanceDefaultNSFWPolicy'], - customizations: { - javascript: this.form.value['customizationJavascript'], - css: this.form.value['customizationCSS'] - } - }, - services: { - twitter: { - username: this.form.value['servicesTwitterUsername'], - whitelisted: this.form.value['servicesTwitterWhitelisted'] - } - }, - cache: { - previews: { - size: this.form.value['cachePreviewsSize'] - }, - captions: { - size: this.form.value['cacheCaptionsSize'] - } - }, - signup: { - enabled: this.form.value['signupEnabled'], - limit: this.form.value['signupLimit'], - requiresEmailVerification: this.form.value['signupRequiresEmailVerification'] - }, - admin: { - email: this.form.value['adminEmail'] - }, - user: { - videoQuota: this.form.value['userVideoQuota'], - videoQuotaDaily: this.form.value['userVideoQuotaDaily'] - }, - transcoding: { - enabled: this.form.value['transcodingEnabled'], - threads: this.form.value['transcodingThreads'], - resolutions: { - '240p': this.form.value[this.getResolutionKey('240p')], - '360p': this.form.value[this.getResolutionKey('360p')], - '480p': this.form.value[this.getResolutionKey('480p')], - '720p': this.form.value[this.getResolutionKey('720p')], - '1080p': this.form.value[this.getResolutionKey('1080p')] - } - }, - import: { - videos: { - http: { - enabled: this.form.value['importVideosHttpEnabled'] - }, - torrent: { - enabled: this.form.value['importVideosTorrentEnabled'] - } - } - } - } - - this.configService.updateCustomConfig(data) + this.configService.updateCustomConfig(this.form.value) .subscribe( res => { this.customConfig = res @@ -194,45 +164,15 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { this.updateForm() - this.notificationsService.success(this.i18n('Success'), this.i18n('Configuration updated.')) + this.notifier.success(this.i18n('Configuration updated.')) }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } private updateForm () { - const data: { [key: string]: any } = { - instanceName: this.customConfig.instance.name, - instanceShortDescription: this.customConfig.instance.shortDescription, - instanceDescription: this.customConfig.instance.description, - instanceTerms: this.customConfig.instance.terms, - instanceDefaultClientRoute: this.customConfig.instance.defaultClientRoute, - instanceDefaultNSFWPolicy: this.customConfig.instance.defaultNSFWPolicy, - servicesTwitterUsername: this.customConfig.services.twitter.username, - servicesTwitterWhitelisted: this.customConfig.services.twitter.whitelisted, - cachePreviewsSize: this.customConfig.cache.previews.size, - cacheCaptionsSize: this.customConfig.cache.captions.size, - signupEnabled: this.customConfig.signup.enabled, - signupLimit: this.customConfig.signup.limit, - signupRequiresEmailVerification: this.customConfig.signup.requiresEmailVerification, - adminEmail: this.customConfig.admin.email, - userVideoQuota: this.customConfig.user.videoQuota, - userVideoQuotaDaily: this.customConfig.user.videoQuotaDaily, - transcodingThreads: this.customConfig.transcoding.threads, - transcodingEnabled: this.customConfig.transcoding.enabled, - customizationJavascript: this.customConfig.instance.customizations.javascript, - customizationCSS: this.customConfig.instance.customizations.css, - importVideosHttpEnabled: this.customConfig.import.videos.http.enabled, - importVideosTorrentEnabled: this.customConfig.import.videos.torrent.enabled - } - - for (const resolution of this.resolutions) { - const key = this.getResolutionKey(resolution) - data[key] = this.customConfig.transcoding.resolutions[resolution] - } - - this.form.patchValue(data) + this.form.patchValue(this.customConfig) } } diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts index 4a25b7ff3..9a8848bfb 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { SortMeta } from 'primeng/primeng' import { ActorFollow } from '../../../../../../shared/models/actors/follow.model' import { RestPagination, RestTable } from '../../../shared' @@ -20,7 +20,7 @@ export class FollowersListComponent extends RestTable implements OnInit { pagination: RestPagination = { count: this.rowsPerPage, start: 0 } constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private followService: FollowService, private i18n: I18n ) { @@ -32,14 +32,14 @@ export class FollowersListComponent extends RestTable implements OnInit { } protected loadData () { - this.followService.getFollowers(this.pagination, this.sort) + this.followService.getFollowers(this.pagination, this.sort, this.search) .subscribe( resultList => { this.followers = resultList.data this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+admin/follows/following-add/following-add.component.ts b/client/src/app/+admin/follows/following-add/following-add.component.ts index bd9cc022b..2bb249746 100644 --- a/client/src/app/+admin/follows/following-add/following-add.component.ts +++ b/client/src/app/+admin/follows/following-add/following-add.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core' import { Router } from '@angular/router' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { ConfirmService } from '../../../core' import { validateHost } from '../../../shared' import { FollowService } from '../shared' @@ -18,7 +18,7 @@ export class FollowingAddComponent { constructor ( private router: Router, - private notificationsService: NotificationsService, + private notifier: Notifier, private confirmService: ConfirmService, private followService: FollowService, private i18n: I18n @@ -64,12 +64,12 @@ export class FollowingAddComponent { this.followService.follow(hosts).subscribe( () => { - this.notificationsService.success(this.i18n('Success'), this.i18n('Follow request(s) sent!')) + this.notifier.success(this.i18n('Follow request(s) sent!')) setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500) }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts index 9b7029f75..4517a721e 100644 --- a/client/src/app/+admin/follows/following-list/following-list.component.ts +++ b/client/src/app/+admin/follows/following-list/following-list.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { SortMeta } from 'primeng/primeng' import { ActorFollow } from '../../../../../../shared/models/actors/follow.model' import { ConfirmService } from '../../../core/confirm/confirm.service' @@ -20,7 +20,7 @@ export class FollowingListComponent extends RestTable implements OnInit { pagination: RestPagination = { count: this.rowsPerPage, start: 0 } constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private confirmService: ConfirmService, private followService: FollowService, private i18n: I18n @@ -41,14 +41,11 @@ export class FollowingListComponent extends RestTable implements OnInit { this.followService.unfollow(follow).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('You are not following {{host}} anymore.', { host: follow.following.host }) - ) + this.notifier.success(this.i18n('You are not following {{host}} anymore.', { host: follow.following.host })) this.loadData() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -60,7 +57,7 @@ export class FollowingListComponent extends RestTable implements OnInit { this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts index 6d77a0eb4..fa1da26bf 100644 --- a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts +++ b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { RedundancyService } from '@app/+admin/follows/shared/redundancy.service' @@ -13,24 +13,21 @@ export class RedundancyCheckboxComponent { @Input() host: string constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private redundancyService: RedundancyService, private i18n: I18n ) { } updateRedundancyState () { this.redundancyService.updateRedundancy(this.host, this.redundancyAllowed) - .subscribe( - () => { - const stateLabel = this.redundancyAllowed ? this.i18n('enabled') : this.i18n('disabled') + .subscribe( + () => { + const stateLabel = this.redundancyAllowed ? this.i18n('enabled') : this.i18n('disabled') - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Redundancy for {{host}} is {{stateLabel}}', { host: this.host, stateLabel }) - ) - }, + this.notifier.success(this.i18n('Redundancy for {{host}} is {{stateLabel}}', { host: this.host, stateLabel })) + }, - err => this.notificationsService.error(this.i18n('Error'), err.message) - ) + err => this.notifier.error(err.message) + ) } } diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts index 44778ab56..b265e1dd6 100644 --- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts +++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core' import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { SortMeta } from 'primeng/primeng' import { Job } from '../../../../../../shared/index' import { JobState } from '../../../../../../shared/models' @@ -25,7 +25,7 @@ export class JobsListComponent extends RestTable implements OnInit { pagination: RestPagination = { count: this.rowsPerPage, start: 0 } constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private jobsService: JobService, private i18n: I18n ) { @@ -53,7 +53,7 @@ export class JobsListComponent extends RestTable implements OnInit { this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts index 3f243aee4..032bf745a 100644 --- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts +++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { RestPagination, RestTable } from '@app/shared' import { SortMeta } from 'primeng/components/common/sortmeta' -import { BlocklistService, AccountBlock } from '@app/shared/blocklist' +import { AccountBlock, BlocklistService } from '@app/shared/blocklist' @Component({ selector: 'my-instance-account-blocklist', @@ -18,7 +18,7 @@ export class InstanceAccountBlocklistComponent extends RestTable implements OnIn pagination: RestPagination = { count: this.rowsPerPage, start: 0 } constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private blocklistService: BlocklistService, private i18n: I18n ) { @@ -35,8 +35,7 @@ export class InstanceAccountBlocklistComponent extends RestTable implements OnIn this.blocklistService.unblockAccountByInstance(blockedAccount) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), + this.notifier.success( this.i18n('Account {{nameWithHost}} unmuted by your instance.', { nameWithHost: blockedAccount.nameWithHost }) ) @@ -53,7 +52,7 @@ export class InstanceAccountBlocklistComponent extends RestTable implements OnIn this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts index 130009dc7..db3dfcd1c 100644 --- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts +++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { RestPagination, RestTable } from '@app/shared' import { SortMeta } from 'primeng/components/common/sortmeta' @@ -19,7 +19,7 @@ export class InstanceServerBlocklistComponent extends RestTable implements OnIni pagination: RestPagination = { count: this.rowsPerPage, start: 0 } constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private blocklistService: BlocklistService, private i18n: I18n ) { @@ -36,10 +36,7 @@ export class InstanceServerBlocklistComponent extends RestTable implements OnIni this.blocklistService.unblockServerByInstance(host) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Instance {{host}} unmuted by your instance.', { host }) - ) + this.notifier.success(this.i18n('Instance {{host}} unmuted by your instance.', { host })) this.loadData() } @@ -54,7 +51,7 @@ export class InstanceServerBlocklistComponent extends RestTable implements OnIni this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } 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/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html index 3a8424f68..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

- + +
@@ -14,12 +15,12 @@
-
+
This comment can only be seen by you or the other moderators.
- Cancel + Cancel
- \ No newline at end of file + diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts index 34ab384d1..f915978ee 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts +++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { FormReactive, VideoAbuseService, VideoAbuseValidatorsService } from '../../../shared' import { I18n } from '@ngx-translate/i18n-polyfill' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' @@ -22,7 +22,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI constructor ( protected formValidatorService: FormValidatorService, private modalService: NgbModal, - private notificationsService: NotificationsService, + private notifier: Notifier, private videoAbuseService: VideoAbuseService, private videoAbuseValidatorsService: VideoAbuseValidatorsService, private i18n: I18n @@ -45,29 +45,26 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI }) } - hideModerationCommentModal () { + hide () { this.abuseToComment = undefined this.openedModal.close() this.form.reset() } async banUser () { - const moderationComment: string = this.form.value['moderationComment'] + const moderationComment: string = this.form.value[ 'moderationComment' ] this.videoAbuseService.updateVideoAbuse(this.abuseToComment, { moderationComment }) - .subscribe( - () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Comment updated.') - ) + .subscribe( + () => { + this.notifier.success(this.i18n('Comment updated.')) - this.commentUpdated.emit(moderationComment) - this.hideModerationCommentModal() - }, + this.commentUpdated.emit(moderationComment) + this.hide() + }, - err => this.notificationsService.error(this.i18n('Error'), err.message) - ) + err => this.notifier.error(err.message) + ) } } 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 0374b70ef..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 @@ -41,7 +41,7 @@ - + @@ -51,15 +51,15 @@
Reason: - {{ videoAbuse.reason }} +
Moderation comment: - {{ videoAbuse.moderationComment }} +
- \ No newline at end of file + 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 7a219c846..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 @@ -1,6 +1,6 @@ import { Component, OnInit, ViewChild } from '@angular/core' import { Account } from '../../../shared/account/account.model' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { SortMeta } from 'primeng/components/common/sortmeta' import { VideoAbuse, VideoAbuseState } from '../../../../../../shared' import { RestPagination, RestTable, VideoAbuseService } from '../../../shared' @@ -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', @@ -27,10 +28,11 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { videoAbuseActions: DropdownAction[] = [] constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private videoAbuseService: VideoAbuseService, private confirmService: ConfirmService, - private i18n: I18n + private i18n: I18n, + private markdownRenderer: MarkdownService ) { super() @@ -90,14 +92,11 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { this.videoAbuseService.removeVideoAbuse(videoAbuse).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Abuse deleted.') - ) + this.notifier.success(this.i18n('Abuse deleted.')) this.loadData() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -106,11 +105,15 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { .subscribe( () => this.loadData(), - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } + toHtml (text: string) { + return this.markdownRenderer.textMarkdownToHTML(text) + } + protected loadData () { return this.videoAbuseService.getVideoAbuses(this.pagination, this.sort) .subscribe( @@ -119,7 +122,7 @@ export class VideoAbuseListComponent extends RestTable implements OnInit { this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } 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 ff4543b97..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 @@ -7,6 +7,7 @@ Video name Sensitive + Unfederated Date @@ -26,20 +27,21 @@ - {{ videoBlacklist.video.nsfw }} + {{ booleanToText(videoBlacklist.video.nsfw) }} + {{ booleanToText(videoBlacklist.unfederated) }} {{ videoBlacklist.createdAt }} - + - + 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 e491edaca..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 @@ -1,12 +1,13 @@ import { Component, OnInit } from '@angular/core' import { SortMeta } from 'primeng/components/common/sortmeta' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { ConfirmService } from '../../../core' import { RestPagination, RestTable, VideoBlacklistService } from '../../../shared' 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', @@ -23,9 +24,10 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit { videoBlacklistActions: DropdownAction[] = [] constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private confirmService: ConfirmService, private videoBlacklistService: VideoBlacklistService, + private markdownRenderer: MarkdownService, private i18n: I18n ) { super() @@ -46,6 +48,16 @@ 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') + } + + 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.' @@ -56,14 +68,11 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit { this.videoBlacklistService.removeVideoFromBlacklist(entry.video.id).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Video {{name}} removed from the blacklist.', { name: entry.video.name }) - ) + this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: entry.video.name })) this.loadData() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -75,7 +84,7 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit { this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+admin/users/user-edit/user-create.component.ts b/client/src/app/+admin/users/user-edit/user-create.component.ts index dd8e4efd5..137ecfcbd 100644 --- a/client/src/app/+admin/users/user-edit/user-create.component.ts +++ b/client/src/app/+admin/users/user-edit/user-create.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit } from '@angular/core' import { Router } from '@angular/router' -import { NotificationsService } from 'angular2-notifications' -import { ServerService } from '../../../core' +import { Notifier, ServerService } from '@app/core' import { UserCreate, UserRole } from '../../../../../../shared' import { UserEdit } from './user-edit' import { I18n } from '@ngx-translate/i18n-polyfill' @@ -24,7 +23,7 @@ export class UserCreateComponent extends UserEdit implements OnInit { protected configService: ConfigService, private userValidatorsService: UserValidatorsService, private router: Router, - private notificationsService: NotificationsService, + private notifier: Notifier, private userService: UserService, private i18n: I18n ) { @@ -60,10 +59,7 @@ export class UserCreateComponent extends UserEdit implements OnInit { this.userService.addUser(userCreate).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('User {{username}} created.', { username: userCreate.username }) - ) + this.notifier.success(this.i18n('User {{username}} created.', { username: userCreate.username })) this.router.navigate([ '/admin/users/list' ]) }, 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 cd3885a99..61e641823 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,7 +1,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Subscription } from 'rxjs' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { ServerService } from '../../../core' import { UserEdit } from './user-edit' import { User, UserUpdate } from '../../../../../../shared' @@ -30,7 +30,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { private userValidatorsService: UserValidatorsService, private route: ActivatedRoute, private router: Router, - private notificationsService: NotificationsService, + private notifier: Notifier, private userService: UserService, private i18n: I18n ) { @@ -73,10 +73,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { this.userService.updateUser(this.userId, userUpdate).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('User {{username}} updated.', { username: this.username }) - ) + this.notifier.success(this.i18n('User {{username}} updated.', { username: this.username })) this.router.navigate([ '/admin/users/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..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
@@ -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/+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/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts index fb085c133..66ab796f9 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.ts +++ b/client/src/app/+admin/users/user-list/user-list.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ViewChild } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { SortMeta } from 'primeng/components/common/sortmeta' import { ConfirmService, ServerService } from '../../../core' import { RestPagination, RestTable, UserService } from '../../../shared' @@ -26,7 +26,7 @@ export class UserListComponent extends RestTable implements OnInit { bulkUserActions: DropdownAction[] = [] constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private confirmService: ConfirmService, private serverService: ServerService, private userService: UserService, @@ -68,7 +68,7 @@ export class UserListComponent extends RestTable implements OnInit { openBanUserModal (users: User[]) { for (const user of users) { if (user.username === 'root') { - this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot ban root.')) + this.notifier.error(this.i18n('You cannot ban root.')) return } } @@ -91,18 +91,18 @@ export class UserListComponent extends RestTable implements OnInit { () => { const message = this.i18n('{{num}} users unbanned.', { num: users.length }) - this.notificationsService.success(this.i18n('Success'), message) + this.notifier.success(message) this.loadData() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } async removeUsers (users: User[]) { for (const user of users) { if (user.username === 'root') { - this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot delete root.')) + this.notifier.error(this.i18n('You cannot delete root.')) return } } @@ -113,28 +113,22 @@ export class UserListComponent extends RestTable implements OnInit { this.userService.removeUser(users).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('{{num}} users deleted.', { num: users.length }) - ) + this.notifier.success(this.i18n('{{num}} users deleted.', { num: users.length })) this.loadData() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } async setEmailsAsVerified (users: User[]) { this.userService.updateUsers(users, { emailVerified: true }).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('{{num}} users email set as verified.', { num: users.length }) - ) + this.notifier.success(this.i18n('{{num}} users email set as verified.', { num: users.length })) this.loadData() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -146,13 +140,13 @@ export class UserListComponent extends RestTable implements OnInit { this.selectedUsers = [] this.userService.getUsers(this.pagination, this.sort, this.search) - .subscribe( - resultList => { - this.users = resultList.data - this.totalRecords = resultList.total - }, - - err => this.notificationsService.error(this.i18n('Error'), err.message) - ) + .subscribe( + resultList => { + this.users = resultList.data + this.totalRecords = resultList.total + }, + + err => this.notifier.error(err.message) + ) } } diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts index fbad28410..e3025dec4 100644 --- a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts +++ b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { RestPagination, RestTable } from '@app/shared' import { SortMeta } from 'primeng/components/common/sortmeta' -import { BlocklistService, AccountBlock } from '@app/shared/blocklist' +import { AccountBlock, BlocklistService } from '@app/shared/blocklist' @Component({ selector: 'my-account-blocklist', @@ -18,7 +18,7 @@ export class MyAccountBlocklistComponent extends RestTable implements OnInit { pagination: RestPagination = { count: this.rowsPerPage, start: 0 } constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private blocklistService: BlocklistService, private i18n: I18n ) { @@ -35,10 +35,7 @@ export class MyAccountBlocklistComponent extends RestTable implements OnInit { this.blocklistService.unblockAccountByUser(blockedAccount) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Account {{nameWithHost}} unmuted.', { nameWithHost: blockedAccount.nameWithHost }) - ) + this.notifier.success(this.i18n('Account {{nameWithHost}} unmuted.', { nameWithHost: blockedAccount.nameWithHost })) this.loadData() } @@ -53,7 +50,7 @@ export class MyAccountBlocklistComponent extends RestTable implements OnInit { this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts index b411d6926..4c5cc28b8 100644 --- a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts +++ b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { RestPagination, RestTable } from '@app/shared' import { SortMeta } from 'primeng/components/common/sortmeta' @@ -19,7 +19,7 @@ export class MyAccountServerBlocklistComponent extends RestTable implements OnIn pagination: RestPagination = { count: this.rowsPerPage, start: 0 } constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private blocklistService: BlocklistService, private i18n: I18n ) { @@ -36,10 +36,7 @@ export class MyAccountServerBlocklistComponent extends RestTable implements OnIn this.blocklistService.unblockServerByUser(host) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Instance {{host}} unmuted.', { host }) - ) + this.notifier.success(this.i18n('Instance {{host}} unmuted.', { host })) this.loadData() } @@ -54,7 +51,7 @@ export class MyAccountServerBlocklistComponent extends RestTable implements OnIn this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.html b/client/src/app/+my-account/my-account-history/my-account-history.component.html new file mode 100644 index 000000000..d42af37d4 --- /dev/null +++ b/client/src/app/+my-account/my-account-history/my-account-history.component.html @@ -0,0 +1,27 @@ +
+
+ + +
+ +
+ +
+
+ + +
You don't have videos history yet.
+ +
+
+
+ + +
+ {{ video.name }} + {{ video.views | myNumberFormatter }} views + +
+
+
+
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 new file mode 100644 index 000000000..e7c6863f1 --- /dev/null +++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss @@ -0,0 +1,99 @@ +@import '_variables'; +@import '_mixins'; + +.no-history { + display: flex; + justify-content: center; + margin-top: 50px; + font-weight: $font-semibold; + font-size: 16px; +} + +.top-buttons { + margin-bottom: 20px; + display: flex; + + .history-switch { + display: flex; + flex-grow: 1; + + label { + margin: 0 0 0 5px; + } + } + + .delete-history { + font-size: 15px; + + button { + @include peertube-button; + @include grey-button; + } + } +} + +.video { + @include row-blocks; + + my-video-thumbnail { + margin-right: 10px; + } + + .video-info { + flex-grow: 1; + + .video-info-name { + @include disable-default-a-behaviour; + + color: var(--mainForegroundColor); + display: block; + width: fit-content; + font-size: 18px; + font-weight: $font-semibold; + } + + .video-info-date-views { + font-size: 14px; + } + + .video-info-account { + @include disable-default-a-behaviour; + + display: block; + width: fit-content; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + color: $grey-foreground-color; + + &:hover { + color: $grey-foreground-hover-color; + } + } + } +} + +@media screen and (max-width: $small-view) { + .video { + flex-direction: column; + height: auto; + text-align: center; + + .video-info-name { + margin: auto; + } + + input[type=checkbox] { + display: none; + } + + my-video-thumbnail { + margin-right: 0; + } + + .video-buttons { + margin-top: 10px; + } + } +} diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.ts b/client/src/app/+my-account/my-account-history/my-account-history.component.ts new file mode 100644 index 000000000..394091bad --- /dev/null +++ b/client/src/app/+my-account/my-account-history/my-account-history.component.ts @@ -0,0 +1,107 @@ +import { Component, OnDestroy, OnInit } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' +import { Location } from '@angular/common' +import { immutableAssign } from '@app/shared/misc/utils' +import { ComponentPagination } from '@app/shared/rest/component-pagination.model' +import { AuthService } from '../../core/auth' +import { ConfirmService } from '../../core/confirm' +import { AbstractVideoList } from '../../shared/video/abstract-video-list' +import { VideoService } from '../../shared/video/video.service' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { ScreenService } from '@app/shared/misc/screen.service' +import { UserHistoryService } from '@app/shared/users/user-history.service' +import { UserService } from '@app/shared' +import { Notifier } from '@app/core' + +@Component({ + selector: 'my-account-history', + templateUrl: './my-account-history.component.html', + styleUrls: [ './my-account-history.component.scss' ] +}) +export class MyAccountHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy { + titlePage: string + currentRoute = '/my-account/history/videos' + pagination: ComponentPagination = { + currentPage: 1, + itemsPerPage: 5, + totalItems: null + } + videosHistoryEnabled: boolean + + protected baseVideoWidth = -1 + protected baseVideoHeight = 155 + + constructor ( + protected router: Router, + protected route: ActivatedRoute, + protected authService: AuthService, + protected userService: UserService, + protected notifier: Notifier, + protected location: Location, + protected screenService: ScreenService, + protected i18n: I18n, + private confirmService: ConfirmService, + private videoService: VideoService, + private userHistoryService: UserHistoryService + ) { + super() + + this.titlePage = this.i18n('My videos history') + } + + ngOnInit () { + super.ngOnInit() + + this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled + } + + ngOnDestroy () { + super.ngOnDestroy() + } + + getVideosObservable (page: number) { + const newPagination = immutableAssign(this.pagination, { currentPage: page }) + + return this.userHistoryService.getUserVideosHistory(newPagination) + } + + generateSyndicationList () { + throw new Error('Method not implemented.') + } + + onVideosHistoryChange () { + this.userService.updateMyProfile({ videosHistoryEnabled: this.videosHistoryEnabled }) + .subscribe( + () => { + const message = this.videosHistoryEnabled === true ? + this.i18n('Videos history is enabled') : + this.i18n('Videos history is disabled') + + this.notifier.success(message) + + this.authService.refreshUserInformation() + }, + + err => this.notifier.error(err.message) + ) + } + + async deleteHistory () { + const title = this.i18n('Delete videos history') + const message = this.i18n('Are you sure you want to delete all your videos history?') + + const res = await this.confirmService.confirm(message, title) + if (res !== true) return + + this.userHistoryService.deleteUserVideosHistory() + .subscribe( + () => { + this.notifier.success(this.i18n('Videos history deleted')) + + this.reloadVideos() + }, + + err => this.notifier.error(err.message) + ) + } +} 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 new file mode 100644 index 000000000..d518b22ec --- /dev/null +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html @@ -0,0 +1,13 @@ +
+ + + 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 new file mode 100644 index 000000000..43d1f82ab --- /dev/null +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss @@ -0,0 +1,25 @@ +@import '_variables'; +@import '_mixins'; + +.header { + display: flex; + justify-content: space-between; + font-size: 15px; + 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); + } +} + +my-user-notifications { + font-size: 15px; +} diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts new file mode 100644 index 000000000..3e197088d --- /dev/null +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts @@ -0,0 +1,14 @@ +import { Component, ViewChild } from '@angular/core' +import { UserNotificationsComponent } from '@app/shared' + +@Component({ + templateUrl: './my-account-notifications.component.html', + styleUrls: [ './my-account-notifications.component.scss' ] +}) +export class MyAccountNotificationsComponent { + @ViewChild('userNotification') userNotification: UserNotificationsComponent + + markAllAsRead () { + this.userNotification.markAllAsRead() + } +} 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-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts index a68b452ec..79d29b139 100644 --- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts +++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts @@ -1,5 +1,5 @@ import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { AuthService, Notifier } from '@app/core' import { FormReactive } from '@app/shared' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { VideoOwnershipService } from '@app/shared/video-ownership' @@ -8,7 +8,6 @@ import { VideoAcceptOwnershipValidatorsService } from '@app/shared/forms/form-va import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' import { I18n } from '@ngx-translate/i18n-polyfill' -import { AuthService } from '@app/core' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' @Component({ @@ -31,7 +30,7 @@ export class MyAccountAcceptOwnershipComponent extends FormReactive implements O protected formValidatorService: FormValidatorService, private videoChangeOwnershipValidatorsService: VideoAcceptOwnershipValidatorsService, private videoOwnershipService: VideoOwnershipService, - private notificationsService: NotificationsService, + private notifier: Notifier, private authService: AuthService, private videoChannelService: VideoChannelService, private modalService: NgbModal, @@ -68,12 +67,12 @@ export class MyAccountAcceptOwnershipComponent extends FormReactive implements O .acceptOwnership(videoChangeOwnership.id, { channelId: channel }) .subscribe( () => { - this.notificationsService.success(this.i18n('Success'), this.i18n('Ownership accepted')) + this.notifier.success(this.i18n('Ownership accepted')) if (this.accepted) this.accepted.emit() this.videoChangeOwnership = undefined }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } 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/+my-account/my-account-ownership/my-account-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts index 0b51ac13c..77857c4fd 100644 --- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts +++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts @@ -1,13 +1,11 @@ import { Component, OnInit, ViewChild } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' -import { I18n } from '@ngx-translate/i18n-polyfill' +import { Notifier } from '@app/core' import { RestPagination, RestTable } from '@app/shared' import { SortMeta } from 'primeng/components/common/sortmeta' import { VideoChangeOwnership } from '../../../../../shared' import { VideoOwnershipService } from '@app/shared/video-ownership' import { Account } from '@app/shared/account/account.model' -import { MyAccountAcceptOwnershipComponent } -from '@app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component' +import { MyAccountAcceptOwnershipComponent } from './my-account-accept-ownership/my-account-accept-ownership.component' @Component({ selector: 'my-account-ownership', @@ -23,9 +21,8 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit { @ViewChild('myAccountAcceptOwnershipComponent') myAccountAcceptOwnershipComponent: MyAccountAcceptOwnershipComponent constructor ( - private notificationsService: NotificationsService, - private videoOwnershipService: VideoOwnershipService, - private i18n: I18n + private notifier: Notifier, + private videoOwnershipService: VideoOwnershipService ) { super() } @@ -50,7 +47,7 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit { this.videoOwnershipService.refuseOwnership(videoChangeOwnership.id) .subscribe( () => this.loadData(), - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -62,7 +59,7 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit { this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts index 601e517b4..9996218ca 100644 --- a/client/src/app/+my-account/my-account-routing.module.ts +++ b/client/src/app/+my-account/my-account-routing.module.ts @@ -13,6 +13,8 @@ import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-sub import { MyAccountOwnershipComponent } from '@app/+my-account/my-account-ownership/my-account-ownership.component' import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component' import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component' +import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component' +import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component' const myAccountRoutes: Routes = [ { @@ -114,6 +116,24 @@ const myAccountRoutes: Routes = [ title: 'Muted instances' } } + }, + { + path: 'history/videos', + component: MyAccountHistoryComponent, + data: { + meta: { + title: 'Videos history' + } + } + }, + { + path: 'notifications', + component: MyAccountNotificationsComponent, + data: { + meta: { + title: 'Notifications' + } + } } ] } diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts index e5343b33d..cbb068c7c 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts @@ -1,11 +1,10 @@ import { Component, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { AuthService, Notifier } from '@app/core' import { FormReactive, UserService } 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 { filter } from 'rxjs/operators' -import { AuthService } from '@app/core' import { User } from '../../../../../../shared' @Component({ @@ -20,7 +19,7 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On constructor ( protected formValidatorService: FormValidatorService, private userValidatorsService: UserValidatorsService, - private notificationsService: NotificationsService, + private notifier: Notifier, private authService: AuthService, private userService: UserService, private i18n: I18n @@ -50,7 +49,7 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On this.userService.changePassword(currentPassword, newPassword).subscribe( () => { - this.notificationsService.success(this.i18n('Success'), this.i18n('Password updated.')) + this.notifier.success(this.i18n('Password updated.')) this.form.reset() this.error = null diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts index 63a121f64..3f79efe20 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { AuthService, ConfirmService, RedirectService } from '../../../core' import { UserService } from '../../../shared' import { I18n } from '@ngx-translate/i18n-polyfill' @@ -15,7 +15,7 @@ export class MyAccountDangerZoneComponent { constructor ( private authService: AuthService, - private notificationsService: NotificationsService, + private notifier: Notifier, private userService: UserService, private confirmService: ConfirmService, private redirectService: RedirectService, @@ -34,13 +34,13 @@ export class MyAccountDangerZoneComponent { this.userService.deleteMe().subscribe( () => { - this.notificationsService.success(this.i18n('Success'), this.i18n('Your account is deleted.')) + this.notifier.success(this.i18n('Your account is deleted.')) this.authService.logout() this.redirectService.redirectToHomepage() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/index.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/index.ts new file mode 100644 index 000000000..5e1d51339 --- /dev/null +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/index.ts @@ -0,0 +1 @@ +export * from './my-account-notification-preferences.component' diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html new file mode 100644 index 000000000..59422d682 --- /dev/null +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html @@ -0,0 +1,19 @@ +
+
Activities
+
Web
+
Email
+
+ +
+ +
{{ labelNotifications[notificationType] }}
+ +
+ +
+ +
+ +
+ +
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss new file mode 100644 index 000000000..6feb16ab1 --- /dev/null +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss @@ -0,0 +1,25 @@ +@import '_variables'; +@import '_mixins'; + +.custom-row { + display: flex; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.10); + + &:first-child { + font-size: 16px; + + & > div { + font-weight: $font-semibold; + } + } + + & > div { + width: 350px; + } + + & > div { + padding: 10px + } +} + diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts new file mode 100644 index 000000000..519bdfab4 --- /dev/null +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts @@ -0,0 +1,99 @@ +import { Component, Input, OnInit } from '@angular/core' +import { User } from '@app/shared' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { Subject } from 'rxjs' +import { UserNotificationSetting, UserNotificationSettingValue, UserRight } from '../../../../../../shared' +import { Notifier, ServerService } from '@app/core' +import { debounce } from 'lodash-es' +import { UserNotificationService } from '@app/shared/users/user-notification.service' + +@Component({ + selector: 'my-account-notification-preferences', + templateUrl: './my-account-notification-preferences.component.html', + styleUrls: [ './my-account-notification-preferences.component.scss' ] +}) +export class MyAccountNotificationPreferencesComponent implements OnInit { + @Input() user: User = null + @Input() userInformationLoaded: Subject + + notificationSettingKeys: (keyof UserNotificationSetting)[] = [] + emailNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any + webNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any + labelNotifications: { [ id in keyof UserNotificationSetting ]: string } = {} as any + rightNotifications: { [ id in keyof Partial ]: UserRight } = {} as any + emailEnabled: boolean + + private savePreferences = debounce(this.savePreferencesImpl.bind(this), 500) + + constructor ( + private i18n: I18n, + private userNotificationService: UserNotificationService, + private serverService: ServerService, + private notifier: Notifier + ) { + this.labelNotifications = { + newVideoFromSubscription: this.i18n('New video from your subscriptions'), + newCommentOnMyVideo: this.i18n('New comment on your video'), + videoAbuseAsModerator: this.i18n('New video abuse on local video'), + blacklistOnMyVideo: this.i18n('One of your video is blacklisted/unblacklisted'), + myVideoPublished: this.i18n('Video published (after transcoding/scheduled update)'), + myVideoImportFinished: this.i18n('Video import finished'), + newUserRegistration: this.i18n('A new user registered on your instance'), + newFollow: this.i18n('You or your channel(s) has a new follower'), + commentMention: this.i18n('Someone mentioned you in video comments') + } + this.notificationSettingKeys = Object.keys(this.labelNotifications) as (keyof UserNotificationSetting)[] + + this.rightNotifications = { + videoAbuseAsModerator: UserRight.MANAGE_VIDEO_ABUSES, + newUserRegistration: UserRight.MANAGE_USERS + } + + this.emailEnabled = this.serverService.getConfig().email.enabled + } + + ngOnInit () { + this.userInformationLoaded.subscribe(() => this.loadNotificationSettings()) + } + + hasUserRight (field: keyof UserNotificationSetting) { + const rightToHave = this.rightNotifications[field] + if (!rightToHave) return true // No rights needed + + return this.user.hasRight(rightToHave) + } + + updateEmailSetting (field: keyof UserNotificationSetting, value: boolean) { + if (value === true) this.user.notificationSettings[field] |= UserNotificationSettingValue.EMAIL + else this.user.notificationSettings[field] &= ~UserNotificationSettingValue.EMAIL + + this.savePreferences() + } + + updateWebSetting (field: keyof UserNotificationSetting, value: boolean) { + if (value === true) this.user.notificationSettings[field] |= UserNotificationSettingValue.WEB + else this.user.notificationSettings[field] &= ~UserNotificationSettingValue.WEB + + this.savePreferences() + } + + private savePreferencesImpl () { + this.userNotificationService.updateNotificationSettings(this.user, this.user.notificationSettings) + .subscribe( + () => { + this.notifier.success(this.i18n('Preferences saved'), undefined, 2000) + }, + + err => this.notifier.error(err.message) + ) + } + + private loadNotificationSettings () { + for (const key of Object.keys(this.user.notificationSettings)) { + const value = this.user.notificationSettings[key] + this.emailNotifications[key] = value & UserNotificationSettingValue.EMAIL + + this.webNotifications[key] = value & UserNotificationSettingValue.WEB + } + } +} diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts index 967e21f0b..a9503ed1b 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { FormReactive, UserService } from '../../../shared' import { User } from '@app/shared' import { I18n } from '@ngx-translate/i18n-polyfill' @@ -21,7 +21,7 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit { constructor ( protected formValidatorService: FormValidatorService, private userValidatorsService: UserValidatorsService, - private notificationsService: NotificationsService, + private notifier: Notifier, private userService: UserService, private i18n: I18n ) { @@ -53,7 +53,7 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit { this.user.account.displayName = displayName this.user.account.description = description - this.notificationsService.success(this.i18n('Success'), this.i18n('Profile updated.')) + this.notifier.success(this.i18n('Profile updated.')) }, err => this.error = err.message diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html index c7e23cd1f..ad64f28fe 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html @@ -4,10 +4,11 @@ Video quota: {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }}
- - - - + + + + + @@ -16,4 +17,4 @@ - \ No newline at end of file + diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts index 62053d97b..f4b954e54 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ViewChild } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { BytesPipe } from 'ngx-pipes' import { AuthService } from '../../core' import { User } from '../../shared' @@ -19,7 +19,7 @@ export class MyAccountSettingsComponent implements OnInit { constructor ( private userService: UserService, private authService: AuthService, - private notificationsService: NotificationsService, + private notifier: Notifier, private i18n: I18n ) {} @@ -48,12 +48,12 @@ export class MyAccountSettingsComponent implements OnInit { this.userService.changeAvatar(formData) .subscribe( data => { - this.notificationsService.success(this.i18n('Success'), this.i18n('Avatar changed.')) + this.notifier.success(this.i18n('Avatar changed.')) this.user.updateAccountAvatar(data.avatar) }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts index 6c9a7ce75..b8f80bc1a 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { UserUpdateMe } from '../../../../../../shared' import { AuthService } from '../../../core' import { FormReactive, User, UserService } from '../../../shared' @@ -19,7 +19,7 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI constructor ( protected formValidatorService: FormValidatorService, private authService: AuthService, - private notificationsService: NotificationsService, + private notifier: Notifier, private userService: UserService, private i18n: I18n ) { @@ -54,12 +54,12 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI this.userService.updateMyProfile(details).subscribe( () => { - this.notificationsService.success(this.i18n('Success'), this.i18n('Information updated.')) + this.notifier.success(this.i18n('Information updated.')) this.authService.refreshUserInformation() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts index 9517a3705..9d2dccdf0 100644 --- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts +++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { I18n } from '@ngx-translate/i18n-polyfill' import { UserSubscriptionService } from '@app/shared/user-subscription' @@ -21,7 +21,7 @@ export class MyAccountSubscriptionsComponent implements OnInit { constructor ( private userSubscriptionService: UserSubscriptionService, - private notificationsService: NotificationsService, + private notifier: Notifier, private i18n: I18n ) {} @@ -37,7 +37,7 @@ export class MyAccountSubscriptionsComponent implements OnInit { this.pagination.totalItems = res.total }, - error => this.notificationsService.error(this.i18n('Error'), error.message) + error => this.notifier.error(error.message) ) } diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts index 81608d837..a68f79b47 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts @@ -1,10 +1,9 @@ import { Component, OnInit } from '@angular/core' import { Router } from '@angular/router' -import { NotificationsService } from 'angular2-notifications' +import { AuthService, Notifier } from '@app/core' import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit' import { VideoChannelCreate } from '../../../../../shared/models/videos' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' -import { AuthService } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { VideoChannelValidatorsService } from '@app/shared/forms/form-validators/video-channel-validators.service' @@ -21,7 +20,7 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE protected formValidatorService: FormValidatorService, private authService: AuthService, private videoChannelValidatorsService: VideoChannelValidatorsService, - private notificationsService: NotificationsService, + private notifier: Notifier, private router: Router, private videoChannelService: VideoChannelService, private i18n: I18n @@ -56,8 +55,8 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE this.videoChannelService.createVideoChannel(videoChannelCreate).subscribe( () => { this.authService.refreshUserInformation() - this.notificationsService.success( - this.i18n('Success'), + + this.notifier.success( this.i18n('Video channel {{videoChannelName}} created.', { videoChannelName: videoChannelCreate.displayName }) ) this.router.navigate([ '/my-account', 'video-channels' ]) diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts index 5d43956f2..da4fb645a 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts @@ -1,12 +1,11 @@ import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import { NotificationsService } from 'angular2-notifications' +import { AuthService, Notifier, ServerService } from '@app/core' import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit' import { VideoChannelUpdate } from '../../../../../shared/models/videos' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' import { Subscription } from 'rxjs' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' -import { AuthService, ServerService } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { VideoChannelValidatorsService } from '@app/shared/forms/form-validators/video-channel-validators.service' @@ -26,7 +25,7 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE protected formValidatorService: FormValidatorService, private authService: AuthService, private videoChannelValidatorsService: VideoChannelValidatorsService, - private notificationsService: NotificationsService, + private notifier: Notifier, private router: Router, private route: ActivatedRoute, private videoChannelService: VideoChannelService, @@ -79,10 +78,11 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.name, videoChannelUpdate).subscribe( () => { this.authService.refreshUserInformation() - this.notificationsService.success( - this.i18n('Success'), + + this.notifier.success( this.i18n('Video channel {{videoChannelName}} updated.', { videoChannelName: videoChannelUpdate.displayName }) ) + this.router.navigate([ '/my-account', 'video-channels' ]) }, @@ -94,12 +94,12 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE this.videoChannelService.changeVideoChannelAvatar(this.videoChannelToUpdate.name, formData) .subscribe( data => { - this.notificationsService.success(this.i18n('Success'), this.i18n('Avatar changed.')) + this.notifier.success(this.i18n('Avatar changed.')) this.videoChannelToUpdate.updateAvatar(data.avatar) }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } 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-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 6d1098865..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 @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { AuthService } from '../../core/auth' import { ConfirmService } from '../../core/confirm' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' @@ -20,7 +20,7 @@ export class MyAccountVideoChannelsComponent implements OnInit { constructor ( private authService: AuthService, - private notificationsService: NotificationsService, + private notifier: Notifier, private confirmService: ConfirmService, private videoChannelService: VideoChannelService, private i18n: I18n @@ -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') ) @@ -46,15 +50,14 @@ export class MyAccountVideoChannelsComponent implements OnInit { this.videoChannelService.removeVideoChannel(videoChannel) .subscribe( - status => { + () => { this.loadVideoChannels() - this.notificationsService.success( - this.i18n('Success'), + this.notifier.success( this.i18n('Video channel {{videoChannelName}} deleted.', { videoChannelName: videoChannel.displayName }) ) }, - error => this.notificationsService.error(this.i18n('Error'), error.message) + error => this.notifier.error(error.message) ) } diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts index 5b920c98d..21a10c8ff 100644 --- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts +++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core' import { RestPagination, RestTable } from '@app/shared' import { SortMeta } from 'primeng/components/common/sortmeta' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { VideoImport, VideoImportState } from '../../../../../shared/models/videos' import { VideoImportService } from '@app/shared/video-import' @@ -19,7 +19,7 @@ export class MyAccountVideoImportsComponent extends RestTable implements OnInit pagination: RestPagination = { count: this.rowsPerPage, start: 0 } constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private videoImportService: VideoImportService, private i18n: I18n ) { @@ -58,7 +58,7 @@ export class MyAccountVideoImportsComponent extends RestTable implements OnInit this.totalRecords = resultList.total }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } 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 2db81a3fe..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); + } } } } @@ -97,7 +94,7 @@ } } -@media screen and (max-width: 800px) { +@media screen and (max-width: $small-view) { .video { flex-direction: column; height: auto; diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts index 2d88ac760..41608f796 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts @@ -5,7 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router' import { Location } from '@angular/common' import { immutableAssign } from '@app/shared/misc/utils' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { AuthService } from '../../core/auth' import { ConfirmService } from '../../core/confirm' import { AbstractVideoList } from '../../shared/video/abstract-video-list' @@ -40,7 +40,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni protected router: Router, protected route: ActivatedRoute, protected authService: AuthService, - protected notificationsService: NotificationsService, + protected notifier: Notifier, protected location: Location, protected screenService: ScreenService, protected i18n: I18n, @@ -102,16 +102,13 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni .pipe(concatAll()) .subscribe( res => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length }) - ) + this.notifier.success(this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length })) this.abortSelectionMode() this.reloadVideos() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -124,15 +121,12 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni this.videoService.removeVideo(video.id) .subscribe( - status => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Video {{videoName}} deleted.', { videoName: video.name }) - ) + () => { + this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: video.name })) this.reloadVideos() }, - error => this.notificationsService.error(this.i18n('Error'), error.message) + error => this.notifier.error(error.message) ) } 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/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts index 9f94f3c13..37d7cf2a4 100644 --- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts +++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts @@ -1,5 +1,5 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { FormReactive, UserService } from '../../../shared/index' import { Video } from '@app/shared/video/video.model' @@ -25,7 +25,7 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni protected formValidatorService: FormValidatorService, private videoChangeOwnershipValidatorsService: VideoChangeOwnershipValidatorsService, private videoOwnershipService: VideoOwnershipService, - private notificationsService: NotificationsService, + private notifier: Notifier, private userService: UserService, private modalService: NgbModal, private i18n: I18n @@ -53,11 +53,9 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni const query = event.query this.userService.autocomplete(query) .subscribe( - usernames => { - this.usernamePropositions = usernames - }, + usernames => this.usernamePropositions = usernames, - err => this.notificationsService.error('Error', err.message) + err => this.notifier.error(err.message) ) } @@ -67,9 +65,9 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni this.videoOwnershipService .changeOwnership(this.video.id, username) .subscribe( - () => this.notificationsService.success(this.i18n('Success'), this.i18n('Ownership change request sent.')), + () => this.notifier.success(this.i18n('Ownership change request sent.')), - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html index 41333c25a..3999252be 100644 --- a/client/src/app/+my-account/my-account.component.html +++ b/client/src/app/+my-account/my-account.component.html @@ -1,40 +1,5 @@
-
- My settings - -
- - My library - - {{ libraryLabel }} - - - -
- -
- - Misc - - {{ miscLabel }} - - - -
- -
+
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss index 6243c6dcf..4f111efdf 100644 --- a/client/src/app/+my-account/my-account.component.scss +++ b/client/src/app/+my-account/my-account.component.scss @@ -1,14 +1,3 @@ -.my-library, .misc { - span[role=button] { - cursor: pointer; - } - - a { - display: block; - } +.row { + flex-direction: column; } - -/deep/ .dropdown-toggle::after { - position: relative; - top: 2px; -} \ No newline at end of file diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts index d728caf07..8a4102d80 100644 --- a/client/src/app/+my-account/my-account.component.ts +++ b/client/src/app/+my-account/my-account.component.ts @@ -1,38 +1,80 @@ -import { Component, OnDestroy, OnInit } from '@angular/core' +import { Component } from '@angular/core' import { ServerService } from '@app/core' -import { NavigationStart, Router } from '@angular/router' -import { filter } from 'rxjs/operators' import { I18n } from '@ngx-translate/i18n-polyfill' -import { Subscription } from 'rxjs' +import { TopMenuDropdownParam } from '@app/shared/menu/top-menu-dropdown.component' @Component({ selector: 'my-my-account', templateUrl: './my-account.component.html', styleUrls: [ './my-account.component.scss' ] }) -export class MyAccountComponent implements OnInit, OnDestroy { - - libraryLabel = '' - miscLabel = '' - - private routeSub: Subscription +export class MyAccountComponent { + menuEntries: TopMenuDropdownParam[] = [] constructor ( private serverService: ServerService, - private router: Router, private i18n: I18n - ) {} + ) { + + const libraryEntries: TopMenuDropdownParam = { + label: this.i18n('My library'), + children: [ + { + label: this.i18n('My channels'), + routerLink: '/my-account/video-channels' + }, + { + label: this.i18n('My videos'), + routerLink: '/my-account/videos' + }, + { + label: this.i18n('My subscriptions'), + routerLink: '/my-account/subscriptions' + }, + { + label: this.i18n('My history'), + routerLink: '/my-account/history/videos' + } + ] + } - ngOnInit () { - this.updateLabels(this.router.url) + if (this.isVideoImportEnabled()) { + libraryEntries.children.push({ + label: 'My imports', + routerLink: '/my-account/video-imports' + }) + } - this.routeSub = this.router.events - .pipe(filter(event => event instanceof NavigationStart)) - .subscribe((event: NavigationStart) => this.updateLabels(event.url)) - } + const miscEntries: TopMenuDropdownParam = { + label: this.i18n('Misc'), + children: [ + { + label: this.i18n('Muted accounts'), + routerLink: '/my-account/blocklist/accounts' + }, + { + label: this.i18n('Muted instances'), + routerLink: '/my-account/blocklist/servers' + }, + { + label: this.i18n('Ownership changes'), + routerLink: '/my-account/ownership' + } + ] + } - ngOnDestroy () { - if (this.routeSub) this.routeSub.unsubscribe() + this.menuEntries = [ + { + label: this.i18n('My settings'), + routerLink: '/my-account/settings' + }, + { + label: this.i18n('My notifications'), + routerLink: '/my-account/notifications' + }, + libraryEntries, + miscEntries + ] } isVideoImportEnabled () { @@ -41,27 +83,4 @@ export class MyAccountComponent implements OnInit, OnDestroy { return importConfig.http.enabled || importConfig.torrent.enabled } - private updateLabels (url: string) { - const [ path ] = url.split('?') - - if (path.startsWith('/my-account/video-channels')) { - this.libraryLabel = this.i18n('Channels') - } else if (path.startsWith('/my-account/videos')) { - this.libraryLabel = this.i18n('Videos') - } else if (path.startsWith('/my-account/subscriptions')) { - this.libraryLabel = this.i18n('Subscriptions') - } else if (path.startsWith('/my-account/video-imports')) { - this.libraryLabel = this.i18n('Video imports') - } else { - this.libraryLabel = '' - } - - if (path.startsWith('/my-account/blocklist/accounts')) { - this.miscLabel = this.i18n('Muted accounts') - } else if (path.startsWith('/my-account/blocklist/servers')) { - this.miscLabel = this.i18n('Muted instances') - } else { - this.miscLabel = '' - } - } } diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts index 017ebd57d..18f51f171 100644 --- a/client/src/app/+my-account/my-account.module.ts +++ b/client/src/app/+my-account/my-account.module.ts @@ -1,6 +1,7 @@ import { TableModule } from 'primeng/table' import { NgModule } from '@angular/core' import { AutoCompleteModule } from 'primeng/autocomplete' +import { InputSwitchModule } from 'primeng/inputswitch' import { SharedModule } from '../shared' import { MyAccountRoutingModule } from './my-account-routing.module' import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component' @@ -21,6 +22,9 @@ import { MyAccountDangerZoneComponent } from '@app/+my-account/my-account-settin import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component' import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component' import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component' +import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component' +import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component' +import { MyAccountNotificationPreferencesComponent } from '@app/+my-account/my-account-settings/my-account-notification-preferences' @NgModule({ imports: [ @@ -28,7 +32,8 @@ import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-b MyAccountRoutingModule, AutoCompleteModule, SharedModule, - TableModule + TableModule, + InputSwitchModule ], declarations: [ @@ -49,7 +54,10 @@ import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-b MyAccountDangerZoneComponent, MyAccountSubscriptionsComponent, MyAccountBlocklistComponent, - MyAccountServerBlocklistComponent + MyAccountServerBlocklistComponent, + MyAccountHistoryComponent, + MyAccountNotificationsComponent, + MyAccountNotificationPreferencesComponent ], exports: [ diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts index 54bacc212..72c815a0c 100644 --- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts +++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts @@ -1,8 +1,8 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core' import { ServerService } from '../../core/server' -import { NotificationsService } from 'angular2-notifications' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { Account } from '@app/shared/account/account.model' +import { Notifier } from '@app/core' @Component({ selector: 'my-actor-avatar-info', @@ -18,13 +18,13 @@ export class ActorAvatarInfoComponent { constructor ( private serverService: ServerService, - private notificationsService: NotificationsService + private notifier: Notifier ) {} onAvatarChange () { const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ] if (avatarfile.size > this.maxAvatarSize) { - this.notificationsService.error('Error', 'This image is too large.') + this.notifier.error('Error', 'This image is too large.') return } diff --git a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts b/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts index 995f42ffc..cfd471fa4 100644 --- a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts +++ b/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts @@ -1,9 +1,8 @@ import { Component, OnInit } from '@angular/core' import { I18n } from '@ngx-translate/i18n-polyfill' -import { NotificationsService } from 'angular2-notifications' +import { Notifier, RedirectService } from '@app/core' import { ServerService } from '@app/core/server' -import { RedirectService } from '@app/core' -import { UserService, FormReactive } from '@app/shared' +import { FormReactive, UserService } from '@app/shared' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service' @@ -20,7 +19,7 @@ export class VerifyAccountAskSendEmailComponent extends FormReactive implements private userValidatorsService: UserValidatorsService, private userService: UserService, private serverService: ServerService, - private notificationsService: NotificationsService, + private notifier: Notifier, private redirectService: RedirectService, private i18n: I18n ) { @@ -46,12 +45,12 @@ export class VerifyAccountAskSendEmailComponent extends FormReactive implements 'An email with verification link will be sent to {{email}}.', { email } ) - this.notificationsService.success(this.i18n('Success'), message) + this.notifier.success(message) this.redirectService.redirectToHomepage() }, err => { - this.notificationsService.error(this.i18n('Error'), err.message) + this.notifier.error(err.message) } ) } diff --git a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html b/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html index 30ace5e10..a83d4a3c2 100644 --- a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html +++ b/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html @@ -9,7 +9,7 @@
diff --git a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.ts b/client/src/app/+verify-account/verify-account-email/verify-account-email.component.ts index e4a5522c8..f9ecf664b 100644 --- a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.ts +++ b/client/src/app/+verify-account/verify-account-email/verify-account-email.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { I18n } from '@ngx-translate/i18n-polyfill' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { UserService } from '@app/shared' @Component({ @@ -17,7 +17,7 @@ export class VerifyAccountEmailComponent implements OnInit { constructor ( private userService: UserService, - private notificationsService: NotificationsService, + private notifier: Notifier, private router: Router, private route: ActivatedRoute, private i18n: I18n @@ -29,7 +29,7 @@ export class VerifyAccountEmailComponent implements OnInit { this.verificationString = this.route.snapshot.queryParams['verificationString'] if (!this.userId || !this.verificationString) { - this.notificationsService.error(this.i18n('Error'), this.i18n('Unable to find user id or verification string.')) + this.notifier.error(this.i18n('Unable to find user id or verification string.')) } else { this.verifyEmail() } @@ -46,7 +46,7 @@ export class VerifyAccountEmailComponent implements OnInit { }, err => { - this.notificationsService.error(this.i18n('Error'), err.message) + this.notifier.error(err.message) } ) } 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/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts index 1f0744fb1..dea378a6e 100644 --- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts +++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts @@ -2,7 +2,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Location } from '@angular/common' import { immutableAssign } from '@app/shared/misc/utils' -import { NotificationsService } from 'angular2-notifications' import { AuthService } from '../../core/auth' import { ConfirmService } from '../../core/confirm' import { AbstractVideoList } from '../../shared/video/abstract-video-list' @@ -13,6 +12,7 @@ import { tap } from 'rxjs/operators' import { I18n } from '@ngx-translate/i18n-polyfill' import { Subscription } from 'rxjs' import { ScreenService } from '@app/shared/misc/screen.service' +import { Notifier } from '@app/core' @Component({ selector: 'my-video-channel-videos', @@ -35,7 +35,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On protected router: Router, protected route: ActivatedRoute, protected authService: AuthService, - protected notificationsService: NotificationsService, + protected notifier: Notifier, protected confirmService: ConfirmService, protected location: Location, protected screenService: ScreenService, @@ -55,7 +55,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On this.videoChannelSub = this.videoChannelService.videoChannelLoaded .subscribe(videoChannel => { this.videoChannel = videoChannel - this.currentRoute = '/video-channels/' + this.videoChannel.uuid + '/videos' + this.currentRoute = '/video-channels/' + this.videoChannel.nameWithHost + '/videos' this.reloadVideos() this.generateSyndicationList() diff --git a/client/src/app/+video-channels/video-channels-routing.module.ts b/client/src/app/+video-channels/video-channels-routing.module.ts index 935578d2a..3ac3533d9 100644 --- a/client/src/app/+video-channels/video-channels-routing.module.ts +++ b/client/src/app/+video-channels/video-channels-routing.module.ts @@ -7,7 +7,7 @@ import { VideoChannelAboutComponent } from './video-channel-about/video-channel- const videoChannelsRoutes: Routes = [ { - path: ':videoChannelId', + path: ':videoChannelName', component: VideoChannelsComponent, canActivateChild: [ MetaGuard ], children: [ diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts index 0c5c814c7..41ff82e98 100644 --- a/client/src/app/+video-channels/video-channels.component.ts +++ b/client/src/app/+video-channels/video-channels.component.ts @@ -34,9 +34,9 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { ngOnInit () { this.routeSub = this.route.params .pipe( - map(params => params[ 'videoChannelId' ]), + map(params => params[ 'videoChannelName' ]), distinctUntilChanged(), - switchMap(videoChannelId => this.videoChannelService.getVideoChannel(videoChannelId)), + switchMap(videoChannelName => this.videoChannelService.getVideoChannel(videoChannelName)), catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ])) ) .subscribe(videoChannel => this.videoChannel = videoChannel) diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index 545d6aeda..cff37a7d6 100644 --- a/client/src/app/app-routing.module.ts +++ b/client/src/app/app-routing.module.ts @@ -43,7 +43,8 @@ const routes: Routes = [ imports: [ RouterModule.forRoot(routes, { useHash: Boolean(history.pushState) === false, - preloadingStrategy: PreloadSelectedModulesList + preloadingStrategy: PreloadSelectedModulesList, + anchorScrolling: 'enabled' }) ], providers: [ diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 03f7e88ed..d398d4f35 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -30,12 +30,27 @@
+ - + + + +
+
+

{{ message.summary }}

+

{{ message.detail }}

+
+ + + + +
+ + diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index b51a81eb1..881f3ff31 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -91,8 +91,3 @@ footer { height: $footer-height; justify-content: center; } - -simple-notifications { - position: relative; - z-index: 1500; -} diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index dc4d0bf6a..7583fdee8 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -15,19 +15,6 @@ import { fromEvent } from 'rxjs' styleUrls: [ './app.component.scss' ] }) export class AppComponent implements OnInit { - notificationOptions = { - timeOut: 5000, - lastOnBottom: true, - clickToClose: true, - maxLength: 0, - maxStack: 7, - showProgressBar: false, - pauseOnHover: false, - preventDuplicates: false, - preventLastDuplicates: 'visible', - rtl: false - } - isMenuDisplayed = true isMenuChangedByUser = false diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 371199442..0bbc2e08b 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -12,13 +12,12 @@ import { AppComponent } from './app.component' import { CoreModule } from './core' import { HeaderComponent } from './header' import { LoginModule } from './login' -import { MenuComponent } from './menu' +import { AvatarNotificationComponent, LanguageChooserComponent, MenuComponent } from './menu' import { SharedModule } from './shared' import { SignupModule } from './signup' import { VideosModule } from './videos' import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '../../../shared/models/i18n' import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils' -import { LanguageChooserComponent } from '@app/menu/language-chooser.component' import { SearchModule } from '@app/search' export function metaFactory (serverService: ServerService): MetaLoader { @@ -40,6 +39,7 @@ export function metaFactory (serverService: ServerService): MetaLoader { MenuComponent, LanguageChooserComponent, + AvatarNotificationComponent, HeaderComponent ], imports: [ diff --git a/client/src/app/core/auth/auth-user.model.ts b/client/src/app/core/auth/auth-user.model.ts index acd13d9c5..abb11fdc2 100644 --- a/client/src/app/core/auth/auth-user.model.ts +++ b/client/src/app/core/auth/auth-user.model.ts @@ -1,8 +1,9 @@ import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' import { UserRight } from '../../../../../shared/models/users/user-right.enum' +import { User as ServerUserModel } from '../../../../../shared/models/users/user.model' // Do not use the barrel (dependency loop) import { hasUserRight, UserRole } from '../../../../../shared/models/users/user-role' -import { User, UserConstructorHash } from '../../shared/users/user.model' +import { User } from '../../shared/users/user.model' import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type' export type TokenOptions = { @@ -70,6 +71,7 @@ export class AuthUser extends User { ID: 'id', ROLE: 'role', EMAIL: 'email', + VIDEOS_HISTORY_ENABLED: 'videos-history-enabled', USERNAME: 'username', NSFW_POLICY: 'nsfw_policy', WEBTORRENT_ENABLED: 'peertube-videojs-' + 'webtorrent_enabled', @@ -89,7 +91,8 @@ export class AuthUser extends User { role: parseInt(peertubeLocalStorage.getItem(this.KEYS.ROLE), 10) as UserRole, nsfwPolicy: peertubeLocalStorage.getItem(this.KEYS.NSFW_POLICY) as NSFWPolicyType, webTorrentEnabled: peertubeLocalStorage.getItem(this.KEYS.WEBTORRENT_ENABLED) === 'true', - autoPlayVideo: peertubeLocalStorage.getItem(this.KEYS.AUTO_PLAY_VIDEO) === 'true' + autoPlayVideo: peertubeLocalStorage.getItem(this.KEYS.AUTO_PLAY_VIDEO) === 'true', + videosHistoryEnabled: peertubeLocalStorage.getItem(this.KEYS.VIDEOS_HISTORY_ENABLED) === 'true' }, Tokens.load() ) @@ -104,12 +107,13 @@ export class AuthUser extends User { peertubeLocalStorage.removeItem(this.KEYS.ROLE) peertubeLocalStorage.removeItem(this.KEYS.NSFW_POLICY) peertubeLocalStorage.removeItem(this.KEYS.WEBTORRENT_ENABLED) + peertubeLocalStorage.removeItem(this.KEYS.VIDEOS_HISTORY_ENABLED) peertubeLocalStorage.removeItem(this.KEYS.AUTO_PLAY_VIDEO) peertubeLocalStorage.removeItem(this.KEYS.EMAIL) Tokens.flush() } - constructor (userHash: UserConstructorHash, hashTokens: TokenOptions) { + constructor (userHash: Partial, hashTokens: TokenOptions) { super(userHash) this.tokens = new Tokens(hashTokens) } diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts index 443772c9e..eaa822e0f 100644 --- a/client/src/app/core/auth/auth.service.ts +++ b/client/src/app/core/auth/auth.service.ts @@ -3,18 +3,18 @@ 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 { NotificationsService } from 'angular2-notifications' +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' import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' import { I18n } from '@ngx-translate/i18n-polyfill' -import { HotkeysService, Hotkey } from 'angular2-hotkeys' +import { Hotkey, HotkeysService } from 'angular2-hotkeys' interface UserLoginWithUsername extends UserLogin { access_token: string @@ -38,7 +38,6 @@ export class AuthService { loginChangedSource: Observable userInformationLoaded = new ReplaySubject(1) hotkeys: Hotkey[] - redirectUrl: string private clientId: string = peertubeLocalStorage.getItem(AuthService.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_ID) private clientSecret: string = peertubeLocalStorage.getItem(AuthService.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_SECRET) @@ -48,7 +47,7 @@ export class AuthService { constructor ( private http: HttpClient, - private notificationsService: NotificationsService, + private notifier: Notifier, private hotkeysService: HotkeysService, private restExtractor: RestExtractor, private router: Router, @@ -106,9 +105,8 @@ export class AuthService { ) } - // We put a bigger timeout - // This is an important message - this.notificationsService.error(this.i18n('Error'), errorMessage, { timeOut: 7000 }) + // We put a bigger timeout: this is an important message + this.notifier.error(errorMessage, this.i18n('Error'), 7000) } ) } @@ -178,8 +176,6 @@ export class AuthService { this.setStatus(AuthStatus.LoggedOut) this.hotkeysService.remove(this.hotkeys) - - this.redirectUrl = null } refreshAccessToken () { diff --git a/client/src/app/core/auth/index.ts b/client/src/app/core/auth/index.ts index bc7bfec0e..8e5caa7ed 100644 --- a/client/src/app/core/auth/index.ts +++ b/client/src/app/core/auth/index.ts @@ -1,4 +1,3 @@ export * from './auth-status.model' export * from './auth-user.model' export * from './auth.service' -export * from '../routing/login-guard.service' 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 df2ec696d..4ef3b1e73 100644 --- a/client/src/app/core/core.module.ts +++ b/client/src/app/core/core.module.ts @@ -7,16 +7,18 @@ import { LoadingBarModule } from '@ngx-loading-bar/core' import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client' import { LoadingBarRouterModule } from '@ngx-loading-bar/router' -import { SimpleNotificationsModule } from 'angular2-notifications' - 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' import { ThemeService } from './theme' import { HotkeyModule } from 'angular2-hotkeys' -import { CheatSheetComponent } from '@app/core/hotkeys' +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: [ @@ -25,11 +27,10 @@ import { CheatSheetComponent } from '@app/core/hotkeys' FormsModule, BrowserAnimationsModule, - SimpleNotificationsModule.forRoot(), - LoadingBarHttpClientModule, LoadingBarRouterModule, - LoadingBarModule.forRoot(), + LoadingBarModule, + ToastModule, HotkeyModule.forRoot({ cheatSheetCloseEsc: true @@ -37,16 +38,15 @@ import { CheatSheetComponent } from '@app/core/hotkeys' ], declarations: [ - ConfirmComponent, CheatSheetComponent ], exports: [ - SimpleNotificationsModule, LoadingBarHttpClientModule, LoadingBarModule, - ConfirmComponent, + ToastModule, + CheatSheetComponent ], @@ -57,7 +57,10 @@ import { CheatSheetComponent } from '@app/core/hotkeys' ThemeService, LoginGuard, UserRightGuard, - RedirectService + RedirectService, + Notifier, + MessageService, + UserNotificationSocket ] }) export class CoreModule { diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts index 524589d74..f664aff41 100644 --- a/client/src/app/core/index.ts +++ b/client/src/app/core/index.ts @@ -2,6 +2,7 @@ export * from './auth' export * from './confirm' export * from './routing' export * from './server' +export * from './notification' export * from './theme' export * from './core.module' diff --git a/client/src/app/core/notification/index.ts b/client/src/app/core/notification/index.ts new file mode 100644 index 000000000..3e8d9ea65 --- /dev/null +++ b/client/src/app/core/notification/index.ts @@ -0,0 +1,2 @@ +export * from './notifier.service' +export * from './user-notification-socket.service' diff --git a/client/src/app/core/notification/notifier.service.ts b/client/src/app/core/notification/notifier.service.ts new file mode 100644 index 000000000..9833c65a0 --- /dev/null +++ b/client/src/app/core/notification/notifier.service.ts @@ -0,0 +1,41 @@ +import { Injectable } from '@angular/core' +import { MessageService } from 'primeng/api' +import { I18n } from '@ngx-translate/i18n-polyfill' + +@Injectable() +export class Notifier { + readonly TIMEOUT = 5000 + + constructor ( + private i18n: I18n, + private messageService: MessageService) { + } + + info (text: string, title?: string, timeout?: number) { + if (!title) title = this.i18n('Info') + + return this.notify('info', text, title, timeout) + } + + error (text: string, title?: string, timeout?: number) { + if (!title) title = this.i18n('Error') + + return this.notify('error', text, title, timeout) + } + + success (text: string, title?: string, timeout?: number) { + if (!title) title = this.i18n('Success') + + return this.notify('success', text, title, timeout) + } + + private notify (severity: 'success' | 'info' | 'warn' | 'error', text: string, title: string, timeout?: number) { + this.messageService.add({ + severity, + summary: title, + detail: text, + closable: true, + life: timeout || this.TIMEOUT + }) + } +} 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/core/routing/login-guard.service.ts b/client/src/app/core/routing/login-guard.service.ts index 40ff8f505..7b1c37ee8 100644 --- a/client/src/app/core/routing/login-guard.service.ts +++ b/client/src/app/core/routing/login-guard.service.ts @@ -1,11 +1,5 @@ import { Injectable } from '@angular/core' -import { - ActivatedRouteSnapshot, - CanActivateChild, - RouterStateSnapshot, - CanActivate, - Router -} from '@angular/router' +import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router' import { AuthService } from '../auth/auth.service' @@ -20,8 +14,6 @@ export class LoginGuard implements CanActivate, CanActivateChild { canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (this.auth.isLoggedIn() === true) return true - this.auth.redirectUrl = state.url - this.router.navigate([ '/login' ]) return false } diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts index 1881be117..e1db4097b 100644 --- a/client/src/app/core/routing/redirect.service.ts +++ b/client/src/app/core/routing/redirect.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core' -import { Router } from '@angular/router' +import { NavigationEnd, Router } from '@angular/router' import { ServerService } from '../server' @Injectable() @@ -8,6 +8,9 @@ export class RedirectService { static INIT_DEFAULT_ROUTE = '/videos/trending' static DEFAULT_ROUTE = RedirectService.INIT_DEFAULT_ROUTE + private previousUrl: string + private currentUrl: string + constructor ( private router: Router, private serverService: ServerService @@ -18,6 +21,7 @@ export class RedirectService { RedirectService.DEFAULT_ROUTE = config.instance.defaultClientRoute } + // Load default route this.serverService.configLoaded .subscribe(() => { const defaultRouteConfig = this.serverService.getConfig().instance.defaultClientRoute @@ -26,6 +30,21 @@ export class RedirectService { RedirectService.DEFAULT_ROUTE = defaultRouteConfig } }) + + // Track previous url + this.currentUrl = this.router.url + router.events.subscribe(event => { + if (event instanceof NavigationEnd) { + this.previousUrl = this.currentUrl + this.currentUrl = event.url + } + }) + } + + redirectToPreviousRoute () { + if (this.previousUrl) return this.router.navigateByUrl(this.previousUrl) + + return this.redirectToHomepage() } redirectToHomepage (skipLocationChange = false) { diff --git a/client/src/app/core/routing/user-right-guard.service.ts b/client/src/app/core/routing/user-right-guard.service.ts index 65d029977..50c3d8c19 100644 --- a/client/src/app/core/routing/user-right-guard.service.ts +++ b/client/src/app/core/routing/user-right-guard.service.ts @@ -7,7 +7,7 @@ import { Router } from '@angular/router' -import { AuthService } from '../auth' +import { AuthService } from '../auth/auth.service' @Injectable() export class UserRightGuard implements CanActivate, CanActivateChild { diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts index da8bd26db..4ae72427b 100644 --- a/client/src/app/core/server/server.service.ts +++ b/client/src/app/core/server/server.service.ts @@ -13,6 +13,7 @@ import { sortBy } from '@app/shared/misc/utils' @Injectable() export class ServerService { + private static BASE_SERVER_URL = environment.apiUrl + '/api/v1/server/' private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config/' private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/' private static BASE_LOCALE_URL = environment.apiUrl + '/client/locales/' @@ -37,6 +38,12 @@ export class ServerService { css: '' } }, + email: { + enabled: false + }, + contactForm: { + enabled: false + }, serverVersion: 'Unknown', signup: { allowed: false, @@ -80,6 +87,11 @@ export class ServerService { enabled: false } } + }, + trending: { + videos: { + intervalDays: 0 + } } } private videoCategories: Array> = [] @@ -141,10 +153,6 @@ export class ServerService { return this.videoPrivacies } - getAbout () { - return this.http.get(ServerService.BASE_CONFIG_URL + '/about') - } - private loadVideoAttributeEnum ( attributeName: 'categories' | 'licences' | 'languages' | 'privacies', hashToPopulate: VideoConstant[], 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..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); @@ -40,6 +41,7 @@ .upload-button { @include peertube-button-link; @include orange-button; + @include button-with-icon(22px, 3px, -1px); margin-right: 25px; @@ -47,15 +49,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 93dbed525..4efe3fb22 100644 --- a/client/src/app/login/login.component.html +++ b/client/src/app/login/login.component.html @@ -55,11 +55,17 @@

Forgot your password

- + +
-
+ +
+ We are sorry, you cannot recover you password because your instance administrator did not configure the PeerTube email system. +
+ +
this.redirect(), + () => this.redirectService.redirectToPreviousRoute(), err => { if (err.message.indexOf('credentials are invalid') !== -1) this.error = this.i18n('Incorrect username or password.') @@ -71,15 +73,6 @@ export class LoginComponent extends FormReactive implements OnInit { ) } - redirect () { - const redirect = this.authService.redirectUrl - if (redirect) { - this.router.navigate([ redirect ]) - } else { - this.redirectService.redirectToHomepage() - } - } - askResetPassword () { this.userService.askResetPassword(this.forgotPasswordEmail) .subscribe( @@ -88,18 +81,14 @@ export class LoginComponent extends FormReactive implements OnInit { 'An email with the reset password instructions will be sent to {{email}}.', { email: this.forgotPasswordEmail } ) - this.notificationsService.success(this.i18n('Success'), message) + this.notifier.success(message) this.hideForgotPasswordModal() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } - onForgotPasswordModalShown () { - this.forgotPasswordEmailInput.nativeElement.focus() - } - openForgotPasswordModal () { this.openedForgotPasswordModal = this.modalService.open(this.forgotPasswordModal) } diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html new file mode 100644 index 000000000..4ef3f0e89 --- /dev/null +++ b/client/src/app/menu/avatar-notification.component.html @@ -0,0 +1,23 @@ +
+
{{ unreadNotifications }}
+ + Avatar +
+ + +
+
Notifications
+ + +
+ + + + See all your notifications + diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss new file mode 100644 index 000000000..e785db788 --- /dev/null +++ b/client/src/app/menu/avatar-notification.component.scss @@ -0,0 +1,91 @@ +@import '_variables'; +@import '_mixins'; + +/deep/ { + .popover-notifications.popover { + max-width: none; + + .popover-body { + padding: 0; + font-size: 14px; + font-family: $main-fonts; + overflow-y: auto; + max-height: 500px; + width: 400px; + box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); + + .notifications-header { + display: flex; + justify-content: space-between; + + background-color: rgba(0, 0, 0, 0.10); + align-items: center; + padding: 0 10px; + font-size: 16px; + height: 50px; + + a { + @include disable-default-a-behaviour; + + color: rgba(20, 20, 20, 0.5); + + &:hover { + color: rgba(20, 20, 20, 0.8); + } + } + } + + .all-notifications { + display: flex; + align-items: center; + justify-content: center; + font-weight: $font-semibold; + color: var(--mainForegroundColor); + padding: 7px 0; + } + } + } +} + +.notification-avatar { + cursor: pointer; + position: relative; + + img, + .unread-notifications { + margin-left: 20px; + } + + img { + @include avatar(34px); + + margin-right: 10px; + } + + .unread-notifications { + position: absolute; + top: -5px; + left: -5px; + + display: flex; + align-items: center; + justify-content: center; + + background-color: var(--mainColor); + color: var(#fff); + font-size: 10px; + font-weight: $font-semibold; + + border-radius: 15px; + width: 15px; + height: 15px; + } +} + +@media screen and (max-width: $mobile-view) { + /deep/ { + .popover-notifications.popover .popover-body { + width: 400px; + } + } +} diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts new file mode 100644 index 000000000..f1af08096 --- /dev/null +++ b/client/src/app/menu/avatar-notification.component.ts @@ -0,0 +1,65 @@ +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, UserNotificationSocket } from '@app/core' +import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' +import { NavigationEnd, Router } from '@angular/router' +import { filter } from 'rxjs/operators' + +@Component({ + selector: 'my-avatar-notification', + templateUrl: './avatar-notification.component.html', + styleUrls: [ './avatar-notification.component.scss' ] +}) +export class AvatarNotificationComponent implements OnInit, OnDestroy { + @ViewChild('popover') popover: NgbPopover + @Input() user: User + + unreadNotifications = 0 + + private notificationSub: Subscription + private routeSub: Subscription + + constructor ( + private userNotificationService: UserNotificationService, + private userNotificationSocket: UserNotificationSocket, + private notifier: Notifier, + private router: Router + ) {} + + ngOnInit () { + this.userNotificationService.countUnreadNotifications() + .subscribe( + result => { + this.unreadNotifications = Math.min(result, 99) // Limit number to 99 + this.subscribeToNotifications() + }, + + err => this.notifier.error(err.message) + ) + + this.routeSub = this.router.events + .pipe(filter(event => event instanceof NavigationEnd)) + .subscribe(() => this.closePopover()) + } + + ngOnDestroy () { + if (this.notificationSub) this.notificationSub.unsubscribe() + if (this.routeSub) this.routeSub.unsubscribe() + } + + closePopover () { + this.popover.close() + } + + private subscribeToNotifications () { + this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket() + .subscribe(data => { + if (data.type === 'new') return this.unreadNotifications++ + if (data.type === 'read') return this.unreadNotifications-- + if (data.type === 'read-all') return this.unreadNotifications = 0 + }) + } + +} diff --git a/client/src/app/menu/index.ts b/client/src/app/menu/index.ts index 421271c12..39dbde750 100644 --- a/client/src/app/menu/index.ts +++ b/client/src/app/menu/index.ts @@ -1 +1,3 @@ +export * from './language-chooser.component' +export * from './avatar-notification.component' export * from './menu.component' diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html index c37bf2826..a62b33dda 100644 --- a/client/src/app/menu/language-chooser.component.html +++ b/client/src/app/menu/language-chooser.component.html @@ -1,9 +1,14 @@

Change the language

- +
+ + + Help to translate PeerTube! + +
{{ lang.label }}
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss index 944e86f46..72deb3952 100644 --- a/client/src/app/menu/language-chooser.component.scss +++ b/client/src/app/menu/language-chooser.component.scss @@ -1,6 +1,11 @@ @import '_variables'; @import '_mixins'; +.help-to-translate { + @include peertube-button-link; + @include orange-button; +} + .modal-body { text-align: center; @@ -9,4 +14,4 @@ font-size: 16px; margin: 15px; } -} \ No newline at end of file +} diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index e04bdf3d6..aa5bfa9c9 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -2,9 +2,7 @@
- - Avatar - +
{{ user.account?.displayName }} @@ -97,4 +95,4 @@
- \ No newline at end of file + diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index b271ebfd2..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; @@ -39,13 +39,6 @@ menu { justify-content: center; margin-bottom: 35px; - img { - @include avatar(34px); - - margin-left: 20px; - margin-right: 10px; - } - .logged-in-info { flex-grow: 1; @@ -250,7 +243,7 @@ menu { } } -@media screen and (max-width: 400px) { +@media screen and (max-width: $mobile-view) { .menu-wrapper { width: 100% !important; } diff --git a/client/src/app/reset-password/reset-password.component.ts b/client/src/app/reset-password/reset-password.component.ts index af1298de6..07b93ee73 100644 --- a/client/src/app/reset-password/reset-password.component.ts +++ b/client/src/app/reset-password/reset-password.component.ts @@ -1,8 +1,7 @@ import { Component, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import { UserService, UserValidatorsService } from '@app/shared' -import { NotificationsService } from 'angular2-notifications' -import { FormReactive } from '../shared' +import { UserService, UserValidatorsService, FormReactive } from '@app/shared' +import { Notifier } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { ResetPasswordValidatorsService } from '@app/shared/forms/form-validators/reset-password-validators.service' @@ -22,7 +21,7 @@ export class ResetPasswordComponent extends FormReactive implements OnInit { private resetPasswordValidatorsService: ResetPasswordValidatorsService, private userValidatorsService: UserValidatorsService, private userService: UserService, - private notificationsService: NotificationsService, + private notifier: Notifier, private router: Router, private route: ActivatedRoute, private i18n: I18n @@ -40,7 +39,7 @@ export class ResetPasswordComponent extends FormReactive implements OnInit { this.verificationString = this.route.snapshot.queryParams['verificationString'] if (!this.userId || !this.verificationString) { - this.notificationsService.error(this.i18n('Error'), this.i18n('Unable to find user id or verification string.')) + this.notifier.error(this.i18n('Unable to find user id or verification string.')) this.router.navigate([ '/' ]) } } @@ -49,11 +48,11 @@ export class ResetPasswordComponent extends FormReactive implements OnInit { this.userService.resetPassword(this.userId, this.verificationString, this.form.value.password) .subscribe( () => { - this.notificationsService.success(this.i18n('Success'), this.i18n('Your password has been successfully reset!')) + this.notifier.success(this.i18n('Your password has been successfully reset!')) this.router.navigate([ '/login' ]) }, - err => this.notificationsService.error('Error', err.message) + err => this.notifier.error(err.message) ) } diff --git a/client/src/app/search/search-filters.component.ts b/client/src/app/search/search-filters.component.ts index 8d7f84ac1..3fdc6df35 100644 --- a/client/src/app/search/search-filters.component.ts +++ b/client/src/app/search/search-filters.component.ts @@ -1,10 +1,6 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' -import { ActivatedRoute } from '@angular/router' -import { RedirectService, ServerService } from '@app/core' -import { NotificationsService } from 'angular2-notifications' -import { SearchService } from '@app/search/search.service' +import { ServerService } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' -import { MetaService } from '@ngx-meta/core' import { AdvancedSearch } from '@app/search/advanced-search.model' import { VideoConstant } from '../../../../shared' 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.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/search/search.component.ts b/client/src/app/search/search.component.ts index 3d17e6d96..c4a4b1fde 100644 --- a/client/src/app/search/search.component.ts +++ b/client/src/app/search/search.component.ts @@ -1,7 +1,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import { AuthService } from '@app/core' -import { NotificationsService } from 'angular2-notifications' +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' @@ -40,9 +39,10 @@ export class SearchComponent implements OnInit, OnDestroy { private route: ActivatedRoute, private router: Router, private metaService: MetaService, - private notificationsService: NotificationsService, + private notifier: Notifier, private searchService: SearchService, - private authService: AuthService + private authService: AuthService, + private serverService: ServerService ) { } ngOnInit () { @@ -68,7 +68,7 @@ export class SearchComponent implements OnInit, OnDestroy { this.search() }, - err => this.notificationsService.error('Error', err.text) + err => this.notifier.error(err.text) ) } @@ -76,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 } @@ -112,9 +116,7 @@ export class SearchComponent implements OnInit, OnDestroy { this.firstSearch = false }, - error => { - this.notificationsService.error(this.i18n('Error'), error.message) - } + err => this.notifier.error(err.message) ) } 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..04199a2a9 100644 --- a/client/src/app/shared/buttons/button.component.scss +++ b/client/src/app/shared/buttons/button.component.scss @@ -3,41 +3,18 @@ .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/core/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html similarity index 87% rename from client/src/app/core/confirm/confirm.component.html rename to client/src/app/shared/confirm/confirm.component.html index 43f0c6190..65df1cd4d 100644 --- a/client/src/app/core/confirm/confirm.component.html +++ b/client/src/app/shared/confirm/confirm.component.html @@ -2,7 +2,8 @@

{{ title }}

- + +
diff --git a/client/src/app/core/confirm/confirm.component.scss b/client/src/app/shared/confirm/confirm.component.scss similarity index 100% rename from client/src/app/core/confirm/confirm.component.scss rename to client/src/app/shared/confirm/confirm.component.scss diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts similarity index 96% rename from client/src/app/core/confirm/confirm.component.ts rename to client/src/app/shared/confirm/confirm.component.ts index 5138b7848..63c163da6 100644 --- a/client/src/app/core/confirm/confirm.component.ts +++ b/client/src/app/shared/confirm/confirm.component.ts @@ -1,5 +1,5 @@ import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core' -import { ConfirmService } from './confirm.service' +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' diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts index 0bb7d25e6..b9873af2c 100644 --- a/client/src/app/shared/forms/form-reactive.ts +++ b/client/src/app/shared/forms/form-reactive.ts @@ -1,11 +1,9 @@ import { FormGroup } from '@angular/forms' import { BuildFormArgument, BuildFormDefaultValues, FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -export type FormReactiveErrors = { [ id: string ]: string } +export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors } export type FormReactiveValidationMessages = { - [ id: string ]: { - [ name: string ]: string - } + [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages } export abstract class FormReactive { @@ -13,7 +11,7 @@ export abstract class FormReactive { protected formChanged = false form: FormGroup - formErrors: FormReactiveErrors + formErrors: any // To avoid casting in template because of string | FormReactiveErrors validationMessages: FormReactiveValidationMessages buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) { @@ -23,29 +21,49 @@ export abstract class FormReactive { this.formErrors = formErrors this.validationMessages = validationMessages - this.form.valueChanges.subscribe(() => this.onValueChanged(false)) + this.form.valueChanges.subscribe(() => this.onValueChanged(this.form, this.formErrors, this.validationMessages, false)) + } + + protected forceCheck () { + return this.onValueChanged(this.form, this.formErrors, this.validationMessages, true) + } + + protected check () { + return this.onValueChanged(this.form, this.formErrors, this.validationMessages, false) } - protected onValueChanged (forceCheck = false) { - for (const field in this.formErrors) { + private onValueChanged ( + form: FormGroup, + formErrors: FormReactiveErrors, + validationMessages: FormReactiveValidationMessages, + forceCheck = false + ) { + for (const field of Object.keys(formErrors)) { + if (formErrors[field] && typeof formErrors[field] === 'object') { + this.onValueChanged( + form.controls[field] as FormGroup, + formErrors[field] as FormReactiveErrors, + validationMessages[field] as FormReactiveValidationMessages, + forceCheck + ) + continue + } + // clear previous error message (if any) - this.formErrors[ field ] = '' - const control = this.form.get(field) + formErrors[ field ] = '' + const control = form.get(field) if (control.dirty) this.formChanged = true // Don't care if dirty on force check const isDirty = control.dirty || forceCheck === true if (control && isDirty && !control.valid) { - const messages = this.validationMessages[ field ] + const messages = validationMessages[ field ] for (const key in control.errors) { - this.formErrors[ field ] += messages[ key ] + ' ' + formErrors[ field ] += messages[ key ] + ' ' } } } } - protected forceCheck () { - return this.onValueChanged(true) - } } diff --git a/client/src/app/shared/forms/form-validators/form-validator.service.ts b/client/src/app/shared/forms/form-validators/form-validator.service.ts index 19a8bef25..249fdf119 100644 --- a/client/src/app/shared/forms/form-validators/form-validator.service.ts +++ b/client/src/app/shared/forms/form-validators/form-validator.service.ts @@ -7,10 +7,10 @@ export type BuildFormValidator = { MESSAGES: { [ name: string ]: string } } export type BuildFormArgument = { - [ id: string ]: BuildFormValidator + [ id: string ]: BuildFormValidator | BuildFormArgument } export type BuildFormDefaultValues = { - [ name: string ]: string | string[] + [ name: string ]: string | string[] | BuildFormDefaultValues } @Injectable() @@ -29,7 +29,16 @@ export class FormValidatorService { formErrors[name] = '' const field = obj[name] - if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES + if (this.isRecursiveField(field)) { + const result = this.buildForm(field as BuildFormArgument, defaultValues[name] as BuildFormDefaultValues) + group[name] = result.form + formErrors[name] = result.formErrors + validationMessages[name] = result.validationMessages + + continue + } + + if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string } const defaultValue = defaultValues[name] || '' @@ -52,13 +61,27 @@ export class FormValidatorService { formErrors[name] = '' const field = obj[name] - if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES + if (this.isRecursiveField(field)) { + this.updateForm( + form[name], + formErrors[name] as FormReactiveErrors, + validationMessages[name] as FormReactiveValidationMessages, + obj[name] as BuildFormArgument, + defaultValues[name] as BuildFormDefaultValues + ) + continue + } + + if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string } const defaultValue = defaultValues[name] || '' - if (field && field.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS)) + if (field && field.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS as ValidatorFn[])) else form.addControl(name, new FormControl(defaultValue)) } } + private isRecursiveField (field: any) { + return field && typeof field === 'object' && !field.MESSAGES && !field.VALIDATORS + } } diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts index 74e385b3d..fdcbedb71 100644 --- a/client/src/app/shared/forms/form-validators/index.ts +++ b/client/src/app/shared/forms/form-validators/index.ts @@ -1,6 +1,7 @@ export * from './custom-config-validators.service' export * from './form-validator.service' export * from './host' +export * from './instance-validators.service' export * from './login-validators.service' export * from './reset-password-validators.service' export * from './user-validators.service' diff --git a/client/src/app/shared/forms/form-validators/instance-validators.service.ts b/client/src/app/shared/forms/form-validators/instance-validators.service.ts new file mode 100644 index 000000000..5bb852858 --- /dev/null +++ b/client/src/app/shared/forms/form-validators/instance-validators.service.ts @@ -0,0 +1,48 @@ +import { I18n } from '@ngx-translate/i18n-polyfill' +import { Validators } from '@angular/forms' +import { BuildFormValidator } from '@app/shared' +import { Injectable } from '@angular/core' + +@Injectable() +export class InstanceValidatorsService { + readonly FROM_EMAIL: BuildFormValidator + readonly FROM_NAME: BuildFormValidator + readonly BODY: BuildFormValidator + + constructor (private i18n: I18n) { + + this.FROM_EMAIL = { + VALIDATORS: [ Validators.required, Validators.email ], + MESSAGES: { + 'required': this.i18n('Email is required.'), + 'email': this.i18n('Email must be valid.') + } + } + + this.FROM_NAME = { + VALIDATORS: [ + Validators.required, + Validators.minLength(1), + Validators.maxLength(120) + ], + MESSAGES: { + 'required': this.i18n('Your name is required.'), + 'minlength': this.i18n('Your name must be at least 1 character long.'), + 'maxlength': this.i18n('Your name cannot be more than 120 characters long.') + } + } + + this.BODY = { + VALIDATORS: [ + Validators.required, + Validators.minLength(3), + Validators.maxLength(5000) + ], + MESSAGES: { + 'required': this.i18n('A message is required.'), + 'minlength': this.i18n('The message must be at least 3 characters long.'), + 'maxlength': this.i18n('The message cannot be more than 5000 characters long.') + } + } + } +} diff --git a/client/src/app/shared/forms/form-validators/user-validators.service.ts b/client/src/app/shared/forms/form-validators/user-validators.service.ts index d14fa4777..6589b2580 100644 --- a/client/src/app/shared/forms/form-validators/user-validators.service.ts +++ b/client/src/app/shared/forms/form-validators/user-validators.service.ts @@ -23,15 +23,15 @@ export class UserValidatorsService { this.USER_USERNAME = { VALIDATORS: [ Validators.required, - Validators.minLength(3), - Validators.maxLength(20), - Validators.pattern(/^[a-z0-9._]+$/) + Validators.minLength(1), + Validators.maxLength(50), + Validators.pattern(/^[a-z0-9][a-z0-9._]*$/) ], MESSAGES: { 'required': this.i18n('Username is required.'), - 'minlength': this.i18n('Username must be at least 3 characters long.'), - 'maxlength': this.i18n('Username cannot be more than 20 characters long.'), - 'pattern': this.i18n('Username should be only lowercase alphanumeric characters.') + 'minlength': this.i18n('Username must be at least 1 character long.'), + 'maxlength': this.i18n('Username cannot be more than 50 characters long.'), + 'pattern': this.i18n('Username should be lowercase alphanumeric; dots and underscores are allowed.') } } @@ -88,13 +88,13 @@ export class UserValidatorsService { this.USER_DISPLAY_NAME = { VALIDATORS: [ Validators.required, - Validators.minLength(3), - Validators.maxLength(120) + Validators.minLength(1), + Validators.maxLength(50) ], MESSAGES: { 'required': this.i18n('Display name is required.'), - 'minlength': this.i18n('Display name must be at least 3 characters long.'), - 'maxlength': this.i18n('Display name cannot be more than 120 characters long.') + 'minlength': this.i18n('Display name must be at least 1 character long.'), + 'maxlength': this.i18n('Display name cannot be more than 50 characters long.') } } 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/form-validators/video-channel-validators.service.ts b/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts index f62ff65f7..1c519c10a 100644 --- a/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts +++ b/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts @@ -14,28 +14,28 @@ export class VideoChannelValidatorsService { this.VIDEO_CHANNEL_NAME = { VALIDATORS: [ Validators.required, - Validators.minLength(3), - Validators.maxLength(20), - Validators.pattern(/^[a-z0-9._]+$/) + Validators.minLength(1), + Validators.maxLength(50), + Validators.pattern(/^[a-z0-9][a-z0-9._]*$/) ], MESSAGES: { 'required': this.i18n('Name is required.'), - 'minlength': this.i18n('Name must be at least 3 characters long.'), - 'maxlength': this.i18n('Name cannot be more than 20 characters long.'), - 'pattern': this.i18n('Name should be only lowercase alphanumeric characters.') + 'minlength': this.i18n('Name must be at least 1 character long.'), + 'maxlength': this.i18n('Name cannot be more than 50 characters long.'), + 'pattern': this.i18n('Name should be lowercase alphanumeric; dots and underscores are allowed.') } } this.VIDEO_CHANNEL_DISPLAY_NAME = { VALIDATORS: [ Validators.required, - Validators.minLength(3), - Validators.maxLength(120) + Validators.minLength(1), + Validators.maxLength(50) ], MESSAGES: { 'required': i18n('Display name is required.'), - 'minlength': i18n('Display name must be at least 3 characters long.'), - 'maxlength': i18n('Display name cannot be more than 120 characters long.') + 'minlength': i18n('Display name must be at least 1 character long.'), + 'maxlength': i18n('Display name cannot be more than 50 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/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html index fb3006b53..7b8bcf601 100644 --- a/client/src/app/shared/forms/peertube-checkbox.component.html +++ b/client/src/app/shared/forms/peertube-checkbox.component.html @@ -1,10 +1,10 @@
-
\ No newline at end of file +
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts index bbc9904df..c1a6915e8 100644 --- a/client/src/app/shared/forms/peertube-checkbox.component.ts +++ b/client/src/app/shared/forms/peertube-checkbox.component.ts @@ -19,8 +19,7 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor { @Input() labelText: string @Input() labelHtml: string @Input() helpHtml: string - - isDisabled = false + @Input() disabled = false propagateChange = (_: any) => { /* empty */ } @@ -41,6 +40,6 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor { } setDisabledState (isDisabled: boolean) { - this.isDisabled = isDisabled + this.disabled = isDisabled } } diff --git a/client/src/app/shared/forms/reactive-file.component.ts b/client/src/app/shared/forms/reactive-file.component.ts index 8d22aa56c..f60c38e8d 100644 --- a/client/src/app/shared/forms/reactive-file.component.ts +++ b/client/src/app/shared/forms/reactive-file.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core' import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ @@ -30,7 +30,7 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor { private file: File constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private i18n: I18n ) {} @@ -49,7 +49,18 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor { const [ file ] = event.target.files if (file.size > this.maxFileSize) { - this.notificationsService.error(this.i18n('Error'), this.i18n('This file is too large.')) + this.notifier.error(this.i18n('This file is too large.')) + 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 } 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..e8ada0324 --- /dev/null +++ b/client/src/app/shared/icons/global-icon.component.ts @@ -0,0 +1,48 @@ +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'), + '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'), + '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/instance/instance.service.ts b/client/src/app/shared/instance/instance.service.ts new file mode 100644 index 000000000..61321ecce --- /dev/null +++ b/client/src/app/shared/instance/instance.service.ts @@ -0,0 +1,36 @@ +import { catchError } from 'rxjs/operators' +import { HttpClient } from '@angular/common/http' +import { Injectable } from '@angular/core' +import { environment } from '../../../environments/environment' +import { RestExtractor, RestService } from '../rest' +import { About } from '../../../../../shared/models/server' + +@Injectable() +export class InstanceService { + private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config' + private static BASE_SERVER_URL = environment.apiUrl + '/api/v1/server' + + constructor ( + private authHttp: HttpClient, + private restService: RestService, + private restExtractor: RestExtractor + ) { + } + + getAbout () { + return this.authHttp.get(InstanceService.BASE_CONFIG_URL + '/about') + .pipe(catchError(res => this.restExtractor.handleError(res))) + } + + contactAdministrator (fromEmail: string, fromName: string, message: string) { + const body = { + fromEmail, + fromName, + body: message + } + + return this.authHttp.post(InstanceService.BASE_SERVER_URL + '/contact', body) + .pipe(catchError(res => this.restExtractor.handleError(res))) + + } +} diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html new file mode 100644 index 000000000..d3c896019 --- /dev/null +++ b/client/src/app/shared/menu/top-menu-dropdown.component.html @@ -0,0 +1,21 @@ +
+ + + {{ menuEntry.label }} + +
+ + {{ menuEntry.label }} + - {{ suffixLabels[menuEntry.label] }} + + + +
+ + +
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss new file mode 100644 index 000000000..77159532f --- /dev/null +++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss @@ -0,0 +1,18 @@ +.parent-entry { + span[role=button] { + cursor: pointer; + } + + a { + display: block; + } +} + +/deep/ .dropdown-toggle::after { + position: relative; + top: 2px; +} + +/deep/ .dropdown-menu { + margin-top: 0 !important; +} diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts new file mode 100644 index 000000000..e859c30dd --- /dev/null +++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts @@ -0,0 +1,83 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core' +import { filter, take } from 'rxjs/operators' +import { NavigationEnd, Router } from '@angular/router' +import { Subscription } from 'rxjs' +import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' + +export type TopMenuDropdownParam = { + label: string + routerLink?: string + + children?: { + label: string + routerLink: string + }[] +} + +@Component({ + selector: 'my-top-menu-dropdown', + templateUrl: './top-menu-dropdown.component.html', + styleUrls: [ './top-menu-dropdown.component.scss' ] +}) +export class TopMenuDropdownComponent implements OnInit, OnDestroy { + @Input() menuEntries: TopMenuDropdownParam[] = [] + + suffixLabels: { [ parentLabel: string ]: string } + + private openedOnHover = false + private routeSub: Subscription + + constructor (private router: Router) {} + + ngOnInit () { + this.updateChildLabels(window.location.pathname) + + this.routeSub = this.router.events + .pipe(filter(event => event instanceof NavigationEnd)) + .subscribe(() => this.updateChildLabels(window.location.pathname)) + } + + ngOnDestroy () { + if (this.routeSub) this.routeSub.unsubscribe() + } + + openDropdownOnHover (dropdown: NgbDropdown) { + this.openedOnHover = true + dropdown.open() + + // Menu was closed + dropdown.openChange + .pipe(take(1)) + .subscribe(e => this.openedOnHover = false) + } + + dropdownAnchorClicked (dropdown: NgbDropdown) { + if (this.openedOnHover) { + this.openedOnHover = false + return + } + + return dropdown.toggle() + } + + closeDropdownIfHovered (dropdown: NgbDropdown) { + if (this.openedOnHover === false) return + + dropdown.close() + this.openedOnHover = false + } + + private updateChildLabels (path: string) { + this.suffixLabels = {} + + for (const entry of this.menuEntries) { + if (!entry.children) continue + + for (const child of entry.children) { + if (path.startsWith(child.routerLink)) { + this.suffixLabels[entry.label] = child.label + } + } + } + } +} diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html index 28ccb1e26..444425c9f 100644 --- a/client/src/app/shared/misc/help.component.html +++ b/client/src/app/shared/misc/help.component.html @@ -18,10 +18,13 @@ container="body" title="Get help" i18n-title + popoverClass="help-popover" [attr.aria-pressed]="isPopoverOpened" [ngbPopover]="tooltipTemplate" [placement]="tooltipPlacement" [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 5c73a8031..3898f3cda 100644 --- a/client/src/app/shared/misc/help.component.scss +++ b/client/src/app/shared/misc/help.component.scss @@ -2,29 +2,40 @@ @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; + + @include apply-svg-color(var(--mainForegroundColor)) + } } /deep/ { - .popover-body { - text-align: left; - padding: 10px; + .help-popover { max-width: 300px; - font-size: 13px; - font-family: $main-fonts; - background-color: #fff; - color: #000; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + .popover-body { + font-family: $main-fonts; + text-align: left; + padding: 10px; + font-size: 13px; + background-color: var(--mainBackgroundColor); + color: var(--mainForegroundColor); + box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + + p { + margin-bottom: 0; + } - ul { - padding-left: 20px; + ul { + padding-left: 20px; + margin-bottom: 0; + } } } } 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/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 60bd442dd..942765301 100644 --- a/client/src/app/shared/moderation/user-ban-modal.component.ts +++ b/client/src/app/shared/moderation/user-ban-modal.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' @@ -23,7 +23,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit { constructor ( protected formValidatorService: FormValidatorService, private modalService: NgbModal, - private notificationsService: NotificationsService, + private notifier: Notifier, private userService: UserService, private userValidatorsService: UserValidatorsService, private i18n: I18n @@ -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() } @@ -57,13 +57,13 @@ export class UserBanModalComponent extends FormReactive implements OnInit { ? this.i18n('{{num}} users banned.', { num: this.usersToBan.length }) : this.i18n('User {{username}} banned.', { username: this.usersToBan.username }) - this.notificationsService.success(this.i18n('Success'), message) + this.notifier.success(message) this.userBanned.emit(this.usersToBan) - this.hideBanUserModal() + this.hide() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts index d391246e0..9a2461ebf 100644 --- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts +++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts @@ -1,10 +1,9 @@ import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' import { I18n } from '@ngx-translate/i18n-polyfill' import { DropdownAction } from '@app/shared/buttons/action-dropdown.component' import { UserBanModalComponent } from '@app/shared/moderation/user-ban-modal.component' import { UserService } from '@app/shared/users' -import { AuthService, ConfirmService, ServerService } from '@app/core' +import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core' import { User, UserRight } from '../../../../../shared/models/users' import { Account } from '@app/shared/account/account.model' import { BlocklistService } from '@app/shared/blocklist' @@ -30,7 +29,7 @@ export class UserModerationDropdownComponent implements OnChanges { constructor ( private authService: AuthService, - private notificationsService: NotificationsService, + private notifier: Notifier, private confirmService: ConfirmService, private serverService: ServerService, private userService: UserService, @@ -48,7 +47,7 @@ export class UserModerationDropdownComponent implements OnChanges { openBanUserModal (user: User) { if (user.username === 'root') { - this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot ban root.')) + this.notifier.error(this.i18n('You cannot ban root.')) return } @@ -67,21 +66,18 @@ export class UserModerationDropdownComponent implements OnChanges { this.userService.unbanUsers(user) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('User {{username}} unbanned.', { username: user.username }) - ) + this.notifier.success(this.i18n('User {{username}} unbanned.', { username: user.username })) this.userChanged.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } async removeUser (user: User) { if (user.username === 'root') { - this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot delete root.')) + this.notifier.error(this.i18n('You cannot delete root.')) return } @@ -91,29 +87,23 @@ export class UserModerationDropdownComponent implements OnChanges { this.userService.removeUser(user).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('User {{username}} deleted.', { username: user.username }) - ) + this.notifier.success(this.i18n('User {{username}} deleted.', { username: user.username })) this.userDeleted.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } setEmailAsVerified (user: User) { this.userService.updateUser(user.id, { emailVerified: true }).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('User {{username}} email set as verified', { username: user.username }) - ) + this.notifier.success(this.i18n('User {{username}} email set as verified', { username: user.username })) this.userChanged.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -121,16 +111,13 @@ export class UserModerationDropdownComponent implements OnChanges { this.blocklistService.blockAccountByUser(account) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Account {{nameWithHost}} muted.', { nameWithHost: account.nameWithHost }) - ) + this.notifier.success(this.i18n('Account {{nameWithHost}} muted.', { nameWithHost: account.nameWithHost })) this.account.mutedByUser = true this.userChanged.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -138,16 +125,13 @@ export class UserModerationDropdownComponent implements OnChanges { this.blocklistService.unblockAccountByUser(account) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Account {{nameWithHost}} unmuted.', { nameWithHost: account.nameWithHost }) - ) + this.notifier.success(this.i18n('Account {{nameWithHost}} unmuted.', { nameWithHost: account.nameWithHost })) this.account.mutedByUser = false this.userChanged.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -155,16 +139,13 @@ export class UserModerationDropdownComponent implements OnChanges { this.blocklistService.blockServerByUser(host) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Instance {{host}} muted.', { host }) - ) + this.notifier.success(this.i18n('Instance {{host}} muted.', { host })) this.account.mutedServerByUser = true this.userChanged.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -172,16 +153,13 @@ export class UserModerationDropdownComponent implements OnChanges { this.blocklistService.unblockServerByUser(host) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Instance {{host}} unmuted.', { host }) - ) + this.notifier.success(this.i18n('Instance {{host}} unmuted.', { host })) this.account.mutedServerByUser = false this.userChanged.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -189,16 +167,13 @@ export class UserModerationDropdownComponent implements OnChanges { this.blocklistService.blockAccountByInstance(account) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost }) - ) + this.notifier.success(this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost })) this.account.mutedByInstance = true this.userChanged.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -206,16 +181,13 @@ export class UserModerationDropdownComponent implements OnChanges { this.blocklistService.unblockAccountByInstance(account) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Account {{nameWithHost}} unmuted by the instance.', { nameWithHost: account.nameWithHost }) - ) + this.notifier.success(this.i18n('Account {{nameWithHost}} unmuted by the instance.', { nameWithHost: account.nameWithHost })) this.account.mutedByInstance = false this.userChanged.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -223,16 +195,13 @@ export class UserModerationDropdownComponent implements OnChanges { this.blocklistService.blockServerByInstance(host) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Instance {{host}} muted by the instance.', { host }) - ) + this.notifier.success(this.i18n('Instance {{host}} muted by the instance.', { host })) this.account.mutedServerByInstance = true this.userChanged.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -240,16 +209,13 @@ export class UserModerationDropdownComponent implements OnChanges { this.blocklistService.unblockServerByInstance(host) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Instance {{host}} unmuted by the instance.', { host }) - ) + this.notifier.success(this.i18n('Instance {{host}} unmuted by the instance.', { host })) this.account.mutedServerByInstance = false this.userChanged.emit() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -277,18 +243,18 @@ export class UserModerationDropdownComponent implements OnChanges { }, { label: this.i18n('Ban'), - handler: ({ user }: { user: User }) => this.openBanUserModal(user), - isDisplayed: ({ user }: { user: User }) => !user.blocked + handler: ({ user }) => this.openBanUserModal(user), + isDisplayed: ({ user }) => !user.blocked }, { label: this.i18n('Unban'), - handler: ({ user }: { user: User }) => this.unbanUser(user), - isDisplayed: ({ user }: { user: User }) => user.blocked + handler: ({ user }) => this.unbanUser(user), + isDisplayed: ({ user }) => user.blocked }, { label: this.i18n('Set Email as Verified'), - handler: ({ user }: { user: User }) => this.setEmailAsVerified(user), - isDisplayed: ({ user }: { user: User }) => this.requiresEmailVerification && !user.blocked && user.emailVerified === false + handler: ({ user }) => this.setEmailAsVerified(user), + isDisplayed: ({ user }) => this.requiresEmailVerification && !user.blocked && user.emailVerified === false } ]) } @@ -299,23 +265,23 @@ export class UserModerationDropdownComponent implements OnChanges { this.userActions.push([ { label: this.i18n('Mute this account'), - isDisplayed: ({ account }: { account: Account }) => account.mutedByUser === false, - handler: ({ account }: { account: Account }) => this.blockAccountByUser(account) + isDisplayed: ({ account }) => account.mutedByUser === false, + handler: ({ account }) => this.blockAccountByUser(account) }, { label: this.i18n('Unmute this account'), - isDisplayed: ({ account }: { account: Account }) => account.mutedByUser === true, - handler: ({ account }: { account: Account }) => this.unblockAccountByUser(account) + isDisplayed: ({ account }) => account.mutedByUser === true, + handler: ({ account }) => this.unblockAccountByUser(account) }, { label: this.i18n('Mute the instance'), - isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === false, - handler: ({ account }: { account: Account }) => this.blockServerByUser(account.host) + isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === false, + handler: ({ account }) => this.blockServerByUser(account.host) }, { label: this.i18n('Unmute the instance'), - isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === true, - handler: ({ account }: { account: Account }) => this.unblockServerByUser(account.host) + isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === true, + handler: ({ account }) => this.unblockServerByUser(account.host) } ]) @@ -326,13 +292,13 @@ export class UserModerationDropdownComponent implements OnChanges { instanceActions = instanceActions.concat([ { label: this.i18n('Mute this account by your instance'), - isDisplayed: ({ account }: { account: Account }) => account.mutedByInstance === false, - handler: ({ account }: { account: Account }) => this.blockAccountByInstance(account) + isDisplayed: ({ account }) => account.mutedByInstance === false, + handler: ({ account }) => this.blockAccountByInstance(account) }, { label: this.i18n('Unmute this account by your instance'), - isDisplayed: ({ account }: { account: Account }) => account.mutedByInstance === true, - handler: ({ account }: { account: Account }) => this.unblockAccountByInstance(account) + isDisplayed: ({ account }) => account.mutedByInstance === true, + handler: ({ account }) => this.unblockAccountByInstance(account) } ]) } @@ -342,13 +308,13 @@ export class UserModerationDropdownComponent implements OnChanges { instanceActions = instanceActions.concat([ { label: this.i18n('Mute the instance by your instance'), - isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === false, - handler: ({ account }: { account: Account }) => this.blockServerByInstance(account.host) + isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === false, + handler: ({ account }) => this.blockServerByInstance(account.host) }, { label: this.i18n('Unmute the instance by your instance'), - isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === true, - handler: ({ account }: { account: Account }) => this.unblockServerByInstance(account.host) + isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === true, + handler: ({ account }) => this.unblockServerByInstance(account.host) } ]) } 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/videos/+video-watch/comment/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts similarity index 100% rename from client/src/app/videos/+video-watch/comment/linkifier.service.ts rename to client/src/app/shared/renderer/linkifier.service.ts diff --git a/client/src/app/videos/shared/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts similarity index 100% rename from client/src/app/videos/shared/markdown.service.ts rename to client/src/app/shared/renderer/markdown.service.ts diff --git a/client/src/app/shared/rest/component-pagination.model.ts b/client/src/app/shared/rest/component-pagination.model.ts index 0b8ecc318..85160d445 100644 --- a/client/src/app/shared/rest/component-pagination.model.ts +++ b/client/src/app/shared/rest/component-pagination.model.ts @@ -3,3 +3,14 @@ export interface ComponentPagination { itemsPerPage: number totalItems?: number } + +export function hasMoreItems (componentPagination: ComponentPagination) { + // No results + if (componentPagination.totalItems === 0) return false + + // Not loaded yet + if (!componentPagination.totalItems) return true + + const maxPage = componentPagination.totalItems / componentPagination.itemsPerPage + return maxPage > componentPagination.currentPage +} diff --git a/client/src/app/shared/rest/rest-extractor.service.ts b/client/src/app/shared/rest/rest-extractor.service.ts index f149569ef..e6518dd1d 100644 --- a/client/src/app/shared/rest/rest-extractor.service.ts +++ b/client/src/app/shared/rest/rest-extractor.service.ts @@ -80,6 +80,7 @@ export class RestExtractor { errorMessage = errorMessage ? errorMessage : 'Unknown error.' console.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`) } else { + console.error(err) errorMessage = err } diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index a2fa27b72..6f8625c7e 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,6 +33,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { CustomConfigValidatorsService, + InstanceValidatorsService, LoginValidatorsService, ReactiveFileComponent, ResetPasswordValidatorsService, @@ -61,6 +61,14 @@ import { OverviewService } from '@app/shared/overview' import { UserBanModalComponent } from '@app/shared/moderation' import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component' import { BlocklistService } from '@app/shared/blocklist' +import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component' +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' +import { ConfirmComponent } from '@app/shared/confirm/confirm.component' +import { GlobalIconComponent } from '@app/shared/icons/global-icon.component' @NgModule({ imports: [ @@ -102,7 +110,11 @@ import { BlocklistService } from '@app/shared/blocklist' RemoteSubscribeComponent, InstanceFeaturesTableComponent, UserBanModalComponent, - UserModerationDropdownComponent + UserModerationDropdownComponent, + TopMenuDropdownComponent, + UserNotificationsComponent, + ConfirmComponent, + GlobalIconComponent ], exports: [ @@ -141,6 +153,10 @@ import { BlocklistService } from '@app/shared/blocklist' InstanceFeaturesTableComponent, UserBanModalComponent, UserModerationDropdownComponent, + TopMenuDropdownComponent, + UserNotificationsComponent, + ConfirmComponent, + GlobalIconComponent, NumberFormatterPipe, ObjectLengthPipe, @@ -157,7 +173,6 @@ import { BlocklistService } from '@app/shared/blocklist' UserService, VideoService, AccountService, - MarkdownService, VideoChannelService, VideoCaptionService, VideoImportService, @@ -177,11 +192,20 @@ import { BlocklistService } from '@app/shared/blocklist' OverviewService, VideoChangeOwnershipValidatorsService, VideoAcceptOwnershipValidatorsService, + InstanceValidatorsService, BlocklistService, + UserHistoryService, + InstanceService, + + MarkdownService, + LinkifierService, + HtmlRendererService, I18nPrimengCalendarService, ScreenService, + UserNotificationService, + I18n ] }) diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.ts b/client/src/app/shared/user-subscription/remote-subscribe.component.ts index 7a81108cd..ba2a45df1 100644 --- a/client/src/app/shared/user-subscription/remote-subscribe.component.ts +++ b/client/src/app/shared/user-subscription/remote-subscribe.component.ts @@ -29,7 +29,7 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit { } onValidKey () { - this.onValueChanged() + this.check() if (!this.form.valid) return this.formValidated() @@ -37,7 +37,24 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit { formValidated () { const address = this.form.value['text'] - const [ , hostname ] = address.split('@') - window.open(`https://${hostname}/authorize_interaction?acct=${this.account}`) + const [ username, hostname ] = address.split('@') + + fetch(`https://${hostname}/.well-known/webfinger?resource=acct:${username}@${hostname}`) + .then(response => response.json()) + .then(data => new Promise((resolve, reject) => { + if (data && Array.isArray(data.links)) { + const link: { + template: string + } = data.links.find((link: any) => + link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe') + + if (link && link.template.includes('{uri}')) { + resolve(link.template.replace('{uri}', `acct:${this.account}`)) + } + } + reject() + })) + .then(window.open) + .catch(() => window.open(`https://${hostname}/authorize_interaction?acct=${this.account}`)) } } diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts index 315ea5037..8f1754c7f 100644 --- a/client/src/app/shared/user-subscription/subscribe-button.component.ts +++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts @@ -1,9 +1,8 @@ import { Component, Input, OnInit } from '@angular/core' import { Router } from '@angular/router' -import { AuthService } from '@app/core' +import { AuthService, Notifier } from '@app/core' import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' -import { NotificationsService } from 'angular2-notifications' import { I18n } from '@ngx-translate/i18n-polyfill' import { VideoService } from '@app/shared/video/video.service' import { FeedFormat } from '../../../../../shared/models/feeds' @@ -23,7 +22,7 @@ export class SubscribeButtonComponent implements OnInit { constructor ( private authService: AuthService, private router: Router, - private notificationsService: NotificationsService, + private notifier: Notifier, private userSubscriptionService: UserSubscriptionService, private i18n: I18n, private videoService: VideoService @@ -43,18 +42,17 @@ export class SubscribeButtonComponent implements OnInit { .subscribe( res => this.subscribed = res[this.uri], - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } subscribe () { if (this.isUserLoggedIn()) { - this.localSubscribe() - } else { - this.authService.redirectUrl = this.router.url - this.gotoLogin() + return this.localSubscribe() } + + return this.gotoLogin() } localSubscribe () { @@ -63,13 +61,13 @@ export class SubscribeButtonComponent implements OnInit { () => { this.subscribed = true - this.notificationsService.success( - this.i18n('Subscribed'), - this.i18n('Subscribed to {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }) + this.notifier.success( + this.i18n('Subscribed to {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }), + this.i18n('Subscribed') ) }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -85,13 +83,13 @@ export class SubscribeButtonComponent implements OnInit { () => { this.subscribed = false - this.notificationsService.success( - this.i18n('Unsubscribed'), - this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }) + this.notifier.success( + this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }), + this.i18n('Unsubscribed') ) }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } diff --git a/client/src/app/shared/users/index.ts b/client/src/app/shared/users/index.ts index 7b5a67bc7..ebd715fb1 100644 --- a/client/src/app/shared/users/index.ts +++ b/client/src/app/shared/users/index.ts @@ -1,2 +1,3 @@ export * from './user.model' export * from './user.service' +export * from './user-notifications.component' diff --git a/client/src/app/shared/users/user-history.service.ts b/client/src/app/shared/users/user-history.service.ts new file mode 100644 index 000000000..9ed25bfc7 --- /dev/null +++ b/client/src/app/shared/users/user-history.service.ts @@ -0,0 +1,45 @@ +import { HttpClient, HttpParams } from '@angular/common/http' +import { Injectable } from '@angular/core' +import { environment } from '../../../environments/environment' +import { RestExtractor } from '../rest/rest-extractor.service' +import { RestService } from '../rest/rest.service' +import { Video } from '../video/video.model' +import { catchError, map, switchMap } from 'rxjs/operators' +import { ComponentPagination } from '@app/shared/rest/component-pagination.model' +import { VideoService } from '@app/shared/video/video.service' +import { ResultList } from '../../../../../shared' + +@Injectable() +export class UserHistoryService { + static BASE_USER_VIDEOS_HISTORY_URL = environment.apiUrl + '/api/v1/users/me/history/videos' + + constructor ( + private authHttp: HttpClient, + private restExtractor: RestExtractor, + private restService: RestService, + private videoService: VideoService + ) {} + + getUserVideosHistory (historyPagination: ComponentPagination) { + const pagination = this.restService.componentPaginationToRestPagination(historyPagination) + + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination) + + return this.authHttp + .get>(UserHistoryService.BASE_USER_VIDEOS_HISTORY_URL, { params }) + .pipe( + switchMap(res => this.videoService.extractVideos(res)), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + deleteUserVideosHistory () { + return this.authHttp + .post(UserHistoryService.BASE_USER_VIDEOS_HISTORY_URL + '/remove', {}) + .pipe( + map(() => this.restExtractor.extractDataBool()), + catchError(err => this.restExtractor.handleError(err)) + ) + } +} diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts new file mode 100644 index 000000000..125d2120c --- /dev/null +++ b/client/src/app/shared/users/user-notification.model.ts @@ -0,0 +1,155 @@ +import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared' +import { Actor } from '@app/shared/actor/actor.model' + +export class UserNotification implements UserNotificationServer { + id: number + type: UserNotificationType + read: boolean + + video?: VideoInfo & { + channel: ActorInfo & { avatarUrl?: string } + } + + videoImport?: { + id: number + video?: VideoInfo + torrentName?: string + magnetUri?: string + targetUrl?: string + } + + comment?: { + id: number + threadId: number + account: ActorInfo & { avatarUrl?: string } + video: VideoInfo + } + + videoAbuse?: { + id: number + video: VideoInfo + } + + videoBlacklist?: { + id: number + video: VideoInfo + } + + account?: ActorInfo & { avatarUrl?: string } + + actorFollow?: { + id: number + follower: ActorInfo & { avatarUrl?: string } + following: { + type: 'account' | 'channel' + name: string + displayName: string + } + } + + createdAt: string + updatedAt: string + + // Additional fields + videoUrl?: string + commentUrl?: any[] + videoAbuseUrl?: string + accountUrl?: string + videoImportIdentifier?: string + videoImportUrl?: string + + constructor (hash: UserNotificationServer) { + this.id = hash.id + this.type = hash.type + 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 + + switch (this.type) { + case UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION: + this.videoUrl = this.buildVideoUrl(this.video) + break + + case UserNotificationType.UNBLACKLIST_ON_MY_VIDEO: + this.videoUrl = this.buildVideoUrl(this.video) + break + + 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 + + case UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS: + this.videoAbuseUrl = '/admin/moderation/video-abuses/list' + this.videoUrl = this.buildVideoUrl(this.videoAbuse.video) + break + + case UserNotificationType.BLACKLIST_ON_MY_VIDEO: + this.videoUrl = this.buildVideoUrl(this.videoBlacklist.video) + break + + case UserNotificationType.MY_VIDEO_PUBLISHED: + this.videoUrl = this.buildVideoUrl(this.video) + break + + case UserNotificationType.MY_VIDEO_IMPORT_SUCCESS: + this.videoImportUrl = this.buildVideoImportUrl() + this.videoImportIdentifier = this.buildVideoImportIdentifier(this.videoImport) + this.videoUrl = this.buildVideoUrl(this.videoImport.video) + break + + case UserNotificationType.MY_VIDEO_IMPORT_ERROR: + this.videoImportUrl = this.buildVideoImportUrl() + this.videoImportIdentifier = this.buildVideoImportIdentifier(this.videoImport) + break + + case UserNotificationType.NEW_USER_REGISTRATION: + this.accountUrl = this.buildAccountUrl(this.account) + break + + case UserNotificationType.NEW_FOLLOW: + this.accountUrl = this.buildAccountUrl(this.actorFollow.follower) + break + } + } + + private buildVideoUrl (video: { uuid: string }) { + return '/videos/watch/' + video.uuid + } + + private buildAccountUrl (account: { name: string, host: string }) { + return '/accounts/' + Actor.CREATE_BY_STRING(account.name, account.host) + } + + private buildVideoImportUrl () { + return '/my-account/video-imports' + } + + private buildVideoImportIdentifier (videoImport: { targetUrl?: string, magnetUri?: string, torrentName?: string }) { + 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 new file mode 100644 index 000000000..f8a30955d --- /dev/null +++ b/client/src/app/shared/users/user-notification.service.ts @@ -0,0 +1,86 @@ +import { Injectable } from '@angular/core' +import { HttpClient, HttpParams } from '@angular/common/http' +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 './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' + + constructor ( + private auth: AuthService, + private authHttp: HttpClient, + private restExtractor: RestExtractor, + private restService: RestService, + private userNotificationSocket: UserNotificationSocket + ) {} + + listMyNotifications (pagination: ComponentPagination, unread?: boolean, ignoreLoadingBar = false) { + let params = new HttpParams() + params = this.restService.addRestGetParams(params, this.restService.componentPaginationToRestPagination(pagination)) + + if (unread) params = params.append('unread', `${unread}`) + + const headers = ignoreLoadingBar ? { ignoreLoadingBar: '' } : undefined + + return this.authHttp.get>(UserNotificationService.BASE_NOTIFICATIONS_URL, { params, headers }) + .pipe( + map(res => this.restExtractor.convertResultListDateToHuman(res)), + map(res => this.restExtractor.applyToResultListData(res, this.formatNotification.bind(this))), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + countUnreadNotifications () { + return this.listMyNotifications({ currentPage: 1, itemsPerPage: 0 }, true) + .pipe(map(n => n.total)) + } + + markAsRead (notification: UserNotification) { + const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read' + + const body = { ids: [ notification.id ] } + const headers = { ignoreLoadingBar: '' } + + return this.authHttp.post(url, body, { headers }) + .pipe( + map(this.restExtractor.extractDataBool), + tap(() => this.userNotificationSocket.dispatch('read')), + catchError(res => this.restExtractor.handleError(res)) + ) + } + + markAllAsRead () { + const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read-all' + const headers = { ignoreLoadingBar: '' } + + return this.authHttp.post(url, {}, { headers }) + .pipe( + map(this.restExtractor.extractDataBool), + tap(() => this.userNotificationSocket.dispatch('read-all')), + catchError(res => this.restExtractor.handleError(res)) + ) + } + + updateNotificationSettings (user: User, settings: UserNotificationSetting) { + const url = UserNotificationService.BASE_NOTIFICATION_SETTINGS + + return this.authHttp.put(url, settings) + .pipe( + map(this.restExtractor.extractDataBool), + catchError(res => this.restExtractor.handleError(res)) + ) + } + + private formatNotification (notification: UserNotificationServer) { + return new UserNotification(notification) + } +} diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html new file mode 100644 index 000000000..0d69e0feb --- /dev/null +++ b/client/src/app/shared/users/user-notifications.component.html @@ -0,0 +1,101 @@ +
You don't have notifications.
+ +
+
+ + + + + +
+ {{ notification.video.channel.displayName }} published a new video +
+ + + + + +
+ Your video {{ notification.video.name }} has been unblacklisted +
+ + + + + +
+ Your video {{ notification.videoBlacklist.video.name }} has been blacklisted +
+ + + + + +
+ A new video abuse has been created on video {{ notification.videoAbuse.video.name }} +
+ + + + + +
+ {{ notification.comment.account.displayName }} commented your video {{ notification.comment.video.name }} +
+ + + + + +
+ Your video {{ notification.video.name }} has been published +
+ + + + + +
+ Your video import {{ notification.videoImportIdentifier }} succeeded +
+ + + + + +
+ Your video import {{ notification.videoImportIdentifier }} failed +
+ + + + + +
+ User {{ notification.account.name }} registered on your instance +
+ + + + + +
+ {{ 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.createdAt | myFromNow }}
+
+
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss new file mode 100644 index 000000000..315d504c9 --- /dev/null +++ b/client/src/app/shared/users/user-notifications.component.scss @@ -0,0 +1,51 @@ +@import '_variables'; +@import '_mixins'; + +.no-notification { + display: flex; + justify-content: center; + align-items: center; + padding: 20px 0; +} + +.notification { + display: flex; + align-items: center; + font-size: inherit; + padding: 15px 5px 15px 10px; + border-bottom: 1px solid rgba(0, 0, 0, 0.10); + + &.unread { + background-color: rgba(0, 0, 0, 0.05); + } + + my-global-icon { + width: 24px; + margin-right: 11px; + margin-left: 3px; + + @include apply-svg-color(#333); + } + + .avatar { + @include avatar(30px); + + margin-right: 10px; + } + + .message { + flex-grow: 1; + + 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 new file mode 100644 index 000000000..b5f9fd399 --- /dev/null +++ b/client/src/app/shared/users/user-notifications.component.ts @@ -0,0 +1,87 @@ +import { Component, Input, OnInit } from '@angular/core' +import { UserNotificationService } from '@app/shared/users/user-notification.service' +import { UserNotificationType } from '../../../../../shared' +import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model' +import { Notifier } from '@app/core' +import { UserNotification } from '@app/shared/users/user-notification.model' + +@Component({ + selector: 'my-user-notifications', + templateUrl: 'user-notifications.component.html', + styleUrls: [ 'user-notifications.component.scss' ] +}) +export class UserNotificationsComponent implements OnInit { + @Input() ignoreLoadingBar = false + @Input() infiniteScroll = true + @Input() itemsPerPage = 20 + + notifications: UserNotification[] = [] + + // So we can access it in the template + UserNotificationType = UserNotificationType + + componentPagination: ComponentPagination + + constructor ( + private userNotificationService: UserNotificationService, + private notifier: Notifier + ) { } + + ngOnInit () { + this.componentPagination = { + currentPage: 1, + itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable + totalItems: null + } + + this.loadMoreNotifications() + } + + loadMoreNotifications () { + this.userNotificationService.listMyNotifications(this.componentPagination, undefined, this.ignoreLoadingBar) + .subscribe( + result => { + this.notifications = this.notifications.concat(result.data) + this.componentPagination.totalItems = result.total + }, + + err => this.notifier.error(err.message) + ) + } + + onNearOfBottom () { + if (this.infiniteScroll === false) return + + this.componentPagination.currentPage++ + + if (hasMoreItems(this.componentPagination)) { + this.loadMoreNotifications() + } + } + + markAsRead (notification: UserNotification) { + if (notification.read) return + + this.userNotificationService.markAsRead(notification) + .subscribe( + () => { + notification.read = true + }, + + err => this.notifier.error(err.message) + ) + } + + markAllAsRead () { + this.userNotificationService.markAllAsRead() + .subscribe( + () => { + for (const notification of this.notifications) { + notification.read = true + } + }, + + err => this.notifier.error(err.message) + ) + } +} diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts index 9819829fd..c15f1de8c 100644 --- a/client/src/app/shared/users/user.model.ts +++ b/client/src/app/shared/users/user.model.ts @@ -1,33 +1,8 @@ -import { - Account as AccountServerModel, - hasUserRight, - User as UserServerModel, - UserRight, - UserRole, - VideoChannel -} from '../../../../../shared' +import { hasUserRight, User as UserServerModel, UserNotificationSetting, UserRight, UserRole, VideoChannel } from '../../../../../shared' import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type' import { Account } from '@app/shared/account/account.model' import { Avatar } from '../../../../../shared/models/avatars/avatar.model' -export type UserConstructorHash = { - id: number, - username: string, - email: string, - role: UserRole, - emailVerified?: boolean, - videoQuota?: number, - videoQuotaDaily?: number, - nsfwPolicy?: NSFWPolicyType, - webTorrentEnabled?: boolean, - autoPlayVideo?: boolean, - createdAt?: Date, - account?: AccountServerModel, - videoChannels?: VideoChannel[] - - blocked?: boolean - blockedReason?: string -} export class User implements UserServerModel { id: number username: string @@ -35,8 +10,11 @@ export class User implements UserServerModel { emailVerified: boolean role: UserRole nsfwPolicy: NSFWPolicyType + webTorrentEnabled: boolean autoPlayVideo: boolean + videosHistoryEnabled: boolean + videoQuota: number videoQuotaDaily: number account: Account @@ -46,7 +24,9 @@ export class User implements UserServerModel { blocked: boolean blockedReason?: string - constructor (hash: UserConstructorHash) { + notificationSettings?: UserNotificationSetting + + constructor (hash: Partial) { this.id = hash.id this.username = hash.username this.email = hash.email @@ -57,11 +37,14 @@ export class User implements UserServerModel { this.videoQuotaDaily = hash.videoQuotaDaily this.nsfwPolicy = hash.nsfwPolicy this.webTorrentEnabled = hash.webTorrentEnabled + this.videosHistoryEnabled = hash.videosHistoryEnabled this.autoPlayVideo = hash.autoPlayVideo this.createdAt = hash.createdAt this.blocked = hash.blocked this.blockedReason = hash.blockedReason + this.notificationSettings = hash.notificationSettings + if (hash.account !== undefined) { this.account = new Account(hash.account) } 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/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/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 2d32dd6ad..b0633be4a 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -3,7 +3,6 @@ import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Location } from '@angular/common' import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' -import { NotificationsService } from 'angular2-notifications' import { fromEvent, Observable, Subscription } from 'rxjs' import { AuthService } from '../../core/auth' import { ComponentPagination } from '../rest/component-pagination.model' @@ -13,6 +12,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { ScreenService } from '@app/shared/misc/screen.service' import { OwnerDisplayType } from '@app/shared/video/video-miniature.component' import { Syndication } from '@app/shared/video/syndication.model' +import { Notifier } from '@app/core' export abstract class AbstractVideoList implements OnInit, OnDestroy { private static LINES_PER_PAGE = 4 @@ -39,11 +39,12 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { ownerDisplayType: OwnerDisplayType = 'account' firstLoadedPage: number displayModerationBlock = false + titleTooltip: string protected baseVideoWidth = 215 protected baseVideoHeight = 205 - protected abstract notificationsService: NotificationsService + protected abstract notifier: Notifier protected abstract authService: AuthService protected abstract router: Router protected abstract route: ActivatedRoute @@ -157,7 +158,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { }, error => { this.loadingPage[page] = false - this.notificationsService.error(this.i18n('Error'), error.message) + this.notifier.error(error.message) } ) } 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/signup/signup.component.html b/client/src/app/signup/signup.component.html index 0207a166e..07d24b381 100644 --- a/client/src/app/signup/signup.component.html +++ b/client/src/app/signup/signup.component.html @@ -64,7 +64,7 @@
- +
diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts index 3341d4e09..13941ec79 100644 --- a/client/src/app/signup/signup.component.ts +++ b/client/src/app/signup/signup.component.ts @@ -1,8 +1,7 @@ import { Component, OnInit } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { AuthService, Notifier, RedirectService, ServerService } from '@app/core' import { UserCreate } from '../../../../shared' import { FormReactive, UserService, UserValidatorsService } from '../shared' -import { AuthService, RedirectService, ServerService } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' @@ -20,7 +19,7 @@ export class SignupComponent extends FormReactive implements OnInit { protected formValidatorService: FormValidatorService, private authService: AuthService, private userValidatorsService: UserValidatorsService, - private notificationsService: NotificationsService, + private notifier: Notifier, private userService: UserService, private serverService: ServerService, private redirectService: RedirectService, @@ -64,10 +63,7 @@ export class SignupComponent extends FormReactive implements OnInit { this.authService.login(userCreate.username, userCreate.password) .subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('You are now logged in as {{username}}!', { username: userCreate.username }) - ) + this.notifier.success(this.i18n('You are now logged in as {{username}}!', { username: userCreate.username })) this.redirectService.redirectToHomepage() }, 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 33c766d87..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 @@ -126,6 +126,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..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; } @@ -42,7 +38,7 @@ my-peertube-checkbox { text-align: right; .create-caption { - @include create-button('../../../../assets/images/global/add.svg'); + @include create-button; } } @@ -100,13 +96,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 +116,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'); - } } } @@ -176,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; @@ -202,7 +189,10 @@ p-calendar { top: -1px; height: auto !important; vertical-align: middle !important; - fill: #585858 !important; + + path { + fill: $grey-foreground-color !important; + } } &:hover { 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 a56733e57..85e015901 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 @@ -2,7 +2,7 @@ import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core' import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms' import { ActivatedRoute, Router } from '@angular/router' import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { ServerService } from '../../../core/server' import { VideoEdit } from '../../../shared/video/video-edit.model' import { map } from 'rxjs/operators' @@ -27,6 +27,7 @@ export class VideoEditComponent implements OnInit, OnDestroy { @Input() userVideoChannels: { id: number, label: string, support: string }[] = [] @Input() schedulePublicationPossible = true @Input() videoCaptions: VideoCaptionEdit[] = [] + @Input() waitTranscodingEnabled = true @ViewChild('videoCaptionAddModal') videoCaptionAddModal: VideoCaptionAddModalComponent @@ -58,7 +59,7 @@ export class VideoEditComponent implements OnInit, OnDestroy { private videoCaptionService: VideoCaptionService, private route: ActivatedRoute, private router: Router, - private notificationsService: NotificationsService, + private notifier: Notifier, private serverService: ServerService, private i18nPrimengCalendarService: I18nPrimengCalendarService ) { 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 13776ae36..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 @@ -1,8 +1,7 @@ import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core' import { Router } from '@angular/router' -import { NotificationsService } from 'angular2-notifications' import { VideoPrivacy, VideoUpdate } from '../../../../../../shared/models/videos' -import { AuthService, ServerService } from '../../../core' +import { AuthService, Notifier, ServerService } from '../../../core' import { VideoService } from '../../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' import { LoadingBarService } from '@ngx-loading-bar/core' @@ -19,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 { @@ -41,7 +41,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca constructor ( protected formValidatorService: FormValidatorService, protected loadingBar: LoadingBarService, - protected notificationsService: NotificationsService, + protected notifier: Notifier, protected authService: AuthService, protected serverService: ServerService, protected videoService: VideoService, @@ -107,7 +107,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca this.loadingBar.complete() this.isImportingVideo = false this.firstStepError.emit() - this.notificationsService.error(this.i18n('Error'), err.message) + this.notifier.error(err.message) } ) } @@ -126,7 +126,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca .subscribe( () => { this.isUpdatingVideo = false - this.notificationsService.success(this.i18n('Success'), this.i18n('Video to import updated.')) + this.notifier.success(this.i18n('Video to import updated.')) this.router.navigate([ '/my-account', 'video-imports' ]) }, 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.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts index 9cdface75..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 @@ -1,8 +1,7 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core' import { Router } from '@angular/router' -import { NotificationsService } from 'angular2-notifications' import { VideoPrivacy, VideoUpdate } from '../../../../../../shared/models/videos' -import { AuthService, ServerService } from '../../../core' +import { AuthService, Notifier, ServerService } from '../../../core' import { VideoService } from '../../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' import { LoadingBarService } from '@ngx-loading-bar/core' @@ -19,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 { @@ -40,7 +39,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom constructor ( protected formValidatorService: FormValidatorService, protected loadingBar: LoadingBarService, - protected notificationsService: NotificationsService, + protected notifier: Notifier, protected authService: AuthService, protected serverService: ServerService, protected videoService: VideoService, @@ -99,7 +98,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom this.loadingBar.complete() this.isImportingVideo = false this.firstStepError.emit() - this.notificationsService.error(this.i18n('Error'), err.message) + this.notifier.error(err.message) } ) } @@ -118,7 +117,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom .subscribe( () => { this.isUpdatingVideo = false - this.notificationsService.success(this.i18n('Success'), this.i18n('Video to import updated.')) + this.notifier.success(this.i18n('Video to import updated.')) this.router.navigate([ '/my-account', 'video-imports' ]) }, 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-send.scss similarity index 57% rename from client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss rename to client/src/app/videos/+video-edit/video-add-components/video-send.scss index e907edc70..8769dd302 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-send.scss @@ -3,10 +3,6 @@ $width-size: 190px; -.peertube-select-container { - @include peertube-select-container($width-size); -} - .alert.alert-danger { text-align: center; @@ -15,17 +11,20 @@ $width-size: 190px; } } -.import-video-url { +.first-step-block { display: flex; flex-direction: column; align-items: center; - .icon.icon-upload { - @include icon(90px); + .upload-icon { + width: 90px; margin-bottom: 25px; - cursor: default; - background-image: url('../../../../assets/images/video/upload.svg'); + @include apply-svg-color(#C6C6C6); + } + + .peertube-select-container { + @include peertube-select-container($width-size); } input[type=text] { @@ -40,6 +39,16 @@ $width-size: 190px; 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-send.ts b/client/src/app/videos/+video-edit/video-add-components/video-send.ts index 71d2544d8..580c123a0 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-send.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-send.ts @@ -1,10 +1,9 @@ import { EventEmitter, OnInit } from '@angular/core' import { LoadingBarService } from '@ngx-loading-bar/core' -import { NotificationsService } from 'angular2-notifications' +import { AuthService, Notifier, ServerService } from '@app/core' import { catchError, switchMap, tap } from 'rxjs/operators' import { FormReactive } from '@app/shared' import { VideoConstant, VideoPrivacy } from '../../../../../../shared' -import { AuthService, ServerService } from '@app/core' import { VideoService } from '@app/shared/video/video.service' import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model' import { VideoCaptionService } from '@app/shared/video-caption' @@ -25,7 +24,7 @@ export abstract class VideoSend extends FormReactive implements OnInit { protected abstract readonly DEFAULT_VIDEO_PRIVACY: VideoPrivacy protected loadingBar: LoadingBarService - protected notificationsService: NotificationsService + protected notifier: Notifier protected authService: AuthService protected serverService: ServerService protected videoService: VideoService 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 a09f54dfc..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,12 +1,12 @@
-
-
+
+
Select the file to upload
- (.mp4, .webm, .ogv) + ({{ videoExtensions }})
@@ -42,11 +42,16 @@ {{ error }}
+
+ Congratulations! Your video is now available in your private library. +
+
@@ -56,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 cf1725ef9..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 { @@ -54,9 +16,7 @@ /deep/ .ui-progressbar { font-size: 15px !important; - color: #fff !important; height: 30px !important; - line-height: 30px !important; border-radius: 3px !important; background-color: rgba(11, 204, 41, 0.16) !important; @@ -68,6 +28,8 @@ text-align: left; padding-left: 18px; margin-top: 0 !important; + color: #fff !important; + line-height: 30px !important; } } 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 3fcb71ac3..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 @@ -2,11 +2,10 @@ import { HttpEventType, HttpResponse } from '@angular/common/http' import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core' import { Router } from '@angular/router' import { LoadingBarService } from '@ngx-loading-bar/core' -import { NotificationsService } from 'angular2-notifications' import { BytesPipe } from 'ngx-pipes' import { Subscription } from 'rxjs' import { VideoPrivacy } from '../../../../../../shared/models/videos' -import { AuthService, ServerService } from '../../../core' +import { AuthService, Notifier, ServerService } from '../../../core' import { VideoEdit } from '../../../shared/video/video-edit.model' import { VideoService } from '../../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' @@ -21,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 { @@ -44,6 +44,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy id: 0, uuid: '' } + waitTranscodingEnabled = true error: string @@ -52,7 +53,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy constructor ( protected formValidatorService: FormValidatorService, protected loadingBar: LoadingBarService, - protected notificationsService: NotificationsService, + protected notifier: Notifier, protected authService: AuthService, protected serverService: ServerService, protected videoService: VideoService, @@ -109,7 +110,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy this.isUploadingVideo = false this.videoUploadPercents = 0 this.videoUploadObservable = null - this.notificationsService.info(this.i18n('Info'), this.i18n('Upload cancelled')) + this.notifier.info(this.i18n('Upload cancelled')) } } @@ -117,12 +118,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy const videofile = this.videofileInput.nativeElement.files[0] if (!videofile) return - // Cannot upload videos > 8GB for now - if (videofile.size > 8 * 1024 * 1024 * 1024) { - this.notificationsService.error(this.i18n('Error'), this.i18n('We are sorry but PeerTube cannot handle videos > 8GB')) - return - } - + // Check global user quota const bytePipes = new BytesPipe() const videoQuota = this.authService.getUser().videoQuota if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) { @@ -134,10 +130,11 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy videoQuota: bytePipes.transform(videoQuota, 0) } ) - this.notificationsService.error(this.i18n('Error'), msg) + this.notifier.error(msg) return } + // Check daily user quota const videoQuotaDaily = this.authService.getUser().videoQuotaDaily if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) { const msg = this.i18n( @@ -148,10 +145,11 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy quotaDaily: bytePipes.transform(videoQuotaDaily, 0) } ) - this.notificationsService.error(this.i18n('Error'), msg) + this.notifier.error(msg) return } + // Build name field const nameWithoutExtension = videofile.name.replace(/\.[^/.]+$/, '') let name: string @@ -159,6 +157,11 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy if (nameWithoutExtension.length < 3) name = videofile.name else name = nameWithoutExtension + // Force user to wait transcoding for unsupported video types in web browsers + if (!videofile.name.endsWith('.mp4') && !videofile.name.endsWith('.webm') && !videofile.name.endsWith('.ogv')) { + this.waitTranscodingEnabled = false + } + const privacy = this.firstStepPrivacyId.toString() const nsfw = false const waitTranscoding = true @@ -206,7 +209,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy this.videoUploadPercents = 0 this.videoUploadObservable = null this.firstStepError.emit() - this.notificationsService.error(this.i18n('Error'), err.message) + this.notifier.error(err.message) } ) } @@ -235,7 +238,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy this.isUpdatingVideo = false this.isUploadingVideo = false - this.notificationsService.success(this.i18n('Success'), this.i18n('Video published.')) + this.notifier.success(this.i18n('Video published.')) this.router.navigate([ '/videos/watch', video.uuid ]) }, diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts index 57a9d0ca7..01fdfcb66 100644 --- a/client/src/app/videos/+video-edit/video-add.component.ts +++ b/client/src/app/videos/+video-edit/video-add.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core' +import { Component, HostListener, ViewChild } from '@angular/core' import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service' import { VideoImportUrlComponent } from '@app/videos/+video-edit/video-add-components/video-import-url.component' import { VideoUploadComponent } from '@app/videos/+video-edit/video-add-components/video-upload.component' @@ -32,7 +32,17 @@ export class VideoAddComponent implements CanComponentDeactivate { this.secondStepType = undefined } - canDeactivate () { + @HostListener('window:beforeunload', [ '$event' ]) + onUnload (event: any) { + const { text, canDeactivate } = this.canDeactivate() + + if (canDeactivate) return + + event.returnValue = text + return text + } + + canDeactivate (): { canDeactivate: boolean, text?: string} { if (this.secondStepType === 'upload') return this.videoUpload.canDeactivate() if (this.secondStepType === 'import-url') return this.videoImportUrl.canDeactivate() if (this.secondStepType === 'import-torrent') return this.videoImportTorrent.canDeactivate() 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 9242c30a0..4992bb369 100644 --- a/client/src/app/videos/+video-edit/video-update.component.html +++ b/client/src/app/videos/+video-edit/video-update.component.html @@ -8,12 +8,12 @@
- +
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts index 3a0f3a39a..9e849014e 100644 --- a/client/src/app/videos/+video-edit/video-update.component.ts +++ b/client/src/app/videos/+video-edit/video-update.component.ts @@ -1,8 +1,8 @@ import { map, switchMap } from 'rxjs/operators' -import { Component, OnInit } from '@angular/core' +import { Component, HostListener, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { LoadingBarService } from '@ngx-loading-bar/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { VideoConstant, VideoPrivacy } from '../../../../../shared/models/videos' import { ServerService } from '../../core' import { FormReactive } from '../../shared' @@ -12,6 +12,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { VideoCaptionService } from '@app/shared/video-caption' import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model' +import { VideoDetails } from '@app/shared/video/video-details.model' @Component({ selector: 'my-videos-update', @@ -26,6 +27,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { userVideoChannels: { id: number, label: string, support: string }[] = [] schedulePublicationPossible = false videoCaptions: VideoCaptionEdit[] = [] + waitTranscodingEnabled = true private updateDone = false @@ -33,7 +35,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { protected formValidatorService: FormValidatorService, private route: ActivatedRoute, private router: Router, - private notificationsService: NotificationsService, + private notifier: Notifier, private serverService: ServerService, private videoService: VideoService, private loadingBar: LoadingBarService, @@ -65,25 +67,42 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { this.videoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies) + const videoFiles = (video as VideoDetails).files + if (videoFiles.length > 1) { // Already transcoded + this.waitTranscodingEnabled = false + } + // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout setTimeout(() => this.hydrateFormFromVideo()) }, err => { console.error(err) - this.notificationsService.error(this.i18n('Error'), err.message) + this.notifier.error(err.message) } ) } - canDeactivate () { + @HostListener('window:beforeunload', [ '$event' ]) + onUnload (event: any) { + const { text, canDeactivate } = this.canDeactivate() + + if (canDeactivate) return + + event.returnValue = text + return text + } + + canDeactivate (): { canDeactivate: boolean, text?: string } { if (this.updateDone === true) return { canDeactivate: true } + const text = this.i18n('You have unsaved changes! If you leave, your changes will be lost.') + for (const caption of this.videoCaptions) { - if (caption.action) return { canDeactivate: false } + if (caption.action) return { canDeactivate: false, text } } - return { canDeactivate: this.formChanged === false } + return { canDeactivate: this.formChanged === false, text } } checkForm () { @@ -114,14 +133,14 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { this.updateDone = true this.isUpdatingVideo = false this.loadingBar.complete() - this.notificationsService.success(this.i18n('Success'), this.i18n('Video updated.')) + this.notifier.success(this.i18n('Video updated.')) this.router.navigate([ '/videos/watch', this.video.uuid ]) }, err => { this.loadingBar.complete() this.isUpdatingVideo = false - this.notificationsService.error(this.i18n('Error'), err.message) + this.notifier.error(err.message) console.error(err) } ) diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts index 6db0eb55d..fd85c28f2 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts @@ -1,6 +1,6 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' import { Router } from '@angular/router' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { Observable } from 'rxjs' import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model' import { FormReactive } from '../../../shared' @@ -36,7 +36,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { constructor ( protected formValidatorService: FormValidatorService, private videoCommentValidatorsService: VideoCommentValidatorsService, - private notificationsService: NotificationsService, + private notifier: Notifier, private videoCommentService: VideoCommentService, private authService: AuthService, private modalService: NgbModal, @@ -70,7 +70,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { } onValidKey () { - this.onValueChanged() + this.check() if (!this.form.valid) return this.formValidated() @@ -115,7 +115,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { err => { this.addingComment = false - this.notificationsService.error(this.i18n('Error'), err.text) + this.notifier.error(err.text) } ) } @@ -135,7 +135,6 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { gotoLogin () { this.hideVisitorModal() - this.authService.redirectUrl = this.router.url this.router.navigate([ '/login' ]) } 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/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/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts index 8850eccd8..2616820d2 100644 --- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts @@ -1,11 +1,10 @@ -import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, ElementRef } from '@angular/core' +import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core' import { ActivatedRoute } from '@angular/router' -import { ConfirmService } from '@app/core' -import { NotificationsService } from 'angular2-notifications' +import { ConfirmService, Notifier } from '@app/core' import { Subscription } from 'rxjs' import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' import { AuthService } from '../../../core/auth' -import { ComponentPagination } from '../../../shared/rest/component-pagination.model' +import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model' import { User } from '../../../shared/users' import { VideoSortField } from '../../../shared/video/sort-field.type' import { VideoDetails } from '../../../shared/video/video-details.model' @@ -42,7 +41,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { constructor ( private authService: AuthService, - private notificationsService: NotificationsService, + private notifier: Notifier, private confirmService: ConfirmService, private videoCommentService: VideoCommentService, private activatedRoute: ActivatedRoute, @@ -84,15 +83,11 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { this.highlightedThread = new VideoComment(res.comment) // Scroll to the highlighted thread - setTimeout(() => { - // -60 because of the fixed header - const scrollY = this.commentHighlightBlock.nativeElement.offsetTop - 60 - window.scroll(0, scrollY) - }, 500) + setTimeout(() => this.commentHighlightBlock.nativeElement.scrollIntoView(), 0) } }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -104,7 +99,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { this.componentPagination.totalItems = res.totalComments }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -155,7 +150,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { if (this.highlightedThread.id === commentToDelete.id) this.highlightedThread = undefined }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } @@ -166,22 +161,11 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { onNearOfBottom () { this.componentPagination.currentPage++ - if (this.hasMoreComments()) { + if (hasMoreItems(this.componentPagination)) { this.loadMoreComments() } } - private hasMoreComments () { - // No results - if (this.componentPagination.totalItems === 0) return false - - // Not loaded yet - if (!this.componentPagination.totalItems) return true - - const maxPage = this.componentPagination.totalItems / this.componentPagination.itemsPerPage - return maxPage > this.componentPagination.currentPage - } - private deleteLocalCommentThread (parentComment: VideoCommentThreadTree, commentToDelete: VideoComment) { for (const commentChild of parentComment.children) { if (commentChild.comment.id === commentToDelete.id) { 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..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

- +
@@ -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 2c123ebed..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 @@ -1,12 +1,11 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' +import { Notifier, RedirectService } from '@app/core' import { FormReactive, VideoBlacklistService, VideoBlacklistValidatorsService } from '../../../shared/index' import { VideoDetails } from '../../../shared/video/video-details.model' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' -import { RedirectService } from '@app/core' @Component({ selector: 'my-video-blacklist', @@ -27,7 +26,7 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit { private modalService: NgbModal, private videoBlacklistValidatorsService: VideoBlacklistValidatorsService, private videoBlacklistService: VideoBlacklistService, - private notificationsService: NotificationsService, + private notifier: Notifier, private redirectService: RedirectService, private i18n: I18n ) { @@ -35,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 () { @@ -51,16 +53,17 @@ 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.notificationsService.success(this.i18n('Success'), this.i18n('Video blacklisted.')) + this.notifier.success(this.i18n('Video blacklisted.')) this.hide() this.redirectService.redirectToHomepage() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } } 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-download.component.ts b/client/src/app/videos/+video-watch/modal/video-download.component.ts index b1b2c0623..834385771 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-download.component.ts @@ -2,7 +2,7 @@ import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core' import { VideoDetails } from '../../../shared/video/video-details.model' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { I18n } from '@ngx-translate/i18n-polyfill' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' @Component({ selector: 'my-video-download', @@ -18,7 +18,7 @@ export class VideoDownloadComponent implements OnInit { resolutionId: number | string = -1 constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private modalService: NgbModal, private i18n: I18n ) { } @@ -63,6 +63,6 @@ export class VideoDownloadComponent implements OnInit { } activateCopiedMessage () { - this.notificationsService.success(this.i18n('Success'), this.i18n('Copied')) + this.notifier.success(this.i18n('Copied')) } } 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 8d9a49276..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,11 +1,16 @@

Report video

- +
+
+ Your report will be sent to moderators of {{ currentHost }}. + It will be forwarded to origin instance {{ originHost }} too. +
+