Progressbar stucks

[mikegondan]

PLEASE FILL THIS OUT IF YOU WANT HELP WITH AN ISSUE!

Bug, feature request, or proposal:

Bug

What is the current behavior?

When you click on progressbar (or grab it), it stucks on grabbing and can't click anymore.

What is the expected behavior?

What are the steps to reproduce?

Click or grab the progressbar then try to click or grab.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 9

Is there anything else I should know?

[peavers]

Also experiencing this.

[nkoehler]

Stuck as in won't move or how? More details if possible, browsers, and a stackblitz will help.

[MartinMikac]

Stuck as in won't move or how? More details if possible, browsers, and a stackblitz will help.

I cant move to other part of movie. for example, in the middle of a movie. On hover of red dot of actual position on movie, icon has been changed to hand. But is not possible to move this "red dot" to any other side ( forward or backward)

My movie has size about 1GB and 8 minutes. Format .mp4. Same results is with format .mov. Codec H264.

<mat-video
    title="matVideoSource"
    [overlay]="true"
    [autoplay]="false"
    [preload]="false"
    [quality]="true"
    [fullscreen]="true"
    [download]="false"
    color="accent"
    spinner="spin"
    poster=""
    src="assets/life_ep_1.mp4"
  >

[GKaszewski]

Also experiencing this problem

[miguelleitevieira]

ERROR in (1,1): Directive ɵd, Property '_onSlide' does not exist on type 'MatSli
derProgressBarComponent'.
(1,1): Directive ɵd, Property '_onSlideEnd' does not exist on type 'MatSliderPro
gressBarComponent'.
(1,1): Directive ɵd, Property '_onSlideStart' does not exist on type 'MatSliderP
rogressBarComponent'.
node_modules/mat-video/mat-video.d.ts.ɵm.html(1,1): Directive ɵd, Property '_onS
lide' does not exist on type 'MatSliderProgressBarComponent'.
node_modules/mat-video/mat-video.d.ts.ɵm.html(1,1): Directive ɵd, Property '_onS
lideEnd' does not exist on type 'MatSliderProgressBarComponent'.
node_modules/mat-video/mat-video.d.ts.ɵm.html(1,1): Directive ɵd, Property '_onS
lideStart' does not exist on type 'MatSliderProgressBarComponent'.

I'm getting this strange error. Someone know how to fix?

[gabrielvendrame]

Same problem, also source tag inside mat-source seems not to work.

Not even fetching the video

<mat-video title="Video" [autoplay]="true" [preload]="true" [fullscreen]="true"[download]="false" color="accent" spinner="spin">
    <source matVideoSource src="http://localhost:3000/api/video" type="video/mp4">
</mat-video>

Video properly loading ( progressbar still not working)

<mat-video src="http://localhost:3000/api/video" title="Video" [autoplay]="true" [preload]="true" [fullscreen]="true" [download]="false" color="accent" spinner="spin">
</mat-video>

[mazard]

Same problem here:
ERROR in (1,1): Directive ɵd, Property '_onSlide' does not exist on type 'MatSliderProgressBarComponent'.
(1,1): Directive ɵd, Property '_onSlideEnd' does not exist on type 'MatSliderProgressBarComponent'.
(1,1): Directive ɵd, Property '_onSlideStart' does not exist on type 'MatSliderProgressBarComponent'.

Due to this error I'm not able to build SSR.

[chsculpt]

I'm also seeing problems with the Progress Bar:
1 it doesn't, there is a gripper hand but clicking on the bar does nothing, and you can't slide the position either.
2) it doesn't fill 100% of the video frame

[chsculpt]

Also seeing Same problem as reported by gabrielvendrame, also source tag inside mat-source seems not to work.

[cryystyy]

I have the same issue.

[ricardotorre]

same here too, angular 9

[ricardotorre]

https://stackblitz.com/edit/angular-o9vxrp

i have created this where the problem reproduces, first click/drag works but then doesn't appear to release (running on Chrome Version 83.0.4103.106 (Official Build) (64-bit))

[aponski]

I have the same problem unfortunately (Angular 9). I guess I have to look for other player :(

[atgnatus]

I fixed this by removing the constructor in internal/mat-slider-progress-bar/mat-slider-progress-bar.component.ts.

Now the progress / seek bar works fine in Angular 10.

I also removed the host in the component decorator since it was pointing to slider.ts methods that do not exist anymore but this step was not necessary.

[yukwar]

What did you removed from the constructor?

constructor(
    elementRef: ElementRef,
    focusMonitor: FocusMonitor,
    changeDetectorRef: ChangeDetectorRef,
    @Optional() dir: Directionality,
    @Attribute("tabindex") tabIndex: string
  ) {
    super(elementRef, focusMonitor, changeDetectorRef, dir, tabIndex);
    this.tabIndex = parseInt(tabIndex, 10) || 0;
  }

[ricardotorre]

The whole constructor is redundant and can be removed, the problem happens due to a new constructor signature in Angular 9 and 10

[saeed-abdul-rahim]

I've tried removing it from esm2015/internal/mat-slider-progress-bar/mat-slider-progress-bar.component.ts.
This isn't working for me. Result is the same
Angular 9