From a158a48084f586e32494fe694f3a1dd429afd3b4 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Tue, 16 Apr 2024 16:00:23 +0200
Subject: [PATCH 01/12] Remove player listeners on destroy

---
 src/UIContainer.ts | 59 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/UIContainer.ts b/src/UIContainer.ts
index e5d038c..1c7302e 100644
--- a/src/UIContainer.ts
+++ b/src/UIContainer.ts
@@ -448,20 +448,7 @@ export class UIContainer extends HTMLElement {
         this._updateError();
         this._updatePausedAndEnded();
         this._updateCasting();
-        this._player.addEventListener('resize', this._updateAspectRatio);
-        this._player.addEventListener(['error', 'sourcechange', 'emptied'], this._updateError);
-        this._player.addEventListener('volumechange', this._updateMuted);
-        this._player.addEventListener('play', this._onPlay);
-        this._player.addEventListener('pause', this._onPause);
-        this._player.addEventListener(['ended', 'emptied'], this._updatePausedAndEnded);
-        this._player.addEventListener(['durationchange', 'sourcechange', 'emptied'], this._updateStreamType);
-        this._player.addEventListener('ratechange', this._updatePlaybackRate);
-        this._player.addEventListener('sourcechange', this._onSourceChange);
-        this._player.theoLive?.addEventListener('publicationloadstart', this._onSourceChange);
-        this._player.videoTracks.addEventListener(['addtrack', 'removetrack', 'change'], this._updateActiveVideoTrack);
-        this._player.cast?.addEventListener('castingchange', this._updateCasting);
-        this._player.addEventListener(['durationchange', 'sourcechange', 'emptied'], this._updatePlayingAd);
-        this._player.ads?.addEventListener(['adbreakbegin', 'adbreakend', 'adbegin', 'adend', 'adskip'], this._updatePlayingAd);
+        this._addPlayerListeners(this._player);
 
         this.dispatchEvent(createCustomEvent(READY_EVENT));
     }
@@ -491,6 +478,7 @@ export class UIContainer extends HTMLElement {
         this.removeEventListener('mouseleave', this._onMouseLeave);
 
         if (this._player) {
+            this._removePlayerListeners(this._player);
             this._player.destroy();
             this._player = undefined;
         }
@@ -1065,6 +1053,49 @@ export class UIContainer extends HTMLElement {
             }
         }
     };
+
+    private _addPlayerListeners(player: ChromelessPlayer): void {
+        player.addEventListener('destroy', this._onDestroy);
+        player.addEventListener('resize', this._updateAspectRatio);
+        player.addEventListener(['error', 'sourcechange', 'emptied'], this._updateError);
+        player.addEventListener('volumechange', this._updateMuted);
+        player.addEventListener('play', this._onPlay);
+        player.addEventListener('pause', this._onPause);
+        player.addEventListener(['ended', 'emptied'], this._updatePausedAndEnded);
+        player.addEventListener(['durationchange', 'sourcechange', 'emptied'], this._updateStreamType);
+        player.addEventListener('ratechange', this._updatePlaybackRate);
+        player.addEventListener('sourcechange', this._onSourceChange);
+        player.theoLive?.addEventListener('publicationloadstart', this._onSourceChange);
+        player.videoTracks.addEventListener(['addtrack', 'removetrack', 'change'], this._updateActiveVideoTrack);
+        player.cast?.addEventListener('castingchange', this._updateCasting);
+        player.addEventListener(['durationchange', 'sourcechange', 'emptied'], this._updatePlayingAd);
+        player.ads?.addEventListener(['adbreakbegin', 'adbreakend', 'adbegin', 'adend', 'adskip'], this._updatePlayingAd);
+    }
+
+    private _removePlayerListeners(player: ChromelessPlayer): void {
+        player.removeEventListener('destroy', this._onDestroy);
+        player.removeEventListener('resize', this._updateAspectRatio);
+        player.removeEventListener(['error', 'sourcechange', 'emptied'], this._updateError);
+        player.removeEventListener('volumechange', this._updateMuted);
+        player.removeEventListener('play', this._onPlay);
+        player.removeEventListener('pause', this._onPause);
+        player.removeEventListener(['ended', 'emptied'], this._updatePausedAndEnded);
+        player.removeEventListener(['durationchange', 'sourcechange', 'emptied'], this._updateStreamType);
+        player.removeEventListener('ratechange', this._updatePlaybackRate);
+        player.removeEventListener('sourcechange', this._onSourceChange);
+        player.theoLive?.removeEventListener('publicationloadstart', this._onSourceChange);
+        player.videoTracks.removeEventListener(['addtrack', 'removetrack', 'change'], this._updateActiveVideoTrack);
+        player.cast?.removeEventListener('castingchange', this._updateCasting);
+        player.removeEventListener(['durationchange', 'sourcechange', 'emptied'], this._updatePlayingAd);
+        player.ads?.removeEventListener(['adbreakbegin', 'adbreakend', 'adbegin', 'adend', 'adskip'], this._updatePlayingAd);
+    }
+
+    private readonly _onDestroy = (): void => {
+        if (this._player) {
+            this._removePlayerListeners(this._player);
+            this._player = undefined;
+        }
+    };
 }
 
 customElements.define('theoplayer-ui', UIContainer);

From 0f27e7990b310c9da7f449bb8254c5d33e8f472c Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Tue, 16 Apr 2024 16:06:03 +0200
Subject: [PATCH 02/12] Remove player from state receivers on destroy

---
 src/UIContainer.ts | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/UIContainer.ts b/src/UIContainer.ts
index 1c7302e..8b85f06 100644
--- a/src/UIContainer.ts
+++ b/src/UIContainer.ts
@@ -438,17 +438,12 @@ export class UIContainer extends HTMLElement {
         this._player.muted = this.muted;
         this._player.autoplay = this.autoplay;
 
-        for (const receiver of this._stateReceivers) {
-            if (receiver[StateReceiverProps].indexOf('player') >= 0) {
-                receiver.player = this._player;
-            }
-        }
-
         this._updateAspectRatio();
         this._updateError();
         this._updatePausedAndEnded();
         this._updateCasting();
         this._addPlayerListeners(this._player);
+        this.propagatePlayerToAllReceivers_();
 
         this.dispatchEvent(createCustomEvent(READY_EVENT));
     }
@@ -457,10 +452,6 @@ export class UIContainer extends HTMLElement {
         this._resizeObserver?.disconnect();
         this._mutationObserver.disconnect();
         this.shadowRoot!.removeEventListener('slotchange', this._onSlotChange);
-        for (const receiver of this._stateReceivers) {
-            this.removeStateFromReceiver_(receiver);
-        }
-        this._stateReceivers.length = 0;
 
         this._menuGroup.removeEventListener(CLOSE_MENU_EVENT, this._onCloseMenu);
         this._menuGroup.removeEventListener(MENU_CHANGE_EVENT, this._onMenuChange);
@@ -481,7 +472,10 @@ export class UIContainer extends HTMLElement {
             this._removePlayerListeners(this._player);
             this._player.destroy();
             this._player = undefined;
+            this.propagatePlayerToAllReceivers_();
         }
+
+        this._stateReceivers.length = 0;
     }
 
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void {
@@ -616,6 +610,15 @@ export class UIContainer extends HTMLElement {
         }
     }
 
