Fix test embed page

8 files changed, 96 insertions, 18 deletions

diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index c44c184d5..c3f863f72 100644
--- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -77,6 +77,10 @@ class P2pMediaLoaderPlugin extends Plugin {
     clearInterval(this.networkInfoInterval)
   }
 
+  getHLSJS () {
+    return this.hlsjs
+  }
+
   private initialize () {
     initHlsJsPlayer(this.hlsjs)
 
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index 5101b5162..35cf85c99 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -229,6 +229,10 @@ class WebTorrentPlugin extends Plugin {
     this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.getCurrentResolutionId() })
   }
 
+  isAutoResolutionPossible () {
+    return this.autoResolutionPossible
+  }
+
   getTorrent () {
     return this.torrent
   }
diff --git a/client/src/standalone/player/definitions.ts b/client/src/standalone/player/definitions.ts
index afd10541b..9fe903260 100644
--- a/client/src/standalone/player/definitions.ts
+++ b/client/src/standalone/player/definitions.ts
@@ -4,11 +4,15 @@ export type PlayerEventType =
   'pause' | 'play' |
   'playbackStatusUpdate' |
   'playbackStatusChange' |
-  'resolutionUpdate'
+  'resolutionUpdate' |
+  'volumeChange'
 
 export interface PeerTubeResolution {
   id: any
   label: string
-  src: string
   active: boolean
+  height: number
+
+  src?: string
+  width?: number
 }
