"url": "git://github.com/Chocobozzz/PeerTube.git"
},
"scripts": {
- "lint": "tslint --project ./tsconfig.json -c ./tslint.json 'src/app/**/*.ts'",
+ "lint": "tslint --project ./tsconfig.json -c ./tslint.json 'src/app/**/*.ts' 'src/standalone/**/*.ts'",
"webpack": "webpack",
"tslint": "tslint",
"ng": "ng",
-
export interface EventHandler<T> {
- (ev : T) : void
+ (ev: T): void
}
-export type PlayerEventType =
- 'pause' | 'play' |
- 'playbackStatusUpdate' |
- 'playbackStatusChange' |
- 'resolutionUpdate'
-;
+export type PlayerEventType =
+ 'pause' | 'play' |
+ 'playbackStatusUpdate' |
+ 'playbackStatusChange' |
+ 'resolutionUpdate'
export interface PeerTubeResolution {
- id : any
- label : string
- src : string
- active : boolean
-}
\ No newline at end of file
+ id: any
+ label: string
+ src: string
+ active: boolean
+}
-import { EventHandler } from "./definitions"
+import { EventHandler } from './definitions'
interface PlayerEventRegistrar {
- registrations : Function[]
+ registrations: Function[]
}
interface PlayerEventRegistrationMap {
- [name : string] : PlayerEventRegistrar
+ [ name: string ]: PlayerEventRegistrar
}
export class EventRegistrar {
- private eventRegistrations : PlayerEventRegistrationMap = {}
+ private eventRegistrations: PlayerEventRegistrationMap = {}
- public bindToChannel(channel : Channel.MessagingChannel) {
- for (let name of Object.keys(this.eventRegistrations))
- channel.bind(name, (txn, params) => this.fire(name, params))
+ public bindToChannel (channel: Channel.MessagingChannel) {
+ for (let name of Object.keys(this.eventRegistrations)) {
+ channel.bind(name, (txn, params) => this.fire(name, params))
}
+ }
- public registerTypes(names : string[]) {
- for (let name of names)
- this.eventRegistrations[name] = { registrations: [] }
+ public registerTypes (names: string[]) {
+ for (let name of names) {
+ this.eventRegistrations[ name ] = { registrations: [] }
}
+ }
- public fire<T>(name : string, event : T) {
- this.eventRegistrations[name].registrations.forEach(x => x(event))
+ 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
}
- 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
+ }
- this.eventRegistrations[name].registrations.push(handler)
- return true
- }
+ public removeListener<T> (name: string, handler: EventHandler<T>) {
+ if (!this.eventRegistrations[ name ]) return false
- 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)
- this.eventRegistrations[name].registrations =
- this.eventRegistrations[name].registrations.filter(x => x === handler)
-
- return true
- }
+ return true
+ }
}
import { EventHandler, PlayerEventType, PeerTubeResolution } from './definitions'
const PASSTHROUGH_EVENTS = [
- 'pause', 'play',
+ 'pause',
+ 'play',
'playbackStatusUpdate',
'playbackStatusChange',
'resolutionUpdate'
]
/**
- * Allows for programmatic control of a PeerTube embed running in an <iframe>
+ * Allows for programmatic control of a PeerTube embed running in an <iframe>
* within a web page.
*/
export class PeerTubePlayer {
+
+ private 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
+ * 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
+ *
+ * @param embedElement
+ * @param scope
*/
- constructor(
- private embedElement : HTMLIFrameElement,
- private scope? : string
+ constructor (
+ private embedElement: HTMLIFrameElement,
+ private scope?: string
) {
this.eventRegistrar.registerTypes(PASSTHROUGH_EVENTS)
this.prepareToBeReady()
}
- private eventRegistrar : EventRegistrar = new EventRegistrar()
- private channel : Channel.MessagingChannel
- private readyPromise : Promise<void>
-
/**
* Destroy the player object and remove the associated player from the DOM.
*/
- destroy() {
+ 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 {
+ 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
+ * @param handler
*/
- removeEventListener
(event : PlayerEventType, handler : EventHandler<any>): boolean {
+ removeEventListener
(event: PlayerEventType, handler: EventHandler<any>): boolean {
return this.eventRegistrar.removeListener(event, handler)
}
-
+
/**
* Promise resolves when the player is ready.
*/
- get ready(): Promise<void> {
+ get ready (): Promise<void> {
return this.readyPromise
}
/**
* Tell the embed to start/resume playback
*/
- async play() {
+ async play () {
await this.sendMessage('play')
}
/**
* Tell the embed to pause playback.
*/
- async pause() {
+ 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) {
+ 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 await this.sendMessage<void, number>('setVolume')
+ async getVolume (): Promise<number> {
+ return this.sendMessage<void, number>('setVolume')
}
/**
* Tell the embed to seek to a specific position (in seconds)
- * @param seconds
+ * @param seconds
*/
- async seek(seconds : number) {
+ 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) {
+ async setResolution (resolutionId: any) {
await this.sendMessage('setResolution', resolutionId)
}
/**
- * Retrieve a list of the available resolutions. This may change later, listen to the
+ * 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 await this.sendMessage<void, PeerTubeResolution[]>('getResolutions')
+ async getResolutions
(): Promise<PeerTubeResolution[]> {
+ return this.sendMessage<void, PeerTubeResolution[]>('getResolutions')
}
/**
- * Retrieve a list of available playback rates.
+ * Retrieve a list of available playback rates.
*/
- async getPlaybackRates() : Promise<number[]> {
- return await this.sendMessage<void, number[]>('getPlaybackRates')
+ async getPlaybackRates (): Promise<number[]> {
+ return this.sendMessage<void, number[]>('getPlaybackRates')
}
-
+
/**
* Get the current playback rate. Defaults to 1 (1x playback rate).
*/
- async getPlaybackRate() : Promise<number> {
- return await this.sendMessage<void, number>('getPlaybackRate')
+ async getPlaybackRate (): Promise<number> {
+ return this.sendMessage<void, 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
+ *
+ * @param rate
*/
- async setPlaybackRate(rate : number) {
+ async setPlaybackRate (rate: number) {
await this.sendMessage('setPlaybackRate', rate)
}
- private constructChannel() {
+ private constructChannel () {
this.channel = Channel.build({
window: this.embedElement.contentWindow,
origin: '*',
})
this.eventRegistrar.bindToChannel(this.channel)
}
-
- private prepareToBeReady() {
- let readyResolve, readyReject
+
+ private prepareToBeReady () {
+ let readyResolve: Function
+ let readyReject: Function
+
this.readyPromise = new Promise<void>((res, rej) => {
readyResolve = res
readyReject = rej
})
-
+
this.channel.bind('ready', success => success ? readyResolve() : readyReject())
this.channel.call({
method: 'isReady',
})
}
- private sendMessage<TIn, TOut>(method : string, params? : TIn): Promise<TOut> {
+ private sendMessage<TIn, TOut> (method: string, params?: TIn): Promise<TOut> {
return new Promise<TOut>((resolve, reject) => {
this.channel.call({
method, params,
}
// put it on the window as well as the export
-window['PeerTubePlayer'] = PeerTubePlayer
\ No newline at end of file
+window[ 'PeerTubePlayer' ] = PeerTubePlayer
import { VideoDetails } from '../../../../shared'
import { addContextMenu, getVideojsOptions, loadLocale } from '../../assets/player/peertube-player'
-import { PeerTubeResolution } from '../player/definitions';
+import { PeerTubeResolution } from '../player/definitions'
/**
- * Embed API exposes control of the embed player to the outside world via
+ * Embed API exposes control of the embed player to the outside world via
* JSChannels and window.postMessage
*/
class PeerTubeEmbedApi {
- constructor(
- private embed : PeerTubeEmbed
- ) {
- }
-
- private channel : Channel.MessagingChannel
+ private channel: Channel.MessagingChannel
private isReady = false
- private resolutions : PeerTubeResolution[] = null
+ private resolutions: PeerTubeResolution[] = null
+
+ constructor (private embed: PeerTubeEmbed) {
+ }
- initialize() {
+ initialize () {
this.constructChannel()
this.setupStateTracking()
this.notifyReady()
}
-
- private get element() {
+
+ private get element () {
return this.embed.videoElement
}
- private constructChannel() {
+ private constructChannel () {
let 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())
channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
this.channel = channel
}
- private setResolution(resolutionId : number) {
- if (resolutionId === -1 && this.embed.player.peertube().isAutoResolutionForbidden())
- return
+ private setResolution (resolutionId: number) {
+ if (resolutionId === -1 && this.embed.player.peertube().isAutoResolutionForbidden()) return
// Auto resolution
if (resolutionId === -1) {
/**
* Let the host know that we're ready to go!
*/
- private notifyReady() {
+ private notifyReady () {
this.isReady = true
this.channel.notify({ method: 'ready', params: true })
}
- private setupStateTracking() {
-
- let currentState : 'playing' | 'paused' | 'unstarted' = 'unstarted'
+ private setupStateTracking () {
+ let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
setInterval(() => {
let position = this.element.currentTime
params: {
position,
volume,
- playbackState: currentState,
+ playbackState: currentState
}
})
}, 500)
this.embed.player.peertube().on('videoFileUpdate', () => this.loadResolutions())
}
- private loadResolutions() {
+ private loadResolutions () {
let resolutions = []
let currentResolutionId = this.embed.player.peertube().getCurrentResolutionId()
}
class PeerTubeEmbed {
- constructor(
- private videoContainerId : string
- ) {
- this.videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
- }
-
- videoElement : HTMLVideoElement
- player : any
- playerOptions : any
- api : PeerTubeEmbedApi = null
- autoplay : boolean = false
- controls : boolean = true
- muted : boolean = false
- loop : boolean = false
- enableApi : boolean = false
- startTime : number = 0
- scope : string = 'peertube'
-
- static async main() {
+ videoElement: HTMLVideoElement
+ player: any
+ playerOptions: any
+ api: PeerTubeEmbedApi = null
+ autoplay = false
+ controls = true
+ muted = false
+ loop = false
+ enableApi = false
+ startTime = 0
+ scope = 'peertube'
+
+ static async main () {
const videoContainerId = 'video-container'
const embed = new PeerTubeEmbed(videoContainerId)
await embed.init()
}
-
+
+ constructor (private videoContainerId: string) {
+ this.videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
+ }
+
getVideoUrl (id: string) {
return window.location.origin + '/api/v1/videos/' + id
}
return params.has(name) ? params.get(name) : defaultValue
}
- private initializeApi() {
- if (!this.enableApi)
- return
-
- this.api = new PeerTubeEmbedApi(this)
- this.api.initialize()
- }
-
- async init() {
+ async init () {
try {
await this.initCore()
} catch (e) {
}
}
- private loadParams() {
+ private initializeApi () {
+ if (!this.enableApi) return
+
+ this.api = new PeerTubeEmbedApi(this)
+ this.api.initialize()
+ }
+
+ private loadParams () {
try {
let params = new URL(window.location.toString()).searchParams
const startTimeParamString = params.get('start')
const startTimeParamNumber = parseInt(startTimeParamString, 10)
- if (isNaN(startTimeParamNumber) === false)
- this.startTime = startTimeParamNumber
+
+ if (isNaN(startTimeParamNumber) === false) this.startTime = startTimeParamNumber
} catch (err) {
console.error('Cannot get params from URL.', err)
}
}
- private async initCore() {
+ private async initCore () {
const urlParts = window.location.href.split('/')
- const lastPart = urlParts[urlParts.length - 1]
- const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[0]
+ const lastPart = urlParts[ urlParts.length - 1 ]
+ const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ]
await loadLocale(window.location.origin, vjs, navigator.language)
let response = await this.loadVideoInfo(videoId)
if (!response.ok) {
- if (response.status === 404)
- return this.videoNotFound(this.videoElement)
+ if (response.status === 404) return this.videoNotFound(this.videoElement)
return this.videoFetchError(this.videoElement)
}
controls: this.controls,
muted: this.muted,
loop: this.loop,
- startTime : this.startTime,
+ startTime: this.startTime,
inactivityTimeout: 1500,
videoViewUrl: this.getVideoUrl(videoId) + '/views',
this.playerOptions = videojsOptions
this.player = vjs(this.videoContainerId, videojsOptions, () => {
- window['videojsPlayer'] = this.player
+ window[ 'videojsPlayer' ] = this.player
if (this.controls) {
- (this.player as any).dock({
+ this.player.dock({
title: videoInfo.name,
description: this.player.localize('Uses P2P, others may know your IP is downloading this video.')
})
}
+
addContextMenu(this.player, window.location.origin + videoInfo.embedPath)
this.initializeApi()
})
}
PeerTubeEmbed.main()
+ .catch(err => console.error('Cannot init embed.', err))
import './test-embed.scss'
-import { PeerTubePlayer } from '../player/player';
-import { PlayerEventType } from '../player/definitions';
+import { PeerTubePlayer } from '../player/player'
+import { PlayerEventType } from '../player/definitions'
window.addEventListener('load', async () => {
-
const urlParts = window.location.href.split('/')
- const lastPart = urlParts[urlParts.length - 1]
- const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[0]
+ const lastPart = urlParts[ urlParts.length - 1 ]
+ const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ]
let iframe = document.createElement('iframe')
iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1`
let mainElement = document.querySelector('#host')
- mainElement.appendChild(iframe);
+ mainElement.appendChild(iframe)
console.log(`Document finished loading.`)
let player = new PeerTubePlayer(document.querySelector('iframe'))
- window['player'] = player
+ window[ 'player' ] = player
console.log(`Awaiting player ready...`)
await player.ready
console.log(`Player is ready.`)
let monitoredEvents = [
- 'pause', 'play',
- 'playbackStatusUpdate',
+ 'pause',
+ 'play',
+ 'playbackStatusUpdate',
'playbackStatusChange'
]
monitoredEvents.forEach(e => {
- player.addEventListener(<PlayerEventType>e, () => console.log(`PLAYER: event '${e}' received`))
+ player.addEventListener(e as PlayerEventType, () => console.log(`PLAYER: event '${e}' received`))
console.log(`PLAYER: now listening for event '${e}'`)
})
- let playbackRates = []
- let activeRate = 1
+ let playbackRates: number[] = []
let currentRate = await player.getPlaybackRate()
let updateRates = async () => {
-
let rateListEl = document.querySelector('#rate-list')
rateListEl.innerHTML = ''
-
+
playbackRates.forEach(rate => {
- if (currentRate == rate) {
+ if (currentRate === rate) {
let itemEl = document.createElement('strong')
itemEl.innerText = `${rate} (active)`
itemEl.style.display = 'block'
player.getResolutions().then(
resolutions => updateResolutions(resolutions))
- player.addEventListener('resolutionUpdate',
+ player.addEventListener('resolutionUpdate',
resolutions => updateResolutions(resolutions))
-})
\ No newline at end of file
+})
projects / github / Chocobozzz / PeerTube.git / commitdiff
