mirror of https://github.com/Chocobozzz/PeerTube
Fix player lint
Chocobozzz
parent
999417328b
commit
902aa3a099
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
|
||||
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
|
||||
}
|
||||
id: any
|
||||
label: string
|
||||
src: string
|
||||
active: boolean
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,48 @@
|
|||
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 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 registerTypes(names : string[]) {
|
||||
for (let name of names)
|
||||
this.eventRegistrations[name] = { registrations: [] }
|
||||
}
|
||||
this.eventRegistrations[ name ].registrations.push(handler)
|
||||
return true
|
||||
}
|
||||
|
||||
public fire<T>(name : string, event : T) {
|
||||
this.eventRegistrations[name].registrations.forEach(x => x(event))
|
||||
}
|
||||
public removeListener<T> (name: string, handler: EventHandler<T>) {
|
||||
if (!this.eventRegistrations[ name ]) 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 = this.eventRegistrations[ name ].registrations.filter(x => x === handler)
|
||||
|
||||
this.eventRegistrations[name].registrations.push(handler)
|
||||
return true
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
return true
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,29 +3,35 @@ import { EventRegistrar } from './events'
|
|||
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)
|
||||
|
||||
|
|
@ -33,55 +39,51 @@ 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()
|
||||
}
|
||||
|
||||
/**
|
||||
* 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')
|
||||
}
|
||||
|
||||
|
|
@ -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,62 +99,62 @@ 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
|
||||
* @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: '*',
|
||||
|
|
@ -160,14 +162,16 @@ 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
|
||||
})
|
||||
|
||||
|
||||
this.channel.bind('ready', success => success ? readyResolve() : readyReject())
|
||||
this.channel.call({
|
||||
method: 'isReady',
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
* 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()
|
||||
|
||||
|
|
@ -46,14 +44,14 @@ 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())
|
||||
channel.bind('pause', (txn, params) => this.embed.player.pause())
|
||||
channel.bind('seek', (txn, time) => this.embed.player.currentTime(time))
|
||||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
'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'
|
||||
|
|
@ -93,6 +91,6 @@ window.addEventListener('load', async () => {
|
|||
|
||||
player.getResolutions().then(
|
||||
resolutions => updateResolutions(resolutions))
|
||||
player.addEventListener('resolutionUpdate',
|
||||
player.addEventListener('resolutionUpdate',
|
||||
resolutions => updateResolutions(resolutions))
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue