UI base for audio component

flumi/Assets/Icons/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play-icon lucide-play"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg>

flumi/Assets/Icons/play.svg.import

@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://1nlucidh6wx4"
+path="res://.godot/imported/play.svg-b90f638081075dc471c4bc5e46375e06.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/play.svg"
+dest_files=["res://.godot/imported/play.svg-b90f638081075dc471c4bc5e46375e06.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false

flumi/Assets/Icons/volume-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-volume2-icon lucide-volume-2"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><path d="M16 9a5 5 0 0 1 0 6"/><path d="M19.364 18.364a9 9 0 0 0 0-12.728"/></svg>

flumi/Assets/Icons/volume-2.svg.import

@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://dmktpcmm6klre"
+path="res://.godot/imported/volume-2.svg-bd1542857ad7bbb81d4c57f406e2bc09.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/volume-2.svg"
+dest_files=["res://.godot/imported/volume-2.svg-bd1542857ad7bbb81d4c57f406e2bc09.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false

flumi/Assets/Icons/volume-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-volume-off-icon lucide-volume-off"><path d="M16 9a5 5 0 0 1 .95 2.293"/><path d="M19.364 5.636a9 9 0 0 1 1.889 9.96"/><path d="m2 2 20 20"/><path d="m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"/><path d="M9.828 4.172A.686.686 0 0 1 11 4.657v.686"/></svg>

flumi/Assets/Icons/volume-off.svg.import

@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://4ofqjnsahbr5"
+path="res://.godot/imported/volume-off.svg-0519839c06d4422a84c3d94005543f3f.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/volume-off.svg"
+dest_files=["res://.godot/imported/volume-off.svg-0519839c06d4422a84c3d94005543f3f.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false

flumi/Scenes/Tags/audio.tscn

@@ -0,0 +1,146 @@
+[gd_scene load_steps=14 format=3 uid="uid://b7w3dqcvof88f"]
+
+[ext_resource type="Script" uid="uid://c5h4iko0ej4d" path="res://Scripts/Tags/audio.gd" id="1_naep2"]
+[ext_resource type="Texture2D" uid="uid://1nlucidh6wx4" path="res://Assets/Icons/play.svg" id="1_upxy8"]
+[ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_1hbfy"]
+[ext_resource type="Texture2D" uid="uid://bhyaa5h8x43qg" path="res://Assets/Icons/grabber_16x16.svg" id="3_gfofq"]
+[ext_resource type="Texture2D" uid="uid://dmktpcmm6klre" path="res://Assets/Icons/volume-2.svg" id="4_5j8mp"]
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_xqesv"]
+content_margin_left = 15.0
+content_margin_top = 15.0
+content_margin_right = 15.0
+content_margin_bottom = 15.0
+bg_color = Color(0.105882, 0.105882, 0.105882, 1)
+corner_radius_top_left = 15
+corner_radius_top_right = 15
+corner_radius_bottom_right = 15
+corner_radius_bottom_left = 15
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_1hbfy"]
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_gfofq"]
+bg_color = Color(0.168627, 0.168627, 0.168627, 1)
+corner_radius_top_left = 50
+corner_radius_top_right = 50
+corner_radius_bottom_right = 50
+corner_radius_bottom_left = 50
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_5j8mp"]
+bg_color = Color(0.6, 0.6, 0.6, 0)
+draw_center = false
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_1hbfy"]
+content_margin_left = 4.0
+content_margin_top = 4.0
+content_margin_right = 4.0
+content_margin_bottom = 4.0
+bg_color = Color(1, 1, 1, 1)
+corner_radius_top_left = 4
+corner_radius_top_right = 4
+corner_radius_bottom_right = 4
+corner_radius_bottom_left = 4
+corner_detail = 6
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_naep2"]
+bg_color = Color(0.247059, 0.466667, 0.807843, 1)
+corner_radius_top_left = 25
+corner_radius_top_right = 25
+corner_radius_bottom_right = 25
+corner_radius_bottom_left = 25
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_ccpdr"]
+bg_color = Color(0.309804, 0.517647, 0.839216, 1)
+corner_radius_top_left = 25
+corner_radius_top_right = 25
+corner_radius_bottom_right = 25
+corner_radius_bottom_left = 25
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_mnij3"]
+content_margin_left = 15.0
+content_margin_top = 15.0
+content_margin_right = 15.0
+content_margin_bottom = 15.0
+bg_color = Color(0.105882, 0.105882, 0.105882, 1)
+corner_radius_top_left = 15
+corner_radius_top_right = 15
+corner_radius_bottom_right = 15
+corner_radius_bottom_left = 15
+
+[node name="Audio" type="VBoxContainer"]
+offset_right = 40.0
+offset_bottom = 40.0
+size_flags_horizontal = 0
+script = ExtResource("1_naep2")
+
+[node name="PanelContainer" type="PanelContainer" parent="."]
+layout_mode = 2
+theme_override_styles/panel = SubResource("StyleBoxFlat_xqesv")
+
+[node name="HBoxContainer" type="HBoxContainer" parent="PanelContainer"]
+layout_mode = 2
+
+[node name="Play" type="Button" parent="PanelContainer/HBoxContainer"]
+custom_minimum_size = Vector2(45, 0)
+layout_mode = 2
+mouse_default_cursor_shape = 2
+theme_override_styles/focus = SubResource("StyleBoxEmpty_1hbfy")
+theme_override_styles/hover = SubResource("StyleBoxFlat_gfofq")
+theme_override_styles/pressed = SubResource("StyleBoxFlat_5j8mp")
+theme_override_styles/normal = SubResource("StyleBoxFlat_5j8mp")
+icon = ExtResource("1_upxy8")
+icon_alignment = 1
+
+[node name="RichTextLabel" type="RichTextLabel" parent="PanelContainer/HBoxContainer"]
+custom_minimum_size = Vector2(100, 40)
+layout_mode = 2
+theme_override_colors/default_color = Color(1, 1, 1, 1)
+text = "00:00/00:00"
+fit_content = true
+vertical_alignment = 1
+
+[node name="HSlider" type="HSlider" parent="PanelContainer/HBoxContainer"]
+custom_minimum_size = Vector2(200, 0)
+layout_mode = 2
+size_flags_vertical = 4
+theme = ExtResource("2_1hbfy")
+theme_override_icons/grabber_disabled = ExtResource("3_gfofq")
+theme_override_styles/slider = SubResource("StyleBoxFlat_1hbfy")
+theme_override_styles/grabber_area = SubResource("StyleBoxFlat_naep2")
+theme_override_styles/grabber_area_highlight = SubResource("StyleBoxFlat_ccpdr")
+value = 50.0
+editable = false
+scrollable = false
+
+[node name="Volume" type="Button" parent="PanelContainer/HBoxContainer"]
+custom_minimum_size = Vector2(45, 0)
+layout_mode = 2
+mouse_default_cursor_shape = 2
+theme_override_styles/focus = SubResource("StyleBoxEmpty_1hbfy")
+theme_override_styles/hover = SubResource("StyleBoxFlat_gfofq")
+theme_override_styles/pressed = SubResource("StyleBoxFlat_5j8mp")
+theme_override_styles/normal = SubResource("StyleBoxFlat_5j8mp")
+icon = ExtResource("4_5j8mp")
+icon_alignment = 1
+
+[node name="PopupPanel" type="PopupPanel" parent="."]
+position = Vector2i(375, 75)
+size = Vector2i(46, 100)
+visible = true
+theme_override_styles/panel = SubResource("StyleBoxFlat_mnij3")
+
+[node name="VSlider" type="VSlider" parent="PopupPanel"]
+offset_left = 15.0
+offset_top = 15.0
+offset_right = 31.0
+offset_bottom = 85.0
+theme_override_icons/grabber = ExtResource("3_gfofq")
+theme_override_styles/slider = SubResource("StyleBoxFlat_1hbfy")
+theme_override_styles/grabber_area = SubResource("StyleBoxFlat_naep2")
+theme_override_styles/grabber_area_highlight = SubResource("StyleBoxFlat_ccpdr")
+
+[connection signal="mouse_entered" from="PanelContainer/HBoxContainer/Volume" to="." method="_on_volume_mouse_entered"]
+[connection signal="mouse_exited" from="PanelContainer/HBoxContainer/Volume" to="." method="_on_volume_mouse_exited"]
+[connection signal="pressed" from="PanelContainer/HBoxContainer/Volume" to="." method="_on_volume_pressed"]
+[connection signal="focus_exited" from="PopupPanel" to="." method="_on_popup_panel_focus_exited"]
+[connection signal="value_changed" from="PopupPanel/VSlider" to="." method="_on_volume_slider_value_changed"]

flumi/Scenes/main.tscn

@@ -1,4 +1,4 @@
-[gd_scene load_steps=27 format=3 uid="uid://bytm7bt2s4ak8"]
+[gd_scene load_steps=28 format=3 uid="uid://bytm7bt2s4ak8"]
 
 [ext_resource type="Script" uid="uid://bg5iqnwic1rio" path="res://Scripts/main.gd" id="1_8q3xr"]
 [ext_resource type="Texture2D" uid="uid://df1m4j7uxi63v" path="res://Assets/Icons/chevron-down.svg" id="2_6bp64"]
@@ -11,6 +11,7 @@
 [ext_resource type="Texture2D" uid="uid://cehbtwq6gq0cn" path="res://Assets/Icons/plus.svg" id="5_ynf5e"]
 [ext_resource type="Script" uid="uid://bgqglerkcylxx" path="res://addons/SmoothScroll/SmoothScrollContainer.gd" id="10_d1ilt"]
 [ext_resource type="Script" uid="uid://b7h0k2h2qwlqv" path="res://addons/SmoothScroll/scroll_damper/expo_scroll_damper.gd" id="11_6iyac"]
+[ext_resource type="PackedScene" uid="uid://b7w3dqcvof88f" path="res://Scenes/Tags/audio.tscn" id="12_6iyac"]
 
 [sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_344ge"]
 
@@ -222,6 +223,9 @@ size_flags_horizontal = 3
 size_flags_vertical = 3
 theme_override_constants/separation = 22
 
+[node name="Audio" parent="VBoxContainer/ScrollContainer/WebsiteContainer" instance=ExtResource("12_6iyac")]
+layout_mode = 2
+
 [node name="WebsiteBackground" type="Panel" parent="."]
 unique_name_in_owner = true
 z_index = -1

flumi/Scripts/Tags/audio.gd

@@ -0,0 +1,55 @@
+extends VBoxContainer
+
+@onready var popup_panel: PopupPanel = $PopupPanel
+@onready var volume_button: Button = $PanelContainer/HBoxContainer/Volume
+@onready var volume_slider: VSlider = $PopupPanel/VSlider
+
+const VOLUME_OFF = preload("res://Assets/Icons/volume-off.svg")
+const VOLUME_2 = preload("res://Assets/Icons/volume-2.svg")
+
+var is_muted = false
+var initial_volume_value = 0.0
+
+func _ready():
+	popup_panel.hide()
+	initial_volume_value = volume_slider.value
+
+func _on_volume_pressed():
+	is_muted = !is_muted
+	
+	if is_muted:
+		volume_button.icon = VOLUME_OFF
+	else:
+		volume_button.icon = VOLUME_2
+	
+	if popup_panel.is_visible():
+		popup_panel.hide()
+
+func _on_volume_mouse_entered():
+	if popup_panel.is_visible():
+		return
+	
+	var h_offset = (volume_button.size.x - popup_panel.size.x) / 2
+	var v_offset = volume_button.size.y + 17 
+	
+	popup_panel.position = volume_button.get_screen_position() + Vector2(h_offset, v_offset)
+	popup_panel.show()
+
+func _on_volume_mouse_exited():
+	if volume_slider.value == initial_volume_value:
+		await get_tree().create_timer(0.3).timeout
+		
+		var mouse_position = get_global_mouse_position()
+		var popup_position = popup_panel.get_position()
+		var popup_size = popup_panel.get_size()
+		var popup_rect = Rect2(popup_position, popup_size)
+		
+		if not popup_rect.has_point(mouse_position):
+			popup_panel.hide()
+
+func _on_popup_panel_focus_exited() -> void:
+	popup_panel.hide()
+	initial_volume_value = volume_slider.value
+
+func _on_volume_slider_value_changed(value: float) -> void:
+	initial_volume_value = value

flumi/Scripts/Tags/audio.gd.uid

@@ -0,0 +1 @@
+uid://c5h4iko0ej4d

flumi/project.godot

@@ -29,7 +29,7 @@ window/stretch/aspect="ignore"
 
 [editor_plugins]
 
-enabled=PackedStringArray("res://addons/DatePicker/plugin.cfg", "res://addons/Flexbox/plugin.cfg", "res://addons/SmoothScroll/plugin.cfg", "res://addons/godot-flexbox/plugin.cfg")
+enabled=PackedStringArray("res://addons/DatePicker/plugin.cfg", "res://addons/SmoothScroll/plugin.cfg", "res://addons/godot-flexbox/plugin.cfg")
 
 [file_customization]