diff --git a/flumi/Assets/Icons/play.svg b/flumi/Assets/Icons/play.svg
new file mode 100644
index 0000000..6ca4049
--- /dev/null
+++ b/flumi/Assets/Icons/play.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/flumi/Assets/Icons/play.svg.import b/flumi/Assets/Icons/play.svg.import
new file mode 100644
index 0000000..3ad68bf
--- /dev/null
+++ b/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
diff --git a/flumi/Assets/Icons/volume-2.svg b/flumi/Assets/Icons/volume-2.svg
new file mode 100644
index 0000000..baf2948
--- /dev/null
+++ b/flumi/Assets/Icons/volume-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/flumi/Assets/Icons/volume-2.svg.import b/flumi/Assets/Icons/volume-2.svg.import
new file mode 100644
index 0000000..56379db
--- /dev/null
+++ b/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
diff --git a/flumi/Assets/Icons/volume-off.svg b/flumi/Assets/Icons/volume-off.svg
new file mode 100644
index 0000000..8b6c7ee
--- /dev/null
+++ b/flumi/Assets/Icons/volume-off.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/flumi/Assets/Icons/volume-off.svg.import b/flumi/Assets/Icons/volume-off.svg.import
new file mode 100644
index 0000000..3acdedb
--- /dev/null
+++ b/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
diff --git a/flumi/Scenes/Tags/audio.tscn b/flumi/Scenes/Tags/audio.tscn
new file mode 100644
index 0000000..fe4a9f8
--- /dev/null
+++ b/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"]
diff --git a/flumi/Scenes/main.tscn b/flumi/Scenes/main.tscn
index a72adce..2f5039a 100644
--- a/flumi/Scenes/main.tscn
+++ b/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
diff --git a/flumi/Scripts/Tags/audio.gd b/flumi/Scripts/Tags/audio.gd
new file mode 100644
index 0000000..ece40aa
--- /dev/null
+++ b/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
diff --git a/flumi/Scripts/Tags/audio.gd.uid b/flumi/Scripts/Tags/audio.gd.uid
new file mode 100644
index 0000000..a95857d
--- /dev/null
+++ b/flumi/Scripts/Tags/audio.gd.uid
@@ -0,0 +1 @@
+uid://c5h4iko0ej4d
diff --git a/flumi/Scripts/Tags/BaseListContainer.gd b/flumi/Scripts/Utils/BaseListContainer.gd
similarity index 100%
rename from flumi/Scripts/Tags/BaseListContainer.gd
rename to flumi/Scripts/Utils/BaseListContainer.gd
diff --git a/flumi/Scripts/Tags/BaseListContainer.gd.uid b/flumi/Scripts/Utils/BaseListContainer.gd.uid
similarity index 100%
rename from flumi/Scripts/Tags/BaseListContainer.gd.uid
rename to flumi/Scripts/Utils/BaseListContainer.gd.uid
diff --git a/flumi/project.godot b/flumi/project.godot
index b9bb6e8..47204fc 100644
--- a/flumi/project.godot
+++ b/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]