fix deleted comment layout and its notification display

diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index 680129a48a5b10a1df4e23ad661dbf8493a82213..ff830ac1c310cd221fcc5247df7ca6b00488ebd9 100644 (file)
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -65,6 +65,13 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
 
   markAllAsRead () {
     this.userNotificationService.markAllAsRead()
+        .subscribe(
+          () => {
+            this.unreadNotifications = 0
+          },
+
+          err => this.notifier.error(err.message)
+        )
   }
 
   private async subscribeToNotifications () {

diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
index c3f4bf429c740bd59095d200becbd87fd1001abc..ba29cb46271dfeb4c31d5f5c02fa08215e1595bc 100644 (file)
--- a/client/src/app/shared/users/user-notification.model.ts
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -102,6 +102,7 @@ export class UserNotification implements UserNotificationServer {
 
         case UserNotificationType.NEW_COMMENT_ON_MY_VIDEO:
         case UserNotificationType.COMMENT_MENTION:
+          if (!this.comment) break
           this.accountUrl = this.buildAccountUrl(this.comment.account)
           this.commentUrl = [ this.buildVideoUrl(this.comment.video), { threadId: this.comment.threadId } ]
           break

diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index 9f0ae4337a7dbc2688251aad282a4734e1024a5b..108122b57ddf8ab4afefa2987ed082176d27862b 100644 (file)
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -5,11 +5,25 @@
 
     <ng-container [ngSwitch]="notification.type">
       <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
-        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" />
-
-        <div class="message" i18n>
-          {{ notification.video.channel.displayName }} published a new video: <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a>
-        </div>
+        <ng-container *ngIf="notification.video; then hasVideo; else noVideo"></ng-container>
+
+        <ng-template #hasVideo>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
+            <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" />
+          </a>
+
+          <div class="message" i18n>
+            {{ notification.video.channel.displayName }} published a new video: <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a>
+          </div>
+        </ng-template>
+
+        <ng-template #noVideo>
+          <my-global-icon iconName="alert"></my-global-icon>
+  
+          <div class="message" i18n>
+            The notification concerns a video now unavailable
+          </div>
+        </ng-template>
       </ng-container>
 
       <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
@@ -45,11 +59,25 @@
       </ng-container>
 
       <ng-container *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
-        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
-
-        <div class="message" i18n>
-          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
-        </div>
+        <ng-container *ngIf="notification.comment; then hasComment; else noComment"></ng-container>
+
+        <ng-template #hasComment>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
+            <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+          </a>
+  
+          <div class="message" i18n>
+            <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
+          </div>
+        </ng-template>
+
+        <ng-template #noComment>
+          <my-global-icon iconName="alert"></my-global-icon>
+  
+          <div class="message" i18n>
+            The notification concerns a comment now unavailable
+          </div>
+        </ng-template>
       </ng-container>
 
       <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
@@ -80,12 +108,14 @@
         <my-global-icon iconName="user-add"></my-global-icon>
 
         <div class="message" i18n>
-          User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
+          User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }}</a> registered on your instance
         </div>
       </ng-container>
 
       <ng-container *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
-        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
+        <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
+          <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
+        </a>
 
         <div class="message" i18n>
           <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
@@ -96,7 +126,9 @@
       </ng-container>
 
       <ng-container *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
-        <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+        <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
+          <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
+        </a>
 
         <div class="message" i18n>
           <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
@@ -119,8 +151,16 @@
           Your instance automatically followed <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">{{ notification.actorFollow.following.host }}</a>
         </div>
       </ng-container>
+
+      <ng-container *ngSwitchDefault>
+        <my-global-icon iconName="alert"></my-global-icon>
+
+        <div class="message" i18n>
+          The notification points to a content now unavailable
+        </div>
+      </ng-container>
     </ng-container>
 
-    <div class="from-date">{{ notification.createdAt | myFromNow }}</div>
+    <div [title]="notification.createdAt" class="from-date">{{ notification.createdAt | myFromNow }}</div>
   </div>
 </div>

diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 0c6c70d983dc9a1e3fb7dd93501d67e71e3dddee..59e1bcc263d3bd49859c03f37fdaca1171bd5ae9 100644 (file)
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -48,5 +48,6 @@
     padding-left: 5px;
     min-width: 70px;
     text-align: right;
+    margin-left: auto;
   }
 }

diff --git a/client/src/app/shared/video/feed.component.html b/client/src/app/shared/video/feed.component.html
index f7624ec010e854eb0851253ce36bd18fedddb688..ac0b1f454aaaf16eb0dca18c7454567b363eb440 100644 (file)
--- a/client/src/app/shared/video/feed.component.html
+++ b/client/src/app/shared/video/feed.component.html
@@ -1,4 +1,8 @@
-<div class="video-feed">
+<div class="video-feed"
+  [ngbTooltip]="'Feeds available'"
+  placement="right auto"
+  container="body"
+>
   <my-global-icon
     *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom"
     class="icon-syndication" role="button" iconName="syndication"

diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
index ed1dc17d348701c157043e4d09a071330793cb19..f39e409a32aeeccd94a712c26cb1537ff26d4c4e 100644 (file)
--- a/client/src/app/shared/video/feed.component.scss
+++ b/client/src/app/shared/video/feed.component.scss
@@ -2,6 +2,8 @@
 @import '_mixins';
 
 .video-feed {
+  width: min-content;
+
   a {
     color: black;
     display: block;

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 d8fd5c5de9eeb0a6e37c4c8457fef7861a5100d6..c70914f9b6f3896dbbb6221a84451af9730ff9b7 100644 (file)
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -15,7 +15,7 @@
       width: 2px;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.05);
-      margin: 10px 0;
+      margin: 10px calc(1rem + 1px);
     }
   }
 
@@ -106,6 +106,7 @@
 
       &.comment-html-deleted {
         color: $grey-foreground-color;
+        margin-bottom: 1rem;
       }
     }