host/frontend/webrtc/client/js/controls.js - device/google/cuttlefish - Git at Google

 /*
  * Copyright (C) 2021 The Android Open Source Project
  *
  * 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.
  */

 // Creates a "toggle control", which is a stylized checkbox with an icon. The
 // onToggleCb callback is called every time the control changes state with the
 // new toggle position (true for ON) and is expected to return a promise of the
 // new toggle position which can resolve to the opposite position of the one
 // received if there was error.
 function createToggleControl(elm, iconName, onToggleCb, initialState = false) {
   let icon = document.createElement('span');
   icon.classList.add('toggle-control-icon');
   icon.classList.add('material-icons-outlined');
   if (iconName) {
     icon.appendChild(document.createTextNode(iconName));
   }
   elm.appendChild(icon);
   let toggle = document.createElement('label');
   toggle.classList.add('toggle-control-switch');
   let input = document.createElement('input');
   input.type = 'checkbox';
   input.checked = !!initialState;
   input.onchange = e => {
     let nextPr = onToggleCb(e.target.checked);
     if (nextPr && 'then' in nextPr) {
       nextPr.then(checked => {
         e.target.checked = !!checked;
       });
     }
   };
   toggle.appendChild(input);
   let slider = document.createElement('span');
   slider.classList.add('toggle-control-slider');
   toggle.appendChild(slider);
   elm.classList.add('toggle-control');
   elm.appendChild(toggle);
   return {
     // Sets the state of the toggle control. This only affects the
     // visible state of the control in the UI, it doesn't affect the
     // state of the underlying resources. It's most useful to make
     // changes of said resources visible to the user.
     Set: checked => input.checked = !!checked,
   };
 }

 function createButtonListener(button_id_class, func,
   deviceConnection, listener) {
   let buttons = [];
   let ele = document.getElementById(button_id_class);
   if (ele != null) {
     buttons.push(ele);
   } else {
     buttons = document.getElementsByClassName(button_id_class);
   }
   for (var button of buttons) {
     if (func != null) {
       button.onclick = func;
     }
     button.addEventListener('mousedown', listener);
   }
 }

 function createInputListener(input_id, func, listener) {
   input = document.getElementById(input_id);
   if (func != null) {
     input.oninput = func;
   }
   input.addEventListener('input', listener);
 }

 function validateMacAddress(val) {
   var regex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
   return (regex.test(val));
 }

 function validateMacWrapper() {
   let type = document.getElementById('bluetooth-wizard-type').value;
   let button = document.getElementById("bluetooth-wizard-device");
   let macField = document.getElementById('bluetooth-wizard-mac');
   if (this.id == 'bluetooth-wizard-type') {
     if (type == "remote_loopback") {
       button.disabled = false;
       macField.setCustomValidity('');
       macField.disabled = true;
       macField.required = false;
       macField.placeholder = 'N/A';
       macField.value = '';
       return;
     }
   }
   macField.disabled = false;
   macField.required = true;
   macField.placeholder = 'Device MAC';
   if (validateMacAddress($(macField).val())) {
     button.disabled = false;
     macField.setCustomValidity('');
   } else {
     button.disabled = true;
     macField.setCustomValidity('MAC address invalid');
   }
 }

 $('[validate-mac]').bind('input', validateMacWrapper);
 $('[validate-mac]').bind('select', validateMacWrapper);

 function parseDevice(device) {
   let id, name, mac;
   var regex = /([0-9]+):([^@ ]*)(@(([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})))?/;
   if (regex.test(device)) {
     let regexMatches = device.match(regex);
     id = regexMatches[1];
     name = regexMatches[2];
     mac = regexMatches[4];
   }
   if (mac === undefined) {
     mac = "";
   }
   return [id, name, mac];
 }

 function btUpdateAdded(devices) {
   let deviceArr = devices.split('\r\n');
   let [id, name, mac] = parseDevice(deviceArr[0]);
   if (name) {
     let div = document.getElementById('bluetooth-wizard-confirm').getElementsByClassName('bluetooth-text')[1];
     div.innerHTML = "";
     div.innerHTML += "<p>Name: <b>" + id + "</b></p>";
     div.innerHTML += "<p>Type: <b>" + name + "</b></p>";
     div.innerHTML += "<p>MAC Addr: <b>" + mac + "</b></p>";
     return true;
   }
   return false;
 }

 function parsePhy(phy) {
   let id = phy.substring(0, phy.indexOf(":"));
   phy = phy.substring(phy.indexOf(":") + 1);
   let name = phy.substring(0, phy.indexOf(":"));
   let devices = phy.substring(phy.indexOf(":") + 1);
   return [id, name, devices];
 }

 function btParsePhys(phys) {
   if (phys.indexOf("Phys:") < 0) {
     return null;
   }
   let phyDict = {};
   phys = phys.split('Phys:')[1];
   let phyArr = phys.split('\r\n');
   for (var phy of phyArr.slice(1)) {
     phy = phy.trim();
     if (phy.length == 0 || phy.indexOf("deleted") >= 0) {
       continue;
     }
     let [id, name, devices] = parsePhy(phy);
     phyDict[name] = id;
   }
   return phyDict;
 }

 function btUpdateDeviceList(devices) {
   let deviceArr = devices.split('\r\n');
   if (deviceArr[0].indexOf("Devices:") >= 0) {
     let div = document.getElementById('bluetooth-list').getElementsByClassName('bluetooth-text')[0];
     div.innerHTML = "";
     let count = 0;
     for (var device of deviceArr.slice(1)) {
       if (device.indexOf("Phys:") >= 0) {
         break;
       }
       count++;
       if (device.indexOf("deleted") >= 0) {
         continue;
       }
       let [id, name, mac] = parseDevice(device);
       let innerDiv = '<div><button title="Delete" data-device-id="'
       innerDiv += id;
       innerDiv += '" class="bluetooth-list-trash material-icons">delete</button>';
       innerDiv += name;
       if (mac) {
         innerDiv += " | "
         innerDiv += mac;
       }
       innerDiv += '</div>';
       div.innerHTML += innerDiv;
     }
     return count;
   }
   return -1;
 }

 function createControlPanelButton(
     command, title, icon_name, listener,
     parent_id = 'control-panel-default-buttons') {
   let button = document.createElement('button');
   document.getElementById(parent_id).appendChild(button);
   button.title = title;
   button.dataset.command = command;
   button.disabled = true;
   // Capture mousedown/up/out commands instead of click to enable
   // hold detection. mouseout is used to catch if the user moves the
   // mouse outside the button while holding down.
   button.addEventListener('mousedown', listener);
   button.addEventListener('mouseup', listener);
   button.addEventListener('mouseout', listener);
   // Set the button image using Material Design icons.
   // See http://google.github.io/material-design-icons
   // and https://material.io/resources/icons
   button.classList.add('material-icons');
   button.innerHTML = icon_name;
   return button;
 }

 function positionModal(button_id, modal_id) {
   const modalButton = document.getElementById(button_id);
   const modalDiv = document.getElementById(modal_id);

   // Position the modal to the right of the show modal button.
   modalDiv.style.top = modalButton.offsetTop;
   modalDiv.style.left = modalButton.offsetWidth + 30;
 }

 function createModalButton(button_id, modal_id, close_id, hide_id) {
   const modalButton = document.getElementById(button_id);
   const modalDiv = document.getElementById(modal_id);
   const modalHeader = modalDiv.querySelector('.modal-header');
   const modalClose = document.getElementById(close_id);
   const modalDivHide = document.getElementById(hide_id);

   positionModal(button_id, modal_id);

   function showHideModal(show) {
     if (show) {
       modalButton.classList.add('modal-button-opened')
       modalDiv.style.display = 'block';
     } else {
       modalButton.classList.remove('modal-button-opened')
       modalDiv.style.display = 'none';
     }
     if (modalDivHide != null) {
       modalDivHide.style.display = 'none';
     }
   }
   // Allow the show modal button to toggle the modal,
   modalButton.addEventListener(
       'click', evt => showHideModal(modalDiv.style.display != 'block'));
   // but the close button always closes.
   modalClose.addEventListener('click', evt => showHideModal(false));

   // Allow the modal to be dragged by the header.
   let modalOffsets = {
     midDrag: false,
     mouseDownOffsetX: null,
     mouseDownOffsetY: null,
   };
   modalHeader.addEventListener('mousedown', evt => {
     modalOffsets.midDrag = true;
     // Store the offset of the mouse location from the
     // modal's current location.
     modalOffsets.mouseDownOffsetX = parseInt(modalDiv.style.left) - evt.clientX;
     modalOffsets.mouseDownOffsetY = parseInt(modalDiv.style.top) - evt.clientY;
   });
   modalHeader.addEventListener('mousemove', evt => {
     let offsets = modalOffsets;
     if (offsets.midDrag) {
       // Move the modal to the mouse location plus the
       // offset calculated on the initial mouse-down.
       modalDiv.style.left = evt.clientX + offsets.mouseDownOffsetX;
       modalDiv.style.top = evt.clientY + offsets.mouseDownOffsetY;
     }
   });
   document.addEventListener('mouseup', evt => {
     modalOffsets.midDrag = false;
   });
 }

 function cmdConsole(consoleViewName, consoleInputName) {
   let consoleView = document.getElementById(consoleViewName);

   let addString =
       function(str) {
     consoleView.value += str;
     consoleView.scrollTop = consoleView.scrollHeight;
   }

   let addLine =
       function(line) {
     addString(line + '\r\n');
   }

   let commandCallbacks = [];

   let addCommandListener =
       function(f) {
     commandCallbacks.push(f);
   }

   let onCommand =
       function(cmd) {
     cmd = cmd.trim();

     if (cmd.length == 0) return;

     commandCallbacks.forEach(f => {
       f(cmd);
     })
   }

   addCommandListener(cmd => addLine('>> ' + cmd));

   let consoleInput = document.getElementById(consoleInputName);

   consoleInput.addEventListener('keydown', e => {
     if ((e.key && e.key == 'Enter') || e.keyCode == 13) {
       let command = e.target.value;

       e.target.value = '';

       onCommand(command);
     }
   });

   return {
     consoleView: consoleView,
     consoleInput: consoleInput,
     addLine: addLine,
     addString: addString,
     addCommandListener: addCommandListener,
   };
 }
	/*
	* Copyright (C) 2021 The Android Open Source Project
	*
	* 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.
	*/

	// Creates a "toggle control", which is a stylized checkbox with an icon. The
	// onToggleCb callback is called every time the control changes state with the
	// new toggle position (true for ON) and is expected to return a promise of the
	// new toggle position which can resolve to the opposite position of the one
	// received if there was error.
	function createToggleControl(elm, iconName, onToggleCb, initialState = false) {
	let icon = document.createElement('span');
	icon.classList.add('toggle-control-icon');
	icon.classList.add('material-icons-outlined');
	if (iconName) {
	icon.appendChild(document.createTextNode(iconName));
	}
	elm.appendChild(icon);
	let toggle = document.createElement('label');
	toggle.classList.add('toggle-control-switch');
	let input = document.createElement('input');
	input.type = 'checkbox';
	input.checked = !!initialState;
	input.onchange = e => {
	let nextPr = onToggleCb(e.target.checked);
	if (nextPr && 'then' in nextPr) {
	nextPr.then(checked => {
	e.target.checked = !!checked;
	});
	}
	};
	toggle.appendChild(input);
	let slider = document.createElement('span');
	slider.classList.add('toggle-control-slider');
	toggle.appendChild(slider);
	elm.classList.add('toggle-control');
	elm.appendChild(toggle);
	return {
	// Sets the state of the toggle control. This only affects the
	// visible state of the control in the UI, it doesn't affect the
	// state of the underlying resources. It's most useful to make
	// changes of said resources visible to the user.
	Set: checked => input.checked = !!checked,
	};
	}

	function createButtonListener(button_id_class, func,
	deviceConnection, listener) {
	let buttons = [];
	let ele = document.getElementById(button_id_class);
	if (ele != null) {
	buttons.push(ele);
	} else {
	buttons = document.getElementsByClassName(button_id_class);
	}
	for (var button of buttons) {
	if (func != null) {
	button.onclick = func;
	}
	button.addEventListener('mousedown', listener);
	}
	}

	function createInputListener(input_id, func, listener) {
	input = document.getElementById(input_id);
	if (func != null) {
	input.oninput = func;
	}
	input.addEventListener('input', listener);
	}

	function validateMacAddress(val) {
	var regex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
	return (regex.test(val));
	}

	function validateMacWrapper() {
	let type = document.getElementById('bluetooth-wizard-type').value;
	let button = document.getElementById("bluetooth-wizard-device");
	let macField = document.getElementById('bluetooth-wizard-mac');
	if (this.id == 'bluetooth-wizard-type') {
	if (type == "remote_loopback") {
	button.disabled = false;
	macField.setCustomValidity('');
	macField.disabled = true;
	macField.required = false;
	macField.placeholder = 'N/A';
	macField.value = '';
	return;
	}
	}
	macField.disabled = false;
	macField.required = true;
	macField.placeholder = 'Device MAC';
	if (validateMacAddress($(macField).val())) {
	button.disabled = false;
	macField.setCustomValidity('');
	} else {
	button.disabled = true;
	macField.setCustomValidity('MAC address invalid');
	}
	}

	$('[validate-mac]').bind('input', validateMacWrapper);
	$('[validate-mac]').bind('select', validateMacWrapper);

	function parseDevice(device) {
	let id, name, mac;
	var regex = /([0-9]+):([^@ ]*)(@(([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})))?/;
	if (regex.test(device)) {
	let regexMatches = device.match(regex);
	id = regexMatches[1];
	name = regexMatches[2];
	mac = regexMatches[4];
	}
	if (mac === undefined) {
	mac = "";
	}
	return [id, name, mac];
	}

	function btUpdateAdded(devices) {
	let deviceArr = devices.split('\r\n');
	let [id, name, mac] = parseDevice(deviceArr[0]);
	if (name) {
	let div = document.getElementById('bluetooth-wizard-confirm').getElementsByClassName('bluetooth-text')[1];
	div.innerHTML = "";
	div.innerHTML += "<p>Name: <b>" + id + "</b></p>";
	div.innerHTML += "<p>Type: <b>" + name + "</b></p>";
	div.innerHTML += "<p>MAC Addr: <b>" + mac + "</b></p>";
	return true;
	}
	return false;
	}

	function parsePhy(phy) {
	let id = phy.substring(0, phy.indexOf(":"));
	phy = phy.substring(phy.indexOf(":") + 1);
	let name = phy.substring(0, phy.indexOf(":"));
	let devices = phy.substring(phy.indexOf(":") + 1);
	return [id, name, devices];
	}

	function btParsePhys(phys) {
	if (phys.indexOf("Phys:") < 0) {
	return null;
	}
	let phyDict = {};
	phys = phys.split('Phys:')[1];
	let phyArr = phys.split('\r\n');
	for (var phy of phyArr.slice(1)) {
	phy = phy.trim();
	if (phy.length == 0 \|\| phy.indexOf("deleted") >= 0) {
	continue;
	}
	let [id, name, devices] = parsePhy(phy);
	phyDict[name] = id;
	}
	return phyDict;
	}

	function btUpdateDeviceList(devices) {
	let deviceArr = devices.split('\r\n');
	if (deviceArr[0].indexOf("Devices:") >= 0) {
	let div = document.getElementById('bluetooth-list').getElementsByClassName('bluetooth-text')[0];
	div.innerHTML = "";
	let count = 0;
	for (var device of deviceArr.slice(1)) {
	if (device.indexOf("Phys:") >= 0) {
	break;
	}
	count++;
	if (device.indexOf("deleted") >= 0) {
	continue;
	}
	let [id, name, mac] = parseDevice(device);
	let innerDiv = '<div><button title="Delete" data-device-id="'
	innerDiv += id;
	innerDiv += '" class="bluetooth-list-trash material-icons">delete</button>';
	innerDiv += name;
	if (mac) {
	innerDiv += " \| "
	innerDiv += mac;
	}
	innerDiv += '</div>';
	div.innerHTML += innerDiv;
	}
	return count;
	}
	return -1;
	}

	function createControlPanelButton(
	command, title, icon_name, listener,
	parent_id = 'control-panel-default-buttons') {
	let button = document.createElement('button');
	document.getElementById(parent_id).appendChild(button);
	button.title = title;
	button.dataset.command = command;
	button.disabled = true;
	// Capture mousedown/up/out commands instead of click to enable
	// hold detection. mouseout is used to catch if the user moves the
	// mouse outside the button while holding down.
	button.addEventListener('mousedown', listener);
	button.addEventListener('mouseup', listener);
	button.addEventListener('mouseout', listener);
	// Set the button image using Material Design icons.
	// See http://google.github.io/material-design-icons
	// and https://material.io/resources/icons
	button.classList.add('material-icons');
	button.innerHTML = icon_name;
	return button;
	}

	function positionModal(button_id, modal_id) {
	const modalButton = document.getElementById(button_id);
	const modalDiv = document.getElementById(modal_id);

	// Position the modal to the right of the show modal button.
	modalDiv.style.top = modalButton.offsetTop;
	modalDiv.style.left = modalButton.offsetWidth + 30;
	}

	function createModalButton(button_id, modal_id, close_id, hide_id) {
	const modalButton = document.getElementById(button_id);
	const modalDiv = document.getElementById(modal_id);
	const modalHeader = modalDiv.querySelector('.modal-header');
	const modalClose = document.getElementById(close_id);
	const modalDivHide = document.getElementById(hide_id);

	positionModal(button_id, modal_id);

	function showHideModal(show) {
	if (show) {
	modalButton.classList.add('modal-button-opened')
	modalDiv.style.display = 'block';
	} else {
	modalButton.classList.remove('modal-button-opened')
	modalDiv.style.display = 'none';
	}
	if (modalDivHide != null) {
	modalDivHide.style.display = 'none';
	}
	}
	// Allow the show modal button to toggle the modal,
	modalButton.addEventListener(
	'click', evt => showHideModal(modalDiv.style.display != 'block'));
	// but the close button always closes.
	modalClose.addEventListener('click', evt => showHideModal(false));

	// Allow the modal to be dragged by the header.
	let modalOffsets = {
	midDrag: false,
	mouseDownOffsetX: null,
	mouseDownOffsetY: null,
	};
	modalHeader.addEventListener('mousedown', evt => {
	modalOffsets.midDrag = true;
	// Store the offset of the mouse location from the
	// modal's current location.
	modalOffsets.mouseDownOffsetX = parseInt(modalDiv.style.left) - evt.clientX;
	modalOffsets.mouseDownOffsetY = parseInt(modalDiv.style.top) - evt.clientY;
	});
	modalHeader.addEventListener('mousemove', evt => {
	let offsets = modalOffsets;
	if (offsets.midDrag) {
	// Move the modal to the mouse location plus the
	// offset calculated on the initial mouse-down.
	modalDiv.style.left = evt.clientX + offsets.mouseDownOffsetX;
	modalDiv.style.top = evt.clientY + offsets.mouseDownOffsetY;
	}
	});
	document.addEventListener('mouseup', evt => {
	modalOffsets.midDrag = false;
	});
	}

	function cmdConsole(consoleViewName, consoleInputName) {
	let consoleView = document.getElementById(consoleViewName);

	let addString =
	function(str) {
	consoleView.value += str;
	consoleView.scrollTop = consoleView.scrollHeight;
	}

	let addLine =
	function(line) {
	addString(line + '\r\n');
	}

	let commandCallbacks = [];

	let addCommandListener =
	function(f) {
	commandCallbacks.push(f);
	}

	let onCommand =
	function(cmd) {
	cmd = cmd.trim();

	if (cmd.length == 0) return;

	commandCallbacks.forEach(f => {
	f(cmd);
	})
	}

	addCommandListener(cmd => addLine('>> ' + cmd));

	let consoleInput = document.getElementById(consoleInputName);

	consoleInput.addEventListener('keydown', e => {
	if ((e.key && e.key == 'Enter') \|\| e.keyCode == 13) {
	let command = e.target.value;

	e.target.value = '';

	onCommand(command);
	}
	});

	return {
	consoleView: consoleView,
	consoleInput: consoleInput,
	addLine: addLine,
	addString: addString,
	addCommandListener: addCommandListener,
	};
	}