Version 76:

* Added an option to General Settings to move the side bar between the left and right sides.
* Brightened the clip playback seek bar's blue color (now matches Blue Iris 5 console).
* Tweaked shadows under clip player top overlay to improve readability.

ui3.htm

@@ -42,7 +42,7 @@
 		};
 	</script>
 	<script type="text/javascript">
-		var ui_version = "75";
+		var ui_version = "76";
 		var bi_version = "%%VERSION%%";
 		var combined_version = ui_version + "-" + bi_version;
 		//if (!!navigator.userAgent.match(/ Android /))
@@ -118,7 +118,7 @@
 			</div>
 		</div>
 	</div>
-	<div id="layouttop" class="resizable">
+	<div id="layouttop">
 		<div id="topbar_vertical_align_helper"></div>
 		<div id="systemnamewrapper" onclick="systemNameButtonClick()"><span id="systemname">%%SYSNAME%%</span></div>
 		<div class="topbar_tab selected" name="live" id="topbar_tab_live"><span class="topbar_tab_label">Live View</span></div>
@@ -128,7 +128,7 @@
 		<div id="btn_main_menu" class="topbar_right_floating icon" name="mainMenu" extendLeft="1"><svg class="icon"><use xlink:href="#svg_x5F_Menu"></use></svg></div>
 		<a id="save_snapshot_btn" class="topbar_right_floating icon" href="javascript:void(0)" onclick="saveSnapshot()" target="_blank"><svg class="icon"><use xlink:href="#svg_x5F_Snapshot"></use></svg></a>
 	</div>
-	<div id="layoutleft" class="resizable">
+	<div id="layoutleft">
 		<div id="layoutleftLive">
 			<div id="layoutleftLiveScrollableWrapper">
 				<div id="layoutleftLiveScrollable">
@@ -441,7 +441,7 @@
 			GitHub: <a target="_blank" href="https://github.com/bp2008/ui3">https://github.com/bp2008/ui3</a>
 		</div>
 	</div>
-	<div id="datePickerDialog" class="resizable" style="display: none;">
+	<div id="datePickerDialog" style="display: none;">
 		<div style="margin-bottom:15px;">Filter by start and end dates below:</div>
 		<div class="calendarWrapper">
 			<div class="calendarTitle">Start Date</div>

ui3/ui3.css

@@ -17,6 +17,7 @@
 	--audio-loading-color: #F0F000;
 	--audio-error-color: #F00000;
 	--audio-idle-color: var(--button-color);
+	--seek-bar-color: #2C82C9;
 	/* Dropdowns, Calendar, SquareButtons */
 	--uicontrol-bg-color: #101010;
 	--uicontrol-hover-bg-color: #303030;
@@ -275,6 +276,18 @@ body, #layouttop, #layoutleft, #layoutbody, #layoutbottom, .unselectable
 	bottom: 0px;
 	overflow: hidden;
 }
+
+.sideBarRight #layoutleft
+{
+	right: 0px;
+}
+
+.sideBarRight #layoutbody,
+.sideBarRight #layoutbottom
+{
+	left: 0px;
+}
+
 /* Top Bar / Tabs */
 #topbar_vertical_align_helper
 {
@@ -327,6 +340,11 @@ body, #layouttop, #layoutleft, #layoutbody, #layoutbottom, .unselectable
 		cursor: pointer;
 	}
 
+.sideBarRight #systemnamewrapper
+{
+	float: right;
+}
+
 .topbar_tab
 {
 	height: 56px;
@@ -3122,7 +3140,7 @@ body + div
 	display: inline-block;
 	width: 0px;
 	height: 100%;
-	background-color: var(--main-highlight-color);
+	background-color: var(--seek-bar-color);
 }
 
 #seekBarHighlight
@@ -3185,6 +3203,7 @@ body + div
 	text-overflow: ellipsis;
 	color: #EEEEEE;
 	width: 100%;
+	display: flex;
 }
 
 .sizeSmall #playbackHeader
@@ -3197,14 +3216,18 @@ body + div
 	height: 54px;
 }
 
+.sideBarRight #playbackHeader
+{
+	flex-direction: row-reverse;
+}
+
 #closeClipLeft
 {
-	display: inline-block;
-	vertical-align: top;
 	margin: 12px 16px;
 	width: 32px;
 	height: 32px;
 	cursor: pointer;
+	filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
 }
 
 	#closeClipLeft:hover
