WIP : Indicate to users how "trending" works (#1458)

* Get the INTERVAL_DAYS const in the video-trending component

* Change Trending section title

* Add a tooltip to explain how trending section works

* Minor CSS fix for the my-feed popover next to the titlepage

diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index f33e6f20ce9648ce0d771ff08fbc5804c9e722cd..4ae72427b9ecf8c7b727ad38c12cdd55e00a1171 100644 (file)
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -87,6 +87,11 @@ export class ServerService {
           enabled: false
         }
       }
+    },
+    trending: {
+      videos: {
+        intervalDays: 0
+      }
     }
   }
   private videoCategories: Array<VideoConstant<number>> = []

diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 29492351b0f620df88cd10b477e7a0ee11ca49e9..1f97bc38937600de09db188725eb50914b7f3412 100644 (file)
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -1,8 +1,11 @@
 <div [ngClass]="{ 'margin-content': marginContent }">
   <div class="videos-header">
     <div *ngIf="titlePage" class="title-page title-page-single">
-      {{ titlePage }}
+      <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
+        {{ titlePage }}
+      </div>
     </div>
+
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
 
     <div class="moderation-block" *ngIf="displayModerationBlock">

diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 9fb3fd4d65abba4f4c0da4cc3c119b725d7f8751..292ede698eb2c056932ef556eebfed856dd2a9fb 100644 (file)
--- 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 d234c8bfa3efe1df5cb012f78b37c0ffc0f1ee88..d74384293c0219112600a24e844cecc42fb829ef 100644 (file)
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -39,6 +39,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   ownerDisplayType: OwnerDisplayType = 'account'
   firstLoadedPage: number
   displayModerationBlock = false
+  trendingDays: number
+  titleTooltip: string
 
   protected baseVideoWidth = 215
   protected baseVideoHeight = 205

diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
index accc5bfe5ff35c3631ce3a508ed722ef380b8e87..d3c0f5316495d385f620c7a5da81a6107f4ad64d 100644 (file)
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -8,7 +8,7 @@ import { VideoSortField } from '../../shared/video/sort-field.type'
 import { VideoService } from '../../shared/video/video.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 
 @Component({
   selector: 'my-videos-trending',
@@ -19,6 +19,7 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
   titlePage: string
   currentRoute = '/videos/trending'
   defaultSort: VideoSortField = '-trending'
+  trendingDays: number
 
   constructor (
     protected router: Router,
@@ -27,12 +28,19 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
     protected authService: AuthService,
     protected location: Location,
     protected screenService: ScreenService,
+    private serverService: ServerService,
     protected i18n: I18n,
     private videoService: VideoService
   ) {
     super()
 
-    this.titlePage = i18n('Trending')
+    this.trendingDays = this.serverService.getConfig().trending.videos.intervalDays
+
+    this.titlePage = this.i18n('Trending for the last ')
+    this.trendingDays === 1 ? this.titlePage += '24 hours' : this.titlePage += this.trendingDays + ' days'
+
+    this.titleTooltip = this.i18n('trending videos are those totalizing the greatest number of views during the last ')
+    this.trendingDays === 1 ? this.titleTooltip += '24 hours.' : this.titleTooltip += this.trendingDays + ' days.'
   }
 
   ngOnInit () {

diff --git a/server/controllers/api/config.ts b/server/controllers/api/config.ts
index dd06a0597da6ae63b2ded487ef3686b91457da89..255026f46f371467c99f93ff5f8368f843978f5a 100644 (file)
--- a/server/controllers/api/config.ts
+++ b/server/controllers/api/config.ts
@@ -120,6 +120,11 @@ async function getConfig (req: express.Request, res: express.Response) {
     user: {
       videoQuota: CONFIG.USER.VIDEO_QUOTA,
       videoQuotaDaily: CONFIG.USER.VIDEO_QUOTA_DAILY
+    },
+    trending: {
+      videos: {
+        intervalDays: CONFIG.TRENDING.VIDEOS.INTERVAL_DAYS
+      }
     }
   }
 

diff --git a/shared/models/server/server-config.model.ts b/shared/models/server/server-config.model.ts
index 7031009d9637834284e734204e707bd632562d21..f4245ed4db308f44351e0d4f647ccaeb67f51b00 100644 (file)
--- a/shared/models/server/server-config.model.ts
+++ b/shared/models/server/server-config.model.ts
@@ -78,4 +78,10 @@ export interface ServerConfig {
     videoQuota: number
     videoQuotaDaily: number
   }
+
+  trending: {
+    videos: {
+      intervalDays: number
+    }
+  }
 }