5 files changed, 119 insertions, 94 deletions

diff --git a/client/src/standalone/player/definitions.ts b/client/src/standalone/player/definitions.ts
index 7f9ef9b6f..afd10541b 100644
--- a/client/src/standalone/player/definitions.ts
+++ b/client/src/standalone/player/definitions.ts
@@ -1,6 +1,4 @@
-export interface EventHandler<T> {
-  (ev: T): void
-}
+export type EventHandler<T> = (ev: T) => void
 
 export type PlayerEventType =
   'pause' | 'play' |
diff --git a/client/src/standalone/player/events.ts b/client/src/standalone/player/events.ts
index f1639ef19..28a13c727 100644
--- a/client/src/standalone/player/events.ts
+++ b/client/src/standalone/player/events.ts
@@ -13,13 +13,13 @@ export class EventRegistrar {
   private eventRegistrations: PlayerEventRegistrationMap = {}
 
   public bindToChannel (channel: Channel.MessagingChannel) {
-    for (let name of Object.keys(this.eventRegistrations)) {
+    for (const name of Object.keys(this.eventRegistrations)) {
       channel.bind(name, (txn, params) => this.fire(name, params))
     }
   }
 
   public registerTypes (names: string[]) {
-    for (let name of names) {
+    for (const name of names) {
       this.eventRegistrations[ name ] = { registrations: [] }
     }
   }
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index f79cf68df..c3b6e08ca 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="robots" content="noindex">
+    <meta property="og:platform" content="PeerTube" />
 
     <link rel="icon" type="image/png" href="/client/assets/images/favicon.png" />
   </head>
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 54b8fb543..707f04253 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,33 +1,18 @@
 import './embed.scss'
 
-import 'core-js/es6/symbol'
-import 'core-js/es6/object'
-import 'core-js/es6/function'
-import 'core-js/es6/parse-int'
-import 'core-js/es6/parse-float'
-import 'core-js/es6/number'
-import 'core-js/es6/math'
-import 'core-js/es6/string'
-import 'core-js/es6/date'
-import 'core-js/es6/array'
-import 'core-js/es6/regexp'
-import 'core-js/es6/map'
-import 'core-js/es6/weak-map'
-import 'core-js/es6/set'
-// For google bot that uses Chrome 41 and does not understand fetch
-import 'whatwg-fetch'
-
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as vjs from 'video.js'
-
 import * as Channel from 'jschannel'
 
-import { peertubeTranslate, ResultList, VideoDetails } from '../../../../shared'
-import { addContextMenu, getServerTranslations, getVideojsOptions, loadLocaleInVideoJS } from '../../assets/player/peertube-player'
+import { peertubeTranslate, ResultList, ServerConfig, VideoDetails } from '../../../../shared'
 import { PeerTubeResolution } from '../player/definitions'
 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
 import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
+import {
+  P2PMediaLoaderOptions,
+  PeertubePlayerManager,
+  PeertubePlayerManagerOptions,
+  PlayerMode
+} from '../../assets/player/peertube-player-manager'
+import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
 
 /**
  * Embed API exposes control of the embed player to the outside world via
@@ -55,7 +40,7 @@ class PeerTubeEmbedApi {
   }
 
   private constructChannel () {
-    let channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.scope })
+    const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.scope })
 
     channel.bind('play', (txn, params) => this.embed.player.play())
     channel.bind('pause', (txn, params) => this.embed.player.pause())
@@ -73,16 +58,16 @@ class PeerTubeEmbedApi {
   }
 
   private setResolution (resolutionId: number) {
-    if (resolutionId === -1 && this.embed.player.peertube().isAutoResolutionForbidden()) return
+    if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionForbidden()) return
 
     // Auto resolution
     if (resolutionId === -1) {
-      this.embed.player.peertube().enableAutoResolution()
+      this.embed.player.webtorrent().enableAutoResolution()
       return
     }
 
-    this.embed.player.peertube().disableAutoResolution()
-    this.embed.player.peertube().updateResolution(resolutionId)
+    this.embed.player.webtorrent().disableAutoResolution()
+    this.embed.player.webtorrent().updateResolution(resolutionId)
   }
 
   /**
@@ -97,8 +82,8 @@ class PeerTubeEmbedApi {
     let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
 
     setInterval(() => {
-      let position = this.element.currentTime
-      let volume = this.element.volume
+      const position = this.element.currentTime
+      const volume = this.element.volume
 
       this.channel.notify({
         method: 'playbackStatusUpdate',
@@ -122,15 +107,17 @@ class PeerTubeEmbedApi {
 
     // PeerTube specific capabilities
 
-    this.embed.player.peertube().on('autoResolutionUpdate', () => this.loadResolutions())
-    this.embed.player.peertube().on('videoFileUpdate', () => this.loadResolutions())
+    if (this.embed.player.webtorrent) {
+      this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
+      this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
+    }
   }
 
-  private loadResolutions () {
-    let resolutions = []
-    let currentResolutionId = this.embed.player.peertube().getCurrentResolutionId()
+  private loadWebTorrentResolutions () {
+    const resolutions = []
+    const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
 
-    for (const videoFile of this.embed.player.peertube().videoFiles) {
+    for (const videoFile of this.embed.player.webtorrent().videoFiles) {
       let label = videoFile.resolution.label
       if (videoFile.fps && videoFile.fps >= 50) {
         label += videoFile.fps
@@ -164,6 +151,8 @@ class PeerTubeEmbed {
   subtitle: string
   enableApi = false
   startTime: number | string = 0
+  stopTime: number | string
+  mode: PlayerMode
   scope = 'peertube'
 
   static async main () {
@@ -188,6 +177,10 @@ class PeerTubeEmbed {
     return fetch(this.getVideoUrl(videoId) + '/captions')
   }
 
+  loadConfig (): Promise<Response> {
+    return fetch('/api/v1/config')
+  }
+
   removeElement (element: HTMLElement) {
     element.parentElement.removeChild(element)
   }
@@ -246,17 +239,20 @@ class PeerTubeEmbed {
 
   private loadParams () {
     try {
-      let params = new URL(window.location.toString()).searchParams
+      const params = new URL(window.location.toString()).searchParams
 
-      this.autoplay = this.getParamToggle(params, 'autoplay')
-      this.controls = this.getParamToggle(params, 'controls')
-      this.muted = this.getParamToggle(params, 'muted')
-      this.loop = this.getParamToggle(params, 'loop')
+      this.autoplay = this.getParamToggle(params, 'autoplay', false)
+      this.controls = this.getParamToggle(params, 'controls', true)
+      this.muted = this.getParamToggle(params, 'muted', false)
+      this.loop = this.getParamToggle(params, 'loop', false)
       this.enableApi = this.getParamToggle(params, 'api', this.enableApi)
 
       this.scope = this.getParamString(params, 'scope', this.scope)
       this.subtitle = this.getParamString(params, 'subtitle')
       this.startTime = this.getParamString(params, 'start')
+      this.stopTime = this.getParamString(params, 'stop')
+
+      this.mode = this.getParamString(params, 'mode') === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent'
     } catch (err) {
       console.error('Cannot get params from URL.', err)
     }
@@ -266,11 +262,11 @@ class PeerTubeEmbed {
     const urlParts = window.location.pathname.split('/')
     const videoId = urlParts[ urlParts.length - 1 ]
 
-    const [ , serverTranslations, videoResponse, captionsResponse ] = await Promise.all([
-      loadLocaleInVideoJS(window.location.origin, vjs, navigator.language),
-      getServerTranslations(window.location.origin, navigator.language),
+    const [ serverTranslations, videoResponse, captionsResponse, configResponse ] = await Promise.all([
+      PeertubePlayerManager.getServerTranslations(window.location.origin, navigator.language),
       this.loadVideoInfo(videoId),
-      this.loadVideoCaptions(videoId)
+      this.loadVideoCaptions(videoId),
+      this.loadConfig()
     ])
 
     if (!videoResponse.ok) {
@@ -292,43 +288,73 @@ class PeerTubeEmbed {
 
     this.loadParams()
 
-    const videojsOptions = getVideojsOptions({
-      autoplay: this.autoplay,
-      controls: this.controls,
-      muted: this.muted,
-      loop: this.loop,
-      startTime: this.startTime,
-      subtitle: this.subtitle,
-
-      videoCaptions,
-      inactivityTimeout: 1500,
-      videoViewUrl: this.getVideoUrl(videoId) + '/views',
-      playerElement: this.videoElement,
-      videoFiles: videoInfo.files,
-      videoDuration: videoInfo.duration,
-      enableHotkeys: true,
-      peertubeLink: true,
-      poster: window.location.origin + videoInfo.previewPath,
-      theaterMode: false
-    })
+    const options: PeertubePlayerManagerOptions = {
+      common: {
+        autoplay: this.autoplay,
+        controls: this.controls,
+        muted: this.muted,
+        loop: this.loop,
+        captions: videoCaptions.length !== 0,
+        startTime: this.startTime,
+        stopTime: this.stopTime,
+        subtitle: this.subtitle,
+
+        videoCaptions,
+        inactivityTimeout: 1500,
+        videoViewUrl: this.getVideoUrl(videoId) + '/views',
+
+        playerElement: this.videoElement,
+        onPlayerElementChange: (element: HTMLVideoElement) => this.videoElement = element,
+
+        videoDuration: videoInfo.duration,
+        enableHotkeys: true,
+        peertubeLink: true,
+        poster: window.location.origin + videoInfo.previewPath,
+        theaterMode: false,
+
+        serverUrl: window.location.origin,
+        language: navigator.language,
+        embedUrl: window.location.origin + videoInfo.embedPath
+      },
+
+      webtorrent: {
+        videoFiles: videoInfo.files
+      }
+    }
 
-    this.playerOptions = videojsOptions
-    this.player = vjs(this.videoContainerId, videojsOptions, () => {
-      this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
+    if (this.mode === 'p2p-media-loader') {
+      const hlsPlaylist = videoInfo.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
+
+      Object.assign(options, {
+        p2pMediaLoader: {
+          playlistUrl: hlsPlaylist.playlistUrl,
+          segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+          redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+          trackerAnnounce: videoInfo.trackerUrls,
+          videoFiles: videoInfo.files
+        } as P2PMediaLoaderOptions
+      })
+    }
 
-      window[ 'videojsPlayer' ] = this.player
+    this.player = await PeertubePlayerManager.initialize(this.mode, options)
 
-      if (this.controls) {
-        this.player.dock({
-          title: videoInfo.name,
-          description: this.player.localize('Uses P2P, others may know your IP is downloading this video.')
-        })
-      }
+    this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
 
-      addContextMenu(this.player, window.location.origin + videoInfo.embedPath)
+    window[ 'videojsPlayer' ] = this.player
 
-      this.initializeApi()
-    })
+    if (this.controls) {
+      const config: ServerConfig = await configResponse.json()
+      const description = config.tracker.enabled
+        ? '<span class="text">' + this.player.localize('Uses P2P, others may know your IP is downloading this video.') + '</span>'
+        : undefined
+
+      this.player.dock({
+        title: videoInfo.name,
+        description
+      })
+    }
+
+    this.initializeApi()
   }
 
   private handleError (err: Error, translations?: { [ id: string ]: string }) {
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts
index 30a298573..8e83d92a9 100644
--- a/client/src/standalone/videos/test-embed.ts
+++ b/client/src/standalone/videos/test-embed.ts
@@ -7,13 +7,13 @@ window.addEventListener('load', async () => {
   const lastPart = urlParts[ urlParts.length - 1 ]
   const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ]
 
-  let iframe = document.createElement('iframe')
+  const iframe = document.createElement('iframe')
   iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1`
-  let mainElement = document.querySelector('#host')
+  const mainElement = document.querySelector('#host')
   mainElement.appendChild(iframe)
 
   console.log(`Document finished loading.`)
-  let player = new PeerTubePlayer(document.querySelector('iframe'))
+  const player = new PeerTubePlayer(document.querySelector('iframe'))
 
   window[ 'player' ] = player
 
@@ -21,7 +21,7 @@ window.addEventListener('load', async () => {
   await player.ready
   console.log(`Player is ready.`)
 
-  let monitoredEvents = [
+  const monitoredEvents = [
     'pause',
     'play',
     'playbackStatusUpdate',
@@ -36,18 +36,18 @@ window.addEventListener('load', async () => {
   let playbackRates: number[] = []
   let currentRate = await player.getPlaybackRate()
 
-  let updateRates = async () => {
-    let rateListEl = document.querySelector('#rate-list')
+  const updateRates = async () => {
+    const rateListEl = document.querySelector('#rate-list')
     rateListEl.innerHTML = ''
 
     playbackRates.forEach(rate => {
       if (currentRate === rate) {
-        let itemEl = document.createElement('strong')
+        const itemEl = document.createElement('strong')
         itemEl.innerText = `${rate} (active)`
         itemEl.style.display = 'block'
         rateListEl.appendChild(itemEl)
       } else {
-        let itemEl = document.createElement('a')
+        const itemEl = document.createElement('a')
         itemEl.href = 'javascript:;'
         itemEl.innerText = rate.toString()
         itemEl.addEventListener('click', () => {
@@ -66,18 +66,18 @@ window.addEventListener('load', async () => {
     updateRates()
   })
 
-  let updateResolutions = ((resolutions: PeerTubeResolution[]) => {
-    let resolutionListEl = document.querySelector('#resolution-list')
+  const updateResolutions = ((resolutions: PeerTubeResolution[]) => {
+    const resolutionListEl = document.querySelector('#resolution-list')
     resolutionListEl.innerHTML = ''
 
     resolutions.forEach(resolution => {
       if (resolution.active) {
-        let itemEl = document.createElement('strong')
+        const itemEl = document.createElement('strong')
         itemEl.innerText = `${resolution.label} (active)`
         itemEl.style.display = 'block'
         resolutionListEl.appendChild(itemEl)
       } else {
-        let itemEl = document.createElement('a')
+        const itemEl = document.createElement('a')
         itemEl.href = 'javascript:;'
         itemEl.innerText = resolution.label
         itemEl.addEventListener('click', () => {