class WebRTCStreamerSelectorElement extends HTMLElement {
|
static get observedAttributes() {
|
return ['selected', 'webrtcurl'];
|
}
|
constructor() {
|
super();
|
this.shadowDOM = this.attachShadow({mode: 'open'});
|
this.shadowDOM.innerHTML = `
|
<style>@import "styles.css"</style>
|
<h2><select id="mediaList"></select></h2>
|
`;
|
}
|
connectedCallback() {
|
this.fillList();
|
}
|
|
attributeChangedCallback(attrName, oldVal, newVal) {
|
if (attrName === "selected") {
|
this.selected = newVal;
|
let mediaList = this.shadowDOM.getElementById("mediaList");
|
for (const option of mediaList.getElementsByTagName('option')) {
|
if (option === newVal) {
|
option.selected = true;
|
}
|
}
|
|
} else if (attrName === "webrtcurl") {
|
this.fillList();
|
}
|
}
|
|
fillList() {
|
let mediaList = this.shadowDOM.getElementById("mediaList");
|
const webrtcurl = this.getAttribute("webrtcurl") || "";
|
fetch(webrtcurl + "/api/getMediaList").then(r => r.json()).then( (response) => {
|
response.forEach( (media) => {
|
var newOption = document.createElement("option");
|
newOption.text = media.video;
|
newOption.value = JSON.stringify(media);
|
if (this.selected && (this.selected === newOption.text) ) {
|
newOption.selected = true;
|
}
|
mediaList.appendChild(newOption);
|
});
|
|
if (mediaList.selectedOptions.length > 0) {
|
this.dispatchEvent(new CustomEvent('change', {
|
detail: {
|
url: mediaList.selectedOptions[0].value,
|
}
|
}));
|
}
|
});
|
|
mediaList.onchange = (event) => {
|
this.dispatchEvent(new CustomEvent('change', {
|
detail: {
|
url: mediaList.selectedOptions[0].value,
|
}
|
}));
|
}
|
}
|
}
|
|
customElements.define('webrtc-streamer-selector', WebRTCStreamerSelectorElement);
|
