From 202f6b6c9dcc9b0aec4b0c1b15e455c22a7952a7 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 1 Dec 2017 18:56:26 +0100 Subject: Begin videos of an account --- .../video-list/shared/abstract-video-list.html | 19 ---- .../video-list/shared/abstract-video-list.scss | 0 .../video-list/shared/abstract-video-list.ts | 121 --------------------- client/src/app/videos/video-list/shared/index.ts | 1 - .../shared/video-miniature.component.html | 11 +- .../shared/video-miniature.component.scss | 29 ----- .../video-list/shared/video-miniature.component.ts | 4 +- .../video-list/video-recently-added.component.ts | 8 +- .../videos/video-list/video-trending.component.ts | 8 +- 9 files changed, 11 insertions(+), 190 deletions(-) delete mode 100644 client/src/app/videos/video-list/shared/abstract-video-list.html delete mode 100644 client/src/app/videos/video-list/shared/abstract-video-list.scss delete mode 100644 client/src/app/videos/video-list/shared/abstract-video-list.ts (limited to 'client/src/app/videos/video-list') diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.html b/client/src/app/videos/video-list/shared/abstract-video-list.html deleted file mode 100644 index bd4f6b1f8..000000000 --- a/client/src/app/videos/video-list/shared/abstract-video-list.html +++ /dev/null @@ -1,19 +0,0 @@ -
-
- {{ titlePage }} -
- -
- - -
-
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.scss b/client/src/app/videos/video-list/shared/abstract-video-list.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.ts b/client/src/app/videos/video-list/shared/abstract-video-list.ts deleted file mode 100644 index a684ffef4..000000000 --- a/client/src/app/videos/video-list/shared/abstract-video-list.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { OnDestroy, OnInit } from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' - -import { NotificationsService } from 'angular2-notifications' -import { Observable } from 'rxjs/Observable' -import { Subscription } from 'rxjs/Subscription' - -import { SortField, Video, VideoPagination } from '../../shared' - -export abstract class AbstractVideoList implements OnInit, OnDestroy { - pagination: VideoPagination = { - currentPage: 1, - itemsPerPage: 25, - totalItems: null - } - sort: SortField = '-createdAt' - videos: Video[] = [] - - protected notificationsService: NotificationsService - protected router: Router - protected route: ActivatedRoute - protected subActivatedRoute: Subscription - - protected abstract currentRoute: string - - abstract titlePage: string - private loadedPages: { [ id: number ]: boolean } = {} - - abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}> - - ngOnInit () { - // Subscribe to route changes - const routeParams = this.route.snapshot.params - this.loadRouteParams(routeParams) - this.loadMoreVideos('after') - } - - ngOnDestroy () { - if (this.subActivatedRoute) { - this.subActivatedRoute.unsubscribe() - } - } - - onNearOfTop () { - if (this.pagination.currentPage > 1) { - this.previousPage() - } - } - - onNearOfBottom () { - if (this.hasMoreVideos()) { - this.nextPage() - } - } - - loadMoreVideos (where: 'before' | 'after') { - if (this.loadedPages[this.pagination.currentPage] === true) return - - const observable = this.getVideosObservable() - - observable.subscribe( - ({ videos, totalVideos }) => { - this.loadedPages[this.pagination.currentPage] = true - this.pagination.totalItems = totalVideos - - if (where === 'before') { - this.videos = videos.concat(this.videos) - } else { - this.videos = this.videos.concat(videos) - } - }, - error => this.notificationsService.error('Error', error.text) - ) - } - - protected hasMoreVideos () { - if (!this.pagination.totalItems) return true - - const maxPage = this.pagination.totalItems/this.pagination.itemsPerPage - return maxPage > this.pagination.currentPage - } - - protected previousPage () { - this.pagination.currentPage-- - - this.setNewRouteParams() - this.loadMoreVideos('before') - } - - protected nextPage () { - this.pagination.currentPage++ - - this.setNewRouteParams() - this.loadMoreVideos('after') - } - - protected buildRouteParams () { - // There is always a sort and a current page - const params = { - sort: this.sort, - page: this.pagination.currentPage - } - - return params - } - - protected loadRouteParams (routeParams: { [ key: string ]: any }) { - this.sort = routeParams['sort'] as SortField || '-createdAt' - - if (routeParams['page'] !== undefined) { - this.pagination.currentPage = parseInt(routeParams['page'], 10) - } else { - this.pagination.currentPage = 1 - } - } - - protected setNewRouteParams () { - const routeParams = this.buildRouteParams() - this.router.navigate([ this.currentRoute, routeParams ]) - } -} diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts index 170ca4832..2778f2d9e 100644 --- a/client/src/app/videos/video-list/shared/index.ts +++ b/client/src/app/videos/video-list/shared/index.ts @@ -1,2 +1 @@ -export * from './abstract-video-list' export * from './video-miniature.component' diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.html b/client/src/app/videos/video-list/shared/video-miniature.component.html index aea85b6c6..f2756ca3d 100644 --- a/client/src/app/videos/video-list/shared/video-miniature.component.html +++ b/client/src/app/videos/video-list/shared/video-miniature.component.html @@ -1,14 +1,5 @@
- - video thumbnail - -
- {{ video.durationLabel }} -
-
+
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss index ed15864d9..658d7af9d 100644 --- a/client/src/app/videos/video-list/shared/video-miniature.component.scss +++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss @@ -5,35 +5,6 @@ height: 175px; vertical-align: top; - .video-miniature-thumbnail { - display: inline-block; - position: relative; - border-radius: 4px; - overflow: hidden; - - &:hover { - text-decoration: none !important; - } - - img.blur-filter { - filter: blur(5px); - transform : scale(1.03); - } - - .video-miniature-thumbnail-overlay { - position: absolute; - right: 5px; - bottom: 5px; - display: inline-block; - background-color: rgba(0, 0, 0, 0.7); - color: #fff; - font-size: 12px; - font-weight: $font-bold; - border-radius: 3px; - padding: 0 5px; - } - } - .video-miniature-information { width: 200px; margin-top: 2px; diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.ts b/client/src/app/videos/video-list/shared/video-miniature.component.ts index e5a87907b..e8fc8e911 100644 --- a/client/src/app/videos/video-list/shared/video-miniature.component.ts +++ b/client/src/app/videos/video-list/shared/video-miniature.component.ts @@ -1,7 +1,7 @@ import { Component, Input } from '@angular/core' - -import { SortField, Video } from '../../shared' import { User } from '../../../shared' +import { SortField } from '../../../shared/video/sort-field.type' +import { Video } from '../../../shared/video/video.model' @Component({ selector: 'my-video-miniature', diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts index 9bf69bd78..d48804414 100644 --- a/client/src/app/videos/video-list/video-recently-added.component.ts +++ b/client/src/app/videos/video-list/video-recently-added.component.ts @@ -1,13 +1,13 @@ import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { NotificationsService } from 'angular2-notifications' -import { VideoService } from '../shared' -import { AbstractVideoList } from './shared' +import { VideoService } from '../../shared/video/video.service' +import { AbstractVideoList } from '../../shared/video/abstract-video-list' @Component({ selector: 'my-videos-recently-added', - styleUrls: [ './shared/abstract-video-list.scss' ], - templateUrl: './shared/abstract-video-list.html' + styleUrls: [ '../../shared/video/abstract-video-list.scss' ], + templateUrl: '../../shared/video/abstract-video-list.html' }) export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy { titlePage = 'Recently added' 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 a1df68711..9108289c9 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts @@ -1,13 +1,13 @@ import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { NotificationsService } from 'angular2-notifications' -import { VideoService } from '../shared' -import { AbstractVideoList } from './shared' +import { VideoService } from '../../shared/video/video.service' +import { AbstractVideoList } from 'app/shared/video/abstract-video-list' @Component({ selector: 'my-videos-trending', - styleUrls: [ './shared/abstract-video-list.scss' ], - templateUrl: './shared/abstract-video-list.html' + styleUrls: [ '../../shared/video/abstract-video-list.scss' ], + templateUrl: '../../shared/video/abstract-video-list.html' }) export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy { titlePage = 'Trending' -- cgit v1.2.3