mirror of https://github.com/Chocobozzz/PeerTube
Fix player lint
parent
999417328b
commit
902aa3a099
|
@ -13,7 +13,7 @@
|
||||||
"url": "git://github.com/Chocobozzz/PeerTube.git"
|
"url": "git://github.com/Chocobozzz/PeerTube.git"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"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",
|
"webpack": "webpack",
|
||||||
"tslint": "tslint",
|
"tslint": "tslint",
|
||||||
"ng": "ng",
|
"ng": "ng",
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
export interface EventHandler<T> {
|
export interface EventHandler<T> {
|
||||||
(ev: T): void
|
(ev: T): void
|
||||||
}
|
}
|
||||||
|
@ -8,7 +7,6 @@ export type PlayerEventType =
|
||||||
'playbackStatusUpdate' |
|
'playbackStatusUpdate' |
|
||||||
'playbackStatusChange' |
|
'playbackStatusChange' |
|
||||||
'resolutionUpdate'
|
'resolutionUpdate'
|
||||||
;
|
|
||||||
|
|
||||||
export interface PeerTubeResolution {
|
export interface PeerTubeResolution {
|
||||||
id: any
|
id: any
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { EventHandler } from "./definitions"
|
import { EventHandler } from './definitions'
|
||||||
|
|
||||||
interface PlayerEventRegistrar {
|
interface PlayerEventRegistrar {
|
||||||
registrations: Function[]
|
registrations: Function[]
|
||||||
|
@ -13,14 +13,16 @@ export class EventRegistrar {
|
||||||
private eventRegistrations: PlayerEventRegistrationMap = {}
|
private eventRegistrations: PlayerEventRegistrationMap = {}
|
||||||
|
|
||||||
public bindToChannel (channel: Channel.MessagingChannel) {
|
public bindToChannel (channel: Channel.MessagingChannel) {
|
||||||
for (let name of Object.keys(this.eventRegistrations))
|
for (let name of Object.keys(this.eventRegistrations)) {
|
||||||
channel.bind(name, (txn, params) => this.fire(name, params))
|
channel.bind(name, (txn, params) => this.fire(name, params))
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public registerTypes (names: string[]) {
|
public registerTypes (names: string[]) {
|
||||||
for (let name of names)
|
for (let name of names) {
|
||||||
this.eventRegistrations[ name ] = { registrations: [] }
|
this.eventRegistrations[ name ] = { registrations: [] }
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public fire<T> (name: string, event: T) {
|
public fire<T> (name: string, event: T) {
|
||||||
this.eventRegistrations[ name ].registrations.forEach(x => x(event))
|
this.eventRegistrations[ name ].registrations.forEach(x => x(event))
|
||||||
|
@ -37,11 +39,9 @@ export class EventRegistrar {
|
||||||
}
|
}
|
||||||
|
|
||||||
public removeListener<T> (name: string, handler: EventHandler<T>) {
|
public removeListener<T> (name: string, handler: EventHandler<T>) {
|
||||||
if (!this.eventRegistrations[name])
|
if (!this.eventRegistrations[ name ]) return false
|
||||||
return false
|
|
||||||
|
|
||||||
this.eventRegistrations[name].registrations =
|
this.eventRegistrations[ name ].registrations = this.eventRegistrations[ name ].registrations.filter(x => x === handler)
|
||||||
this.eventRegistrations[name].registrations.filter(x => x === handler)
|
|
||||||
|
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,8 @@ import { EventRegistrar } from './events'
|
||||||
import { EventHandler, PlayerEventType, PeerTubeResolution } from './definitions'
|
import { EventHandler, PlayerEventType, PeerTubeResolution } from './definitions'
|
||||||
|
|
||||||
const PASSTHROUGH_EVENTS = [
|
const PASSTHROUGH_EVENTS = [
|
||||||
'pause', 'play',
|
'pause',
|
||||||
|
'play',
|
||||||
'playbackStatusUpdate',
|
'playbackStatusUpdate',
|
||||||
'playbackStatusChange',
|
'playbackStatusChange',
|
||||||
'resolutionUpdate'
|
'resolutionUpdate'
|
||||||
|
@ -14,6 +15,11 @@ const PASSTHROUGH_EVENTS = [
|
||||||
* within a web page.
|
* within a web page.
|
||||||
*/
|
*/
|
||||||
export class PeerTubePlayer {
|
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.
|
* Construct a new PeerTubePlayer for the given PeerTube embed iframe.
|
||||||
* Optionally provide a `scope` to ensure that messages are not crossed
|
* Optionally provide a `scope` to ensure that messages are not crossed
|
||||||
|
@ -33,10 +39,6 @@ export class PeerTubePlayer {
|
||||||
this.prepareToBeReady()
|
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 the player object and remove the associated player from the DOM.
|
||||||
*/
|
*/
|
||||||
|
@ -98,7 +100,7 @@ export class PeerTubePlayer {
|
||||||
* @param value A number from 0 to 1
|
* @param value A number from 0 to 1
|
||||||
*/
|
*/
|
||||||
async getVolume (): Promise<number> {
|
async getVolume (): Promise<number> {
|
||||||
return await this.sendMessage<void, number>('setVolume')
|
return this.sendMessage<void, number>('setVolume')
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -125,21 +127,21 @@ export class PeerTubePlayer {
|
||||||
* resolutions change.
|
* resolutions change.
|
||||||
*/
|
*/
|
||||||
async getResolutions (): Promise<PeerTubeResolution[]> {
|
async getResolutions (): Promise<PeerTubeResolution[]> {
|
||||||
return await this.sendMessage<void, PeerTubeResolution[]>('getResolutions')
|
return this.sendMessage<void, PeerTubeResolution[]>('getResolutions')
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Retrieve a list of available playback rates.
|
* Retrieve a list of available playback rates.
|
||||||
*/
|
*/
|
||||||
async getPlaybackRates (): Promise<number[]> {
|
async getPlaybackRates (): Promise<number[]> {
|
||||||
return await this.sendMessage<void, number[]>('getPlaybackRates')
|
return this.sendMessage<void, number[]>('getPlaybackRates')
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the current playback rate. Defaults to 1 (1x playback rate).
|
* Get the current playback rate. Defaults to 1 (1x playback rate).
|
||||||
*/
|
*/
|
||||||
async getPlaybackRate (): Promise<number> {
|
async getPlaybackRate (): Promise<number> {
|
||||||
return await this.sendMessage<void, number>('getPlaybackRate')
|
return this.sendMessage<void, number>('getPlaybackRate')
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -162,7 +164,9 @@ export class PeerTubePlayer {
|
||||||
}
|
}
|
||||||
|
|
||||||
private prepareToBeReady () {
|
private prepareToBeReady () {
|
||||||
let readyResolve, readyReject
|
let readyResolve: Function
|
||||||
|
let readyReject: Function
|
||||||
|
|
||||||
this.readyPromise = new Promise<void>((res, rej) => {
|
this.readyPromise = new Promise<void>((res, rej) => {
|
||||||
readyResolve = res
|
readyResolve = res
|
||||||
readyReject = rej
|
readyReject = rej
|
||||||
|
|
|
@ -22,22 +22,20 @@ import * as Channel from 'jschannel'
|
||||||
|
|
||||||
import { VideoDetails } from '../../../../shared'
|
import { VideoDetails } from '../../../../shared'
|
||||||
import { addContextMenu, getVideojsOptions, loadLocale } from '../../assets/player/peertube-player'
|
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
|
* JSChannels and window.postMessage
|
||||||
*/
|
*/
|
||||||
class PeerTubeEmbedApi {
|
class PeerTubeEmbedApi {
|
||||||
constructor(
|
|
||||||
private embed : PeerTubeEmbed
|
|
||||||
) {
|
|
||||||
}
|
|
||||||
|
|
||||||
private channel: Channel.MessagingChannel
|
private channel: Channel.MessagingChannel
|
||||||
private isReady = false
|
private isReady = false
|
||||||
private resolutions: PeerTubeResolution[] = null
|
private resolutions: PeerTubeResolution[] = null
|
||||||
|
|
||||||
|
constructor (private embed: PeerTubeEmbed) {
|
||||||
|
}
|
||||||
|
|
||||||
initialize () {
|
initialize () {
|
||||||
this.constructChannel()
|
this.constructChannel()
|
||||||
this.setupStateTracking()
|
this.setupStateTracking()
|
||||||
|
@ -70,8 +68,7 @@ class PeerTubeEmbedApi {
|
||||||
}
|
}
|
||||||
|
|
||||||
private setResolution (resolutionId: number) {
|
private setResolution (resolutionId: number) {
|
||||||
if (resolutionId === -1 && this.embed.player.peertube().isAutoResolutionForbidden())
|
if (resolutionId === -1 && this.embed.player.peertube().isAutoResolutionForbidden()) return
|
||||||
return
|
|
||||||
|
|
||||||
// Auto resolution
|
// Auto resolution
|
||||||
if (resolutionId === -1) {
|
if (resolutionId === -1) {
|
||||||
|
@ -92,7 +89,6 @@ class PeerTubeEmbedApi {
|
||||||
}
|
}
|
||||||
|
|
||||||
private setupStateTracking () {
|
private setupStateTracking () {
|
||||||
|
|
||||||
let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
|
let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
|
||||||
|
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
|
@ -104,7 +100,7 @@ class PeerTubeEmbedApi {
|
||||||
params: {
|
params: {
|
||||||
position,
|
position,
|
||||||
volume,
|
volume,
|
||||||
playbackState: currentState,
|
playbackState: currentState
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}, 500)
|
}, 500)
|
||||||
|
@ -152,23 +148,17 @@ class PeerTubeEmbedApi {
|
||||||
}
|
}
|
||||||
|
|
||||||
class PeerTubeEmbed {
|
class PeerTubeEmbed {
|
||||||
constructor(
|
|
||||||
private videoContainerId : string
|
|
||||||
) {
|
|
||||||
this.videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
|
|
||||||
}
|
|
||||||
|
|
||||||
videoElement: HTMLVideoElement
|
videoElement: HTMLVideoElement
|
||||||
player: any
|
player: any
|
||||||
playerOptions: any
|
playerOptions: any
|
||||||
api: PeerTubeEmbedApi = null
|
api: PeerTubeEmbedApi = null
|
||||||
autoplay : boolean = false
|
autoplay = false
|
||||||
controls : boolean = true
|
controls = true
|
||||||
muted : boolean = false
|
muted = false
|
||||||
loop : boolean = false
|
loop = false
|
||||||
enableApi : boolean = false
|
enableApi = false
|
||||||
startTime : number = 0
|
startTime = 0
|
||||||
scope : string = 'peertube'
|
scope = 'peertube'
|
||||||
|
|
||||||
static async main () {
|
static async main () {
|
||||||
const videoContainerId = 'video-container'
|
const videoContainerId = 'video-container'
|
||||||
|
@ -176,6 +166,10 @@ class PeerTubeEmbed {
|
||||||
await embed.init()
|
await embed.init()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
constructor (private videoContainerId: string) {
|
||||||
|
this.videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
|
||||||
|
}
|
||||||
|
|
||||||
getVideoUrl (id: string) {
|
getVideoUrl (id: string) {
|
||||||
return window.location.origin + '/api/v1/videos/' + id
|
return window.location.origin + '/api/v1/videos/' + id
|
||||||
}
|
}
|
||||||
|
@ -219,14 +213,6 @@ class PeerTubeEmbed {
|
||||||
return params.has(name) ? params.get(name) : defaultValue
|
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 {
|
try {
|
||||||
await this.initCore()
|
await this.initCore()
|
||||||
|
@ -235,6 +221,13 @@ class PeerTubeEmbed {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private initializeApi () {
|
||||||
|
if (!this.enableApi) return
|
||||||
|
|
||||||
|
this.api = new PeerTubeEmbedApi(this)
|
||||||
|
this.api.initialize()
|
||||||
|
}
|
||||||
|
|
||||||
private loadParams () {
|
private loadParams () {
|
||||||
try {
|
try {
|
||||||
let params = new URL(window.location.toString()).searchParams
|
let params = new URL(window.location.toString()).searchParams
|
||||||
|
@ -248,8 +241,8 @@ class PeerTubeEmbed {
|
||||||
|
|
||||||
const startTimeParamString = params.get('start')
|
const startTimeParamString = params.get('start')
|
||||||
const startTimeParamNumber = parseInt(startTimeParamString, 10)
|
const startTimeParamNumber = parseInt(startTimeParamString, 10)
|
||||||
if (isNaN(startTimeParamNumber) === false)
|
|
||||||
this.startTime = startTimeParamNumber
|
if (isNaN(startTimeParamNumber) === false) this.startTime = startTimeParamNumber
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Cannot get params from URL.', err)
|
console.error('Cannot get params from URL.', err)
|
||||||
}
|
}
|
||||||
|
@ -264,8 +257,7 @@ class PeerTubeEmbed {
|
||||||
let response = await this.loadVideoInfo(videoId)
|
let response = await this.loadVideoInfo(videoId)
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
if (response.status === 404)
|
if (response.status === 404) return this.videoNotFound(this.videoElement)
|
||||||
return this.videoNotFound(this.videoElement)
|
|
||||||
|
|
||||||
return this.videoFetchError(this.videoElement)
|
return this.videoFetchError(this.videoElement)
|
||||||
}
|
}
|
||||||
|
@ -298,11 +290,12 @@ class PeerTubeEmbed {
|
||||||
window[ 'videojsPlayer' ] = this.player
|
window[ 'videojsPlayer' ] = this.player
|
||||||
|
|
||||||
if (this.controls) {
|
if (this.controls) {
|
||||||
(this.player as any).dock({
|
this.player.dock({
|
||||||
title: videoInfo.name,
|
title: videoInfo.name,
|
||||||
description: this.player.localize('Uses P2P, others may know your IP is downloading this video.')
|
description: this.player.localize('Uses P2P, others may know your IP is downloading this video.')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
addContextMenu(this.player, window.location.origin + videoInfo.embedPath)
|
addContextMenu(this.player, window.location.origin + videoInfo.embedPath)
|
||||||
this.initializeApi()
|
this.initializeApi()
|
||||||
})
|
})
|
||||||
|
@ -310,3 +303,4 @@ class PeerTubeEmbed {
|
||||||
}
|
}
|
||||||
|
|
||||||
PeerTubeEmbed.main()
|
PeerTubeEmbed.main()
|
||||||
|
.catch(err => console.error('Cannot init embed.', err))
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
import './test-embed.scss'
|
import './test-embed.scss'
|
||||||
import { PeerTubePlayer } from '../player/player';
|
import { PeerTubePlayer } from '../player/player'
|
||||||
import { PlayerEventType } from '../player/definitions';
|
import { PlayerEventType } from '../player/definitions'
|
||||||
|
|
||||||
window.addEventListener('load', async () => {
|
window.addEventListener('load', async () => {
|
||||||
|
|
||||||
const urlParts = window.location.href.split('/')
|
const urlParts = window.location.href.split('/')
|
||||||
const lastPart = urlParts[ urlParts.length - 1 ]
|
const lastPart = urlParts[ urlParts.length - 1 ]
|
||||||
const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ]
|
const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ]
|
||||||
|
@ -11,7 +10,7 @@ window.addEventListener('load', async () => {
|
||||||
let iframe = document.createElement('iframe')
|
let iframe = document.createElement('iframe')
|
||||||
iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1`
|
iframe.src = `/videos/embed/${videoId}?autoplay=1&controls=0&api=1`
|
||||||
let mainElement = document.querySelector('#host')
|
let mainElement = document.querySelector('#host')
|
||||||
mainElement.appendChild(iframe);
|
mainElement.appendChild(iframe)
|
||||||
|
|
||||||
console.log(`Document finished loading.`)
|
console.log(`Document finished loading.`)
|
||||||
let player = new PeerTubePlayer(document.querySelector('iframe'))
|
let player = new PeerTubePlayer(document.querySelector('iframe'))
|
||||||
|
@ -23,27 +22,26 @@ window.addEventListener('load', async () => {
|
||||||
console.log(`Player is ready.`)
|
console.log(`Player is ready.`)
|
||||||
|
|
||||||
let monitoredEvents = [
|
let monitoredEvents = [
|
||||||
'pause', 'play',
|
'pause',
|
||||||
|
'play',
|
||||||
'playbackStatusUpdate',
|
'playbackStatusUpdate',
|
||||||
'playbackStatusChange'
|
'playbackStatusChange'
|
||||||
]
|
]
|
||||||
|
|
||||||
monitoredEvents.forEach(e => {
|
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}'`)
|
console.log(`PLAYER: now listening for event '${e}'`)
|
||||||
})
|
})
|
||||||
|
|
||||||
let playbackRates = []
|
let playbackRates: number[] = []
|
||||||
let activeRate = 1
|
|
||||||
let currentRate = await player.getPlaybackRate()
|
let currentRate = await player.getPlaybackRate()
|
||||||
|
|
||||||
let updateRates = async () => {
|
let updateRates = async () => {
|
||||||
|
|
||||||
let rateListEl = document.querySelector('#rate-list')
|
let rateListEl = document.querySelector('#rate-list')
|
||||||
rateListEl.innerHTML = ''
|
rateListEl.innerHTML = ''
|
||||||
|
|
||||||
playbackRates.forEach(rate => {
|
playbackRates.forEach(rate => {
|
||||||
if (currentRate == rate) {
|
if (currentRate === rate) {
|
||||||
let itemEl = document.createElement('strong')
|
let itemEl = document.createElement('strong')
|
||||||
itemEl.innerText = `${rate} (active)`
|
itemEl.innerText = `${rate} (active)`
|
||||||
itemEl.style.display = 'block'
|
itemEl.style.display = 'block'
|
||||||
|
|
Loading…
Reference in New Issue