feat!: reworked opacity options

script-opts/uosc.conf

@@ -7,14 +7,10 @@ timeline_size=40
 # Comma separated states when element should always be fully visible.
 # Available: paused, audio, image, video, idle, windowed, fullscreen
 timeline_persistency=paused
-# Timeline opacity
-timeline_opacity=0.9
 # Top border of background color to help visually separate timeline from video
 timeline_border=1
 # When scrolling above timeline, wheel will seek by this amount of seconds
 timeline_step=5
-# Opacity of chapter indicators in timeline, 0 to disable
-timeline_chapters_opacity=0.8
 # Render cache indicators for streaming content
 timeline_cache=yes
 
@@ -92,22 +88,18 @@ controls_persistency=
 # Where to display volume controls: none, left, right
 volume=right
 volume_size=40
-volume_opacity=0.9
 volume_border=1
 volume_step=1
 volume_persistency=
 
 # Playback speed widget: mouse drag or wheel to change, click to reset
-speed_opacity=0.6
 speed_step=0.1
 speed_step_is_factor=no
 speed_persistency=
 
 # Controls all menus, such as context menu, subtitle loader/selector, etc
 menu_item_height=36
 menu_min_width=260
-menu_opacity=1
-menu_parent_opacity=0.4
 # Determines if `/` or `ctrl+f` is required to activate the search, or if typing
 # any text is sufficient.
 # When enabled, you can no longer toggle a menu off with the same key that opened it, if the key is a unicode character.
@@ -128,14 +120,12 @@ top_bar_alt_title=
 #   `toggle` => toggle the top bar title text between main and alt by clicking
 #               the top bar, or calling `toggle-title` binding
 top_bar_alt_title_place=below
-top_bar_title_opacity=0.8
 # Flash top bar when any of these file types is loaded. Available: audio,image,video
 top_bar_flash_on=video,audio
 top_bar_persistency=
 
 # Window border drawn in no-border mode
 window_border_size=1
-window_border_opacity=0.8
 
 # If there's no playlist and file ends, load next file in the directory
 # Requires `keep-open=yes` in `mpv.conf`.
@@ -158,6 +148,11 @@ font_scale=1
 text_border=1.2
 # Border radius of buttons, menus, and all other rectangles
 border_radius=2
+# A comma delimited list of opacity overrides for various UI element backgrounds and shapes. Text is always 100%.
+# Example: opacity=timeline=0.5,title=0.5
+# Defaults: timeline=.9,position=1,chapters=0.8,slider=0.9,slider_gauge=1,speed=0.6,
+#           menu=1,submenu=0.4,border=1,title=1,tooltip=1,thumbnail=1,curtain=0.5
+opacity=
 # Use a faster estimation method instead of accurate measurement
 # setting this to `no` might have a noticeable impact on performance, especially in large menus.
 text_width_estimation=yes
@@ -187,8 +182,6 @@ buffered_time_threshold=60
 autohide=no
 # Can be: none, flash, static, manual (controlled by flash-pause-indicator and decide-pause-indicator commands)
 pause_indicator=flash
-# Screen dim when stuff like menu is open, 0 to disable
-curtain_opacity=0.5
 # Sizes to list in stream quality menu
 stream_quality_options=4320,2160,1440,1080,720,480,360,240,144
 # Types to identify media files

scripts/uosc/elements/Curtain.lua

@@ -24,10 +24,10 @@ function Curtain:unregister(id)
 end
 
 function Curtain:render()
-	if self.opacity == 0 or options.curtain_opacity == 0 then return end
+	if self.opacity == 0 or config.opacity.curtain == 0 then return end
 	local ass = assdraw.ass_new()
 	ass:rect(0, 0, display.width, display.height, {
-		color = '000000', opacity = options.curtain_opacity * self.opacity,
+		color = '000000', opacity = config.opacity.curtain * self.opacity,
 	})
 	return ass
 end

scripts/uosc/elements/Menu.lua

@@ -1016,7 +1016,6 @@ function Menu:render()
 	end
 
 	local ass = assdraw.ass_new()
-	local opacity = options.menu_opacity * self.opacity
 	local spacing = self.item_padding
 	local icon_size = self.font_size
 
@@ -1025,14 +1024,12 @@ function Menu:render()
 	---@param pos number Horizontal position index. 0 = current menu, <0 parent menus, >1 submenu.
 	local function draw_menu(menu, x, pos)
 		local is_current, is_parent, is_submenu = pos == 0, pos < 0, pos > 0
