Add hls support on server

4 files changed, 45 insertions, 7 deletions

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 0b3511e8e..021b1feb4 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -22,7 +22,9 @@ export abstract class UserEdit extends FormReactive {
   }
 
   computeQuotaWithTranscoding () {
-    const resolutions = this.serverService.getConfig().transcoding.enabledResolutions
+    const transcodingConfig = this.serverService.getConfig().transcoding
+
+    const resolutions = transcodingConfig.enabledResolutions
     const higherResolution = VideoResolution.H_1080P
     let multiplier = 0
 
@@ -30,6 +32,8 @@ export abstract class UserEdit extends FormReactive {
       multiplier += resolution / higherResolution
     }
 
+    if (transcodingConfig.hls.enabled) multiplier *= 2
+
     return multiplier * parseInt(this.form.value['videoQuota'], 10)
   }
 
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 4ae72427b..c868ccdcc 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -51,7 +51,10 @@ export class ServerService {
       requiresEmailVerification: false
     },
     transcoding: {
-      enabledResolutions: []
+      enabledResolutions: [],
+      hls: {
+        enabled: false
+      }
     },
     avatar: {
       file: {
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index fa4ca7f93..f44b4138b 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -3,6 +3,8 @@ import { AuthUser } from '../../core'
 import { Video } from '../../shared/video/video.model'
 import { Account } from '@app/shared/account/account.model'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoStreamingPlaylist } from '../../../../../shared/models/videos/video-streaming-playlist.model'
+import { VideoStreamingPlaylistType } from '../../../../../shared/models/videos/video-streaming-playlist.type'
 
 export class VideoDetails extends Video implements VideoDetailsServerModel {
   descriptionPath: string
@@ -19,6 +21,10 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   likesPercent: number
   dislikesPercent: number
 
+  trackerUrls: string[]
+
+  streamingPlaylists: VideoStreamingPlaylist[]
+
   constructor (hash: VideoDetailsServerModel, translations = {}) {
     super(hash, translations)
 
@@ -30,6 +36,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.support = hash.support
     this.commentsEnabled = hash.commentsEnabled
 
+    this.trackerUrls = hash.trackerUrls
+    this.streamingPlaylists = hash.streamingPlaylists
+
     this.buildLikeAndDislikePercents()
   }
 
@@ -53,4 +62,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
     this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
   }
+
+  getHlsPlaylist () {
+    return this.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
+  }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 6e38af195..f77316712 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -23,7 +23,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { environment } from '../../../environments/environment'
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { MarkdownService } from '@app/shared/renderer'
-import { PeertubePlayerManager } from '../../../assets/player/peertube-player-manager'
+import { P2PMediaLoaderOptions, PeertubePlayerManager, PlayerMode, WebtorrentOptions } from '../../../assets/player/peertube-player-manager'
 
 @Component({
   selector: 'my-video-watch',
@@ -424,15 +424,33 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         serverUrl: environment.apiUrl,
 
         videoCaptions: playerCaptions
-      },
+      }
+    }
 
-      webtorrent: {
+    let mode: PlayerMode
+    const hlsPlaylist = this.video.getHlsPlaylist()
+    if (hlsPlaylist) {
+      mode = 'p2p-media-loader'
+      const p2pMediaLoader = {
+        playlistUrl: hlsPlaylist.playlistUrl,
+        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+        trackerAnnounce: this.video.trackerUrls,
         videoFiles: this.video.files
-      }
+      } as P2PMediaLoaderOptions
+
+      Object.assign(options, { p2pMediaLoader })
+    } else {
+      mode = 'webtorrent'
+      const webtorrent = {
+        videoFiles: this.video.files
+      } as WebtorrentOptions
+
+      Object.assign(options, { webtorrent })
     }
 
     this.zone.runOutsideAngular(async () => {
-      this.player = await PeertubePlayerManager.initialize('webtorrent', options)
+      this.player = await PeertubePlayerManager.initialize(mode, options)
       this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
     })