From 318a4c93e3f317ab4fea0c4365a2a2b7b58f2721 Mon Sep 17 00:00:00 2001
From: Christian Muehlhaeuser <muesli@gmail.com>
Date: Tue, 12 Aug 2014 19:48:38 +0200
Subject: [PATCH] * New AudioControls design.

---
 src/tomahawk/AudioControls.cpp |  233 ++++---
 src/tomahawk/AudioControls.h   |    9 +-
 src/tomahawk/AudioControls.ui  | 1067 ++++++++++++++------------------
 3 files changed, 573 insertions(+), 736 deletions(-)

diff --git a/src/tomahawk/AudioControls.cpp b/src/tomahawk/AudioControls.cpp
index ed811636f..ec9290eb8 100644
--- a/src/tomahawk/AudioControls.cpp
+++ b/src/tomahawk/AudioControls.cpp
@@ -31,6 +31,7 @@
 #include "database/Database.h"
 #include "playlist/PlaylistView.h"
 #include "utils/TomahawkUtilsGui.h"
+#include "utils/ImageRegistry.h"
 #include "utils/Logger.h"
 #include "widgets/ImageButton.h"
 #include "widgets/SocialWidget.h"
@@ -47,7 +48,7 @@ using namespace Tomahawk;
 
 
 AudioControls::AudioControls( QWidget* parent )
-    : QWidget( parent )
+    : BackgroundWidget( parent )
     , TomahawkUtils::DpiScaler( this )
     , ui( new Ui::AudioControls )
     , m_repeatMode( PlaylistModes::NoRepeat )
@@ -56,60 +57,65 @@ AudioControls::AudioControls( QWidget* parent )
     , m_parent( parent )
 {
     ui->setupUi( this );
+    setAutoFillBackground( false );
     setAcceptDrops( true );
+    setBackgroundColor( Qt::black );
 
-    QFont font( ui->artistTrackLabel->font() );
-    font.setPointSize( TomahawkUtils::defaultFontSize() + 1 );
-    font.setWeight( QFont::Bold );
+    QFont f = font();
+    f.setPointSize( 13 );
 
-    ui->artistTrackLabel->setFont( font );
-    ui->artistTrackLabel->setElideMode( Qt::ElideMiddle );
-    ui->artistTrackLabel->setType( QueryLabel::Track );
+    ui->dashLabel->setFont( f );
+    ui->artistLabel->setFont( f );
+    ui->trackLabel->setFont( f );
+    ui->artistLabel->setElideMode( Qt::ElideNone );
+    ui->trackLabel->setElideMode( Qt::ElideNone );
+    ui->artistLabel->setType( QueryLabel::Artist );
+    ui->trackLabel->setType( QueryLabel::Track );
 
-    font.setPointSize( TomahawkUtils::defaultFontSize() );
-    ui->albumLabel->setFont( font );
-    ui->albumLabel->setType( QueryLabel::ArtistAndAlbum );
+    f.setPointSize( 11 );
 
-    QPalette queryLabelsPalette = ui->artistTrackLabel->palette();
-    queryLabelsPalette.setColor( QPalette::Foreground, Qt::black );
-    ui->artistTrackLabel->setPalette( queryLabelsPalette );
-    ui->albumLabel->setPalette( queryLabelsPalette );
+    QPalette queryLabelsPalette = ui->artistLabel->palette();
+    queryLabelsPalette.setColor( QPalette::Foreground, Qt::white );
+    ui->artistLabel->setPalette( queryLabelsPalette );
+    ui->trackLabel->setPalette( queryLabelsPalette );
+    ui->dashLabel->setPalette( queryLabelsPalette );
 
-    font.setWeight( QFont::Normal );
-    ui->timeLabel->setFont( font );
-    ui->timeLeftLabel->setFont( font );
+    ui->timeLabel->setPalette( queryLabelsPalette );
+    ui->timeLeftLabel->setPalette( queryLabelsPalette );
+    ui->timeLabel->setFont( f );
+    ui->timeLeftLabel->setFont( f );
 
-    ui->ownerButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::DefaultResolver, TomahawkUtils::Original, scaled( 34, 34 ) ) );
-    ui->prevButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PrevButton, TomahawkUtils::Original, scaled( 35, 35 ) ) );
-    ui->prevButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PrevButtonPressed, TomahawkUtils::Original, scaled( 35, 35 ) ), QIcon::Off, QIcon::Active );
-    ui->playPauseButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PlayButton, TomahawkUtils::Original, scaled( 48, 48 ) ) );
-    ui->playPauseButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PlayButtonPressed, TomahawkUtils::Original, scaled( 48, 48 ) ), QIcon::Off, QIcon::Active );
-    ui->pauseButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PauseButton, TomahawkUtils::Original, scaled( 48, 48 ) ) );
-    ui->pauseButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PauseButtonPressed, TomahawkUtils::Original, scaled( 48, 48 ) ), QIcon::Off, QIcon::Active );
-    ui->nextButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::NextButton, TomahawkUtils::Original, scaled( 35, 35 ) ) );
-    ui->nextButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::NextButtonPressed, TomahawkUtils::Original, scaled( 35, 35 ) ), QIcon::Off, QIcon::Active );
-    ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOff, TomahawkUtils::Original, scaled( 34, 21 ) ) );
-    ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOffPressed, TomahawkUtils::Original, scaled( 34, 21 ) ), QIcon::Off, QIcon::Active );
-    ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOff, TomahawkUtils::Original, scaled( 34, 21 ) ) );
-    ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOffPressed, TomahawkUtils::Original, scaled( 34, 21 ) ), QIcon::Off, QIcon::Active );
-    ui->volumeLowButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::VolumeMuted, TomahawkUtils::Original, scaled( 18, 18 ) ) );
-    ui->volumeHighButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::VolumeFull, TomahawkUtils::Original, scaled( 22, 18 ) ) );
-    ui->socialButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::Share, TomahawkUtils::Original, scaled( 20, 20 ) ) );
-    ui->loveButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::NotLoved, TomahawkUtils::Original, scaled( 20, 20 ) ) );
-    ui->loveButton->setCheckable( true );
+    ui->ownerButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::DefaultResolver, TomahawkUtils::Original, scaled( 12, 12 ) ) );
+    ui->prevButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PrevButton, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+    ui->prevButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PrevButtonPressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
+    ui->playPauseButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PlayButton, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+    ui->playPauseButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PlayButtonPressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
+    ui->pauseButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PauseButton, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+    ui->pauseButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::PauseButtonPressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
+    ui->nextButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::NextButton, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+    ui->nextButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::NextButtonPressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
+    ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOff, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+    ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOffPressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
+    ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOff, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+    ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOffPressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
+    ui->volumeLowButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::VolumeMuted, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+//    ui->volumeHighButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::VolumeFull, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+//    ui->socialButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::Share, TomahawkUtils::Original, scaled( 20, 20 ) ) );
+//    ui->loveButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::NotLoved, TomahawkUtils::Original, scaled( 20, 20 ) ) );
+//    ui->loveButton->setCheckable( true );
 
