feat(video-player): integrate Artplayer and remove DPlayer

- Enableplayer global config and component options:
  - set Artplayer.AUTO_PLAYBACK_TIMEOUT to 10000 to reduce autoplay
    timeouts.
  - enable autoPlayback, playsInline, airplay, backdrop, mutex and set
    theme on Artplayer instance to improve playback behaviour and UI.
  - add autoSize, autoMini, pip, screenshot, aspectRatio and fullscreen
    settings for a consistent feature set.

- Harden channel URL check to avoid null errors:
  - use optional chaining when checking channel.url for m3u8.

- Move StreamFormat import ordering and clean unused enum entry:
  - remove DPlayer from VideoPlayer enum and related commented code.
  - remove DPlayer component imports, declarations and template branch,
    simplifying player selection and eliminating dead code.

- Tidy component decorator formatting and fix template array trailing
  commas to preserve style consistency.

These changes replace the deprecated/removed DPlayer integration with a
fully configured Artplayer, improve runtime safety, and clean up unused
code.
This commit is contained in:
4gray committed 2025-09-27 20:05:35 +02:00
1 parent e338eb16dc
commit 0c5939ae16
5 files changed
+13 -21

No files matched your search

@@ -1,4 +1,3 @@
import {
Component,
ElementRef,
@@ -12,6 +11,8 @@ import Artplayer from 'artplayer';
import Hls from 'hls.js';
import { Channel } from '../../../../../shared/channel.interface';
Artplayer.AUTO_PLAYBACK_TIMEOUT = 10000;
@Component({
selector: 'app-art-player',
imports: [],
@@ -28,7 +29,7 @@ import { Channel } from '../../../../../shared/channel.interface';
height: 100%;
}
`,
]
],
})
export class ArtPlayerComponent implements OnInit, OnDestroy, OnChanges {
@Input() channel: Channel;
@@ -62,7 +63,7 @@ export class ArtPlayerComponent implements OnInit, OnDestroy, OnChanges {
const el = this.elementRef.nativeElement.querySelector(
'.artplayer-container'
);
const isLive = this.channel.url.toLowerCase().includes('m3u8');
const isLive = this.channel?.url?.toLowerCase().includes('m3u8');
this.player = new Artplayer({
container: el,
@@ -72,6 +73,7 @@ export class ArtPlayerComponent implements OnInit, OnDestroy, OnChanges {
autoplay: true,
type: this.getVideoType(this.channel.url),
pip: true,
autoPlayback: true,
autoSize: true,
autoMini: true,
screenshot: true,
@@ -80,6 +82,11 @@ export class ArtPlayerComponent implements OnInit, OnDestroy, OnChanges {
aspectRatio: true,
fullscreen: true,
fullscreenWeb: true,
playsInline: true,
airplay: true,
backdrop: true,
mutex: true,
theme: '#ff0000',
customType: {
m3u8: function (video: HTMLVideoElement, url: string) {
if (Hls.isSupported()) {
@@ -49,14 +49,6 @@
[showCaptions]="playerSettings.showCaptions"
/>
}
<!-- Add DPlayer component -->
@if (playerSettings.player === 'dplayer') {
<app-d-player
[channel]="activeChannel"
[volume]="volume"
[showCaptions]="playerSettings.showCaptions"
/>
}
<!-- Add ArtPlayer component -->
@if (playerSettings.player === 'artplayer') {
<app-art-player
@@ -38,7 +38,6 @@ import {
} from '../../../state/selectors';
import { ArtPlayerComponent } from '../art-player/art-player.component';
import { AudioPlayerComponent } from '../audio-player/audio-player.component';
import { DPlayerComponent } from '../d-player/d-player.component';
import { EpgListComponent } from '../epg-list/epg-list.component';
import { HtmlVideoPlayerComponent } from '../html-video-player/html-video-player.component';
import { InfoOverlayComponent } from '../info-overlay/info-overlay.component';
@@ -67,7 +66,6 @@ export const COMPONENT_OVERLAY_REF = new InjectionToken(
SidebarComponent,
ToolbarComponent,
VjsPlayerComponent,
DPlayerComponent,
ArtPlayerComponent,
],
templateUrl: './video-player.component.html',
+2 -6
View File
@@ -49,9 +49,9 @@ import { HeaderComponent } from '../shared/components/header/header.component';
import * as PlaylistActions from '../state/actions';
import { selectIsEpgAvailable } from '../state/selectors';
import { SettingsService } from './../services/settings.service';
import { StreamFormat } from './stream-format.enum';
import { Language } from './language.enum';
import { VideoPlayer } from './settings.interface';
import { StreamFormat } from './stream-format.enum';
import { Theme } from './theme.enum';
@Component({
@@ -107,14 +107,10 @@ export class SettingsComponent implements OnInit {
id: VideoPlayer.VideoJs,
label: 'VideoJs Player',
},
/* {
id: VideoPlayer.DPlayer,
label: 'DPlayer',
},
{
id: VideoPlayer.ArtPlayer,
label: 'ArtPlayer',
}, */
},
...(this.isTauri ? this.osPlayers : []),
];
+1 -2
View File
@@ -1,5 +1,5 @@
import { StreamFormat } from './stream-format.enum';
import { Language } from './language.enum';
import { StreamFormat } from './stream-format.enum';
import { Theme } from './theme.enum';
/**
@@ -10,7 +10,6 @@ export enum VideoPlayer {
Html5Player = 'html5',
MPV = 'mpv',
VLC = 'vlc',
DPlayer = 'dplayer',
ArtPlayer = 'artplayer',
}