Refactor views component

9 files changed, 50 insertions, 11 deletions

diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 602214ac5..9cabe3bbc 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -53,12 +53,8 @@
 
             <div class="video-info-date-views">
               <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
-
-              <span i18n [title]="video.getExactNumberOfViews()" class="views">
-                • {{ video.views | myNumberFormatter }}
-                <ng-container *ngIf="!video.isLive">views</ng-container>
-                <ng-container *ngIf="video.isLive">viewers</ng-container>
-              </span>
+              •
+              <my-video-views-counter [video]="video"></my-video-views-counter>
             </div>
           </div>
 
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index 21aa33b84..fbda9b9c4 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -5,6 +5,7 @@ import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedModerationModule } from '@app/shared/shared-moderation'
 import { SharedShareModal } from '@app/shared/shared-share-modal'
 import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
+import { SharedVideoModule } from '@app/shared/shared-video'
 import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
 import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
 import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist'
@@ -32,7 +33,8 @@ import { VideoWatchComponent } from './video-watch.component'
     SharedModerationModule,
     SharedGlobalIconModule,
     SharedVideoCommentModule,
-    SharedShareModal
+    SharedShareModal,
+    SharedVideoModule
   ],
 
   declarations: [
diff --git a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
index 08c8da3dd..3035bcfb3 100644
--- a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
+++ b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
@@ -4,6 +4,7 @@ import { SharedFormModule } from '../shared-forms'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { SharedModerationModule } from '../shared-moderation'
+import { SharedVideoModule } from '../shared-video'
 import { SharedThumbnailModule } from '../shared-thumbnail'
 import { SharedVideoLiveModule } from '../shared-video-live'
 import { SharedVideoPlaylistModule } from '../shared-video-playlist/shared-video-playlist.module'
@@ -20,7 +21,8 @@ import { VideosSelectionComponent } from './videos-selection.component'
     SharedVideoPlaylistModule,
     SharedThumbnailModule,
     SharedGlobalIconModule,
-    SharedVideoLiveModule
+    SharedVideoLiveModule,
+    SharedVideoModule
   ],
 
   declarations: [
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 395a4df97..7a6df7b64 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -28,9 +28,8 @@
 
             <span class="views" [title]="video.getExactNumberOfViews()">
               <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
-              <ng-container i18n *ngIf="displayOptions.views">
-                {video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}
-              </ng-container>
+
+              <my-video-views-counter *ngIf="displayOptions.views" [video]="video"></my-video-views-counter>
             </span>
           </span>
 
diff --git a/client/src/app/shared/shared-video/index.ts b/client/src/app/shared/shared-video/index.ts
new file mode 100644
index 000000000..33a8b560f
--- /dev/null
+++ b/client/src/app/shared/shared-video/index.ts
@@ -0,0 +1 @@
+export * from './shared-video.module'
diff --git a/client/src/app/shared/shared-video/shared-video.module.ts b/client/src/app/shared/shared-video/shared-video.module.ts
new file mode 100644
index 000000000..dfac4e357
--- /dev/null
+++ b/client/src/app/shared/shared-video/shared-video.module.ts
@@ -0,0 +1,19 @@
+
+import { NgModule } from '@angular/core'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { VideoViewsCounterComponent } from './video-views-counter.component'
+
+@NgModule({
+  imports: [
+    SharedMainModule
+  ],
+
+  declarations: [
+    VideoViewsCounterComponent
+  ],
+
+  exports: [
+    VideoViewsCounterComponent
+  ]
+})
+export class SharedVideoModule { }
diff --git a/client/src/app/shared/shared-video/video-views-counter.component.html b/client/src/app/shared/shared-video/video-views-counter.component.html
new file mode 100644
index 000000000..a6679f74d
--- /dev/null
+++ b/client/src/app/shared/shared-video/video-views-counter.component.html
@@ -0,0 +1,9 @@
+<span [title]="video.getExactNumberOfViews()">
+  <ng-container i18n *ngIf="!video.isLive">
+    {video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}
+  </ng-container>
+
+  <ng-container i18n *ngIf="video.isLive">
+    {video.views, plural, =1 {1 viewer} other {{{ video.views | myNumberFormatter }} viewers}}
+  </ng-container>
+</span>
diff --git a/client/src/app/shared/shared-video/video-views-counter.component.scss b/client/src/app/shared/shared-video/video-views-counter.component.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/shared/shared-video/video-views-counter.component.scss
diff --git a/client/src/app/shared/shared-video/video-views-counter.component.ts b/client/src/app/shared/shared-video/video-views-counter.component.ts
new file mode 100644
index 000000000..17e6e37b9
--- /dev/null
+++ b/client/src/app/shared/shared-video/video-views-counter.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { Video } from '../shared-main'
+
+@Component({
+  selector: 'my-video-views-counter',
+  styleUrls: [ './video-views-counter.component.scss' ],
+  templateUrl: './video-views-counter.component.html'
+})
+export class VideoViewsCounterComponent {
+  @Input() video: Video
+}