Upgrade to angular 10

19 files changed, 38 insertions, 44 deletions

diff --git a/client/src/app/+admin/plugins/plugins.routes.ts b/client/src/app/+admin/plugins/plugins.routes.ts
index 02e8fd324..4bef27be3 100644
--- a/client/src/app/+admin/plugins/plugins.routes.ts
+++ b/client/src/app/+admin/plugins/plugins.routes.ts
@@ -1,11 +1,10 @@
 import { Routes } from '@angular/router'
-
-import { UserRightGuard } from '../../core'
-import { UserRight } from '../../../../../shared'
 import { PluginListInstalledComponent } from '@app/+admin/plugins/plugin-list-installed/plugin-list-installed.component'
 import { PluginSearchComponent } from '@app/+admin/plugins/plugin-search/plugin-search.component'
 import { PluginShowInstalledComponent } from '@app/+admin/plugins/plugin-show-installed/plugin-show-installed.component'
 import { PluginsComponent } from '@app/+admin/plugins/plugins.component'
+import { UserRightGuard } from '@app/core'
+import { UserRight } from '@shared/models'
 
 export const PluginsRoutes: Routes = [
   {
diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
index 8fa4b0635..22ec42520 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -1,9 +1,10 @@
-import { OnInit } from '@angular/core'
+import { OnInit, Directive } from '@angular/core'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { AuthService, ScreenService, ServerService, User } from '@app/core'
 import { FormReactive } from '@app/shared/shared-forms'
 import { ServerConfig, USER_ROLE_LABELS, UserAdminFlag, UserRole, VideoResolution } from '@shared/models'
 
+@Directive()
 export abstract class UserEdit extends FormReactive implements OnInit {
   videoQuotaOptions: { value: string, label: string, disabled?: boolean }[] = []
   videoQuotaDailyOptions: { value: string, label: string, disabled?: boolean }[] = []
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
index 94479321d..5d11ba7ce 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
@@ -1,5 +1,5 @@
 import { catchError, switchMap, tap } from 'rxjs/operators'
-import { EventEmitter, OnInit } from '@angular/core'
+import { EventEmitter, OnInit, Directive } from '@angular/core'
 import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core'
 import { populateAsyncUserVideoChannels } from '@app/helpers'
 import { FormReactive } from '@app/shared/shared-forms'
@@ -7,6 +7,7 @@ import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
 
+@Directive()
 export abstract class VideoSend extends FormReactive implements OnInit {
   userVideoChannels: { id: number, label: string, support: string }[] = []
   videoPrivacies: VideoConstant<VideoPrivacy>[] = []
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 38ec11b5b..e8447719a 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -3,6 +3,8 @@
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 
+$assets-path: '../assets';
+
 .peertube-container {
   padding-bottom: 20px;
 }
@@ -39,7 +41,7 @@
 
       &.icon-menu {
         background-color: pvar(--mainForegroundColor);
-        mask-image: url('../assets/images/misc/menu.svg');
+        mask-image: url('#{$assets-path}/images/misc/menu.svg');
         margin: 0 18px 0 20px;
       }
     }
@@ -62,7 +64,6 @@
 
       .icon.icon-logo {
         display: inline-block;
-        background-repeat: no-repeat;
         width: 23px;
         height: 24px;
         margin-right: .5rem;
diff --git a/client/src/app/shared/shared-instance/instance-follow.service.ts b/client/src/app/shared/shared-instance/instance-follow.service.ts
index 3c9ccc40f..e52660140 100644
--- a/client/src/app/shared/shared-instance/instance-follow.service.ts
+++ b/client/src/app/shared/shared-instance/instance-follow.service.ts
@@ -4,7 +4,7 @@ import { catchError, map } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor, RestPagination, RestService } from '@app/core'
-import { ActivityPubActorType, ActorFollow, FollowState, ResultList } from '@shared/index'
+import { ActivityPubActorType, ActorFollow, FollowState, ResultList } from '@shared/models'
 import { environment } from '../../../environments/environment'
 
 @Injectable()
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index ee3549695..edaefa9f2 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -1,4 +1,3 @@
-import { FfprobeData } from 'fluent-ffmpeg'
 import { Observable } from 'rxjs'
 import { catchError, map, switchMap } from 'rxjs/operators'
 import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http'
@@ -19,7 +18,8 @@ import {
   VideoFilter,
   VideoPrivacy,
   VideoSortField,
-  VideoUpdate
+  VideoUpdate,
+  VideoFileMetadata
 } from '@shared/models'
 import { environment } from '../../../../environments/environment'
 import { Account, AccountService } from '../account'
@@ -275,7 +275,7 @@ export class VideoService implements VideosProvider {
 
   getVideoFileMetadata (metadataUrl: string) {
     return this.authHttp
-               .get<FfprobeData>(metadataUrl)
+               .get<VideoFileMetadata>(metadataUrl)
                .pipe(
                  catchError(err => this.restExtractor.handleError(err))
                )
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.ts b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
index 38e0d0424..11e554978 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.ts
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
@@ -1,11 +1,12 @@
 import { SortMeta } from 'primeng/api'
-import { OnInit } from '@angular/core'
+import { OnInit, Directive } from '@angular/core'
 import { Notifier, RestPagination, RestTable } from '@app/core'
 import { Actor } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { AccountBlock } from './account-block.model'
 import { BlocklistComponentType, BlocklistService } from './blocklist.service'
 
+@Directive()
 export class GenericAccountBlocklistComponent extends RestTable implements OnInit {
   // @ts-ignore: "Abstract methods can only appear within an abstract class"
   abstract mode: BlocklistComponentType
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.ts b/client/src/app/shared/shared-moderation/server-blocklist.component.ts
index d904d0605..694b03762 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.ts
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.ts
@@ -1,11 +1,12 @@
 import { SortMeta } from 'primeng/api'
-import { OnInit, ViewChild } from '@angular/core'
+import { OnInit, ViewChild, Directive } from '@angular/core'
 import { BatchDomainsModalComponent } from '@app/shared/shared-moderation/batch-domains-modal.component'
 import { Notifier, RestPagination, RestTable } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerBlock } from '@shared/models'
 import { BlocklistComponentType, BlocklistService } from './blocklist.service'
 
+@Directive()
 export class GenericServerBlocklistComponent extends RestTable implements OnInit {
   @ViewChild('batchDomainsModal') batchDomainsModal: BatchDomainsModalComponent
 
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
index 0ef842652..405af5fa6 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
@@ -1,6 +1,6 @@
 import { fromEvent, Observable, Subject, Subscription } from 'rxjs'
 import { debounceTime, switchMap, tap } from 'rxjs/operators'
-import { OnDestroy, OnInit } from '@angular/core'
+import { OnDestroy, OnInit, Directive } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
   AuthService,
@@ -30,6 +30,7 @@ enum GroupDate {
   OLDER = 5
 }
 
+@Directive()
 export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook {
   pagination: ComponentPaginationLight = {
     currentPage: 1,
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index 21df8b674..4fd06eacf 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -1,4 +1,3 @@
-import { FfprobeFormat, FfprobeStream } from 'fluent-ffmpeg'
 import { mapValues, pick } from 'lodash-es'
 import { BytesPipe } from 'ngx-pipes'
 import { Component, ElementRef, ViewChild } from '@angular/core'
@@ -144,7 +143,7 @@ export class VideoDownloadComponent {
     this.type = type
   }
 
-  getMetadataFormat (format: FfprobeFormat) {
+  getMetadataFormat (format: any) {
     const keyToTranslateFunction = {
       'encoder': (value: string) => ({ label: this.i18n('Encoder'), value }),
       'format_long_name': (value: string) => ({ label: this.i18n('Format name'), value }),
@@ -165,7 +164,7 @@ export class VideoDownloadComponent {
     )
   }
 
-  getMetadataStream (streams: FfprobeStream[], type: 'video' | 'audio') {
+  getMetadataStream (streams: any[], type: 'video' | 'audio') {
     const stream = streams.find(s => s.codec_type === type)
     if (!stream) return undefined
 
@@ -201,6 +200,7 @@ export class VideoDownloadComponent {
   private hydrateMetadataFromMetadataUrl (file: VideoFile) {
     const observable = this.videoService.getVideoFileMetadata(file.metadataUrl)
     observable.subscribe(res => file.metadata = res)
+
     return observable.toPromise()
   }
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index f434550dd..3c7046de5 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -12,7 +12,7 @@ import {
 } from '@angular/core'
 import { AuthService, ScreenService, ServerService, User } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '../../../../../shared'
+import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
 import { Video } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element.model.ts b/client/src/app/shared/shared-video-playlist/video-playlist-element.model.ts
index 27a79d1fd..f25f10ede 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element.model.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element.model.ts
@@ -1,5 +1,5 @@
-import { VideoPlaylistElement as ServerVideoPlaylistElement, VideoPlaylistElementType } from '../../../../../shared/models/videos'
 import { Video } from '@app/shared/shared-main'
+import { VideoPlaylistElement as ServerVideoPlaylistElement, VideoPlaylistElementType } from '@shared/models'
 
 export class VideoPlaylistElement implements ServerVideoPlaylistElement {
   id: number
diff --git a/client/src/assets/player/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
index 9e2ac1aa4..51acad670 100644
--- a/client/src/assets/player/p2p-media-loader/hls-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
@@ -13,7 +13,7 @@ type Metadata = {
   levels: Hlsjs.Level[]
 }
 
-type CustomAudioTrack = AudioTrack & { name?: string, lang?: string }
+type CustomAudioTrack = Hlsjs.AudioTrack & { name?: string, lang?: string }
 
 const registerSourceHandler = function (vjs: typeof videojs) {
   if (!Hlsjs.isSupported()) {
@@ -180,8 +180,6 @@ class Html5Hlsjs {
     this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange)
     this.uiTextTrackHandled = false
 
-    this.player.audioTracks().removeEventListener('change', this.handlers.audioTracksChange)
-
     this.hls.destroy()
   }
 
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index f12fb09ae..e9597dde1 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -19,9 +19,7 @@ import './videojs-components/settings-panel'
 import './videojs-components/settings-panel-child'
 import './videojs-components/theater-button'
 import videojs from 'video.js'
-
-import { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
-import { VideoFile } from '../../../../shared/models/videos'
+import { isDefaultLocale, VideoFile } from '@shared/models'
 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
 import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
 import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index cb7d6f6b4..9c81fd5bc 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -41,8 +41,6 @@ declare module 'video.js' {
       tracks_: (TextTrack & { id: string, label: string, src: string })[]
     }
 
-    audioTracks (): AudioTrackList
-
     dock (options: { title: string, description: string }): void
   }
 }
diff --git a/client/src/assets/player/translations-manager.ts b/client/src/assets/player/translations-manager.ts
index e9f300ce7..2bde7d6ca 100644
--- a/client/src/assets/player/translations-manager.ts
+++ b/client/src/assets/player/translations-manager.ts
@@ -1,4 +1,4 @@
-import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models'
+import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '@shared/models'
 
 export class TranslationsManager {
   private static videojsLocaleCache: { [ path: string ]: any } = {}
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index 3135f4e6c..20d97c7e2 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -1,4 +1,4 @@
-import { VideoFile } from '../../../../shared/models/videos'
+import { VideoFile } from '@shared/models'
 
 function toTitleCase (str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 4c7e6b396..eacfad30b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -8,7 +8,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
 @import '~video.js/dist/video-js.css';
 
-$assets-path: '../assets/';
+$assets-path: '../../assets/';
 @import './player/index';
 @import './loading-bar';
 
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 5bf38a04c..def607916 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,24 +1,19 @@
 import './embed.scss'
-
+import videojs from 'video.js'
+import { objectToUrlEncoded, peertubeLocalStorage, PureAuthUser } from '@root-helpers/index'
 import {
   peertubeTranslate,
   ResultList,
   ServerConfig,
+  UserRefreshToken,
+  VideoCaption,
   VideoDetails,
-  UserRefreshToken
-} from '../../../../shared'
-import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
-import {
-  P2PMediaLoaderOptions,
-  PeertubePlayerManagerOptions,
-  PlayerMode
-} from '../../assets/player/peertube-player-manager'
-import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
-import { PeerTubeEmbedApi } from './embed-api'
-import { TranslationsManager } from '../../assets/player/translations-manager'
-import videojs from 'video.js'
+  VideoStreamingPlaylistType
+} from '../../../../shared/models'
+import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager'
 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
-import { PureAuthUser, objectToUrlEncoded, peertubeLocalStorage } from '@root-helpers/index'
+import { TranslationsManager } from '../../assets/player/translations-manager'
+import { PeerTubeEmbedApi } from './embed-api'
 
 type Translations = { [ id: string ]: string }