Welo Player Lib @ 4.2.0

This library recieves the information needed to play a video in m3u8 format

Build

Run npm run build:prod to build the project. The compiled code can be found in dist/welo-player-lib.

Running and debugging

Run npm run build:watch to build the library files, but using the flag '--watch', wich will reload and rebuild the library for every change you make. This could be usefull in debugging your app locally.

Debugging locally

Explenation extracted from https://dev.to/angular/pro-tip-npm-link-explained-57be

If you are working in this library but want to see how your changes afect the main project you are working on, you dont need too publish to every time you make a change.
You can use npm link

1. Go to dist/welo-player-lib
2. Run npm link
3. Inside you project directory, run npm link welo-player-lib

To have it running in your project, you also have to add the 'preserveSymlinks' in your angular.json as presented below:

"architect": {
  "build": {
    "..." : ... ,
    "preserveSymlinks": true
  }
}

Publishing

Change the version in package.json

Run npm run build:prod

Go to /dist/welo-player-lib and run npm publish

Api Reference

| Name | Type | Required | Description | Default | | ---------------------- | ---------------------------- | -------- | -------------------------------------------------------------------------------------------- | ------------------ | | currentTimeMark | @Input string | ? | Gives the player a start position for the playCursor | - | | isLive | @Input boolean | false | Describes if player should go into live mode | false | | maxDurationError | @Input string | false | Sets the error message for when the user reaches the maximum time limit for a welo (in secs) | 'Maximum duration' | | maxLimit | @Input number | false | Maximum amount of seconds for a Welo | 3600 | | minDurationError | @Input string | false | Sets the error message for when the user reaches the minimum time limit for a welo (in secs) | 'Minimum duration' | | minLimit | @Input number | false | Minimum amount of seconds for a Welo | 1 | | playbackSpeed | @Input number | false | Used to set the playback speed of the video | - | | searchData | @Input SearchData | false | Contains the data used to show the user the ocurrences of a speach search in the timeline | - | | timeZone | @Input string | false | Time zone of the loaded video, used to calculate hours | 'UTC' | | weloData | @Input WeloData | true | Minimum data needed to begin using the tool | - | | weloMarks | @Input WeloSet | ? | (deprecated?) probably used to give the player default welo marks | - | | currentTimeMarkChanges | @Output string | - | emits the current DateTime being played every time it changes | - | | error | @Output string | - | Emits errors | - | | getMoreData | @Output boolean | - | Asks new WeloData (to the right or to the left of the current m3u8) | - | | stopLive | @Output string | - | stops live mode | - | | thumb | @Output string / ArrayBuffer | - | emits the thumbnail image | - | | weloSet | @Output WeloSet | - | emits the lastests marks to get a welo cut | - |

Used Interfaces

interface WeloData {
  m3u8: string;
  cluster_size: number;
  start_time: string;
  end_time: string;
  clusters: Cluster[];
  total_seconds: number;
  total_real_seconds: number;
  aspect_ratio: string;
  offset: number;
}

interface Cluster {
  total_seconds: number;
  total_hole_seconds: number;
  start_time: string;
  end_time: string;
  real_seconds: number;
  chunks: Thumbs[];
}

interface Thumbs {
  start_time: string;
  end_time: string;
  thumb: string;
  width?: number;
  fake?: boolean;
  duration: number;
  seq: number;
}

interface WeloSet {
  startTime: string;
  endTime: string;
  weloStartInSecs: number;
  weloEndInSecs: number;
  m3u8: string;
  liveStartTime?: string;
  liveEndTime?: string;
}

interface SearchData {
  searchValue: string;
  timestamps: Array<string>;
}