fix(ui): correct imports, guard checks, logging and settings handling

apps/web/src/app/shared/components/mpv-player-bar/mpv-player-bar.component.html

@@ -1,4 +1,4 @@
-@if ((activeProcesses$ | async)?.length) {
+<!-- @if ((activeProcesses$ | async)?.length) {
   <div class="mpv-player-bar">
     @for (process of activeProcesses$ | async; track process.id) {
       <div class="player-item">
@@ -24,20 +24,6 @@
           </div>
         </div>
         <div class="player-controls">
-          <!-- <button
-          mat-icon-button
-          (click)="pauseStream(process.id)"
-          title="Pause"
-          >
-          <mat-icon>pause</mat-icon>
-        </button>
-        <button
-          mat-icon-button
-          (click)="playStream(process.id)"
-          title="Play"
-          >
-          <mat-icon>play_arrow</mat-icon>
-        </button> -->
         <button
           mat-icon-button
           (click)="closeStream(process.id)"
@@ -50,3 +36,4 @@
   }
 </div>
 }
+ -->

apps/web/src/app/shared/components/mpv-player-bar/mpv-player-bar.component.ts

@@ -1,30 +1,19 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { Observable } from 'rxjs';
-import {
-    MpvPlayerService,
-    MpvProcess,
-} from '../../services/mpv-player.service';
 
 @Component({
-    imports: [CommonModule, MatIconModule, MatButtonModule],
+    /* imports: [MatIcon, MatIconButton], */
     selector: 'app-mpv-player-bar',
     templateUrl: './mpv-player-bar.component.html',
-    styleUrls: ['./mpv-player-bar.component.scss']
+    styleUrls: ['./mpv-player-bar.component.scss'],
 })
 export class MpvPlayerBarComponent {
-    activeProcesses$: Observable<MpvProcess[]>;
-
-    constructor(private mpvPlayerService: MpvPlayerService) {
-        this.activeProcesses$ = this.mpvPlayerService.activeProcesses$;
-    }
+    /* private mpvPlayerService = inject(MpvPlayerService);
 
+    activeProcesses$ = this.mpvPlayerService.activeProcesses$;
+    
     async closeStream(processId: number): Promise<void> {
         await this.mpvPlayerService.closeStream(processId);
-    }
-
+    } */
     /* async playStream(processId: number): Promise<void> {
         await this.mpvPlayerService.playStream(processId);
     }