Proyecto App Linux
This commit is contained in:
@@ -0,0 +1,18 @@
|
||||
# remote-control
|
||||
|
||||
UI library for the remote control web app.
|
||||
|
||||
## Scope
|
||||
|
||||
- Sends channel up/down commands to `/api/remote-control/channel/up|down`
|
||||
- Sends direct number-based channel selection (`/channel/select-number`)
|
||||
- Reads live playback status from `/api/remote-control/status`
|
||||
- Sends volume commands (`/volume/up|down|toggle-mute`)
|
||||
- Used for live channel navigation in:
|
||||
- M3U playlists
|
||||
- Xtream Live TV
|
||||
- Stalker ITV
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `nx test remote-control` to execute the unit tests.
|
||||
@@ -0,0 +1,34 @@
|
||||
import nx from '@nx/eslint-plugin';
|
||||
import baseConfig from '../../../eslint.config.mjs';
|
||||
|
||||
export default [
|
||||
...baseConfig,
|
||||
...nx.configs['flat/angular'],
|
||||
...nx.configs['flat/angular-template'],
|
||||
{
|
||||
files: ['**/*.ts'],
|
||||
rules: {
|
||||
'@angular-eslint/directive-selector': [
|
||||
'error',
|
||||
{
|
||||
type: 'attribute',
|
||||
prefix: 'lib',
|
||||
style: 'camelCase',
|
||||
},
|
||||
],
|
||||
'@angular-eslint/component-selector': [
|
||||
'error',
|
||||
{
|
||||
type: 'element',
|
||||
prefix: 'lib',
|
||||
style: 'kebab-case',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/*.html'],
|
||||
// Override or add rules here
|
||||
rules: {},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,21 @@
|
||||
export default {
|
||||
displayName: 'remote-control',
|
||||
preset: '../../../jest.preset.js',
|
||||
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
|
||||
coverageDirectory: '../../../coverage/libs/ui/remote-control',
|
||||
transform: {
|
||||
'^.+\\.(ts|mjs|js|html)$': [
|
||||
'jest-preset-angular',
|
||||
{
|
||||
tsconfig: '<rootDir>/tsconfig.spec.json',
|
||||
stringifyContentPathRegex: '\\.(html|svg)$',
|
||||
},
|
||||
],
|
||||
},
|
||||
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
|
||||
snapshotSerializers: [
|
||||
'jest-preset-angular/build/serializers/no-ng-attributes',
|
||||
'jest-preset-angular/build/serializers/ng-snapshot',
|
||||
'jest-preset-angular/build/serializers/html-comment',
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "remote-control",
|
||||
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "libs/ui/remote-control/src",
|
||||
"prefix": "lib",
|
||||
"projectType": "library",
|
||||
"tags": ["scope:shared", "domain:playback", "type:ui"],
|
||||
"targets": {
|
||||
"test": {
|
||||
"executor": "@nx/jest:jest",
|
||||
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
|
||||
"options": {
|
||||
"jestConfig": "libs/ui/remote-control/jest.config.ts",
|
||||
"tsConfig": "libs/ui/remote-control/tsconfig.spec.json"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"executor": "@nx/eslint:lint"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './lib/remote-control/remote-control.component';
|
||||
export * from './lib/remote-control/remote-control.service';
|
||||
@@ -0,0 +1,153 @@
|
||||
<div class="remote">
|
||||
<div class="remote__body">
|
||||
<div class="now-card">
|
||||
<div class="now-card__top">
|
||||
<div class="now-card__label">Now Playing</div>
|
||||
<div class="now-card__statusline">
|
||||
<span class="status-dot" [class.is-active]="isReady"></span>
|
||||
<span>{{ isLoading ? 'Executing' : portalLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="now-card__channel">
|
||||
{{ status?.channelName || 'No live stream selected' }}
|
||||
</div>
|
||||
<div class="now-card__meta">
|
||||
<span>
|
||||
@if (status?.channelNumber) {
|
||||
CH {{ status?.channelNumber }}
|
||||
} @else {
|
||||
CH -
|
||||
}
|
||||
</span>
|
||||
<span>{{ status?.portal || 'unknown' }}</span>
|
||||
</div>
|
||||
<div class="now-card__program">
|
||||
{{ status?.epgTitle || 'No current EPG program' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (error) {
|
||||
<div class="remote__error">
|
||||
{{ error }}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="cluster">
|
||||
<div class="cluster__title">Channel Navigation</div>
|
||||
<div class="touchpad__glass">
|
||||
<button
|
||||
class="touchpad__button touchpad__button--up"
|
||||
(click)="changeChannelUp()"
|
||||
[disabled]="isLoading"
|
||||
[class.is-loading]="isLoading"
|
||||
aria-label="Channel Up"
|
||||
>
|
||||
<span>CH +</span>
|
||||
</button>
|
||||
<button
|
||||
class="touchpad__button touchpad__button--down"
|
||||
(click)="changeChannelDown()"
|
||||
[disabled]="isLoading"
|
||||
[class.is-loading]="isLoading"
|
||||
aria-label="Channel Down"
|
||||
>
|
||||
<span>CH -</span>
|
||||
</button>
|
||||
<div class="touchpad__center">
|
||||
<span>{{ status?.channelNumber || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cluster">
|
||||
<div class="cluster__title">Channel Number</div>
|
||||
<div class="digit-display">{{ numericInput || '----' }}</div>
|
||||
<div class="keypad">
|
||||
@for (digit of digits; track digit) {
|
||||
<button
|
||||
class="keypad__key"
|
||||
(click)="appendDigit(digit)"
|
||||
[disabled]="isLoading"
|
||||
>
|
||||
{{ digit }}
|
||||
</button>
|
||||
}
|
||||
<button
|
||||
class="keypad__key keypad__key--alt"
|
||||
(click)="backspaceDigit()"
|
||||
[disabled]="isLoading"
|
||||
>
|
||||
DEL
|
||||
</button>
|
||||
<button
|
||||
class="keypad__key keypad__key--alt"
|
||||
(click)="clearDigits()"
|
||||
[disabled]="isLoading"
|
||||
>
|
||||
CLR
|
||||
</button>
|
||||
<button
|
||||
class="keypad__key keypad__key--go"
|
||||
(click)="submitChannelNumber()"
|
||||
[disabled]="isLoading || !numericInput"
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cluster">
|
||||
<div class="cluster__title">Volume</div>
|
||||
<div class="volume-row">
|
||||
<button
|
||||
class="volume-row__button"
|
||||
(click)="volumeDown()"
|
||||
[disabled]="isLoading || !status?.supportsVolume"
|
||||
>
|
||||
VOL -
|
||||
</button>
|
||||
<button
|
||||
class="volume-row__button volume-row__button--mute"
|
||||
(click)="toggleMute()"
|
||||
[disabled]="isLoading || !status?.supportsVolume"
|
||||
>
|
||||
@if (status?.muted) {
|
||||
UNMUTE
|
||||
} @else {
|
||||
MUTE
|
||||
}
|
||||
</button>
|
||||
<button
|
||||
class="volume-row__button"
|
||||
(click)="volumeUp()"
|
||||
[disabled]="isLoading || !status?.supportsVolume"
|
||||
>
|
||||
VOL +
|
||||
</button>
|
||||
</div>
|
||||
<div class="volume-meter">
|
||||
<div
|
||||
class="volume-meter__fill"
|
||||
[style.width.%]="volumePercent ?? 0"
|
||||
></div>
|
||||
</div>
|
||||
<div class="volume-caption">
|
||||
@if (status?.supportsVolume) {
|
||||
{{ volumePercent ?? 0 }}%
|
||||
} @else {
|
||||
Volume control unavailable for this player mode
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="remote__footer">
|
||||
@if (isStatusLoading) {
|
||||
Syncing status...
|
||||
} @else if (status?.updatedAt) {
|
||||
Updated {{ status?.updatedAt | date: 'HH:mm:ss' }}
|
||||
} @else {
|
||||
Waiting for status...
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,335 @@
|
||||
:host {
|
||||
--bg-0: #0a1016;
|
||||
--bg-1: #111c26;
|
||||
--bg-2: #1c2d3b;
|
||||
--line: rgba(177, 220, 255, 0.2);
|
||||
--ink: #e5f5ff;
|
||||
--ink-dim: rgba(229, 245, 255, 0.72);
|
||||
--accent: #2ec4ff;
|
||||
--accent-soft: rgba(46, 196, 255, 0.2);
|
||||
--danger: #ff596d;
|
||||
display: block;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.remote {
|
||||
min-height: 100vh;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background:
|
||||
radial-gradient(circle at 12% 8%, rgba(255, 200, 92, 0.18), transparent 35%),
|
||||
radial-gradient(circle at 85% 0%, rgba(46, 196, 255, 0.28), transparent 45%),
|
||||
linear-gradient(145deg, var(--bg-0), var(--bg-1) 58%, var(--bg-2));
|
||||
color: var(--ink);
|
||||
font-family: 'Avenir Next', 'Trebuchet MS', 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.remote__body {
|
||||
width: min(100%, 520px);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
animation: reveal 0.6s ease-out;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--danger);
|
||||
box-shadow: 0 0 10px rgba(255, 89, 109, 0.7);
|
||||
}
|
||||
|
||||
.status-dot.is-active {
|
||||
background: #44e38c;
|
||||
box-shadow: 0 0 12px rgba(68, 227, 140, 0.7);
|
||||
}
|
||||
|
||||
.now-card {
|
||||
padding: 12px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--line);
|
||||
background: linear-gradient(
|
||||
155deg,
|
||||
rgba(17, 39, 56, 0.92),
|
||||
rgba(15, 29, 42, 0.86)
|
||||
);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.now-card__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.now-card__statusline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 12px;
|
||||
color: var(--ink-dim);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.now-card__label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.13em;
|
||||
color: var(--ink-dim);
|
||||
}
|
||||
|
||||
.now-card__channel {
|
||||
margin-top: 5px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.now-card__meta {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: var(--ink-dim);
|
||||
}
|
||||
|
||||
.now-card__program {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: #b6d5ea;
|
||||
}
|
||||
|
||||
.cluster {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
padding: 10px;
|
||||
background: rgba(9, 21, 31, 0.72);
|
||||
}
|
||||
|
||||
.cluster__title {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.11em;
|
||||
color: var(--ink-dim);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.touchpad__glass {
|
||||
width: min(100%, 320px);
|
||||
aspect-ratio: 1;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(97, 166, 214, 0.38);
|
||||
background:
|
||||
radial-gradient(circle at 50% 32%, rgba(46, 196, 255, 0.24), transparent 56%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.01));
|
||||
}
|
||||
|
||||
.touchpad__button {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
cursor: pointer;
|
||||
transition: 180ms ease;
|
||||
}
|
||||
|
||||
.touchpad__button:active:not(:disabled) {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.touchpad__button:disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.touchpad__button--up {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.touchpad__button--down {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.touchpad__center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(167, 218, 255, 0.35);
|
||||
background: rgba(9, 23, 34, 0.9);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.digit-display {
|
||||
margin-bottom: 8px;
|
||||
border-radius: 12px;
|
||||
border: 1px dashed rgba(167, 218, 255, 0.5);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.16em;
|
||||
color: #d5eeff;
|
||||
}
|
||||
|
||||
.keypad {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.keypad__key {
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(167, 218, 255, 0.34);
|
||||
background: rgba(15, 38, 55, 0.84);
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.keypad__key:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
background: rgba(29, 67, 94, 0.94);
|
||||
}
|
||||
|
||||
.keypad__key:disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.keypad__key--alt {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.keypad__key--go {
|
||||
background: linear-gradient(140deg, #16a8df, #2ec4ff);
|
||||
color: #042130;
|
||||
}
|
||||
|
||||
.volume-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.volume-row__button {
|
||||
min-height: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(167, 218, 255, 0.34);
|
||||
background: rgba(15, 38, 55, 0.84);
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.volume-row__button--mute {
|
||||
border-color: rgba(255, 129, 143, 0.45);
|
||||
}
|
||||
|
||||
.volume-row__button:disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.volume-meter {
|
||||
margin-top: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.volume-meter__fill {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #1fa8de, #42e8ff);
|
||||
transition: width 180ms ease;
|
||||
}
|
||||
|
||||
.volume-caption {
|
||||
margin-top: 6px;
|
||||
color: var(--ink-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.remote__error {
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 117, 132, 0.5);
|
||||
background: rgba(78, 12, 24, 0.65);
|
||||
color: #ffd9de;
|
||||
font-size: 13px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.remote__footer {
|
||||
text-align: center;
|
||||
color: rgba(213, 238, 255, 0.72);
|
||||
font-size: 12px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.remote {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.remote__body {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.now-card {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.cluster {
|
||||
border-radius: 14px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.touchpad__glass {
|
||||
width: min(100%, 360px);
|
||||
}
|
||||
|
||||
.keypad__key {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.volume-row__button {
|
||||
min-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
|
||||
import {
|
||||
RemoteControlService,
|
||||
RemoteControlStatus,
|
||||
} from './remote-control.service';
|
||||
|
||||
@Component({
|
||||
selector: 'lib-remote-control',
|
||||
imports: [CommonModule],
|
||||
templateUrl: './remote-control.component.html',
|
||||
styleUrls: ['./remote-control.component.scss'],
|
||||
})
|
||||
export class RemoteControlComponent implements OnInit, OnDestroy {
|
||||
private remoteControlService = inject(RemoteControlService);
|
||||
private statusRefreshTimer?: number;
|
||||
|
||||
isLoading = false;
|
||||
isStatusLoading = false;
|
||||
error: string | null = null;
|
||||
status: RemoteControlStatus | null = null;
|
||||
numericInput = '';
|
||||
readonly digits = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
|
||||
|
||||
ngOnInit(): void {
|
||||
void this.refreshStatus();
|
||||
this.statusRefreshTimer = window.setInterval(() => {
|
||||
void this.refreshStatus(true);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.statusRefreshTimer) {
|
||||
clearInterval(this.statusRefreshTimer);
|
||||
this.statusRefreshTimer = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
async changeChannelUp(): Promise<void> {
|
||||
await this.executeAction(
|
||||
() => this.remoteControlService.channelUp(),
|
||||
'Failed to change channel up'
|
||||
);
|
||||
}
|
||||
|
||||
async changeChannelDown(): Promise<void> {
|
||||
await this.executeAction(
|
||||
() => this.remoteControlService.channelDown(),
|
||||
'Failed to change channel down'
|
||||
);
|
||||
}
|
||||
|
||||
appendDigit(digit: string): void {
|
||||
if (this.numericInput.length >= 4) {
|
||||
return;
|
||||
}
|
||||
this.numericInput += digit;
|
||||
}
|
||||
|
||||
backspaceDigit(): void {
|
||||
this.numericInput = this.numericInput.slice(0, -1);
|
||||
}
|
||||
|
||||
clearDigits(): void {
|
||||
this.numericInput = '';
|
||||
}
|
||||
|
||||
async submitChannelNumber(): Promise<void> {
|
||||
const channelNumber = Number(this.numericInput);
|
||||
if (!Number.isFinite(channelNumber) || channelNumber < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
await this.executeAction(
|
||||
() =>
|
||||
this.remoteControlService.selectChannelByNumber(channelNumber),
|
||||
'Failed to switch by channel number'
|
||||
);
|
||||
this.clearDigits();
|
||||
}
|
||||
|
||||
async volumeUp(): Promise<void> {
|
||||
await this.executeAction(
|
||||
() => this.remoteControlService.volumeUp(),
|
||||
'Failed to increase volume'
|
||||
);
|
||||
}
|
||||
|
||||
async volumeDown(): Promise<void> {
|
||||
await this.executeAction(
|
||||
() => this.remoteControlService.volumeDown(),
|
||||
'Failed to decrease volume'
|
||||
);
|
||||
}
|
||||
|
||||
async toggleMute(): Promise<void> {
|
||||
await this.executeAction(
|
||||
() => this.remoteControlService.toggleMute(),
|
||||
'Failed to toggle mute'
|
||||
);
|
||||
}
|
||||
|
||||
get portalLabel(): string {
|
||||
const portal = this.status?.portal ?? 'unknown';
|
||||
if (portal === 'm3u') return 'M3U Live';
|
||||
if (portal === 'xtream') return 'Xtream Live';
|
||||
if (portal === 'stalker') return 'Stalker ITV';
|
||||
return 'Waiting For Playback';
|
||||
}
|
||||
|
||||
get isReady(): boolean {
|
||||
return !!this.status?.isLiveView && !this.isLoading;
|
||||
}
|
||||
|
||||
get volumePercent(): number | null {
|
||||
if (!this.status?.supportsVolume || this.status.volume == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return Math.round((this.status.volume || 0) * 100);
|
||||
}
|
||||
|
||||
private async refreshStatus(silent = false): Promise<void> {
|
||||
if (!silent) {
|
||||
this.isStatusLoading = true;
|
||||
}
|
||||
try {
|
||||
this.status = await this.remoteControlService.getStatus();
|
||||
} catch (err) {
|
||||
if (!silent) {
|
||||
this.error = 'Failed to fetch remote status';
|
||||
console.error(err);
|
||||
}
|
||||
} finally {
|
||||
if (!silent) {
|
||||
this.isStatusLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async executeAction(
|
||||
action: () => Promise<void>,
|
||||
errorMessage: string
|
||||
): Promise<void> {
|
||||
this.isLoading = true;
|
||||
this.error = null;
|
||||
try {
|
||||
await action();
|
||||
await this.refreshStatus(true);
|
||||
} catch (err) {
|
||||
this.error = errorMessage;
|
||||
console.error(err);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
|
||||
export interface RemoteControlStatus {
|
||||
portal: 'm3u' | 'xtream' | 'stalker' | 'unknown';
|
||||
isLiveView: boolean;
|
||||
channelName?: string;
|
||||
channelNumber?: number;
|
||||
epgTitle?: string;
|
||||
epgStart?: string;
|
||||
epgEnd?: string;
|
||||
supportsVolume?: boolean;
|
||||
volume?: number;
|
||||
muted?: boolean;
|
||||
updatedAt?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Service for remote control operations.
|
||||
* This service communicates with the Electron backend via HTTP API.
|
||||
*/
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class RemoteControlService {
|
||||
private readonly apiBaseUrl = '/api/remote-control';
|
||||
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
/**
|
||||
* Changes to the next channel
|
||||
*/
|
||||
async channelUp(): Promise<void> {
|
||||
await firstValueFrom(
|
||||
this.http.post<void>(`${this.apiBaseUrl}/channel/up`, {})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Changes to the previous channel
|
||||
*/
|
||||
async channelDown(): Promise<void> {
|
||||
await firstValueFrom(
|
||||
this.http.post<void>(`${this.apiBaseUrl}/channel/down`, {})
|
||||
);
|
||||
}
|
||||
|
||||
async selectChannelByNumber(number: number): Promise<void> {
|
||||
await firstValueFrom(
|
||||
this.http.post<void>(`${this.apiBaseUrl}/channel/select-number`, {
|
||||
number,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
async volumeUp(): Promise<void> {
|
||||
await firstValueFrom(
|
||||
this.http.post<void>(`${this.apiBaseUrl}/volume/up`, {})
|
||||
);
|
||||
}
|
||||
|
||||
async volumeDown(): Promise<void> {
|
||||
await firstValueFrom(
|
||||
this.http.post<void>(`${this.apiBaseUrl}/volume/down`, {})
|
||||
);
|
||||
}
|
||||
|
||||
async toggleMute(): Promise<void> {
|
||||
await firstValueFrom(
|
||||
this.http.post<void>(`${this.apiBaseUrl}/volume/toggle-mute`, {})
|
||||
);
|
||||
}
|
||||
|
||||
async getStatus(): Promise<RemoteControlStatus> {
|
||||
return await firstValueFrom(
|
||||
this.http.get<RemoteControlStatus>(`${this.apiBaseUrl}/status`)
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
|
||||
|
||||
setupZoneTestEnv({
|
||||
errorOnUnknownElements: true,
|
||||
errorOnUnknownProperties: true,
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"target": "es2022",
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "preserve"
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"typeCheckHostBindings": true,
|
||||
"strictTemplates": true
|
||||
},
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../dist/out-tsc",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"inlineSources": true,
|
||||
"types": []
|
||||
},
|
||||
"exclude": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/test-setup.ts",
|
||||
"jest.config.ts",
|
||||
"src/**/*.test.ts"
|
||||
],
|
||||
"include": ["src/**/*.ts"]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../dist/out-tsc",
|
||||
"module": "commonjs",
|
||||
"target": "es2016",
|
||||
"types": ["jest", "node"],
|
||||
"moduleResolution": "node10"
|
||||
},
|
||||
"files": ["src/test-setup.ts"],
|
||||
"include": [
|
||||
"jest.config.ts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user