forked from Shinonome/dots-hyprland
feat: media controls
This commit is contained in:
end-4
@@ -1,29 +1,23 @@
|
||||
import "root:/modules/common"
|
||||
import "root:/modules/common/widgets"
|
||||
import "root:/services"
|
||||
import "root:/modules/common/functions/string_utils.js" as StringUtils
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import Quickshell.Io
|
||||
import Quickshell.Services.Mpris
|
||||
import Quickshell.Hyprland
|
||||
|
||||
Item {
|
||||
id: root
|
||||
readonly property MprisPlayer activePlayer: MprisController.activePlayer
|
||||
readonly property string cleanedTitle: activePlayer?.trackTitle.replace(/【[^】]*】/, "") || qsTr("No media")
|
||||
readonly property string cleanedTitle: StringUtils.cleanMusicTitle(activePlayer?.trackTitle) || "No media"
|
||||
|
||||
Layout.fillHeight: true
|
||||
implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
|
||||
implicitHeight: 40
|
||||
|
||||
// Background
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
width: parent.width
|
||||
implicitHeight: 32
|
||||
color: Appearance.colors.colLayer1
|
||||
radius: Appearance.rounding.small
|
||||
}
|
||||
|
||||
Timer {
|
||||
running: activePlayer?.playbackState == MprisPlaybackState.Playing
|
||||
interval: 1000
|
||||
@@ -33,7 +27,7 @@ Item {
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.MiddleButton | Qt.BackButton | Qt.ForwardButton | Qt.RightButton
|
||||
acceptedButtons: Qt.MiddleButton | Qt.BackButton | Qt.ForwardButton | Qt.RightButton | Qt.LeftButton
|
||||
onPressed: (event) => {
|
||||
if (event.button === Qt.MiddleButton) {
|
||||
activePlayer.togglePlaying();
|
||||
@@ -41,11 +35,21 @@ Item {
|
||||
activePlayer.previous();
|
||||
} else if (event.button === Qt.ForwardButton || event.button === Qt.RightButton) {
|
||||
activePlayer.next();
|
||||
}
|
||||
} else if (event.button === Qt.LeftButton) {
|
||||
Hyprland.dispatch("global quickshell:mediaControlsToggle")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Rectangle { // Background
|
||||
anchors.centerIn: parent
|
||||
width: parent.width
|
||||
implicitHeight: 32
|
||||
color: Appearance.colors.colLayer1
|
||||
radius: Appearance.rounding.small
|
||||
}
|
||||
|
||||
RowLayout { // Real content
|
||||
id: rowLayout
|
||||
|
||||
spacing: 4
|
||||
|
||||
@@ -266,6 +266,8 @@ Singleton {
|
||||
property real sidebarWidth: 450
|
||||
property real sidebarWidthExtended: 750
|
||||
property real osdWidth: 200
|
||||
property real mediaControlsWidth: 430
|
||||
property real mediaControlsHeight: 150
|
||||
property real notificationPopupWidth: 410
|
||||
property real searchWidthCollapsed: 260
|
||||
property real searchWidth: 450
|
||||
|
||||
@@ -108,4 +108,32 @@ function wordWrap(str, maxLen) {
|
||||
}
|
||||
if (current.length > 0) lines.push(current);
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
function cleanMusicTitle(title) {
|
||||
if (!title) return "";
|
||||
// Brackets
|
||||
title = title.replace(/ *\([^)]*\) */g, " "); // Round brackets
|
||||
title = title.replace(/ *\[[^\]]*\] */g, " "); // Square brackets
|
||||
title = title.replace(/ *\{[^\}]*\} */g, " "); // Curly brackets
|
||||
// Japenis brackets
|
||||
title = title.replace(/【[^】]*】/, "") // Touhou
|
||||
title = title.replace(/《[^》]*》/, "") // ??
|
||||
title = title.replace(/「[^」]*」/, "") // OP/ED
|
||||
title = title.replace(/『[^』]*』/, "") // OP/ED
|
||||
|
||||
return title;
|
||||
}
|
||||
|
||||
function friendlyTimeForSeconds(seconds) {
|
||||
if (isNaN(seconds) || seconds < 0) return "0:00";
|
||||
seconds = Math.floor(seconds);
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = seconds % 60;
|
||||
if (h > 0) {
|
||||
return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
||||
} else {
|
||||
return `${m}:${s.toString().padStart(2, '0')}`;
|
||||
}
|
||||
}
|
||||
@@ -16,8 +16,10 @@ Slider {
|
||||
property real handleWidth: (slider.pressed ? 3 : 5) * scale
|
||||
property real handleHeight: 44 * scale
|
||||
property real handleLimit: slider.backgroundDotMargins * scale
|
||||
property real trackHeight: 15 * scale
|
||||
|
||||
property real limitedHandleRangeWidth: (slider.availableWidth - handleWidth - slider.handleLimit * 2)
|
||||
property string tooltipContent: `${Math.round(value * 100)}%`
|
||||
Layout.fillWidth: true
|
||||
from: 0
|
||||
to: 1
|
||||
@@ -44,13 +46,14 @@ Slider {
|
||||
|
||||
background: Item {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
implicitHeight: 12 // Somehow binding this makes it fill height. Must be set with a constant like this
|
||||
implicitHeight: trackHeight
|
||||
|
||||
// Fill left
|
||||
Rectangle {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
width: slider.handleLimit + slider.visualPosition * slider.limitedHandleRangeWidth - (slider.handleMargins + slider.handleWidth / 2)
|
||||
height: parent.height
|
||||
height: trackHeight
|
||||
color: Appearance.m3colors.m3primary
|
||||
topLeftRadius: Appearance.rounding.full
|
||||
bottomLeftRadius: Appearance.rounding.full
|
||||
@@ -60,9 +63,10 @@ Slider {
|
||||
|
||||
// Fill right
|
||||
Rectangle {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: parent.right
|
||||
width: slider.handleLimit + (1 - slider.visualPosition) * slider.limitedHandleRangeWidth - (slider.handleMargins + slider.handleWidth / 2)
|
||||
height: parent.height
|
||||
height: trackHeight
|
||||
color: Appearance.m3colors.m3secondaryContainer
|
||||
topLeftRadius: Appearance.rounding.unsharpen
|
||||
bottomLeftRadius: Appearance.rounding.unsharpen
|
||||
@@ -101,7 +105,7 @@ Slider {
|
||||
|
||||
StyledToolTip {
|
||||
extraVisibleCondition: slider.pressed
|
||||
content: `${Math.round(slider.value * 100)}%`
|
||||
content: slider.tooltipContent
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,290 @@
|
||||
import "root:/modules/common"
|
||||
import "root:/modules/common/widgets"
|
||||
import "root:/services"
|
||||
import "root:/modules/common/functions/string_utils.js" as StringUtils
|
||||
import "root:/modules/common/functions/file_utils.js" as FileUtils
|
||||
import Qt5Compat.GraphicalEffects
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import Quickshell.Io
|
||||
import Quickshell.Services.Mpris
|
||||
import Quickshell.Widgets
|
||||
import Quickshell.Wayland
|
||||
import Quickshell.Hyprland
|
||||
|
||||
Scope {
|
||||
id: root
|
||||
required property var bar
|
||||
property bool visible: false
|
||||
readonly property MprisPlayer activePlayer: MprisController.activePlayer
|
||||
readonly property real osdWidth: Appearance.sizes.osdWidth
|
||||
readonly property real widgetWidth: Appearance.sizes.mediaControlsWidth
|
||||
readonly property real widgetHeight: Appearance.sizes.mediaControlsHeight
|
||||
property real contentPadding: 12
|
||||
property real popupRounding: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
|
||||
property real artRounding: Appearance.rounding.verysmall
|
||||
property string baseCoverArtDir: FileUtils.trimFileProtocol(`${XdgDirectories.cache}/media/coverart`)
|
||||
|
||||
Component.onCompleted: {
|
||||
Hyprland.dispatch(`exec rm -rf ${baseCoverArtDir} && mkdir -p ${baseCoverArtDir}`)
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: mediaControlsLoader
|
||||
active: false
|
||||
|
||||
PanelWindow {
|
||||
id: mediaControlsRoot
|
||||
visible: mediaControlsLoader.active
|
||||
|
||||
exclusiveZone: 0
|
||||
implicitWidth: (
|
||||
(mediaControlsRoot.screen.width / 2) // Middle of screen
|
||||
- (osdWidth / 2) // Dodge OSD
|
||||
- (widgetWidth / 2) // Account for widget width
|
||||
) * 2
|
||||
implicitHeight: playerColumnLayout.implicitHeight
|
||||
color: "transparent"
|
||||
WlrLayershell.namespace: "quickshell:mediaControls"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: playerColumnLayout
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
x: (mediaControlsRoot.screen.width / 2) // Middle of screen
|
||||
- (osdWidth / 2) // Dodge OSD
|
||||
- (widgetWidth) // Account for widget width
|
||||
+ (Appearance.sizes.elevationMargin) // It's fine for shadows to overlap
|
||||
|
||||
Item { // Player instance
|
||||
id: playerController
|
||||
property MprisPlayer player: root.activePlayer
|
||||
|
||||
implicitWidth: widgetWidth
|
||||
implicitHeight: widgetHeight
|
||||
property string fileName: Qt.md5(activePlayer?.trackArtUrl) + ".jpg"
|
||||
property string filePath: `${root.baseCoverArtDir}/${fileName}`
|
||||
|
||||
Process {
|
||||
id: downloadProcess
|
||||
running: false
|
||||
command: ["bash", "-c", `[ -f ${playerController.filePath} ] || curl '${playerController.player?.trackArtUrl}' -o '${playerController.filePath}'`]
|
||||
onExited: (exitCode, exitStatus) => {
|
||||
colorQuantizer.source = playerController.filePath
|
||||
}
|
||||
}
|
||||
|
||||
ColorQuantizer {
|
||||
id: colorQuantizer
|
||||
depth: 1 // 2^1 colors
|
||||
rescaleSize: 64 // Rescale to 64x64 for faster processing
|
||||
}
|
||||
|
||||
property QtObject blendedColors: QtObject {
|
||||
// property color colLayer0: Appearance.mix(Appearance.colors.colLayer0, colorQuantizer.colors[0], 0.5)
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: background
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.sizes.elevationMargin
|
||||
color: Appearance.colors.colLayer0
|
||||
radius: root.popupRounding
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: root.contentPadding
|
||||
spacing: 10
|
||||
|
||||
Rectangle { // Art backgrounmd
|
||||
Layout.fillHeight: true
|
||||
implicitWidth: height
|
||||
radius: root.artRounding
|
||||
color: Appearance.colors.colLayer1
|
||||
|
||||
Image { // Art image
|
||||
id: mediaArt
|
||||
property int size: parent.height
|
||||
anchors.fill: parent
|
||||
|
||||
source: playerController.player?.trackArtUrl
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
cache: false
|
||||
antialiasing: true
|
||||
asynchronous: true
|
||||
|
||||
width: size
|
||||
height: size
|
||||
sourceSize.width: size
|
||||
sourceSize.height: size
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: Rectangle {
|
||||
width: mediaArt.size
|
||||
height: mediaArt.size
|
||||
radius: root.artRounding
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout { // Info & controls
|
||||
Layout.fillHeight: true
|
||||
spacing: 2
|
||||
|
||||
StyledText {
|
||||
id: trackTitle
|
||||
Layout.fillWidth: true
|
||||
font.pixelSize: Appearance.font.pixelSize.large
|
||||
color: Appearance.colors.colOnLayer0
|
||||
elide: Text.ElideRight
|
||||
text: StringUtils.cleanMusicTitle(playerController.player?.trackTitle) || "No media"
|
||||
}
|
||||
StyledText {
|
||||
id: trackArtist
|
||||
Layout.fillWidth: true
|
||||
font.pixelSize: Appearance.font.pixelSize.smaller
|
||||
color: Appearance.colors.colSubtext
|
||||
elide: Text.ElideRight
|
||||
text: playerController.player?.trackArtist
|
||||
}
|
||||
Item { Layout.fillHeight: true }
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: trackTime.implicitHeight + slider.implicitHeight
|
||||
|
||||
StyledText {
|
||||
id: trackTime
|
||||
anchors.bottom: slider.top
|
||||
anchors.bottomMargin: -4
|
||||
anchors.left: parent.left
|
||||
font.pixelSize: Appearance.font.pixelSize.small
|
||||
color: Appearance.colors.colSubtext
|
||||
elide: Text.ElideRight
|
||||
text: `${StringUtils.friendlyTimeForSeconds(playerController.player?.position)} / ${StringUtils.friendlyTimeForSeconds(playerController.player?.length)}`
|
||||
}
|
||||
StyledSlider {
|
||||
id: slider
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottomMargin: -8
|
||||
}
|
||||
scale: 0.7
|
||||
value: playerController.player?.position / playerController.player?.length
|
||||
onMoved: playerController.player.position = value * playerController.player.length
|
||||
tooltipContent: StringUtils.friendlyTimeForSeconds(playerController.player?.position)
|
||||
}
|
||||
|
||||
Button {
|
||||
id: playPauseButton
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: slider.top
|
||||
anchors.bottomMargin: -1
|
||||
implicitWidth: 44
|
||||
implicitHeight: 44
|
||||
onClicked: playerController.player.togglePlaying();
|
||||
|
||||
PointingHandInteraction {}
|
||||
|
||||
background: Rectangle {
|
||||
color: playerController.player?.isPlaying ?
|
||||
(playPauseButton.pressed ? Appearance.colors.colPrimaryActive :
|
||||
playPauseButton.hovered ? Appearance.colors.colPrimaryHover :
|
||||
Appearance.m3colors.m3primary) :
|
||||
(playPauseButton.pressed ? Appearance.colors.colSecondaryContainerActive :
|
||||
playPauseButton.hovered ? Appearance.colors.colSecondaryContainerHover :
|
||||
Appearance.m3colors.m3secondaryContainer)
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
Behavior on color {
|
||||
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: MaterialSymbol {
|
||||
iconSize: Appearance.font.pixelSize.huge
|
||||
fill: 1
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
color: playerController.player?.isPlaying ? Appearance.m3colors.m3onPrimary : Appearance.m3colors.m3onSecondaryContainer
|
||||
text: playerController.player?.isPlaying ? "pause" : "play_arrow"
|
||||
|
||||
Behavior on color {
|
||||
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DropShadow {
|
||||
anchors.fill: background
|
||||
source: background
|
||||
horizontalOffset: 0
|
||||
verticalOffset: 2
|
||||
radius: Appearance.sizes.elevationMargin
|
||||
samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
|
||||
color: Appearance.colors.colShadow
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
IpcHandler {
|
||||
target: "mediaControls"
|
||||
|
||||
function toggle(): void {
|
||||
mediaControlsLoader.active = !mediaControlsLoader.active;
|
||||
if(mediaControlsLoader.active) Notifications.timeoutAll();
|
||||
}
|
||||
|
||||
function close(): void {
|
||||
mediaControlsLoader.active = false;
|
||||
}
|
||||
|
||||
function open(): void {
|
||||
mediaControlsLoader.active = true;
|
||||
Notifications.timeoutAll();
|
||||
}
|
||||
}
|
||||
|
||||
GlobalShortcut {
|
||||
name: "mediaControlsToggle"
|
||||
description: "Toggles media controls on press"
|
||||
|
||||
onPressed: {
|
||||
mediaControlsLoader.active = !mediaControlsLoader.active;
|
||||
if(mediaControlsLoader.active) Notifications.timeoutAll();
|
||||
}
|
||||
}
|
||||
GlobalShortcut {
|
||||
name: "mediaControlsOpen"
|
||||
description: "Opens media controls on press"
|
||||
|
||||
onPressed: {
|
||||
mediaControlsLoader.active = true;
|
||||
Notifications.timeoutAll();
|
||||
}
|
||||
}
|
||||
GlobalShortcut {
|
||||
name: "mediaControlsClose"
|
||||
description: "Closes media controls on press"
|
||||
|
||||
onPressed: {
|
||||
mediaControlsLoader.active = false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
|
||||
import "./modules/bar/"
|
||||
import "./modules/cheatsheet/"
|
||||
import "./modules/mediaControls/"
|
||||
import "./modules/notificationPopup/"
|
||||
import "./modules/onScreenDisplay/"
|
||||
import "./modules/overview/"
|
||||
@@ -26,6 +27,7 @@ ShellRoot {
|
||||
|
||||
Bar {}
|
||||
Cheatsheet {}
|
||||
MediaControls {}
|
||||
NotificationPopup {}
|
||||
OnScreenDisplayBrightness {}
|
||||
OnScreenDisplayVolume {}
|
||||
|
||||
Reference in New Issue
Block a user