aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/assets/player/peertube-videojs-typings.ts2
-rw-r--r--client/src/standalone/player/definitions.ts7
-rw-r--r--client/src/standalone/player/player.ts17
-rw-r--r--client/src/standalone/videos/embed-api.ts25
-rw-r--r--client/src/standalone/videos/test-embed.html6
-rw-r--r--client/src/standalone/videos/test-embed.ts32
-rw-r--r--support/doc/api/embeds.md18
7 files changed, 98 insertions, 9 deletions
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index a4e4c580c..cb7d6f6b4 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -38,7 +38,7 @@ declare module 'video.js' {
38 38
39 textTracks (): TextTrackList & { 39 textTracks (): TextTrackList & {
40 on: Function 40 on: Function
41 tracks_: { kind: string, mode: string, language: string }[] 41 tracks_: (TextTrack & { id: string, label: string, src: string })[]
42 } 42 }
43 43
44 audioTracks (): AudioTrackList 44 audioTracks (): AudioTrackList
diff --git a/client/src/standalone/player/definitions.ts b/client/src/standalone/player/definitions.ts
index 9fe903260..cc5203ed5 100644
--- a/client/src/standalone/player/definitions.ts
+++ b/client/src/standalone/player/definitions.ts
@@ -16,3 +16,10 @@ export interface PeerTubeResolution {
16 src?: string 16 src?: string
17 width?: number 17 width?: number
18} 18}
19
20export type PeerTubeTextTrack = {
21 id: string
22 label: string
23 src: string
24 mode: 'showing' | 'disabled'
25}
diff --git a/client/src/standalone/player/player.ts b/client/src/standalone/player/player.ts
index 71c412950..119f5e035 100644
--- a/client/src/standalone/player/player.ts
+++ b/client/src/standalone/player/player.ts
@@ -1,6 +1,6 @@
1import * as Channel from 'jschannel' 1import * as Channel from 'jschannel'
2import { EventHandler, PeerTubeResolution, PeerTubeTextTrack, PlayerEventType } from './definitions'
2import { EventRegistrar } from './events' 3import { EventRegistrar } from './events'
3import { EventHandler, PlayerEventType, PeerTubeResolution } from './definitions'
4 4
5const PASSTHROUGH_EVENTS = [ 5const PASSTHROUGH_EVENTS = [
6 'pause', 6 'pause',
@@ -105,6 +105,21 @@ export class PeerTubePlayer {
105 } 105 }
106 106
107 /** 107 /**
108 * Tell the embed to change the current caption
109 * @param value Caption id
110 */
111 async setCaption (value: string) {
112 await this.sendMessage('setCaption', value)
113 }
114
115 /**
116 * Get video captions
117 */
118 async getCaptions (): Promise<PeerTubeTextTrack[]> {
119 return this.sendMessage<void, PeerTubeTextTrack[]>('getCaptions')
120 }
121
122 /**
108 * Tell the embed to seek to a specific position (in seconds) 123 * Tell the embed to seek to a specific position (in seconds)
109 * @param seconds 124 * @param seconds
110 */ 125 */
diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index 194465d4a..a9263555d 100644
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -1,7 +1,7 @@
1import './embed.scss' 1import './embed.scss'
2 2
3import * as Channel from 'jschannel' 3import * as Channel from 'jschannel'
4import { PeerTubeResolution } from '../player/definitions' 4import { PeerTubeResolution, PeerTubeTextTrack } from '../player/definitions'
5import { PeerTubeEmbed } from './embed' 5import { PeerTubeEmbed } from './embed'
6 6
7/** 7/**
@@ -44,6 +44,9 @@ export class PeerTubeEmbedApi {
44 channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId)) 44 channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
45 channel.bind('getResolutions', (txn, params) => this.resolutions) 45 channel.bind('getResolutions', (txn, params) => this.resolutions)
46 46
47 channel.bind('getCaptions', (txn, params) => this.getCaptions())
48 channel.bind('setCaption', (txn, id) => this.setCaption(id)),
49
47 channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate)) 50 channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
48 channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate()) 51 channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
49 channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates) 52 channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
@@ -71,6 +74,26 @@ export class PeerTubeEmbedApi {
71 this.embed.player.p2pMediaLoader().getHLSJS().nextLevel = resolutionId 74 this.embed.player.p2pMediaLoader().getHLSJS().nextLevel = resolutionId
72 } 75 }
73 76
77 private getCaptions (): PeerTubeTextTrack[] {
78 return this.embed.player.textTracks().tracks_.map(t => {
79 return {
80 id: t.id,
81 src: t.src,
82 label: t.label,
83 mode: t.mode as any
84 }
85 })
86 }
87
88 private setCaption (id: string) {
89 const tracks = this.embed.player.textTracks().tracks_
90
91 for (const track of tracks) {
92 if (track.id === id) track.mode = 'showing'
93 else track.mode = 'disabled'
94 }
95 }
96
74 /** 97 /**
75 * Let the host know that we're ready to go! 98 * Let the host know that we're ready to go!
76 */ 99 */
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 @@
38 </fieldset> 38 </fieldset>
39 39
40 <fieldset> 40 <fieldset>
41 <legend>Captions:</legend>
42 <div id="caption-list"></div>
43 <br/>
44 </fieldset>
45
46 <fieldset>
41 <legend>Rates:</legend> 47 <legend>Rates:</legend>
42 <div id="rate-list"></div> 48 <div id="rate-list"></div>
43 </fieldset> 49 </fieldset>
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts
index a4b54782c..24cb62230 100644
--- a/client/src/standalone/videos/test-embed.ts
+++ b/client/src/standalone/videos/test-embed.ts
@@ -1,6 +1,6 @@
1import './test-embed.scss' 1import './test-embed.scss'
2import { PeerTubePlayer } from '../player/player' 2import { PeerTubePlayer } from '../player/player'
3import { PeerTubeResolution, PlayerEventType } from '../player/definitions' 3import { PeerTubeResolution, PlayerEventType, PeerTubeTextTrack } from '../player/definitions'
4 4
5window.addEventListener('load', async () => { 5window.addEventListener('load', async () => {
6 const urlParts = window.location.href.split('/') 6 const urlParts = window.location.href.split('/')
@@ -67,6 +67,36 @@ window.addEventListener('load', async () => {
67 updateRates() 67 updateRates()
68 }) 68 })
69 69
70 const updateCaptions = async () => {
71 const captions = await player.getCaptions()
72
73 const captionEl = document.querySelector('#caption-list')
74 captionEl.innerHTML = ''
75
76 captions.forEach(c => {
77 console.log(c)
78
79 if (c.mode === 'showing') {
80 const itemEl = document.createElement('strong')
81 itemEl.innerText = `${c.label} (active)`
82 itemEl.style.display = 'block'
83 captionEl.appendChild(itemEl)
84 } else {
85 const itemEl = document.createElement('a')
86 itemEl.href = 'javascript:;'
87 itemEl.innerText = c.label
88 itemEl.addEventListener('click', () => {
89 player.setCaption(c.id)
90 updateCaptions()
91 })
92 itemEl.style.display = 'block'
93 captionEl.appendChild(itemEl)
94 }
95 })
96 }
97
98 updateCaptions()
99
70 const updateResolutions = ((resolutions: PeerTubeResolution[]) => { 100 const updateResolutions = ((resolutions: PeerTubeResolution[]) => {
71 const resolutionListEl = document.querySelector('#resolution-list') 101 const resolutionListEl = document.querySelector('#resolution-list')
72 resolutionListEl.innerHTML = '' 102 resolutionListEl.innerHTML = ''
diff --git a/support/doc/api/embeds.md b/support/doc/api/embeds.md
index 7085b4b0a..e3df35efc 100644
--- a/support/doc/api/embeds.md
+++ b/support/doc/api/embeds.md
@@ -4,8 +4,8 @@ PeerTube lets you embed videos and programmatically control their playback. This
4 4
5## Playground 5## Playground
6 6
7Any PeerTube embed URL (ie `https://my-instance.example.com/videos/embed/52a10666-3a18-4e73-93da-e8d3c12c305a`) can be viewed as an embedding playground which 7Any PeerTube embed URL (ie `https://my-instance.example.com/videos/embed/52a10666-3a18-4e73-93da-e8d3c12c305a`) can be viewed as an embedding playground which
8allows you to test various aspects of PeerTube embeds. Simply replace `/embed` with `/test-embed` and visit the URL in a browser. 8allows you to test various aspects of PeerTube embeds. Simply replace `/embed` with `/test-embed` and visit the URL in a browser.
9For instance, the playground URL for the above embed URL is `https://my-instance.example.com/videos/test-embed/52a10666-3a18-4e73-93da-e8d3c12c305a`. 9For instance, the playground URL for the above embed URL is `https://my-instance.example.com/videos/test-embed/52a10666-3a18-4e73-93da-e8d3c12c305a`.
10 10
11## Quick Start 11## Quick Start
@@ -95,11 +95,11 @@ Get the available playback rates, where `1` represents normal speed, `0.5` is ha
95 95
96Get the current playback rate. See `getPlaybackRates()` for more information. 96Get the current playback rate. See `getPlaybackRates()` for more information.
97 97
98## `setPlaybackRate(rate : number) : Promise<void>` 98## `setPlaybackRate(rate: number) : Promise<void>`
99 99
100Set the current playback rate. The passed rate should be a value as returned by `getPlaybackRates()`. 100Set the current playback rate. The passed rate should be a value as returned by `getPlaybackRates()`.
101 101
102## `setVolume(factor : number) : Promise<void>` 102## `setVolume(factor: number) : Promise<void>`
103 103
104Set the playback volume. Value should be between `0` and `1`. 104Set the playback volume. Value should be between `0` and `1`.
105 105
@@ -107,13 +107,21 @@ Set the playback volume. Value should be between `0` and `1`.
107 107
108Get the playback volume. Returns a value between `0` and `1`. 108Get the playback volume. Returns a value between `0` and `1`.
109 109
110## `setCaption(id: string) : Promise<void>`
111
112Update current caption using the caption id.
113
114## `getCaptions(): Promise<{ id: string, label: string, src: string, mode: 'disabled' | 'showing' }>`
115
116Get video captions.
117
110# Events 118# Events
111 119
112You can subscribe to events by using `addEventListener()`. See above for details. 120You can subscribe to events by using `addEventListener()`. See above for details.
113 121
114## Event `playbackStatusUpdate` 122## Event `playbackStatusUpdate`
115 123
116Fired every half second to provide the current status of playback. 124Fired every half second to provide the current status of playback.
117The parameter of the callback will resemble: 125The parameter of the callback will resemble:
118 126
119```json 127```json