Add Mpris Controller

2 years ago · 140ad25026
parent cd167f27cb
commit 140ad25026
18 changed files with 185 additions and 4 deletions
--- a/qml/ControlCenter.qml
+++ b/qml/ControlCenter.qml
@ -15,6 +15,8 @@ ControlCenterDialog {

    property point position: Qt.point(0, 0)

+    onWidthChanged: adjustCorrectLocation()
+    onHeightChanged: adjustCorrectLocation()
    onPositionChanged: adjustCorrectLocation()

    color: "transparent"
@ -185,6 +187,11 @@ ControlCenterDialog {
            }
        }

+        MprisController {
+            height: 100
+            Layout.fillWidth: true
+        }
+
        Item {
            id: brightnessItem
            Layout.fillWidth: true
--- a/qml/DockItem.qml
+++ b/qml/DockItem.qml
@ -145,7 +145,7 @@ Item {
        id: activeDot
        width: parent.height * 0.07
        height: width
-        color: Meui.Theme.textColor
+        color: isActive ? Meui.Theme.highlightColor : Meui.Theme.textColor
        opacity: isActive ? 1 : 0.4
        Behavior on opacity {
            NumberAnimation { duration: 125 }
--- a/qml/MprisController.qml
+++ b/qml/MprisController.qml
@ -0,0 +1,105 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import MeuiKit 1.0 as Meui
+import Cyber.Mpris 1.0
+
+Item {
+    id: control
+    visible: mprisManager.availableServices.length > 0
+
+    property bool isPlaying: mprisManager.currentService && mprisManager.playbackStatus === Mpris.Playing
+
+    MprisManager {
+        id: mprisManager
+    }
+
+    Meui.RoundedRect {
+        id: _background
+        anchors.fill: parent
+        anchors.margins: 0
+        radius: Meui.Theme.bigRadius
+        color: Meui.Theme.backgroundColor
+        opacity: 0.3
+    }
+
+    RowLayout {
+        id: _mainLayout
+        anchors.fill: parent
+        anchors.margins: Meui.Units.largeSpacing
+
+        Item {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            ColumnLayout {
+                anchors.fill: parent
+
+                Item {
+                    Layout.fillHeight: true
+                }
+
+                Label {
+                    id: songLabel
+                    Layout.fillWidth: true
+                    text: if (mprisManager.currentService) {
+                        var titleTag = Mpris.metadataToString(Mpris.Title)
+
+                        return (titleTag in mprisManager.metadata) ? mprisManager.metadata[titleTag].toString() : ""
+                    }
+                    elide: Text.ElideRight
+                }
+
+                Label {
+                    id: artistLabel
+                    Layout.fillWidth: true
+                    text: if (mprisManager.currentService) {
+                        var artistTag = Mpris.metadataToString(Mpris.Artist)
+
+                        return (artistTag in mprisManager.metadata) ? mprisManager.metadata[artistTag].toString() : ""
+                    }
+                    elide: Text.ElideRight
+                }
+
+                Item {
+                    Layout.fillHeight: true
+                }
+            }
+        }
+
+        Item {
+            id: _buttons
+            Layout.fillHeight: true
+            Layout.preferredWidth: _mainLayout.width / 3
+
+            RowLayout {
+                anchors.fill: parent
+
+                IconButton {
+                    width: 33
+                    height: 33
+                    source: "qrc:/svg/" + (Meui.Theme.darkMode ? "dark" : "light") + "/media-skip-backward-symbolic.svg"
+                    onLeftButtonClicked: if (mprisManager.canGoPrevious) mprisManager.previous()
+                }
+
+                IconButton {
+                    width: 33
+                    height: 33
+                    source: control.isPlaying ? "qrc:/svg/" + (Meui.Theme.darkMode ? "dark" : "light") + "/media-playback-pause-symbolic.svg"
+                                              : "qrc:/svg/" + (Meui.Theme.darkMode ? "dark" : "light") + "/media-playback-start-symbolic.svg"
+                    onLeftButtonClicked:
+                        if ((control.isPlaying && mprisManager.canPause) || (!control.isPlaying && mprisManager.canPlay)) {
+                            mprisManager.playPause()
+                        }
+                }
+
+                IconButton {
+                    width: 33
+                    height: 33
+                    source: "qrc:/svg/" + (Meui.Theme.darkMode ? "dark" : "light") + "/media-skip-forward-symbolic.svg"
+                    onLeftButtonClicked: if (mprisManager.canGoPrevious) if (mprisManager.canGoNext) mprisManager.next()
+                }
+            }
+        }
+    }
+}
--- a/resources.qrc
+++ b/resources.qrc
@ -89,5 +89,14 @@
        <file>svg/light/network-wireless-connected-100.svg</file>
        <file>qml/CardItem.qml</file>
        <file>svg/light/bluetooth-symbolic.svg</file>
+        <file>qml/MprisController.qml</file>
+        <file>svg/dark/media-playback-pause-symbolic.svg</file>
+        <file>svg/dark/media-playback-start-symbolic.svg</file>
+        <file>svg/dark/media-skip-backward-symbolic.svg</file>
+        <file>svg/dark/media-skip-forward-symbolic.svg</file>
+        <file>svg/light/media-playback-pause-symbolic.svg</file>
+        <file>svg/light/media-playback-start-symbolic.svg</file>
+        <file>svg/light/media-skip-backward-symbolic.svg</file>
+        <file>svg/light/media-skip-forward-symbolic.svg</file>
    </qresource>
 </RCC>
--- a/src/controlcenterdialog.cpp
+++ b/src/controlcenterdialog.cpp
@ -1,6 +1,6 @@
 #include "controlcenterdialog.h"
+#include "xwindowinterface.h"
 #include <KWindowSystem>
-#include <KWindowEffects>

 static QRegion cornerMask(const QRect &rect, const int r)
 {
@ -33,16 +33,27 @@ ControlCenterDialog::ControlCenterDialog(QQuickView *parent)
 {
    setFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);

-    connect(this, &QQuickView::widthChanged, this, [=] { KWindowEffects::enableBlurBehind(winId(), true, cornerMask(geometry(), geometry().height() * 0.05)); });
-    connect(this, &QQuickView::heightChanged, this, [=] { KWindowEffects::enableBlurBehind(winId(), true, cornerMask(geometry(), geometry().height() * 0.05)); });
+    connect(this, &QQuickView::widthChanged, this, &ControlCenterDialog::updateBlur);
+    connect(this, &QQuickView::heightChanged, this, &ControlCenterDialog::updateBlur);
    connect(this, &QQuickView::activeChanged, this, [=] {
        if (!isActive())
            hide();
    });
 }

+void ControlCenterDialog::updateBlur()
+{
+    const QRect rect { 0, 0, size().width(), size().height() };
+    XWindowInterface::instance()->enableBlurBehind(this, true, cornerMask(rect, rect.height() * 0.05));
+}
+
 void ControlCenterDialog::showEvent(QShowEvent *event)
 {
    KWindowSystem::setState(winId(), NET::SkipTaskbar | NET::SkipPager | NET::SkipSwitcher);
    QQuickView::showEvent(event);
 }
+
+void ControlCenterDialog::hideEvent(QHideEvent *event)
+{
+    QQuickView::hideEvent(event);
+}
--- a/src/controlcenterdialog.h
+++ b/src/controlcenterdialog.h
@ -2,6 +2,7 @@
 #define CONTROLCENTERDIALOG_H

 #include <QQuickView>
+#include <QTimer>

 class ControlCenterDialog : public QQuickView
 {
@ -10,8 +11,11 @@ class ControlCenterDialog : public QQuickView
 public:
    ControlCenterDialog(QQuickView *view = nullptr);

+    Q_INVOKABLE void updateBlur();
+
 protected:
    void showEvent(QShowEvent *event) override;
+    void hideEvent(QHideEvent *event) override;
 };

 #endif // CONTROLCENTERDIALOG_H
--- a/svg/dark/media-playback-pause-symbolic.svg
+++ b/svg/dark/media-playback-pause-symbolic.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect x="4" y="3" width="2" height="10" rx="1" ry="1" fill="#FFFFFF" stroke-width="1.8257"/>
+ <rect x="10" y="3" width="2" height="10" rx="1" ry="1" fill="#FFFFFF" stroke-width="1.8257"/>
+</svg>
--- a/svg/dark/media-playback-start-symbolic.svg
+++ b/svg/dark/media-playback-start-symbolic.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m5.8812 3.0087c-0.2513 0.031145-0.45989 0.14032-0.62812 0.32931-0.16823 0.18899-0.25308 0.41133-0.25308 0.66471v7.9948c0 0.25338 0.084865 0.47572 0.25308 0.66471 0.16823 0.18899 0.37685 0.29815 0.62812 0.32931 0.2513 0.03116 0.47935-0.0244 0.68911-0.1677l5.7994-3.9973c0.18484-0.12669 0.31359-0.29945 0.38418-0.5092 0.07063-0.21183 0.07063-0.42139 0-0.63118-0.07063-0.20976-0.19836-0.38045-0.38114-0.5092l-5.8025-4.0005c-0.20907-0.14538-0.4385-0.19955-0.68911-0.1677z" fill="#FFFFFF" stroke-width="1.5611"/>
+</svg>
--- a/svg/dark/media-skip-backward-symbolic.svg
+++ b/svg/dark/media-skip-backward-symbolic.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m13.119 3.0087c0.2513 0.031145 0.45989 0.14032 0.62812 0.32931s0.25308 0.41133 0.25308 0.66471v7.9948c0 0.25338-0.08487 0.47572-0.25308 0.66471-0.16823 0.18899-0.37685 0.29815-0.62812 0.32931-0.2513 0.03116-0.47935-0.0244-0.68911-0.1677l-5.7994-3.9973c-0.18484-0.12669-0.31359-0.29945-0.38418-0.5092-0.07063-0.21183-0.07063-0.42139 0-0.63118 0.07063-0.20976 0.19836-0.38045 0.38114-0.5092l5.8025-4.0005c0.20907-0.14538 0.4385-0.19955 0.68911-0.1677z" fill="#FFFFFF" stroke-width="1.5611"/>
+ <rect x="2" y="3" width="2" height="10" rx="1" ry="1" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4164"/>
+</svg>
--- a/svg/dark/media-skip-forward-symbolic.svg
+++ b/svg/dark/media-skip-forward-symbolic.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m2.8812 3.0087c-0.2513 0.031145-0.45989 0.14032-0.62812 0.32931s-0.25308 0.41133-0.25308 0.66471v7.9948c0 0.25338 0.08487 0.47572 0.25308 0.66471 0.16823 0.18899 0.37685 0.29815 0.62812 0.32931 0.2513 0.03116 0.47935-0.0244 0.68911-0.1677l5.7994-3.9973c0.18484-0.12669 0.31359-0.29945 0.38418-0.5092 0.07063-0.21183 0.07063-0.42139 0-0.63118-0.07063-0.20976-0.19836-0.38045-0.38114-0.5092l-5.8025-4.0005c-0.20907-0.14538-0.4385-0.19955-0.68911-0.1677z" fill="#FFFFFF" stroke-width="1.5611"/>
+ <rect transform="scale(-1,1)" x="-14" y="3" width="2" height="10" rx="1" ry="1" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4164"/>
+</svg>
--- a/svg/light/media-playback-pause-symbolic.svg
+++ b/svg/light/media-playback-pause-symbolic.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect x="4" y="3" width="2" height="10" rx="1" ry="1" fill="#363636" stroke-width="1.8257"/>
+ <rect x="10" y="3" width="2" height="10" rx="1" ry="1" fill="#363636" stroke-width="1.8257"/>
+</svg>
--- a/svg/light/media-playback-start-symbolic.svg
+++ b/svg/light/media-playback-start-symbolic.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m5.8812 3.0087c-0.2513 0.031145-0.45989 0.14032-0.62812 0.32931-0.16823 0.18899-0.25308 0.41133-0.25308 0.66471v7.9948c0 0.25338 0.084865 0.47572 0.25308 0.66471 0.16823 0.18899 0.37685 0.29815 0.62812 0.32931 0.2513 0.03116 0.47935-0.0244 0.68911-0.1677l5.7994-3.9973c0.18484-0.12669 0.31359-0.29945 0.38418-0.5092 0.07063-0.21183 0.07063-0.42139 0-0.63118-0.07063-0.20976-0.19836-0.38045-0.38114-0.5092l-5.8025-4.0005c-0.20907-0.14538-0.4385-0.19955-0.68911-0.1677z" fill="#363636" stroke-width="1.5611"/>
+</svg>
--- a/svg/light/media-skip-backward-symbolic.svg
+++ b/svg/light/media-skip-backward-symbolic.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m13.119 3.0087c0.2513 0.031145 0.45989 0.14032 0.62812 0.32931s0.25308 0.41133 0.25308 0.66471v7.9948c0 0.25338-0.08487 0.47572-0.25308 0.66471-0.16823 0.18899-0.37685 0.29815-0.62812 0.32931-0.2513 0.03116-0.47935-0.0244-0.68911-0.1677l-5.7994-3.9973c-0.18484-0.12669-0.31359-0.29945-0.38418-0.5092-0.07063-0.21183-0.07063-0.42139 0-0.63118 0.07063-0.20976 0.19836-0.38045 0.38114-0.5092l5.8025-4.0005c0.20907-0.14538 0.4385-0.19955 0.68911-0.1677z" fill="#363636" stroke-width="1.5611"/>
+ <rect x="2" y="3" width="2" height="10" rx="1" ry="1" fill="#363636" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4164"/>
+</svg>
--- a/svg/light/media-skip-forward-symbolic.svg
+++ b/svg/light/media-skip-forward-symbolic.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m2.8812 3.0087c-0.2513 0.031145-0.45989 0.14032-0.62812 0.32931s-0.25308 0.41133-0.25308 0.66471v7.9948c0 0.25338 0.08487 0.47572 0.25308 0.66471 0.16823 0.18899 0.37685 0.29815 0.62812 0.32931 0.2513 0.03116 0.47935-0.0244 0.68911-0.1677l5.7994-3.9973c0.18484-0.12669 0.31359-0.29945 0.38418-0.5092 0.07063-0.21183 0.07063-0.42139 0-0.63118-0.07063-0.20976-0.19836-0.38045-0.38114-0.5092l-5.8025-4.0005c-0.20907-0.14538-0.4385-0.19955-0.68911-0.1677z" fill="#363636" stroke-width="1.5611"/>
+ <rect transform="scale(-1,1)" x="-14" y="3" width="2" height="10" rx="1" ry="1" fill="#363636" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4164"/>
+</svg>
--- a/svg/media-playback-pause-symbolic.svg
+++ b/svg/media-playback-pause-symbolic.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect x="4" y="3" width="2" height="10" rx="1" ry="1" fill="#363636" stroke-width="1.8257"/>
+ <rect x="10" y="3" width="2" height="10" rx="1" ry="1" fill="#363636" stroke-width="1.8257"/>
+</svg>
--- a/svg/media-playback-start-symbolic.svg
+++ b/svg/media-playback-start-symbolic.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m5.8812 3.0087c-0.2513 0.031145-0.45989 0.14032-0.62812 0.32931-0.16823 0.18899-0.25308 0.41133-0.25308 0.66471v7.9948c0 0.25338 0.084865 0.47572 0.25308 0.66471 0.16823 0.18899 0.37685 0.29815 0.62812 0.32931 0.2513 0.03116 0.47935-0.0244 0.68911-0.1677l5.7994-3.9973c0.18484-0.12669 0.31359-0.29945 0.38418-0.5092 0.07063-0.21183 0.07063-0.42139 0-0.63118-0.07063-0.20976-0.19836-0.38045-0.38114-0.5092l-5.8025-4.0005c-0.20907-0.14538-0.4385-0.19955-0.68911-0.1677z" fill="#363636" stroke-width="1.5611"/>
+</svg>
--- a/svg/media-skip-backward-symbolic.svg
+++ b/svg/media-skip-backward-symbolic.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m13.119 3.0087c0.2513 0.031145 0.45989 0.14032 0.62812 0.32931s0.25308 0.41133 0.25308 0.66471v7.9948c0 0.25338-0.08487 0.47572-0.25308 0.66471-0.16823 0.18899-0.37685 0.29815-0.62812 0.32931-0.2513 0.03116-0.47935-0.0244-0.68911-0.1677l-5.7994-3.9973c-0.18484-0.12669-0.31359-0.29945-0.38418-0.5092-0.07063-0.21183-0.07063-0.42139 0-0.63118 0.07063-0.20976 0.19836-0.38045 0.38114-0.5092l5.8025-4.0005c0.20907-0.14538 0.4385-0.19955 0.68911-0.1677z" fill="#363636" stroke-width="1.5611"/>
+ <rect x="2" y="3" width="2" height="10" rx="1" ry="1" fill="#363636" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4164"/>
+</svg>
--- a/svg/media-skip-forward-symbolic.svg
+++ b/svg/media-skip-forward-symbolic.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" enable-background="new" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m2.8812 3.0087c-0.2513 0.031145-0.45989 0.14032-0.62812 0.32931s-0.25308 0.41133-0.25308 0.66471v7.9948c0 0.25338 0.08487 0.47572 0.25308 0.66471 0.16823 0.18899 0.37685 0.29815 0.62812 0.32931 0.2513 0.03116 0.47935-0.0244 0.68911-0.1677l5.7994-3.9973c0.18484-0.12669 0.31359-0.29945 0.38418-0.5092 0.07063-0.21183 0.07063-0.42139 0-0.63118-0.07063-0.20976-0.19836-0.38045-0.38114-0.5092l-5.8025-4.0005c-0.20907-0.14538-0.4385-0.19955-0.68911-0.1677z" fill="#363636" stroke-width="1.5611"/>
+ <rect transform="scale(-1,1)" x="-14" y="3" width="2" height="10" rx="1" ry="1" fill="#363636" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4164"/>
+</svg>