From 5bcbcbe338ef5a1ed14f084311d013fbb25dabcf Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Fri, 22 Jan 2021 00:12:44 +0100
Subject: modularize abstract video list header and implement video hotness
 recommendation variant

---
 .../trending/video-trending-header.component.ts    | 59 ++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 client/src/app/+videos/video-list/trending/video-trending-header.component.ts

(limited to 'client/src/app/+videos/video-list/trending/video-trending-header.component.ts')

diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.ts b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts
new file mode 100644
index 000000000..125f14e33
--- /dev/null
+++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts
@@ -0,0 +1,59 @@
+import { Component, Inject } from '@angular/core'
+import { Router } from '@angular/router'
+import { VideoListHeaderComponent } from '@app/shared/shared-video-miniature'
+import { GlobalIconName } from '@app/shared/shared-icons'
+import { VideoSortField } from '@shared/models'
+
+interface VideoTrendingHeaderItem {
+  label: string
+  iconName: GlobalIconName
+  value: VideoSortField
+  path: string
+  tooltip?: string
+}
+
+@Component({
+  selector: 'video-trending-title-page',
+  host: { 'class': 'title-page title-page-single' },
+  styleUrls: [ './video-trending-header.component.scss' ],
+  templateUrl: './video-trending-header.component.html'
+})
+export class VideoTrendingHeaderComponent extends VideoListHeaderComponent {
+  buttons: VideoTrendingHeaderItem[]
+
+  constructor (
+    @Inject('data') public data: any,
+    private router: Router
+  ) {
+    super(data)
+
+    this.buttons = [
+      {
+        label: $localize`:A variant of Trending videos based on the number of recent interactions:Hot`,
+        iconName: 'flame',
+        value: '-hot',
+        path: 'hot',
+        tooltip: $localize`Videos totalizing the most interactions for recent videos`,
+      },
+      {
+        label: $localize`:Main variant of Trending videos based on number of recent views:Views`,
+        iconName: 'trending',
+        value: '-trending',
+        path: 'trending',
+        tooltip: $localize`Videos totalizing the most views during the last 24 hours`,
+      },
+      {
+        label: $localize`:a variant of Trending videos based on the number of likes:Likes`,
+        iconName: 'like',
+        value: '-likes',
+        path: 'most-liked',
+        tooltip: $localize`Videos that have the most likes`
+      }
+    ]
+  }
+
+  setSort () {
+    const path = this.buttons.find(b => b.value === this.data.model).path
+    this.router.navigate([ `/videos/${path}` ])
+  }
+}
-- 
cgit v1.2.3