@flosportsinc/ng-video-events v13.3.0

FloVideoEvents

Use Dependency Injection to bind to arbitrary video player events for easy extensibility

NPM Installation

npm i @flosportsinc/ng-video-events

App

Inside your AppModule install SvgTransferStateModule like so:

import { NgModule } from '@angular/core'
import { FloVideoEventsModule, VIDEO_PLAYER_EVENT_BINDINGS } from '@flosportsinc/ng-video-events'

@NgModule({
  imports: [
    FloVideoEventsModule
  ],
  providers: [
    // define your event bindings via Angular dependency injection
    {
      provide: VIDEO_PLAYER_EVENT_BINDINGS,
      multi: true,
      useValue: {
        // every event has the following signature
        pause: (videoEvent: Event, videoElement: HTMLVideoElement, 
          videoInstanceId: string,  videoGroupId: string, 
          metadata: TMeta, emitFunc: (msg: TMessage) => void, 
          onDestroy: Observable<any>) => {
            // do stuff in here
        }
      }
    },
    {
      provide: VIDEO_PLAYER_EVENT_BINDINGS,
      multi: true,
      useFactory: (someService) => { // for AOT, you will need to make this an exported factory function
        return {
          pause: (...args) => {
            // do stuff here
            someService.doTheThing(arg[1])
          }
        }
      },
      deps: [SomeService] // pass in your services to do more interesting things!
    }
  ]
})
export class AppModule { }

Event handler signature

type FloVideoEventHandler<TMeta = any, TMessage = any> = (
  videoEvent: Event,
  videoElement: HTMLVideoElement,
  videoInstanceId: string,
  videoGroupId: string,
  metadata: TMeta,
  emitFunc: (msg: TMessage) => void,
  onDestroy: Observable<any>
) => void

Basic usage

Any event mappings providers will be bound and executed accoridingly during the video player lifecycle.

<video floVideoEvents></video>

With metadata

You can pass data from parent components through to your event binding functions if needed.

  // notice the "metadata" parameter
  (videoEvent: Event, videoElement: HTMLVideoElement, 
    videoInstanceId: string,  videoGroupId: string, 
    metadata: TMeta, emitFunc: (msg: TMessage) => void, 
    onDestroy: Observable<any>) => {
      // you can use it in your event binding
    }

<video [floVideoEvents]="{ property: 'some', property2: 'info' }"></video>

Emit changes from event bindings

You can emit messages from your event bindings and pass them back up to parent components if needed.

  // notice the "emitFunc" parameter
  (videoEvent: Event, videoElement: HTMLVideoElement, 
    videoInstanceId: string,  videoGroupId: string, 
    metadata: TMeta, emitFunc: (msg: TMessage) => void, 
    onDestroy: Observable<any>) => {
      // calling this will emit an event from the directive "floVideoEventMessage"
      emitFunc('whatever you want')
    }

<video floVideoEvents [floVideoEventMessage]="captureMessages($event)"></video>