+    private propagatePlayerToAllReceivers_(): void {
+        for (const receiver of this._stateReceivers) {
+            const receiverProps = receiver[StateReceiverProps];
+            if (receiverProps.indexOf('player') >= 0) {
+                receiver.player = this._player;
+            }
+        }
+    }
+
     private removeStateFromReceiver_(receiver: StateReceiverElement): void {
         const receiverProps = receiver[StateReceiverProps];
         if (receiverProps.indexOf('player') >= 0) {
@@ -1094,6 +1097,7 @@ export class UIContainer extends HTMLElement {
         if (this._player) {
             this._removePlayerListeners(this._player);
             this._player = undefined;
+            this.propagatePlayerToAllReceivers_();
         }
     };
 }

From 566df4a5624a7d46c129839c6bafa58daeb8f944 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Tue, 16 Apr 2024 16:06:49 +0200
Subject: [PATCH 03/12] Rename

---
 src/UIContainer.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/UIContainer.ts b/src/UIContainer.ts
index 8b85f06..9e533d2 100644
--- a/src/UIContainer.ts
+++ b/src/UIContainer.ts
@@ -442,7 +442,7 @@ export class UIContainer extends HTMLElement {
         this._updateError();
         this._updatePausedAndEnded();
         this._updateCasting();
-        this._addPlayerListeners(this._player);
+        this.addPlayerListeners_(this._player);
         this.propagatePlayerToAllReceivers_();
 
         this.dispatchEvent(createCustomEvent(READY_EVENT));
@@ -469,7 +469,7 @@ export class UIContainer extends HTMLElement {
         this.removeEventListener('mouseleave', this._onMouseLeave);
 
         if (this._player) {
-            this._removePlayerListeners(this._player);
+            this.removePlayerListeners_(this._player);
             this._player.destroy();
             this._player = undefined;
             this.propagatePlayerToAllReceivers_();
@@ -1057,7 +1057,7 @@ export class UIContainer extends HTMLElement {
         }
     };
 
-    private _addPlayerListeners(player: ChromelessPlayer): void {
+    private addPlayerListeners_(player: ChromelessPlayer): void {
         player.addEventListener('destroy', this._onDestroy);
         player.addEventListener('resize', this._updateAspectRatio);
         player.addEventListener(['error', 'sourcechange', 'emptied'], this._updateError);
@@ -1075,7 +1075,7 @@ export class UIContainer extends HTMLElement {
         player.ads?.addEventListener(['adbreakbegin', 'adbreakend', 'adbegin', 'adend', 'adskip'], this._updatePlayingAd);
     }
 
-    private _removePlayerListeners(player: ChromelessPlayer): void {
+    private removePlayerListeners_(player: ChromelessPlayer): void {
         player.removeEventListener('destroy', this._onDestroy);
         player.removeEventListener('resize', this._updateAspectRatio);
         player.removeEventListener(['error', 'sourcechange', 'emptied'], this._updateError);
@@ -1095,7 +1095,7 @@ export class UIContainer extends HTMLElement {
 
     private readonly _onDestroy = (): void => {
         if (this._player) {
-            this._removePlayerListeners(this._player);
+            this.removePlayerListeners_(this._player);
             this._player = undefined;
             this.propagatePlayerToAllReceivers_();
         }

From 44061b71fc7c5c0dace357364e40166c64fdd046 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Tue, 16 Apr 2024 16:14:30 +0200
Subject: [PATCH 04/12] Ignore errors when the player is already destroyed

---
 src/UIContainer.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/UIContainer.ts b/src/UIContainer.ts
index 9e533d2..e1bb2e3 100644
--- a/src/UIContainer.ts
+++ b/src/UIContainer.ts
@@ -1068,10 +1068,11 @@ export class UIContainer extends HTMLElement {
         player.addEventListener(['durationchange', 'sourcechange', 'emptied'], this._updateStreamType);
         player.addEventListener('ratechange', this._updatePlaybackRate);
         player.addEventListener('sourcechange', this._onSourceChange);
+        player.addEventListener(['durationchange', 'sourcechange', 'emptied'], this._updatePlayingAd);
+
         player.theoLive?.addEventListener('publicationloadstart', this._onSourceChange);
         player.videoTracks.addEventListener(['addtrack', 'removetrack', 'change'], this._updateActiveVideoTrack);
         player.cast?.addEventListener('castingchange', this._updateCasting);
-        player.addEventListener(['durationchange', 'sourcechange', 'emptied'], this._updatePlayingAd);
         player.ads?.addEventListener(['adbreakbegin', 'adbreakend', 'adbegin', 'adend', 'adskip'], this._updatePlayingAd);
     }
 
@@ -1086,11 +1087,16 @@ export class UIContainer extends HTMLElement {
         player.removeEventListener(['durationchange', 'sourcechange', 'emptied'], this._updateStreamType);
         player.removeEventListener('ratechange', this._updatePlaybackRate);
         player.removeEventListener('sourcechange', this._onSourceChange);
-        player.theoLive?.removeEventListener('publicationloadstart', this._onSourceChange);
-        player.videoTracks.removeEventListener(['addtrack', 'removetrack', 'change'], this._updateActiveVideoTrack);
-        player.cast?.removeEventListener('castingchange', this._updateCasting);
         player.removeEventListener(['durationchange', 'sourcechange', 'emptied'], this._updatePlayingAd);
-        player.ads?.removeEventListener(['adbreakbegin', 'adbreakend', 'adbegin', 'adend', 'adskip'], this._updatePlayingAd);
+
+        try {
+            player.theoLive?.removeEventListener('publicationloadstart', this._onSourceChange);
+            player.videoTracks.removeEventListener(['addtrack', 'removetrack', 'change'], this._updateActiveVideoTrack);
+            player.cast?.removeEventListener('castingchange', this._updateCasting);
+            player.ads?.removeEventListener(['adbreakbegin', 'adbreakend', 'adbegin', 'adend', 'adskip'], this._updatePlayingAd);
+        } catch {
+            // Ignore errors from accessing player.ads when the player is already destroyed.
+        }
     }
 
     private readonly _onDestroy = (): void => {

From 173fc7df6dd06a6f6ed71c1b5840688ce98cb096 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Tue, 16 Apr 2024 17:10:13 +0200
Subject: [PATCH 05/12] Fix removing event listeners when destroyed

---
 src/components/ChromecastDisplay.ts           | 12 +++++++++---
 src/components/GestureReceiver.ts             | 14 ++++++++------
 src/components/LanguageMenu.ts                | 18 +++++++++---------
 src/components/LanguageMenuButton.ts          | 18 +++++++++---------
 src/components/PreviewThumbnail.ts            | 12 +++++-------
 src/components/QualityRadioGroup.ts           | 12 +++++-------
 src/components/TextTrackStyleDisplay.ts       | 12 +++++-------
 src/components/TextTrackStyleRadioGroup.ts    | 12 +++++-------
 src/components/TimeRange.ts                   |  8 +++++---
 src/components/ads/AdClickThroughButton.ts    | 12 +++++-------
 src/components/ads/AdCountdown.ts             | 14 ++++++--------
 src/components/ads/AdDisplay.ts               | 12 +++++-------
 src/components/ads/AdSkipButton.ts            | 14 ++++++--------
 .../quality/AbstractQualitySelector.ts        | 19 ++++++++++---------
 .../theolive/quality/BadNetworkModeButton.ts  | 16 +++++++++-------
 15 files changed, 101 insertions(+), 104 deletions(-)

diff --git a/src/components/ChromecastDisplay.ts b/src/components/ChromecastDisplay.ts
index dc4d042..893f28c 100644
--- a/src/components/ChromecastDisplay.ts
+++ b/src/components/ChromecastDisplay.ts
@@ -2,7 +2,7 @@ import * as shadyCss from '@webcomponents/shadycss';
 import chromecastDisplayCss from './ChromecastDisplay.css';
 import chromecastIcon from '../icons/chromecast-48px.svg';
 import { StateReceiverMixin } from './StateReceiverMixin';
-import type { ChromelessPlayer } from 'theoplayer/chromeless';
+import type { Chromecast, ChromelessPlayer } from 'theoplayer/chromeless';
 import { setTextContent } from '../util/CommonUtils';
 import { Attribute } from '../util/Attribute';
 import { createTemplate } from '../util/TemplateUtils';
@@ -27,6 +27,7 @@ const CAST_EVENTS = ['statechange'] as const;
 export class ChromecastDisplay extends StateReceiverMixin(HTMLElement, ['player']) {
     private readonly _receiverNameEl: HTMLElement;
     private _player: ChromelessPlayer | undefined;
+    private _castApi: Chromecast | undefined;
 
     constructor() {
         super();
@@ -61,10 +62,15 @@ export class ChromecastDisplay extends StateReceiverMixin(HTMLElement, ['player'
         if (this._player === player) {
             return;
         }
-        this._player?.cast?.chromecast?.removeEventListener(CAST_EVENTS, this._updateFromPlayer);
+        if (this._castApi !== undefined) {
+            this._castApi.removeEventListener(CAST_EVENTS, this._updateFromPlayer);
+        }
         this._player = player;
+        this._castApi = player?.cast?.chromecast;
         this._updateFromPlayer();
-        this._player?.cast?.chromecast?.addEventListener(CAST_EVENTS, this._updateFromPlayer);
+        if (this._castApi !== undefined) {
+            this._castApi.addEventListener(CAST_EVENTS, this._updateFromPlayer);
+        }
     }
 
     private readonly _updateFromPlayer = () => {
diff --git a/src/components/GestureReceiver.ts b/src/components/GestureReceiver.ts
index dfc48ef..81fbfca 100644
--- a/src/components/GestureReceiver.ts
+++ b/src/components/GestureReceiver.ts
@@ -16,6 +16,7 @@ const template = createTemplate('theoplayer-gesture-receiver', `<style>${gesture
  */
 export class GestureReceiver extends StateReceiverMixin(HTMLElement, ['player']) {
     private _player: ChromelessPlayer | undefined;
+    private _playerElement: HTMLElement | undefined;
     private _pointerType: string = '';
 
     constructor() {
@@ -49,14 +50,15 @@ export class GestureReceiver extends StateReceiverMixin(HTMLElement, ['player'])
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.element.removeEventListener('pointerdown', this._onPointerDown);
-            this._player.element.removeEventListener('click', this._onClick);
+        if (this._playerElement !== undefined) {
+            this._playerElement.removeEventListener('pointerdown', this._onPointerDown);
+            this._playerElement.removeEventListener('click', this._onClick);
         }
         this._player = player;
-        if (this._player !== undefined) {
-            this._player.element.addEventListener('pointerdown', this._onPointerDown);
-            this._player.element.addEventListener('click', this._onClick);
+        this._playerElement = player?.element;
+        if (this._playerElement !== undefined) {
+            this._playerElement.addEventListener('pointerdown', this._onPointerDown);
+            this._playerElement.addEventListener('click', this._onClick);
         }
     }
 
diff --git a/src/components/LanguageMenu.ts b/src/components/LanguageMenu.ts
index 12147de..c46484c 100644
--- a/src/components/LanguageMenu.ts
+++ b/src/components/LanguageMenu.ts
@@ -3,7 +3,7 @@ import * as shadyCss from '@webcomponents/shadycss';
 import languageMenuHtml from './LanguageMenu.html';
 import languageMenuCss from './LanguageMenu.css';
 import { StateReceiverMixin } from './StateReceiverMixin';
-import type { ChromelessPlayer, MediaTrack, TextTrack } from 'theoplayer/chromeless';
+import type { ChromelessPlayer, MediaTrack, MediaTrackList, TextTrack, TextTracksList } from 'theoplayer/chromeless';
 import { isSubtitleTrack } from '../util/TrackUtils';
 import { Attribute } from '../util/Attribute';
 import { toggleAttribute } from '../util/CommonUtils';
@@ -26,6 +26,8 @@ const TRACK_EVENTS = ['addtrack', 'removetrack'] as const;
  */
 export class LanguageMenu extends StateReceiverMixin(MenuGroup, ['player']) {
     private _player: ChromelessPlayer | undefined;
+    private _audioTrackList: MediaTrackList | undefined;
+    private _textTrackList: TextTracksList | undefined;
 
     static get observedAttributes() {
         return [...MenuGroup.observedAttributes, Attribute.HAS_AUDIO, Attribute.HAS_SUBTITLES];
@@ -44,17 +46,15 @@ export class LanguageMenu extends StateReceiverMixin(MenuGroup, ['player']) {
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.audioTracks.removeEventListener(TRACK_EVENTS, this._updateAudioTracks);
-            this._player.textTracks.removeEventListener(TRACK_EVENTS, this._updateTextTracks);
-        }
+        this._audioTrackList?.removeEventListener(TRACK_EVENTS, this._updateAudioTracks);
+        this._textTrackList?.removeEventListener(TRACK_EVENTS, this._updateTextTracks);
         this._player = player;
+        this._audioTrackList = player?.audioTracks;
+        this._textTrackList = player?.textTracks;
         this._updateAudioTracks();
         this._updateTextTracks();
-        if (this._player !== undefined) {
-            this._player.audioTracks.addEventListener(TRACK_EVENTS, this._updateAudioTracks);
-            this._player.textTracks.addEventListener(TRACK_EVENTS, this._updateTextTracks);
-        }
+        this._audioTrackList?.addEventListener(TRACK_EVENTS, this._updateAudioTracks);
+        this._textTrackList?.addEventListener(TRACK_EVENTS, this._updateTextTracks);
     }
 
     private readonly _updateAudioTracks = (): void => {
diff --git a/src/components/LanguageMenuButton.ts b/src/components/LanguageMenuButton.ts
index 327f6ae..c86823d 100644
--- a/src/components/LanguageMenuButton.ts
+++ b/src/components/LanguageMenuButton.ts
@@ -2,7 +2,7 @@ import { MenuButton } from './MenuButton';
 import { buttonTemplate } from './Button';
 import languageIcon from '../icons/language.svg';
 import { StateReceiverMixin } from './StateReceiverMixin';
-import type { ChromelessPlayer } from 'theoplayer/chromeless';
+import type { ChromelessPlayer, MediaTrackList, TextTracksList } from 'theoplayer/chromeless';
 import { isSubtitleTrack } from '../util/TrackUtils';
 import { Attribute } from '../util/Attribute';
 import { toggleAttribute } from '../util/CommonUtils';
@@ -22,6 +22,8 @@ const TRACK_EVENTS = ['addtrack', 'removetrack'] as const;
  */
 export class LanguageMenuButton extends StateReceiverMixin(MenuButton, ['player']) {
     private _player: ChromelessPlayer | undefined;
+    private _audioTrackList: MediaTrackList | undefined;
+    private _textTrackList: TextTracksList | undefined;
 
     constructor() {
         super({ template: template() });
@@ -44,16 +46,14 @@ export class LanguageMenuButton extends StateReceiverMixin(MenuButton, ['player'
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.audioTracks.removeEventListener(TRACK_EVENTS, this._updateTracks);
-            this._player.textTracks.removeEventListener(TRACK_EVENTS, this._updateTracks);
-        }
+        this._audioTrackList?.removeEventListener(TRACK_EVENTS, this._updateTracks);
+        this._textTrackList?.removeEventListener(TRACK_EVENTS, this._updateTracks);
         this._player = player;
+        this._audioTrackList = player?.audioTracks;
+        this._textTrackList = player?.textTracks;
         this._updateTracks();
-        if (this._player !== undefined) {
-            this._player.audioTracks.addEventListener(TRACK_EVENTS, this._updateTracks);
-            this._player.textTracks.addEventListener(TRACK_EVENTS, this._updateTracks);
-        }
+        this._audioTrackList?.addEventListener(TRACK_EVENTS, this._updateTracks);
+        this._textTrackList?.addEventListener(TRACK_EVENTS, this._updateTracks);
     }
 
     private readonly _updateTracks = (): void => {
diff --git a/src/components/PreviewThumbnail.ts b/src/components/PreviewThumbnail.ts
index fd9bdc1..5c8a479 100644
--- a/src/components/PreviewThumbnail.ts
+++ b/src/components/PreviewThumbnail.ts
@@ -1,7 +1,7 @@
 import * as shadyCss from '@webcomponents/shadycss';
 import previewThumbnailCss from './PreviewThumbnail.css';
 import { StateReceiverMixin } from './StateReceiverMixin';
-import type { ChromelessPlayer, TextTrack, TextTrackCue, TextTrackCueList } from 'theoplayer/chromeless';
+import type { ChromelessPlayer, TextTrack, TextTrackCue, TextTrackCueList, TextTracksList } from 'theoplayer/chromeless';
 import { arrayFind, noOp } from '../util/CommonUtils';
 import { createTemplate } from '../util/TemplateUtils';
 
@@ -27,6 +27,7 @@ export class PreviewThumbnail extends StateReceiverMixin(HTMLElement, ['player',
     private readonly _thumbnailImageSource: HTMLImageElement;
 
     private _player: ChromelessPlayer | undefined;
+    private _textTrackList: TextTracksList | undefined;
     private _previewTime: number = NaN;
     private _thumbnailTextTrack: TextTrack | undefined;
     private _lastLoadedThumbnailUrl: string | undefined;
@@ -66,14 +67,11 @@ export class PreviewThumbnail extends StateReceiverMixin(HTMLElement, ['player',
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.textTracks.removeEventListener(TRACK_EVENTS, this._updateThumbnailTextTrack);
-        }
+        this._textTrackList?.removeEventListener(TRACK_EVENTS, this._updateThumbnailTextTrack);
         this._player = player;
+        this._textTrackList = player?.textTracks;
         this._updateThumbnailTextTrack();
-        if (this._player !== undefined) {
-            this._player.textTracks.addEventListener(TRACK_EVENTS, this._updateThumbnailTextTrack);
-        }
+        this._textTrackList?.addEventListener(TRACK_EVENTS, this._updateThumbnailTextTrack);
     }
 
     get previewTime(): number {
diff --git a/src/components/QualityRadioGroup.ts b/src/components/QualityRadioGroup.ts
index 9a1214f..9e5195f 100644
--- a/src/components/QualityRadioGroup.ts
+++ b/src/components/QualityRadioGroup.ts
@@ -2,7 +2,7 @@ import * as shadyCss from '@webcomponents/shadycss';
 import { RadioGroup } from './RadioGroup';
 import verticalRadioGroupCss from './VerticalRadioGroup.css';
 import { StateReceiverMixin } from './StateReceiverMixin';
-import type { ChromelessPlayer, MediaTrack, Quality, VideoQuality } from 'theoplayer/chromeless';
+import type { ChromelessPlayer, MediaTrack, MediaTrackList, Quality, VideoQuality } from 'theoplayer/chromeless';
 import { arrayFind, fromArrayLike } from '../util/CommonUtils';
 import { QualityRadioButton } from './QualityRadioButton';
 import { createEvent } from '../util/EventUtils';
@@ -24,6 +24,7 @@ const TRACK_EVENTS = ['addtrack', 'removetrack', 'change'] as const;
 export class QualityRadioGroup extends StateReceiverMixin(HTMLElement, ['player']) {
     private readonly _radioGroup: RadioGroup;
     private _player: ChromelessPlayer | undefined;
+    private _videoTracks: MediaTrackList | undefined;
     private _track: MediaTrack | undefined;
 
     constructor() {
@@ -67,14 +68,11 @@ export class QualityRadioGroup extends StateReceiverMixin(HTMLElement, ['player'
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.videoTracks.removeEventListener(TRACK_EVENTS, this._updateTrack);
-        }
+        this._videoTracks?.removeEventListener(TRACK_EVENTS, this._updateTrack);
         this._player = player;
+        this._videoTracks = player?.videoTracks;
         this._updateTrack();
-        if (this._player !== undefined) {
-            this._player.videoTracks.addEventListener(TRACK_EVENTS, this._updateTrack);
-        }
+        this._videoTracks?.addEventListener(TRACK_EVENTS, this._updateTrack);
     }
 
     private readonly _onChange = () => {
diff --git a/src/components/TextTrackStyleDisplay.ts b/src/components/TextTrackStyleDisplay.ts
index 23fe167..3405a71 100644
--- a/src/components/TextTrackStyleDisplay.ts
+++ b/src/components/TextTrackStyleDisplay.ts
@@ -1,6 +1,6 @@
 import * as shadyCss from '@webcomponents/shadycss';
 import { StateReceiverMixin } from './StateReceiverMixin';
-import type { ChromelessPlayer, EdgeStyle } from 'theoplayer/chromeless';
+import type { ChromelessPlayer, EdgeStyle, TextTrackStyle } from 'theoplayer/chromeless';
 import { Attribute } from '../util/Attribute';
 import { parseColor, toRgb } from '../util/ColorUtils';
 import type { TextTrackStyleOption } from './TextTrackStyleRadioGroup';
@@ -21,6 +21,7 @@ export class TextTrackStyleDisplay extends StateReceiverMixin(HTMLElement, ['pla
 
     private readonly _spanEl: HTMLSpanElement;
     private _player: ChromelessPlayer | undefined;
+    private _textTrackStyle: TextTrackStyle | undefined;
 
     constructor() {
         super();
@@ -67,14 +68,11 @@ export class TextTrackStyleDisplay extends StateReceiverMixin(HTMLElement, ['pla
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.textTrackStyle.removeEventListener('change', this._updateFromPlayer);
-        }
+        this._textTrackStyle?.removeEventListener('change', this._updateFromPlayer);
         this._player = player;
+        this._textTrackStyle = player?.textTrackStyle;
         this._updateFromPlayer();
-        if (this._player !== undefined) {
-            this._player.textTrackStyle.addEventListener('change', this._updateFromPlayer);
-        }
+        this._textTrackStyle?.addEventListener('change', this._updateFromPlayer);
     }
 
     private readonly _updateFromPlayer = (): void => {
diff --git a/src/components/TextTrackStyleRadioGroup.ts b/src/components/TextTrackStyleRadioGroup.ts
index 0f3e335..14f19ba 100644
--- a/src/components/TextTrackStyleRadioGroup.ts
+++ b/src/components/TextTrackStyleRadioGroup.ts
@@ -2,7 +2,7 @@ import * as shadyCss from '@webcomponents/shadycss';
 import { RadioGroup } from './RadioGroup';
 import verticalRadioGroupCss from './VerticalRadioGroup.css';
 import { StateReceiverMixin } from './StateReceiverMixin';
-import type { ChromelessPlayer, EdgeStyle } from 'theoplayer/chromeless';
+import type { ChromelessPlayer, EdgeStyle, TextTrackStyle } from 'theoplayer/chromeless';
 import type { RadioButton } from './RadioButton';
 import { createEvent } from '../util/EventUtils';
 import { Attribute } from '../util/Attribute';
@@ -45,6 +45,7 @@ export class TextTrackStyleRadioGroup extends StateReceiverMixin(HTMLElement, ['
     private readonly _radioGroup: RadioGroup;
     private readonly _optionsSlot: HTMLSlotElement;
     private _player: ChromelessPlayer | undefined;
+    private _textTrackStyle: TextTrackStyle | undefined;
     private _value: any;
 
     constructor() {
@@ -125,14 +126,11 @@ export class TextTrackStyleRadioGroup extends StateReceiverMixin(HTMLElement, ['
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.textTrackStyle.removeEventListener('change', this._updateFromPlayer);
-        }
+        this._textTrackStyle?.removeEventListener('change', this._updateFromPlayer);
         this._player = player;
+        this._textTrackStyle = player?.textTrackStyle;
         this._updateFromPlayer();
-        if (this._player !== undefined) {
-            this._player.textTrackStyle.addEventListener('change', this._updateFromPlayer);
-        }
+        this._textTrackStyle?.addEventListener('change', this._updateFromPlayer);
     }
 
     private readonly _updateChecked = (): void => {
diff --git a/src/components/TimeRange.ts b/src/components/TimeRange.ts
index 0cdcfac..53b33d4 100644
--- a/src/components/TimeRange.ts
+++ b/src/components/TimeRange.ts
@@ -3,7 +3,7 @@ import { Range, rangeTemplate } from './Range';
 import timeRangeHtml from './TimeRange.html';
 import timeRangeCss from './TimeRange.css';
 import { StateReceiverMixin } from './StateReceiverMixin';
-import type { ChromelessPlayer } from 'theoplayer/chromeless';
+import type { Ads, ChromelessPlayer } from 'theoplayer/chromeless';
 import { formatAsTimePhrase } from '../util/TimeUtils';
 import { createCustomEvent } from '../util/EventUtils';
 import type { PreviewTimeChangeEvent } from '../events/PreviewTimeChangeEvent';
@@ -49,6 +49,7 @@ export class TimeRange extends StateReceiverMixin(Range, ['player', 'streamType'
     private readonly _previewBoxEl: HTMLElement;
 
     private _player: ChromelessPlayer | undefined;
+    private _ads: Ads | undefined;
     private _pausedWhileScrubbing: boolean = false;
 
     private _autoAdvanceId: number = 0;
@@ -90,16 +91,17 @@ export class TimeRange extends StateReceiverMixin(Range, ['player', 'streamType'
         if (this._player !== undefined) {
             this._player.removeEventListener(UPDATE_EVENTS, this._updateFromPlayer);
             this._player.removeEventListener(AUTO_ADVANCE_EVENTS, this._toggleAutoAdvance);
-            this._player.ads?.removeEventListener(AD_EVENTS, this._onAdChange);
         }
+        this._ads?.removeEventListener(AD_EVENTS, this._onAdChange);
         this._player = player;
+        this._ads = player?.ads;
         this._updateFromPlayer();
         this._toggleAutoAdvance();
         if (this._player !== undefined) {
             this._player.addEventListener(UPDATE_EVENTS, this._updateFromPlayer);
             this._player.addEventListener(AUTO_ADVANCE_EVENTS, this._toggleAutoAdvance);
-            this._player.ads?.addEventListener(AD_EVENTS, this._onAdChange);
         }
+        this._ads?.addEventListener(AD_EVENTS, this._onAdChange);
     }
 
     get streamType(): StreamType {
diff --git a/src/components/ads/AdClickThroughButton.ts b/src/components/ads/AdClickThroughButton.ts
index 1a38d9e..40c2f13 100644
--- a/src/components/ads/AdClickThroughButton.ts
+++ b/src/components/ads/AdClickThroughButton.ts
@@ -2,7 +2,7 @@ import * as shadyCss from '@webcomponents/shadycss';
 import { LinkButton, linkButtonTemplate } from '../LinkButton';
 import { StateReceiverMixin } from '../StateReceiverMixin';
 import { Attribute } from '../../util/Attribute';
-import type { ChromelessPlayer } from 'theoplayer/chromeless';
+import type { Ads, ChromelessPlayer } from 'theoplayer/chromeless';
 import { arrayFind } from '../../util/CommonUtils';
 import { isLinearAd } from '../../util/AdUtils';
 import { createTemplate } from '../../util/TemplateUtils';
@@ -18,6 +18,7 @@ const AD_EVENTS = ['adbegin', 'adend', 'adloaded', 'updatead', 'adskip'] as cons
  */
 export class AdClickThroughButton extends StateReceiverMixin(LinkButton, ['player']) {
     private _player: ChromelessPlayer | undefined;
+    private _ads: Ads | undefined;
 
     static get observedAttributes() {
         return [...LinkButton.observedAttributes, Attribute.CLICKTHROUGH];
@@ -58,14 +59,11 @@ export class AdClickThroughButton extends StateReceiverMixin(LinkButton, ['playe
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.ads?.removeEventListener(AD_EVENTS, this._updateFromPlayer);
-        }
+        this._ads?.removeEventListener(AD_EVENTS, this._updateFromPlayer);
         this._player = player;
+        this._ads = player?.ads;
         this._updateFromPlayer();
-        if (this._player !== undefined) {
-            this._player.ads?.addEventListener(AD_EVENTS, this._updateFromPlayer);
-        }
+        this._ads?.addEventListener(AD_EVENTS, this._updateFromPlayer);
     }
 
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any) {
diff --git a/src/components/ads/AdCountdown.ts b/src/components/ads/AdCountdown.ts
index 478f187..607b7dc 100644
--- a/src/components/ads/AdCountdown.ts
+++ b/src/components/ads/AdCountdown.ts
@@ -2,7 +2,7 @@ import * as shadyCss from '@webcomponents/shadycss';
 import textDisplayCss from '../TextDisplay.css';
 import adCountdownCss from './AdCountdown.css';
 import { StateReceiverMixin } from '../StateReceiverMixin';
-import type { ChromelessPlayer } from 'theoplayer/chromeless';
+import type { Ads, ChromelessPlayer } from 'theoplayer/chromeless';
 import { setTextContent } from '../../util/CommonUtils';
 import { createTemplate } from '../../util/TemplateUtils';
 
@@ -18,6 +18,7 @@ const AD_EVENTS = ['adbreakbegin', 'adbreakend', 'adbreakchange', 'updateadbreak
 export class AdCountdown extends StateReceiverMixin(HTMLElement, ['player']) {
     private readonly _spanEl: HTMLElement;
     private _player: ChromelessPlayer | undefined;
+    private _ads: Ads | undefined;
 
     constructor() {
         super();
@@ -49,15 +50,12 @@ export class AdCountdown extends StateReceiverMixin(HTMLElement, ['player']) {
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.removeEventListener('timeupdate', this._update);
-            this._player.ads?.removeEventListener(AD_EVENTS, this._onAdChange);
-        }
+        this._player?.removeEventListener('timeupdate', this._update);
+        this._ads?.removeEventListener(AD_EVENTS, this._onAdChange);
         this._player = player;
+        this._ads = player?.ads;
         this._onAdChange();
-        if (this._player !== undefined) {
-            this._player.ads?.addEventListener(AD_EVENTS, this._onAdChange);
-        }
+        this._ads?.addEventListener(AD_EVENTS, this._onAdChange);
     }
 
     private readonly _onAdChange = () => {
diff --git a/src/components/ads/AdDisplay.ts b/src/components/ads/AdDisplay.ts
index d01eb26..283ebfe 100644
--- a/src/components/ads/AdDisplay.ts
+++ b/src/components/ads/AdDisplay.ts
@@ -2,7 +2,7 @@ import * as shadyCss from '@webcomponents/shadycss';
 import textDisplayCss from '../TextDisplay.css';
 import adDisplayCss from './AdDisplay.css';
 import { StateReceiverMixin } from '../StateReceiverMixin';
-import type { ChromelessPlayer } from 'theoplayer/chromeless';
+import type { Ads, ChromelessPlayer } from 'theoplayer/chromeless';
 import { arrayFind, setTextContent } from '../../util/CommonUtils';
 import { isLinearAd } from '../../util/AdUtils';
 import { createTemplate } from '../../util/TemplateUtils';
@@ -20,6 +20,7 @@ const AD_EVENTS = ['adbreakbegin', 'adbreakend', 'adbreakchange', 'updateadbreak
 export class AdDisplay extends StateReceiverMixin(HTMLElement, ['player']) {
     private readonly _spanEl: HTMLElement;
     private _player: ChromelessPlayer | undefined;
+    private _ads: Ads | undefined;
 
     constructor() {
         super();
@@ -51,14 +52,11 @@ export class AdDisplay extends StateReceiverMixin(HTMLElement, ['player']) {
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.ads?.removeEventListener(AD_EVENTS, this._updateFromPlayer);
-        }
+        this._ads?.removeEventListener(AD_EVENTS, this._updateFromPlayer);
         this._player = player;
+        this._ads = player?.ads;
         this._updateFromPlayer();
-        if (this._player !== undefined) {
-            this._player.ads?.addEventListener(AD_EVENTS, this._updateFromPlayer);
-        }
+        this._ads?.addEventListener(AD_EVENTS, this._updateFromPlayer);
     }
 
     private readonly _updateFromPlayer = () => {
diff --git a/src/components/ads/AdSkipButton.ts b/src/components/ads/AdSkipButton.ts
index 639ff9b..bfe0f07 100644
--- a/src/components/ads/AdSkipButton.ts
+++ b/src/components/ads/AdSkipButton.ts
@@ -4,7 +4,7 @@ import adSkipButtonCss from './AdSkipButton.css';
 import skipNextIcon from '../../icons/skip-next.svg';
 import { StateReceiverMixin } from '../StateReceiverMixin';
 import { Attribute } from '../../util/Attribute';
-import type { ChromelessPlayer } from 'theoplayer/chromeless';
+import type { Ads, ChromelessPlayer } from 'theoplayer/chromeless';
 import { arrayFind, setTextContent } from '../../util/CommonUtils';
 import { isLinearAd } from '../../util/AdUtils';
 import { createTemplate } from '../../util/TemplateUtils';
@@ -33,6 +33,7 @@ export class AdSkipButton extends StateReceiverMixin(Button, ['player']) {
     private readonly _countdownEl: HTMLElement;
     private readonly _skipEl: HTMLElement;
     private _player: ChromelessPlayer | undefined;
+    private _ads: Ads | undefined;
 
     static get observedAttributes() {
         return [...Button.observedAttributes];
@@ -59,15 +60,12 @@ export class AdSkipButton extends StateReceiverMixin(Button, ['player']) {
         if (this._player === player) {
             return;
         }
-        if (this._player !== undefined) {
-            this._player.removeEventListener('timeupdate', this._update);
-            this._player.ads?.removeEventListener(AD_EVENTS, this._onAdChange);
-        }
+        this._player?.removeEventListener('timeupdate', this._update);
+        this._ads?.removeEventListener(AD_EVENTS, this._onAdChange);
         this._player = player;
+        this._ads = player?.ads;
         this._onAdChange();
-        if (this._player !== undefined) {
-            this._player.ads?.addEventListener(AD_EVENTS, this._onAdChange);
-        }
+        this._ads?.addEventListener(AD_EVENTS, this._onAdChange);
     }
 
     protected override handleClick(): void {
diff --git a/src/components/theolive/quality/AbstractQualitySelector.ts b/src/components/theolive/quality/AbstractQualitySelector.ts
index bda4231..f000001 100644
--- a/src/components/theolive/quality/AbstractQualitySelector.ts
+++ b/src/components/theolive/quality/AbstractQualitySelector.ts
@@ -1,4 +1,4 @@
-import type { ChromelessPlayer } from 'theoplayer/chromeless';
+import type { ChromelessPlayer, TheoLiveApi } from 'theoplayer/chromeless';
 import { type ButtonOptions } from '../../Button';
 import { StateReceiverMixin } from '../../StateReceiverMixin';
 import { RadioButton } from '../../RadioButton';
@@ -12,6 +12,7 @@ import { Attribute } from '../../../util/Attribute';
  */
 export abstract class AbstractQualitySelector extends StateReceiverMixin(RadioButton, ['player']) {
     private _player: ChromelessPlayer | undefined;
+    private _theoLive: TheoLiveApi | undefined;
     protected _slotEl: HTMLSlotElement;
     protected _badNetworkMode: boolean = false;
 
@@ -28,16 +29,16 @@ export abstract class AbstractQualitySelector extends StateReceiverMixin(RadioBu
         if (this._player === player) {
             return;
         }
-        if (this._player) {
-            this._player.theoLive?.removeEventListener('enterbadnetworkmode', this.handleEnterBadNetworkMode_);
-            this._player.theoLive?.removeEventListener('exitbadnetworkmode', this.handleExitBadNetworkMode_);
+        if (this._theoLive) {
+            this._theoLive.removeEventListener('enterbadnetworkmode', this.handleEnterBadNetworkMode_);
+            this._theoLive.removeEventListener('exitbadnetworkmode', this.handleExitBadNetworkMode_);
         }
         this._player = player;
-        this._badNetworkMode = false;
-        if (this._player) {
-            this._badNetworkMode = this._player.theoLive?.badNetworkMode ?? false;
-            this._player.theoLive?.addEventListener('enterbadnetworkmode', this.handleEnterBadNetworkMode_);
-            this._player.theoLive?.addEventListener('exitbadnetworkmode', this.handleExitBadNetworkMode_);
+        this._theoLive = player?.theoLive;
+        this._badNetworkMode = this._theoLive?.badNetworkMode ?? false;
+        if (this._theoLive) {
+            this._theoLive.addEventListener('enterbadnetworkmode', this.handleEnterBadNetworkMode_);
+            this._theoLive.addEventListener('exitbadnetworkmode', this.handleExitBadNetworkMode_);
         }
         this.handlePlayer();
     }
diff --git a/src/components/theolive/quality/BadNetworkModeButton.ts b/src/components/theolive/quality/BadNetworkModeButton.ts
index 23e9eff..536d62b 100644
--- a/src/components/theolive/quality/BadNetworkModeButton.ts
+++ b/src/components/theolive/quality/BadNetworkModeButton.ts
@@ -1,4 +1,4 @@
-import { ChromelessPlayer as TheoPlayer } from 'theoplayer/chromeless';
+import { ChromelessPlayer as TheoPlayer, type TheoLiveApi } from 'theoplayer/chromeless';
 import settingsCss from './BadNetworkModeButton.css';
 import { buttonTemplate } from '../../Button';
 import settingsIcon from '../../../icons/settings.svg';
@@ -19,6 +19,7 @@ const template = createTemplate('theolive-bad-network-button', buttonTemplate(ht
  */
 export class BadNetworkModeButton extends StateReceiverMixin(MenuButton, ['player']) {
     private _player: TheoPlayer | undefined;
+    private _theoLive: TheoLiveApi | undefined;
     private _warningIcon: HTMLElement | undefined;
 
     constructor() {
@@ -55,14 +56,15 @@ export class BadNetworkModeButton extends StateReceiverMixin(MenuButton, ['playe
         if (this._player === player) {
             return;
         }
-        if (this._player) {
-            this._player.theoLive?.removeEventListener('enterbadnetworkmode', this.handleEnterBadNetworkMode_);
-            this._player.theoLive?.removeEventListener('exitbadnetworkmode', this.handleExitBadNetworkMode_);
+        if (this._theoLive) {
+            this._theoLive.removeEventListener('enterbadnetworkmode', this.handleEnterBadNetworkMode_);
+            this._theoLive.removeEventListener('exitbadnetworkmode', this.handleExitBadNetworkMode_);
         }
         this._player = player;
-        if (this._player) {
-            this._player.theoLive?.addEventListener('enterbadnetworkmode', this.handleEnterBadNetworkMode_);
-            this._player.theoLive?.addEventListener('exitbadnetworkmode', this.handleExitBadNetworkMode_);
+        this._theoLive = player?.theoLive;
+        if (this._theoLive) {
+            this._theoLive.addEventListener('enterbadnetworkmode', this.handleEnterBadNetworkMode_);
+            this._theoLive.addEventListener('exitbadnetworkmode', this.handleExitBadNetworkMode_);
         }
     }
 }

From af16eb06d956ee75f62397a1567a9a4c35fda2eb Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Tue, 16 Apr 2024 17:14:31 +0200
Subject: [PATCH 06/12] Destroy player on unmount in React

---
 react/src/util.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/react/src/util.ts b/react/src/util.ts
index 0450ede..c03b947 100644
--- a/react/src/util.ts
+++ b/react/src/util.ts
@@ -26,5 +26,10 @@ export function usePlayer(
         onReady?.(player);
     }, [player, onReady]);
 
+    // Destroy player on unmount.
+    useEffect(() => {
+        return () => player?.destroy();
+    }, [player]);
+
     return player;
 }

From b7adf8011f3069d12f52d7225b8048f38e777509 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Tue, 16 Apr 2024 17:33:30 +0200
Subject: [PATCH 07/12] Ignore errors while unmounting

---
 react/src/util.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/react/src/util.ts b/react/src/util.ts
index c03b947..dfca638 100644
--- a/react/src/util.ts
+++ b/react/src/util.ts
@@ -28,7 +28,13 @@ export function usePlayer(
 
     // Destroy player on unmount.
     useEffect(() => {
-        return () => player?.destroy();
+        return () => {
+            try {
+                player?.destroy();
+            } catch {
+                // Ignore, probably already destroyed.
+            }
+        };
     }, [player]);
 
     return player;

From 9f3052db9850bd14a3af79ad302e53ff90b84eff Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Tue, 16 Apr 2024 17:40:55 +0200
Subject: [PATCH 08/12] Update changelog

---
 CHANGELOG.md       | 4 ++++
 react/CHANGELOG.md | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0769512..55b00f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,10 @@ sidebar_custom_props: { 'icon': '📰' }
 > -   🏠 Internal
 > -   💅 Polish
 
+## Unreleased
+
+-   🐛 Fixed `ui.player.destroy()` not working. ([#59](https://github.com/THEOplayer/web-ui/issues/59), [#62](https://github.com/THEOplayer/web-ui/pull/62))
+
 ## v1.8.0 (2024-04-12)
 
 -   💥 **Breaking Change**: This project now requires THEOplayer version 7.0.0 or higher. ([#60](https://github.com/THEOplayer/web-ui/pull/60))
diff --git a/react/CHANGELOG.md b/react/CHANGELOG.md
index 3a86c1b..fbc289e 100644
--- a/react/CHANGELOG.md
+++ b/react/CHANGELOG.md
@@ -15,6 +15,10 @@ sidebar_custom_props: { 'icon': '📰' }
 > -   🏠 Internal
 > -   💅 Polish
 
+## Unreleased
+
+-   🐛 Fixed backing THEOplayer not always being destroyed on unmount. ([#59](https://github.com/THEOplayer/web-ui/issues/59), [#62](https://github.com/THEOplayer/web-ui/pull/62))
+
 ## v1.8.0 (2024-04-12)
 
 -   💥 **Breaking Change**: This project now requires THEOplayer version 7.0.0 or higher. ([#60](https://github.com/THEOplayer/web-ui/pull/60))

From 9a6762e6dcbd1ef9b361bf192de9ebe09ff7f5e2 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Wed, 17 Apr 2024 09:11:31 +0200
Subject: [PATCH 09/12] Run CI on next branch

---
 .github/workflows/ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 977c3b5..607e6e6 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - main
+      - next
     paths-ignore:
       - '**.md'
   pull_request:

From 01d07fd2bd1f5c5aa82112f299c6f3b0c4b3be2f Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Thu, 18 Apr 2024 15:22:11 +0200
Subject: [PATCH 10/12] Fix CI

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 607e6e6..78c2d2a 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -3,7 +3,7 @@ on:
   push:
     branches:
       - main
-      - next
+      - develop
     paths-ignore:
       - '**.md'
   pull_request:

From 44f2f716ea0d98f763bf6ca3efdb81840e16655d Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Thu, 18 Apr 2024 15:49:20 +0200
Subject: [PATCH 11/12] Add "Create release PR" workflow

---
 .github/workflows/create-release.yml | 68 ++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 .github/workflows/create-release.yml

diff --git a/.github/workflows/create-release.yml b/.github/workflows/create-release.yml
new file mode 100644
index 0000000..ebf7abb
--- /dev/null
+++ b/.github/workflows/create-release.yml
@@ -0,0 +1,68 @@
+name: Create release PR
+on:
+  workflow_dispatch:
+    inputs:
+      version-bump:
+        description: 'Version bump'
+        required: true
+        default: 'patch'
+        type: choice
+        options:
+          - major
+          - minor
+          - patch
+      version:
+        description: 'Custom version'
+        required: false
+        type: string
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    strategy:
+      matrix:
+        node-version: [20]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+      - name: Create app token
+        uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.THEOPLAYER_BOT_APP_ID }}
+          private-key: ${{ secrets.THEOPLAYER_BOT_PRIVATE_KEY }}
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          token: ${{ steps.app-token.outputs.token }}
+      - name: Configure Git user
+        run: |
+          git config user.name 'theoplayer-bot[bot]'
+          git config user.email '873105+theoplayer-bot[bot]@users.noreply.github.com'
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci --workspaces
+      - name: Bump version
+        shell: bash
+        run: |
+          npm version --no-git-tag-version ${{ inputs.version || inputs.version-bump }}
+          echo "npm_version=$(jq -r .version package.json)" >> "$GITHUB_ENV"
+      - name: Push to release branch
+        shell: bash
+        run: |
+          git commit -a -m $npm_version
+          git push origin "HEAD:release/$npm_version"
+      - name: Create pull request
+        shell: bash
+        run: |
+          gh pr create \
+            --base main \
+            --head "release/$npm_version" \
+            --title "Release $npm_version" \
+            --body "This PR will publish version $npm_version."
+        env:
+          GH_TOKEN: ${{ steps.app-token.outputs.token }}

From 7c8611591d358b58db9bdd6c288fe71c329254e8 Mon Sep 17 00:00:00 2001
From: "theoplayer-bot[bot]"
 <873105+theoplayer-bot[bot]@users.noreply.github.com>
Date: Thu, 18 Apr 2024 13:50:06 +0000
Subject: [PATCH 12/12] 1.8.1

---
 CHANGELOG.md       |  2 +-
 package-lock.json  | 12 ++++++------
 package.json       |  2 +-
 react/CHANGELOG.md |  3 ++-
 react/package.json |  4 ++--
 5 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 55b00f8..5897cc2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,7 +15,7 @@ sidebar_custom_props: { 'icon': '📰' }
 > -   🏠 Internal
 > -   💅 Polish
 
-## Unreleased
+## v1.8.1 (2024-04-18)
 
 -   🐛 Fixed `ui.player.destroy()` not working. ([#59](https://github.com/THEOplayer/web-ui/issues/59), [#62](https://github.com/THEOplayer/web-ui/pull/62))
 
diff --git a/package-lock.json b/package-lock.json
index 8ad4631..f602bd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@theoplayer/web-ui",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@theoplayer/web-ui",
-      "version": "1.8.0",
+      "version": "1.8.1",
       "license": "MIT",
       "workspaces": [
         ".",
@@ -5570,11 +5570,11 @@
     },
     "react": {
       "name": "@theoplayer/react-ui",
-      "version": "1.8.0",
+      "version": "1.8.1",
       "license": "MIT",
       "dependencies": {
         "@lit/react": "^1.0.3",
-        "@theoplayer/web-ui": "^1.8.0"
+        "@theoplayer/web-ui": "^1.8.1"
       },
       "devDependencies": {
         "@rollup/plugin-json": "^6.1.0",
@@ -6209,7 +6209,7 @@
         "@swc/cli": "^0.1.62",
         "@swc/core": "^1.3.89",
         "@swc/helpers": "^0.5.2",
-        "@theoplayer/web-ui": "^1.8.0",
+        "@theoplayer/web-ui": "^1.8.1",
         "@types/react": "^18.2.48",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -6864,7 +6864,7 @@
             "@swc/cli": "^0.1.62",
             "@swc/core": "^1.3.89",
             "@swc/helpers": "^0.5.2",
-            "@theoplayer/web-ui": "^1.8.0",
+            "@theoplayer/web-ui": "^1.8.1",
             "@types/react": "^18.2.48",
             "react": "^18.2.0",
             "react-dom": "^18.2.0",
diff --git a/package.json b/package.json
index f407d85..2fbbf65 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theoplayer/web-ui",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "UI component library for the THEOplayer Web SDK",
   "main": "dist/THEOplayerUI.js",
   "module": "dist/THEOplayerUI.mjs",
diff --git a/react/CHANGELOG.md b/react/CHANGELOG.md
index fbc289e..a3c0c54 100644
--- a/react/CHANGELOG.md
+++ b/react/CHANGELOG.md
@@ -15,9 +15,10 @@ sidebar_custom_props: { 'icon': '📰' }
 > -   🏠 Internal
 > -   💅 Polish
 
-## Unreleased
+## v1.8.1 (2024-04-18)
 
 -   🐛 Fixed backing THEOplayer not always being destroyed on unmount. ([#59](https://github.com/THEOplayer/web-ui/issues/59), [#62](https://github.com/THEOplayer/web-ui/pull/62))
+-   🏠 See changes to [Open Video UI for Web v1.8.1](https://github.com/THEOplayer/web-ui/blob/v1.8.1/CHANGELOG.md)
 
 ## v1.8.0 (2024-04-12)
 
diff --git a/react/package.json b/react/package.json
index 5aba048..61ef324 100644
--- a/react/package.json
+++ b/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theoplayer/react-ui",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "React component library for the THEOplayer Web SDK",
   "main": "dist/THEOplayerReactUI.js",
   "module": "dist/THEOplayerReactUI.mjs",
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.3",
-    "@theoplayer/web-ui": "^1.8.0"
+    "@theoplayer/web-ui": "^1.8.1"
   },
   "peerDependencies": {
     "@types/react": "^16.3.0 || ^17 || ^18",