-    ui->socialButton->setFixedSize( scaled( 20, 20 ) );
-    ui->loveButton->setFixedSize( scaled( 20, 20 ) );
-    ui->ownerButton->setFixedSize( scaled( 34, 34 ) );
+//    ui->socialButton->setFixedSize( scaled( 20, 20 ) );
+//    ui->loveButton->setFixedSize( scaled( 20, 20 ) );
+    ui->ownerButton->setFixedSize( scaled( 12, 12 ) );
 
-    ui->metaDataArea->setStyleSheet( QString( "QWidget#metaDataArea {\nborder-width: %1px;\nborder-image: url(" RESPATH "images/now-playing-panel.png) %1 %1 %1 %1 stretch stretch; }" ).arg( scaledX( 4 ) ) );
+//    ui->metaDataArea->setStyleSheet( QString( "QWidget#metaDataArea {\nborder-width: %1px;\nborder-image: url(" RESPATH "images/now-playing-panel.png) %1 %1 %1 %1 stretch stretch; }" ).arg( scaledX( 4 ) ) );
 
     ui->seekSlider->setEnabled( true );
     ui->seekSlider->setTimeLine( &m_sliderTimeLine );
     ui->volumeSlider->setRange( 0, 100 );
     ui->volumeSlider->setValue( AudioEngine::instance()->volume() );
 
-    ui->horizontalLayout_3->setContentsMargins( scaledX( 10 ), 0, scaledX( 8 ), 0 );
+    //ui->horizontalLayout_3->setContentsMargins( scaledX( 10 ), 0, scaledX( 8 ), 0 );
 
     m_phononTickCheckTimer.setSingleShot( true );
 
@@ -122,8 +128,8 @@ AudioControls::AudioControls( QWidget* parent )
     connect( ui->playPauseButton,  SIGNAL( clicked() ), AudioEngine::instance(), SLOT( play() ) );
     connect( ui->pauseButton,      SIGNAL( clicked() ), AudioEngine::instance(), SLOT( pause() ) );
     connect( ui->nextButton,       SIGNAL( clicked() ), AudioEngine::instance(), SLOT( next() ) );
-    connect( ui->volumeLowButton,  SIGNAL( clicked() ), AudioEngine::instance(), SLOT( lowerVolume() ) );
-    connect( ui->volumeHighButton, SIGNAL( clicked() ), AudioEngine::instance(), SLOT( raiseVolume() ) );
+//    connect( ui->volumeLowButton,  SIGNAL( clicked() ), AudioEngine::instance(), SLOT( lowerVolume() ) );
+//    connect( ui->volumeHighButton, SIGNAL( clicked() ), AudioEngine::instance(), SLOT( raiseVolume() ) );
 
     connect( ui->playPauseButton,  SIGNAL( clicked() ), SIGNAL( playPressed() ) );
     connect( ui->pauseButton,      SIGNAL( clicked() ), SIGNAL( pausePressed() ) );
@@ -131,11 +137,8 @@ AudioControls::AudioControls( QWidget* parent )
     connect( ui->repeatButton,     SIGNAL( clicked() ), SLOT( onRepeatClicked() ) );
     connect( ui->shuffleButton,    SIGNAL( clicked() ), SLOT( onShuffleClicked() ) );
 
-    connect( ui->albumLabel,       SIGNAL( clickedArtist() ), SLOT( onArtistClicked() ) );
-    connect( ui->artistTrackLabel, SIGNAL( clickedTrack() ),  SLOT( onTrackClicked() ) );
-    connect( ui->albumLabel,       SIGNAL( clickedAlbum() ),  SLOT( onAlbumClicked() ) );
-    connect( ui->socialButton,     SIGNAL( clicked() ),       SLOT( onSocialButtonClicked() ) );
-    connect( ui->loveButton,       SIGNAL( clicked( bool ) ), SLOT( onLoveButtonClicked( bool ) ) );
+//    connect( ui->socialButton,     SIGNAL( clicked() ),       SLOT( onSocialButtonClicked() ) );
+//    connect( ui->loveButton,       SIGNAL( clicked( bool ) ), SLOT( onLoveButtonClicked( bool ) ) );
     connect( ui->ownerButton,      SIGNAL( clicked() ),       SLOT( onOwnerButtonClicked() ) );
 
     connect( AudioEngine::instance(), SIGNAL( loading( Tomahawk::result_ptr ) ), SLOT( onPlaybackLoading( Tomahawk::result_ptr ) ) );
@@ -152,7 +155,9 @@ AudioControls::AudioControls( QWidget* parent )
 
     connect( ViewManager::instance(), SIGNAL( viewPageDestroyed() ), SLOT( onControlStateChanged() ) );
 
-    ui->buttonAreaLayout->setSpacing( 0 );
+//    TomahawkUtils::unmarginLayout( ui->horizontalLayout );
+//    TomahawkUtils::unmarginLayout( ui->buttonAreaLayout );
+//    ui->buttonAreaLayout->setSpacing( 0 );
     ui->stackedLayout->setSpacing( 0 );
     ui->stackedLayout->setContentsMargins( 0, 0, 0, 0 );
     ui->stackedLayout->setMargin( 0 );
@@ -161,14 +166,14 @@ AudioControls::AudioControls( QWidget* parent )
     ui->stackedLayout->setSizeConstraint( QLayout::SetFixedSize );
 
     // setFixedSize corrections for stuff in .ui :(
