fix(FEC-11904): Player_Web_Mac - The spinner appears when unmute the …

…show (#645) Safari fires WAITING event once unmuting and immediately sends PLAYING so prevent sending waiting event for too short buffering Solves FEC-11904
kaltura · Mar 15, 2022 · c0ca395 · c0ca395
1 parent 5c1b284
commit c0ca395
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/src/engines/html5/html5.js b/src/engines/html5/html5.js
@@ -17,6 +17,8 @@ import getLogger from '../../utils/logger';
 import {DroppedFramesWatcher} from '../dropped-frames-watcher';
 import {ThumbnailInfo} from '../../thumbnail/thumbnail-info';
 
+const SHORT_BUFFERING_TIMEOUT: number = 200;
+
 /**
  * Html5 engine for playback.
  * @classdesc
@@ -295,13 +297,14 @@ export default class Html5 extends FakeEventTarget implements IEngine {
    */
   attach(): void {
     Object.keys(Html5EventType).forEach(html5Event => {
-      if (Html5EventType[html5Event] !== Html5EventType.ERROR) {
+      if (![Html5EventType.ERROR, Html5EventType.WAITING].includes(Html5EventType[html5Event])) {
         this._eventManager.listen(this._el, Html5EventType[html5Event], () => {
           return this.dispatchEvent(new FakeEvent(Html5EventType[html5Event]));
         });
       }
     });
     this._eventManager.listen(this._el, Html5EventType.ERROR, () => this._handleVideoError());
+    this._eventManager.listen(this._el, Html5EventType.WAITING, () => this._handleWaiting());
     this._handleMetadataTrackEvents();
     this._eventManager.listen(this._el.textTracks, 'addtrack', (event: any) => {
       if (PKTextTrack.isNativeTextTrack(event.track)) {
@@ -1145,6 +1148,17 @@ export default class Html5 extends FakeEventTarget implements IEngine {
     }
   }
 
+  _handleWaiting(): void {
+    let playing = false;
+    this._eventManager.listenOnce(this._el, Html5EventType.PLAYING, () => (playing = true));
+    setTimeout(() => {
+      // prevent sending waiting event for too short buffering
+      if (!playing) {
+        this.dispatchEvent(new FakeEvent(Html5EventType.WAITING));
+      }
+    }, SHORT_BUFFERING_TIMEOUT);
+  }
+
   /**
    * more info about the error
    * @returns {string} info about the video element error

diff --git a/test/src/engines/html5/html5.spec.js b/test/src/engines/html5/html5.spec.js
@@ -2,6 +2,7 @@ import Html5 from '../../../../src/engines/html5/html5';
 import BaseMediaSourceAdapter from '../../../../src/engines/html5/media-source/base-media-source-adapter';
 import sourcesConfig from '../../configs/sources.json';
 import {DroppedFramesWatcher} from '../../../../src/engines/dropped-frames-watcher';
+import {Html5EventType} from '../../../../src/event/event-type';
 
 describe('Html5', () => {
   let sandbox;
@@ -31,6 +32,20 @@ describe('Html5', () => {
     engine._el.should.be.a('HTMLVideoElement');
   });
 
+  it('should prevent too short buffering event', done => {
+    const progressiveSource = sourcesConfig.Mp4.progressive[0];
+    const engine = Html5.createEngine(progressiveSource);
+    engine._eventManager.listen(engine, Html5EventType.WAITING, () => {
+      done();
+    });
+    engine._el.dispatchEvent(new window.Event(Html5EventType.WAITING));
+    engine._el.dispatchEvent(new window.Event(Html5EventType.PLAYING));
+    engine._el.dispatchEvent(new window.Event(Html5EventType.WAITING));
+    setTimeout(() => {
+      engine._el.dispatchEvent(new window.Event(Html5EventType.PLAYING));
+    }, 300);
+  });
+
   it('should restore html5 engine', () => {
     const progressiveSource = sourcesConfig.Mp4.progressive[0];
     const config = {