From 2d3741d6d92e9bd1f41694c7442a6d1da434e1f2 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 30 Aug 2018 14:58:00 +0200
Subject: Videos overview page: first version

---
 .../video-list/video-overview.component.html       | 35 ++++++++++++++
 .../video-list/video-overview.component.scss       | 22 +++++++++
 .../videos/video-list/video-overview.component.ts  | 56 ++++++++++++++++++++++
 3 files changed, 113 insertions(+)
 create mode 100644 client/src/app/videos/video-list/video-overview.component.html
 create mode 100644 client/src/app/videos/video-list/video-overview.component.scss
 create mode 100644 client/src/app/videos/video-list/video-overview.component.ts

(limited to 'client/src/app/videos/video-list')

diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
new file mode 100644
index 000000000..9282dd59c
--- /dev/null
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -0,0 +1,35 @@
+<div class="margin-content">
+
+  <div class="no-results" i18n *ngIf="notResults">No results.</div>
+
+  <div class="section" *ngFor="let object of overview.categories">
+    <div class="section-title" i18n>
+      <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">Category {{ object.category.label }}</a>
+    </div>
+
+    <div>
+      <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
+    </div>
+  </div>
+
+  <div class="section" *ngFor="let object of overview.tags">
+    <div class="section-title" i18n>
+      <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">Tag {{ object.tag }}</a>
+    </div>
+
+    <div>
+      <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
+    </div>
+  </div>
+
+  <div class="section" *ngFor="let object of overview.channels">
+    <div class="section-title" i18n>
+      <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">Channel {{ object.channel.displayName }}</a>
+    </div>
+
+    <div>
+      <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
+    </div>
+  </div>
+
+</div>
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
new file mode 100644
index 000000000..8d66cf80a
--- /dev/null
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -0,0 +1,22 @@
+@import '_variables';
+@import '_mixins';
+
+.section {
+  padding-top: 10px;
+
+  &:first-child {
+    padding-top: 30px;
+  }
+}
+
+.section-title {
+  font-size: 17px;
+  font-weight: $font-semibold;
+  margin-bottom: 20px;
+
+  a {
+    @include disable-default-a-behaviour;
+
+    color: #000;
+  }
+}
\ No newline at end of file
diff --git a/client/src/app/videos/video-list/video-overview.component.ts b/client/src/app/videos/video-list/video-overview.component.ts
new file mode 100644
index 000000000..c758e115c
--- /dev/null
+++ b/client/src/app/videos/video-list/video-overview.component.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core'
+import { AuthService } from '@app/core'
+import { NotificationsService } from 'angular2-notifications'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideosOverview } from '@app/shared/overview/videos-overview.model'
+import { OverviewService } from '@app/shared/overview'
+import { Video } from '@app/shared/video/video.model'
+
+@Component({
+  selector: 'my-video-overview',
+  templateUrl: './video-overview.component.html',
+  styleUrls: [ './video-overview.component.scss' ]
+})
+export class VideoOverviewComponent implements OnInit {
+  overview: VideosOverview = {
+    categories: [],
+    channels: [],
+    tags: []
+  }
+  notResults = false
+
+  constructor (
+    private i18n: I18n,
+    private notificationsService: NotificationsService,
+    private authService: AuthService,
+    private overviewService: OverviewService
+  ) { }
+
+  get user () {
+    return this.authService.getUser()
+  }
+
+  ngOnInit () {
+    this.overviewService.getVideosOverview()
+        .subscribe(
+          overview => {
+            this.overview = overview
+
+            if (
+              this.overview.categories.length === 0 &&
+              this.overview.channels.length === 0 &&
+              this.overview.tags.length === 0
+            ) this.notResults = true
+          },
+
+          err => {
+            console.log(err)
+            this.notificationsService.error('Error', err.text)
+          }
+        )
+  }
+
+  buildVideoChannelBy (object: { videos: Video[] }) {
+    return object.videos[0].byVideoChannel
+  }
+}
-- 
cgit v1.2.3