Huge quickshell progress dump
Was requested
This commit is contained in:
parent
57d9f9a72e
commit
945793973e
GPG key ID:
4C88A185FB89301E
42 changed files with 2140 additions and 142 deletions
|
|
@ -1,16 +1,46 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import "systray" as SysTray
|
||||
import "audio" as Audio
|
||||
import "mpris" as Mpris
|
||||
import "workspaces" as Workspaces
|
||||
|
||||
BarContainment {
|
||||
id: root
|
||||
|
||||
property bool isSoleBar: Quickshell.screens.length == 1;
|
||||
|
||||
ColumnLayout {
|
||||
anchors {
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 0
|
||||
|
||||
Loader {
|
||||
active: isSoleBar
|
||||
Layout.preferredHeight: active ? implicitHeight : 0;
|
||||
Layout.fillWidth: true
|
||||
|
||||
sourceComponent: Workspaces.Widget {
|
||||
bar: root
|
||||
wsBaseIndex: 1
|
||||
}
|
||||
}
|
||||
|
||||
Workspaces.Widget {
|
||||
bar: root
|
||||
Layout.fillWidth: true
|
||||
wsBaseIndex: root.screen.name == "eDP-1" ? 11 : 1;
|
||||
hideWhenEmpty: isSoleBar
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
|
|
@ -20,10 +50,19 @@ BarContainment {
|
|||
bottom: parent.bottom
|
||||
}
|
||||
|
||||
Mpris.Players {
|
||||
bar: root
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Audio.AudioControls {
|
||||
bar: root
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
SysTray.SysTray {
|
||||
bar: root
|
||||
Layout.fillWidth: true
|
||||
//width: 24
|
||||
}
|
||||
|
||||
ClockWidget {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
import QtQuick
|
||||
import Quickshell
|
||||
import Quickshell.Wayland
|
||||
import ".."
|
||||
import "root:."
|
||||
import "root:lock" as Lock
|
||||
|
||||
PanelWindow {
|
||||
id: root
|
||||
|
||||
default property list<QtObject> widgetSurfaceData;
|
||||
readonly property var widgetSurface: widgetSurface;
|
||||
property list<var> overlays: [];
|
||||
default property alias barItems: containment.data;
|
||||
|
||||
anchors {
|
||||
left: true
|
||||
|
|
@ -17,9 +16,25 @@ PanelWindow {
|
|||
}
|
||||
|
||||
width: 70
|
||||
margins.left: Lock.Controller.locked ? -width : 0
|
||||
exclusiveZone: width - margins.left
|
||||
|
||||
color: "transparent"
|
||||
WlrLayershell.namespace: "shell:bar"
|
||||
|
||||
|
||||
readonly property var tooltip: tooltip;
|
||||
Tooltip {
|
||||
id: tooltip
|
||||
bar: root
|
||||
}
|
||||
|
||||
readonly property real tooltipXOffset: root.width + 2;
|
||||
|
||||
function boundedY(targetY: real, height: real): real {
|
||||
return Math.max(barRect.anchors.topMargin + height, Math.min(barRect.height + barRect.anchors.topMargin - height, targetY))
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: barRect
|
||||
|
||||
|
|
@ -43,72 +58,4 @@ PanelWindow {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// note: must be above the widgetSurface due to reload order
|
||||
PersistentProperties {
|
||||
id: persist
|
||||
reloadableId: "persist"
|
||||
|
||||
property bool visible: false
|
||||
}
|
||||
|
||||
onBackingWindowVisibleChanged: {
|
||||
persist.visible = Qt.binding(() => backingWindowVisible);
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
id: widgetSurface
|
||||
reloadableId: "widgetSurface"
|
||||
|
||||
visible: persist.visible
|
||||
anchors: root.anchors
|
||||
screen: root.screen
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
WlrLayershell.namespace: "shell:bar"
|
||||
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
|
||||
color: "transparent"
|
||||
|
||||
width: {
|
||||
const extents = overlays
|
||||
.filter(overlay => !overlay.fullyCollapsed)
|
||||
.map(overlay => overlayXOffset + overlay.expandedWidth);
|
||||
|
||||
return Math.max(root.width, ...extents);
|
||||
}
|
||||
|
||||
readonly property real overlayXOffset: root.width + 10;
|
||||
readonly property real tooltipXOffset: root.width + 2;
|
||||
|
||||
function overlayRect(targetY: real, size: rect): rect {
|
||||
const y = Math.max(barRect.y, Math.min((barRect.y + barRect.height) - size.height, targetY));
|
||||
return Qt.rect(overlayXOffset, y, size.width, size.height);
|
||||
}
|
||||
|
||||
function boundedY(targetY: real, height: real): real {
|
||||
return Math.max(0, Math.min(barRect.height - height, targetY))
|
||||
}
|
||||
|
||||
Item {
|
||||
id: contentArea
|
||||
data: widgetSurfaceData
|
||||
}
|
||||
|
||||
readonly property var tooltip: tooltip;
|
||||
Tooltip {
|
||||
id: tooltip
|
||||
bar: root
|
||||
}
|
||||
|
||||
function repositionContentArea() {
|
||||
// abusing the knowledge that both bars are in the same position onscreen
|
||||
const contentRect = containment.mapToItem(root.contentItem, 0, 0, containment.width, containment.height)
|
||||
|
||||
contentArea.x = contentRect.x
|
||||
contentArea.y = contentRect.y
|
||||
contentArea.width = contentRect.width
|
||||
contentArea.height = contentRect.height
|
||||
}
|
||||
}
|
||||
|
||||
onWindowTransformChanged: widgetSurface.repositionContentArea()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,21 @@ Scope {
|
|||
readonly property TooltipItem activeItem: activeMenu ?? activeTooltip;
|
||||
property TooltipItem lastActiveItem: null;
|
||||
|
||||
property Item tooltipItem: null;
|
||||
|
||||
onActiveItemChanged: {
|
||||
if (activeItem != null) activeItem.visible = true;
|
||||
if (lastActiveItem != null) lastActiveItem.visible = false;
|
||||
if (activeItem != null) {
|
||||
activeItem.targetVisible = true;
|
||||
|
||||
if (tooltipItem) {
|
||||
activeItem.parent = tooltipItem;
|
||||
}
|
||||
}
|
||||
|
||||
if (lastActiveItem != null && lastActiveItem != activeItem) {
|
||||
lastActiveItem.targetVisible = false;
|
||||
}
|
||||
|
||||
lastActiveItem = activeItem;
|
||||
}
|
||||
|
||||
|
|
@ -40,21 +52,22 @@ Scope {
|
|||
|
||||
PopupWindow {
|
||||
id: popup
|
||||
parentWindow: bar.widgetSurface
|
||||
relativeX: bar.widgetSurface.tooltipXOffset
|
||||
parentWindow: bar
|
||||
relativeX: bar.tooltipXOffset
|
||||
relativeY: 0
|
||||
height: bar.widgetSurface.height
|
||||
width: tooltipItem.width
|
||||
height: bar.height
|
||||
width: 1000//Math.max(1, widthAnim.running ? Math.max(tooltipItem.targetWidth, tooltipItem.lastTargetWidth) : tooltipItem.targetWidth)
|
||||
visible: true
|
||||
color: "transparent"
|
||||
//color: "#20000000"
|
||||
|
||||
mask: Region {
|
||||
item: (activeItem?.isMenu ?? false) ? tooltipItem : null
|
||||
item: (activeItem?.hoverable ?? false) ? tooltipItem : null
|
||||
}
|
||||
|
||||
HyprlandFocusGrab {
|
||||
active: activeItem?.isMenu ?? false
|
||||
windows: [ popup, bar.widgetSurface ]
|
||||
windows: [ popup, bar ]
|
||||
onActiveChanged: {
|
||||
if (!active && activeItem?.isMenu) {
|
||||
activeMenu.close()
|
||||
|
|
@ -62,19 +75,34 @@ Scope {
|
|||
}
|
||||
}
|
||||
|
||||
BarWidgetInner {
|
||||
Item {
|
||||
id: tooltipItem
|
||||
Component.onCompleted: {
|
||||
root.tooltipItem = this;
|
||||
if (root.activeItem) {
|
||||
root.activeItem.parent = this;
|
||||
}
|
||||
}
|
||||
|
||||
readonly property var targetWidth: activeItem?.implicitWidth ?? 10;
|
||||
readonly property var targetHeight: (activeItem?.implicitHeight ?? 0) + 10;
|
||||
readonly property var targetWidth: activeItem?.implicitWidth ?? 0;
|
||||
readonly property var targetHeight: activeItem?.implicitHeight ?? 0;
|
||||
|
||||
property var lastTargetWidthTracker: 0;
|
||||
property var lastTargetWidth: 0;
|
||||
|
||||
onTargetWidthChanged: {
|
||||
lastTargetWidth = lastTargetWidthTracker;
|
||||
lastTargetWidthTracker = targetWidth;
|
||||
}
|
||||
|
||||
readonly property real targetY: {
|
||||
if (activeItem == null) return 0;
|
||||
const target = bar.widgetSurface.contentItem.mapFromItem(activeItem.owner, 0, activeItem.targetRelativeY).y;
|
||||
return bar.widgetSurface.boundedY(target, activeItem.implicitHeight / 2);
|
||||
const target = bar.contentItem.mapFromItem(activeItem.owner, 0, activeItem.targetRelativeY).y;
|
||||
return bar.boundedY(target, activeItem.implicitHeight / 2);
|
||||
}
|
||||
|
||||
width: targetWidth + 10
|
||||
property var w: -1
|
||||
width: Math.max(1, w)
|
||||
|
||||
property var y1: -1
|
||||
property var y2: -1
|
||||
|
|
@ -112,13 +140,19 @@ Scope {
|
|||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
clip: true
|
||||
children: [ activeItem ]
|
||||
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 5
|
||||
SmoothedAnimation {
|
||||
id: widthAnim
|
||||
target: tooltipItem
|
||||
property: "w"
|
||||
to: tooltipItem.targetWidth;
|
||||
onToChanged: {
|
||||
if (tooltipItem.w == -1) {
|
||||
stop();
|
||||
tooltipItem.w = to;
|
||||
} else {
|
||||
velocity = (Math.max(tooltipItem.width, to) - Math.min(tooltipItem.width, to)) * 5;
|
||||
restart();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,29 @@
|
|||
import QtQuick
|
||||
import Quickshell
|
||||
import "root:/"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
required property var tooltip;
|
||||
required property Item owner;
|
||||
property bool isMenu: false;
|
||||
property bool hoverable: isMenu;
|
||||
property bool animateSize: true;
|
||||
property bool show: false;
|
||||
property bool preloadBackground: root.visible;
|
||||
|
||||
property real targetRelativeY: owner.height / 2;
|
||||
property real hangTime: isMenu ? 0 : 200;
|
||||
|
||||
signal close();
|
||||
|
||||
default property alias data: contentItem.data;
|
||||
|
||||
property Component backgroundComponent: BarWidgetInner {
|
||||
color: ShellGlobals.colors.bar
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
onShowChanged: {
|
||||
if (show) {
|
||||
hangTimer.stop();
|
||||
|
|
@ -28,4 +38,60 @@ Item {
|
|||
interval: hangTime
|
||||
onTriggered: tooltip.removeItem(root);
|
||||
}
|
||||
|
||||
property bool targetVisible: false
|
||||
property real targetOpacity: 0
|
||||
opacity: targetOpacity / 1000
|
||||
|
||||
Behavior on targetOpacity {
|
||||
id: opacityAnimation
|
||||
SmoothedAnimation { velocity: 5000 }
|
||||
}
|
||||
|
||||
function snapOpacity(opacity: real) {
|
||||
opacityAnimation.enabled = false;
|
||||
targetOpacity = opacity * 1000
|
||||
opacityAnimation.enabled = true;
|
||||
}
|
||||
|
||||
onTargetVisibleChanged: {
|
||||
if (targetVisible) {
|
||||
visible = true;
|
||||
targetOpacity = 1000;
|
||||
} else {
|
||||
close()
|
||||
targetOpacity = 0;
|
||||
}
|
||||
}
|
||||
|
||||
onTargetOpacityChanged: {
|
||||
if (!targetVisible && targetOpacity == 0) {
|
||||
visible = false;
|
||||
this.parent = null;
|
||||
}
|
||||
}
|
||||
|
||||
anchors.fill: parent
|
||||
visible: false
|
||||
clip: true
|
||||
implicitHeight: contentItem.implicitHeight + 10
|
||||
implicitWidth: contentItem.implicitWidth + 10
|
||||
|
||||
readonly property Item item: contentItem;
|
||||
|
||||
Loader {
|
||||
anchors.fill: parent
|
||||
active: root.visible || root.preloadBackground
|
||||
asynchronous: !root.visible && root.preloadBackground
|
||||
sourceComponent: backgroundComponent
|
||||
}
|
||||
|
||||
Item {
|
||||
id: contentItem
|
||||
anchors.fill: parent
|
||||
anchors.margins: 5
|
||||
|
||||
implicitHeight: childrenRect.height
|
||||
implicitWidth: childrenRect.width
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
import QtQuick
|
||||
import Quickshell.Services.Pipewire
|
||||
import ".."
|
||||
|
||||
ClickableIcon {
|
||||
id: root
|
||||
required property var bar;
|
||||
required property PwNode node;
|
||||
property bool mixerOpen: false;
|
||||
|
||||
PwObjectTracker { objects: [ node ] }
|
||||
|
||||
implicitHeight: width;
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton;
|
||||
showPressed: mixerOpen
|
||||
|
||||
onClicked: event => {
|
||||
event.accepted = true;
|
||||
if (event.button === Qt.LeftButton) {
|
||||
node.audio.muted = !node.audio.muted;
|
||||
} else if (event.button === Qt.RightButton) {
|
||||
mixerOpen = !mixerOpen;
|
||||
}
|
||||
}
|
||||
|
||||
onWheel: event => {
|
||||
event.accepted = true;
|
||||
node.audio.volume += (event.angleDelta.y / 120) * 0.05
|
||||
}
|
||||
|
||||
property var tooltip: TooltipItem {
|
||||
tooltip: bar.tooltip
|
||||
owner: root
|
||||
|
||||
show: root.containsMouse || mouseArea.containsMouse
|
||||
hoverable: true
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
hoverEnabled: true
|
||||
acceptedButtons: Qt.NoButton
|
||||
|
||||
implicitWidth: childrenRect.width
|
||||
implicitHeight: childrenRect.height
|
||||
|
||||
VolumeSlider {
|
||||
implicitWidth: 200
|
||||
implicitHeight: root.height
|
||||
|
||||
//enabled: !node.audio.muted
|
||||
value: node.audio.volume
|
||||
onValueChanged: node.audio.volume = value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
property var rightclickMenu: TooltipItem {
|
||||
tooltip: bar.tooltip
|
||||
owner: root
|
||||
|
||||
isMenu: true
|
||||
show: mixerOpen
|
||||
|
||||
onClose: mixerOpen = false
|
||||
/*onVisibleChanged: {
|
||||
if (!visible) mixerOpen = false;
|
||||
}*/
|
||||
|
||||
Loader {
|
||||
active: rightclickMenu.visible
|
||||
sourceComponent: Mixer {
|
||||
width: 550
|
||||
trackedNode: node
|
||||
nodeImage: root.image
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import Quickshell.Services.Pipewire
|
||||
import ".."
|
||||
|
||||
BarWidgetInner {
|
||||
id: root
|
||||
required property var bar;
|
||||
implicitHeight: column.implicitHeight + 10;
|
||||
|
||||
ColumnLayout {
|
||||
anchors {
|
||||
fill: parent;
|
||||
margins: 5;
|
||||
}
|
||||
|
||||
id: column;
|
||||
implicitHeight: childrenRect.height;
|
||||
spacing: 5;
|
||||
|
||||
Loader {
|
||||
Layout.fillWidth: true;
|
||||
active: Pipewire.defaultAudioSink != null;
|
||||
|
||||
sourceComponent: AudioControl {
|
||||
bar: root.bar;
|
||||
node: Pipewire.defaultAudioSink;
|
||||
image: `image://icon/${node.audio.muted ? "audio-volume-muted-symbolic" : "audio-volume-high-symbolic"}`
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
Layout.fillWidth: true;
|
||||
active: Pipewire.defaultAudioSource != null;
|
||||
|
||||
sourceComponent: AudioControl {
|
||||
bar: root.bar;
|
||||
node: Pipewire.defaultAudioSource;
|
||||
image: `image://icon/${node.audio.muted ? "microphone-sensitivity-muted-symbolic" : "microphone-sensitivity-high-symbolic"}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
56
modules/user/modules/quickshell/shell/bar/audio/Mixer.qml
Normal file
56
modules/user/modules/quickshell/shell/bar/audio/Mixer.qml
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell.Services.Pipewire
|
||||
import ".."
|
||||
import "../.."
|
||||
|
||||
ColumnLayout {
|
||||
required property PwNode trackedNode;
|
||||
required property string nodeImage;
|
||||
|
||||
PwNodeLinkTracker {
|
||||
id: linkTracker
|
||||
node: trackedNode
|
||||
}
|
||||
|
||||
PwObjectTracker { objects: [ trackedNode, ...linkTracker.linkGroups ] }
|
||||
|
||||
MixerEntry {
|
||||
id: nodeEntry
|
||||
node: trackedNode
|
||||
image: nodeImage
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 1
|
||||
visible: linkTracker.linkGroups.length > 0
|
||||
|
||||
color: ShellGlobals.colors.separator
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: linkTracker.linkGroups
|
||||
|
||||
MixerEntry {
|
||||
required property PwLinkGroup modelData;
|
||||
node: trackedNode.isSink ? modelData.source : modelData.target;
|
||||
state: modelData.state;
|
||||
|
||||
image: {
|
||||
let icon = "";
|
||||
let props = node.properties;
|
||||
if (props["application.icon-name"] != undefined) {
|
||||
icon = props["application.icon-name"];
|
||||
} else if (props["application.process.binary"] != undefined) {
|
||||
icon = props["application.process.binary"];
|
||||
}
|
||||
|
||||
// special cases :(
|
||||
if (icon == "firefox") icon = "firefox-devedition";
|
||||
|
||||
return `image://icon/${icon}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell.Services.Pipewire
|
||||
import ".."
|
||||
|
||||
RowLayout {
|
||||
id: root
|
||||
required property PwNode node;
|
||||
required property string image;
|
||||
property int state: PwLinkState.Unlinked;
|
||||
|
||||
PwObjectTracker { objects: [ node ] }
|
||||
|
||||
ClickableIcon {
|
||||
image: root.image
|
||||
asynchronous: true
|
||||
implicitHeight: 40
|
||||
implicitWidth: height
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
RowLayout {
|
||||
Item {
|
||||
implicitHeight: title.implicitHeight
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
id: title
|
||||
color: "white"
|
||||
anchors.fill: parent
|
||||
elide: Text.ElideRight
|
||||
text: {
|
||||
const name = node.properties["application.name"] ?? (node.description == "" ? node.name : node.description);
|
||||
const mediaName = node.properties["media.name"];
|
||||
|
||||
return mediaName != undefined ? `${name} - ${mediaName}` : name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
VolumeSlider {
|
||||
//Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
implicitWidth: 200
|
||||
|
||||
value: node.audio.volume
|
||||
onValueChanged: node.audio.volume = value
|
||||
}
|
||||
}
|
||||
}
|
||||
109
modules/user/modules/quickshell/shell/bar/audio/VolumeSlider.qml
Normal file
109
modules/user/modules/quickshell/shell/bar/audio/VolumeSlider.qml
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
|
||||
Item {
|
||||
id: root
|
||||
property real from: 0.0
|
||||
property real to: 1.5
|
||||
property real warning: 1.0
|
||||
property real value: 0.0
|
||||
|
||||
implicitWidth: groove.implicitWidth
|
||||
implicitHeight: 20
|
||||
|
||||
property real __valueOffset: ((value - from) / (to - from)) * groove.width
|
||||
property real __wheelValue: -1
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
|
||||
Rectangle {
|
||||
id: grooveWarning
|
||||
|
||||
anchors {
|
||||
left: groove.left
|
||||
leftMargin: ((warning - from) / (to - from)) * groove.width
|
||||
right: groove.right
|
||||
top: groove.top
|
||||
bottom: groove.bottom
|
||||
}
|
||||
|
||||
color: "#60ffa800"
|
||||
topRightRadius: 5
|
||||
bottomRightRadius: 5
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors {
|
||||
top: groove.bottom
|
||||
horizontalCenter: grooveWarning.left
|
||||
}
|
||||
|
||||
color: "#60eeffff"
|
||||
width: 1
|
||||
height: groove.height
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: grooveFill
|
||||
|
||||
anchors {
|
||||
left: groove.left
|
||||
top: groove.top
|
||||
bottom: groove.bottom
|
||||
}
|
||||
|
||||
radius: 5
|
||||
color: "#80ceffff"
|
||||
width: __valueOffset
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: groove
|
||||
|
||||
anchors {
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
implicitHeight: 7
|
||||
color: "transparent"
|
||||
border.color: "#20050505"
|
||||
border.width: 1
|
||||
radius: 5
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: handle
|
||||
anchors.verticalCenter: groove.verticalCenter
|
||||
height: 15
|
||||
width: height
|
||||
radius: height * 0.5
|
||||
x: __valueOffset - width * 0.5
|
||||
}
|
||||
|
||||
onWheel: event => {
|
||||
event.accepted = true;
|
||||
__wheelValue = value + (event.angleDelta.y / 120) * 0.05
|
||||
__wheelValue = -1
|
||||
}
|
||||
}
|
||||
|
||||
Binding {
|
||||
when: mouseArea.pressed
|
||||
target: root
|
||||
property: "value"
|
||||
value: (mouseArea.mouseX / width) * (to - from) + from
|
||||
restoreMode: Binding.RestoreBinding
|
||||
}
|
||||
|
||||
Binding {
|
||||
when: __wheelValue != -1
|
||||
target: root
|
||||
property: "value"
|
||||
value: __wheelValue
|
||||
restoreMode: Binding.RestoreBinding
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#e8eaed"><path d="M806-56 677.67-184.33q-27 18.66-58 32.16-31 13.5-64.34 21.17v-68.67q20-6.33 38.84-13.66 18.83-7.34 35.5-19l-154.34-155V-160l-200-200h-160v-240H262L51.33-810.67 98.67-858l754.66 754L806-56Zm-26.67-232-48-48q19-33 28.17-69.62 9.17-36.61 9.17-75.38 0-100.22-58.34-179.11Q652-739 555.33-762.33V-831q124 28 202 125.5t78 224.5q0 51.67-14.16 100.67-14.17 49-41.84 92.33Zm-134-134-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5t-7.5 28.5Zm-170-170-104-104 104-104v208Zm-66.66 270v-131.33l-80-80H182v106.66h122L408.67-322Zm-40-171.33Z"/></svg>
|
||||
|
After Width: | Height: | Size: 650 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#e8eaed"><path d="M560-131v-68.67q94.67-27.33 154-105 59.33-77.66 59.33-176.33 0-98.67-59-176.67-59-78-154.33-104.66V-831q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm426.67 45.33v-332Q599-628 629.5-582T660-480q0 55-30.83 100.83-30.84 45.84-82.5 64.5ZM413.33-634l-104 100.67H186.67v106.66h122.66l104 101.34V-634Zm-96 154Z"/></svg>
|
||||
|
After Width: | Height: | Size: 474 B |
|
|
@ -0,0 +1,161 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import Qt5Compat.GraphicalEffects
|
||||
import ".."
|
||||
import "../.."
|
||||
|
||||
BarWidgetInner {
|
||||
id: root
|
||||
border.color: "transparent"
|
||||
|
||||
property real renderWidth: width
|
||||
property real renderHeight: height
|
||||
|
||||
property real blurRadius: 20;
|
||||
property real blurSamples: 41;
|
||||
|
||||
property bool reverse: false;
|
||||
|
||||
function setArt(art: string, reverse: bool, immediate: bool) {
|
||||
this.reverse = reverse;
|
||||
|
||||
if (art.length == 0) {
|
||||
stack.replace(null);
|
||||
} else {
|
||||
stack.replace(component, { uri: art }, immediate)
|
||||
}
|
||||
}
|
||||
|
||||
property var component: Component {
|
||||
Item {
|
||||
id: componentRoot
|
||||
property var uri: null;
|
||||
readonly property bool svReady: image.status === Image.Ready;
|
||||
|
||||
Image {
|
||||
id: image
|
||||
anchors.centerIn: parent;
|
||||
source: uri;
|
||||
cache: false;
|
||||
asynchronous: true;
|
||||
|
||||
fillMode: Image.PreserveAspectCrop;
|
||||
sourceSize.width: width;
|
||||
sourceSize.height: height;
|
||||
width: stack.width + blurRadius * 2;
|
||||
height: stack.height + blurRadius * 2;
|
||||
}
|
||||
|
||||
property Component blurComponent: Item {
|
||||
id: blur
|
||||
//parent: blurContainment
|
||||
// blur into the neighboring elements if applicable
|
||||
x: componentRoot.x - blurRadius * 4
|
||||
y: componentRoot.y + image.y
|
||||
width: componentRoot.width + blurRadius * 8
|
||||
height: image.height
|
||||
|
||||
onVisibleChanged: {
|
||||
if (visible) blurSource.scheduleUpdate();
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: image
|
||||
function onStatusChanged() {
|
||||
if (image.status == Image.Ready) {
|
||||
blurSource.scheduleUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ShaderEffectSource {
|
||||
id: blurSource
|
||||
sourceItem: stack
|
||||
sourceRect: Qt.rect(blur.x, blur.y, blur.width, blur.height);
|
||||
live: false
|
||||
anchors.fill: parent
|
||||
visible: false
|
||||
}
|
||||
|
||||
Item {
|
||||
x: blurRadius
|
||||
width: blur.width - blurRadius * 2
|
||||
height: blur.height
|
||||
clip: true
|
||||
GaussianBlur {
|
||||
source: blurSource
|
||||
x: -parent.x
|
||||
width: blur.width
|
||||
height: blur.height
|
||||
radius: root.blurRadius
|
||||
samples: root.blurSamples
|
||||
visible: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Weird crash if the blur is not owned by its visual parent,
|
||||
// so it has to be a component.
|
||||
property Item blur: blurComponent.createObject(blurContainment);
|
||||
Component.onDestruction: blur.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
SlideView {
|
||||
id: stack;
|
||||
height: renderHeight
|
||||
width: renderWidth
|
||||
anchors.centerIn: parent;
|
||||
visible: false;
|
||||
animate: root.visible;
|
||||
|
||||
readonly property real fromPos: (stack.width + blurRadius * 2) * (reverse ? -1 : 1);
|
||||
|
||||
enterTransition: PropertyAnimation {
|
||||
property: "x"
|
||||
from: stack.fromPos
|
||||
to: 0
|
||||
duration: 400
|
||||
easing.type: Easing.OutExpo;
|
||||
}
|
||||
|
||||
exitTransition: PropertyAnimation {
|
||||
property: "x"
|
||||
to: -stack.fromPos
|
||||
duration: 400
|
||||
easing.type: Easing.OutExpo;
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: blurContainment
|
||||
x: stack.x
|
||||
y: stack.y
|
||||
width: stack.width
|
||||
height: stack.height
|
||||
}
|
||||
|
||||
readonly property Rectangle overlay: overlayItem;
|
||||
Rectangle {
|
||||
id: overlayItem
|
||||
visible: false
|
||||
anchors.fill: parent
|
||||
border.color: ShellGlobals.colors.widgetOutlineSeparate
|
||||
border.width: 0//1
|
||||
radius: 0//root.radius
|
||||
color: "transparent"
|
||||
}
|
||||
|
||||
// slightly offset on the corners :/
|
||||
layer.enabled: true
|
||||
layer.effect: ShaderEffect {
|
||||
fragmentShader: "radial_clip.frag.qsb"
|
||||
// +1 seems to match Rectangle
|
||||
property real radius: root.radius + 1
|
||||
property size size: Qt.size(root.width, root.height)
|
||||
property real borderWidth: 1//.5
|
||||
property color borderColor: ShellGlobals.colors.widgetOutlineSeparate//"#ffff0000"
|
||||
property color tint: overlayItem.color
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import QtQuick
|
||||
import QtQuick.Templates as T
|
||||
|
||||
T.Slider {
|
||||
id: control
|
||||
|
||||
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
||||
implicitHandleWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||
implicitHandleHeight + topPadding + bottomPadding)
|
||||
|
||||
background: Rectangle {
|
||||
x: control.leftPadding
|
||||
y: control.topPadding + control.availableHeight / 2 - height / 2
|
||||
implicitWidth: 200
|
||||
implicitHeight: 7
|
||||
width: control.availableWidth
|
||||
height: implicitHeight
|
||||
|
||||
radius: 5
|
||||
color: "#30ceffff"
|
||||
border.width: 0
|
||||
|
||||
Rectangle {
|
||||
anchors {
|
||||
top: parent.top
|
||||
bottom: parent.bottom
|
||||
}
|
||||
|
||||
width: control.handle.x + (control.handle.width / 2) - parent.x
|
||||
radius: parent.radius
|
||||
color: "#80ceffff"
|
||||
}
|
||||
}
|
||||
|
||||
handle: Rectangle {
|
||||
x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
|
||||
y: control.topPadding + control.availableHeight / 2 - height / 2
|
||||
implicitWidth: 16
|
||||
implicitHeight: 16
|
||||
radius: 8
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
pragma Singleton
|
||||
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import Quickshell.Services.Mpris
|
||||
import Quickshell.Hyprland
|
||||
import "../.."
|
||||
|
||||
Singleton {
|
||||
id: root;
|
||||
property MprisPlayer trackedPlayer: null;
|
||||
property MprisPlayer activePlayer: trackedPlayer ?? Mpris.players.values[0] ?? null;
|
||||
signal trackChanged(reverse: bool);
|
||||
|
||||
property bool __reverse: false;
|
||||
|
||||
property var activeTrack;
|
||||
Component.onCompleted: {
|
||||
for (const player of Mpris.players.values) {
|
||||
if (player.playbackState == MprisPlaybackState.Playing) {
|
||||
if (root.trackedPlayer == null) {
|
||||
root.trackedPlayer = player;
|
||||
}
|
||||
}
|
||||
|
||||
player.playbackStateChanged.connect(() => {
|
||||
if (root.trackedPlayer !== player) root.trackedPlayer = player;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: activePlayer
|
||||
|
||||
function onTrackChanged() {
|
||||
root.updateTrack();
|
||||
}
|
||||
}
|
||||
|
||||
// Change the tracked player when one changes playback state or is created in a playing state.
|
||||
Connections {
|
||||
target: Mpris.players;
|
||||
|
||||
function onObjectInsertedPost(player: MprisPlayer) {
|
||||
if (player.playbackState === MprisPlaybackState.Playing) {
|
||||
if (root.trackedPlayer !== player) root.trackedPlayer = player;
|
||||
}
|
||||
|
||||
player.playbackStateChanged.connect(() => {
|
||||
if (root.trackedPlayer !== player) root.trackedPlayer = player;
|
||||
});
|
||||
}
|
||||
|
||||
function onObjectRemovedPre() {
|
||||
console.log(`trackedPlayer: ${root.trackedPlayer}`)
|
||||
if (root.trackedPlayer == null) {
|
||||
for (const player of Mpris.players.values) {
|
||||
if (player.playbackState === MprisPlaybackState.Playing) {
|
||||
root.trackedPlayer = player;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onActivePlayerChanged: this.updateTrack();
|
||||
|
||||
function updateTrack() {
|
||||
const metadata = this.activePlayer?.metadata ?? {};
|
||||
|
||||
this.activeTrack = {
|
||||
artUrl: metadata["mpris:artUrl"] ?? "",
|
||||
title: metadata["xesam:title"] ?? "",
|
||||
artist: metadata["xesam:artist"] ?? "",
|
||||
};
|
||||
|
||||
this.trackChanged(__reverse);
|
||||
this.__reverse = false;
|
||||
}
|
||||
|
||||
property bool isPlaying: this.activePlayer && this.activePlayer.playbackState == MprisPlaybackState.Playing;
|
||||
property bool canPlay: this.activePlayer?.canPlay ?? false;
|
||||
function play() {
|
||||
if (this.canPlay) this.activePlayer.playbackState = MprisPlaybackState.Playing;
|
||||
}
|
||||
|
||||
property bool canPause: this.activePlayer?.canPause ?? false;
|
||||
function pause() {
|
||||
if (this.canPause) this.activePlayer.playbackState = MprisPlaybackState.Paused;
|
||||
}
|
||||
|
||||
property bool canGoPrevious: this.activePlayer?.canGoPrevious ?? false;
|
||||
function previous() {
|
||||
if (this.canGoPrevious) {
|
||||
this.__reverse = true;
|
||||
this.activePlayer.previous();
|
||||
}
|
||||
}
|
||||
|
||||
property bool canGoNext: this.activePlayer?.canGoNext ?? false;
|
||||
function next() {
|
||||
if (this.canGoNext) {
|
||||
this.__reverse = false;
|
||||
this.activePlayer.next();
|
||||
}
|
||||
}
|
||||
|
||||
property bool canChangeVolume: this.activePlayer && this.activePlayer.volumeSupported && this.activePlayer.canControl;
|
||||
|
||||
property bool loopSupported: this.activePlayer && this.activePlayer.loopSupported && this.activePlayer.canControl;
|
||||
property var loopState: this.activePlayer?.loopState ?? MprisLoopState.None;
|
||||
function setLoopState(loopState: var) {
|
||||
if (this.loopSupported) {
|
||||
this.activePlayer.loopState = loopState;
|
||||
}
|
||||
}
|
||||
|
||||
property bool shuffleSupported: this.activePlayer && this.activePlayer.shuffleSupported && this.activePlayer.canControl;
|
||||
property bool hasShuffle: this.activePlayer?.shuffle ?? false;
|
||||
function setShuffle(shuffle: bool) {
|
||||
if (this.shuffleSupported) {
|
||||
this.activePlayer.shuffle = shuffle;
|
||||
}
|
||||
}
|
||||
|
||||
function setActivePlayer(player: MprisPlayer) {
|
||||
const targetPlayer = player ?? MprisPlayer.players[0];
|
||||
console.log(`setactive: ${targetPlayer} from ${activePlayer}`)
|
||||
|
||||
if (targetPlayer && this.activePlayer) {
|
||||
this.__reverse = Mpris.players.indexOf(targetPlayer) < Mpris.players.indexOf(this.activePlayer);
|
||||
} else {
|
||||
// always animate forward if going to null
|
||||
this.__reverse = false;
|
||||
}
|
||||
|
||||
this.trackedPlayer = targetPlayer;
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
name: "music-pauseall";
|
||||
onPressed: {
|
||||
for (let i = 0; i < Mpris.players.length; i++) {
|
||||
const player = Mpris.players[i];
|
||||
if (player.canPause) player.playbackState = MprisPlaybackState.Paused;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
name: "music-playpause";
|
||||
onPressed: {
|
||||
if (root.isPlaying) root.pause();
|
||||
else root.play();
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
name: "music-previous";
|
||||
onPressed: root.previous();
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
name: "music-next";
|
||||
onPressed: root.next();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import Quickshell
|
||||
import Quickshell.Services.Mpris
|
||||
|
||||
Scope {
|
||||
required property MprisPlayer player;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import QtQuick
|
||||
import
|
||||
527
modules/user/modules/quickshell/shell/bar/mpris/Players.qml
Normal file
527
modules/user/modules/quickshell/shell/bar/mpris/Players.qml
Normal file
|
|
@ -0,0 +1,527 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import Qt5Compat.GraphicalEffects
|
||||
import Quickshell
|
||||
import Quickshell.Services.Mpris
|
||||
import ".."
|
||||
import "../.."
|
||||
|
||||
MouseArea {
|
||||
id: root
|
||||
hoverEnabled: true
|
||||
|
||||
required property var bar;
|
||||
implicitHeight: column.implicitHeight + 10
|
||||
|
||||
PersistentProperties {
|
||||
id: persist
|
||||
reloadableId: "MusicWidget";
|
||||
property bool widgetOpen: false;
|
||||
|
||||
onReloaded: {
|
||||
rightclickMenu.snapOpacity(widgetOpen ? 1.0 : 0.0)
|
||||
}
|
||||
}
|
||||
|
||||
property alias widgetOpen: persist.widgetOpen;
|
||||
|
||||
acceptedButtons: Qt.RightButton
|
||||
onClicked: widgetOpen = !widgetOpen
|
||||
|
||||
onWheel: event => {
|
||||
event.accepted = true;
|
||||
if (MprisController.canChangeVolume) {
|
||||
this.activePlayer.volume = Math.max(0, Math.min(1, this.activePlayer.volume + (event.angleDelta.y / 120) * 0.05));
|
||||
}
|
||||
}
|
||||
|
||||
readonly property var activePlayer: MprisController.activePlayer
|
||||
|
||||
Item {
|
||||
id: widget
|
||||
anchors.fill: parent
|
||||
|
||||
property real scaleMul: root.pressed || widgetOpen ? 100 : 1
|
||||
Behavior on scaleMul { SmoothedAnimation { velocity: 600 } }
|
||||
scale: scaleCurve.interpolate(scaleMul / 100, 1, (width - 6) / width)
|
||||
|
||||
EasingCurve {
|
||||
id: scaleCurve
|
||||
curve.type: Easing.Linear
|
||||
}
|
||||
|
||||
implicitHeight: column.implicitHeight + 10
|
||||
|
||||
BackgroundArt {
|
||||
id: bkg
|
||||
anchors.fill: parent
|
||||
|
||||
function updateArt(reverse: bool) {
|
||||
this.setArt(MprisController.activeTrack.artUrl, reverse, false)
|
||||
}
|
||||
|
||||
Component.onCompleted: this.updateArt(false);
|
||||
|
||||
Connections {
|
||||
target: MprisController
|
||||
|
||||
function onTrackChanged(reverse: bool) {
|
||||
bkg.updateArt(reverse);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: column
|
||||
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 5;
|
||||
}
|
||||
|
||||
ClickableIcon {
|
||||
Layout.fillWidth: true
|
||||
image: "root:icons/rewind.svg"
|
||||
implicitHeight: width
|
||||
scaleIcon: false
|
||||
baseMargin: 3
|
||||
enabled: MprisController.canGoPrevious;
|
||||
onClicked: MprisController.previous();
|
||||
}
|
||||
|
||||
ClickableIcon {
|
||||
Layout.fillWidth: true
|
||||
image: `root:icons/${MprisController.isPlaying ? "pause" : "play"}.svg`;
|
||||
implicitHeight: width
|
||||
scaleIcon: false
|
||||
enabled: MprisController.isPlaying ? MprisController.canPause : MprisController.canPlay;
|
||||
onClicked: {
|
||||
if (MprisController.isPlaying) MprisController.pause();
|
||||
else MprisController.play();
|
||||
}
|
||||
}
|
||||
|
||||
ClickableIcon {
|
||||
Layout.fillWidth: true
|
||||
image: "root:icons/fast-forward.svg"
|
||||
implicitHeight: width
|
||||
scaleIcon: false
|
||||
baseMargin: 3
|
||||
enabled: MprisController.canGoNext;
|
||||
onClicked: MprisController.next();
|
||||
}
|
||||
}
|
||||
|
||||
property var tooltip: TooltipItem {
|
||||
id: tooltip
|
||||
tooltip: bar.tooltip
|
||||
owner: root
|
||||
|
||||
show: root.containsMouse && (activePlayer?.metadata["mpris:trackid"] ?? false)
|
||||
|
||||
//implicitHeight: root.height - 10
|
||||
//implicitWidth: childrenRect.width
|
||||
|
||||
Item {
|
||||
implicitWidth: 200
|
||||
implicitHeight: 100
|
||||
}
|
||||
|
||||
/*Loader {
|
||||
active: tooltip.visible
|
||||
|
||||
sourceComponent: ColumnLayout {
|
||||
height: root.height - 10
|
||||
RowLayout {
|
||||
Image {
|
||||
Layout.fillHeight: true
|
||||
source: mainPlayer.metadata["mpris:artUrl"] ?? ""
|
||||
|
||||
cache: false
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
sourceSize.width: height
|
||||
sourceSize.height: height
|
||||
}
|
||||
Label {
|
||||
text: mainPlayer.identity
|
||||
}
|
||||
}
|
||||
|
||||
Slider {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
property var rightclickMenu: TooltipItem {
|
||||
id: rightclickMenu
|
||||
tooltip: bar.tooltip
|
||||
owner: root
|
||||
|
||||
isMenu: true
|
||||
show: widgetOpen
|
||||
onClose: widgetOpen = false
|
||||
|
||||
// some very large covers take a sec to appear in the background,
|
||||
// so we'll try to preload them.
|
||||
preloadBackground: root.containsMouse
|
||||
|
||||
backgroundComponent: BackgroundArt {
|
||||
id: popupBkg
|
||||
anchors.fill: parent
|
||||
renderHeight: rightclickMenu.implicitHeight
|
||||
renderWidth: rightclickMenu.implicitWidth
|
||||
blurRadius: 100
|
||||
blurSamples: 201
|
||||
|
||||
overlay.color: "#80000000"
|
||||
|
||||
Connections {
|
||||
target: MprisController
|
||||
|
||||
function onTrackChanged(reverse: bool) {
|
||||
popupBkg.setArt(MprisController.activeTrack.artUrl, reverse, false);
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
setArt(MprisController.activeTrack.artUrl, false, true);
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
width: 500
|
||||
height: 650
|
||||
active: rightclickMenu.visible
|
||||
|
||||
sourceComponent: ColumnLayout {
|
||||
property var player: activePlayer;
|
||||
anchors.fill: parent;
|
||||
|
||||
property int position: 0;
|
||||
property int length: 0;
|
||||
|
||||
FrameAnimation {
|
||||
id: posTracker;
|
||||
running: player.playbackState == MprisPlaybackState.Playing && widgetOpen;
|
||||
onTriggered: player.positionChanged();
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: player
|
||||
|
||||
function onPositionChanged() {
|
||||
const newPosition = Math.floor(player.position);
|
||||
if (newPosition != position) position = newPosition;
|
||||
}
|
||||
|
||||
function onLengthChanged() {
|
||||
const newLength = Math.floor(player.length);
|
||||
if (newLength != length) length = newLength;
|
||||
}
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: MprisController
|
||||
|
||||
function onTrackChanged(reverse: bool) {
|
||||
trackStack.updateTrack(reverse, false);
|
||||
length = Math.floor(player.length);
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
position = Math.floor(player.position);
|
||||
length = Math.floor(player.length);
|
||||
}
|
||||
|
||||
function timeStr(time: int): string {
|
||||
const seconds = time % 60;
|
||||
const minutes = Math.floor(time / 60);
|
||||
|
||||
return `${minutes}:${seconds.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
Item {
|
||||
id: playerSelectorContainment
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: playerSelector.implicitHeight + 20
|
||||
implicitWidth: playerSelector.implicitWidth
|
||||
|
||||
ScrollView {
|
||||
id: playerSelector
|
||||
anchors.centerIn: parent
|
||||
width: Math.min(implicitWidth, playerSelectorContainment.width)
|
||||
|
||||
RowLayout {
|
||||
Repeater {
|
||||
model: Mpris.players
|
||||
|
||||
MouseArea {
|
||||
required property MprisPlayer modelData;
|
||||
readonly property bool selected: modelData == player;
|
||||
|
||||
implicitWidth: childrenRect.width
|
||||
implicitHeight: childrenRect.height
|
||||
|
||||
onClicked: MprisController.setActivePlayer(modelData);
|
||||
|
||||
Rectangle {
|
||||
implicitWidth: 50
|
||||
implicitHeight: 50
|
||||
radius: 5
|
||||
color: selected ? "#20ceffff" : "transparent"
|
||||
|
||||
Image {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 5
|
||||
// lazy and wont always work, but good enough until a desktop entry impl.
|
||||
source: {
|
||||
const entry = DesktopEntries.byId(modelData.desktopEntry);
|
||||
console.log(`ent ${entry} id ${modelData.desktopEntry}`)
|
||||
if (!entry) return "image://icon/";
|
||||
return `image://icon/${entry.icon}`;
|
||||
}
|
||||
//asynchronous: true
|
||||
|
||||
sourceSize.width: 50
|
||||
sourceSize.height: 50
|
||||
cache: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.bottomMargin: 10
|
||||
|
||||
Label {
|
||||
anchors.centerIn: parent
|
||||
text: activePlayer.identity
|
||||
}
|
||||
}
|
||||
|
||||
SlideView {
|
||||
id: trackStack
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 400
|
||||
|
||||
property bool reverse: false;
|
||||
|
||||
Component.onCompleted: updateTrack(false, true);
|
||||
|
||||
function updateTrack(reverse: bool, immediate: bool) {
|
||||
this.reverse = reverse;
|
||||
this.replace(
|
||||
trackComponent,
|
||||
{ track: MprisController.activeTrack },
|
||||
immediate
|
||||
)
|
||||
}
|
||||
|
||||
property var trackComponent: Component {
|
||||
Flickable {
|
||||
id: flickable
|
||||
required property var track;
|
||||
// in most cases this is ready around the same time as the background,
|
||||
// but may take longer if the image is huge.
|
||||
readonly property bool svReady: img.status === Image.Ready;
|
||||
contentWidth: width + 1
|
||||
onDragEnded: {
|
||||
return;
|
||||
console.log(`dragend ${contentX}`)
|
||||
if (Math.abs(contentX) > 75) {
|
||||
if (contentX < 0) MprisController.previous();
|
||||
else if (contentX > 0) MprisController.next();
|
||||
}
|
||||
}
|
||||
ColumnLayout {
|
||||
id: trackContent
|
||||
width: flickable.width
|
||||
height: flickable.height
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 300//img.implicitHeight
|
||||
implicitWidth: img.implicitWidth
|
||||
|
||||
Image {
|
||||
id: img;
|
||||
anchors.centerIn: parent;
|
||||
source: track.artUrl ?? "";
|
||||
//height: 300
|
||||
//fillMode: Image.PreserveAspectFit
|
||||
cache: false
|
||||
asynchronous: true
|
||||
|
||||
sourceSize.height: 300
|
||||
sourceSize.width: 300
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
|
||||
Label {
|
||||
anchors.centerIn: parent
|
||||
text: track.title
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
|
||||
Label {
|
||||
anchors.centerIn: parent
|
||||
text: track.artist
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.fillHeight: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
readonly property real fromPos: trackStack.width * (trackStack.reverse ? -1 : 1);
|
||||
|
||||
// intentionally slightly faster than the background
|
||||
enterTransition: PropertyAnimation {
|
||||
property: "x"
|
||||
from: trackStack.fromPos
|
||||
to: 0;
|
||||
duration: 350;
|
||||
easing.type: Easing.OutExpo;
|
||||
}
|
||||
|
||||
exitTransition: PropertyAnimation {
|
||||
property: "x"
|
||||
to: target.x - trackStack.fromPos;
|
||||
duration: 350;
|
||||
easing.type: Easing.OutExpo;
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.fillHeight: true }
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: controlsRow.implicitHeight
|
||||
|
||||
RowLayout {
|
||||
id: controlsRow
|
||||
anchors.centerIn: parent
|
||||
|
||||
ClickableIcon {
|
||||
image: {
|
||||
switch (MprisController.loopState) {
|
||||
case MprisLoopState.None: return "root:icons/repeat-none.svg";
|
||||
case MprisLoopState.Playlist: return "root:icons/repeat-all.svg";
|
||||
case MprisLoopState.Track: return "root:icons/repeat-once.svg";
|
||||
}
|
||||
}
|
||||
|
||||
implicitWidth: 50
|
||||
implicitHeight: width
|
||||
scaleIcon: false
|
||||
baseMargin: 3
|
||||
enabled: MprisController.loopSupported;
|
||||
onClicked: {
|
||||
let target = MprisLoopState.None;
|
||||
switch (MprisController.loopState) {
|
||||
case MprisLoopState.None: target = MprisLoopState.Playlist; break;
|
||||
case MprisLoopState.Playlist: target = MprisLoopState.Track; break;
|
||||
case MprisLoopState.Track: target = MprisLoopState.None; break;
|
||||
}
|
||||
|
||||
MprisController.setLoopState(target);
|
||||
}
|
||||
}
|
||||
|
||||
ClickableIcon {
|
||||
image: "root:icons/rewind.svg"
|
||||
implicitWidth: 60
|
||||
implicitHeight: width
|
||||
scaleIcon: false
|
||||
baseMargin: 3
|
||||
enabled: MprisController.canGoPrevious;
|
||||
onClicked: MprisController.previous();
|
||||
}
|
||||
|
||||
ClickableIcon {
|
||||
image: `root:icons/${MprisController.isPlaying ? "pause" : "play"}.svg`;
|
||||
Layout.leftMargin: -10
|
||||
Layout.rightMargin: -10
|
||||
implicitWidth: 80
|
||||
implicitHeight: width
|
||||
scaleIcon: false
|
||||
enabled: MprisController.isPlaying ? MprisController.canPause : MprisController.canPlay
|
||||
onClicked: {
|
||||
if (MprisController.isPlaying) MprisController.pause();
|
||||
else MprisController.play();
|
||||
}
|
||||
}
|
||||
|
||||
ClickableIcon {
|
||||
image: "root:icons/fast-forward.svg"
|
||||
implicitWidth: 60
|
||||
implicitHeight: width
|
||||
scaleIcon: false
|
||||
baseMargin: 3
|
||||
enabled: MprisController.canGoNext;
|
||||
onClicked: MprisController.next();
|
||||
}
|
||||
|
||||
ClickableIcon {
|
||||
image: `root:icons/${MprisController.hasShuffle ? "shuffle" : "shuffle-off"}.svg`
|
||||
implicitWidth: 50
|
||||
implicitHeight: width
|
||||
scaleIcon: false
|
||||
enabled: MprisController.shuffleSupported;
|
||||
onClicked: MprisController.setShuffle(!MprisController.hasShuffle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Label {
|
||||
Layout.preferredWidth: lengthLabel.implicitWidth
|
||||
text: timeStr(position)
|
||||
}
|
||||
|
||||
MediaSlider {
|
||||
id: slider
|
||||
Layout.fillWidth: true
|
||||
property var bindSlider: true;
|
||||
enabled: player.canSeek
|
||||
from: 0
|
||||
to: player.length
|
||||
|
||||
onPressedChanged: {
|
||||
if (!pressed) player.position = value;
|
||||
bindSlider = !pressed;
|
||||
}
|
||||
|
||||
Binding {
|
||||
when: slider.bindSlider
|
||||
slider.value: player.position
|
||||
}
|
||||
}
|
||||
|
||||
Label {
|
||||
id: lengthLabel
|
||||
text: timeStr(length)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,11 +41,8 @@ OverlayWidget {
|
|||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: width
|
||||
Behavior on implicitHeight {
|
||||
SmoothedAnimation { velocity: 50 }
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
ClickableIcon {
|
||||
id: mouseArea
|
||||
anchors {
|
||||
top: parent.top
|
||||
|
|
@ -54,31 +51,10 @@ OverlayWidget {
|
|||
}
|
||||
width: height
|
||||
|
||||
hoverEnabled: true
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
|
||||
|
||||
Image {
|
||||
id: image
|
||||
anchors.fill: parent
|
||||
|
||||
anchors.margins: mouseArea.pressed || targetMenuOpen ? 3 : 0
|
||||
Behavior on anchors.margins { SmoothedAnimation { velocity: 30 } }
|
||||
|
||||
source: modelData.icon
|
||||
sourceSize.width: width
|
||||
sourceSize.height: height
|
||||
cache: false
|
||||
visible: false
|
||||
}
|
||||
|
||||
MultiEffect {
|
||||
anchors.fill: image
|
||||
source: image
|
||||
|
||||
property real targetBrightness: mouseArea.pressed || targetMenuOpen ? -25 : mouseArea.containsMouse ? 75 : 0
|
||||
Behavior on targetBrightness { SmoothedAnimation { velocity: 600 } }
|
||||
brightness: targetBrightness / 1000
|
||||
}
|
||||
image: modelData.icon
|
||||
showPressed: targetMenuOpen
|
||||
|
||||
onClicked: event => {
|
||||
event.accepted = true;
|
||||
|
|
@ -99,42 +75,30 @@ OverlayWidget {
|
|||
}
|
||||
|
||||
property var tooltip: TooltipItem {
|
||||
anchors.fill: parent
|
||||
tooltip: bar.widgetSurface.tooltip
|
||||
owner: image
|
||||
tooltip: bar.tooltip
|
||||
owner: mouseArea
|
||||
|
||||
show: mouseArea.containsMouse
|
||||
implicitWidth: tooltipText.implicitWidth
|
||||
implicitHeight: tooltipText.implicitHeight
|
||||
|
||||
Text {
|
||||
id: tooltipText
|
||||
anchors.fill: parent
|
||||
text: modelData.tooltipTitle != "" ? modelData.tooltipTitle : modelData.id
|
||||
color: "white"
|
||||
}
|
||||
}
|
||||
|
||||
property var rightclickMenu: TooltipItem {
|
||||
anchors.fill: parent
|
||||
tooltip: bar.widgetSurface.tooltip
|
||||
owner: image
|
||||
tooltip: bar.tooltip
|
||||
owner: mouseArea
|
||||
|
||||
isMenu: true
|
||||
show: targetMenuOpen && menu.showChildren
|
||||
animateSize: !rightclickItems.animating
|
||||
implicitHeight: rightclickItems.implicitHeight
|
||||
implicitWidth: rightclickItems.implicitWidth
|
||||
|
||||
onVisibleChanged: {
|
||||
if (!visible) targetMenuOpen = false;
|
||||
}
|
||||
|
||||
onClose: targetMenuOpen = false;
|
||||
|
||||
MenuItemList {
|
||||
id: rightclickItems
|
||||
anchors.fill: parent
|
||||
items: menu == null ? [] : menu.children
|
||||
onClose: targetMenuOpen = false;
|
||||
}
|
||||
|
|
|
|||
114
modules/user/modules/quickshell/shell/bar/workspaces/Widget.qml
Normal file
114
modules/user/modules/quickshell/shell/bar/workspaces/Widget.qml
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell.Hyprland
|
||||
import ".."
|
||||
import "root:."
|
||||
|
||||
MouseArea {
|
||||
id: root
|
||||
required property var bar;
|
||||
required property int wsBaseIndex;
|
||||
property int wsCount: 10;
|
||||
property bool hideWhenEmpty: false;
|
||||
implicitHeight: column.implicitHeight + 10;
|
||||
|
||||
acceptedButtons: Qt.NoButton
|
||||
|
||||
onWheel: event => {
|
||||
event.accepted = true;
|
||||
const step = -Math.sign(event.angleDelta.y);
|
||||
const targetWs = currentIndex + step;
|
||||
|
||||
if (targetWs >= wsBaseIndex && targetWs < wsBaseIndex + wsCount) {
|
||||
Hyprland.dispatch(`workspace ${targetWs}`)
|
||||
}
|
||||
}
|
||||
|
||||
readonly property HyprlandMonitor monitor: Hyprland.monitorFor(bar.screen);
|
||||
property int currentIndex: 0;
|
||||
property int existsCount: 0;
|
||||
visible: !hideWhenEmpty || existsCount > 0;
|
||||
|
||||
property real animPos: 0;
|
||||
Behavior on animPos { SmoothedAnimation { velocity: 100 } }
|
||||
|
||||
// destructor takes care of nulling
|
||||
signal workspaceAdded(workspace: HyprlandWorkspace);
|
||||
|
||||
ColumnLayout {
|
||||
id: column
|
||||
spacing: 0
|
||||
anchors {
|
||||
fill: parent;
|
||||
topMargin: 0;
|
||||
margins: 5;
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: 10
|
||||
|
||||
MouseArea {
|
||||
id: wsItem
|
||||
onPressed: Hyprland.dispatch(`workspace ${wsIndex}`);
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 15
|
||||
|
||||
required property int index;
|
||||
property int wsIndex: wsBaseIndex + index;
|
||||
property HyprlandWorkspace workspace: null;
|
||||
property bool exists: workspace != null;
|
||||
property bool active: (monitor?.activeWorkspace ?? false) && monitor.activeWorkspace == workspace;
|
||||
|
||||
onActiveChanged: {
|
||||
if (active) root.currentIndex = wsIndex;
|
||||
}
|
||||
|
||||
onExistsChanged: {
|
||||
root.existsCount += exists ? 1 : -1;
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: root
|
||||
|
||||
function onWorkspaceAdded(workspace: HyprlandWorkspace) {
|
||||
if (workspace.id == wsItem.wsIndex) {
|
||||
wsItem.workspace = workspace;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
property real animActive: active ? 100 : 0
|
||||
Behavior on animActive { NumberAnimation { duration: 100 } }
|
||||
|
||||
property real animExists: exists ? 100 : 0
|
||||
Behavior on animExists { NumberAnimation { duration: 100 } }
|
||||
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
height: 10
|
||||
width: parent.width
|
||||
scale: 1 + animActive * 0.003
|
||||
radius: height / 2
|
||||
border.color: ShellGlobals.colors.widgetOutline
|
||||
border.width: 1
|
||||
color: ShellGlobals.interpolateColors(animExists * 0.01, ShellGlobals.colors.widget, ShellGlobals.colors.widgetActive);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: Hyprland.workspaces
|
||||
|
||||
function onObjectInsertedPost(workspace) {
|
||||
root.workspaceAdded(workspace);
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
Hyprland.workspaces.values.forEach(workspace => {
|
||||
root.workspaceAdded(workspace)
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue