Add/update/delete/list my playlists

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / video-watch.component.ts

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 f77316712ee44b2e8c86dee473ba8f8fad534137..0f04441ba02eb66d888bd633cae38751f712209b 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -8,7 +8,6 @@ import { MetaService } from '@ngx-meta/core'
 import { Notifier, ServerService } from '@app/core'
 import { forkJoin, Subscription } from 'rxjs'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
-import * as WebTorrent from 'webtorrent'
 import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
 import { AuthService, ConfirmService } from '../../core'
 import { RestExtractor, VideoBlacklistService } from '../../shared'
@@ -23,7 +22,12 @@ 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 { P2PMediaLoaderOptions, PeertubePlayerManager, PlayerMode, WebtorrentOptions } from '../../../assets/player/peertube-player-manager'
+import {
+  P2PMediaLoaderOptions,
+  PeertubePlayerManager,
+  PeertubePlayerManagerOptions,
+  PlayerMode
+} from '../../../assets/player/peertube-player-manager'
 
 @Component({
   selector: 'my-video-watch',
@@ -85,7 +89,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   ngOnInit () {
     if (
-      WebTorrent.WEBRTC_SUPPORT === false ||
+      !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false ||
       peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
     ) {
       this.hasAlreadyAcceptedPrivacyConcern = true
@@ -111,8 +115,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         .subscribe(([ video, captionsResult ]) => {
           const startTime = this.route.snapshot.queryParams.start
           const subtitle = this.route.snapshot.queryParams.subtitle
+          const playerMode = this.route.snapshot.queryParams.mode
 
-          this.onVideoFetched(video, captionsResult.data, { startTime, subtitle })
+          this.onVideoFetched(video, captionsResult.data, { startTime, subtitle, playerMode })
               .catch(err => this.handleError(err))
         })
     })
@@ -303,6 +308,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video && this.video.state.id === VideoState.TO_TRANSCODE
   }
 
+  isVideoDownloadable () {
+    return this.video && this.video.downloadEnabled
+  }
+
   isVideoToImport () {
     return this.video && this.video.state.id === VideoState.TO_IMPORT
   }
@@ -316,8 +325,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.setVideoDescriptionHTML()
   }
 
-  private setVideoDescriptionHTML () {
-    this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description)
+  private async setVideoDescriptionHTML () {
+    this.videoHTMLDescription = await this.markdownService.textMarkdownToHTML(this.video.description)
   }
 
   private setVideoLikesBarTooltipText () {
@@ -359,7 +368,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         )
   }
 
-  private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], urlOptions: { startTime: number, subtitle: string }) {
+  private async onVideoFetched (
+    video: VideoDetails,
+    videoCaptions: VideoCaption[],
+    urlOptions: { startTime?: number, subtitle?: string, playerMode?: string }
+  ) {
     this.video = video
 
     // Re init attributes
@@ -395,10 +408,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       src: environment.apiUrl + c.captionPath
     }))
 
-    const options = {
+    const options: PeertubePlayerManagerOptions = {
       common: {
         autoplay: this.isAutoplay(),
+
         playerElement: this.playerElement,
+        onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
+
         videoDuration: this.video.duration,
         enableHotkeys: true,
         inactivityTimeout: 2500,
@@ -424,13 +440,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         serverUrl: environment.apiUrl,
 
         videoCaptions: playerCaptions
+      },
+
+      webtorrent: {
+        videoFiles: this.video.files
       }
     }
 
-    let mode: PlayerMode
-    const hlsPlaylist = this.video.getHlsPlaylist()
-    if (hlsPlaylist) {
-      mode = 'p2p-media-loader'
+    const mode: PlayerMode = urlOptions.playerMode === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent'
+
+    if (mode === 'p2p-media-loader') {
+      const hlsPlaylist = this.video.getHlsPlaylist()
+
       const p2pMediaLoader = {
         playlistUrl: hlsPlaylist.playlistUrl,
         segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
@@ -440,13 +461,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       } 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 () => {