Error rendering HTML5 videos without an iframe in Angular 13

[mikel500]

Hi Sachin,

I'm writing to inform you about an issue with the lightgallery library in Angular 13. Videos cannot be displayed in the Inline Gallery without using an iframe.

Please find attached a screenshot of the video with the spinner.

---

package.json
"@angular/cli": "~13.3.6",
"lightgallery": "~2.7.1" 

----------------

gallery-inline.component.ts
 ngOnInit(): void {

 /* Prevent it from starting outside the browser. */

   if (isPlatformBrowser(this.platformId) && this.items?.length) {
     this.lightGallerySettings = this.galleryService.getInlineSettings(
       this.settings,
       this.getGalleryItems(this.items),
       this.elementRef.nativeElement.firstChild,
     )
   }
 }

 private getGalleryItem(item: GalleryInline): GalleryItem {
   const url = this.galleryService.getMediaSize(item.size) as string
   const typeSource = this.galleryService.getTypeSource(url) as string

   /* It does not work in case the function receives a link with extension (mp4, webm, ogg)  */

   return typeSource && item.type === 'video' ? {
     poster: item.poster || defaultPosterImage,
     thumb: item.poster || defaultPosterImage,
     title: item.altText,
     video: {
       source: [{ src: url, type: typeSource }],
       tracks: null,
       attributes: <HTMLVideoElement>{ preload: 'none', controls: true },
     },
   } : {
     src: url,
     thumb: item.poster || (item.type === 'video' ? defaultPosterImage : url),
     iframe: item.type === 'video',
     alt: item.altText,
   }
 }
----------------

gallery-inline.component.html

<div class="w2m-gallery-inline">
  <lightgallery *ngIf="items && lightGallerySettings" [settings]="lightGallerySettings" [onInit]="onInitLightGallery" >
 </lightgallery>
</div>

----------------

gallery-inline.module.ts
...
import { LightgalleryModule } from 'lightgallery/angular/13'
import { GalleryInlineComponent } from './gallery-inline.component'

@NgModule({
 declarations: [GalleryInlineComponent],
 imports: [
   CommonModule,
   LightgalleryModule,
 ],
 exports: [GalleryInlineComponent],
})
export class GalleryInlineModule { }

----------------

gallery.service.ts

import { LightGallerySettings } from 'lightgallery/lg-settings'
import lgAutoplay from 'lightgallery/plugins/autoplay'
import lgZoom from 'lightgallery/plugins/zoom'
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgFullscreen from 'lightgallery/plugins/fullscreen'
import lgVideo from 'lightgallery/plugins/video'
import { GalleryItem } from 'lightgallery/lg-utils'

----------------

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If the issue is still valid for version 2.x, please re-open. Apologize for not responding on time. Thank you for your contributions.