Fix player lint

This commit is contained in:
Chocobozzz 2018-07-10 18:02:30 +02:00
parent 999417328b
commit 902aa3a099
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
6 changed files with 169 additions and 175 deletions

View File

@ -13,7 +13,7 @@
"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",

View File

@ -1,6 +1,5 @@
export interface EventHandler<T> {
(ev : T) : void
(ev: T): void
}
export type PlayerEventType =
@ -8,11 +7,10 @@ export type PlayerEventType =
'playbackStatusUpdate' |
'playbackStatusChange' |
'resolutionUpdate'
;
export interface PeerTubeResolution {
id : any
label : string
src : string
active : boolean
id: any
label: string
src: string
active: boolean
}

View File

@ -1,47 +1,47 @@
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))
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 fire<T>(name : string, event : T) {
this.eventRegistrations[name].registrations.forEach(x => x(event))
public registerTypes (names: string[]) {
for (let name of names) {
this.eventRegistrations[ name ] = { registrations: [] }
}
}
public addListener<T>(name : string, handler : EventHandler<T>) {
if (!this.eventRegistrations[name]) {
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)
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
}

View File

@ -3,7 +3,8 @@ import { EventRegistrar } from './events'
import { EventHandler, PlayerEventType, PeerTubeResolution } from './definitions'
const PASSTHROUGH_EVENTS = [
'pause', 'play',
'pause',
'play',
'playbackStatusUpdate',
'playbackStatusChange',
'resolutionUpdate'
@ -14,6 +15,11 @@ const PASSTHROUGH_EVENTS = [
* 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
@ -23,9 +29,9 @@ export class PeerTubePlayer {
* @param embedElement
* @param scope
*/
constructor(
private embedElement : HTMLIFrameElement,
private scope? : string
constructor (
private embedElement: HTMLIFrameElement,
private scope?: string
) {
this.eventRegistrar.registerTypes(PASSTHROUGH_EVENTS)
@ -33,14 +39,10 @@ export class PeerTubePlayer {
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()
}
@ -50,7 +52,7 @@ export class PeerTubePlayer {
* @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)
}
@ -60,28 +62,28 @@ export class PeerTubePlayer {
* @param event The name of the event previously listened to
* @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')
}
@ -89,7 +91,7 @@ export class PeerTubePlayer {
* 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)
}
@ -97,15 +99,15 @@ export class PeerTubePlayer {
* 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
*/
async seek(seconds : number) {
async seek (seconds: number) {
await this.sendMessage('seek', seconds)
}
@ -115,7 +117,7 @@ export class PeerTubePlayer {
*
* @param resolutionId The ID of the resolution as found with getResolutions()
*/
async setResolution(resolutionId : any) {
async setResolution (resolutionId: any) {
await this.sendMessage('setResolution', resolutionId)
}
@ -124,22 +126,22 @@ export class PeerTubePlayer {
* `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.
*/
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')
}
/**
@ -148,11 +150,11 @@ export class PeerTubePlayer {
*
* @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: '*',
@ -161,8 +163,10 @@ export class PeerTubePlayer {
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
@ -175,7 +179,7 @@ export class PeerTubePlayer {
})
}
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,
@ -187,4 +191,4 @@ export class PeerTubePlayer {
}
// put it on the window as well as the export
window['PeerTubePlayer'] = PeerTubePlayer
window[ 'PeerTubePlayer' ] = PeerTubePlayer

View File

@ -22,23 +22,21 @@ import * as Channel from 'jschannel'
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
* JSChannels and window.postMessage
*/
class PeerTubeEmbedApi {
constructor(
private embed : PeerTubeEmbed
) {
private channel: Channel.MessagingChannel
private isReady = false
private resolutions: PeerTubeResolution[] = null
constructor (private embed: PeerTubeEmbed) {
}
private channel : Channel.MessagingChannel
private isReady = false
private resolutions : PeerTubeResolution[] = null
initialize() {
initialize () {
this.constructChannel()
this.setupStateTracking()
@ -47,11 +45,11 @@ class PeerTubeEmbedApi {
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())
@ -69,9 +67,8 @@ class PeerTubeEmbedApi {
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) {
@ -86,14 +83,13 @@ class PeerTubeEmbedApi {
/**
* 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
@ -104,7 +100,7 @@ class PeerTubeEmbedApi {
params: {
position,
volume,
playbackState: currentState,
playbackState: currentState
}
})
}, 500)
@ -125,7 +121,7 @@ class PeerTubeEmbedApi {
this.embed.player.peertube().on('videoFileUpdate', () => this.loadResolutions())
}
private loadResolutions() {
private loadResolutions () {
let resolutions = []
let currentResolutionId = this.embed.player.peertube().getCurrentResolutionId()
@ -152,30 +148,28 @@ class PeerTubeEmbedApi {
}
class PeerTubeEmbed {
constructor(
private videoContainerId : string
) {
this.videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
}
videoElement: HTMLVideoElement
player: any
playerOptions: any
api: PeerTubeEmbedApi = null
autoplay = false
controls = true
muted = false
loop = false
enableApi = false
startTime = 0
scope = 'peertube'
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() {
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
}
@ -219,15 +213,7 @@ class PeerTubeEmbed {
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) {
@ -235,7 +221,14 @@ class PeerTubeEmbed {
}
}
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
@ -248,24 +241,23 @@ class PeerTubeEmbed {
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)
}
@ -279,7 +271,7 @@ class PeerTubeEmbed {
controls: this.controls,
muted: this.muted,
loop: this.loop,
startTime : this.startTime,
startTime: this.startTime,
inactivityTimeout: 1500,
videoViewUrl: this.getVideoUrl(videoId) + '/views',
@ -295,14 +287,15 @@ class PeerTubeEmbed {
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()
})
@ -310,3 +303,4 @@ class PeerTubeEmbed {
}
PeerTubeEmbed.main()
.catch(err => console.error('Cannot init embed.', err))

View File

@ -1,49 +1,47 @@
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',
'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'