Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 100x 5x 5x 8x 5x 5x 5x 4x 4x 4x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x | import { Component, OnInit, OnDestroy, ViewChild, ElementRef} from '@angular/core';
import { NgIf, NgFor } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { LoaderComponent } from '../loader/loader.component';
import { TwinpadApiService } from '../../services/twinpad-api.service';
import { MultiSelectModule } from 'primeng/multiselect';
import { Video } from '../../models/videos';
import Hls from 'hls.js';
@Component({
selector: 'app-videos',
imports: [MultiSelectModule, FormsModule, NgIf, LoaderComponent, RouterModule, NgFor],
templateUrl: './videos.component.html',
styleUrl: './videos.component.scss'
})
export class VideosComponent implements OnInit, OnDestroy {
constructor(private twinpadApiService: TwinpadApiService, private elRef: ElementRef){}
private _videoContainer?: ElementRef<HTMLDivElement>;
private hlsSubscriptions: { [key: string]: Hls } = {};
@ViewChild('videoContainer')
set videoContainerSetter(ref: ElementRef<HTMLDivElement> | undefined){
this._videoContainer = ref;
}
isLoading: boolean = true;
selectedVideos: Video[] = [];
videos: Video[] = [];
ngOnInit(): void {
// const videoElement = this.videoPlayerRef.nativeElement;
this.twinpadApiService.getVideos().subscribe({
next: value => {
this.isLoading = false;
this.videos = value;
},
error: error => {
console.log(error);
}
});
}
ngOnDestroy(): void {
this.destroyHlsSubscriptions();
}
onChangeSelection(newSelection: Video[]){
this.destroyHlsSubscriptions(newSelection.map(v => v.id));
newSelection.forEach(selection => {
Eif(!this.hlsSubscriptions[selection.id]){
this.twinpadApiService.getStream(selection.id).subscribe({
next: value => {
const video = document.getElementById('video-' + selection.id) as HTMLVideoElement;
Eif(Hls.isSupported()){
const hls = new Hls();
hls.loadSource(window.location.protocol+"//"+window.location.hostname.toLowerCase()+':8888/'+value+"/index.m3u8");
hls.attachMedia(video);
this.hlsSubscriptions[selection.id] = hls;
}
},
error: error => {
console.log(error);
}
});
}
});
}
private destroyHlsSubscriptions(keepIds?: string[]) {
Object.keys(this.hlsSubscriptions).forEach(key => {
if (!keepIds || !keepIds.includes(key)) {
const hls = this.hlsSubscriptions[key];
if (hls) {
hls.destroy();
}
delete this.hlsSubscriptions[key];
}
});
}
}
|