fix: Remove target availability event listener on dispose (silvermine#29

) Fix for issue silvermine#29. This commit removes the "webkitplaybacktargetavailabilitychanged" event listener when the component is disposed. It also provides a test case demo in which the user can remove (dispose) the AirPlay component from the videoJS player.
izkmdz · Feb 14, 2022 · d20dc68 · d20dc68
1 parent 63a3908
commit d20dc68
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 1 deletion.
diff --git a/docs/demo/test-cases/remove-air-play-button.html b/docs/demo/test-cases/remove-air-play-button.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+   <meta charset=utf-8 />
+   <title>silvermine-videojs-airplay Demo</title>
+   <link href="https://unpkg.com/video.js@7.4.1/dist/video-js.css" rel="stylesheet">
+   <script src="https://unpkg.com/video.js@7.4.1/dist/video.js"></script>
+   <script src="../../../dist/silvermine-videojs-airplay.min.js"></script>
+   <link href="../../../dist/silvermine-videojs-airplay.css" rel="stylesheet">
+</head>
+<body>
+   <h1><a href="https://github.com/silvermine/videojs-airplay/issues/29">#29</a> Removing/disposing of the AirPlay button</h1>
+
+   <p>
+      When the AirPlay button is programmatically removed from the player, this plugin should remove the event listeners
+      that it registered outside of its own scope (e.g. on the player's media element). If this test case is failing, you
+      will see an error or warning in the console when you click the "Remove AirPlay Button" button.
+   </p>
+
+   <video id="video_1" class="video-js vjs-default-skin" controls preload="auto" data-setup='{ "fluid": "true" }'>
+      <source src="http://www.caminandes.com/download/03_caminandes_llamigos_1080p.mp4" type="video/mp4">
+   </video>
+
+   <button id="removeBtn" onclick="removeAirPlayButton()">Remove AirPlay Button</button>
+
+   <script>
+      var player = videojs('video_1', {}, function() {
+         player.airPlay();
+      });
+
+      removeAirPlayButton = function() {
+         var airPlayButton = player.controlBar.getChild('airPlayButton');
+
+         airPlayButton.dispose();
+         document.getElementById('removeBtn').disabled = true;
+
+         player.load();
+      };
+   </script>
+
+</body>
+</html>
diff --git a/src/js/components/AirPlayButton.js b/src/js/components/AirPlayButton.js
@@ -89,12 +89,17 @@ AirPlayButton = {
          return;
       }
 
-      mediaEl.addEventListener('webkitplaybacktargetavailabilitychanged', function(event) {
+      function onTargetAvailabilityChanged(event) {
          if (event.availability === 'available') {
             self.show();
          } else {
             self.hide();
          }
+      }
+
+      mediaEl.addEventListener('webkitplaybacktargetavailabilitychanged', onTargetAvailabilityChanged, this);
+      this.on('dispose', function() {
+         mediaEl.removeEventListener('webkitplaybacktargetavailabilitychanged', onTargetAvailabilityChanged, this);
       });
    },
 };