-    ui->buttonArea->setFixedSize( scaled( 170, 66 ) );
-    ui->coverImage->setFixedSize( scaled( 60, 60 ) );
-    ui->metaDataArea->setMaximumHeight( scaledY( 74 ) );
-    ui->widget_4->setFixedSize( scaled( 170, 66 ) );
-    ui->volumeSlider->setFixedHeight( 20 );
-    ui->verticalLayout->setContentsMargins( scaledX( 2 ), scaledY( 6 ),
-                                            0, scaledY( 6 ) );
-    setFixedHeight( scaledY( 80 ) );
+//    ui->buttonArea->setFixedSize( scaled( 170, 66 ) );
+    //ui->coverImage->setFixedSize( scaled( 60, 60 ) );
+    //ui->metaDataArea->setMaximumHeight( scaledY( 74 ) );
+    //ui->widget_4->setFixedSize( scaled( 170, 66 ) );
+//    ui->volumeSlider->setFixedHeight( 20 );
+//    ui->verticalLayout->setContentsMargins( scaledX( 2 ), scaledY( 6 ),
+//                                            0, scaledY( 6 ) );
+    setFixedHeight( scaledY( 75 ) );
 
     connect( InfoSystem::InfoSystem::instance(), SIGNAL( updatedSupportedPushTypes( Tomahawk::InfoSystem::InfoTypeSet ) ),
              this, SLOT( onInfoSystemPushTypesUpdated( Tomahawk::InfoSystem::InfoTypeSet ) ) );
@@ -231,8 +236,8 @@ AudioControls::onControlStateChanged()
     ui->nextButton->setEnabled( AudioEngine::instance()->canGoNext() );
 
     // If the ViewManager doesn't know a page for the current interface, we can't offer the jump link
-    ui->artistTrackLabel->setJumpLinkVisible( AudioEngine::instance()->currentTrackPlaylist()
-                                                && ViewManager::instance()->pageForInterface( AudioEngine::instance()->currentTrackPlaylist() ) );
+//    ui->artistTrackLabel->setJumpLinkVisible( AudioEngine::instance()->currentTrackPlaylist()
+//                                                && ViewManager::instance()->pageForInterface( AudioEngine::instance()->currentTrackPlaylist() ) );
 }
 
 
@@ -285,8 +290,8 @@ AudioControls::onPlaybackLoading( const Tomahawk::result_ptr result )
     connect( m_currentTrack->track().data(), SIGNAL( coverChanged() ), SLOT( onCoverUpdated() ) );
     connect( m_currentTrack->track().data(), SIGNAL( socialActionsLoaded() ), SLOT( onSocialActionsLoaded() ) );
 
-    ui->artistTrackLabel->setResult( result );
-    ui->albumLabel->setResult( result );
+    ui->artistLabel->setResult( result );
+    ui->trackLabel->setResult( result );
 
     const QString duration = TomahawkUtils::timeToString( result.data()->track()->duration() );
     ui->timeLabel->setFixedWidth( ui->timeLabel->fontMetrics().width( QString( duration.length(), QChar( '0' ) ) ) );
@@ -297,10 +302,16 @@ AudioControls::onPlaybackLoading( const Tomahawk::result_ptr result )
 
     ui->stackedLayout->setCurrentWidget( ui->pauseButton );
 
-    ui->loveButton->setEnabled( true );
+/*    ui->loveButton->setEnabled( true );
     ui->loveButton->setVisible( true );
     ui->socialButton->setEnabled( true );
-    ui->socialButton->setVisible( m_shouldShowShareAction );
+    ui->socialButton->setVisible( m_shouldShowShareAction );*/
+    delete ui->horizontalLayout->takeAt( 1 );
+    ui->horizontalSpacer = new QSpacerItem( 162, 8, QSizePolicy::Minimum, QSizePolicy::Minimum );
+    ui->horizontalLayout->insertSpacerItem( 1, ui->horizontalSpacer );
+    ui->horizontalLayout->invalidate();
+
+    ui->dashLabel->setVisible( true );
     ui->ownerButton->setEnabled( true );
     ui->ownerButton->setVisible( true );
 
@@ -308,8 +319,8 @@ AudioControls::onPlaybackLoading( const Tomahawk::result_ptr result )
     ui->timeLeftLabel->setToolTip( tr( "Time Remaining" ) );
     ui->shuffleButton->setToolTip( tr( "Shuffle" ) );
     ui->repeatButton->setToolTip( tr( "Repeat" ) );
-    ui->socialButton->setToolTip( tr( "Share" ) );
-    ui->loveButton->setToolTip( tr( "Love" ) );
+//    ui->socialButton->setToolTip( tr( "Share" ) );
+//    ui->loveButton->setToolTip( tr( "Love" ) );
     ui->ownerButton->setToolTip( QString( tr( "Playing from %1" ) ).arg( result->friendlySource() ) );
 
     ui->seekSlider->setRange( 0, 0 );
@@ -354,14 +365,16 @@ AudioControls::onCoverUpdated()
 void
 AudioControls::setCover()
 {
-    if ( !m_currentTrack->track()->cover( ui->coverImage->size() ).isNull() )
+    if ( !m_currentTrack->track()->cover( QSize( 0, 0 ) ).isNull() )
     {
-        QPixmap cover;
-        cover = m_currentTrack->track()->cover( ui->coverImage->size() );
-        ui->coverImage->setPixmap( TomahawkUtils::createRoundedImage( cover, QSize( 0, 0 ) ), false );
+        QPixmap cover = m_currentTrack->track()->cover( QSize( 0, 0 ) );
+        setBackground( QPixmap::fromImage( TomahawkUtils::blurred( cover.toImage(), cover.rect(), 10, false, true ) ) );
     }
     else
-        ui->coverImage->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::DefaultAlbumCover, TomahawkUtils::Original, ui->coverImage->size() ), true );
+    {
+        setBackground( QPixmap() );
+    }
+//        ui->coverImage->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::DefaultAlbumCover, TomahawkUtils::Original, ui->coverImage->size() ), true );
 }
 
 
@@ -388,10 +401,10 @@ AudioControls::onInfoSystemPushTypesUpdated( InfoSystem::InfoTypeSet supportedTy
         m_shouldShowShareAction = false;
     }
 
-    if ( AudioEngine::instance()->state() == AudioEngine::Stopped )
+/*    if ( AudioEngine::instance()->state() == AudioEngine::Stopped )
         ui->socialButton->setVisible( false );
     else
-        ui->socialButton->setVisible( m_shouldShowShareAction );
+        ui->socialButton->setVisible( m_shouldShowShareAction );*/
 }
 
 