-		local menu_opacity = pos == 0 and opacity or opacity * (options.menu_parent_opacity ^ math.abs(pos))
+		local menu_opacity = (pos == 0 and 1 or config.opacity.submenu ^ math.abs(pos)) * self.opacity
 		local ax, ay, bx, by = x, menu.top, x + menu.width, menu.top + menu.height
 		local draw_title = menu.is_root and menu.title or menu.search
 		local scroll_clip = '\\clip(0,' .. ay .. ',' .. display.width .. ',' .. by .. ')'
 		local start_index = math.floor(menu.scroll_y / self.scroll_step) + 1
 		local end_index = math.ceil((menu.scroll_y + menu.height) / self.scroll_step)
-		-- Remove menu_opacity to start off with full, but still decay for parent menus
-		local text_opacity = menu_opacity / options.menu_opacity
 		local menu_rect = {
 			ax = ax, ay = ay - (draw_title and self.scroll_step or 0) - self.padding,
 			bx = bx, by = by + self.padding
@@ -1041,7 +1038,7 @@ function Menu:render()
 
 		-- Background
 		ass:rect(menu_rect.ax, menu_rect.ay, menu_rect.bx, menu_rect.by, {
-			color = bg, opacity = menu_opacity, radius = state.radius + self.padding
+			color = bg, opacity = menu_opacity * config.opacity.menu, radius = state.radius + self.padding
 		})
 
 		if is_parent and get_point_to_rectangle_proximity(cursor, menu_rect) == 0 then
@@ -1111,7 +1108,7 @@ function Menu:render()
 			local highlight_opacity = 0 + (item.active and 0.8 or 0) + (menu.selected_index == index and 0.15 or 0)
 			if not is_submenu and highlight_opacity > 0 then
 				ass:rect(ax + self.padding, item_ay, bx - self.padding, item_by, {
-					radius = state.radius, color = fg, opacity = highlight_opacity * text_opacity,
+					radius = state.radius, color = fg, opacity = highlight_opacity * menu_opacity,
 					clip = item_clip,
 				})
 			end
@@ -1120,10 +1117,10 @@ function Menu:render()
 			if item.icon then
 				local x, y = content_bx - (icon_size / 2), item_center_y
 				if item.icon == 'spinner' then
-					ass:spinner(x, y, icon_size * 1.5, {color = font_color, opacity = text_opacity * 0.8})
+					ass:spinner(x, y, icon_size * 1.5, {color = font_color, opacity = menu_opacity * 0.8})
 				else
 					ass:icon(x, y, icon_size * 1.5, item.icon, {
-						color = font_color, opacity = text_opacity, clip = item_clip,
+						color = font_color, opacity = menu_opacity, clip = item_clip,
 					})
 				end
 				content_bx = content_bx - icon_size - spacing
@@ -1160,7 +1157,7 @@ function Menu:render()
 				end
 				ass:txt(title_x, item_center_y, align, item.ass_safe_title, {
 					size = self.font_size, color = font_color, italic = item.italic, bold = item.bold, wrap = 2,
-					opacity = text_opacity * (item.muted and 0.5 or 1), clip = clip,
+					opacity = menu_opacity * (item.muted and 0.5 or 1), clip = clip,
 				})
 			end
 		end
@@ -1182,12 +1179,12 @@ function Menu:render()
 			-- Title
 			if menu.search then
 				-- Icon
-				local icon_size, icon_opacity = self.font_size * 1.3, requires_submit and text_opacity * 0.5 or 1
+				local icon_size, icon_opacity = self.font_size * 1.3, menu_opacity * (requires_submit and 0.5 or 1)
 				local icon_rect = {ax = rect.ax, ay = rect.ay, bx = ax + icon_size + spacing * 1.5, by = rect.by}
 
 				if is_current and requires_submit and get_point_to_rectangle_proximity(cursor, icon_rect) == 0 then
 					cursor.on_primary_down = function() self:search_submit() end
-					icon_opacity = text_opacity
+					icon_opacity = menu_opacity
 					prevent_title_click = false
 				end
 

scripts/uosc/elements/Speed.lua

@@ -127,7 +127,7 @@ function Speed:render()
 
 	-- Background
 	ass:rect(self.ax, self.ay, self.bx, self.by, {
-		color = bg, radius = state.radius, opacity = opacity * options.speed_opacity
+		color = bg, radius = state.radius, opacity = opacity * config.opacity.speed
 	})
 
 	-- Coordinates

scripts/uosc/elements/Timeline.lua

@@ -212,15 +212,15 @@ function Timeline:render()
 	ass:new_event()
 	ass:pos(0, 0)
 	ass:append('{\\rDefault\\an7\\blur0\\bord0\\1c&H' .. bg .. '}')
-	ass:opacity(options.timeline_opacity)
+	ass:opacity(config.opacity.timeline)
 	ass:draw_start()
 	ass:rect_cw(bax, bay, fax, bby) --left of progress
 	ass:rect_cw(fbx, bay, bbx, bby) --right of progress
 	ass:rect_cw(fax, bay, fbx, fay) --above progress
 	ass:draw_stop()
 
 	-- Progress
-	ass:rect(fax, fay, fbx, fby, {opacity = options.timeline_opacity})
+	ass:rect(fax, fay, fbx, fby, {opacity = config.opacity.position})
 
 	-- Uncached ranges
 	local buffered_playtime = nil
@@ -253,7 +253,7 @@ function Timeline:render()
 
 	-- Chapters
 	local hovered_chapter = nil
-	if (options.timeline_chapters_opacity > 0
+	if (config.opacity.chapters > 0
 		and (#state.chapters > 0 or state.ab_loop_a or state.ab_loop_b)
 		) then
 		local diamond_radius = foreground_size < 3 and foreground_size or self.chapter_size
@@ -266,7 +266,7 @@ function Timeline:render()
 				ass:new_event()
 				ass:append(string.format(
 					'{\\pos(0,0)\\rDefault\\an7\\blur0\\yshad0.01\\bord%f\\1c&H%s\\3c&H%s\\4c&H%s\\1a&H%X&\\3a&H00&\\4a&H00&}',
-					diamond_border, fg, bg, bg, opacity_to_alpha(options.timeline_opacity * options.timeline_chapters_opacity)
+					diamond_border, fg, bg, bg, opacity_to_alpha(config.opacity.chapters)
 				))
 				ass:draw_start()
 				ass:move_to(chapter_x - radius, chapter_y)
@@ -318,7 +318,7 @@ function Timeline:render()
 				ass:new_event()
 				ass:append(string.format(
 					'{\\pos(0,0)\\rDefault\\an7\\blur0\\yshad0.01\\bord%f\\1c&H%s\\3c&H%s\\4c&H%s\\1a&H%X&\\3a&H00&\\4a&H00&}',
-					diamond_border, fg, bg, bg, opacity_to_alpha(options.timeline_opacity * options.timeline_chapters_opacity)
+					diamond_border, fg, bg, bg, opacity_to_alpha(config.opacity.chapters)
 				))
 				ass:draw_start()
 				ass:move_to(x, fby - ab_radius)
@@ -412,7 +412,8 @@ function Timeline:render()
 			local ax, ay = (thumb_x - border), (thumb_y - border)
 			local bx, by = (thumb_x + thumb_width + border), (thumb_y + thumb_height + border)
 			ass:rect(ax, ay, bx, by, {
-				color = bg, border = 1, border_color = fg, border_opacity = 0.08, radius = state.radius
+				color = bg, border = 1, opacity = config.opacity.thumbnail,
+				border_color = fg, border_opacity = 0.08 * config.opacity.thumbnail, radius = state.radius
 			})
 			mp.commandv('script-message-to', 'thumbfast', 'thumb', hovered_seconds, thumb_x, thumb_y)
 			self.has_thumbnail, rendered_thumbnail = true, true

scripts/uosc/elements/TopBar.lua

@@ -227,7 +227,7 @@ function TopBar:render()
 				end
 
 				ass:rect(title_rect.ax, title_rect.ay, title_rect.bx, title_rect.by, {
-					color = bg, opacity = visibility * options.top_bar_title_opacity, radius = state.radius,
+					color = bg, opacity = visibility * config.opacity.title, radius = state.radius,
 				})
 				ass:txt(title_ax + padding, self.ay + (self.size / 2), 4, main_title, opts)
 				title_ay = by + 1
@@ -245,7 +245,7 @@ function TopBar:render()
 				local bx = round(math.min(max_bx, title_ax + text_width(self.alt_title, opts) + padding * 2))
 				opts.clip = string.format('\\clip(%d, %d, %d, %d)', title_ax, title_ay, bx, by)
 				ass:rect(title_ax, title_ay, bx, by, {
-					color = bg, opacity = visibility * options.top_bar_title_opacity, radius = state.radius,
+					color = bg, opacity = visibility * config.opacity.title, radius = state.radius,
 				})
 				ass:txt(title_ax + padding, title_ay + height / 2, 4, self.alt_title, opts)
 				title_ay = by + 1
@@ -268,7 +268,7 @@ function TopBar:render()
 				}
 				opts.clip = string.format('\\clip(%d, %d, %d, %d)', title_ax, title_ay, rect.bx, rect.by)
 				ass:rect(rect.ax, rect.ay, rect.bx, rect.by, {
-					color = bg, opacity = visibility * options.top_bar_title_opacity, radius = state.radius,
+					color = bg, opacity = visibility * config.opacity.title, radius = state.radius,
 				})
 				ass:txt(rect.ax + padding, rect.ay + height / 2, 4, text, opts)
 				title_ay = rect.by + 1

scripts/uosc/elements/Volume.lua

@@ -17,7 +17,7 @@ function MuteButton:render()
 	local icon_name = state.mute and 'volume_off' or 'volume_up'
 	local width = self.bx - self.ax
 	ass:icon(self.ax + (width / 2), self.by, width * 0.7, icon_name,
-		{border = options.text_border * state.scale, opacity = options.volume_opacity * visibility, align = 2}
+		{border = options.text_border * state.scale, opacity = visibility, align = 2}
 	)
 	return ass
 end
@@ -168,7 +168,7 @@ function VolumeSlider:render()
 	ass:new_event()
 	ass:append('{\\rDefault\\an7\\blur0\\bord0\\1c&H' .. bg ..
 		'\\iclip(' .. fg_path.scale .. ', ' .. fg_path.text .. ')}')
-	ass:opacity(options.volume_opacity, visibility)
+	ass:opacity(config.opacity.slider, visibility)
 	ass:pos(0, 0)
 	ass:draw_start()
 	ass:append(bg_path.text)
@@ -177,7 +177,7 @@ function VolumeSlider:render()
 	-- Foreground
 	ass:new_event()
 	ass:append('{\\rDefault\\an7\\blur0\\bord0\\1c&H' .. fg .. '}')
-	ass:opacity(options.volume_opacity, visibility)
+	ass:opacity(config.opacity.slider_gauge, visibility)
 	ass:pos(0, 0)
 	ass:draw_start()
 	ass:append(fg_path.text)

scripts/uosc/elements/WindowBorder.lua

@@ -27,7 +27,7 @@ function WindowBorder:render()
 		local clip = '\\iclip(' .. self.size .. ',' .. self.size .. ',' ..
 			(display.width - self.size) .. ',' .. (display.height - self.size) .. ')'
 		ass:rect(0, 0, display.width + 1, display.height + 1, {
-			color = bg, clip = clip, opacity = options.window_border_opacity,
+			color = bg, clip = clip, opacity = config.opacity.border,
 		})
 		return ass
 	end

scripts/uosc/lib/ass.lua

@@ -75,15 +75,14 @@ end
 -- Tooltip.
 ---@param element {ax: number; ay: number; bx: number; by: number}
 ---@param value string|number
----@param opts? {size?: number; offset?: number; bold?: boolean; italic?: boolean; width_overwrite?: number, margin?: number, responsive?: boolean, opacity?: number, lines?: integer}
+---@param opts? {size?: number; offset?: number; bold?: boolean; italic?: boolean; width_overwrite?: number, margin?: number; responsive?: boolean; lines?: integer}
 function ass_mt:tooltip(element, value, opts)
 	if value == '' then return end
 	opts = opts or {}
 	opts.size = opts.size or round(16 * state.scale)
 	opts.border = options.text_border * state.scale
 	opts.border_color = bg
 	opts.margin = opts.margin or round(10 * state.scale)
-	opts.opacity = opts.opacity or options.timeline_opacity
 	opts.lines = opts.lines or 1
 	local padding_y = round(opts.size / 6)
 	local padding_x = round(opts.size / 3)
@@ -97,8 +96,7 @@ function ass_mt:tooltip(element, value, opts)
 	local ax, bx = round(x - width_half), round(x + width_half)
 	local ay = (align_top and y - opts.size * opts.lines - 2 * padding_y or y)
 	local by = (align_top and y or y + opts.size * opts.lines + 2 * padding_y)
-	self:rect(ax, ay, bx, by, {color = bg, opacity = opts.opacity, radius = state.radius})
-	opts.opacity = nil
+	self:rect(ax, ay, bx, by, {color = bg, opacity = config.opacity.tooltip, radius = state.radius})
 	self:txt(x, align_top and y - padding_y or y + padding_y, align_top and 2 or 8, value, opts)
 	return { ax = element.ax, ay = ay, bx = element.bx, by = by }
 end