diff --git a/client/src/standalone/player/player.ts b/client/src/standalone/player/player.ts
index 91a5e73f3..f33539134 100644
--- a/client/src/standalone/player/player.ts
+++ b/client/src/standalone/player/player.ts
@@ -7,7 +7,8 @@ const PASSTHROUGH_EVENTS = [
   'play',
   'playbackStatusUpdate',
   'playbackStatusChange',
-  'resolutionUpdate'
+  'resolutionUpdate',
+  'volumeChange'
 ]
 
 /**
@@ -100,7 +101,7 @@ export class PeerTubePlayer {
    * @param value A number from 0 to 1
    */
   async getVolume (): Promise<number> {
-    return this.sendMessage<void, number>('setVolume')
+    return this.sendMessage<void, number>('getVolume')
   }
 
   /**
diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index 259113215..61e5d0b9a 100644
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -11,7 +11,7 @@ import { PeerTubeEmbed } from './embed'
 export class PeerTubeEmbedApi {
   private channel: Channel.MessagingChannel
   private isReady = false
-  private resolutions: PeerTubeResolution[] = null
+  private resolutions: PeerTubeResolution[] = []
 
   constructor (private embed: PeerTubeEmbed) {
   }
@@ -35,28 +35,40 @@ export class PeerTubeEmbedApi {
     channel.bind('play', (txn, params) => this.embed.player.play())
     channel.bind('pause', (txn, params) => this.embed.player.pause())
     channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
+
     channel.bind('setVolume', (txn, value) => this.embed.player.volume(value))
     channel.bind('getVolume', (txn, value) => this.embed.player.volume())
+
     channel.bind('isReady', (txn, params) => this.isReady)
+
     channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
     channel.bind('getResolutions', (txn, params) => this.resolutions)
+
     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.playerOptions.playbackRates)
+    channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
     this.channel = channel
   }
 
   private setResolution (resolutionId: number) {
-    if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionForbidden()) return
+    console.log('set resolution %d', resolutionId)
+
+    if (this.isWebtorrent()) {
+      if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
+
+      // Auto resolution
+      if (resolutionId === -1) {
+        this.embed.player.webtorrent().enableAutoResolution()
+        return
+      }
+
+      this.embed.player.webtorrent().disableAutoResolution()
+      this.embed.player.webtorrent().updateResolution(resolutionId)
 
-    // Auto resolution
-    if (resolutionId === -1) {
-      this.embed.player.webtorrent().enableAutoResolution()
       return
     }
 
-    this.embed.player.webtorrent().disableAutoResolution()
-    this.embed.player.webtorrent().updateResolution(resolutionId)
+    this.embed.player.p2pMediaLoader().getHLSJS().nextLevel = resolutionId
   }
 
   /**
@@ -96,14 +108,24 @@ export class PeerTubeEmbedApi {
 
     // PeerTube specific capabilities
 
-    if (this.embed.player.webtorrent) {
+    if (this.isWebtorrent()) {
       this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
       this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
+    } else {
+      this.embed.player.p2pMediaLoader().on('resolutionChange', () => this.loadP2PMediaLoaderResolutions())
     }
+
+    this.embed.player.on('volumechange', () => {
+      this.channel.notify({
+        method: 'volumeChange',
+        params: this.embed.player.volume()
+      })
+    })
   }
 
   private loadWebTorrentResolutions () {
-    const resolutions = []
+    this.resolutions = []
+
     const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
 
     for (const videoFile of this.embed.player.webtorrent().videoFiles) {
@@ -112,18 +134,46 @@ export class PeerTubeEmbedApi {
         label += videoFile.fps
       }
 
-      resolutions.push({
+      this.resolutions.push({
         id: videoFile.resolution.id,
         label,
         src: videoFile.magnetUri,
-        active: videoFile.resolution.id === currentResolutionId
+        active: videoFile.resolution.id === currentResolutionId,
+        height: videoFile.resolution.id
       })
     }
 
-    this.resolutions = resolutions
     this.channel.notify({
       method: 'resolutionUpdate',
       params: this.resolutions
     })
   }
+
+  private loadP2PMediaLoaderResolutions () {
+    this.resolutions = []
+
+    const qualityLevels = this.embed.player.qualityLevels()
+    const currentResolutionId = this.embed.player.qualityLevels().selectedIndex
+
+    for (let i = 0; i < qualityLevels.length; i++) {
+      const level = qualityLevels[i]
+
+      this.resolutions.push({
+        id: level.id,
+        label: level.height + 'p',
+        active: level.id === currentResolutionId,
+        width: level.width,
+        height: level.height
+      })
+    }
+
+    this.channel.notify({
+      method: 'resolutionUpdate',
+      params: this.resolutions
+    })
+  }
+
+  private isWebtorrent () {
+    return this.embed.player.webtorrent
+  }
 }
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index f33dd8869..c91ae08b9 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -23,7 +23,6 @@ import { TranslationsManager } from '../../assets/player/translations-manager'
 export class PeerTubeEmbed {
   videoElement: HTMLVideoElement
   player: any
-  playerOptions: any
   api: PeerTubeEmbedApi = null
   autoplay: boolean
   controls: boolean
diff --git a/client/src/standalone/videos/test-embed.html b/client/src/standalone/videos/test-embed.html
index a60ba2899..20cdbdc5f 100644
--- a/client/src/standalone/videos/test-embed.html
+++ b/client/src/standalone/videos/test-embed.html
@@ -25,6 +25,8 @@
         <button onclick="player.play()">Play</button>
         <button onclick="player.pause()">Pause</button>
         <button onclick="player.seek(parseInt(prompt('Enter position to seek to (in seconds)')))">Seek</button>
+        <button onclick="player.setVolume(0)">Mute</button>
+        <button onclick="player.setVolume(1)">Unmute</button>
       </div>
       <br/>
 
@@ -39,6 +41,11 @@
           <legend>Rates:</legend>
           <div id="rate-list"></div>
         </fieldset>
+
+        <fieldset>
+          <legend>Volume</legend>
+          <div id="volume"></div>
+        </fieldset>
       </div>
 
     </div>
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts
index 8e83d92a9..e5e6365dc 100644
--- a/client/src/standalone/videos/test-embed.ts
+++ b/client/src/standalone/videos/test-embed.ts
@@ -9,6 +9,7 @@ window.addEventListener('load', async () => {
 
   const iframe = document.createElement('iframe')
   iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1`
+
   const mainElement = document.querySelector('#host')
   mainElement.appendChild(iframe)
 
@@ -93,4 +94,12 @@ window.addEventListener('load', async () => {
     resolutions => updateResolutions(resolutions))
   player.addEventListener('resolutionUpdate',
     resolutions => updateResolutions(resolutions))
+
+  const updateVolume = (volume: number) => {
+    const volumeEl = document.getElementById('volume')
+    volumeEl.innerText = (volume * 100) + '%'
+  }
+
+  player.getVolume().then(volume => updateVolume(volume))
+  player.addEventListener('volumeChange', volume => updateVolume(volume))
 })