Merge pull request #22 from THEOplayer/bugfix/skip-buttons-downloaded…

…-mp4

Bugfix/skip buttons downloaded mp4

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Fixed an issue where the skip buttons would remain disabled for MP4 sources.
+
 ## [0.5.0] - 24-03-06
 
 ### Added

src/ui/components/button/SkipButton.tsx

@@ -48,17 +48,24 @@ export class SkipButton extends PureComponent<SkipButtonProps, SkipButtonState>
 
   componentDidMount() {
     const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.PROGRESS, this.onTimeupdate);
+    player.addEventListener(PlayerEventType.PROGRESS, this.onProgress);
+    player.addEventListener(PlayerEventType.PLAYING, this.onPlaying);
     this.setState({ enabled: player.seekable.length > 0 });
   }
 
   componentWillUnmount() {
     const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.PROGRESS, this.onTimeupdate);
+    player.removeEventListener(PlayerEventType.PROGRESS, this.onProgress);
+    player.removeEventListener(PlayerEventType.PLAYING, this.onPlaying);
   }
 
-  private readonly onTimeupdate = (event: ProgressEvent) => {
-    this.setState({ enabled: event.seekable.length > 0 });
+  private readonly onProgress = (event: ProgressEvent) => {
+    this.setState({ enabled: event.seekable.length > 0 || event.buffered.length > 0 });
+  };
+
+  private readonly onPlaying = () => {
+    const player = (this.context as UiContext).player;
+    this.setState({ enabled: player.seekable.length > 0 || player.buffered.length > 0 });
   };
 
   private readonly onPress = () => {