diff --git a/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.html b/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.html index fc3b288de..68413c06d 100644 --- a/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.html +++ b/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.html @@ -21,4 +21,7 @@ [channelList]="channels()" [activeView]="activeView()" [recentItems]="activePlaylist()?.recentlyViewed ?? []" + [sidebarWidth]="sidebarWidth()" + (sidebarWidthRequested)="onSidebarWidthRequested($event)" + (sidebarWidthRequestEnded)="onSidebarWidthRequestEnded($event)" /> diff --git a/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.ts b/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.ts index 6b5134eea..10bac6372 100644 --- a/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.ts +++ b/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.ts @@ -1,4 +1,4 @@ -import { Component, computed, inject, input } from '@angular/core'; +import { Component, computed, inject, input, output } from '@angular/core'; import { MatIconButton } from '@angular/material/button'; import { MatIcon } from '@angular/material/icon'; import { MatTooltip } from '@angular/material/tooltip'; @@ -27,6 +27,9 @@ export class SidebarComponent { readonly channels = input([]); readonly showPlaylistHeader = input(true); readonly activeView = input('all'); + readonly sidebarWidth = input(null); + readonly sidebarWidthRequested = output(); + readonly sidebarWidthRequestEnded = output(); private readonly playlistContext = inject(PlaylistContextFacade); private readonly translate = inject(TranslateService); @@ -48,4 +51,12 @@ export class SidebarComponent { 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); + } }