Fix player lint

pull/794/merge
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" "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",

View File

@ -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

View File

@ -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
} }

View File

@ -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

View File

@ -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))

View File

@ -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'