videogular / videogular2

The HTML5 video player for Angular 2
https://videogular.github.io/videogular2-showroom/#/
MIT License
672 stars 211 forks source link

cue point not working #853

Open 0DUDDU opened 5 years ago

0DUDDU commented 5 years ago

Description

the cue point are not working since new release. it show error on console. it's working when i downgrade to v6.4.0

Expected Behavior

cue point to work properly

Actual Behavior

got error on console,

RateAppComponent.html:8 ERROR TypeError: Cannot read property 'cues' of undefined
    at VgCuePoints.push../node_modules/videogular2/compiled/src/core/vg-cue-points/vg-cue-points.js.VgCuePoints.ngDoCheck (vg-cue-points.js:51)
    at checkAndUpdateDirectiveInline (core.js:27791)
    at checkAndUpdateNodeInline (core.js:38472)
    at checkAndUpdateNode (core.js:38411)
    at debugCheckAndUpdateNode (core.js:39433)
    at debugCheckDirectivesFn (core.js:39376)
    at Object.eval [as updateDirectives] (RateAppComponent.html:8)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:39364)
    at checkAndUpdateView (core.js:38376)
    at callViewAction (core.js:38742)

Steps to Reproduce

  1. install videogular2
  2. use code from the doc

here is the code i use

<vg-player style="height: 500px;width: 500px" (onPlayerReady)="onPlayerReady($event)">
  <vg-overlay-play></vg-overlay-play>
  <vg-buffering></vg-buffering>

  <vg-scrub-bar>
    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
    <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    <vg-scrub-bar-cue-points *ngIf="track && track.cues" [vgCuePoints]="track.cues"></vg-scrub-bar-cue-points>
  </vg-scrub-bar>

  <vg-controls>
    <vg-play-pause></vg-play-pause>
    <vg-playback-button></vg-playback-button>

    <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

    <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>

    <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
    <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

    <vg-mute></vg-mute>
    <vg-volume></vg-volume>

    <vg-fullscreen></vg-fullscreen>
  </vg-controls>

  <video [vgMedia]="media" #media id="ratePlayer" preload="auto" crossorigin="anonymous" src="https://cdn.synoria.com/test_autohighlight.mp4">
  </video>
</vg-player>
<button nz-button (click)="addCue()">add cue point</button>
  api: VgAPI;
  track: TextTrack;

  constructor() {
  }

  ngOnInit() {
  }

  onPlayerReady(api: VgAPI) {
    this.api = api;
    this.api.addTextTrack('metadata', 'Clips')
    this.track = this.api.textTracks[0];
  }

    onPlayerReady(api: VgAPI) {
    this.api = api;
    this.api.addTextTrack('metadata', 'Clips')
    setTimeout(() => {
      this.newCue.time = [0, Math.floor(this.api.duration)];
      this.track = this.api.textTracks[0];
    }, 500);
  }

    addCue() {
      this.track.addCue(
        new VTTCue(10, 20)
      );
    }
  }
mnchsmn commented 5 years ago

having the same problem - thanks for the hint on using the old version