Fix player lint

client/package.json

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

client/src/standalone/player/definitions.ts

@@ -1,18 +1,16 @@
-
 export interface EventHandler<T> {
-    (ev : T) : void
+  (ev: T): void
 }
 
-export type PlayerEventType = 
+export type PlayerEventType =
-    'pause' | 'play' | 
+  'pause' | 'play' |
-    'playbackStatusUpdate' | 
+  'playbackStatusUpdate' |
-    'playbackStatusChange' | 
+  'playbackStatusChange' |
-    'resolutionUpdate'
+  'resolutionUpdate'
-;
 
 export interface PeerTubeResolution {
-    id : any
+  id: any
-    label : string
+  label: string
-    src : string
+  src: string
-    active : boolean
+  active: boolean
-}
+}

client/src/standalone/player/events.ts

@@ -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) {
+  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[]) {
+    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[]) {
+    this.eventRegistrations[ name ].registrations.push(handler)
-        for (let name of names)
+    return true
-            this.eventRegistrations[name] = { registrations: [] }
+  }
-    }
 
-    public fire<T>(name : string, event : T) {
+  public removeListener<T> (name: string, handler: EventHandler<T>) {
-        this.eventRegistrations[name].registrations.forEach(x => x(event))
+    if (!this.eventRegistrations[ name ]) return false
-    }
 
-    public addListener<T>(name : string, handler : EventHandler<T>) {
+    this.eventRegistrations[ name ].registrations = this.eventRegistrations[ name ].registrations.filter(x => x === handler)
-        if (!this.eventRegistrations[name]) {
-            console.warn(`PeerTube: addEventListener(): The event '${name}' is not supported`)
-            return false
-        }
 
-        this.eventRegistrations[name].registrations.push(handler)
+    return true
-        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
-    }
 }

client/src/standalone/player/player.ts

@@ -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 
+   * Optionally provide a `scope` to ensure that messages are not crossed
-   * between multiple PeerTube embeds. The string passed here must match the 
+   * between multiple PeerTube embeds. The string passed here must match the
    * `scope=` query parameter on the embed URL.
-   * 
+   *
-   * @param embedElement 
+   * @param embedElement
-   * @param scope 
+   * @param scope
    */
-  constructor(
+  constructor (
-    private embedElement : HTMLIFrameElement, 
+    private embedElement: HTMLIFrameElement,
-    private scope? : string
+    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> {
+  async getVolume (): Promise<number> {
-    return await this.sendMessage<void, number>('setVolume')
+    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[]> {
+  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).
    */
-  async getPlaybackRate() : Promise<number> {
+  async getPlaybackRate (): Promise<number> {
-    return await this.sendMessage<void, number>('getPlaybackRate')
+    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() {
+  private prepareToBeReady () {
-    let readyResolve, readyReject
+    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

client/src/standalone/videos/embed.ts

@@ -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 channel: Channel.MessagingChannel
-    private embed : PeerTubeEmbed
+  private isReady = false
-  ) {
+  private resolutions: PeerTubeResolution[] = null
+
+  constructor (private embed: PeerTubeEmbed) {
   }
 
-  private channel : Channel.MessagingChannel
+  initialize () {
-  private isReady = false
-  private resolutions : PeerTubeResolution[] = null
-
-  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) {
+  private setResolution (resolutionId: number) {
-    if (resolutionId === -1 && this.embed.player.peertube().isAutoResolutionForbidden()) 
+    if (resolutionId === -1 && this.embed.player.peertube().isAutoResolutionForbidden()) return
-      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() {
+  private setupStateTracking () {
-    
+    let currentState: 'playing' | 'paused' | 'unstarted' = 'unstarted'
-    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(
+  videoElement: HTMLVideoElement
-    private videoContainerId : string
+  player: any
-  ) {
+  playerOptions: any
-    this.videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
+  api: PeerTubeEmbedApi = null
-  }
+  autoplay = false
+  controls = true
+  muted = false
+  loop = false
+  enableApi = false
+  startTime = 0
+  scope = 'peertube'
 
-  videoElement : HTMLVideoElement
+  static async main () {
-  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() {
     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() {
+  async init () {
-    if (!this.enableApi)
-      return
-
-    this.api = new PeerTubeEmbedApi(this)
-    this.api.initialize()
-  }
-
-  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 lastPart = urlParts[ urlParts.length - 1 ]
-    const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[0]
+    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) 
+      if (response.status === 404) return this.videoNotFound(this.videoElement)
-        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))

client/src/standalone/videos/test-embed.ts

@@ -1,49 +1,47 @@
 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 () => {
-  
   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 ]
 
   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',
-    'playbackStatusUpdate', 
+    '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 playbackRates: number[] = []
-  let activeRate = 1
   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))
-})
+})