-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (105 loc) · 4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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>