Lazy load all routes

12 files changed, 660 insertions, 0 deletions

diff --git a/client/src/app/+videos/video-list/index.ts b/client/src/app/+videos/video-list/index.ts
new file mode 100644
index 000000000..af1bd58b7
--- /dev/null
+++ b/client/src/app/+videos/video-list/index.ts
@@ -0,0 +1,5 @@
+export * from './overview'
+export * from './video-local.component'
+export * from './video-recently-added.component'
+export * from './video-trending.component'
+export * from './video-most-liked.component'
diff --git a/client/src/app/+videos/video-list/overview/index.ts b/client/src/app/+videos/video-list/overview/index.ts
new file mode 100644
index 000000000..e6cfa4802
--- /dev/null
+++ b/client/src/app/+videos/video-list/overview/index.ts
@@ -0,0 +1,3 @@
+export * from './overview.service'
+export * from './video-overview.component'
+export * from './videos-overview.model'
diff --git a/client/src/app/+videos/video-list/overview/overview.service.ts b/client/src/app/+videos/video-list/overview/overview.service.ts
new file mode 100644
index 000000000..4458454d5
--- /dev/null
+++ b/client/src/app/+videos/video-list/overview/overview.service.ts
@@ -0,0 +1,78 @@
+import { forkJoin, Observable, of } from 'rxjs'
+import { catchError, map, switchMap, tap } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, ServerService } from '@app/core'
+import { immutableAssign } from '@app/helpers'
+import { VideoService } from '@app/shared/shared-main'
+import { peertubeTranslate, VideosOverview as VideosOverviewServer } from '@shared/models'
+import { environment } from '../../../../environments/environment'
+import { VideosOverview } from './videos-overview.model'
+
+@Injectable()
+export class OverviewService {
+  static BASE_OVERVIEW_URL = environment.apiUrl + '/api/v1/overviews/'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private videosService: VideoService,
+    private serverService: ServerService
+  ) {}
+
+  getVideosOverview (page: number): Observable<VideosOverview> {
+    let params = new HttpParams()
+    params = params.append('page', page + '')
+
+    return this.authHttp
+               .get<VideosOverviewServer>(OverviewService.BASE_OVERVIEW_URL + 'videos', { params })
+               .pipe(
+                 switchMap(serverVideosOverview => this.updateVideosOverview(serverVideosOverview)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  private updateVideosOverview (serverVideosOverview: VideosOverviewServer): Observable<VideosOverview> {
+    const observables: Observable<any>[] = []
+    const videosOverviewResult: VideosOverview = {
+      tags: [],
+      categories: [],
+      channels: []
+    }
+
+    // Build videos objects
+    for (const key of Object.keys(serverVideosOverview)) {
+      for (const object of serverVideosOverview[ key ]) {
+        observables.push(
+          of(object.videos)
+            .pipe(
+              switchMap(videos => this.videosService.extractVideos({ total: 0, data: videos })),
+              map(result => result.data),
+              tap(videos => {
+                videosOverviewResult[key].push(immutableAssign(object, { videos }))
+              })
+            )
+        )
+      }
+    }
+
+    if (observables.length === 0) return of(videosOverviewResult)
+
+    return forkJoin(observables)
+      .pipe(
+        // Translate categories
+        switchMap(() => {
+          return this.serverService.getServerLocale()
+              .pipe(
+                tap(translations => {
+                  for (const c of videosOverviewResult.categories) {
+                    c.category.label = peertubeTranslate(c.category.label, translations)
+                  }
+                })
+              )
+        }),
+        map(() => videosOverviewResult)
+      )
+  }
+
+}
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
new file mode 100644
index 000000000..ca986c634
--- /dev/null
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -0,0 +1,52 @@
+<h1 class="sr-only" i18n>Discover</h1>
+<div class="margin-content">
+
+  <div class="no-results" i18n *ngIf="notResults">No results.</div>
+
+  <div
+    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
+  >
+    <ng-container *ngFor="let overview of overviews">
+
+      <div class="section videos" *ngFor="let object of overview.categories">
+        <h1 class="section-title">
+          <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
+        </h1>
+
+        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
+          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          </my-video-miniature>
+        </div>
+      </div>
+
+      <div class="section videos" *ngFor="let object of overview.tags">
+        <h2 class="section-title">
+          <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
+        </h2>
+
+        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
+          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          </my-video-miniature>
+        </div>
+      </div>
+
+      <div class="section channel videos" *ngFor="let object of overview.channels">
+        <div class="section-title">
+          <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
+            <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
+
+            <h2 class="section-title">{{ object.channel.displayName }}</h2>
+          </a>
+        </div>
+
+        <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
+          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          </my-video-miniature>
+        </div>
+      </div>
+
+    </ng-container>
+
+  </div>
+
+</div>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
new file mode 100644
index 000000000..c1d10188a
--- /dev/null
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -0,0 +1,16 @@
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+
+.section-title {
+  // make the element span a full grid row within .videos grid
+  grid-column: 1 / -1;
+}
+
+.margin-content {
+  @include fluid-videos-miniature-layout;
+}
+
+.section {
+  @include miniature-rows;
+}
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.ts b/client/src/app/+videos/video-list/overview/video-overview.component.ts
new file mode 100644
index 000000000..b3be1d7b5
--- /dev/null
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.ts
@@ -0,0 +1,94 @@
+import { Subject } from 'rxjs'
+import { Component, OnInit } from '@angular/core'
+import { Notifier, ScreenService, User, UserService } from '@app/core'
+import { Video } from '@app/shared/shared-main'
+import { OverviewService } from './overview.service'
+import { VideosOverview } from './videos-overview.model'
+
+@Component({
+  selector: 'my-video-overview',
+  templateUrl: './video-overview.component.html',
+  styleUrls: [ './video-overview.component.scss' ]
+})
+export class VideoOverviewComponent implements OnInit {
+  onDataSubject = new Subject<any>()
+
+  overviews: VideosOverview[] = []
+  notResults = false
+
+  userMiniature: User
+
+  private loaded = false
+  private currentPage = 1
+  private maxPage = 20
+  private lastWasEmpty = false
+  private isLoading = false
+
+  constructor (
+    private notifier: Notifier,
+    private userService: UserService,
+    private overviewService: OverviewService,
+    private screenService: ScreenService
+  ) { }
+
+  ngOnInit () {
+    this.loadMoreResults()
+
+    this.userService.getAnonymousOrLoggedUser()
+      .subscribe(user => this.userMiniature = user)
+
+    this.userService.listenAnonymousUpdate()
+      .subscribe(user => this.userMiniature = user)
+  }
+
+  buildVideoChannelBy (object: { videos: Video[] }) {
+    return object.videos[0].byVideoChannel
+  }
+
+  buildVideoChannelAvatarUrl (object: { videos: Video[] }) {
+    return object.videos[0].videoChannelAvatarUrl
+  }
+
+  buildVideos (videos: Video[]) {
+    const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
+
+    return videos.slice(0, numberOfVideos * 2)
+  }
+
+  onNearOfBottom () {
+    if (this.currentPage >= this.maxPage) return
+    if (this.lastWasEmpty) return
+    if (this.isLoading) return
+
+    this.currentPage++
+    this.loadMoreResults()
+  }
+
+  private loadMoreResults () {
+    this.isLoading = true
+
+    this.overviewService.getVideosOverview(this.currentPage)
+        .subscribe(
+          overview => {
+            this.isLoading = false
+
+            if (overview.tags.length === 0 && overview.channels.length === 0 && overview.categories.length === 0) {
+              this.lastWasEmpty = true
+              if (this.loaded === false) this.notResults = true
+
+              return
+            }
+
+            this.loaded = true
+            this.onDataSubject.next(overview)
+
+            this.overviews.push(overview)
+          },
+
+          err => {
+            this.notifier.error(err.message)
+            this.isLoading = false
+          }
+        )
+  }
+}
diff --git a/client/src/app/+videos/video-list/overview/videos-overview.model.ts b/client/src/app/+videos/video-list/overview/videos-overview.model.ts
new file mode 100644
index 000000000..6765ad9b7
--- /dev/null
+++ b/client/src/app/+videos/video-list/overview/videos-overview.model.ts
@@ -0,0 +1,20 @@
+import { Video } from '@app/shared/shared-main'
+import { VideoChannelSummary, VideoConstant, VideosOverview as VideosOverviewServer } from '@shared/models'
+
+export class VideosOverview implements VideosOverviewServer {
+  channels: {
+    channel: VideoChannelSummary
+    videos: Video[]
+  }[]
+
+  categories: {
+    category: VideoConstant<number>
+    videos: Video[]
+  }[]
+
+  tags: {
+    tag: string
+    videos: Video[]
+  }[]
+  [key: string]: any
+}
diff --git a/client/src/app/+videos/video-list/video-local.component.ts b/client/src/app/+videos/video-list/video-local.component.ts
new file mode 100644
index 000000000..b4c71ac49
--- /dev/null
+++ b/client/src/app/+videos/video-list/video-local.component.ts
@@ -0,0 +1,86 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
+import { HooksService } from '@app/core/plugins/hooks.service'
+import { immutableAssign } from '@app/helpers'
+import { VideoService } from '@app/shared/shared-main'
+import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { UserRight, VideoFilter, VideoSortField } from '@shared/models'
+
+@Component({
+  selector: 'my-videos-local',
+  styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ],
+  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html'
+})
+export class VideoLocalComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage: string
+  sort = '-publishedAt' as VideoSortField
+  filter: VideoFilter = 'local'
+
+  useUserVideoPreferences = true
+
+  constructor (
+    protected i18n: I18n,
+    protected router: Router,
+    protected serverService: ServerService,
+    protected route: ActivatedRoute,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected userService: UserService,
+    protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
+    private videoService: VideoService,
+    private hooks: HooksService
+  ) {
+    super()
+
+    this.titlePage = i18n('Local videos')
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+
+    if (this.authService.isLoggedIn()) {
+      const user = this.authService.getUser()
+      this.displayModerationBlock = user.hasRight(UserRight.SEE_ALL_VIDEOS)
+    }
+
+    this.generateSyndicationList()
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+    const params = {
+      videoPagination: newPagination,
+      sort: this.sort,
+      filter: this.filter,
+      categoryOneOf: this.categoryOneOf,
+      languageOneOf: this.languageOneOf,
+      nsfwPolicy: this.nsfwPolicy,
+      skipCount: true
+    }
+
+    return this.hooks.wrapObsFun(
+      this.videoService.getVideos.bind(this.videoService),
+      params,
+      'common',
+      'filter:api.local-videos.videos.list.params',
+      'filter:api.local-videos.videos.list.result'
+    )
+  }
+
+  generateSyndicationList () {
+    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, this.filter, this.categoryOneOf)
+  }
+
+  toggleModerationDisplay () {
+    this.filter = this.filter === 'local' ? 'all-local' as 'all-local' : 'local' as 'local'
+
+    this.reloadVideos()
+  }
+}
diff --git a/client/src/app/+videos/video-list/video-most-liked.component.ts b/client/src/app/+videos/video-list/video-most-liked.component.ts
new file mode 100644
index 000000000..ca14851bb
--- /dev/null
+++ b/client/src/app/+videos/video-list/video-most-liked.component.ts
@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
+import { HooksService } from '@app/core/plugins/hooks.service'
+import { immutableAssign } from '@app/helpers'
+import { VideoService } from '@app/shared/shared-main'
+import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoSortField } from '@shared/models'
+
+@Component({
+  selector: 'my-videos-most-liked',
+  styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ],
+  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html'
+})
+export class VideoMostLikedComponent extends AbstractVideoList implements OnInit {
+  titlePage: string
+  defaultSort: VideoSortField = '-likes'
+
+  useUserVideoPreferences = true
+
+  constructor (
+    protected i18n: I18n,
+    protected router: Router,
+    protected serverService: ServerService,
+    protected route: ActivatedRoute,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected userService: UserService,
+    protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
+    private videoService: VideoService,
+    private hooks: HooksService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+
+    this.generateSyndicationList()
+
+    this.titlePage = this.i18n('Most liked videos')
+    this.titleTooltip = this.i18n('Videos that have the higher number of likes.')
+  }
+
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+    const params = {
+      videoPagination: newPagination,
+      sort: this.sort,
+      categoryOneOf: this.categoryOneOf,
+      languageOneOf: this.languageOneOf,
+      nsfwPolicy: this.nsfwPolicy,
+      skipCount: true
+    }
+
+    return this.hooks.wrapObsFun(
+      this.videoService.getVideos.bind(this.videoService),
+      params,
+      'common',
+      'filter:api.most-liked-videos.videos.list.params',
+      'filter:api.most-liked-videos.videos.list.result'
+    )
+  }
+
+  generateSyndicationList () {
+    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
+  }
+}
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..c9395133f
--- /dev/null
+++ b/client/src/app/+videos/video-list/video-recently-added.component.ts
@@ -0,0 +1,74 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
+import { HooksService } from '@app/core/plugins/hooks.service'
+import { immutableAssign } from '@app/helpers'
+import { VideoService } from '@app/shared/shared-main'
+import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoSortField } from '@shared/models'
+
+@Component({
+  selector: 'my-videos-recently-added',
+  styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ],
+  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html'
+})
+export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage: string
+  sort: VideoSortField = '-publishedAt'
+  groupByDate = true
+
+  useUserVideoPreferences = true
+
+  constructor (
+    protected i18n: I18n,
+    protected route: ActivatedRoute,
+    protected serverService: ServerService,
+    protected router: Router,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected userService: UserService,
+    protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
+    private videoService: VideoService,
+    private hooks: HooksService
+  ) {
+    super()
+
+    this.titlePage = i18n('Recently added')
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+
+    this.generateSyndicationList()
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+    const params = {
+      videoPagination: newPagination,
+      sort: this.sort,
+      categoryOneOf: this.categoryOneOf,
+      languageOneOf: this.languageOneOf,
+      nsfwPolicy: this.nsfwPolicy,
+      skipCount: true
+    }
+
+    return this.hooks.wrapObsFun(
+      this.videoService.getVideos.bind(this.videoService),
+      params,
+      'common',
+      'filter:api.recently-added-videos.videos.list.params',
+      'filter:api.recently-added-videos.videos.list.result'
+    )
+  }
+
+  generateSyndicationList () {
+    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
+  }
+}
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..10eab18de
--- /dev/null
+++ b/client/src/app/+videos/video-list/video-trending.component.ts
@@ -0,0 +1,87 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
+import { HooksService } from '@app/core/plugins/hooks.service'
+import { immutableAssign } from '@app/helpers'
+import { VideoService } from '@app/shared/shared-main'
+import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoSortField } from '@shared/models'
+
+@Component({
+  selector: 'my-videos-trending',
+  styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ],
+  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html'
+})
+export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage: string
+  defaultSort: VideoSortField = '-trending'
+
+  useUserVideoPreferences = true
+
+  constructor (
+    protected i18n: I18n,
+    protected router: Router,
+    protected serverService: ServerService,
+    protected route: ActivatedRoute,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected userService: UserService,
+    protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
+    private videoService: VideoService,
+    private hooks: HooksService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+
+    this.generateSyndicationList()
+
+    this.serverService.getConfig().subscribe(
+      config => {
+        const trendingDays = config.trending.videos.intervalDays
+
+        if (trendingDays === 1) {
+          this.titlePage = this.i18n('Trending for the last 24 hours')
+          this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours')
+        } else {
+          this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays })
+          this.titleTooltip = this.i18n(
+            'Trending videos are those totalizing the greatest number of views during the last {{days}} days',
+            { days: trendingDays }
+          )
+        }
+      })
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+    const params = {
+      videoPagination: newPagination,
+      sort: this.sort,
+      categoryOneOf: this.categoryOneOf,
+      languageOneOf: this.languageOneOf,
+      nsfwPolicy: this.nsfwPolicy,
+      skipCount: true
+    }
+
+    return this.hooks.wrapObsFun(
+      this.videoService.getVideos.bind(this.videoService),
+      params,
+      'common',
+      'filter:api.trending-videos.videos.list.params',
+      'filter:api.trending-videos.videos.list.result'
+    )
+  }
+
+  generateSyndicationList () {
+    this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, undefined, this.categoryOneOf)
+  }
+}
diff --git a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
new file mode 100644
index 000000000..41ad9b277
--- /dev/null
+++ b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
@@ -0,0 +1,75 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
+import { HooksService } from '@app/core/plugins/hooks.service'
+import { immutableAssign } from '@app/helpers'
+import { VideoService } from '@app/shared/shared-main'
+import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
+import { AbstractVideoList, OwnerDisplayType } from '@app/shared/shared-video-miniature'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoSortField } from '@shared/models'
+
+@Component({
+  selector: 'my-videos-user-subscriptions',
+  styleUrls: [ '../../shared/shared-video-miniature/abstract-video-list.scss' ],
+  templateUrl: '../../shared/shared-video-miniature/abstract-video-list.html'
+})
+export class VideoUserSubscriptionsComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage: string
+  sort = '-publishedAt' as VideoSortField
+  ownerDisplayType: OwnerDisplayType = 'auto'
+  groupByDate = true
+
+  constructor (
+    protected i18n: I18n,
+    protected router: Router,
+    protected serverService: ServerService,
+    protected route: ActivatedRoute,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected userService: UserService,
+    protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
+    private userSubscription: UserSubscriptionService,
+    private videoService: VideoService,
+    private hooks: HooksService
+  ) {
+    super()
+
+    this.titlePage = i18n('Videos from your subscriptions')
+    this.actions.push({
+      routerLink: '/my-account/subscriptions',
+      label: i18n('Subscriptions'),
+      iconName: 'cog'
+    })
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+    const params = {
+      videoPagination: newPagination,
+      sort: this.sort,
+      skipCount: true
+    }
+
+    return this.hooks.wrapObsFun(
+      this.userSubscription.getUserSubscriptionVideos.bind(this.userSubscription),
+      params,
+      'common',
+      'filter:api.user-subscriptions-videos.videos.list.params',
+      'filter:api.user-subscriptions-videos.videos.list.result'
+    )
+  }
+
+  generateSyndicationList () {
+    // not implemented yet
+  }
+}