Local Overrides Sample: Mute Events Button in Top Bar

This sample creates a button in the top bar to mute and unmute event-triggered audio.

To learn more about ui3-local-overrides, see: Local Overrides Scripts and Styles

Put in ui3-local-overrides.js

// UI3-mute-events-btn sample
var $eventMuteIcon = $('<div id="mute_events_btn" class="topbar_right_floating icon"><svg class="icon"><use xlink:href="#svg_x5F_Volume"></use></svg></div>');
var ext_previous_event_sound_volume = 100;
$eventMuteIcon.on('click', function ()
{
	if (settings.ui3_eventSoundVolume <= 0)
	{
		settings.ui3_eventSoundVolume = ext_previous_event_sound_volume;
		$eventMuteIcon.css('color', '');
		$eventMuteIcon.attr('title', 'Mute events');
	}
	else
	{
		ext_previous_event_sound_volume = settings.ui3_eventSoundVolume;
		settings.ui3_eventSoundVolume = 0;
		$eventMuteIcon.css('color', 'red');
		$eventMuteIcon.attr('title', 'Unmute events');
	}
});
$("#save_snapshot_btn").after($eventMuteIcon);
// END UI3-mute-events-btn sample

Put in ui3-local-overrides.css

/* UI3-mute-events-btn sample */
#mute_events_btn
{
	display: inline-block;
	width: 30px;
	height: 30px;
	padding: 17px 13px;
}

.sizeMedium #mute_events_btn
{
	width: 24px;
	height: 24px;
	padding: 14px 10px;
}

.sizeSmall #mute_events_btn
{
	width: 20px;
	height: 20px;
	padding: 10px 8px;
}
/* END UI3-mute-events-btn sample */