diff --git a/client/package.json b/client/package.json index c551c995a..310860fec 100644 --- a/client/package.json +++ b/client/package.json @@ -43,7 +43,6 @@ "@types/webpack": "^3.0.0", "@types/webtorrent": "^0.98.4", "add-asset-html-webpack-plugin": "^2.0.1", - "angular-pipes": "^6.0.0", "angular2-notifications": "^0.7.7", "angular2-template-loader": "^0.6.0", "assets-webpack-plugin": "^3.4.0", @@ -72,6 +71,7 @@ "ngc-webpack": "3.2.2", "ngx-bootstrap": "2.0.0-beta.9", "ngx-chips": "1.5.3", + "ngx-pipes": "^2.0.5", "node-sass": "^4.1.1", "normalize.css": "^7.0.0", "optimize-js-plugin": "0.0.4", diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index fb31c0734..21f8d8ba4 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -26,12 +26,12 @@
Videos
- + Trending - + Recently added diff --git a/client/src/app/shared/misc/from-now.pipe.ts b/client/src/app/shared/misc/from-now.pipe.ts new file mode 100644 index 000000000..25e5d6a85 --- /dev/null +++ b/client/src/app/shared/misc/from-now.pipe.ts @@ -0,0 +1,37 @@ +import { Pipe, PipeTransform } from '@angular/core' + +// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts + +@Pipe({name: 'fromNow'}) +export class FromNowPipe implements PipeTransform { + + transform (value: number) { + const seconds = Math.floor((Date.now() - value) / 1000) + + let interval = Math.floor(seconds / 31536000) + if (interval > 1) { + return interval + ' years ago' + } + + interval = Math.floor(seconds / 2592000) + if (interval > 1) return interval + ' months ago' + if (interval === 1) return interval + ' month ago' + + interval = Math.floor(seconds / 604800) + if (interval > 1) return interval + ' weeks ago' + if (interval === 1) return interval + ' week ago' + + interval = Math.floor(seconds / 86400) + if (interval > 1) return interval + ' days ago' + if (interval === 1) return interval + ' day ago' + + interval = Math.floor(seconds / 3600) + if (interval > 1) return interval + ' hours ago' + if (interval === 1) return interval + ' hour ago' + + interval = Math.floor(seconds / 60) + if (interval >= 1) return interval + ' min ago' + + return Math.floor(seconds) + ' sec ago' + } +} diff --git a/client/src/app/shared/misc/number-formatter.pipe.ts b/client/src/app/shared/misc/number-formatter.pipe.ts new file mode 100644 index 000000000..2491fb1d6 --- /dev/null +++ b/client/src/app/shared/misc/number-formatter.pipe.ts @@ -0,0 +1,19 @@ +import { Pipe, PipeTransform } from '@angular/core' + +// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts + +@Pipe({name: 'numberFormatter'}) +export class NumberFormatterPipe implements PipeTransform { + private dictionary: Array<{max: number, type: string}> = [ + { max: 1000, type: '' }, + { max: 1000000, type: 'K' }, + { max: 1000000000, type: 'M' } + ] + + transform (value: number) { + const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1] + const calc = Math.floor(value / (format.max / 1000)) + + return `${calc}${format.type}` + } +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 456ce851e..c7ea6e603 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -1,25 +1,26 @@ -import { NgModule } from '@angular/core' -import { HttpClientModule } from '@angular/common/http' import { CommonModule } from '@angular/common' +import { HttpClientModule } from '@angular/common/http' +import { NgModule } from '@angular/core' import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { RouterModule } from '@angular/router' -import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe' -import { KeysPipe } from 'angular-pipes/src/object/keys.pipe' import { BsDropdownModule } from 'ngx-bootstrap/dropdown' -import { ProgressbarModule } from 'ngx-bootstrap/progressbar' -import { PaginationModule } from 'ngx-bootstrap/pagination' import { ModalModule } from 'ngx-bootstrap/modal' -import { DataTableModule } from 'primeng/components/datatable/datatable' +import { PaginationModule } from 'ngx-bootstrap/pagination' +import { ProgressbarModule } from 'ngx-bootstrap/progressbar' +import { BytesPipe, KeysPipe } from 'ngx-pipes' import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared' +import { DataTableModule } from 'primeng/components/datatable/datatable' import { AUTH_INTERCEPTOR_PROVIDER } from './auth' +import { LoaderComponent } from './misc/loader.component' import { RestExtractor, RestService } from './rest' import { SearchComponent, SearchService } from './search' import { UserService } from './users' import { VideoAbuseService } from './video-abuse' import { VideoBlacklistService } from './video-blacklist' -import { LoaderComponent } from './misc/loader.component' +import { NumberFormatterPipe } from './misc/number-formatter.pipe' +import { FromNowPipe } from './misc/from-now.pipe' @NgModule({ imports: [ @@ -42,7 +43,9 @@ import { LoaderComponent } from './misc/loader.component' BytesPipe, KeysPipe, SearchComponent, - LoaderComponent + LoaderComponent, + NumberFormatterPipe, + FromNowPipe ], exports: [ @@ -62,7 +65,10 @@ import { LoaderComponent } from './misc/loader.component' KeysPipe, SearchComponent, - LoaderComponent + LoaderComponent, + + NumberFormatterPipe, + FromNowPipe ], providers: [ diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts index 1704cf486..76bfbb515 100644 --- a/client/src/app/videos/+video-edit/video-add.component.ts +++ b/client/src/app/videos/+video-edit/video-add.component.ts @@ -184,7 +184,7 @@ export class VideoAddComponent extends FormReactive implements OnInit { this.notificationsService.success('Success', 'Video uploaded.') // Display all the videos once it's finished - this.router.navigate([ '/videos/list' ]) + this.router.navigate([ '/videos/trending' ]) } }, diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts index ed2bb1657..a5a60364a 100644 --- a/client/src/app/videos/video-list/index.ts +++ b/client/src/app/videos/video-list/index.ts @@ -1,3 +1,4 @@ export * from './my-videos.component' -export * from './video-list.component' +export * from './video-recently-added.component' +export * from './video-trending.component' export * from './shared' diff --git a/client/src/app/videos/video-list/my-videos.component.ts b/client/src/app/videos/video-list/my-videos.component.ts index 648741a40..146db8262 100644 --- a/client/src/app/videos/video-list/my-videos.component.ts +++ b/client/src/app/videos/video-list/my-videos.component.ts @@ -27,7 +27,7 @@ export class MyVideosComponent extends AbstractVideoList implements OnInit, OnDe } ngOnDestroy () { - this.subActivatedRoute.unsubscribe() + super.ngOnDestroy() } getVideosObservable () { 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 index 680fba3f5..ab5530e68 100644 --- a/client/src/app/videos/video-list/shared/abstract-video-list.html +++ b/client/src/app/videos/video-list/shared/abstract-video-list.html @@ -1,20 +1,8 @@ -
-
-
-
- {{ pagination.totalItems }} videos - - -
- - -
-
+
+ {{ titlePage }}
-
-
There is no video.
- +
= new BehaviorSubject(false) pagination: VideoPagination = { currentPage: 1, itemsPerPage: 25, totalItems: null } - sort: SortField + sort: SortField = '-createdAt' videos: Video[] = [] protected notificationsService: NotificationsService @@ -28,6 +22,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { protected subActivatedRoute: Subscription + abstract titlePage: string abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}> ngOnInit () { @@ -44,7 +39,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { } getVideos () { - this.loading.next(true) this.videos = [] const observable = this.getVideosObservable() @@ -53,17 +47,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { ({ videos, totalVideos }) => { this.videos = videos this.pagination.totalItems = totalVideos - - this.loading.next(false) }, error => this.notificationsService.error('Error', error.text) ) } - isThereNoVideo () { - return !this.loading.getValue() && this.videos.length === 0 - } - onPageChanged (event: { page: number }) { // Be sure the current page is set this.pagination.currentPage = event.page @@ -71,12 +59,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { this.navigateToNewParams() } - onSort (sort: SortField) { - this.sort = sort - - this.navigateToNewParams() - } - protected buildRouteParams () { // There is always a sort and a current page const params = { diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts index d8f73bcda..170ca4832 100644 --- a/client/src/app/videos/video-list/shared/index.ts +++ b/client/src/app/videos/video-list/shared/index.ts @@ -1,3 +1,2 @@ export * from './abstract-video-list' export * from './video-miniature.component' -export * from './video-sort.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 6bbd29666..aea85b6c6 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 @@ -6,8 +6,7 @@ video thumbnail
- {{ video.views }} views - {{ video.durationLabel }} + {{ video.durationLabel }}
@@ -21,13 +20,7 @@ -
- - {{ tag }} - -
- - - {{ video.createdAt | date:'short' }} + {{ video.createdAt | fromNow }} - {{ video.views | numberFormatter }} views +
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 507ace098..ed15864d9 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 @@ -1,14 +1,14 @@ .video-miniature { - margin: 15px 10px; display: inline-block; - position: relative; - height: 190px; + padding-right: 15px; + margin-bottom: 30px; + height: 175px; vertical-align: top; .video-miniature-thumbnail { display: inline-block; position: relative; - border-radius: 3px; + border-radius: 4px; overflow: hidden; &:hover { @@ -22,38 +22,33 @@ .video-miniature-thumbnail-overlay { position: absolute; - right: 0px; - bottom: 0px; + right: 5px; + bottom: 5px; display: inline-block; background-color: rgba(0, 0, 0, 0.7); color: #fff; - padding: 3px 5px; - font-size: 11px; - font-weight: bold; - width: 100%; - - .video-miniature-thumbnail-overlay-views { - - } - - .video-miniature-thumbnail-overlay-duration { - float: right; - } + font-size: 12px; + font-weight: $font-bold; + border-radius: 3px; + padding: 0 5px; } } .video-miniature-information { width: 200px; + margin-top: 2px; + line-height: normal; .video-miniature-name { - height: 23px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; transition: color 0.2s; - font-size: 15px; + font-size: 16px; + font-weight: $font-semibold; + color: #000; &:hover { text-decoration: none; @@ -63,39 +58,16 @@ filter: blur(3px); padding-left: 4px; } - - .video-miniature-tags { - // Fix for chrome when tags are long - width: 201px; - - .video-miniature-tag { - font-size: 13px; - cursor: pointer; - position: relative; - top: -2px; - - .label { - transition: background-color 0.2s; - } - } - } } - .video-miniature-account, .video-miniature-created-at { + .video-miniature-created-at-views { display: block; - margin-left: 1px; - font-size: 11px; - color: $video-miniature-other-infos; - opacity: 0.9; + font-size: 13px; } .video-miniature-account { - transition: color 0.2s; - - &:hover { - color: #23527c; - text-decoration: none; - } + font-size: 12px; + color: #585858; } } } diff --git a/client/src/app/videos/video-list/shared/video-sort.component.html b/client/src/app/videos/video-list/shared/video-sort.component.html deleted file mode 100644 index 3bece0b22..000000000 --- a/client/src/app/videos/video-list/shared/video-sort.component.html +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/client/src/app/videos/video-list/shared/video-sort.component.ts b/client/src/app/videos/video-list/shared/video-sort.component.ts deleted file mode 100644 index 8aa89d32b..000000000 --- a/client/src/app/videos/video-list/shared/video-sort.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core' - -import { SortField } from '../../shared' - -@Component({ - selector: 'my-video-sort', - templateUrl: './video-sort.component.html' -}) - -export class VideoSortComponent { - @Output() sort = new EventEmitter() - - @Input() currentSort: SortField - - sortChoices: { [ P in SortField ]: string } = { - 'name': 'Name - Asc', - '-name': 'Name - Desc', - 'duration': 'Duration - Asc', - '-duration': 'Duration - Desc', - 'createdAt': 'Created Date - Asc', - '-createdAt': 'Created Date - Desc', - 'views': 'Views - Asc', - '-views': 'Views - Desc', - 'likes': 'Likes - Asc', - '-likes': 'Likes - Desc' - } - - get choiceKeys () { - return Object.keys(this.sortChoices) - } - - getStringChoice (choiceKey: SortField) { - return this.sortChoices[choiceKey] - } - - onSortChange () { - this.sort.emit(this.currentSort) - } -} diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts deleted file mode 100644 index 784162679..000000000 --- a/client/src/app/videos/video-list/video-list.component.ts +++ /dev/null @@ -1,94 +0,0 @@ -import { Component, OnDestroy, OnInit } from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' -import { Subscription } from 'rxjs/Subscription' - -import { NotificationsService } from 'angular2-notifications' - -import { VideoService } from '../shared' -import { Search, SearchField, SearchService } from '../../shared' -import { AbstractVideoList } from './shared' - -@Component({ - selector: 'my-videos-list', - styleUrls: [ './shared/abstract-video-list.scss' ], - templateUrl: './shared/abstract-video-list.html' -}) -export class VideoListComponent extends AbstractVideoList implements OnInit, OnDestroy { - private search: Search - private subSearch: Subscription - - constructor ( - protected router: Router, - protected route: ActivatedRoute, - protected notificationsService: NotificationsService, - private videoService: VideoService, - private searchService: SearchService - ) { - super() - } - - ngOnInit () { - // Subscribe to route changes - this.subActivatedRoute = this.route.params.subscribe(routeParams => { - this.loadRouteParams(routeParams) - - // Update the search service component - this.searchService.updateSearch.next(this.search) - this.getVideos() - }) - - // Subscribe to search changes - this.subSearch = this.searchService.searchUpdated.subscribe(search => { - this.search = search - // Reset pagination - this.pagination.currentPage = 1 - - this.navigateToNewParams() - }) - } - - ngOnDestroy () { - super.ngOnDestroy() - - this.subSearch.unsubscribe() - } - - getVideosObservable () { - let observable = null - if (this.search.value) { - observable = this.videoService.searchVideos(this.search, this.pagination, this.sort) - } else { - observable = this.videoService.getVideos(this.pagination, this.sort) - } - - return observable - } - - protected buildRouteParams () { - const params = super.buildRouteParams() - - // Maybe there is a search - if (this.search.value) { - params['field'] = this.search.field - params['search'] = this.search.value - } - - return params - } - - protected loadRouteParams (routeParams: { [ key: string ]: any }) { - super.loadRouteParams(routeParams) - - if (routeParams['search'] !== undefined) { - this.search = { - value: routeParams['search'], - field: routeParams['field'] as SearchField - } - } else { - this.search = { - value: '', - field: 'name' - } - } - } -} 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 new file mode 100644 index 000000000..dbba264df --- /dev/null +++ b/client/src/app/videos/video-list/video-recently-added.component.ts @@ -0,0 +1,33 @@ +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' + +@Component({ + selector: 'my-videos-recently-added', + styleUrls: [ './shared/abstract-video-list.scss' ], + templateUrl: './shared/abstract-video-list.html' +}) +export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy { + titlePage = 'Recently added' + + constructor (protected router: Router, + protected route: ActivatedRoute, + protected notificationsService: NotificationsService, + private videoService: VideoService) { + super() + } + + ngOnInit () { + super.ngOnInit() + } + + ngOnDestroy () { + super.ngOnDestroy() + } + + getVideosObservable () { + return this.videoService.getVideos(this.pagination, this.sort) + } +} diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts new file mode 100644 index 000000000..b97966c12 --- /dev/null +++ b/client/src/app/videos/video-list/video-trending.component.ts @@ -0,0 +1,33 @@ +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' + +@Component({ + selector: 'my-videos-trending', + styleUrls: [ './shared/abstract-video-list.scss' ], + templateUrl: './shared/abstract-video-list.html' +}) +export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy { + titlePage = 'Trending' + + constructor (protected router: Router, + protected route: ActivatedRoute, + protected notificationsService: NotificationsService, + private videoService: VideoService) { + super() + } + + ngOnInit () { + super.ngOnInit() + } + + ngOnDestroy () { + super.ngOnDestroy() + } + + getVideosObservable () { + return this.videoService.getVideos(this.pagination, this.sort) + } +} diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts index 3ca3e5486..1f894df7a 100644 --- a/client/src/app/videos/videos-routing.module.ts +++ b/client/src/app/videos/videos-routing.module.ts @@ -1,9 +1,9 @@ import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' - import { MetaGuard } from '@ngx-meta/core' - -import { VideoListComponent, MyVideosComponent } from './video-list' +import { MyVideosComponent } from './video-list' +import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component' +import { VideoTrendingComponent } from './video-list/video-trending.component' import { VideosComponent } from './videos.component' const videosRoutes: Routes = [ @@ -12,6 +12,11 @@ const videosRoutes: Routes = [ component: VideosComponent, canActivateChild: [ MetaGuard ], children: [ + { + path: 'list', + pathMatch: 'full', + redirectTo: 'recently-added' + }, { path: 'mine', component: MyVideosComponent, @@ -22,11 +27,20 @@ const videosRoutes: Routes = [ } }, { - path: 'list', - component: VideoListComponent, + path: 'trending', + component: VideoTrendingComponent, data: { meta: { - title: 'Videos list' + title: 'Trending videos' + } + } + }, + { + path: 'recently-added', + component: VideoRecentlyAddedComponent, + data: { + meta: { + title: 'Recently added videos' } } }, diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts index 4f3054c3a..93193000c 100644 --- a/client/src/app/videos/videos.module.ts +++ b/client/src/app/videos/videos.module.ts @@ -1,7 +1,9 @@ import { NgModule } from '@angular/core' import { SharedModule } from '../shared' import { VideoService } from './shared' -import { MyVideosComponent, VideoListComponent, VideoMiniatureComponent, VideoSortComponent } from './video-list' +import { MyVideosComponent, VideoMiniatureComponent } from './video-list' +import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component' +import { VideoTrendingComponent } from './video-list/video-trending.component' import { VideosRoutingModule } from './videos-routing.module' import { VideosComponent } from './videos.component' @@ -14,10 +16,10 @@ import { VideosComponent } from './videos.component' declarations: [ VideosComponent, - VideoListComponent, + VideoTrendingComponent, + VideoRecentlyAddedComponent, MyVideosComponent, - VideoMiniatureComponent, - VideoSortComponent + VideoMiniatureComponent ], exports: [ diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 58f07612b..fc61a22da 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -33,24 +33,14 @@ input.readonly { } .main-col { - .content-padding { - padding: 15px 30px; + padding: 30px; - @media screen and (max-width: 800px) { - padding: 15px 10px; - } - - @media screen and (min-width: 1400px) { - padding: 15px 40px; - } - - @media screen and (min-width: 1600px) { - padding: 15px 50px; - } - - @media screen and (min-width: 1800px) { - padding: 15px 60px; - } + .title-page { + font-size: 16px; + font-weight: $font-bold; + display: inline-block; + border-bottom: 2px solid $orange-color; + margin-bottom: 25px; } } diff --git a/client/yarn.lock b/client/yarn.lock index 8f148e431..fa1802a29 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -264,10 +264,6 @@ amdefine@>=0.0.4: version "1.0.1" resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" -angular-pipes@^6.0.0: - version "6.5.3" - resolved "https://registry.yarnpkg.com/angular-pipes/-/angular-pipes-6.5.3.tgz#6bed37c51ebc2adaf3412663bfe25179d0489b02" - angular2-notifications@^0.7.7: version "0.7.8" resolved "https://registry.yarnpkg.com/angular2-notifications/-/angular2-notifications-0.7.8.tgz#ecbcb95a8d2d402af94a9a080d6664c70d33a029" @@ -4718,6 +4714,10 @@ ngx-chips@1.5.3: dependencies: ng2-material-dropdown "0.7.10" +ngx-pipes@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/ngx-pipes/-/ngx-pipes-2.0.5.tgz#743b827e350b1e66f5bdae49e90a02fa631d4c54" + no-case@^2.2.0: version "2.3.2" resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"