nkoehler / mat-video

:tv: mat-video is an Angular 8/9+ video player using Material!
https://nkoehler.github.io/mat-video/
MIT License
91 stars 47 forks source link

Full screen has an error (and doesn't work) with mat-dialog #10

Closed DenisaSurdu closed 5 years ago

DenisaSurdu commented 5 years ago

Bug, feature request, or proposal:

Bug

What is the current behavior?

When using a video in a mat-dialog and clicking on full screen, following error can be seen in Chrome dev-tools and the video doesn't change to full screen.

mat-video.js:582 Uncaught (in promise) TypeError: Failed to execute 'requestFullscreen' on 'Element': parameter 1 ('options') is not an object.
    at FullscreenService.push../node_modules/mat-video/fesm5/mat-video.js.FullscreenService.request (mat-video.js:582)
    at MatFullscreenButtonComponent.push../node_modules/mat-video/fesm5/mat-video.js.MatFullscreenButtonComponent.updateFullscreen (mat-video.js:745)
    at MatFullscreenButtonComponent.push../node_modules/mat-video/fesm5/mat-video.js.MatFullscreenButtonComponent.toggleFullscreen (mat-video.js:736)
    at Object.handleEvent (mat-video.d.ts.ɵh.html:1)
    at handleEvent (core.js:19628)
    at callWithDebugContext (core.js:20722)
    at Object.debugHandleEvent [as handleEvent] (core.js:20425)
    at dispatchEvent (core.js:17077)
    at core.js:17524
    at HTMLButtonElement.<anonymous> (platform-browser.js:993)

What is the expected behavior?

I would have expected the video to display full screen and without an error.

Alternatively (much preferred) have the option to open video in an overlay mode without needing a mat-dialog.

What are the steps to reproduce?

Use the following code in a mat-dialog component:

<mat-dialog-content>
  <mat-video [src]="src" [autoplay]="true" [fullscreen]="true" [download]="false"></mat-video>
</mat-dialog-content>

Run the app, open dev tools, open the video (should open it in a dialog) and click on the full screen button.

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

The video has no overlay option and it needs to be displayed on a user action only.

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

Angular 7.0.3 "@angular/material": "7.0.3", "mat-video": "2.5.0" "typescript": "3.1.6"

Chrome Version 71.0.3578.98 (Official Build) unknown (64-bit)

OS: Ubuntu 16.6 LTS

Is there anything else I should know?

n/a

nkoehler commented 5 years ago

Version 2.5.1 of mat-video is now available. I was able to reproduce the issue on that specific version of Chrome, and a fix has been introduced in this release which I can confirm works on Chrome 71. As such, this issue will be closed.