Client: better notifications for a beautiful world

5 files changed, 29 insertions, 12 deletions

diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts
index 1e700ae48..cd6bb9989 100644
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
+import { NotificationsService } from 'angular2-notifications';
 
 import { AuthService } from '../../core';
 import { FormReactive, VIDEO_NAME, VIDEO_DESCRIPTION, VIDEO_TAGS } from '../../shared';
@@ -38,7 +39,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     private authService: AuthService,
     private elementRef: ElementRef,
     private formBuilder: FormBuilder,
-    private router: Router
+    private router: Router,
+    private notificationsService: NotificationsService
   ) {
     super();
   }
@@ -151,6 +153,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       clearInterval(interval);
 
       console.log('Video uploaded.');
+      this.notificationsService.success('Success', 'Video uploaded.');
+
 
       // Print all the videos once it's finished
       this.router.navigate(['/videos/list']);
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index 6c42ba5be..b3780f8b6 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -2,6 +2,8 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
+import { NotificationsService } from 'angular2-notifications';
+
 import {
   SortField,
   Video,
@@ -33,6 +35,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
   private subSearch: any;
 
   constructor(
+    private notificationsService: NotificationsService,
     private authService: AuthService,
     private changeDetector: ChangeDetectorRef,
     private router: Router,
@@ -91,7 +94,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
 
         this.loading.next(false);
       },
-      error => alert(error.text)
+      error => this.notificationsService.error('Error', error.text)
     );
   }
 
@@ -107,6 +110,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
   }
 
   onRemoved(video: Video) {
+    this.notificationsService.success('Success', `Video ${video.name} deleted.`);
     this.getVideos();
   }
 
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
index 398d2db75..ca4afc451 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/video-miniature.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
+import { NotificationsService } from 'angular2-notifications';
+
 import { SortField, Video, VideoService } from '../shared';
 import { User } from '../../shared';
 
@@ -18,7 +20,10 @@ export class VideoMiniatureComponent {
 
   hovering = false;
 
-  constructor(private videoService: VideoService) {}
+  constructor(
+    private notificationsService: NotificationsService,
+    private videoService: VideoService
+  ) {}
 
   displayRemoveIcon() {
     return this.hovering && this.video.isRemovableBy(this.user);
@@ -36,7 +41,8 @@ export class VideoMiniatureComponent {
     if (confirm('Do you really want to remove this video?')) {
       this.videoService.removeVideo(id).subscribe(
         status => this.removed.emit(true),
-        error => alert(error.text)
+
+        error => this.notificationsService.error('Error', error.text)
       );
     }
   }
diff --git a/client/src/app/videos/video-watch/video-report.component.ts b/client/src/app/videos/video-watch/video-report.component.ts
index 7a125f53e..19a7af148 100644
--- a/client/src/app/videos/video-watch/video-report.component.ts
+++ b/client/src/app/videos/video-watch/video-report.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 import { ModalDirective } from 'ng2-bootstrap/modal';
+import { NotificationsService } from 'angular2-notifications';
 
 import { FormReactive, VideoAbuseService, VIDEO_ABUSE_REASON } from '../../shared';
 import { Video, VideoService } from '../shared';
@@ -26,7 +27,8 @@ export class VideoReportComponent extends FormReactive implements OnInit {
 
   constructor(
     private formBuilder: FormBuilder,
-    private videoAbuseService: VideoAbuseService
+    private videoAbuseService: VideoAbuseService,
+    private notificationsService: NotificationsService
    ) {
     super();
   }
@@ -56,13 +58,12 @@ export class VideoReportComponent extends FormReactive implements OnInit {
 
     this.videoAbuseService.reportVideo(this.video.id, reason)
                      .subscribe(
-                       // TODO: move alert to beautiful notifications
-                       ok => {
-                         alert('Video reported.');
+                       () => {
+                         this.notificationsService.success('Success', 'Video reported.');
                          this.hide();
                        },
 
-                       err => alert(err.text)
+                       err => this.notificationsService.error('Error', err.text);
                       )
   }
 }
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index 5cd7550be..c27133f74 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -1,8 +1,9 @@
 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { MetaService } from 'ng2-meta';
 import * as videojs from 'video.js';
+import { MetaService } from 'ng2-meta';
+import { NotificationsService } from 'angular2-notifications';
 
 import { AuthService } from '../../core';
 import { VideoMagnetComponent } from './video-magnet.component';
@@ -45,7 +46,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private videoService: VideoService,
     private metaService: MetaService,
     private webTorrentService: WebTorrentService,
-    private authService: AuthService
+    private authService: AuthService,
+    private notificationsService: NotificationsService
   ) {}
 
   ngOnInit() {
@@ -117,7 +119,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       console.log('Added ' + this.video.magnetUri + '.');
       torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => {
         if (err) {
-          alert('Cannot append the file.');
+          this.notificationsService.error('Error', 'Cannot append the file in the video element.');
           console.error(err);
         }
       });