Ladybird/Qt: Display an audio button on tabs that are playing audio

When audio begins playing, add a button to the left of the favicon with
a speaker icon to indicate which tab is playing audio. This button is
currently disabled, but in the future may be used to mute the tab.

Ladybird/Qt/BrowserWindow.cpp

@@ -536,6 +536,7 @@ void BrowserWindow::initialize_tab(Tab* tab)
 {
     QObject::connect(tab, &Tab::title_changed, this, &BrowserWindow::tab_title_changed);
     QObject::connect(tab, &Tab::favicon_changed, this, &BrowserWindow::tab_favicon_changed);
+    QObject::connect(tab, &Tab::audio_play_state_changed, this, &BrowserWindow::tab_audio_play_state_changed);
 
     QObject::connect(&tab->view(), &WebContentView::urls_dropped, this, [this](auto& urls) {
         VERIFY(urls.size());
@@ -646,6 +647,28 @@ void BrowserWindow::tab_favicon_changed(int index, QIcon const& icon)
     m_tabs_container->setTabIcon(index, icon);
 }
 
+void BrowserWindow::tab_audio_play_state_changed(int index, Web::HTML::AudioPlayState play_state)
+{
+    switch (play_state) {
+    case Web::HTML::AudioPlayState::Paused:
+        m_tabs_container->tabBar()->setTabButton(index, QTabBar::LeftSide, nullptr);
+        break;
+
+    case Web::HTML::AudioPlayState::Playing:
+        auto icon = style()->standardIcon(QStyle::SP_MediaVolume);
+
+        auto* button = new QPushButton(icon, {});
+        button->setFlat(true);
+        button->resize({ 20, 20 });
+
+        // FIXME: Add a click handler to mute the tab.
+        button->setEnabled(false);
+
+        m_tabs_container->tabBar()->setTabButton(index, QTabBar::LeftSide, button);
+        break;
+    }
+}
+
 void BrowserWindow::open_next_tab()
 {
     if (m_tabs_container->count() <= 1)

Ladybird/Qt/BrowserWindow.h

@@ -11,6 +11,7 @@
 #include <Ladybird/Types.h>
 #include <LibCore/Forward.h>
 #include <LibWeb/HTML/ActivateTab.h>
+#include <LibWeb/HTML/AudioPlayState.h>
 #include <LibWebView/Forward.h>
 #include <QIcon>
 #include <QLineEdit>
@@ -78,6 +79,7 @@ public slots:
     void device_pixel_ratio_changed(qreal dpi);
     void tab_title_changed(int index, QString const&);
     void tab_favicon_changed(int index, QIcon const& icon);
+    void tab_audio_play_state_changed(int index, Web::HTML::AudioPlayState);
     Tab& new_tab_from_url(URL::URL const&, Web::HTML::ActivateTab);
     Tab& new_tab_from_content(StringView html, Web::HTML::ActivateTab);
     Tab& new_child_tab(Web::HTML::ActivateTab, Tab& parent, Web::HTML::WebViewHints, Optional<u64> page_index);

Ladybird/Qt/Tab.cpp

@@ -389,6 +389,10 @@ Tab::Tab(BrowserWindow* window, WebContentOptions const& web_content_options, St
         clipboard->setMimeData(mime_data);
     };
 
+    view().on_audio_play_state_changed = [this](auto play_state) {
+        emit audio_play_state_changed(tab_index(), play_state);
+    };
+
     auto* search_selected_text_action = new QAction("&Search for <query>", this);
     search_selected_text_action->setIcon(load_icon_from_uri("resource://icons/16x16/find.png"sv));
     QObject::connect(search_selected_text_action, &QAction::triggered, this, [this]() {

Ladybird/Qt/Tab.h

@@ -9,6 +9,7 @@
 
 #include "LocationEdit.h"
 #include "WebContentView.h"
+#include <LibWeb/HTML/AudioPlayState.h>
 #include <LibWebView/History.h>
 #include <QBoxLayout>
 #include <QLabel>
@@ -61,6 +62,7 @@ public slots:
 signals:
     void title_changed(int id, QString const&);
     void favicon_changed(int id, QIcon const&);
+    void audio_play_state_changed(int id, Web::HTML::AudioPlayState);
 
 private:
     void select_dropdown_add_item(QMenu* menu, Web::HTML::SelectItem const& item);