diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 000000000..ee75d9f10 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,11 @@ +{ + "permissions": { + "allow": [ + "Bash(tree:*)", + "WebSearch", + "WebFetch(domain:www.electronjs.org)" + ], + "deny": [], + "ask": [] + } +} diff --git a/.github/workflows/build-and-make.yaml b/.github/workflows/build-and-make.yaml index 6c61ead2c..acda077b8 100644 --- a/.github/workflows/build-and-make.yaml +++ b/.github/workflows/build-and-make.yaml @@ -110,11 +110,20 @@ jobs: uses: softprops/action-gh-release@v2 with: draft: true - prerelease: false + prerelease: ${{ github.event_name == 'pull_request' }} name: Release v${{ steps.package-version.outputs.version }} - tag_name: ${{ github.ref_name }} + tag_name: ${{ startsWith(github.ref, 'refs/tags/') && github.ref_name || format('test-{0}', github.sha) }} generate_release_notes: true files: | - artifacts/**/* + artifacts/macos-artifacts/*.dmg + artifacts/macos-artifacts/*.zip + artifacts/linux-artifacts/*.AppImage + artifacts/linux-artifacts/*.deb + artifacts/linux-artifacts/*.rpm + artifacts/linux-artifacts/*.snap + artifacts/linux-artifacts/*.tar.gz + artifacts/windows-artifacts/*-setup.exe + artifacts/windows-artifacts/*.msi + artifacts/windows-artifacts/*.zip env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.husky/.gitignore b/.husky/.gitignore deleted file mode 100644 index c9cdc63b0..000000000 --- a/.husky/.gitignore +++ /dev/null @@ -1 +0,0 @@ -_ \ No newline at end of file diff --git a/.husky/commit-msg b/.husky/commit-msg deleted file mode 100755 index e6d18d9a8..000000000 --- a/.husky/commit-msg +++ /dev/null @@ -1,8 +0,0 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -[ -n "$CI" ] && exit 0 - -npx --no-install commitlint --edit -npm test -npx eslint src/**/*.ts \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 000000000..c42097d00 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,290 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +IPTVnator is a cross-platform IPTV player application built with Angular and Electron, supporting M3U/M3U8 playlists, Xtream Codes API, and Stalker portals. + +**Dual Environment Support**: The application is designed to work in both Electron and as a Progressive Web App (PWA). The architecture uses a factory pattern to inject environment-specific services at runtime, ensuring the same codebase works in both contexts. + +## Development Commands + +### Building and Serving + +```bash +# Serve the Angular web app only (development mode, baseHref="/") +npm run serve:frontend +# or +nx serve web + +# Serve with PWA configuration (optimized, baseHref="/") +npm run serve:frontend:pwa +# or +nx serve web --configuration=pwa + +# Serve the Electron app (starts both frontend and backend) +npm run serve:backend +# or +nx serve electron-backend + +# Build frontend for Electron (baseHref="./") +npm run build:frontend +# or +nx build web + +# Build frontend for PWA deployment (baseHref="/") +npm run build:frontend:pwa +# or +nx build web --configuration=pwa + +# Build backend (Electron) +npm run build:backend +# or +nx build electron-backend + +# Package the app (creates distributable without installers) +npm run package:app +# or +nx run electron-backend:package + +# Create installers/executables +npm run make:app +# or +nx run electron-backend:make +``` + +### Testing + +```bash +# Run frontend tests +npm run test:frontend +# or +nx test web + +# Run backend tests +npm run test:backend +# or +nx test electron-backend + +# Run e2e tests (Playwright) +nx e2e web-e2e + +# Run tests with coverage +nx test web --configuration=ci +``` + +### Linting + +```bash +# Lint frontend +nx lint web + +# Lint backend +nx lint electron-backend +``` + +## Architecture + +### Monorepo Structure (Nx Workspace) + +This is an Nx monorepo with the following structure: + +- **apps/web** - Angular application (frontend) +- **apps/electron-backend** - Electron main process +- **apps/web-e2e** - Playwright end-to-end tests +- **libs/** - Shared libraries: + - **m3u-state** - NgRx state management for playlists + - **services** - Abstract DataService and implementations + - **shared/interfaces** - TypeScript interfaces and types + - **shared/m3u-utils** - M3U playlist utilities + - **ui/components** - Reusable UI components + - **ui/pipes** - Angular pipes + - **ui/shared-portals** - Portal-related UI components + +### Frontend Architecture (Angular) + +**State Management**: Uses NgRx for playlist state management: +- Store configuration in `apps/web/src/app/app.config.ts` +- Playlist state, actions, effects, and reducers in `libs/m3u-state/` +- Entity adapter pattern for managing playlists collection +- Router store integration for route-based state + +**Routing**: Lazy-loaded routes in `apps/web/src/app/app.routes.ts` +- Home/playlists overview: `/` +- Video player: `/playlists/:id` or `/iptv` +- Xtream Codes: `/xtreams/:id` (different routes for Electron vs web) +- Stalker portal: `/portals/:id` +- Settings: `/settings` + +**Service Architecture** (Factory Pattern): +- Abstract `DataService` class in `libs/services/src/lib/data.service.ts` defines the contract +- Two environment-specific implementations: + - `ElectronService` (`apps/web/src/app/services/electron.service.ts`) - Uses IPC to communicate with Electron backend + - `PwaService` (`apps/web/src/app/services/pwa.service.ts`) - Uses HTTP API and IndexedDB for standalone web version +- Factory function `DataFactory()` in `apps/web/src/app/app.config.ts` determines which implementation to inject: + ```typescript + if (window.electron) { + return new ElectronService(); + } + return new PwaService(); + ``` + +**Data Storage (Environment-Specific)**: +- **Electron**: libSQL/SQLite database via Drizzle ORM + - Location: `~/.iptvnator/databases/iptvnator.db` + - Full-featured relational database with foreign keys and indexes + - Supports local file or remote Turso instance via env vars +- **PWA (Web)**: IndexedDB via `ngx-indexed-db` + - Browser-based NoSQL storage + - Same schema structure but implemented in IndexedDB + - Limited by browser storage quotas + +### Backend Architecture (Electron) + +**Main Entry**: `apps/electron-backend/src/main.ts` +- Bootstraps Electron app and initializes database +- Registers event handlers for IPC communication + +**Database**: +- **ORM**: Drizzle ORM with libSQL (local SQLite file or remote Turso) +- **Location**: `~/.iptvnator/databases/iptvnator.db` (avoids spaces in path) +- **Schema** (`apps/electron-backend/src/app/database/schema.ts`): + - `playlists` - Playlist metadata (M3U, Xtream, Stalker) + - `categories` - Content categories (live, movies, series) + - `content` - Streams/VOD/series items + - `favorites` - User favorites + - `recentlyViewed` - Watch history +- **Connection**: `apps/electron-backend/src/app/database/connection.ts` + - Auto-creates tables on init + - Supports local file or remote via env vars (`LIBSQL_URL`, `LIBSQL_AUTH_TOKEN`) + +**IPC Communication**: +- **Preload script**: `apps/electron-backend/src/app/api/main.preload.ts` + - Exposes `window.electron` API via `contextBridge` + - All IPC channels defined here (playlist operations, EPG, database CRUD, external players, etc.) +- **Event handlers**: `apps/electron-backend/src/app/events/` + - `database.events.ts` - Database CRUD operations + - `playlist.events.ts` - Playlist import/update + - `epg.events.ts` - EPG fetch and parsing (uses worker) + - `xtream.events.ts` - Xtream Codes API + - `stalker.events.ts` - Stalker portal API + - `player.events.ts` - External player (MPV, VLC) integration + - `settings.events.ts` - App settings + - `electron.events.ts` - App version, etc. + +**Workers**: +- EPG parsing runs in worker thread: `apps/electron-backend/src/app/workers/epg-parser.worker.ts` + +### Key Features + +**Playlist Support**: +- M3U/M3U8 files (local or URL) +- Xtream Codes API (`username`, `password`, `serverUrl`) +- Stalker portal (`macAddress`, `url`) + +**Video Players**: +- Built-in HTML5 player with HLS.js or Video.js +- External players: MPV, VLC (via IPC to Electron backend) + +**EPG (Electronic Program Guide)**: +- XMLTV format support +- Background parsing in worker thread +- Stored in database for quick lookup + +**Favorites and Recently Viewed**: +- Per-playlist favorites and global favorites +- Recently viewed tracks watch history + +**Internationalization**: +- Uses `@ngx-translate` with 16 language files in `apps/web/src/assets/i18n/` + +## Development Notes + +### Environment Detection and Dual-Mode Architecture + +The app determines whether it's running in Electron or as a PWA by checking: +```typescript +window.electron // truthy in Electron, undefined in browser +``` + +**Why Dual Mode?** +IPTVnator supports both Electron (desktop app) and PWA (web browser) to provide flexibility: +- **Electron**: Full-featured desktop experience with local database, external player support (MPV/VLC), and native file system access +- **PWA**: Lightweight web version that runs in any browser without installation + +**Environment-Specific Behavior**: +- `app.config.ts` - `DataFactory()` selects DataService implementation based on environment +- `app.routes.ts` - Different routes for Xtream portals (Electron uses Tauri-based routes, PWA uses standard routes) +- Storage layer switches automatically: + - Electron → libSQL/Drizzle ORM → `~/.iptvnator/databases/iptvnator.db` + - PWA → IndexedDB → Browser storage +- External player support (MPV/VLC) only available in Electron +- File system operations only available in Electron (uploading playlists from disk) + +**Base Href Configuration**: +The app uses different base href values depending on the build target: +- **Development & PWA**: `baseHref="/"` (from `index.html`) + - Used by: `npm run serve:frontend`, `npm run build:frontend:pwa` + - For web servers with proper routing +- **Electron Production**: `baseHref="./"` (overridden in build config) + - Used by: `npm run build:backend`, `npm run make:app` + - Required for `file://` protocol in Electron + +Build configurations in `apps/web/project.json`: +- `production`: Electron build with `baseHref="./"` +- `pwa`: Web deployment with `baseHref="/"` +- `development`: Dev mode with `baseHref="/"` from index.html + +**Factory Pattern Implementation**: +The factory pattern ensures a single codebase works in both environments without conditional checks scattered throughout the application. All environment-specific logic is encapsulated in the service implementations. + +### Testing Strategy + +- **Unit tests**: Jest with `jest-preset-angular` and `ng-mocks` +- **E2E tests**: Playwright testing the web app +- Backend tests use standard Jest + +### Nx Commands + +Use `nx` CLI for better performance: +```bash +nx run : +# Example: nx run web:build +# Example: nx run electron-backend:serve +``` + +To run multiple projects: +```bash +nx run-many --target=test --all +``` + +### Electron Build Process + +The Electron backend depends on the web app being built first: +- `electron-backend:build` depends on `web:build` +- Output goes to `dist/apps/electron-backend` (backend) and `dist/apps/web` (frontend) +- Packaging combines both into distributable + +### Database Migrations + +No formal migration system yet. Schema changes are applied via raw SQL in `connection.ts` `createTables()` function using `CREATE TABLE IF NOT EXISTS`. + +### Common Patterns + +**IPC Communication**: +1. Define handler in appropriate events file (e.g., `database.events.ts`) +2. Register with `ipcMain.handle()` in the event bootstrap function +3. Expose in preload script via `contextBridge.exposeInMainWorld()` +4. Call from Angular via `window.electron.()` + +**Adding New Playlist Source**: +1. Add type to `libs/shared/interfaces/src/lib/playlist.interface.ts` +2. Create event handler in `apps/electron-backend/src/app/events/` +3. Add UI in `apps/web/src/app/home/` +4. Update database schema if needed + +**State Management**: +- Use NgRx for global application state (playlists) +- Use component stores (`@ngrx/component-store`) for feature-specific state +- Use NgRx signals for reactive data streams diff --git a/README.md b/README.md index 3baad53ad..f8c6c395e 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ **IPTVnator** is a video player application that provides support for IPTV playlist playback (m3u, m3u8). The application allows users to import playlists using remote URLs or by uploading files from the local file system. Additionally, it supports EPG information in XMLTV format which can be provided via URL. -The application is a cross-platform, open-source project built with ~~Electron~~ Tauri and Angular. +The application is a cross-platform, open-source project built with Electron and Angular. ⚠️ Note: IPTVnator does not provide any playlists or other digital content. The channels and pictures in the screenshots are for demonstration purposes only. @@ -113,7 +113,6 @@ sudo emerge iptvnator-bin Requirements: - Node.js with npm -- Rust (required for tauri) 1. Clone this repository and install project dependencies: @@ -123,15 +122,15 @@ Requirements: 2. Start the application: ``` - $ npm run tauri dev + $ npm run serve:backend ``` -This will open the Tauri version in a separate window, while the PWA version will be available at http://localhost:4200. +This will open the Electron app in a separate window, while the Angular dev server will run at http://localhost:4200. -To run only the Angular app without Tauri, use: +To run only the Angular app without Electron, use: ``` -$ npm run serve +$ npm run serve:frontend ``` ## Disclaimer diff --git a/apps/electron-backend/src/app/api/main.preload.ts b/apps/electron-backend/src/app/api/main.preload.ts index e17de49d7..0b01876ab 100644 --- a/apps/electron-backend/src/app/api/main.preload.ts +++ b/apps/electron-backend/src/app/api/main.preload.ts @@ -8,15 +8,16 @@ contextBridge.exposeInMainWorld('electron', { updatePlaylistFromFilePath: (filePath: string, title: string) => ipcRenderer.invoke('update-playlist-from-file-path', filePath, title), openPlaylistFromFile: () => ipcRenderer.invoke('open-playlist-from-file'), - saveFileDialog: (defaultPath: string, filters?: { name: string; extensions: string[] }[]) => - ipcRenderer.invoke('save-file-dialog', defaultPath, filters), + saveFileDialog: ( + defaultPath: string, + filters?: { name: string; extensions: string[] }[] + ) => ipcRenderer.invoke('save-file-dialog', defaultPath, filters), writeFile: (filePath: string, content: string) => ipcRenderer.invoke('write-file', filePath, content), setUserAgent: (userAgent: string, referer?: string) => ipcRenderer.invoke('set-user-agent', userAgent, referer), openInMpv: ( url: string, - path: string, title: string, userAgent: string, referer?: string, @@ -25,7 +26,6 @@ contextBridge.exposeInMainWorld('electron', { ipcRenderer.invoke( 'OPEN_MPV_PLAYER', url, - path, title, userAgent, referer, @@ -33,7 +33,6 @@ contextBridge.exposeInMainWorld('electron', { ), openInVlc: ( url: string, - path: string, title: string, userAgent: string, referer?: string, @@ -42,7 +41,6 @@ contextBridge.exposeInMainWorld('electron', { ipcRenderer.invoke( 'OPEN_VLC_PLAYER', url, - path, title, userAgent, referer, diff --git a/apps/electron-backend/src/app/app.ts b/apps/electron-backend/src/app/app.ts index 1e9bdd976..6bd03b797 100644 --- a/apps/electron-backend/src/app/app.ts +++ b/apps/electron-backend/src/app/app.ts @@ -78,6 +78,8 @@ export default class App { preload: join(__dirname, 'main.preload.js'), }, ...savedWindowBounds, + minHeight: 600, + minWidth: 900, }); App.mainWindow.setMenu(null); if (!savedWindowBounds) { diff --git a/apps/electron-backend/src/app/events/player.events.ts b/apps/electron-backend/src/app/events/player.events.ts index 22be20597..05b97e016 100644 --- a/apps/electron-backend/src/app/events/player.events.ts +++ b/apps/electron-backend/src/app/events/player.events.ts @@ -53,87 +53,142 @@ function sendMpvCommand(command: string, args: string[]): Promise { }); } -ipcMain.handle('OPEN_MPV_PLAYER', async (event, url) => { - try { - const mpvPath = getMpvPath(); - const reuseInstance = store.get(MPV_REUSE_INSTANCE, false); +ipcMain.handle( + 'OPEN_MPV_PLAYER', + async ( + event, + url: string, + title: string, + userAgent?: string, + referer?: string, + origin?: string + ) => { + try { + const mpvPath = getMpvPath(); + const reuseInstance = store.get(MPV_REUSE_INSTANCE, false); - console.log('Opening MPV player with path:', mpvPath); - console.log('Reuse instance:', reuseInstance); - console.log('URL:', url); + console.log('Opening MPV player with path:', mpvPath); + console.log('Reuse instance:', reuseInstance); + console.log('URL:', url); + console.log('User-Agent:', userAgent); + console.log('Referer:', referer); + console.log('Origin:', origin); - // If reuse is enabled and there's an existing process, try to use it - if ( - reuseInstance && - mpvProcess && - !mpvProcess.killed && - mpvSocketPath - ) { - console.log('Reusing existing MPV instance'); - try { - await sendMpvCommand('loadfile', [url, 'replace']); - console.log( - 'Successfully loaded new URL in existing MPV instance' - ); - return; - } catch (err) { - console.error('Failed to send command to existing MPV:', err); - // If it fails, clear the reference and create a new one - mpvProcess = null; - mpvSocketPath = null; + // If reuse is enabled and there's an existing process, try to use it + if ( + reuseInstance && + mpvProcess && + !mpvProcess.killed && + mpvSocketPath + ) { + console.log('Reusing existing MPV instance'); + try { + await sendMpvCommand('loadfile', [url, 'replace']); + console.log( + 'Successfully loaded new URL in existing MPV instance' + ); + return; + } catch (err) { + console.error( + 'Failed to send command to existing MPV:', + err + ); + // If it fails, clear the reference and create a new one + mpvProcess = null; + mpvSocketPath = null; + // Fall through to create new instance + } } - } - // Create new MPV process - console.log('Creating new MPV instance'); + // Create new MPV process + console.log('Creating new MPV instance'); - // Generate unique socket path - const socketPath = - process.platform === 'win32' - ? `\\\\.\\pipe\\mpv-${Date.now()}` - : `/tmp/mpvsocket-${Date.now()}`; + // Generate unique socket path + const socketPath = + process.platform === 'win32' + ? `\\\\.\\pipe\\mpv-${Date.now()}` + : `/tmp/mpvsocket-${Date.now()}`; - const args = [`--input-ipc-server=${socketPath}`, '--idle=yes', url]; + const args = [`--input-ipc-server=${socketPath}`, '--idle=yes']; - const proc = spawn(mpvPath, args, { - shell: false, - detached: !reuseInstance, - stdio: 'ignore', - }); + // Add user agent if provided + if (userAgent) { + args.push(`--user-agent=${userAgent}`); + } - proc.on('error', (err) => { - console.error('Failed to start MPV player:', err); + // Add referer if provided + if (referer) { + args.push(`--referrer=${referer}`); + } + + // Add origin as custom HTTP header if provided + // MPV doesn't have a direct --origin flag, so we use --http-header-fields + if (origin) { + args.push(`--http-header-fields=Origin: ${origin}`); + } + + // Add title if provided + if (title) { + args.push(`--force-media-title=${title}`); + } + + // Add URL last + args.push(url); + + // Wrap spawn in a promise to catch startup errors + await new Promise((resolve, reject) => { + const proc = spawn(mpvPath, args, { + shell: false, + detached: !reuseInstance, + stdio: 'ignore', + }); + + proc.on('error', (err) => { + console.error('Failed to start MPV player:', err); + mpvProcess = null; + mpvSocketPath = null; + reject( + new Error( + `Failed to start MPV player: ${err.message}. Make sure MPV is installed and the path '${mpvPath}' is correct.` + ) + ); + }); + + proc.on('exit', (code) => { + console.log(`MPV exited with code ${code}`); + mpvProcess = null; + mpvSocketPath = null; + }); + + // Store the process reference if reuse is enabled + if (reuseInstance) { + mpvProcess = proc; + mpvSocketPath = socketPath; + console.log( + 'Stored MPV process for reuse with socket:', + socketPath + ); + } else { + // Detach the process so it can continue running independently + proc.unref(); + } + + // Resolve immediately if spawn succeeds (error event would fire if it fails) + // Give a small window to catch immediate spawn errors + setTimeout(() => { + if (!proc.killed) { + resolve(); + } + }, 100); + }); + } catch (error) { + console.error('Error opening MPV player:', error); mpvProcess = null; mpvSocketPath = null; - /* event.sender.send(ERROR, { - message: `Error: Failed to start MPV player. Make sure that mpv player is installed on your system and the path is correct.`, - }); */ - }); - - proc.on('exit', (code) => { - console.log(`MPV exited with code ${code}`); - mpvProcess = null; - mpvSocketPath = null; - }); - - // Store the process reference if reuse is enabled - if (reuseInstance) { - mpvProcess = proc; - mpvSocketPath = socketPath; - console.log( - 'Stored MPV process for reuse with socket:', - socketPath - ); - } else { - // Detach the process so it can continue running independently - proc.unref(); + throw error; } - } catch (error) { - console.log(error); - mpvProcess = null; - mpvSocketPath = null; } -}); +); ipcMain.handle('SET_MPV_PLAYER_PATH', (_event, mpvPlayerPath) => { console.log('... setting mpv player path', mpvPlayerPath); @@ -153,28 +208,85 @@ ipcMain.handle('SET_MPV_REUSE_INSTANCE', (_event, reuseInstance: boolean) => { } }); -ipcMain.handle('OPEN_VLC_PLAYER', (event, url) => { - const vlcPath = getVlcPath(); - console.log('Opening VLC player with path:', vlcPath); - console.log('URL:', url); +ipcMain.handle( + 'OPEN_VLC_PLAYER', + async ( + event, + url: string, + title: string, + userAgent?: string, + referer?: string, + origin?: string + ) => { + try { + const vlcPath = getVlcPath(); + console.log('Opening VLC player with path:', vlcPath); + console.log('URL:', url); + console.log('User-Agent:', userAgent); + console.log('Referer:', referer); + console.log('Origin:', origin); - const proc = spawn(vlcPath, [url as string], { - shell: false, - detached: true, - stdio: 'ignore', - }); + const args: string[] = []; - proc.on('error', (err) => { - console.error('Failed to start VLC player:', err); - }); + // Add user agent if provided (VLC uses :http-user-agent= format) + if (userAgent) { + args.push(`:http-user-agent=${userAgent}`); + } - proc.on('exit', (code) => { - console.log(`VLC exited with code ${code}`); - }); + // Add referer if provided (VLC uses :http-referrer= format) + if (referer) { + args.push(`:http-referrer=${referer}`); + } - // Detach the process so it can continue running independently - proc.unref(); -}); + // Note: VLC doesn't have a direct origin option, but origin is typically + // included in referer for most IPTV use cases + + // Add title if provided + if (title) { + args.push(`--meta-title=${title}`); + } + + // Add URL last + args.push(url); + + // Wrap spawn in a promise to catch startup errors + await new Promise((resolve, reject) => { + const proc = spawn(vlcPath, args, { + shell: false, + detached: true, + stdio: 'ignore', + }); + + proc.on('error', (err) => { + console.error('Failed to start VLC player:', err); + reject( + new Error( + `Failed to start VLC player: ${err.message}. Make sure VLC is installed and the path '${vlcPath}' is correct.` + ) + ); + }); + + proc.on('exit', (code) => { + console.log(`VLC exited with code ${code}`); + }); + + // Detach the process so it can continue running independently + proc.unref(); + + // Resolve immediately if spawn succeeds (error event would fire if it fails) + // Give a small window to catch immediate spawn errors + setTimeout(() => { + if (!proc.killed) { + resolve(); + } + }, 100); + }); + } catch (error) { + console.error('Error opening VLC player:', error); + throw error; + } + } +); ipcMain.handle('SET_VLC_PLAYER_PATH', (_event, vlcPlayerPath) => { console.log('... setting vlc player path', vlcPlayerPath); diff --git a/apps/electron-backend/src/app/events/xtream.events.ts b/apps/electron-backend/src/app/events/xtream.events.ts index feac61751..f53e366f4 100644 --- a/apps/electron-backend/src/app/events/xtream.events.ts +++ b/apps/electron-backend/src/app/events/xtream.events.ts @@ -5,7 +5,6 @@ import axios, { AxiosRequestConfig } from 'axios'; import { ipcMain } from 'electron'; -import { XTREAM_REQUEST } from 'shared-interfaces'; export default class XtreamEvents { static bootstrapXtreamEvents(): Electron.IpcMain { @@ -17,7 +16,7 @@ export default class XtreamEvents { * Handle Xtream Codes API requests */ ipcMain.handle( - XTREAM_REQUEST, + 'XTREAM_REQUEST', async ( event, payload: { @@ -77,7 +76,11 @@ ipcMain.handle( status: error.response?.status || 500, }; throw errorResponse; - } else if (error && typeof error === 'object' && 'message' in error) { + } else if ( + error && + typeof error === 'object' && + 'message' in error + ) { throw error; } else { throw { diff --git a/apps/web/project.json b/apps/web/project.json index 4bb746386..a971bd13f 100644 --- a/apps/web/project.json +++ b/apps/web/project.json @@ -45,6 +45,25 @@ ], "outputHashing": "all" }, + "pwa": { + "baseHref": "/", + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kb", + "maximumError": "8kb" + } + ], + "outputHashing": "all", + "optimization": true, + "extractLicenses": true, + "sourceMap": false + }, "development": { "optimization": false, "extractLicenses": false, @@ -60,6 +79,9 @@ "production": { "buildTarget": "web:build:production" }, + "pwa": { + "buildTarget": "web:build:pwa" + }, "development": { "buildTarget": "web:build:development" } diff --git a/apps/web/src/app/app.component.ts b/apps/web/src/app/app.component.ts index 7925c5f17..07472a9c3 100644 --- a/apps/web/src/app/app.component.ts +++ b/apps/web/src/app/app.component.ts @@ -1,6 +1,5 @@ -import { Component, inject, OnDestroy, OnInit } from '@angular/core'; +import { Component, inject, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; -import { MatSnackBar } from '@angular/material/snack-bar'; import { Router, RouterOutlet } from '@angular/router'; import { Store } from '@ngrx/store'; import { TranslateService } from '@ngx-translate/core'; @@ -8,15 +7,11 @@ import { TranslateService } from '@ngx-translate/core'; import * as PlaylistActions from 'm3u-state'; import { DataService, EpgService } from 'services'; import { - ERROR, - IpcCommand, Language, OPEN_FILE, Settings, STORE_KEY, Theme, - VIEW_ADD_PLAYLIST, - VIEW_SETTINGS, } from 'shared-interfaces'; import { SettingsService } from './services/settings.service'; import { RecentlyViewedComponent } from './xtream-tauri/recently-viewed/recently-viewed.component'; @@ -27,30 +22,24 @@ import { SearchResultsComponent } from './xtream-tauri/search-results/search-res templateUrl: './app.component.html', imports: [RouterOutlet], }) -export class AppComponent implements OnInit, OnDestroy { +export class AppComponent implements OnInit { private dataService = inject(DataService); private dialog = inject(MatDialog); private epgService = inject(EpgService); private router = inject(Router); private store = inject(Store); - private snackBar = inject(MatSnackBar); private translate = inject(TranslateService); private settingsService = inject(SettingsService); /** List of ipc commands with function mapping */ - private readonly commandsList = [ + /* private readonly commandsList = [ new IpcCommand(VIEW_ADD_PLAYLIST, () => this.navigateToRoute('/')), new IpcCommand(VIEW_SETTINGS, () => this.navigateToRoute('/settings')), - new IpcCommand(ERROR, (response: { message: string; status: number }) => - this.showErrorAsNotification(response) - ), - ]; + ]; */ /** Default language as fallback */ private readonly DEFAULT_LANG = Language.ENGLISH; - private listeners = []; - constructor() { if ( ((this.dataService.isElectron && @@ -90,24 +79,7 @@ export class AppComponent implements OnInit, OnDestroy { this.store.dispatch(PlaylistActions.loadPlaylists()); this.translate.setDefaultLang(this.DEFAULT_LANG); - this.setRendererListeners(); this.initSettings(); - /* this.handleWhatsNewDialog(); */ - } - - /** - * Initializes all necessary listeners for the events from the renderer process - */ - setRendererListeners(): void { - this.commandsList.forEach((command) => { - const cb = (response) => { - if (response.data.type === command.id) { - command.callback(response.data); - } - }; - this.dataService.listenOn(command.id, cb); - this.listeners.push(cb); - }); } /** @@ -134,6 +106,8 @@ export class AppComponent implements OnInit, OnDestroy { this.epgService.fetchEpg(settings.epgUrl); } + // TODO: trigger auto-refresh mechanism for playlists + if (settings.theme) { this.settingsService.changeTheme(settings.theme); } else { @@ -160,21 +134,6 @@ export class AppComponent implements OnInit, OnDestroy { } } - /** - * Checks the actual version of the application and shows the "what is new" dialog if the updated version was detected - */ - /* handleWhatsNewDialog(): void { - const actualVersion = this.dataService.getAppVersion(); - this.settingsService - .getValueFromLocalStorage(STORE_KEY.Version) - .subscribe(() => { - this.settingsService.setValueToLocalStorage( - STORE_KEY.Version, - actualVersion - ); - }); - } */ - /** * Navigate to the specified route * @param route route to navigate to @@ -183,16 +142,6 @@ export class AppComponent implements OnInit, OnDestroy { this.router.navigateByUrl(route); } - showErrorAsNotification(response: { message: string; status: number }) { - this.snackBar.open( - `Error: ${response?.message ?? 'Something went wrong'} (Status: ${ - response?.status ?? 0 - })`, - null, - { duration: 4000 } - ); - } - openGlobalSearch(): void { this.dialog.open(SearchResultsComponent, { width: '100%', @@ -214,19 +163,4 @@ export class AppComponent implements OnInit, OnDestroy { disableClose: false, }); } - - /** - * Removes all ipc command listeners on component destroy - */ - ngOnDestroy(): void { - if (this.dataService.isElectron) { - this.commandsList.forEach((command) => - this.dataService.removeAllListeners(command.id) - ); - } else { - this.listeners.forEach((listener) => - window.removeEventListener('message', listener) - ); - } - } } diff --git a/apps/web/src/app/home/home.component.html b/apps/web/src/app/home/home.component.html index 8d2c48dbe..a7574a9b1 100644 --- a/apps/web/src/app/home/home.component.html +++ b/apps/web/src/app/home/home.component.html @@ -1,10 +1,5 @@ -
- - - @if (isLoading) { - - } -
+/> + diff --git a/apps/web/src/app/home/home.component.scss b/apps/web/src/app/home/home.component.scss index 39151a654..72585c820 100644 --- a/apps/web/src/app/home/home.component.scss +++ b/apps/web/src/app/home/home.component.scss @@ -1,24 +1,4 @@ -::ng-deep { - .mat-tab-label-content { - text-transform: uppercase; - } - - .mat-tab-group.mat-background-primary .mat-tab-header-pagination { - display: none; - } -} - -.playlists-container { - grid-area: playlists; -} - .recent-playlists { height: calc(100vh - 100px); overflow: auto; } - -@media only screen and (max-width: 480px) { - .tab-title { - display: none; - } -} diff --git a/apps/web/src/app/home/home.component.ts b/apps/web/src/app/home/home.component.ts index c751531f7..c46fe0596 100644 --- a/apps/web/src/app/home/home.component.ts +++ b/apps/web/src/app/home/home.component.ts @@ -1,103 +1,12 @@ -import { Component, inject, OnDestroy } from '@angular/core'; -import { MatProgressBarModule } from '@angular/material/progress-bar'; -import { MatSnackBar } from '@angular/material/snack-bar'; -import { Store } from '@ngrx/store'; +import { Component } from '@angular/core'; import { TranslatePipe } from '@ngx-translate/core'; import { RecentPlaylistsComponent } from 'components'; -import { addPlaylist } from 'm3u-state'; -import { DataService } from 'services'; -import { ERROR, Playlist, PLAYLIST_PARSE_RESPONSE } from 'shared-interfaces'; import { HeaderComponent } from '../shared/components/header/header.component'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'], - imports: [ - HeaderComponent, - MatProgressBarModule, - RecentPlaylistsComponent, - TranslatePipe, - ], + imports: [HeaderComponent, RecentPlaylistsComponent, TranslatePipe], }) -export class HomeComponent implements OnDestroy { - private dataService = inject(DataService); - private snackBar = inject(MatSnackBar); - private readonly store = inject(Store); - - /** Loading spinner state */ - isLoading = false; - - /** IPC Renderer commands list with callbacks */ - commandsList = [ - { - id: PLAYLIST_PARSE_RESPONSE, - execute: (response: { payload: Playlist }): void => { - this.store.dispatch( - addPlaylist({ - playlist: response.payload, - }) - ); - }, - }, - { - id: ERROR, - execute: (error: { message: string; status: string }) => { - this.showNotification('Error: ' + error.message); - }, - }, - ]; - - listeners = []; - - constructor() { - this.setRendererListeners(); - } - - /** - * Set electrons main process listeners - */ - setRendererListeners(): void { - this.commandsList.forEach((command) => { - /* if (this.dataService.isElectron) { - this.dataService.listenOn(command.id, (event, response) => - this.ngZone.run(() => command.execute(response)) - ); - } else { */ - const cb = (response) => { - if (response.data.type === command.id) { - command.execute(response.data); - } - }; - this.dataService.listenOn(command.id, cb); - this.listeners.push(cb); - /* } */ - }); - } - - /** - * Shows snack bar notification with a given message - * @param message message to show - * @param duration visibility duration of the snackbar - */ - showNotification(message: string, duration = 2000): void { - this.snackBar.open(message, null, { - duration, - }); - } - - /** - * Remove ipcRenderer listeners after component destroy - */ - ngOnDestroy(): void { - if (this.dataService.isElectron) { - this.commandsList.forEach((command) => - this.dataService.removeAllListeners(command.id) - ); - } else { - this.listeners.forEach((listener) => { - window.removeEventListener('message', listener); - }); - } - } -} +export class HomeComponent {} diff --git a/apps/web/src/app/home/video-player/video-player.component.html b/apps/web/src/app/home/video-player/video-player.component.html index bead9ef46..a6880df8b 100644 --- a/apps/web/src/app/home/video-player/video-player.component.html +++ b/apps/web/src/app/home/video-player/video-player.component.html @@ -96,7 +96,7 @@ } } diff --git a/apps/web/src/app/home/video-player/video-player.component.ts b/apps/web/src/app/home/video-player/video-player.component.ts index 8b9e635f5..c5f2a956b 100644 --- a/apps/web/src/app/home/video-player/video-player.component.ts +++ b/apps/web/src/app/home/video-player/video-player.component.ts @@ -1,17 +1,9 @@ import { Overlay, OverlayRef } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; import { AsyncPipe, CommonModule } from '@angular/common'; -import { - Component, - Injector, - NgZone, - OnInit, - effect, - inject, -} from '@angular/core'; +import { Component, Injector, OnInit, effect, inject } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { MatSidenavModule } from '@angular/material/sidenav'; -import { MatSnackBar } from '@angular/material/snack-bar'; import { ActivatedRoute, Router, RouterLink } from '@angular/router'; import { Store } from '@ngrx/store'; import { StorageMap } from '@ngx-pwa/local-storage'; @@ -37,10 +29,7 @@ import { DataService, PlaylistsService } from 'services'; import { COMPONENT_OVERLAY_REF, Channel, - ERROR, PLAYLIST_PARSE_BY_URL, - PLAYLIST_PARSE_RESPONSE, - Playlist, STORE_KEY, Settings, SidebarView, @@ -51,37 +40,35 @@ import { SettingsComponent } from '../../settings/settings.component'; @Component({ imports: [ + ArtPlayerComponent, AsyncPipe, AudioPlayerComponent, - InfoOverlayComponent, CommonModule, EpgListComponent, HtmlVideoPlayerComponent, + InfoOverlayComponent, MatSidenavModule, RouterLink, SidebarComponent, ToolbarComponent, VjsPlayerComponent, - ArtPlayerComponent, ], templateUrl: './video-player.component.html', styleUrl: './video-player.component.scss', }) export class VideoPlayerComponent implements OnInit { - private activatedRoute = inject(ActivatedRoute); - private dataService = inject(DataService); + private readonly activatedRoute = inject(ActivatedRoute); + private readonly dataService = inject(DataService); private readonly dialog = inject(MatDialog); - private ngZone = inject(NgZone); - private overlay = inject(Overlay); - private playlistsService = inject(PlaylistsService); - private router = inject(Router); - private settingsStore = inject(SettingsStore); - private snackBar = inject(MatSnackBar); - private storage = inject(StorageMap); - private store = inject(Store); + private readonly overlay = inject(Overlay); + private readonly playlistsService = inject(PlaylistsService); + private readonly router = inject(Router); + private readonly settingsStore = inject(SettingsStore); + private readonly storage = inject(StorageMap); + private readonly store = inject(Store); /** Active selected channel */ - activeChannel$ = this.store + readonly activeChannel$ = this.store .select(selectActive) .pipe(filter((channel) => Boolean((channel as Channel)?.url))); @@ -89,7 +76,7 @@ export class VideoPlayerComponent implements OnInit { channels$!: Observable; /** Current epg program */ - epgProgram$ = this.store.select(selectCurrentEpgProgram); + readonly epgProgram$ = this.store.select(selectCurrentEpgProgram); /** Selected video player options */ playerSettings: Partial = { @@ -97,37 +84,6 @@ export class VideoPlayerComponent implements OnInit { showCaptions: false, }; - /** IPC Renderer commands list with callbacks */ - commandsList = [ - { - id: ERROR, - execute: (response: { message: string }): void => { - this.snackBar.open(response.message, '', { - duration: 3100, - }); - }, - }, - { - id: PLAYLIST_PARSE_RESPONSE, - execute: (response: { payload: Playlist }): void => { - if (response.payload.isTemporary) { - this.store.dispatch( - PlaylistActions.setChannels({ - channels: response.payload.playlist.items, - }) - ); - } else { - this.store.dispatch( - PlaylistActions.addPlaylist({ - playlist: response.payload, - }) - ); - } - this.sidebarView = 'CHANNELS'; - }, - }, - ]; - readonly isDesktop = !!window['electron']; sidebarView: SidebarView = 'CHANNELS'; @@ -158,7 +114,6 @@ export class VideoPlayerComponent implements OnInit { */ ngOnInit(): void { this.applySettings(); - this.setRendererListeners(); this.getPlaylistUrlAsParam(); this.channels$ = this.activatedRoute.params.pipe( @@ -214,23 +169,6 @@ export class VideoPlayerComponent implements OnInit { } } - setRendererListeners(): void { - this.commandsList.forEach((command) => { - if (this.isDesktop) { - this.dataService.listenOn(command.id, (event, response) => - this.ngZone.run(() => command.execute(response)) - ); - } else { - const cb = (response: any) => { - if (response.data.type === command.id) { - command.execute(response.data); - } - }; - this.dataService.listenOn(command.id, cb); - } - }); - } - /** * Reads the app configuration from the browsers storage and applies the settings in the current component */ diff --git a/apps/web/src/app/services/electron.service.ts b/apps/web/src/app/services/electron.service.ts index 64f475e56..5b6cc0135 100644 --- a/apps/web/src/app/services/electron.service.ts +++ b/apps/web/src/app/services/electron.service.ts @@ -1,16 +1,16 @@ import { inject, Injectable } from '@angular/core'; import { MatSnackBar } from '@angular/material/snack-bar'; import { Params } from '@angular/router'; +import { Store } from '@ngrx/store'; +import { TranslateService } from '@ngx-translate/core'; +import * as PlaylistActions from 'm3u-state'; import { DataService } from 'services'; import { AUTO_UPDATE_PLAYLISTS, - AUTO_UPDATE_PLAYLISTS_RESPONSE, ERROR, Playlist, PLAYLIST_PARSE_BY_URL, - PLAYLIST_PARSE_RESPONSE, PLAYLIST_UPDATE, - PLAYLIST_UPDATE_RESPONSE, XTREAM_RESPONSE, } from 'shared-interfaces'; import { AppConfig } from '../../environments/environment'; @@ -20,7 +20,9 @@ import { AppConfig } from '../../environments/environment'; }) export class ElectronService extends DataService { private eventListeners: { [key: string]: () => void } = {}; - private snackBar = inject(MatSnackBar); + private readonly snackBar = inject(MatSnackBar); + private readonly store = inject(Store); + private readonly translateService = inject(TranslateService); constructor() { super(); @@ -60,15 +62,15 @@ export class ElectronService extends DataService { try { return await window.electron.openInMpv( data.url, - data.mpvPlayerPath || '', data.title ?? '', data['user-agent'] ?? undefined, data.referer ?? undefined, data.origin ?? undefined ); /* thumbnail: data.thumbnail ?? '', */ - } catch (error) { - this.snackBar.open(`Error launching MPV: ${error}`, 'Close', { + } catch (error: any) { + const errorMessage = error?.message || String(error); + this.snackBar.open(`Error launching MPV: ${errorMessage}`, 'Close', { duration: 5000, }); console.error('MPV launch error:', error); @@ -79,13 +81,14 @@ export class ElectronService extends DataService { try { return await window.electron.openInVlc( data.url, - data.vlcPlayerPath || '', + data.title ?? '', data['user-agent'] ?? undefined, data.referer ?? undefined, data.origin ?? undefined ); - } catch (error) { - this.snackBar.open(`Error launching VLC: ${error}`, 'Close', { + } catch (error: any) { + const errorMessage = error?.message || String(error); + this.snackBar.open(`Error launching VLC: ${errorMessage}`, 'Close', { duration: 5000, }); console.error('VLC launch error:', error); @@ -94,27 +97,18 @@ export class ElectronService extends DataService { } else if (type === AUTO_UPDATE_PLAYLISTS) { const data = payload as Playlist[]; const playlists = await window.electron.autoUpdatePlaylists(data); - /* for await (const item of data) { - if (item.filePath) { - const playlist = await readTextFile(item.filePath); - const parsedPlaylist = parse(playlist); - const playlistObject = createPlaylistObject( - item.title, - parsedPlaylist, - item.filePath, - 'FILE' - ); - playlists.push({ ...playlistObject, _id: item._id }); - } - } - */ - window.postMessage({ - type: AUTO_UPDATE_PLAYLISTS_RESPONSE, - payload: { - message: 'Success! The playlists were successfully updated', + this.store.dispatch( + PlaylistActions.updateManyPlaylists({ playlists, - }, - }); + }) + ); + this.snackBar.open( + this.translateService.instant( + 'HOME.PLAYLISTS.AUTO_REFRESH_UPDATE_SUCCESS' + ), + null, + { duration: 2000 } + ); } else { console.log('Unknown type', type); } @@ -129,25 +123,27 @@ export class ElectronService extends DataService { // Use Electron IPC to make the Stalker request const response = await window.electron.stalkerRequest(payload); return response; - } catch (err: any) { + } catch (err) { console.error('Stalker request error:', err); - window.postMessage({ - type: ERROR, - message: err.message ?? 'Error: not found', - status: err.status ?? 404, - }); + this.snackBar.open( + `Error: ${err.message ?? ' Not found'}, status: ${err.status ?? 404}`, + 'Close', + { + duration: 5000, + } + ); throw err; } } private async fetchM3uPlaylistFromUrl(payload: Partial) { - console.log(payload); window.electron.fetchPlaylistByUrl(payload.url).then((result) => { - // TODO: call store and decide and store where to store based on the isTemporary flag etc - window.postMessage({ - type: PLAYLIST_PARSE_RESPONSE, - payload: { ...result, isTemporary: payload.isTemporary }, - }); + this.store.dispatch( + PlaylistActions.handleAddingPlaylistByUrl({ + isTemporary: !!payload?.isTemporary, + playlist: result, + }) + ); }); } @@ -178,16 +174,23 @@ export class ElectronService extends DataService { } methodToCall.then((playlistObject) => { - window.postMessage({ - type: PLAYLIST_UPDATE_RESPONSE, - payload: { - message: 'Success! The playlist was successfully updated', + this.store.dispatch( + PlaylistActions.updatePlaylist({ playlist: { ...playlistObject, _id: data.id, }, - }, - }); + playlistId: data.id, + }) + ); + + this.snackBar.open( + this.translateService.instant( + 'HOME.PLAYLISTS.PLAYLIST_UPDATE_SUCCESS' + ), + null, + { duration: 2000 } + ); }); } @@ -223,14 +226,21 @@ export class ElectronService extends DataService { window.postMessage(result); return result; } catch (error: any) { - console.error('Xtream request error:', error); - const result = { + console.error('Xtream request error:', error.message); + this.snackBar.open( + `Error: ${error.message ?? 'Failed to connect to Xtream server'}, status: ${ + error.status ?? 500 + }`, + 'Close', + { + duration: 5000, + } + ); + return { type: ERROR, status: error.status ?? 500, message: error.message ?? 'Failed to connect to Xtream server', }; - window.postMessage(result); - return result; } } diff --git a/apps/web/src/app/services/player.service.ts b/apps/web/src/app/services/player.service.ts index 1affa269c..fa5a38bad 100644 --- a/apps/web/src/app/services/player.service.ts +++ b/apps/web/src/app/services/player.service.ts @@ -26,7 +26,10 @@ export class PlayerService { title: string, thumbnail?: string, hideExternalInfoDialog = true, - isLiveContent = false + isLiveContent = false, + userAgent?: string, + referer?: string, + origin?: string ) { const player = this.settingsStore.player() ?? VideoPlayer.VideoJs; @@ -36,9 +39,11 @@ export class PlayerService { } this.dataService.sendIpcEvent(OPEN_MPV_PLAYER, { url: streamUrl, - mpvPlayerPath: this.settingsStore.mpvPlayerPath(), title, thumbnail, + 'user-agent': userAgent, + referer: referer, + origin: origin, }); } else if (player === VideoPlayer.VLC) { if (!hideExternalInfoDialog) { @@ -46,9 +51,11 @@ export class PlayerService { } this.dataService.sendIpcEvent(OPEN_VLC_PLAYER, { url: streamUrl, - vlcPlayerPath: this.settingsStore.vlcPlayerPath(), title, thumbnail, + 'user-agent': userAgent, + referer: referer, + origin: origin, }); } else if (!isLiveContent) { this.dialog.open( diff --git a/apps/web/src/app/services/pwa.service.ts b/apps/web/src/app/services/pwa.service.ts index 6ff2b3e86..000bfdda8 100644 --- a/apps/web/src/app/services/pwa.service.ts +++ b/apps/web/src/app/services/pwa.service.ts @@ -12,7 +12,6 @@ import { ERROR, Playlist, PLAYLIST_PARSE_BY_URL, - PLAYLIST_PARSE_RESPONSE, PLAYLIST_UPDATE, STALKER_REQUEST, XTREAM_REQUEST, @@ -88,9 +87,15 @@ export class PwaService extends DataService { this.getPlaylistFromUrl(payload.url) .pipe( catchError((error) => { - window.postMessage({ - type: ERROR, - }); + this.snackBar.open( + `Error: ${error.message ?? 'Unknown error'}, status: ${ + error.status ?? 500 + }`, + 'Close', + { + duration: 5000, + } + ); return throwError(() => error); }) ) @@ -120,19 +125,23 @@ export class PwaService extends DataService { this.getPlaylistFromUrl(payload.url) .pipe( catchError((error) => { - window.postMessage({ - type: ERROR, - message: this.getErrorMessageByStatusCode(error.status), - status: error.status, - }); + this.snackBar.open( + this.getErrorMessageByStatusCode(error.status), + 'Close', + { + duration: 5000, + } + ); return throwError(() => error); }) ) - .subscribe((response: any) => { - window.postMessage({ - type: PLAYLIST_PARSE_RESPONSE, - payload: { ...response, isTemporary: payload.isTemporary }, - }); + .subscribe((response: Playlist) => { + this.store.dispatch( + PlaylistActions.handleAddingPlaylistByUrl({ + isTemporary: !!payload?.isTemporary, + playlist: response, + }) + ); }); } @@ -196,11 +205,15 @@ export class PwaService extends DataService { return result; } catch (error: any) { if (payload.params.action === 'get_account_info') return; - window.postMessage({ - type: ERROR, - status: error.error?.status, - message: error.error?.message ?? 'Unknown error', - }); + this.snackBar.open( + `Error: ${error.message ?? ' Unknown error'}, status: ${ + error.status ?? 500 + }`, + 'Close', + { + duration: 5000, + } + ); } } @@ -232,11 +245,14 @@ export class PwaService extends DataService { return (await response.json()).payload; } catch (err) { console.error('Stalker request error:', err); - window.postMessage({ - type: ERROR, - message: err.message ?? 'Error: not found', - status: err.status ?? 404, - }); + + this.snackBar.open( + `Error: ${err.message ?? ' Not found'}, status: ${err.status ?? 404}`, + 'Close', + { + duration: 5000, + } + ); throw err; } } diff --git a/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.html b/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.html index da82ad4c9..4c899c6bd 100644 --- a/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.html +++ b/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.html @@ -3,8 +3,8 @@ class="navigation-sidebar" [navigationItems]="mainNavigationItems" (categoryClick)="setContentType($any($event))" - [selectedContentType]="stalkerStore.selectedContentType()" (pageClicked)="handlePageClick()" + [selectedContentType]="stalkerStore.selectedContentType()" /> diff --git a/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.scss b/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.scss index 39846aa78..9b2839123 100644 --- a/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.scss +++ b/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.scss @@ -13,6 +13,6 @@ } .navigation-sidebar { - width: 200px; + width: 60px; border-right: 1px solid #333; } diff --git a/apps/web/src/app/stalker/stalker.store.ts b/apps/web/src/app/stalker/stalker.store.ts index c800821c4..1da396a13 100644 --- a/apps/web/src/app/stalker/stalker.store.ts +++ b/apps/web/src/app/stalker/stalker.store.ts @@ -479,7 +479,17 @@ export const StalkerStore = signalStore( cover: thumbnail, title, }); - playerService.openPlayer(url, title, thumbnail); + const playlist = this.currentPlaylist(); + playerService.openPlayer( + url, + title, + thumbnail, + true, + false, + playlist?.userAgent, + playlist?.referrer, + playlist?.origin + ); }, addToRecentlyViewed(item: any) { console.log('Adding to recently viewed', item); diff --git a/apps/web/src/app/xtream-tauri/category-view/category-view.component.scss b/apps/web/src/app/xtream-tauri/category-view/category-view.component.scss index 93fd187fc..2f9aa6c33 100644 --- a/apps/web/src/app/xtream-tauri/category-view/category-view.component.scss +++ b/apps/web/src/app/xtream-tauri/category-view/category-view.component.scss @@ -14,7 +14,6 @@ &.selected { background-color: rgba(63, 81, 181, 0.1); - border-left: 4px solid #3f51b5; margin-left: 4px; } } diff --git a/apps/web/src/app/xtream-tauri/navigation/navigation.component.html b/apps/web/src/app/xtream-tauri/navigation/navigation.component.html index fc16f5be9..f611d27b4 100644 --- a/apps/web/src/app/xtream-tauri/navigation/navigation.component.html +++ b/apps/web/src/app/xtream-tauri/navigation/navigation.component.html @@ -1,11 +1,16 @@
-
+
{{ getStatusIcon() }}
-
+
-
-
{{ 'PORTALS.SIDEBAR.MAIN' | translate }}
+ + + + home + + +
+ +
+ @for (item of navigationItems(); track item.id) { {{ item.icon }} - {{ item.labelKey | translate }} }
+
-
+ search - {{ - 'PORTALS.SIDEBAR.SEARCH' | translate - }} history - {{ - 'PORTALS.SIDEBAR.RECENT' | translate - }} favorite - {{ - 'PORTALS.SIDEBAR.FAVORITES' | translate - }}
+ - + @if (!isStalkerPlaylist()) { + + person + + } + + playlist_play + + + settings - {{ 'MENU.SETTINGS' | translate }}
diff --git a/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss b/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss index 2c8ec6699..232c33d85 100644 --- a/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss +++ b/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss @@ -10,7 +10,6 @@ } .navigation-bottom { - border-top: 1px solid #333; margin-top: auto; padding-bottom: 16px; } @@ -19,7 +18,6 @@ transition: all 0.2s ease; background: rgba(63, 81, 181, 0.12); color: #3f51b5; - border-left: 4px solid #3f51b5; mat-icon { color: #3f51b5; @@ -39,10 +37,14 @@ mat-icon { padding: 16px; position: relative; overflow: hidden; - background: linear-gradient(to bottom, rgba(18, 18, 18, 0.8) 0%, transparent 100%); + background: linear-gradient( + to bottom, + rgba(18, 18, 18, 0.8) 0%, + transparent 100% + ); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); - min-height: 120px; + min-height: 50px; &::before { content: ''; @@ -57,13 +59,26 @@ mat-icon { } &.status-active::before { - background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, transparent 100%); + background: linear-gradient( + 135deg, + rgba(76, 175, 80, 0.3) 0%, + transparent 100% + ); } - &.status-inactive::before, &.status-unavailable::before { - background: linear-gradient(135deg, rgba(244, 67, 54, 0.3) 0%, transparent 100%); + &.status-inactive::before, + &.status-unavailable::before { + background: linear-gradient( + 135deg, + rgba(244, 67, 54, 0.3) 0%, + transparent 100% + ); } &.status-expired::before { - background: linear-gradient(135deg, rgba(255, 152, 0, 0.3) 0%, transparent 100%); + background: linear-gradient( + 135deg, + rgba(255, 152, 0, 0.3) 0%, + transparent 100% + ); } .portal-status-wrapper { @@ -99,14 +114,21 @@ mat-icon { margin: 0; } - &.status-active { color: #4caf50; } - &.status-inactive, &.status-unavailable { color: #f44336; } - &.status-expired { color: #ff9800; } + &.status-active { + color: #4caf50; + } + &.status-inactive, + &.status-unavailable { + color: #f44336; + } + &.status-expired { + color: #ff9800; + } } .portal-info { text-align: center; - + .portal-name { font-size: 16px; font-weight: 600; @@ -129,40 +151,6 @@ mat-icon { } } - .portal-actions { - display: flex; - justify-content: center; - gap: 8px; - margin-top: 4px; - - .action-button { - width: 36px; - height: 36px; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - background: rgba(255, 255, 255, 0.1); - border-radius: 8px; - - mat-icon { - font-size: 20px; - width: 20px; - height: 20px; - margin: 0; - transition: all 0.2s ease; - } - - &:hover { - background: rgba(255, 255, 255, 0.15); - - mat-icon { - transform: scale(1.1); - } - } - } - } - .info-button { opacity: 0.7; margin-left: 8px; @@ -172,18 +160,14 @@ mat-icon { } } - .nav-section { - margin: 10px 0; - padding: 5px 0; - .nav-group-label { padding: 0 16px 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; - opacity: .7; + opacity: 0.7; } .mat-nav-list { diff --git a/apps/web/src/app/xtream-tauri/navigation/navigation.component.ts b/apps/web/src/app/xtream-tauri/navigation/navigation.component.ts index 2f74e1d12..1ee633fae 100644 --- a/apps/web/src/app/xtream-tauri/navigation/navigation.component.ts +++ b/apps/web/src/app/xtream-tauri/navigation/navigation.component.ts @@ -1,5 +1,4 @@ import { Component, computed, inject, input, output } from '@angular/core'; -import { MatIconButton } from '@angular/material/button'; import { MatDialog } from '@angular/material/dialog'; import { MatIcon } from '@angular/material/icon'; import { MatListModule } from '@angular/material/list'; @@ -19,7 +18,6 @@ import { NavigationItem } from './navigation.interface'; selector: 'app-navigation', imports: [ MatIcon, - MatIconButton, MatListModule, MatTooltip, RouterLink, diff --git a/apps/web/src/app/xtream-tauri/playlist-error-view/playlist-error-view.component.html b/apps/web/src/app/xtream-tauri/playlist-error-view/playlist-error-view.component.html index 1902cdecb..fa616be16 100644 --- a/apps/web/src/app/xtream-tauri/playlist-error-view/playlist-error-view.component.html +++ b/apps/web/src/app/xtream-tauri/playlist-error-view/playlist-error-view.component.html @@ -1,20 +1,21 @@