Add AirPlay player button

webroot/index.html

@@ -165,5 +165,7 @@ possible hacks
   <script src="js/utils.js"></script>
   <script src="js/message.js"></script>
   <script src="js/app.js"></script>
+  <script src="js/player/airplay.js"></script>
+
 </body>
 </html>

webroot/js/player/airplay.js

@@ -0,0 +1,23 @@
+videojs.hookOnce('setup', function (player) {
+  if (window.WebKitPlaybackTargetAvailabilityEvent) {
+    var videoJsButtonClass = videojs.getComponent('Button');
+    var concreteButtonClass = videojs.extend(videoJsButtonClass, {
+
+      // The `init()` method will also work for constructor logic here, but it is 
+      // deprecated. If you provide an `init()` method, it will override the
+      // `constructor()` method!
+      constructor: function () {
+        videoJsButtonClass.call(this, player);
+      }, // notice the comma
+
+      handleClick: function () {
+        const videoElement = document.getElementsByTagName('video')[0];
+        videoElement.webkitShowPlaybackTargetPicker();
+      }
+    });
+
+    var concreteButtonInstance = player.controlBar.addChild(new concreteButtonClass());
+    concreteButtonInstance.addClass("vjs-airplay");
+  }
+
+});

webroot/styles/layout.css

@@ -378,3 +378,7 @@ header h1 {
   height: calc((var(--vh, 1vh) * 40));
   min-height: 300px;
 }
+
+.vjs-airplay .vjs-icon-placeholder::before {
+    content: 'AP';
+}