- {{ 'SETTINGS.REMOTE_CONTROL' | translate }} (m3u)
+ {{ 'SETTINGS.REMOTE_CONTROL' | translate }}
{{ 'SETTINGS.REMOTE_CONTROL_DESCRIPTION' | translate }}
diff --git a/apps/web/src/app/shared/services/remote-channel-navigation.util.ts b/apps/web/src/app/shared/services/remote-channel-navigation.util.ts
new file mode 100644
index 000000000..d5f57eaed
--- /dev/null
+++ b/apps/web/src/app/shared/services/remote-channel-navigation.util.ts
@@ -0,0 +1,34 @@
+export type RemoteChannelDirection = 'up' | 'down';
+
+/**
+ * Returns the adjacent item in the list for remote channel navigation.
+ * Uses wraparound when reaching the start or end of the list.
+ */
+export function getAdjacentChannelItem
(
+ items: T[],
+ activeId: string | number | null | undefined,
+ direction: RemoteChannelDirection,
+ getId: (item: T) => string | number | null | undefined
+): T | null {
+ if (!Array.isArray(items) || items.length === 0 || activeId == null) {
+ return null;
+ }
+
+ const activeIdAsString = String(activeId);
+ const currentIndex = items.findIndex((item) => {
+ const itemId = getId(item);
+ return itemId != null && String(itemId) === activeIdAsString;
+ });
+
+ if (currentIndex === -1) {
+ return null;
+ }
+
+ const length = items.length;
+ const nextIndex =
+ direction === 'up'
+ ? (currentIndex - 1 + length) % length
+ : (currentIndex + 1) % length;
+
+ return items[nextIndex] ?? null;
+}
diff --git a/apps/web/src/app/stalker/stalker-live-stream-layout/stalker-live-stream-layout.component.ts b/apps/web/src/app/stalker/stalker-live-stream-layout/stalker-live-stream-layout.component.ts
index c0fc84f76..7fbe2c75f 100644
--- a/apps/web/src/app/stalker/stalker-live-stream-layout/stalker-live-stream-layout.component.ts
+++ b/apps/web/src/app/stalker/stalker-live-stream-layout/stalker-live-stream-layout.component.ts
@@ -26,6 +26,7 @@ import { EpgItem } from 'shared-interfaces';
import { EpgViewComponent, WebPlayerViewComponent } from 'shared-portals';
import { SettingsStore } from '../../services/settings-store.service';
import { PlayerService } from '../../services/player.service';
+import { getAdjacentChannelItem } from '../../shared/services/remote-channel-navigation.util';
import { CategoryViewComponent } from '../../xtream-tauri/category-view/category-view.component';
import { PlaylistErrorViewComponent } from '../../xtream/playlist-error-view/playlist-error-view.component';
import { StalkerStore } from '../stalker.store';
@@ -107,6 +108,7 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
readonly scrollContainer = viewChild('scrollContainer');
private scrollListener: (() => void) | null = null;
private searchDebounceTimer: ReturnType | null = null;
+ private unsubscribeRemoteChannelChange?: () => void;
constructor() {
// Load favorites for current playlist
@@ -154,9 +156,21 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
this.stalkerStore.setSearchPhrase(search);
}, 500);
});
+
+ if (window.electron?.onChannelChange) {
+ const unsubscribe = window.electron.onChannelChange((data: {
+ direction: 'up' | 'down';
+ }) => {
+ this.handleRemoteChannelChange(data.direction);
+ });
+ if (typeof unsubscribe === 'function') {
+ this.unsubscribeRemoteChannelChange = unsubscribe;
+ }
+ }
}
ngOnDestroy() {
+ this.unsubscribeRemoteChannelChange?.();
this.removeScrollListener();
if (this.searchDebounceTimer) {
clearTimeout(this.searchDebounceTimer);
@@ -389,4 +403,25 @@ export class StalkerLiveStreamLayoutComponent implements OnDestroy {
this.scrollListener = null;
}
}
+
+ private handleRemoteChannelChange(direction: 'up' | 'down'): void {
+ const activeItem = this.stalkerStore.selectedItem();
+ if (!activeItem?.id) {
+ return;
+ }
+
+ const channels = this.itvChannels();
+ const nextItem = getAdjacentChannelItem(
+ channels,
+ activeItem.id,
+ direction,
+ (item) => item.id
+ );
+
+ if (!nextItem) {
+ return;
+ }
+
+ void this.playChannel(nextItem);
+ }
}
diff --git a/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.ts b/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.ts
index e6888a423..142f07e6d 100644
--- a/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.ts
+++ b/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.ts
@@ -6,6 +6,7 @@ import {
ElementRef,
inject,
Injector,
+ OnDestroy,
OnInit,
signal,
viewChild,
@@ -25,6 +26,7 @@ import { PlaylistSwitcherComponent, ResizableDirective } from 'components';
import { XtreamCategory } from 'shared-interfaces';
import { EpgViewComponent, WebPlayerViewComponent } from 'shared-portals';
import { SettingsStore } from '../../services/settings-store.service';
+import { getAdjacentChannelItem } from '../../shared/services/remote-channel-navigation.util';
import {
CategoryManagementDialogComponent,
CategoryManagementDialogData,
@@ -63,7 +65,7 @@ const LIVE_CHANNEL_SORT_STORAGE_KEY = 'xtream-live-channel-sort-mode';
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class LiveStreamLayoutComponent implements OnInit {
+export class LiveStreamLayoutComponent implements OnInit, OnDestroy {
private readonly favoritesService = inject(FavoritesService);
private readonly xtreamStore = inject(XtreamStore);
private readonly settingsStore = inject(SettingsStore);
@@ -104,12 +106,24 @@ export class LiveStreamLayoutComponent implements OnInit {
read: ElementRef,
});
private categoryScrollTop = 0;
+ private unsubscribeRemoteChannelChange?: () => void;
readonly player = this.settingsStore.player;
streamUrl: string;
favorites = new Map();
ngOnInit() {
+ if (window.electron?.onChannelChange) {
+ const unsubscribe = window.electron.onChannelChange((data: {
+ direction: 'up' | 'down';
+ }) => {
+ this.handleRemoteChannelChange(data.direction);
+ });
+ if (typeof unsubscribe === 'function') {
+ this.unsubscribeRemoteChannelChange = unsubscribe;
+ }
+ }
+
const savedSortMode = localStorage.getItem(
LIVE_CHANNEL_SORT_STORAGE_KEY
);
@@ -202,4 +216,29 @@ export class LiveStreamLayoutComponent implements OnInit {
this.liveChannelSortMode.set(mode);
localStorage.setItem(LIVE_CHANNEL_SORT_STORAGE_KEY, mode);
}
+
+ ngOnDestroy(): void {
+ this.unsubscribeRemoteChannelChange?.();
+ }
+
+ private handleRemoteChannelChange(direction: 'up' | 'down'): void {
+ const activeItem = this.xtreamStore.selectedItem();
+ if (!activeItem?.xtream_id) {
+ return;
+ }
+
+ const channels = this.xtreamStore.selectItemsFromSelectedCategory() as any[];
+ const nextItem = getAdjacentChannelItem(
+ channels,
+ activeItem.xtream_id,
+ direction,
+ (item) => item.xtream_id
+ );
+
+ if (!nextItem) {
+ return;
+ }
+
+ this.playLive(nextItem);
+ }
}
diff --git a/apps/web/src/typings.d.ts b/apps/web/src/typings.d.ts
index f157308b4..31e2fe1a4 100644
--- a/apps/web/src/typings.d.ts
+++ b/apps/web/src/typings.d.ts
@@ -194,7 +194,7 @@ declare global {
// Remote control
onChannelChange?: (
callback: (data: { direction: 'up' | 'down' }) => void
- ) => void;
+ ) => () => void;
// Player error notifications
onPlayerError?: (
callback: (data: {