4 files changed, 94 insertions, 28 deletions

diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index 61e5d0b9a..a9263555d 100644
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -1,7 +1,7 @@
 import './embed.scss'
 
 import * as Channel from 'jschannel'
-import { PeerTubeResolution } from '../player/definitions'
+import { PeerTubeResolution, PeerTubeTextTrack } from '../player/definitions'
 import { PeerTubeEmbed } from './embed'
 
 /**
@@ -44,6 +44,9 @@ export class PeerTubeEmbedApi {
     channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
     channel.bind('getResolutions', (txn, params) => this.resolutions)
 
+    channel.bind('getCaptions', (txn, params) => this.getCaptions())
+    channel.bind('setCaption', (txn, id) => this.setCaption(id)),
+
     channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
     channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
     channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
@@ -71,6 +74,26 @@ export class PeerTubeEmbedApi {
     this.embed.player.p2pMediaLoader().getHLSJS().nextLevel = resolutionId
   }
 
+  private getCaptions (): PeerTubeTextTrack[] {
+    return this.embed.player.textTracks().tracks_.map(t => {
+      return {
+        id: t.id,
+        src: t.src,
+        label: t.label,
+        mode: t.mode as any
+      }
+    })
+  }
+
+  private setCaption (id: string) {
+    const tracks = this.embed.player.textTracks().tracks_
+
+    for (const track of tracks) {
+      if (track.id === id) track.mode = 'showing'
+      else track.mode = 'disabled'
+    }
+  }
+
   /**
    * Let the host know that we're ready to go!
    */
