Local Overrides Sample: Add a Dropdown List of Custom Actions to Playback Controls

This script will add a dropdown list to the playback controls bar at the bottom of the video player, containing custom dropdown list items you can click to perform custom actions.

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

Modify the customActions array near the top of this script so the actions do something useful!

This script requires UI3-257 or newer for the "DropdownBoxes_Initializing" custom event, in order to hook into the dropdown box initialization code at the proper time.

ui3-local-overrides.js

// Custom Dropdown List in Playback Controls
(function ()
{
	function GetCustomCommands()
	{
		return [
			{
				label: 'Example Command A',
				action: function ()
				{
					toaster.Info('Clicked A');
				}
			},
			{
				label: 'Chat with Bing AI',
				action: function ()
				{
					window.open("https://www.bing.com/chat", "_blank");
				}
			}
		];
	}

	// Here is an icon for our button
	var icon_command = '<svg class="icon noflip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5,3C15.57,3,14,4.57,14,6.5V8h-4V6.5C10,4.57,8.43,3,6.5,3S3,4.57,3,6.5S4.57,10,6.5,10H8v4H6.5 C4.57,14,3,15.57,3,17.5S4.57,21,6.5,21s3.5-1.57,3.5-3.5V16h4v1.5c0,1.93,1.57,3.5,3.5,3.5s3.5-1.57,3.5-3.5S19.43,14,17.5,14H16 v-4h1.5c1.93,0,3.5-1.57,3.5-3.5S19.43,3,17.5,3L17.5,3z M16,8V6.5C16,5.67,16.67,5,17.5,5S19,5.67,19,6.5S18.33,8,17.5,8H16L16,8 z M6.5,8C5.67,8,5,7.33,5,6.5S5.67,5,6.5,5S8,5.67,8,6.5V8H6.5L6.5,8z M10,14v-4h4v4H10L10,14z M17.5,19c-0.83,0-1.5-0.67-1.5-1.5 V16h1.5c0.83,0,1.5,0.67,1.5,1.5S18.33,19,17.5,19L17.5,19z M6.5,19C5.67,19,5,18.33,5,17.5S5.67,16,6.5,16H8v1.5 C8,18.33,7.33,19,6.5,19L6.5,19z"/></svg>';

	// Here we create the button which will open the dropdown list
	var dropdownListId = 'ext_custom_action_dropdown';
	var buttonHtml = '<div id="customDropdownButton" name="' + dropdownListId + '" extendLeft="1" extendUp="1" class="pcButton rightSide dropdownTrigger" title="Custom Actions">' + icon_command + '</div>';

	// Here we add the button to the playback controls area just before the "Change Group" button.
	$('#changeGroupButton').before(buttonHtml);

	// Here we register our custom dropdown list with UI3's dropdown list system.
	BI_CustomEvent.AddListener("DropdownBoxes_Initializing", function (dropdownBoxes)
	{
		dropdownBoxes.listDefs[dropdownListId] = new DropdownListDefinition(dropdownListId,
			{
				onItemClick: function (item)
				{
					try
					{
						item.action();
					}
					catch (ex)
					{
						toaster.Error(ex);
					}
				}
				, rebuildItems: function ()
				{
					this.items = [];
					var customCommands = GetCustomCommands();
					for (var i = 0; i < customCommands.length; i++)
					{
						var command = customCommands[i];
						var ddlItem = new DropdownListItem(
							{
								text: command.label
								, id: i
								, selected: false
								, autoSetLabelText: false
							});
						ddlItem.action = command.action;
						this.items.push(ddlItem);
					}
				}
			});
		dropdownBoxes.listDefs[dropdownListId].rebuildItems();
	});
})();