modules/audio_processing/test/py_quality_assessment/quality_assessment/results.js - src - Git at Google

 // Copyright (c) 2017 The WebRTC project authors. All Rights Reserved.
 //
 // Use of this source code is governed by a BSD-style license
 // that can be found in the LICENSE file in the root of the source
 // tree. An additional intellectual property rights grant can be found
 // in the file PATENTS.  All contributing project authors may
 // be found in the AUTHORS file in the root of the source tree.

 /**
  * Opens the score stats inspector dialog.
  * @param {String} dialogId: identifier of the dialog to show.
  * @return {DOMElement} The dialog element that has been opened.
  */
 function openScoreStatsInspector(dialogId) {
   var dialog = document.getElementById(dialogId);
   dialog.showModal();
   return dialog;
 }

 /**
  * Closes the score stats inspector dialog.
  */
 function closeScoreStatsInspector() {
   var dialog = document.querySelector('dialog[open]');
   if (dialog == null)
     return;
   dialog.close();
 }

 /**
  * Audio inspector class.
  * @constructor
  */
 function AudioInspector() {
   console.debug('Creating an AudioInspector instance.');
   this.audioPlayer_ = new Audio();
   this.metadata_ = {};
   this.currentScore_ = null;
   this.audioInspector_ = null;
   this.snackbarContainer_ = document.querySelector('#snackbar');

   // Get base URL without anchors.
   this.baseUrl_ = window.location.href;
   var index = this.baseUrl_.indexOf('#');
   if (index > 0)
     this.baseUrl_ = this.baseUrl_.substr(0, index)
   console.info('Base URL set to "' + window.location.href + '".');

   window.event.stopPropagation();
   this.createTextAreasForCopy_();
   this.createAudioInspector_();
   this.initializeEventHandlers_();

   // When MDL is ready, parse the anchor (if any) to show the requested
   // experiment.
   var self = this;
   document.querySelectorAll('header a')[0].addEventListener(
       'mdl-componentupgraded', function() {
     if (!self.parseWindowAnchor()) {
       // If not experiment is requested, open the first section.
       console.info('No anchor parsing, opening the first section.');
       document.querySelectorAll('header a > span')[0].click();
     }
   });
 }

 /**
  * Parse the anchor in the window URL.
  * @return {bool} True if the parsing succeeded.
  */
 AudioInspector.prototype.parseWindowAnchor = function() {
   var index = location.href.indexOf('#');
   if (index == -1) {
     console.debug('No # found in the URL.');
     return false;
   }

   var anchor = location.href.substr(index - location.href.length + 1);
   console.info('Anchor changed: "' + anchor + '".');

   var parts = anchor.split('&');
   if (parts.length != 3) {
     console.info('Ignoring anchor with invalid number of fields.');
     return false;
   }

   var openDialog = document.querySelector('dialog[open]');
   try {
     // Open the requested dialog if not already open.
     if (!openDialog || openDialog.id != parts[1]) {
       !openDialog || openDialog.close();
       document.querySelectorAll('header a > span')[
           parseInt(parts[0].substr(1))].click();
       openDialog = openScoreStatsInspector(parts[1]);
     }

     // Trigger click on cell.
     var cell = openDialog.querySelector('td.' + parts[2]);
     cell.focus();
     cell.click();

     this.showNotification_('Experiment selected.');
     return true;
   } catch (e) {
     this.showNotification_('Cannot select experiment :(');
     console.error('Exception caught while selecting experiment: "' + e + '".');
   }

   return false;
 }

 /**
  * Set up the inspector for a new score.
  * @param {DOMElement} element: Element linked to the selected score.
  */
 AudioInspector.prototype.selectedScoreChange = function(element) {
   if (this.currentScore_ == element) { return; }
   if (this.currentScore_ != null) {
     this.currentScore_.classList.remove('selected-score');
   }
   this.currentScore_ = element;
   this.currentScore_.classList.add('selected-score');
   this.stopAudio();

   // Read metadata.
   var matches = element.querySelectorAll('input[type=hidden]');
   this.metadata_ = {};
   for (var index = 0; index < matches.length; ++index) {
     this.metadata_[matches[index].name] = matches[index].value;
   }

   // Show the audio inspector interface.
   var container = element.parentNode.parentNode.parentNode.parentNode;
   var audioInspectorPlaceholder = container.querySelector(
       '.audio-inspector-placeholder');
   this.moveInspector_(audioInspectorPlaceholder);
 };

 /**
  * Stop playing audio.
  */
 AudioInspector.prototype.stopAudio = function() {
   console.info('Pausing audio play out.');
   this.audioPlayer_.pause();
 };

 /**
  * Show a text message using the snackbar.
  */
 AudioInspector.prototype.showNotification_ = function(text) {
   try {
     this.snackbarContainer_.MaterialSnackbar.showSnackbar({
         message: text, timeout: 2000});
   } catch (e) {
     // Fallback to an alert.
     alert(text);
     console.warn('Cannot use snackbar: "' + e + '"');
   }
 }

 /**
  * Move the audio inspector DOM node into the given parent.
  * @param {DOMElement} newParentNode: New parent for the inspector.
  */
 AudioInspector.prototype.moveInspector_ = function(newParentNode) {
   newParentNode.appendChild(this.audioInspector_);
 };

 /**
  * Play audio file from url.
  * @param {string} metadataFieldName: Metadata field name.
  */
 AudioInspector.prototype.playAudio = function(metadataFieldName) {
   if (this.metadata_[metadataFieldName] == undefined) { return; }
   if (this.metadata_[metadataFieldName] == 'None') {
     alert('The selected stream was not used during the experiment.');
     return;
   }
   this.stopAudio();
   this.audioPlayer_.src = this.metadata_[metadataFieldName];
   console.debug('Audio source URL: "' + this.audioPlayer_.src + '"');
   this.audioPlayer_.play();
   console.info('Playing out audio.');
 };

 /**
  * Create hidden text areas to copy URLs.
  *
  * For each dialog, one text area is created since it is not possible to select
  * text on a text area outside of the active dialog.
  */
 AudioInspector.prototype.createTextAreasForCopy_ = function() {
   var self = this;
   document.querySelectorAll('dialog.mdl-dialog').forEach(function(element) {
     var textArea = document.createElement("textarea");
     textArea.classList.add('url-copy');
     textArea.style.position = 'fixed';
     textArea.style.bottom = 0;
     textArea.style.left = 0;
     textArea.style.width = '2em';
     textArea.style.height = '2em';
     textArea.style.border = 'none';
     textArea.style.outline = 'none';
     textArea.style.boxShadow = 'none';
     textArea.style.background = 'transparent';
     textArea.style.fontSize = '6px';
     element.appendChild(textArea);
   });
 }

 /**
  * Create audio inspector.
  */
 AudioInspector.prototype.createAudioInspector_ = function() {
   var buttonIndex = 0;
   function getButtonHtml(icon, toolTipText, caption, metadataFieldName) {
     var buttonId = 'audioInspectorButton' + buttonIndex++;
     html = caption == null ? '' : caption;
     html += '<button class="mdl-button mdl-js-button mdl-button--icon ' +
                 'mdl-js-ripple-effect" id="' + buttonId + '">' +
               '<i class="material-icons">' + icon + '</i>' +
               '<div class="mdl-tooltip" data-mdl-for="' + buttonId + '">' +
                  toolTipText +
               '</div>';
     if (metadataFieldName != null) {
       html += '<input type="hidden" value="' + metadataFieldName + '">'
     }
     html += '</button>'

     return html;
   }

   // TODO(alessiob): Add timeline and highlight current track by changing icon
   // color.

   this.audioInspector_ = document.createElement('div');
   this.audioInspector_.classList.add('audio-inspector');
   this.audioInspector_.innerHTML =
       '<div class="mdl-grid">' +
         '<div class="mdl-layout-spacer"></div>' +
         '<div class="mdl-cell mdl-cell--2-col">' +
           getButtonHtml('play_arrow', 'Simulated echo', 'E<sub>in</sub>',
                         'echo_filepath') +
         '</div>' +
         '<div class="mdl-cell mdl-cell--2-col">' +
           getButtonHtml('stop', 'Stop playing [S]', null, '__stop__') +
         '</div>' +
         '<div class="mdl-cell mdl-cell--2-col">' +
           getButtonHtml('play_arrow', 'Render stream', 'R<sub>in</sub>',
                         'render_filepath') +
         '</div>' +
         '<div class="mdl-layout-spacer"></div>' +
       '</div>' +
       '<div class="mdl-grid">' +
         '<div class="mdl-layout-spacer"></div>' +
         '<div class="mdl-cell mdl-cell--2-col">' +
           getButtonHtml('play_arrow', 'Capture stream (APM input) [1]',
                         'Y\'<sub>in</sub>', 'capture_filepath') +
         '</div>' +
         '<div class="mdl-cell mdl-cell--2-col"><strong>APM</strong></div>' +
         '<div class="mdl-cell mdl-cell--2-col">' +
           getButtonHtml('play_arrow', 'APM output [2]', 'Y<sub>out</sub>',
                         'apm_output_filepath') +
         '</div>' +
         '<div class="mdl-layout-spacer"></div>' +
       '</div>' +
       '<div class="mdl-grid">' +
         '<div class="mdl-layout-spacer"></div>' +
         '<div class="mdl-cell mdl-cell--2-col">' +
           getButtonHtml('play_arrow', 'Echo-free capture stream',
                         'Y<sub>in</sub>', 'echo_free_capture_filepath') +
         '</div>' +
         '<div class="mdl-cell mdl-cell--2-col">' +
           getButtonHtml('play_arrow', 'Clean capture stream',
                         'Y<sub>clean</sub>', 'clean_capture_input_filepath') +
         '</div>' +
         '<div class="mdl-cell mdl-cell--2-col">' +
           getButtonHtml('play_arrow', 'APM reference [3]', 'Y<sub>ref</sub>',
                         'apm_reference_filepath') +
         '</div>' +
         '<div class="mdl-layout-spacer"></div>' +
       '</div>';

   // Add an invisible node as initial container for the audio inspector.
   var parent = document.createElement('div');
   parent.style.display = 'none';
   this.moveInspector_(parent);
   document.body.appendChild(parent);
 };

 /**
  * Initialize event handlers.
  */
 AudioInspector.prototype.initializeEventHandlers_ = function() {
   var self = this;

   // Score cells.
   document.querySelectorAll('td.single-score-cell').forEach(function(element) {
     element.onclick = function() {
       self.selectedScoreChange(this);
     }
   });

   // Copy anchor URLs icons.
   if (document.queryCommandSupported('copy')) {
     document.querySelectorAll('td.single-score-cell button').forEach(
         function(element) {
       element.onclick = function() {
         // Find the text area in the dialog.
         var textArea = element.closest('dialog').querySelector(
             'textarea.url-copy');

         // Copy.
         textArea.value = self.baseUrl_ + '#' + element.getAttribute(
             'data-anchor');
         textArea.select();
         try {
           if (!document.execCommand('copy'))
             throw 'Copy returned false';
           self.showNotification_('Experiment URL copied.');
         } catch (e) {
           self.showNotification_('Cannot copy experiment URL :(');
           console.error(e);
         }
       }
     });
   } else {
     self.showNotification_(
         'The copy command is disabled. URL copy is not enabled.');
   }

   // Audio inspector buttons.
   this.audioInspector_.querySelectorAll('button').forEach(function(element) {
     var target = element.querySelector('input[type=hidden]');
     if (target == null) { return; }
     element.onclick = function() {
       if (target.value == '__stop__') {
         self.stopAudio();
       } else {
         self.playAudio(target.value);
       }
     };
   });

   // Dialog close handlers.
   var dialogs = document.querySelectorAll('dialog').forEach(function(element) {
     element.onclose = function() {
       self.stopAudio();
     }
   });

   // Keyboard shortcuts.
   window.onkeyup = function(e) {
     var key = e.keyCode ? e.keyCode : e.which;
     switch (key) {
       case 49:  // 1.
         self.playAudio('capture_filepath');
         break;
       case 50:  // 2.
         self.playAudio('apm_output_filepath');
         break;
       case 51:  // 3.
         self.playAudio('apm_reference_filepath');
         break;
       case 83:  // S.
       case 115:  // s.
         self.stopAudio();
         break;
     }
   };

   // Hash change.
   window.onhashchange = function(e) {
     self.parseWindowAnchor();
   }
 };
	// Copyright (c) 2017 The WebRTC project authors. All Rights Reserved.
	//
	// Use of this source code is governed by a BSD-style license
	// that can be found in the LICENSE file in the root of the source
	// tree. An additional intellectual property rights grant can be found
	// in the file PATENTS. All contributing project authors may
	// be found in the AUTHORS file in the root of the source tree.

	/**
	* Opens the score stats inspector dialog.
	* @param {String} dialogId: identifier of the dialog to show.
	* @return {DOMElement} The dialog element that has been opened.
	*/
	function openScoreStatsInspector(dialogId) {
	var dialog = document.getElementById(dialogId);
	dialog.showModal();
	return dialog;
	}

	/**
	* Closes the score stats inspector dialog.
	*/
	function closeScoreStatsInspector() {
	var dialog = document.querySelector('dialog[open]');
	if (dialog == null)
	return;
	dialog.close();
	}

	/**
	* Audio inspector class.
	* @constructor
	*/
	function AudioInspector() {
	console.debug('Creating an AudioInspector instance.');
	this.audioPlayer_ = new Audio();
	this.metadata_ = {};
	this.currentScore_ = null;
	this.audioInspector_ = null;
	this.snackbarContainer_ = document.querySelector('#snackbar');

	// Get base URL without anchors.
	this.baseUrl_ = window.location.href;
	var index = this.baseUrl_.indexOf('#');
	if (index > 0)
	this.baseUrl_ = this.baseUrl_.substr(0, index)
	console.info('Base URL set to "' + window.location.href + '".');

	window.event.stopPropagation();
	this.createTextAreasForCopy_();
	this.createAudioInspector_();
	this.initializeEventHandlers_();

	// When MDL is ready, parse the anchor (if any) to show the requested
	// experiment.
	var self = this;
	document.querySelectorAll('header a')[0].addEventListener(
	'mdl-componentupgraded', function() {
	if (!self.parseWindowAnchor()) {
	// If not experiment is requested, open the first section.
	console.info('No anchor parsing, opening the first section.');
	document.querySelectorAll('header a > span')[0].click();
	}
	});
	}

	/**
	* Parse the anchor in the window URL.
	* @return {bool} True if the parsing succeeded.
	*/
	AudioInspector.prototype.parseWindowAnchor = function() {
	var index = location.href.indexOf('#');
	if (index == -1) {
	console.debug('No # found in the URL.');
	return false;
	}

	var anchor = location.href.substr(index - location.href.length + 1);
	console.info('Anchor changed: "' + anchor + '".');

	var parts = anchor.split('&');
	if (parts.length != 3) {
	console.info('Ignoring anchor with invalid number of fields.');
	return false;
	}

	var openDialog = document.querySelector('dialog[open]');
	try {
	// Open the requested dialog if not already open.
	if (!openDialog \|\| openDialog.id != parts[1]) {
	!openDialog \|\| openDialog.close();
	document.querySelectorAll('header a > span')[
	parseInt(parts[0].substr(1))].click();
	openDialog = openScoreStatsInspector(parts[1]);
	}

	// Trigger click on cell.
	var cell = openDialog.querySelector('td.' + parts[2]);
	cell.focus();
	cell.click();

	this.showNotification_('Experiment selected.');
	return true;
	} catch (e) {
	this.showNotification_('Cannot select experiment :(');
	console.error('Exception caught while selecting experiment: "' + e + '".');
	}

	return false;
	}

	/**
	* Set up the inspector for a new score.
	* @param {DOMElement} element: Element linked to the selected score.
	*/
	AudioInspector.prototype.selectedScoreChange = function(element) {
	if (this.currentScore_ == element) { return; }
	if (this.currentScore_ != null) {
	this.currentScore_.classList.remove('selected-score');
	}
	this.currentScore_ = element;
	this.currentScore_.classList.add('selected-score');
	this.stopAudio();

	// Read metadata.
	var matches = element.querySelectorAll('input[type=hidden]');
	this.metadata_ = {};
	for (var index = 0; index < matches.length; ++index) {
	this.metadata_[matches[index].name] = matches[index].value;
	}

	// Show the audio inspector interface.
	var container = element.parentNode.parentNode.parentNode.parentNode;
	var audioInspectorPlaceholder = container.querySelector(
	'.audio-inspector-placeholder');
	this.moveInspector_(audioInspectorPlaceholder);
	};

	/**
	* Stop playing audio.
	*/
	AudioInspector.prototype.stopAudio = function() {
	console.info('Pausing audio play out.');
	this.audioPlayer_.pause();
	};

	/**
	* Show a text message using the snackbar.
	*/
	AudioInspector.prototype.showNotification_ = function(text) {
	try {
	this.snackbarContainer_.MaterialSnackbar.showSnackbar({
	message: text, timeout: 2000});
	} catch (e) {
	// Fallback to an alert.
	alert(text);
	console.warn('Cannot use snackbar: "' + e + '"');
	}
	}

	/**
	* Move the audio inspector DOM node into the given parent.
	* @param {DOMElement} newParentNode: New parent for the inspector.
	*/
	AudioInspector.prototype.moveInspector_ = function(newParentNode) {
	newParentNode.appendChild(this.audioInspector_);
	};

	/**
	* Play audio file from url.
	* @param {string} metadataFieldName: Metadata field name.
	*/
	AudioInspector.prototype.playAudio = function(metadataFieldName) {
	if (this.metadata_[metadataFieldName] == undefined) { return; }
	if (this.metadata_[metadataFieldName] == 'None') {
	alert('The selected stream was not used during the experiment.');
	return;
	}
	this.stopAudio();
	this.audioPlayer_.src = this.metadata_[metadataFieldName];
	console.debug('Audio source URL: "' + this.audioPlayer_.src + '"');
	this.audioPlayer_.play();
	console.info('Playing out audio.');
	};

	/**
	* Create hidden text areas to copy URLs.
	*
	* For each dialog, one text area is created since it is not possible to select
	* text on a text area outside of the active dialog.
	*/
	AudioInspector.prototype.createTextAreasForCopy_ = function() {
	var self = this;
	document.querySelectorAll('dialog.mdl-dialog').forEach(function(element) {
	var textArea = document.createElement("textarea");
	textArea.classList.add('url-copy');
	textArea.style.position = 'fixed';
	textArea.style.bottom = 0;
	textArea.style.left = 0;
	textArea.style.width = '2em';
	textArea.style.height = '2em';
	textArea.style.border = 'none';
	textArea.style.outline = 'none';
	textArea.style.boxShadow = 'none';
	textArea.style.background = 'transparent';
	textArea.style.fontSize = '6px';
	element.appendChild(textArea);
	});
	}

	/**
	* Create audio inspector.
	*/
	AudioInspector.prototype.createAudioInspector_ = function() {
	var buttonIndex = 0;
	function getButtonHtml(icon, toolTipText, caption, metadataFieldName) {
	var buttonId = 'audioInspectorButton' + buttonIndex++;
	html = caption == null ? '' : caption;
	html += '<button class="mdl-button mdl-js-button mdl-button--icon ' +
	'mdl-js-ripple-effect" id="' + buttonId + '">' +
	'<i class="material-icons">' + icon + '</i>' +
	'<div class="mdl-tooltip" data-mdl-for="' + buttonId + '">' +
	toolTipText +
	'</div>';
	if (metadataFieldName != null) {
	html += '<input type="hidden" value="' + metadataFieldName + '">'
	}
	html += '</button>'

	return html;
	}

	// TODO(alessiob): Add timeline and highlight current track by changing icon
	// color.

	this.audioInspector_ = document.createElement('div');
	this.audioInspector_.classList.add('audio-inspector');
	this.audioInspector_.innerHTML =
	'<div class="mdl-grid">' +
	'<div class="mdl-layout-spacer"></div>' +
	'<div class="mdl-cell mdl-cell--2-col">' +
	getButtonHtml('play_arrow', 'Simulated echo', 'E<sub>in</sub>',
	'echo_filepath') +
	'</div>' +
	'<div class="mdl-cell mdl-cell--2-col">' +
	getButtonHtml('stop', 'Stop playing [S]', null, '__stop__') +
	'</div>' +
	'<div class="mdl-cell mdl-cell--2-col">' +
	getButtonHtml('play_arrow', 'Render stream', 'R<sub>in</sub>',
	'render_filepath') +
	'</div>' +
	'<div class="mdl-layout-spacer"></div>' +
	'</div>' +
	'<div class="mdl-grid">' +
	'<div class="mdl-layout-spacer"></div>' +
	'<div class="mdl-cell mdl-cell--2-col">' +
	getButtonHtml('play_arrow', 'Capture stream (APM input) [1]',
	'Y\'<sub>in</sub>', 'capture_filepath') +
	'</div>' +
	'<div class="mdl-cell mdl-cell--2-col"><strong>APM</strong></div>' +
	'<div class="mdl-cell mdl-cell--2-col">' +
	getButtonHtml('play_arrow', 'APM output [2]', 'Y<sub>out</sub>',
	'apm_output_filepath') +
	'</div>' +
	'<div class="mdl-layout-spacer"></div>' +
	'</div>' +
	'<div class="mdl-grid">' +
	'<div class="mdl-layout-spacer"></div>' +
	'<div class="mdl-cell mdl-cell--2-col">' +
	getButtonHtml('play_arrow', 'Echo-free capture stream',
	'Y<sub>in</sub>', 'echo_free_capture_filepath') +
	'</div>' +
	'<div class="mdl-cell mdl-cell--2-col">' +
	getButtonHtml('play_arrow', 'Clean capture stream',
	'Y<sub>clean</sub>', 'clean_capture_input_filepath') +
	'</div>' +
	'<div class="mdl-cell mdl-cell--2-col">' +
	getButtonHtml('play_arrow', 'APM reference [3]', 'Y<sub>ref</sub>',
	'apm_reference_filepath') +
	'</div>' +
	'<div class="mdl-layout-spacer"></div>' +
	'</div>';

	// Add an invisible node as initial container for the audio inspector.
	var parent = document.createElement('div');
	parent.style.display = 'none';
	this.moveInspector_(parent);
	document.body.appendChild(parent);
	};

	/**
	* Initialize event handlers.
	*/
	AudioInspector.prototype.initializeEventHandlers_ = function() {
	var self = this;

	// Score cells.
	document.querySelectorAll('td.single-score-cell').forEach(function(element) {
	element.onclick = function() {
	self.selectedScoreChange(this);
	}
	});

	// Copy anchor URLs icons.
	if (document.queryCommandSupported('copy')) {
	document.querySelectorAll('td.single-score-cell button').forEach(
	function(element) {
	element.onclick = function() {
	// Find the text area in the dialog.
	var textArea = element.closest('dialog').querySelector(
	'textarea.url-copy');

	// Copy.
	textArea.value = self.baseUrl_ + '#' + element.getAttribute(
	'data-anchor');
	textArea.select();
	try {
	if (!document.execCommand('copy'))
	throw 'Copy returned false';
	self.showNotification_('Experiment URL copied.');
	} catch (e) {
	self.showNotification_('Cannot copy experiment URL :(');
	console.error(e);
	}
	}
	});
	} else {
	self.showNotification_(
	'The copy command is disabled. URL copy is not enabled.');
	}

	// Audio inspector buttons.
	this.audioInspector_.querySelectorAll('button').forEach(function(element) {
	var target = element.querySelector('input[type=hidden]');
	if (target == null) { return; }
	element.onclick = function() {
	if (target.value == '__stop__') {
	self.stopAudio();
	} else {
	self.playAudio(target.value);
	}
	};
	});

	// Dialog close handlers.
	var dialogs = document.querySelectorAll('dialog').forEach(function(element) {
	element.onclose = function() {
	self.stopAudio();
	}
	});

	// Keyboard shortcuts.
	window.onkeyup = function(e) {
	var key = e.keyCode ? e.keyCode : e.which;
	switch (key) {
	case 49: // 1.
	self.playAudio('capture_filepath');
	break;
	case 50: // 2.
	self.playAudio('apm_output_filepath');
	break;
	case 51: // 3.
	self.playAudio('apm_reference_filepath');
	break;
	case 83: // S.
	case 115: // s.
	self.stopAudio();
	break;
	}
	};

	// Hash change.
	window.onhashchange = function(e) {
	self.parseWindowAnchor();
	}
	};