Angular Ng-Container Video and Link Display

import { Component, computed, effect, Input, OnInit, signal, SimpleChanges, WritableSignal, } from '@angular/core'; import { IResource } from '../../models/resource.models'; import { CommonModule } from '@angular/common'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { ResourceType } from '../../models/file.models'; import { ResourceDrawerService } from '../../services/resource-drawer.service'; @Component({ selector: 'eino-resource-preview-link', standalone: true, templateUrl: './resource-preview-link.component.html', styleUrls: ['./resource-preview-link.component.scss'], imports: [CommonModule], }) export class ResourcePreviewLinkComponent implements OnInit { @Input({ required: true }) resource!: IResource; sanitizedVideoUrl!: SafeResourceUrl; isVideoPlaying: boolean = true; isYouTube: boolean = false; isVimeo: boolean = false; activeResourceType: WritableSignal<ResourceType> = signal('all'); activeResources = computed(() => { const resources = this.resourceDrawerService.resources(); switch (this.activeResourceType()) { case 'all': return resources; case 'audio': return resources.filter((resource) => resource.content_type?.startsWith('audio/') ); case 'video': return resources.filter((resource) => resource.content_type?.startsWith('video/') ); case 'image': return resources.filter((resource) => resource.content_type?.startsWith('image/') ); case 'link': return resources.filter((resource) => resource.content_type === 'link'); case 'text': return resources.filter((resource) => resource.content_type === 'text'); case 'document': return resources.filter( (resource) => !resource.content_type?.startsWith('audio/') && !resource.content_type?.startsWith('video/') && !resource.content_type?.startsWith('image/') && resource.content_type !== 'link' && resource.content_type !== 'text' ); default: return []; } }); constructor( private sanitizer: DomSanitizer, private resourceDrawerService: ResourceDrawerService ) { effect(() => { console.log('ffff', this.videoId); }); } ngOnChanges(changes: SimpleChanges): void { //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. //Add '${implements OnChanges}' to the class.i if (changes['resource']) { console.log('cccfffff'); } } ngOnInit() { if (this.resource.link_url) { this.isYouTube = this.isYouTubeLink(this.resource.link_url); this.isVimeo = this.isVimeoLink(this.resource.link_url); if (this.isYouTube || this.isVimeo) { this.sanitizedVideoUrl = this.getSanitizedUrl(this.resource.link_url); } } console.log('ggg', this.activeResources()); } isYouTubeLink(url: string): boolean { const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/; return youtubeRegex.test(url); } isVimeoLink(url: string): boolean { const vimeoRegex = /^(https?:\/\/)?(www\.)?(vimeo\.com|player\.vimeo\.com\/video)\/\d+(\?.*)?$/; return vimeoRegex.test(url); } videoId = ''; getSanitizedUrl(url: string): SafeResourceUrl { if (this.isYouTube) { this.videoId = this.extractVideoIdFromYouTube(url); const safeUrl = `https://www.youtube.com/embed/${this.videoId}`; return this.sanitizer.bypassSecurityTrustResourceUrl(safeUrl); } else if (this.isVimeo) { this.videoId = this.extractVideoIdFromVimeo(url); const safeUrl = `https://player.vimeo.com/video/${this.videoId}`; return this.sanitizer.bypassSecurityTrustResourceUrl(safeUrl); } return ''; } extractVideoIdFromYouTube(url: string): string { let videoId = ''; if (url.includes('youtube.com')) { const urlParams = new URLSearchParams(url.split('?')[1]); videoId = urlParams.get('v') || ''; } else if (url.includes('youtu.be')) { const pathParts = url.split('/'); videoId = pathParts[pathParts.length - 1].split('?')[0]; } return videoId; } extractVideoIdFromVimeo(url: string): string { const pathParts = url.split('/'); return pathParts[pathParts.length - 1].split('?')[0]; } }. this is the ts file update my both file accordingly so that no multiple video should play at same time