@@ -400,13 +413,13 @@ AudioControls::setSocialActions()
 {
     if ( m_currentTrack->track()->loved() )
     {
-        ui->loveButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::Loved, TomahawkUtils::Original, scaled( 20, 20 ) ) );
-        ui->loveButton->setChecked( true );
+/*        ui->loveButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::Loved, TomahawkUtils::Original, scaled( 20, 20 ) ) );
+        ui->loveButton->setChecked( true );*/
     }
     else
     {
-        ui->loveButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::NotLoved, TomahawkUtils::Original, scaled( 20, 20 ) ) );
-        ui->loveButton->setChecked( false );
+/*        ui->loveButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::NotLoved, TomahawkUtils::Original, scaled( 20, 20 ) ) );
+        ui->loveButton->setChecked( false );*/
     }
 }
 
@@ -445,11 +458,12 @@ AudioControls::onPlaybackStopped()
     tDebug( LOGEXTRA ) << Q_FUNC_INFO;
     m_currentTrack.clear();
 
-    ui->artistTrackLabel->setText( "" );
-    ui->albumLabel->setText( "" );
+    ui->artistLabel->setText( "" );
+    ui->trackLabel->setText( "" );
+    ui->dashLabel->setVisible( false );
     ui->timeLabel->setText( "" );
     ui->timeLeftLabel->setText( "" );
-    ui->coverImage->setPixmap( QPixmap(), false );
+//    ui->coverImage->setPixmap( QPixmap(), false );
     ui->seekSlider->setVisible( false );
     m_sliderTimeLine.stop();
     m_sliderTimeLine.setCurrentTime( 0 );
@@ -457,10 +471,10 @@ AudioControls::onPlaybackStopped()
     ui->ownerButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::DefaultResolver, TomahawkUtils::Original, QSize( 34, 34 ) ) );
 
     ui->stackedLayout->setCurrentWidget( ui->playPauseButton );
-    ui->loveButton->setEnabled( false );
+/*    ui->loveButton->setEnabled( false );
     ui->loveButton->setVisible( false );
     ui->socialButton->setEnabled( false );
-    ui->socialButton->setVisible( false );
+    ui->socialButton->setVisible( false );*/
     ui->ownerButton->setEnabled( false );
     ui->ownerButton->setVisible( false );
 
@@ -468,11 +482,16 @@ AudioControls::onPlaybackStopped()
     ui->timeLeftLabel->setToolTip( "" );
     ui->shuffleButton->setToolTip( "" );
     ui->repeatButton->setToolTip( "" );
-    ui->socialButton->setToolTip( "" );
-    ui->loveButton->setToolTip( "" );
+//    ui->socialButton->setToolTip( "" );
+//    ui->loveButton->setToolTip( "" );
     ui->ownerButton->setToolTip( "" );
 
     onControlStateChanged();
+
+    delete ui->horizontalLayout->takeAt( 1 );
+    ui->horizontalSpacer = new QSpacerItem( 162, 8, QSizePolicy::Expanding, QSizePolicy::Minimum );
+    ui->horizontalLayout->insertSpacerItem( 1, ui->horizontalSpacer );
+    ui->horizontalLayout->invalidate();
 }
 
 
@@ -575,24 +594,24 @@ AudioControls::onRepeatModeChanged( PlaylistModes::RepeatMode mode )
         case PlaylistModes::NoRepeat:
         {
             // switch to RepeatOne
-            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOff, TomahawkUtils::Original, scaled( 34, 21 ) ) );
-            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOffPressed, TomahawkUtils::Original, scaled( 34, 21 ) ), QIcon::Off, QIcon::Active );
+            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOff, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOffPressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
         }
         break;
 
         case PlaylistModes::RepeatOne:
         {
             // switch to RepeatAll
-            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOne, TomahawkUtils::Original, scaled( 34, 21 ) ) );
-            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOnePressed, TomahawkUtils::Original, scaled( 34, 21 ) ), QIcon::Off, QIcon::Active );
+            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOne, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatOnePressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
         }
         break;
 
         case PlaylistModes::RepeatAll:
         {
             // switch to NoRepeat
-            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatAll, TomahawkUtils::Original, scaled( 34, 21 ) ) );
-            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatAllPressed, TomahawkUtils::Original, scaled( 34, 21 ) ), QIcon::Off, QIcon::Active );
+            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatAll, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+            ui->repeatButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::RepeatAllPressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
         }
         break;
 
@@ -643,15 +662,15 @@ AudioControls::onShuffleModeChanged( bool enabled )
 
     if ( m_shuffled )
     {
-        ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOn, TomahawkUtils::Original, scaled( 34, 21 ) ) );
-        ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOnPressed, TomahawkUtils::Original, scaled( 34, 21 ) ), QIcon::Off, QIcon::Active );
+        ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOn, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+        ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOnPressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
 
         ui->repeatButton->setEnabled( false );
     }
     else
     {
-        ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOff, TomahawkUtils::Original, scaled( 34, 21 ) ) );
-        ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOffPressed, TomahawkUtils::Original, scaled( 34, 21 ) ), QIcon::Off, QIcon::Active );
+        ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOff, TomahawkUtils::Original, scaled( 16, 16 ) ) );
+        ui->shuffleButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::ShuffleOffPressed, TomahawkUtils::Original, scaled( 16, 16 ) ), QIcon::Off, QIcon::Active );
 
         ui->repeatButton->setEnabled( true );
     }
@@ -667,27 +686,6 @@ AudioControls::onShuffleClicked()
 }
 
 
-void
-AudioControls::onArtistClicked()
-{
-    ViewManager::instance()->show( m_currentTrack->track()->artistPtr() );
-}
-
-
-void
-AudioControls::onAlbumClicked()
-{
-    ViewManager::instance()->show( m_currentTrack->track()->albumPtr() );
-}
-
-
-void
-AudioControls::onTrackClicked()
-{
-    ViewManager::instance()->show( m_currentTrack->toQuery() );
-}
-
-
 void
 AudioControls::dragEnterEvent( QDragEnterEvent* e )
 {
@@ -735,6 +733,7 @@ AudioControls::droppedTracks( QList< query_ptr > tracks )
 void
 AudioControls::onSocialButtonClicked()
 {
+/*
     if ( !m_socialWidget.isNull() )
         m_socialWidget.data()->close();
 
@@ -743,9 +742,9 @@ AudioControls::onSocialButtonClicked()
     socialWidgetPos.rx() += ui->socialButton->width() / 2;
     socialWidgetPos.ry() += scaled( 0, 6 ).height();
 
-    m_socialWidget.data()->setPosition( ui->metaDataArea->mapToGlobal( socialWidgetPos ) );
+//    m_socialWidget.data()->setPosition( ui->metaDataArea->mapToGlobal( socialWidgetPos ) );
     m_socialWidget.data()->setQuery( m_currentTrack->toQuery() );
-    m_socialWidget.data()->show();
+    m_socialWidget.data()->show();*/
 }
 
 
@@ -754,13 +753,13 @@ AudioControls::onLoveButtonClicked( bool checked )
 {
     if ( checked )
     {
-        ui->loveButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::Loved, TomahawkUtils::Original, scaled( 20, 20 ) ) );
+//        ui->loveButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::Loved, TomahawkUtils::Original, scaled( 20, 20 ) ) );
 
         m_currentTrack->track()->setLoved( true );
     }
     else
     {
-        ui->loveButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::NotLoved, TomahawkUtils::Original, scaled( 20, 20 ) ) );
+//        ui->loveButton->setPixmap( TomahawkUtils::defaultPixmap( TomahawkUtils::NotLoved, TomahawkUtils::Original, scaled( 20, 20 ) ) );
 
         m_currentTrack->track()->setLoved( false );
     }
