Local Overrides Sample: Add Buttons to Playback Controls

This script will add some buttons to the playback controls bar below clips.

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

In this example script, we add buttons to skip back 10 frames, ahead 10 frames, back 1 second, and ahead 1 second. Additionally, hotkeys are created for the latter two.

ui3-local-overrides.js

addPlaybackControlsButton('Skip Back 1 Second',
	'<svg class="icon noflip"><use xlink:href="#svg_mio_replay"></use></svg><div class="centerText">1s</div>',
	function ()
	{
		if (!videoPlayer.Loading().image.isLive)
			videoPlayer.SeekByMs(-1000, false);
	});

addPlaybackControlsButton('Skip Ahead 1 Second',
	'<svg class="icon noflip invertv"><use xlink:href="#svg_mio_replay"></use></svg><div class="centerText">1s</div>',
	function ()
	{
		if (!videoPlayer.Loading().image.isLive)
			videoPlayer.SeekByMs(1000, false);
	});

addPlaybackControlsButton('Skip Back 10 Frames',
	'<svg class="icon noflip"><use xlink:href="#svg_mio_replay"></use></svg><div class="centerText">10</div>',
	function ()
	{
		if (!videoPlayer.Loading().image.isLive)
			videoPlayer.SeekByMs(-10 * videoPlayer.GetExpectedFrameIntervalOfCurrentCamera(), false);
	},
	{
		// This argument adds a hotkey to perform the button action
		binding: "0|0|0|78|N",
		id: "skip_back_10_frames"
	});

addPlaybackControlsButton('Skip Ahead 10 Frames',
	'<svg class="icon noflip invertv"><use xlink:href="#svg_mio_replay"></use></svg><div class="centerText">10</div>',
	function ()
	{
		if (!videoPlayer.Loading().image.isLive)
			videoPlayer.SeekByMs(10 * videoPlayer.GetExpectedFrameIntervalOfCurrentCamera(), false);
	},
	{
		// This argument adds a hotkey to perform the button action
		binding: "0|0|0|77|M",
		id: "skip_ahead_10_frames"
	});

function addPlaybackControlsButton(title, content, onclick, hotkey)
{
	var btn = $('<div class="pcButton hideWhenLive skipbtn" title="' + title + '">' + content + '</div>')
	btn.on('click', onclick);
	$("#volumeBar").before(btn);

	if (hotkey)
	{
		defaultSettings.push({
			key: "ui3_hotkey_custom_pc_btn_" + hotkey.id
			, value: hotkey.binding
			, hotkey: true
			, label: title
			, actionDown: onclick
			, category: "Hotkeys"
		});
	}
}