@@ -80,17 +103,19 @@ export class PeerTubeEmbedApi {
   }
 
   private setupStateTracking () {
-    let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
+    let currentState: 'playing' | 'paused' | 'unstarted' | 'ended' = 'unstarted'
 
     setInterval(() => {
       const position = this.element.currentTime
       const volume = this.element.volume
+      const duration = this.element.duration
 
       this.channel.notify({
         method: 'playbackStatusUpdate',
         params: {
           position,
           volume,
+          duration: this.embed.player.duration(),
           playbackState: currentState
         }
       })
@@ -106,6 +131,11 @@ export class PeerTubeEmbedApi {
       this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
     })
 
+    this.element.addEventListener('ended', ev => {
+      currentState = 'ended'
+      this.channel.notify({ method: 'playbackStatusChange', params: 'ended' })
+    })
+
     // PeerTube specific capabilities
 
     if (this.isWebtorrent()) {
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 5213443fc..286757e5e 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,15 +1,11 @@
 import './embed.scss'
 
 import {
-  getCompleteLocale,
-  is18nLocale,
-  isDefaultLocale,
   peertubeTranslate,
   ResultList,
   ServerConfig,
   VideoDetails
 } from '../../../../shared'
-import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
 import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
 import {
   P2PMediaLoaderOptions,
@@ -19,10 +15,14 @@ import {
 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'
+import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
+
+type Translations = { [ id: string ]: string }
 
 export class PeerTubeEmbed {
   videoElement: HTMLVideoElement
-  player: any
+  player: videojs.Player
   api: PeerTubeEmbedApi = null
   autoplay: boolean
   controls: boolean
@@ -71,7 +71,7 @@ export class PeerTubeEmbed {
     element.parentElement.removeChild(element)
   }
 
-  displayError (text: string, translations?: { [ id: string ]: string }) {
+  displayError (text: string, translations?: Translations) {
     // Remove video element
     if (this.videoElement) this.removeElement(this.videoElement)
 
@@ -90,12 +90,12 @@ export class PeerTubeEmbed {
     errorText.innerHTML = translatedText
   }
 
-  videoNotFound (translations?: { [ id: string ]: string }) {
+  videoNotFound (translations?: Translations) {
     const text = 'This video does not exist.'
     this.displayError(text, translations)
   }
 
-  videoFetchError (translations?: { [ id: string ]: string }) {
+  videoFetchError (translations?: Translations) {
     const text = 'We cannot fetch the video. Please try again later.'
     this.displayError(text, translations)
   }
@@ -129,7 +129,7 @@ export class PeerTubeEmbed {
 
       this.autoplay = this.getParamToggle(params, 'autoplay', false)
       this.controls = this.getParamToggle(params, 'controls', true)
-      this.muted = this.getParamToggle(params, 'muted', false)
+      this.muted = this.getParamToggle(params, 'muted', undefined)
       this.loop = this.getParamToggle(params, 'loop', false)
       this.title = this.getParamToggle(params, 'title', true)
       this.enableApi = this.getParamToggle(params, 'api', this.enableApi)
@@ -237,7 +237,7 @@ export class PeerTubeEmbed {
       })
     }
 
-    this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: any) => this.player = player)
+    this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: videojs.Player) => this.player = player)
     this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
 
     window[ 'videojsPlayer' ] = this.player
@@ -261,22 +261,22 @@ export class PeerTubeEmbed {
   }
 
   private async buildDock (videoInfo: VideoDetails, configResponse: Response) {
-    if (this.controls) {
-      // On webtorrent fallback, player may have been disposed
-      if (!this.player.player_) return
+    if (!this.controls) return
 
-      const title = this.title ? videoInfo.name : undefined
+    // On webtorrent fallback, player may have been disposed
+    if (!this.player.player_) return
 
-      const config: ServerConfig = await configResponse.json()
-      const description = config.tracker.enabled && this.warningTitle
-        ? '<span class="text">' + this.player.localize('Watching this video may reveal your IP address to others.') + '</span>'
-        : undefined
+    const title = this.title ? videoInfo.name : undefined
 
-      this.player.dock({
-        title,
-        description
-      })
-    }
+    const config: ServerConfig = await configResponse.json()
+    const description = config.tracker.enabled && this.warningTitle
+      ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
+      : undefined
+
+    this.player.dock({
+      title,
+      description
+    })
   }
 
   private buildCSS () {
diff --git a/client/src/standalone/videos/test-embed.html b/client/src/standalone/videos/test-embed.html
index 20cdbdc5f..9e1d6fc61 100644
--- a/client/src/standalone/videos/test-embed.html
+++ b/client/src/standalone/videos/test-embed.html
@@ -38,6 +38,12 @@
         </fieldset>
 
         <fieldset>
+          <legend>Captions:</legend>
+          <div id="caption-list"></div>
+          <br/>
+        </fieldset>
+
+        <fieldset>
           <legend>Rates:</legend>
           <div id="rate-list"></div>
         </fieldset>
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts
index e5e6365dc..24cb62230 100644
--- a/client/src/standalone/videos/test-embed.ts
+++ b/client/src/standalone/videos/test-embed.ts
@@ -1,6 +1,6 @@
 import './test-embed.scss'
 import { PeerTubePlayer } from '../player/player'
-import { PeerTubeResolution, PlayerEventType } from '../player/definitions'
+import { PeerTubeResolution, PlayerEventType, PeerTubeTextTrack } from '../player/definitions'
 
 window.addEventListener('load', async () => {
   const urlParts = window.location.href.split('/')
@@ -8,7 +8,7 @@ window.addEventListener('load', async () => {
   const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ]
 
   const iframe = document.createElement('iframe')
-  iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1`
+  iframe.src = `/videos/embed/${videoId}?api=1`
 
   const mainElement = document.querySelector('#host')
   mainElement.appendChild(iframe)
@@ -30,7 +30,7 @@ window.addEventListener('load', async () => {
   ]
 
   monitoredEvents.forEach(e => {
-    player.addEventListener(e as PlayerEventType, () => console.log(`PLAYER: event '${e}' received`))
+    player.addEventListener(e as PlayerEventType, (param) => console.log(`PLAYER: event '${e}' received`, param))
     console.log(`PLAYER: now listening for event '${e}'`)
   })
 
@@ -67,6 +67,36 @@ window.addEventListener('load', async () => {
     updateRates()
   })
 
+  const updateCaptions = async () => {
+    const captions = await player.getCaptions()
+
+    const captionEl = document.querySelector('#caption-list')
+    captionEl.innerHTML = ''
+
+    captions.forEach(c => {
+      console.log(c)
+
+      if (c.mode === 'showing') {
+        const itemEl = document.createElement('strong')
+        itemEl.innerText = `${c.label} (active)`
+        itemEl.style.display = 'block'
+        captionEl.appendChild(itemEl)
+      } else {
+        const itemEl = document.createElement('a')
+        itemEl.href = 'javascript:;'
+        itemEl.innerText = c.label
+        itemEl.addEventListener('click', () => {
+          player.setCaption(c.id)
+          updateCaptions()
+        })
+        itemEl.style.display = 'block'
+        captionEl.appendChild(itemEl)
+      }
+    })
+  }
+
+  updateCaptions()
+
   const updateResolutions = ((resolutions: PeerTubeResolution[]) => {
     const resolutionListEl = document.querySelector('#resolution-list')
     resolutionListEl.innerHTML = ''