Rename player embed api

8 files changed, 374 insertions, 0 deletions

diff --git a/client/src/standalone/embed-player-api/.npmignore b/client/src/standalone/embed-player-api/.npmignore
new file mode 100644
index 000000000..870b6315b
--- /dev/null
+++ b/client/src/standalone/embed-player-api/.npmignore
@@ -0,0 +1,3 @@
+tsconfig.json
+*.ts
+webpack.config.ts
diff --git a/client/src/standalone/embed-player-api/README.md b/client/src/standalone/embed-player-api/README.md
new file mode 100644
index 000000000..7b47e8f02
--- /dev/null
+++ b/client/src/standalone/embed-player-api/README.md
@@ -0,0 +1,3 @@
+# @peertube/embed-api
+
+See https://docs.joinpeertube.org/api/embed-player
diff --git a/client/src/standalone/embed-player-api/definitions.ts b/client/src/standalone/embed-player-api/definitions.ts
new file mode 100644
index 000000000..495f1a98c
--- /dev/null
+++ b/client/src/standalone/embed-player-api/definitions.ts
@@ -0,0 +1,25 @@
+export type EventHandler<T> = (ev: T) => void
+
+export type PlayerEventType =
+  'pause' | 'play' |
+  'playbackStatusUpdate' |
+  'playbackStatusChange' |
+  'resolutionUpdate' |
+  'volumeChange'
+
+export interface PeerTubeResolution {
+  id: any
+  label: string
+  active: boolean
+  height: number
+
+  src?: string
+  width?: number
+}
+
+export type PeerTubeTextTrack = {
+  id: string
+  label: string
+  src: string
+  mode: TextTrackMode
+}
diff --git a/client/src/standalone/embed-player-api/events.ts b/client/src/standalone/embed-player-api/events.ts
new file mode 100644
index 000000000..77d21c78c
--- /dev/null
+++ b/client/src/standalone/embed-player-api/events.ts
@@ -0,0 +1,48 @@
+import { EventHandler } from './definitions'
+
+interface PlayerEventRegistrar {
+  registrations: EventHandler<any>[]
+}
+
+interface PlayerEventRegistrationMap {
+  [ name: string ]: PlayerEventRegistrar
+}
+
+export class EventRegistrar {
+
+  private eventRegistrations: PlayerEventRegistrationMap = {}
+
+  public bindToChannel (channel: Channel.MessagingChannel) {
+    for (const name of Object.keys(this.eventRegistrations)) {
+      channel.bind(name, (txn, params) => this.fire(name, params))
+    }
+  }
+
+  public registerTypes (names: string[]) {
+    for (const name of names) {
+      this.eventRegistrations[name] = { registrations: [] }
+    }
+  }
+
+  public fire<T> (name: string, event: T) {
+    this.eventRegistrations[name].registrations.forEach(x => x(event))
+  }
+
+  public addListener<T> (name: string, handler: EventHandler<T>) {
+    if (!this.eventRegistrations[name]) {
+      console.warn(`PeerTube: addEventListener(): The event '${name}' is not supported`)
+      return false
+    }
+
+    this.eventRegistrations[name].registrations.push(handler)
+    return true
+  }
+
+  public removeListener<T> (name: string, handler: EventHandler<T>) {
+    if (!this.eventRegistrations[name]) return false
+
+    this.eventRegistrations[name].registrations = this.eventRegistrations[name].registrations.filter(x => x !== handler)
+
+    return true
+  }
+}
diff --git a/client/src/standalone/embed-player-api/package.json b/client/src/standalone/embed-player-api/package.json
new file mode 100644
index 000000000..b549fbf52
--- /dev/null
+++ b/client/src/standalone/embed-player-api/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@peertube/embed-api",
+  "private": false,
+  "version": "0.0.6",
+  "description": "API to communicate with the PeerTube player embed",
+  "scripts": {
+    "build": "../../../node_modules/.bin/tsc && ../../../node_modules/.bin/webpack --mode production --config ./webpack.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Chocobozzz/PeerTube.git"
+  },
+  "keywords": [
+    "peertube",
+    "embed"
+  ],
+  "main": "./dist/player.js",
+  "types": "./dist/player.d.ts",
+  "author": "Chocobozzz",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/Chocobozzz/PeerTube/issues"
+  },
+  "homepage": "https://github.com/Chocobozzz/PeerTube#readme",
+  "dependencies": {
+    "jschannel": "^1.0.2"
+  }
+}
diff --git a/client/src/standalone/embed-player-api/player.ts b/client/src/standalone/embed-player-api/player.ts
new file mode 100644
index 000000000..75487258b
--- /dev/null
+++ b/client/src/standalone/embed-player-api/player.ts
@@ -0,0 +1,236 @@
+import * as Channel from 'jschannel'
+import { EventHandler, PeerTubeResolution, PeerTubeTextTrack, PlayerEventType } from './definitions'
+import { EventRegistrar } from './events'
+
+const PASSTHROUGH_EVENTS = [
+  'pause',
+  'play',
+  'playbackStatusUpdate',
+  'playbackStatusChange',
+  'resolutionUpdate',
+  'volumeChange'
+]
+
+/**
+ * Allows for programmatic control of a PeerTube embed running in an <iframe>
+ * within a web page.
+ */
+export class PeerTubePlayer {
+
+  private readonly eventRegistrar: EventRegistrar = new EventRegistrar()
+  private channel: Channel.MessagingChannel
+  private readyPromise: Promise<void>
+
+  /**
+   * Construct a new PeerTubePlayer for the given PeerTube embed iframe.
+   * Optionally provide a `scope` to ensure that messages are not crossed
+   * between multiple PeerTube embeds. The string passed here must match the
+   * `scope=` query parameter on the embed URL.
+   *
+   * @param embedElement
+   * @param scope
+   */
+  constructor (
+    private readonly embedElement: HTMLIFrameElement,
+    private readonly scope?: string
+  ) {
+    this.eventRegistrar.registerTypes(PASSTHROUGH_EVENTS)
+
+    this.constructChannel()
+    this.prepareToBeReady()
+  }
+
+  /**
+   * Destroy the player object and remove the associated player from the DOM.
+   */
+  destroy () {
+    this.embedElement.remove()
+  }
+
+  /**
+   * Listen to an event emitted by this player.
+   *
+   * @param event One of the supported event types
+   * @param handler A handler which will be passed an event object (or undefined if no event object is included)
+   */
+  addEventListener (event: PlayerEventType, handler: EventHandler<any>): boolean {
+    return this.eventRegistrar.addListener(event, handler)
+  }
+
+  /**
+   * Remove an event listener previously added with addEventListener().
+   *
+   * @param event The name of the event previously listened to
+   * @param handler
+   */
+  removeEventListener (event: PlayerEventType, handler: EventHandler<any>): boolean {
+    return this.eventRegistrar.removeListener(event, handler)
+  }
+
+  /**
+   * Promise resolves when the player is ready.
+   */
+  get ready (): Promise<void> {
+    return this.readyPromise
+  }
+
+  /**
+   * Tell the embed to start/resume playback
+   */
+  async play () {
+    await this.sendMessage('play')
+  }
+
+  /**
+   * Tell the embed to pause playback.
+   */
+  async pause () {
+    await this.sendMessage('pause')
+  }
+
+  /**
+   * Tell the embed to change the audio volume
+   *
+   * @param value A number from 0 to 1
+   */
+  async setVolume (value: number) {
+    await this.sendMessage('setVolume', value)
+  }
+
+  /**
+   * Get the current volume level in the embed.
+   *
+   * @param value A number from 0 to 1
+   */
+  async getVolume (): Promise<number> {
+    return this.sendMessage<undefined, number>('getVolume')
+  }
+
+  /**
+   * Tell the embed to change the current caption
+   *
+   * @param value Caption id
+   */
+  async setCaption (value: string) {
+    await this.sendMessage('setCaption', value)
+  }
+
+  /**
+   * Get video captions
+   */
+  async getCaptions (): Promise<PeerTubeTextTrack[]> {
+    return this.sendMessage<undefined, PeerTubeTextTrack[]>('getCaptions')
+  }
+
+  /**
+   * Tell the embed to seek to a specific position (in seconds)
+   *
+   * @param seconds
+   */
+  async seek (seconds: number) {
+    await this.sendMessage('seek', seconds)
+  }
+
+  /**
+   * Tell the embed to switch resolutions to the resolution identified
+   * by the given ID.
+   *
+   * @param resolutionId The ID of the resolution as found with getResolutions()
+   */
+  async setResolution (resolutionId: any) {
+    await this.sendMessage('setResolution', resolutionId)
+  }
+
+  /**
+   * Retrieve a list of the available resolutions. This may change later, listen to the
+   * `resolutionUpdate` event with `addEventListener` in order to be updated as the available
+   * resolutions change.
+   */
+  async getResolutions (): Promise<PeerTubeResolution[]> {
+    return this.sendMessage<undefined, PeerTubeResolution[]>('getResolutions')
+  }
+
+  /**
+   * Retrieve a list of available playback rates.
+   */
+  async getPlaybackRates (): Promise<number[]> {
+    return this.sendMessage<undefined, number[]>('getPlaybackRates')
+  }
+
+  /**
+   * Get the current playback rate. Defaults to 1 (1x playback rate).
+   */
+  async getPlaybackRate (): Promise<number> {
+    return this.sendMessage<undefined, number>('getPlaybackRate')
+  }
+
+  /**
+   * Set the playback rate. Should be one of the options returned by getPlaybackRates().
+   * Passing 0.5 means half speed, 1 means normal, 2 means 2x speed, etc.
+   *
+   * @param rate
+   */
+  async setPlaybackRate (rate: number) {
+    await this.sendMessage('setPlaybackRate', rate)
+  }
+
+  /**
+   * Play next video in playlist
+   */
+  async playNextVideo () {
+    await this.sendMessage('playNextVideo')
+  }
+
+  /**
+   * Play previous video in playlist
+   */
+  async playPreviousVideo () {
+    await this.sendMessage('playPreviousVideo')
+  }
+
+  /**
+   * Get video position currently played (starts from 1)
+   */
+  async getCurrentPosition () {
+    return this.sendMessage<undefined, number>('getCurrentPosition')
+  }
+
+  private constructChannel () {
+    this.channel = Channel.build({
+      window: this.embedElement.contentWindow,
+      origin: '*',
+      scope: this.scope || 'peertube'
+    })
+    this.eventRegistrar.bindToChannel(this.channel)
+  }
+
+  private prepareToBeReady () {
+    let readyResolve: () => void
+    let readyReject: () => void
+
+    this.readyPromise = new Promise<void>((res, rej) => {
+      readyResolve = res
+      readyReject = rej
+    })
+
+    this.channel.bind('ready', success => success ? readyResolve() : readyReject())
+    this.channel.call({
+      method: 'isReady',
+      success: isReady => isReady ? readyResolve() : null
+    })
+  }
+
+  private sendMessage<TIn, TOut> (method: string, params?: TIn): Promise<TOut> {
+    return new Promise<TOut>((resolve, reject) => {
+      this.channel.call({
+        method,
+        params,
+        success: result => resolve(result),
+        error: error => reject(error)
+      })
+    })
+  }
+}
+
+// put it on the window as well as the export
+(window as any)['PeerTubePlayer'] = PeerTubePlayer
diff --git a/client/src/standalone/embed-player-api/tsconfig.json b/client/src/standalone/embed-player-api/tsconfig.json
new file mode 100644
index 000000000..eecc63dfb
--- /dev/null
+++ b/client/src/standalone/embed-player-api/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "removeComments": true,
+    "sourceMap": false,
+    "typeRoots": [
+      "../../../node_modules/@types"
+    ],
+    "outDir": "./dist",
+    "declaration": true,
+    "target": "es5",
+    "types": [],
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "files": [ "./player.ts" ]
+}
diff --git a/client/src/standalone/embed-player-api/webpack.config.js b/client/src/standalone/embed-player-api/webpack.config.js
new file mode 100644
index 000000000..48d350edf
--- /dev/null
+++ b/client/src/standalone/embed-player-api/webpack.config.js
@@ -0,0 +1,12 @@
+const path = require('path')
+
+module.exports = [
+  {
+    mode: 'production',
+    entry: './dist/player.js',
+    output: {
+      filename: 'player.min.js',
+      path: path.resolve(__dirname, 'build')
+    }
+  }
+]