diff --git a/src/tomahawk/AudioControls.h b/src/tomahawk/AudioControls.h
index 107405657..f4a3d9823 100644
--- a/src/tomahawk/AudioControls.h
+++ b/src/tomahawk/AudioControls.h
@@ -25,8 +25,8 @@
 #include "PlaylistInterface.h"
 #include "Query.h"
 #include "utils/DpiScaler.h"
+#include "widgets/BackgroundWidget.h"
 
-#include <QWidget>
 #include <QTimer>
 #include <QTimeLine>
 
@@ -40,7 +40,7 @@ namespace Ui
     class AudioControls;
 }
 
-class AudioControls : public QWidget, private TomahawkUtils::DpiScaler
+class AudioControls : public BackgroundWidget, private TomahawkUtils::DpiScaler
 {
 Q_OBJECT
 
@@ -79,9 +79,6 @@ private slots:
     void onRepeatClicked();
     void onShuffleClicked();
 
-    void onArtistClicked();
-    void onAlbumClicked();
-    void onTrackClicked();
     void onSocialButtonClicked();
     void onLoveButtonClicked( bool );
     void onOwnerButtonClicked();
@@ -93,6 +90,8 @@ private slots:
 
     void onInfoSystemPushTypesUpdated( Tomahawk::InfoSystem::InfoTypeSet supportedTypes );
 
+protected:
+
 private:
     void setCover();
     void setSocialActions();
diff --git a/src/tomahawk/AudioControls.ui b/src/tomahawk/AudioControls.ui
index ce7f56fd5..aed7d6ab4 100644
--- a/src/tomahawk/AudioControls.ui
+++ b/src/tomahawk/AudioControls.ui
@@ -1,615 +1,454 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <ui version="4.0">
-<class>AudioControls</class>
-<widget class="QWidget" name="AudioControls">
-<property name="geometry">
-<rect>
-<x>0</x>
-<y>0</y>
-<width>929</width>
-<height>80</height>
-</rect>
-</property>
-<property name="sizePolicy">
-<sizepolicy hsizetype="Preferred" vsizetype="Fixed">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="minimumSize">
-<size>
-<width>0</width>
-<height>80</height>
-</size>
-</property>
-<property name="maximumSize">
-<size>
-<width>16777215</width>
-<height>80</height>
-</size>
-</property>
-<layout class="QHBoxLayout" name="horizontalLayout_4">
-<property name="topMargin">
-<number>0</number>
-</property>
-<property name="bottomMargin">
-<number>0</number>
-</property>
-<property name="leftMargin">
-<number>0</number>
-</property>
-<property name="rightMargin">
-<number>0</number>
-</property>
-<item>
-<widget class="QWidget" name="buttonArea" native="true">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="minimumSize">
-<size>
-<width>170</width>
-<height>0</height>
-</size>
-</property>
-<property name="maximumSize">
-<size>
-<width>170</width>
-<height>16777215</height>
-</size>
-</property>
-<layout class="QHBoxLayout" name="buttonAreaLayout">
-<item>
-<spacer name="horizontalSpacer_2">
-<property name="orientation">
-<enum>Qt::Horizontal</enum>
-</property>
-<property name="sizeHint" stdset="0">
-<size>
-<width>40</width>
-<height>20</height>
-</size>
-</property>
-</spacer>
-</item>
-<item>
-<widget class="ImageButton" name="prevButton">
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Prev</string>
-</property>
-</widget>
-</item>
-<item>
-<layout class="QStackedLayout" name="stackedLayout">
-<property name="spacing">
-<number>0</number>
-</property>
-<item>
-<widget class="ImageButton" name="playPauseButton">
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Play</string>
-</property>
-</widget>
-</item>
-<item>
-<widget class="ImageButton" name="pauseButton">
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Pause</string>
-</property>
-</widget>
-</item>
-</layout>
-</item>
-<item>
-<widget class="ImageButton" name="nextButton">
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Next</string>
-</property>
-</widget>
-</item>
-<item>
-<spacer name="horizontalSpacer">
-<property name="orientation">
-<enum>Qt::Horizontal</enum>
-</property>
-<property name="sizeHint" stdset="0">
-<size>
-<width>40</width>
-<height>20</height>
-</size>
-</property>
-</spacer>
-</item>
-</layout>
-</widget>
-</item>
-<item>
-<widget class="QWidget" name="metaDataArea" native="true">
-<property name="maximumSize">
-<size>
-<width>16777215</width>
-<height>74</height>
-</size>
-</property>
-<layout class="QHBoxLayout" name="horizontalLayout_3">
-<property name="leftMargin">
-<number>8</number>
-</property>
-<property name="topMargin">
-<number>0</number>
-</property>
-<property name="rightMargin">
-<number>10</number>
-</property>
-<property name="bottomMargin">
-<number>0</number>
-</property>
-<item>
-<widget class="FadingPixmap" name="coverImage">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="minimumSize">
-<size>
-<width>60</width>
-<height>60</height>
-</size>
-</property>
-<property name="maximumSize">
-<size>
-<width>60</width>
-<height>60</height>
-</size>
-</property>
-<property name="alignment">
-<set>Qt::AlignCenter</set>
-</property>
-</widget>
-</item>
-<item>
-<layout class="QVBoxLayout" name="verticalLayout">
-<property name="leftMargin">
-<number>2</number>
-</property>
-<property name="topMargin">
-<number>6</number>
-</property>
-<property name="bottomMargin">
-<number>2</number>
-</property>
-<property name="rightMargin">
-<number>0</number>
-</property>
-<item>
-<layout class="QHBoxLayout" name="horizontalLayout_2" stretch="1,0,0">
-<property name="topMargin">
-<number>0</number>
-</property>
-<property name="bottomMargin">
-<number>0</number>
-</property>
-<property name="leftMargin">
-<number>0</number>
-</property>
-<property name="rightMargin">
-<number>0</number>
-</property>
-<item>
-<layout class="QVBoxLayout" name="trackLabelLayout">
-<property name="topMargin">
-<number>0</number>
-</property>
-<property name="bottomMargin">
-<number>0</number>
-</property>
-<property name="leftMargin">
-<number>0</number>
-</property>
-<property name="rightMargin">
-<number>0</number>
-</property>
-<property name="spacing">
-<number>3</number>
-</property>
-<item>
-<widget class="QueryLabel" name="artistTrackLabel">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Preferred" vsizetype="Minimum">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="minimumSize">
-<size>
-<width>0</width>
-<height>16</height>
-</size>
-</property>
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Artist</string>
-</property>
-</widget>
-</item>
-<item>
-<widget class="QueryLabel" name="albumLabel">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Preferred" vsizetype="Minimum">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="minimumSize">
-<size>
-<width>0</width>
-<height>16</height>
-</size>
-</property>
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Album</string>
-</property>
-</widget>
-</item>
-</layout>
-</item>
-<item>
-<spacer name="horizontalSpacer_3">
-<property name="orientation">
-<enum>Qt::Horizontal</enum>
-</property>
-<property name="sizeHint" stdset="0">
-<size>
-<width>4</width>
-<height>8</height>
-</size>
-</property>
-</spacer>
-</item>
-<item>
-<layout class="QVBoxLayout" name="verticalLayout_2">
-<item>
-<layout class="QHBoxLayout" name="socialLayout">
-<item>
-<spacer name="socialSpacer">
-<property name="orientation">
-<enum>Qt::Horizontal</enum>
-</property>
-<property name="sizeHint" stdset="0">
-<size>
-<width>20</width>
-<height>1</height>
-</size>
-</property>
-</spacer>
-</item>
-<item>
-<widget class="ImageButton" name="socialButton">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Minimum" vsizetype="Minimum">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="cursor">
-<cursorShape>PointingHandCursor</cursorShape>
-</property>
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">social</string>
-</property>
-</widget>
-</item>
-<item>
-<widget class="ImageButton" name="loveButton">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Minimum" vsizetype="Minimum">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="cursor">
-<cursorShape>PointingHandCursor</cursorShape>
-</property>
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">love</string>
-</property>
-</widget>
-</item>
-</layout>
-</item>
-<item>
-<spacer name="verticalSpacer_2">
-<property name="orientation">
-<enum>Qt::Vertical</enum>
-</property>
-<property name="sizeHint" stdset="0">
-<size>
-<width>20</width>
-<height>1</height>
-</size>
-</property>
-</spacer>
-</item>
-</layout>
-</item>
-<item>
-<widget class="ImageButton" name="ownerButton">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Minimum" vsizetype="Minimum">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="cursor">
-<cursorShape>PointingHandCursor</cursorShape>
-</property>
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">resolver</string>
-</property>
-</widget>
-</item>
-</layout>
-</item>
-<item>
-<spacer name="verticalSpacer">
-<property name="orientation">
-<enum>Qt::Vertical</enum>
-</property>
-<property name="sizeHint" stdset="0">
-<size>
-<width>20</width>
-<height>4</height>
-</size>
-</property>
-</spacer>
-</item>
-<item>
-<layout class="QHBoxLayout" name="horizontalLayout">
-<property name="leftMargin">
-<number>4</number>
-</property>
-<property name="rightMargin">
-<number>0</number>
-</property>
-<property name="topMargin">
-<number>0</number>
-</property>
-<property name="bottomMargin">
-<number>0</number>
-</property>
-<item>
-<widget class="QLabel" name="timeLabel">
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Time</string>
-</property>
-<property name="alignment">
-<set>Qt::AlignLeft|Qt::AlignVCenter</set>
-</property>
-</widget>
-</item>
-<item>
-<widget class="SeekSlider" name="seekSlider">
-<property name="minimumSize">
-<size>
-<width>0</width>
-<height>20</height>
-</size>
-</property>
-<property name="maximumSize">
-<size>
-<width>16777215</width>
-<height>20</height>
-</size>
-</property>
-<property name="orientation">
-<enum>Qt::Horizontal</enum>
-</property>
-</widget>
-</item>
-<item>
-<widget class="QLabel" name="timeLeftLabel">
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Time Left</string>
-</property>
-<property name="alignment">
-<set>Qt::AlignRight|Qt::AlignVCenter</set>
-</property>
-</widget>
-</item>
-</layout>
-</item>
-</layout>
-</item>
-</layout>
-</widget>
-</item>
-<item>
-<widget class="QWidget" name="widget_4" native="true">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="minimumSize">
-<size>
-<width>170</width>
-<height>0</height>
-</size>
-</property>
-<property name="maximumSize">
-<size>
-<width>170</width>
-<height>66</height>
-</size>
-</property>
-<layout class="QVBoxLayout" name="verticalLayout_3">
-<property name="spacing">
-<number>2</number>
-</property>
-<property name="topMargin">
-<number>0</number>
-</property>
-<property name="rightMargin">
-<number>0</number>
-</property>
-<property name="leftMargin">
-<number>12</number>
-</property>
-<property name="bottomMargin">
-<number>0</number>
-</property>
-<item>
-<widget class="QWidget" name="widget_6" native="true">
-<layout class="QHBoxLayout" name="horizontalLayout_7">
-<property name="spacing">
-<number>2</number>
-</property>
-<property name="margin">
-<number>2</number>
-</property>
-<item>
-<spacer name="horizontalSpacer_6">
-<property name="orientation">
-<enum>Qt::Horizontal</enum>
-</property>
-<property name="sizeHint" stdset="0">
-<size>
-<width>40</width>
-<height>20</height>
-</size>
-</property>
-</spacer>
-</item>
-<item>
-<widget class="ImageButton" name="shuffleButton">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Minimum" vsizetype="Minimum">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Shuffle</string>
-</property>
-</widget>
-</item>
-<item>
-<widget class="ImageButton" name="repeatButton">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Minimum" vsizetype="Minimum">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Repeat</string>
-</property>
-</widget>
-</item>
-<item>
-<spacer name="horizontalSpacer_7">
-<property name="orientation">
-<enum>Qt::Horizontal</enum>
-</property>
-<property name="sizeHint" stdset="0">
-<size>
-<width>40</width>
-<height>20</height>
-</size>
-</property>
-</spacer>
-</item>
-</layout>
-</widget>
-</item>
-<item>
-<widget class="QWidget" name="widget_5" native="true">
-<layout class="QHBoxLayout" name="horizontalLayout_6">
-<property name="spacing">
-<number>2</number>
-</property>
-<property name="margin">
-<number>0</number>
-</property>
-<item>
-<widget class="ImageButton" name="volumeLowButton">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Minimum" vsizetype="Minimum">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">Low</string>
-</property>
-</widget>
-</item>
-<item>
-<widget class="SeekSlider" name="volumeSlider">
-<property name="minimumSize">
-<size>
-<width>0</width>
-<height>20</height>
-</size>
-</property>
-<property name="maximumSize">
-<size>
-<width>16777215</width>
-<height>20</height>
-</size>
-</property>
-<property name="orientation">
-<enum>Qt::Horizontal</enum>
-</property>
-</widget>
-</item>
-<item>
-<widget class="ImageButton" name="volumeHighButton">
-<property name="sizePolicy">
-<sizepolicy hsizetype="Minimum" vsizetype="Minimum">
-<horstretch>0</horstretch>
-<verstretch>0</verstretch>
-</sizepolicy>
-</property>
-<property name="text">
-<string notr="true" extracomment="not translatable because is placeholder text">High</string>
-</property>
-</widget>
-</item>
-</layout>
-</widget>
-</item>
-</layout>
-</widget>
-</item>
-</layout>
-</widget>
-<customwidgets>
-<customwidget>
-<class>SeekSlider</class>
-<extends>QSlider</extends>
-<header location="global">widgets/SeekSlider.h</header>
-</customwidget>
-<customwidget>
-<class>ImageButton</class>
-<extends>QPushButton</extends>
-<header>widgets/ImageButton.h</header>
-</customwidget>
-<customwidget>
-<class>QueryLabel</class>
-<extends>QLabel</extends>
-<header>widgets/QueryLabel.h</header>
-</customwidget>
-<customwidget>
-<class>FadingPixmap</class>
-<extends>QLabel</extends>
-<header>widgets/FadingPixmap.h</header>
-</customwidget>
-</customwidgets>
-<resources/>
-<connections/>
-</ui>
\ No newline at end of file
+ <class>AudioControls</class>
+ <widget class="QWidget" name="AudioControls">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>1014</width>
+    <height>108</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>Form</string>
+  </property>
+  <layout class="QVBoxLayout" name="verticalLayout_3">
+   <property name="leftMargin">
+    <number>32</number>
+   </property>
+   <property name="topMargin">
+    <number>16</number>
+   </property>
+   <property name="rightMargin">
+    <number>32</number>
+   </property>
+   <property name="bottomMargin">
+    <number>24</number>
+   </property>
+   <item>
+    <layout class="QVBoxLayout" name="verticalLayout">
+     <property name="margin">
+      <number>0</number>
+     </property>
+     <item>
+      <layout class="QHBoxLayout" name="horizontalLayout_2" stretch="0,0,0,0">
+       <property name="margin">
+        <number>0</number>
+       </property>
+       <item>
+        <spacer name="horizontalSpacer_4">
+         <property name="orientation">
+          <enum>Qt::Horizontal</enum>
+         </property>
+         <property name="sizeHint" stdset="0">
+          <size>
+           <width>40</width>
+           <height>20</height>
+          </size>
+         </property>
+        </spacer>
+       </item>
+       <item>
+        <widget class="ImageButton" name="ownerButton">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Minimum" vsizetype="Minimum">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="cursor">
+          <cursorShape>PointingHandCursor</cursorShape>
+         </property>
+         <property name="text">
+          <string notr="true" extracomment="not translatable because is placeholder text">resolver</string>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QueryLabel" name="artistLabel">
+         <property name="text">
+          <string notr="true">Artist</string>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QLabel" name="dashLabel">
+         <property name="text">
+          <string notr="true">-</string>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QueryLabel" name="trackLabel">
+         <property name="text">
+          <string notr="true">Track</string>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <spacer name="horizontalSpacer_5">
+         <property name="orientation">
+          <enum>Qt::Horizontal</enum>
+         </property>
+         <property name="sizeHint" stdset="0">
+          <size>
+           <width>40</width>
+           <height>20</height>
+          </size>
+         </property>
+        </spacer>
+       </item>
+      </layout>
+     </item>
+     <item>
+      <spacer name="verticalSpacer">
+       <property name="orientation">
+        <enum>Qt::Vertical</enum>
+       </property>
+       <property name="sizeType">
+        <enum>QSizePolicy::Fixed</enum>
+       </property>
+       <property name="sizeHint" stdset="0">
+        <size>
+         <width>20</width>
+         <height>2</height>
+        </size>
+       </property>
+      </spacer>
+     </item>
+     <item>
+      <layout class="QHBoxLayout" name="horizontalLayout" stretch="0,0,1,0,0,0">
+       <property name="margin">
+        <number>0</number>
+       </property>
+       <item>
+        <widget class="QWidget" name="buttonArea" native="true">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="minimumSize">
+          <size>
+           <width>170</width>
+           <height>0</height>
+          </size>
+         </property>
+         <property name="maximumSize">
+          <size>
+           <width>170</width>
+           <height>16777215</height>
+          </size>
+         </property>
+         <layout class="QHBoxLayout" name="buttonAreaLayout">
+          <property name="spacing">
+           <number>0</number>
+          </property>
+          <property name="sizeConstraint">
+           <enum>QLayout::SetMinimumSize</enum>
+          </property>
+          <property name="margin">
+           <number>0</number>
+          </property>
+          <item>
+           <widget class="ImageButton" name="prevButton">
+            <property name="text">
+             <string notr="true" extracomment="not translatable because is placeholder text">Prev</string>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <spacer name="horizontalSpacer_3">
+            <property name="orientation">
+             <enum>Qt::Horizontal</enum>
+            </property>
+            <property name="sizeType">
+             <enum>QSizePolicy::Fixed</enum>
+            </property>
+            <property name="sizeHint" stdset="0">
+             <size>
+              <width>16</width>
+              <height>8</height>
+             </size>
+            </property>
+           </spacer>
+          </item>
+          <item>
+           <layout class="QStackedLayout" name="stackedLayout">
+            <property name="margin">
+             <number>0</number>
+            </property>
+            <property name="spacing">
+             <number>0</number>
+            </property>
+            <item row="0" column="0">
+             <widget class="ImageButton" name="playPauseButton">
+              <property name="text">
+               <string notr="true" extracomment="not translatable because is placeholder text">Play</string>
+              </property>
+             </widget>
+            </item>
+            <item row="0" column="0">
+             <widget class="ImageButton" name="pauseButton">
+              <property name="text">
+               <string notr="true" extracomment="not translatable because is placeholder text">Pause</string>
+              </property>
+             </widget>
+            </item>
+           </layout>
+          </item>
+          <item>
+           <spacer name="horizontalSpacer_8">
+            <property name="orientation">
+             <enum>Qt::Horizontal</enum>
+            </property>
+            <property name="sizeType">
+             <enum>QSizePolicy::Fixed</enum>
+            </property>
+            <property name="sizeHint" stdset="0">
+             <size>
+              <width>16</width>
+              <height>8</height>
+             </size>
+            </property>
+           </spacer>
+          </item>
+          <item>
+           <widget class="ImageButton" name="nextButton">
+            <property name="text">
+             <string notr="true" extracomment="not translatable because is placeholder text">Next</string>
+            </property>
+           </widget>
+          </item>
+         </layout>
+        </widget>
+       </item>
+       <item>
+        <spacer name="horizontalSpacer">
+         <property name="orientation">
+          <enum>Qt::Horizontal</enum>
+         </property>
+         <property name="sizeType">
+          <enum>QSizePolicy::Minimum</enum>
+         </property>
+         <property name="sizeHint" stdset="0">
+          <size>
+           <width>162</width>
+           <height>8</height>
+          </size>
+         </property>
+        </spacer>
+       </item>
+       <item>
+        <widget class="QLabel" name="timeLabel">
+         <property name="text">
+          <string notr="true" extracomment="not translatable because is placeholder text">Time</string>
+         </property>
+         <property name="alignment">
+          <set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter</set>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="SeekSlider" name="seekSlider">
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="MinimumExpanding" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="minimumSize">
+          <size>
+           <width>0</width>
+           <height>4</height>
+          </size>
+         </property>
+         <property name="maximumSize">
+          <size>
+           <width>16777215</width>
+           <height>4</height>
+          </size>
+         </property>
+         <property name="orientation">
+          <enum>Qt::Horizontal</enum>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QLabel" name="timeLeftLabel">
+         <property name="text">
+          <string notr="true" extracomment="not translatable because is placeholder text">Time Left</string>
+         </property>
+         <property name="alignment">
+          <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QWidget" name="widget_5" native="true">
+         <layout class="QHBoxLayout" name="horizontalLayout_6">
+          <property name="spacing">
+           <number>2</number>
+          </property>
+          <property name="margin">
+           <number>0</number>
+          </property>
+          <item>
+           <spacer name="horizontalSpacer_6">
+            <property name="orientation">
+             <enum>Qt::Horizontal</enum>
+            </property>
+            <property name="sizeType">
+             <enum>QSizePolicy::Fixed</enum>
+            </property>
+            <property name="sizeHint" stdset="0">
+             <size>
+              <width>32</width>
+              <height>8</height>
+             </size>
+            </property>
+           </spacer>
+          </item>
+          <item>
+           <widget class="ImageButton" name="shuffleButton">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Minimum" vsizetype="Minimum">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="text">
+             <string notr="true" extracomment="not translatable because is placeholder text">Shuffle</string>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <spacer name="horizontalSpacer_2">
+            <property name="orientation">
+             <enum>Qt::Horizontal</enum>
+            </property>
+            <property name="sizeType">
+             <enum>QSizePolicy::Fixed</enum>
+            </property>
+            <property name="sizeHint" stdset="0">
+             <size>
+              <width>32</width>
+              <height>8</height>
+             </size>
+            </property>
+           </spacer>
+          </item>
+          <item>
+           <widget class="ImageButton" name="repeatButton">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Minimum" vsizetype="Minimum">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="text">
+             <string notr="true" extracomment="not translatable because is placeholder text">Repeat</string>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <spacer name="horizontalSpacer_9">
+            <property name="orientation">
+             <enum>Qt::Horizontal</enum>
+            </property>
+            <property name="sizeType">
+             <enum>QSizePolicy::Fixed</enum>
+            </property>
+            <property name="sizeHint" stdset="0">
+             <size>
+              <width>32</width>
+              <height>8</height>
+             </size>
+            </property>
+           </spacer>
+          </item>
+          <item>
+           <widget class="ImageButton" name="volumeLowButton">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Minimum" vsizetype="Minimum">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="text">
+             <string notr="true" extracomment="not translatable because is placeholder text">Low</string>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <spacer name="horizontalSpacer_7">
+            <property name="orientation">
+             <enum>Qt::Horizontal</enum>
+            </property>
+            <property name="sizeType">
+             <enum>QSizePolicy::Fixed</enum>
+            </property>
+            <property name="sizeHint" stdset="0">
+             <size>
+              <width>4</width>
+              <height>8</height>
+             </size>
+            </property>
+           </spacer>
+          </item>
+          <item>
+           <widget class="SeekSlider" name="volumeSlider">
+            <property name="sizePolicy">
+             <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+              <horstretch>0</horstretch>
+              <verstretch>0</verstretch>
+             </sizepolicy>
+            </property>
+            <property name="minimumSize">
+             <size>
+              <width>80</width>
+              <height>4</height>
+             </size>
+            </property>
+            <property name="maximumSize">
+             <size>
+              <width>80</width>
+              <height>4</height>
+             </size>
+            </property>
+            <property name="orientation">
+             <enum>Qt::Horizontal</enum>
+            </property>
+           </widget>
+          </item>
+         </layout>
+        </widget>
+       </item>
+      </layout>
+     </item>
+    </layout>
+   </item>
+  </layout>
+ </widget>
+ <customwidgets>
+  <customwidget>
+   <class>SeekSlider</class>
+   <extends>QSlider</extends>
+   <header location="global">widgets/SeekSlider.h</header>
+  </customwidget>
+  <customwidget>
+   <class>ImageButton</class>
+   <extends>QPushButton</extends>
+   <header>widgets/ImageButton.h</header>
+  </customwidget>
+  <customwidget>
+   <class>QueryLabel</class>
+   <extends>QLabel</extends>
+   <header>widgets/QueryLabel.h</header>
+  </customwidget>
+ </customwidgets>
+ <resources/>
+ <connections/>
+</ui>