mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-15 21:56:18 -08:00
3cc5af1492
* perf(playback): make the web players and M3U player OnPush Plan item C6 step 3 for playback: the eight Eager components in libs/ui/playback (video.js, ArtPlayer, HTML5/hls/mpegts, audio player, web player view, VOD details, sidebar, external-player dialog) and the M3U video player and VOD detail switch to OnPush. The player libraries' events already reach the UI through the signal-backed controls adapter or outputs, and the players' DOM belongs to the libraries. The M3U video player rendered three plain fields written outside template events: the channel-number overlay, cleared by a 2 s debounce timer, and the player choice, written from an IndexedDB read and a settings effect. They are signals now, and a test checks that the overlay leaves the DOM when the timer fires. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * test(playback): let the overlay's signal write schedule its own render Review follow-up (Greptile): the test forced a render with fixture.detectChanges() after the debounce timer, so it would pass even if the signal write stopped scheduling an OnPush render. It now runs the fixture with autoDetectChanges and only advances the fake timers; with plain fields under OnPush the overlay never renders and the test fails. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: 4gray <fourgray@proton.me> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import {
|
|
Component,
|
|
computed,
|
|
inject,
|
|
input,
|
|
output,
|
|
ChangeDetectionStrategy,
|
|
} from '@angular/core';
|
|
import { MatIconButton } from '@angular/material/button';
|
|
import { MatIcon } from '@angular/material/icon';
|
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
import { RouterLink } from '@angular/router';
|
|
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
|
|
import { PlaylistSwitcherComponent } from '@iptvnator/playlist/shared/ui';
|
|
import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
|
|
import { Channel } from '@iptvnator/shared/interfaces';
|
|
import { ChannelListContainerComponent } from '@iptvnator/ui/components';
|
|
|
|
@Component({
|
|
selector: 'app-sidebar',
|
|
templateUrl: './sidebar.component.html',
|
|
styleUrls: ['./sidebar.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
imports: [
|
|
ChannelListContainerComponent,
|
|
MatIcon,
|
|
MatIconButton,
|
|
MatTooltip,
|
|
PlaylistSwitcherComponent,
|
|
RouterLink,
|
|
TranslatePipe,
|
|
],
|
|
})
|
|
export class SidebarComponent {
|
|
readonly channels = input<Channel[]>([]);
|
|
readonly channelsLoading = input(false);
|
|
readonly showPlaylistHeader = input(true);
|
|
readonly activeView = input<string>('all');
|
|
readonly sidebarWidth = input<number | null>(null);
|
|
readonly sidebarWidthRequested = output<number>();
|
|
readonly sidebarWidthRequestEnded = output<number>();
|
|
readonly sidebarToggleRequested = output<void>();
|
|
/** Groups view only: the group whose channels are currently listed. */
|
|
readonly selectedGroupChange = output<string | null>();
|
|
|
|
private readonly playlistContext = inject(PlaylistContextFacade);
|
|
private readonly translate = inject(TranslateService);
|
|
|
|
readonly activePlaylist = this.playlistContext.activePlaylist;
|
|
readonly playlistTitle = computed(() => {
|
|
const playlist = this.activePlaylist();
|
|
|
|
return (
|
|
playlist?.title ||
|
|
playlist?.filename ||
|
|
playlist?.url ||
|
|
playlist?.portalUrl ||
|
|
'Untitled playlist'
|
|
);
|
|
});
|
|
|
|
readonly subtitle = computed(() => {
|
|
if (this.channelsLoading()) {
|
|
return this.translate.instant('CHANNELS.LOADING');
|
|
}
|
|
|
|
const count = this.channels()?.length ?? 0;
|
|
return `${count} ${this.translate.instant('HOME.PLAYLISTS.CHANNELS')}`;
|
|
});
|
|
|
|
onSidebarWidthRequested(width: number): void {
|
|
this.sidebarWidthRequested.emit(width);
|
|
}
|
|
|
|
onSidebarWidthRequestEnded(width: number): void {
|
|
this.sidebarWidthRequestEnded.emit(width);
|
|
}
|
|
}
|