From 7c5a2d2f93324e2bac953d6022d709e8c0b45347 Mon Sep 17 00:00:00 2001
From: Rob Walch <robwalch@users.noreply.github.com>
Date: Wed, 20 Sep 2023 08:39:21 -0700
Subject: [PATCH] Add `preferManagedMediaSource` API.md doc entry for
 ManagedMediaSource usage (#5828)

* Add `preferManagedMediaSource` API.md doc entry, and only emit BUFFER_FLUSHED with removed ranges in ManagedMediaSource "bufferedchange" event

* Add BufferedChangeEvent TypeScript interface
based on w3c proposal https://github.com/w3c/media-source/issues/320
---
 docs/API.md                         |  8 ++++++++
 src/controller/buffer-controller.ts | 23 ++++++++++++++++++-----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/docs/API.md b/docs/API.md
index a4947f78b71..afb1e4391fd 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -46,6 +46,7 @@ See [API Reference](https://hlsjs-dev.video-dev.org/api-docs/) for a complete li
   - [`maxLiveSyncPlaybackRate`](#maxlivesyncplaybackrate)
   - [`liveDurationInfinity`](#livedurationinfinity)
   - [`liveBackBufferLength` (deprecated)](#livebackbufferlength-deprecated)
+  - [`preferManagedMediaSource`](#prefermanagedmediasource)
   - [`enableWorker`](#enableworker)
   - [`workerPath`](#workerpath)
   - [`enableSoftwareAES`](#enablesoftwareaes)
@@ -375,6 +376,7 @@ var config = {
   liveSyncDurationCount: 3,
   liveMaxLatencyDurationCount: Infinity,
   liveDurationInfinity: false,
+  preferManagedMediaSource: false,
   enableWorker: true,
   enableSoftwareAES: true,
   manifestLoadingTimeOut: 10000,
@@ -672,6 +674,12 @@ If you want to have a native Live UI in environments like iOS Safari, Safari, An
 
 `liveBackBufferLength` has been deprecated. Use `backBufferLength` instead.
 
+### `preferManagedMediaSource`
+
+(default `true`)
+
+HLS.js uses the Managed Media Source API (`ManagedMediaSource` global) instead of the `MediaSource` global by default when present. Setting this to `false` will only use `ManagedMediaSource` when `MediaSource` is undefined.
+
 ### `enableWorker`
 
 (default: `true`)
diff --git a/src/controller/buffer-controller.ts b/src/controller/buffer-controller.ts
index 8f091301e93..8b436faa77a 100755
--- a/src/controller/buffer-controller.ts
+++ b/src/controller/buffer-controller.ts
@@ -38,6 +38,11 @@ import type { HlsConfig } from '../hls';
 const VIDEO_CODEC_PROFILE_REPLACE =
   /(avc[1234]|hvc1|hev1|dvh[1e]|vp09|av01)(?:\.[^.,]+)+/;
 
+interface BufferedChangeEvent extends Event {
+  readonly addedRanges?: TimeRanges;
+  readonly removedRanges?: TimeRanges;
+}
+
 export default class BufferController implements ComponentAPI {
   // The level details used to determine duration, target-duration and live
   private details: LevelDetails | null = null;
@@ -936,11 +941,19 @@ export default class BufferController implements ComponentAPI {
           this.addBufferListener(sbName, 'updateend', this._onSBUpdateEnd);
           this.addBufferListener(sbName, 'error', this._onSBUpdateError);
           // ManagedSourceBuffer bufferedchange event
-          this.addBufferListener(sbName, 'bufferedchange', (event) => {
-            this.hls.trigger(Events.BUFFER_FLUSHED, {
-              type: trackName as SourceBufferName,
-            });
-          });
+          this.addBufferListener(
+            sbName,
+            'bufferedchange',
+            (type: SourceBufferName, event: BufferedChangeEvent) => {
+              // If media was ejected check for a change. Added ranges are redundant with changes on 'updateend' event.
+              const removedRanges = event.removedRanges;
+              if (removedRanges) {
+                this.hls.trigger(Events.BUFFER_FLUSHED, {
+                  type: trackName as SourceBufferName,
+                });
+              }
+            },
+          );
 
           this.tracks[trackName] = {
             buffer: sb,