Conversation
Add dashjs, flv.js, and mpegts.js to dependencies to support additional streaming formats (DASH, FLV and MPEG-TS) for broader playback compatibility. Replace videojs-hls-quality-selector with videojs-quality-selector-hls to use the updated/renamed HLS quality selector package. Remove unused @types entry for the old HLS selector to keep devDependencies accurate. These dependency updates prepare the project for multi-format playback and reduce type-package drift.
Add codec error detection and reporting to the Video.js player component and propagate codec error events to parent components. Introduce a codecError event emitter with a CodecError interface and logic to avoid duplicated or noisy error reporting. Improve player initialization to handle raw MPEG-TS streams via mpegts.js: detect mpegts URLs, prevent autoplay for those streams, and initialize a dedicated mpegts player instance. Wire codec error output up in template so host components can handle codec failures. Also: - Replace hardcoded HLS MIME type with runtime getMimeType() in templates. - Swap to videojs-quality-selector-hls plugin and add safe init of plugins. - Add safeguards for player destruction and more robust error handling (track fatal errors, prevent races). - Persist volume changes and listen to video element errors to surface codec problems. These changes enable better handling of unsupported audio/video codecs, support raw .ts streams, and allow UI-level responses to codec failures.
Increase maximumError for initial budgets from 5mb to 6mb in the web project configuration to accommodate a larger initial bundle size after recent feature additions and avoid CI/build failures due to strict size limits. Add PLAYER translations to English i18n: - UNSUPPORTED_CODEC: message informing users about unsupported codec and suggesting VLC or MPV. - SWITCH_TO_VLC: label for action to switch to VLC. These changes prevent spurious bundle-size errors and improve user feedback when encountering unsupported media codecs.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 07eace7
☁️ Nx Cloud last updated this comment at |
Greptile SummaryAdds comprehensive streaming format support (DASH, FLV, MPEG-TS) with intelligent codec error detection and user-friendly fallback suggestions. The implementation properly handles player lifecycle, prevents error loops, and differentiates between live vs VOD streams for optimal buffering.
Confidence Score: 4/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant VideoPlayer
participant VjsPlayer
participant MpegtsLib as mpegts.js
participant VideoElement as HTMLVideoElement
participant SnackBar
User->>VideoPlayer: Select channel with .ts stream
VideoPlayer->>VjsPlayer: Load channel with getMimeType()
VjsPlayer->>VjsPlayer: isMpegTsStream() detects .ts
VjsPlayer->>VjsPlayer: isLikelyLiveStream() checks URL patterns
VjsPlayer->>MpegtsLib: createPlayer({type: 'mpegts', isLive: true/false})
MpegtsLib->>VideoElement: attachMediaElement()
MpegtsLib->>MpegtsLib: load() and parse stream
alt Stream has unsupported codec (EC-3, AC-3, HEVC)
MpegtsLib->>VjsPlayer: Events.ERROR with codec details
VjsPlayer->>VjsPlayer: handleMpegtsError() detects codec error
VjsPlayer->>VjsPlayer: extractCodecFromError()
VjsPlayer->>VjsPlayer: Set fatalErrorOccurred flag
VjsPlayer->>VideoPlayer: Emit codecError event
VjsPlayer->>VjsPlayer: destroyMpegTs() to prevent error loop
VideoPlayer->>VideoPlayer: handleCodecError()
VideoPlayer->>SnackBar: Show "Unsupported codec" with "Switch to VLC" action
User->>SnackBar: Click "Switch to VLC"
SnackBar->>VideoPlayer: Action triggered
VideoPlayer->>VideoPlayer: settingsStore.updateSettings({player: VLC})
else Stream plays successfully
MpegtsLib->>VideoElement: Decode and render stream
VideoElement->>User: Video playback
end
User->>VideoPlayer: Switch to different channel
VideoPlayer->>VjsPlayer: ngOnChanges with new channel
VjsPlayer->>VjsPlayer: Reset codecErrorShown flag
VjsPlayer->>VjsPlayer: destroyMpegTs()
VjsPlayer->>MpegtsLib: destroy() existing player
Note over VjsPlayer,MpegtsLib: Cycle repeats for new channel
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| this.isDestroying = true; | ||
| try { | ||
| // Remove all event listeners first | ||
| this.mpegtsPlayer.off(mpegts.Events.ERROR, this.handleMpegtsError); |
There was a problem hiding this comment.
logic: Event listener not properly removed before destroying. The handleMpegtsError method is bound as an arrow function (line 273), so the reference passed to off() won't match the reference passed to on() (line 211), meaning the listener won't be removed.
| this.mpegtsPlayer.off(mpegts.Events.ERROR, this.handleMpegtsError); | |
| // Event handlers are cleaned up automatically by destroy() |
Prompt To Fix With AI
This is a comment left during a code review.
Path: libs/ui/components/src/lib/vjs-player/vjs-player.component.ts
Line: 380:380
Comment:
**logic:** Event listener not properly removed before destroying. The `handleMpegtsError` method is bound as an arrow function (line 273), so the reference passed to `off()` won't match the reference passed to `on()` (line 211), meaning the listener won't be removed.
```suggestion
// Event handlers are cleaned up automatically by destroy()
```
How can I resolve this? If you propose a fix, please make it concise.| const mpegtsPlayer = mpegts.createPlayer({ | ||
| type: 'mpegts', | ||
| isLive: true, | ||
| url: url, | ||
| }); |
There was a problem hiding this comment.
style: Always assumes MPEG-TS streams are live (isLive: true), but the URL might be a VOD file. Consider detecting VOD patterns like the vjs-player does (lines 140-159 in vjs-player.component.ts), which checks for /movie/, /series/, /vod/, /films/ paths.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
This is a comment left during a code review.
Path: libs/ui/components/src/lib/art-player/art-player.component.ts
Line: 122:126
Comment:
**style:** Always assumes MPEG-TS streams are live (`isLive: true`), but the URL might be a VOD file. Consider detecting VOD patterns like the vjs-player does (lines 140-159 in vjs-player.component.ts), which checks for `/movie/`, `/series/`, `/vod/`, `/films/` paths.
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise.| this.mpegtsPlayer = mpegts.createPlayer({ | ||
| type: 'mpegts', | ||
| isLive: true, | ||
| url: url, | ||
| }); |
There was a problem hiding this comment.
style: Missing codec error detection for mpegts.js. The vjs-player and art-player components emit codecError events when mpegts.js encounters unsupported codecs, but this component doesn't. This creates inconsistent UX - users won't get the helpful VLC/MPV suggestion when using the HTML5 player.
Prompt To Fix With AI
This is a comment left during a code review.
Path: libs/ui/components/src/lib/html-video-player/html-video-player.component.ts
Line: 102:106
Comment:
**style:** Missing codec error detection for mpegts.js. The vjs-player and art-player components emit `codecError` events when mpegts.js encounters unsupported codecs, but this component doesn't. This creates inconsistent UX - users won't get the helpful VLC/MPV suggestion when using the HTML5 player.
How can I resolve this? If you propose a fix, please make it concise.| this.mpegtsPlayer = mpegts.createPlayer({ | ||
| type: 'mpegts', | ||
| isLive: true, | ||
| url: url, | ||
| }); |
There was a problem hiding this comment.
style: Always assumes MPEG-TS streams are live (isLive: true). Same issue as in art-player - should detect VOD patterns to optimize buffering and seeking behavior for video-on-demand content.
Prompt To Fix With AI
This is a comment left during a code review.
Path: libs/ui/components/src/lib/html-video-player/html-video-player.component.ts
Line: 102:106
Comment:
**style:** Always assumes MPEG-TS streams are live (`isLive: true`). Same issue as in art-player - should detect VOD patterns to optimize buffering and seeking behavior for video-on-demand content.
How can I resolve this? If you propose a fix, please make it concise.
|
IPTVnaptor [v0.17.1] ArtPlayer not working to play stream DRM with ClearKey |
2 participants
Summary