- Consolidated SCSS styles for the live stream layout, reducing redundancy and improving maintainability.
- Introduced a new portal layout mixin for better structure.
- Enhanced sidebar and content container styles for improved user experience.
- Updated TypeScript component to utilize new styles and improve readability.
- Refactored channel list and recently viewed components for consistency in design.
- Optimized playlist service and store interactions for better performance.
- Added new translations for enhanced user interface clarity.
- Improved database schema with additional indexing for EPG programs.
feat: enhance EPG list component with channel icon fallback and scrolling behavior
style: update styles for EPG list and playlist item components for improved UI
fix: add selection state to playlist items in recent playlists component
- Refactored StalkerLiveStreamLayoutComponent to improve channel selection and playback handling.
- Introduced new methods for building external playback headers and handling cross-origin streams.
- Updated EPG preview logic to use a more structured approach with EpgProgram type.
- Improved styling for channel list items, including hover effects and active states.
- Enhanced EPG view with a more responsive layout and improved item display.
- Updated video player components to ensure proper sizing and overflow handling.
- Added fallback handling for channel logos and improved action button visibility.
- ArtPlayer: use getExtensionFromUrl for query-string-aware URL parsing
instead of naive split('.').pop() and endsWith('.ts')
- VJS player: call player.reset() before initMpegTs() on non-TS to TS
channel switch to prevent playback conflicts
Xtream Codes live streams with .ts format serve continuous raw MPEG-TS
data over HTTP, not HLS playlists. All three embedded players failed to
handle this: ArtPlayer had no handler, HTML5 player fed it to HLS.js,
and Video.js tried to parse it as an HLS manifest.
Add mpegts.js to handle raw MPEG-TS streams via Media Source Extensions
in ArtPlayer, HTML5 player, and Video.js. Fix the MIME type for .ts
sources from application/x-mpegURL to video/mp2t.
Add a new "Custom order" sort option that allows users to manually
reorder playlists via drag-and-drop. When this sort mode is active,
drag handles appear in front of each playlist item.
- Add SortBy.CUSTOM enum value to SortService
- Add custom order button to filter-sort-menu
- Add isDraggable input and cdkDrag support to PlaylistItemComponent
- Enable cdkDropList in RecentPlaylistsComponent when custom sort active
- Add translation key for custom order option
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Swap videojs-hls-quality-selector for videojs-quality-selector-hls
and update package versions. Initialize plugins defensively: call the
new quality selector via qualitySelectorHls when available and wrap
both quality selector and aspectRatioPanel initializations in try/catch
blocks to avoid runtime errors if a plugin fails to load. Bump project
version to 0.18.0 and add the new dependency and packageManager entry.
Add a new standalone ContentHero component (template and TS) that
provides a cinematic hero section with backdrop, poster, title,
description, tags/meta/action slots, and a back button event emitter.
The component chooses backdrop or poster as the background, falls back
to a default poster image on load error, and exposes inputs for title,
description, posterUrl, and backdropUrl.
Introduce extensive cinematic styles for the detail view:
- define CSS custom properties for light and dark themes, poster size,
shadows, and color tokens
- implement gradient vignette, layout sizing, and theming via
:host and :host-context(.dark-theme)
- change container sizing behavior to full-height and hide overflow
These changes create a reusable hero UI and themed detail-page styles
to support a Netflix-style streaming detail experience.
* EPG data is stored with ISO 8601 format including timezone offset
(e.g., 2025-12-26T16:00:00+01:00)
* When displayed, moment(isoString)
parses it correctly and converts to the user's local timezone
automatically
* No settings needed — times always show in the user's
machine timezone
Refactor stalker-series-view template to guard fields with conditionals
so that only available metadata is displayed. Replace selectedItem() with
displayItem() to use the updated selection accessor. Add checks for
director, actors, year/release date, genre/genres_str, imdb and kinopoisk
ratings to avoid showing empty labels.
Enhance stalker-portal-import component by adding reactive form fields
for serial/device IDs and signatures, importing MatProgressSpinnerModule,
and wiring TranslateService and StalkerSessionService into the component.
Include a small loading-container style. These changes prepare the UI for
improved import UX and safer rendering of optional series metadata.
Update info-overlay template to read simplified EPG fields and
avoid indexing into arrays for title, icon and description so bindings
are resilient and clearer:
- Use epgProgram?.iconUrl instead of epgProgram?.icon?.[0]?.src
- Use epgProgram?.title instead of epgProgram?.title?.[0]?.value
- Use epgProgram?.desc instead of epgProgram?.desc?.[0]?.value
- Guard description rendering with epgProgram?.desc
Adjust multi-epg header layout and add search UI styles to support
desktop window chrome and draggable regions:
- Add left padding to #epg-navigation for macOS traffic lights, enable
backdrop drag via -webkit-app-region: drag and set z-index to keep
header above content.
- Exclude interactive elements (buttons, search inputs) from drag by
applying -webkit-app-region: no-drag to maintain native interactions.
- Add extensive styles for a channel search container (search input,
icons, clear button, filter count, animations) and scaffold a program
search container.
These changes improve robustness of EPG data rendering and add styled
search controls while ensuring proper window dragging behavior on
desktop builds.
imports and update dispatch calls
Replace multiple direct or wildcard imports for actions with
namespaced action groups from 'm3u-state' (e.g. PlaylistActions,
ChannelActions, EpgActions). Update dispatch calls to use the
namespaced action creators (for example, setAdjacentChannelAsActive,
setEpgAvailableFlag, resetActiveEpgProgram, setCurrentEpgProgram,
setActiveEpgProgram, addPlaylist).
This cleans up imports, improves tree-shaking and readability,
and standardizes how actions are referenced across components. It
also fixes inconsistent import styles (wildcard vs. named) and
prepares the codebase for clearer action organization.
4gray