@@ -3233,11 +3256,10 @@ body + div
 
 #clipNameHeading
 {
-	display: inline-block;
-	vertical-align: top;
+	flex: 1 1 auto;
 	font-size: 24px;
 	line-height: 42px;
-	text-shadow: 0px 0px 7px rgba(0,0,0,0.5);
+	text-shadow: 2px 2px 2px rgba(0,0,0,1);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	padding-right: 20px;
@@ -3248,25 +3270,25 @@ body + div
 {
 	font-size: 18px;
 	line-height: 32px;
-	text-shadow: 0px 0px 6px rgba(0,0,0,0.5);
 }
 
 .sizeSmall #clipNameHeading
 {
 	font-size: 12px;
 	line-height: 20px;
-	text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
 }
 
 .sizeSmaller #clipNameHeading
 {
 	font-size: 10px;
 	line-height: 16px;
-	text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
 }
 
+.sideBarRight #clipNameHeading
+{
+	text-align: right;
+}
 /* About / Login Dialogs */
-
 .monospace
 {
 	font-family: Consolas, monospace;

ui3/ui3.js

@@ -445,6 +445,7 @@ var togglableUIFeatures =
 ///////////////////////////////////////////////////////////////
 
 // TODO: Expandable clip list. ("Show more clips")
+// TODO: Option to move clip list to right side.  Place in context menu?  Options panel?  Both?
 
 ///////////////////////////////////////////////////////////////
 // Low priority notes /////////////////////////////////////////
@@ -724,6 +725,15 @@ var defaultSettings =
 			, onChange: OnChange_ui3_preferred_ui_scale
 			, category: "General Settings"
 		}
+		, {
+			key: "ui3_sideBarPosition"
+			, value: "Left"
+			, inputType: "select"
+			, options: ["Left", "Right"]
+			, label: "Side Bar Position"
+			, onChange: OnChange_ui3_sideBarPosition
+			, category: "General Settings"
+		}
 		, {
 			key: "ui3_time24hour"
 			, value: "0"
@@ -2178,6 +2188,7 @@ $(function ()
 	OnChange_ui3_pc_seek_1frame_buttons();
 	OnChange_ui3_extra_playback_controls_padding();
 	OnChange_ui3_ir_brightness_contrast();
+	OnChange_ui3_sideBarPosition();
 
 	// This makes it impossible to text-select or drag certain UI elements.
 	makeUnselectable($("#layouttop, #layoutleft, #layoutdivider, #layoutbody"));
@@ -2273,6 +2284,7 @@ function resized()
 {
 	var windowW = $(window).width();
 	var windowH = $(window).height();
+	var sideBarRight = settings.ui3_sideBarPosition === "Right";
 
 	// Adjust UI style presets based on window size
 	uiSizeHelper.SetMostAppropriateSize(windowW, windowH);
@@ -2350,7 +2362,10 @@ function resized()
 
 	// Size layoutbody
 	layoutbody.css("top", topH + "px");
-	layoutbody.css("left", leftW + "px");
+	if (sideBarRight)
+		layoutbody.css("left", "0px");
+	else
+		layoutbody.css("left", leftW + "px");
 	var bodyW = windowW - leftW;
 	var bodyH = windowH - topH - botH;
 	layoutbody.css("width", bodyW + "px");
@@ -2382,7 +2397,10 @@ function resized()
 	playbackHeader.resized();
 
 	// Size layoutbottom
-	layoutbottom.css("left", leftW + "px");
+	if (sideBarRight)
+		layoutbottom.css("left", "0px");
+	else
+		layoutbottom.css("left", leftW + "px");
 	layoutbottom.css("width", windowW - leftW + "px");
 
 	clipTimeline.Resized();
@@ -3223,7 +3241,7 @@ function LeftBarBooleans()
 function PtzButtons()
 {
 	var self = this;
-	
+
 	var panelBgColor = "panel-bg-color";
 	var ptzpadColor = "ptzpad-color";
 	var ptzpadDisabledColor = "ptzpad-disabled-color";
@@ -4182,7 +4200,10 @@ function DateFilter(dateRangeLabelSelector)
 		{
 			var $ele = $(ele);
 			var offset = $ele.offset();
-			$datePickerDialog.css("left", offset.left + $ele.outerWidth(true) + "px");
+			if (settings.ui3_sideBarPosition === "Right")
+				$datePickerDialog.css("right", $(window).width() - offset.left + "px");
+			else
+				$datePickerDialog.css("left", offset.left + $ele.outerWidth(true) + "px");
 			$datePickerDialog.css("top", offset.top + "px");
 			$datePickerDialog.show();
 			isVisible = true;
@@ -4842,7 +4863,6 @@ function PlaybackHeader()
 	});
 	this.resized = function ()
 	{
-		$clipNameHeading.css("width", $ph.width() - $closeBtnL.outerWidth(true));
 	}
 	this.Show = function ()
 	{
@@ -5722,14 +5742,24 @@ function BigThumbHelper()
 		var shrinkBy = assumedWidth ? bW / assumedWidth : 0;
 		if (shrinkBy > 0 && shrinkBy < 1)
 			assumedHeight = assumedHeight * shrinkBy;
-		var left = $hAlign.offset().left + $hAlign.width() + 3;
 		var wH = $(window).height();
 		var top = ($vAlign.offset().top + ($vAlign.height() / 2)) - (assumedHeight / 2) - 20; // 20 for the description
 		if (top + (assumedHeight + 20) > wH)
 			top = (wH - (assumedHeight + 20));
 		if (top < 0)
 			top = 0;
-		$thumb.css("left", left + "px");
+		if (settings.ui3_sideBarPosition === "Right")
+		{
+			var right = $(window).width() - ($hAlign.offset().left - 3);
+			$thumb.css("left", "");
+			$thumb.css("right", right + "px");
+		}
+		else
+		{
+			var left = $hAlign.offset().left + $hAlign.width() + 3;
+			$thumb.css("left", left + "px");
+			$thumb.css("right", "");
+		}
 		$thumb.css("top", top + "px");
 		$thumb.css("max-width", bW + "px");
 		$thumb.show();
@@ -20358,6 +20388,14 @@ function OnChange_ui3_preferred_ui_scale(newValue)
 {
 	uiSizeHelper.SetUISizeByName(newValue);
 }
+function OnChange_ui3_sideBarPosition()
+{
+	if (settings.ui3_sideBarPosition === "Right")
+		$('body').addClass("sideBarRight");
+	else
+		$('body').removeClass("sideBarRight");
+	resized();
+}
 var ui3_contextMenus_trigger_toast = null;
 function OnChange_ui3_contextMenus_trigger(newValue)
 {