Create receiver.html

music-assistant · Apr 9, 2024 · 1b4df5d · 1b4df5d
1 parent 9f9511a
commit 1b4df5d
Showing 1 changed file with 121 additions and 0 deletions.
diff --git a/receiver.html b/receiver.html
@@ -0,0 +1,121 @@
+<!--
+Copyright 2022 Google LLC. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+ -->
+<!--
+This sample demonstrates how to build your own Receiver for use with Google
+Cast.
+ -->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <!--<link rel="stylesheet" href="css/receiver.css" media="screen" />-->
+  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
+  <!-- Cast Debug Logger -->
+  <!--<script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>-->
+</head>
+
+<body>
+
+  <cast-media-player></cast-media-player>
+
+  <footer>
+    <!--<script src="js/receiver.js" type="module"></script>-->
+    <script>
+      'use strict';
+
+      const context = cast.framework.CastReceiverContext.getInstance();
+      const playerManager = context.getPlayerManager();
+
+      // helper : query elements even deeply within shadow doms
+      function querySelectorDeep(selector, root = document) {
+        let currentRoot = root;
+        let partials = selector.split('::shadow');
+        let elems = currentRoot.querySelectorAll(partials[0]);
+        for (let i = 1; i < partials.length; i++) {
+          let partial = partials[i];
+          let elemsInside = [];
+          for (let j = 0; j < elems.length; j++) {
+            let shadow = elems[j].shadowRoot;
+            if (shadow) {
+              const matchesInShadow = shadow.querySelectorAll(partial);
+              elemsInside = elemsInside.concat([... matchesInShadow]);
+            }
+          }
+          elems = elemsInside;
+        }
+        return elems;
+      }
+
+      // update application name field
+      function updateAppName(str){
+        try {
+          // retrieve the right div - it's inside two shadowRoot(s) so we need a special selector
+          const mdivTab = querySelectorDeep('cast-media-player::shadow tv-overlay::shadow div.playback-logo')
+          if (mdivTab.length > 0){
+            const mdiv = mdivTab[0]
+            // update text
+            mdiv.innerHTML = str
+            // update color
+            mdiv.style.color = 'rgba(255,255,255,0.4)'
+          }
+        } catch(err){
+          console.warn("updateAppName error", err)
+        }
+      }
+
+      // update metadata
+      function updateMetadata(metaData){
+        try {
+          // retrieve current media information
+          const mediaInformation = playerManager.getMediaInformation()
+          // update its metadata
+          mediaInformation.metadata = metaData
+		  // update current media information
+          playerManager.setMediaInformation(mediaInformation)
+        } catch(err){
+          console.warn("updateMetadata error", err)
+        }
+      }
+
+      // Sender GET_PLAY request
+      playerManager.setMessageInterceptor(
+        cast.framework.messages.MessageType.PLAY, data => {
+          console.log("MSG:PLAY", data)
+          // update Player metadata with data.customData.metadata if any
+          if (data && data.customData && data.customData.metadata)
+            updateMetadata(data.customData.metadata)
+          return data
+        }
+      )
+
+      // Sender LOAD request
+      playerManager.setMessageInterceptor(
+        cast.framework.messages.MessageType.LOAD, data => {
+          console.log("MSG:LOAD", data)
+		 // update AppName with data.media.customData.deviceName if any
+          if (data && data.media && data.media.customData && data.media.customData.deviceName)
+            updateAppName(data.media.customData.deviceName)
+          return data
+        }
+      )
+
+      context.start();
+
+    </script>
+  </footer>
+</body>
+
+</html>