Refactor views component

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">
+              <my-video-views-counter [video]="video"></my-video-views-counter>
-                • {{ video.views | myNumberFormatter }}
-                <ng-container *ngIf="!video.isLive">views</ng-container>
-                <ng-container *ngIf="video.isLive">viewers</ng-container>
-              </span>
             </div>
           </div>
 

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: [

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: [

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}}
+              <my-video-views-counter *ngIf="displayOptions.views" [video]="video"></my-video-views-counter>
-              </ng-container>
             </span>
           </span>
 

client/src/app/shared/shared-video/index.ts

@@ -0,0 +1 @@
+export * from './shared-video.module'

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 { }

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>

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
+}

server/tests/api/live/live.ts

@@ -42,8 +42,7 @@ import {
   waitJobs,
   waitUntilLiveEnded,
   waitUntilLivePublished,
-  waitUntilLiveSegmentGeneration,
+  waitUntilLiveSegmentGeneration
-  waitUntilLog
 } from '../../../../shared/extra-utils'
 
 const expect = chai.expect
@@ -329,7 +328,7 @@ describe('Test live', function () {
         await checkResolutionsInMasterPlaylist(hlsPlaylist.playlistUrl, resolutions)
 
         for (let i = 0; i < resolutions.length; i++) {
-          const segmentNum = 1
+          const segmentNum = 2
           const segmentName = `${i}-00000${segmentNum}.ts`
           await waitUntilLiveSegmentGeneration(servers[0], video.uuid, i, segmentNum)