forked from Shinonome/dots-hyprland
media controls: add shadow
This commit is contained in:
end-4
@@ -115,173 +115,188 @@ Item { // Player instance
|
|||||||
property color colOnSecondaryContainer: ColorUtils.mix(Appearance.m3colors.m3onSecondaryContainer, artDominantColor, 0.2)
|
property color colOnSecondaryContainer: ColorUtils.mix(Appearance.m3colors.m3onSecondaryContainer, artDominantColor, 0.2)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Rectangle { // Background wrapper with shadow
|
||||||
Rectangle { // Background
|
id: backgroundShadowLayer
|
||||||
id: background
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: Appearance.sizes.elevationMargin
|
anchors.margins: Appearance.sizes.elevationMargin
|
||||||
color: blendedColors.colLayer0
|
|
||||||
radius: root.popupRounding
|
radius: root.popupRounding
|
||||||
|
|
||||||
layer.enabled: true
|
layer.enabled: true
|
||||||
layer.effect: OpacityMask {
|
layer.effect: MultiEffect {
|
||||||
maskSource: Rectangle {
|
source: backgroundShadowLayer
|
||||||
width: background.width
|
anchors.fill: backgroundShadowLayer
|
||||||
height: background.height
|
shadowEnabled: true
|
||||||
radius: background.radius
|
shadowColor: Appearance.colors.colShadow
|
||||||
}
|
shadowVerticalOffset: 1
|
||||||
|
shadowBlur: 0.5
|
||||||
}
|
}
|
||||||
|
|
||||||
Image {
|
Rectangle { // Background
|
||||||
id: blurredArt
|
id: background
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
visible: true
|
color: blendedColors.colLayer0
|
||||||
source: playerController.downloaded ? Qt.resolvedUrl(artFilePath) : ""
|
radius: root.popupRounding
|
||||||
sourceSize.width: background.width
|
|
||||||
sourceSize.height: background.height
|
|
||||||
fillMode: Image.PreserveAspectCrop
|
|
||||||
cache: false
|
|
||||||
antialiasing: true
|
|
||||||
asynchronous: true
|
|
||||||
|
|
||||||
layer.enabled: true
|
layer.enabled: true
|
||||||
layer.effect: MultiEffect {
|
layer.effect: OpacityMask {
|
||||||
source: blurredArt
|
maskSource: Rectangle {
|
||||||
anchors.fill: blurredArt
|
width: background.width
|
||||||
saturation: 0.2
|
height: background.height
|
||||||
blurEnabled: true
|
radius: background.radius
|
||||||
blurMax: 100
|
}
|
||||||
blur: 1
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Image {
|
||||||
|
id: blurredArt
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
color: ColorUtils.transparentize(blendedColors.colLayer0, 0.25)
|
visible: true
|
||||||
radius: root.popupRounding
|
source: playerController.downloaded ? Qt.resolvedUrl(artFilePath) : ""
|
||||||
}
|
sourceSize.width: background.width
|
||||||
}
|
sourceSize.height: background.height
|
||||||
|
fillMode: Image.PreserveAspectCrop
|
||||||
RowLayout {
|
cache: false
|
||||||
anchors.fill: parent
|
antialiasing: true
|
||||||
anchors.margins: root.contentPadding
|
asynchronous: true
|
||||||
spacing: 15
|
|
||||||
|
|
||||||
Rectangle { // Art background
|
|
||||||
id: artBackground
|
|
||||||
Layout.fillHeight: true
|
|
||||||
implicitWidth: height
|
|
||||||
radius: root.artRounding
|
|
||||||
color: blendedColors.colLayer1
|
|
||||||
|
|
||||||
layer.enabled: true
|
layer.enabled: true
|
||||||
layer.effect: OpacityMask {
|
layer.effect: MultiEffect {
|
||||||
maskSource: Rectangle {
|
source: blurredArt
|
||||||
width: artBackground.width
|
anchors.fill: blurredArt
|
||||||
height: artBackground.height
|
saturation: 0.2
|
||||||
radius: artBackground.radius
|
blurEnabled: true
|
||||||
}
|
blurMax: 100
|
||||||
|
blur: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
Image { // Art image
|
Rectangle {
|
||||||
id: mediaArt
|
|
||||||
property int size: parent.height
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
color: ColorUtils.transparentize(blendedColors.colLayer0, 0.25)
|
||||||
source: playerController.downloaded ? Qt.resolvedUrl(artFilePath) : ""
|
radius: root.popupRounding
|
||||||
fillMode: Image.PreserveAspectCrop
|
|
||||||
cache: false
|
|
||||||
antialiasing: true
|
|
||||||
asynchronous: true
|
|
||||||
|
|
||||||
width: size
|
|
||||||
height: size
|
|
||||||
sourceSize.width: size
|
|
||||||
sourceSize.height: size
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ColumnLayout { // Info & controls
|
RowLayout {
|
||||||
Layout.fillHeight: true
|
anchors.fill: parent
|
||||||
spacing: 2
|
anchors.margins: root.contentPadding
|
||||||
|
spacing: 15
|
||||||
|
|
||||||
StyledText {
|
Rectangle { // Art background
|
||||||
id: trackTitle
|
id: artBackground
|
||||||
Layout.fillWidth: true
|
Layout.fillHeight: true
|
||||||
font.pixelSize: Appearance.font.pixelSize.large
|
implicitWidth: height
|
||||||
color: blendedColors.colOnLayer0
|
radius: root.artRounding
|
||||||
elide: Text.ElideRight
|
color: blendedColors.colLayer1
|
||||||
text: StringUtils.cleanMusicTitle(playerController.player?.trackTitle) || "Untitled"
|
|
||||||
|
layer.enabled: true
|
||||||
|
layer.effect: OpacityMask {
|
||||||
|
maskSource: Rectangle {
|
||||||
|
width: artBackground.width
|
||||||
|
height: artBackground.height
|
||||||
|
radius: artBackground.radius
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Image { // Art image
|
||||||
|
id: mediaArt
|
||||||
|
property int size: parent.height
|
||||||
|
anchors.fill: parent
|
||||||
|
|
||||||
|
source: playerController.downloaded ? Qt.resolvedUrl(artFilePath) : ""
|
||||||
|
fillMode: Image.PreserveAspectCrop
|
||||||
|
cache: false
|
||||||
|
antialiasing: true
|
||||||
|
asynchronous: true
|
||||||
|
|
||||||
|
width: size
|
||||||
|
height: size
|
||||||
|
sourceSize.width: size
|
||||||
|
sourceSize.height: size
|
||||||
|
}
|
||||||
}
|
}
|
||||||
StyledText {
|
|
||||||
id: trackArtist
|
ColumnLayout { // Info & controls
|
||||||
Layout.fillWidth: true
|
Layout.fillHeight: true
|
||||||
font.pixelSize: Appearance.font.pixelSize.smaller
|
spacing: 2
|
||||||
color: blendedColors.colSubtext
|
|
||||||
elide: Text.ElideRight
|
|
||||||
text: playerController.player?.trackArtist
|
|
||||||
}
|
|
||||||
Item { Layout.fillHeight: true }
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
implicitHeight: trackTime.implicitHeight + sliderRow.implicitHeight
|
|
||||||
|
|
||||||
StyledText {
|
StyledText {
|
||||||
id: trackTime
|
id: trackTitle
|
||||||
anchors.bottom: sliderRow.top
|
Layout.fillWidth: true
|
||||||
anchors.bottomMargin: 5
|
font.pixelSize: Appearance.font.pixelSize.large
|
||||||
anchors.left: parent.left
|
color: blendedColors.colOnLayer0
|
||||||
font.pixelSize: Appearance.font.pixelSize.small
|
elide: Text.ElideRight
|
||||||
|
text: StringUtils.cleanMusicTitle(playerController.player?.trackTitle) || "Untitled"
|
||||||
|
}
|
||||||
|
StyledText {
|
||||||
|
id: trackArtist
|
||||||
|
Layout.fillWidth: true
|
||||||
|
font.pixelSize: Appearance.font.pixelSize.smaller
|
||||||
color: blendedColors.colSubtext
|
color: blendedColors.colSubtext
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
text: `${StringUtils.friendlyTimeForSeconds(playerController.player?.position)} / ${StringUtils.friendlyTimeForSeconds(playerController.player?.length)}`
|
text: playerController.player?.trackArtist
|
||||||
}
|
|
||||||
RowLayout {
|
|
||||||
id: sliderRow
|
|
||||||
anchors {
|
|
||||||
bottom: parent.bottom
|
|
||||||
left: parent.left
|
|
||||||
right: parent.right
|
|
||||||
}
|
|
||||||
TrackChangeButton {
|
|
||||||
iconName: "skip_previous"
|
|
||||||
onClicked: playerController.player?.previous()
|
|
||||||
}
|
|
||||||
StyledProgressBar {
|
|
||||||
id: slider
|
|
||||||
Layout.fillWidth: true
|
|
||||||
highlightColor: blendedColors.colPrimary
|
|
||||||
trackColor: blendedColors.colSecondaryContainer
|
|
||||||
value: playerController.player?.position / playerController.player?.length
|
|
||||||
}
|
|
||||||
TrackChangeButton {
|
|
||||||
iconName: "skip_next"
|
|
||||||
onClicked: playerController.player?.next()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
Item { Layout.fillHeight: true }
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
implicitHeight: trackTime.implicitHeight + sliderRow.implicitHeight
|
||||||
|
|
||||||
RippleButton {
|
StyledText {
|
||||||
id: playPauseButton
|
id: trackTime
|
||||||
anchors.right: parent.right
|
anchors.bottom: sliderRow.top
|
||||||
anchors.bottom: sliderRow.top
|
anchors.bottomMargin: 5
|
||||||
anchors.bottomMargin: 5
|
anchors.left: parent.left
|
||||||
implicitWidth: 44
|
font.pixelSize: Appearance.font.pixelSize.small
|
||||||
implicitHeight: 44
|
color: blendedColors.colSubtext
|
||||||
onClicked: playerController.player.togglePlaying();
|
elide: Text.ElideRight
|
||||||
|
text: `${StringUtils.friendlyTimeForSeconds(playerController.player?.position)} / ${StringUtils.friendlyTimeForSeconds(playerController.player?.length)}`
|
||||||
|
}
|
||||||
|
RowLayout {
|
||||||
|
id: sliderRow
|
||||||
|
anchors {
|
||||||
|
bottom: parent.bottom
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
|
TrackChangeButton {
|
||||||
|
iconName: "skip_previous"
|
||||||
|
onClicked: playerController.player?.previous()
|
||||||
|
}
|
||||||
|
StyledProgressBar {
|
||||||
|
id: slider
|
||||||
|
Layout.fillWidth: true
|
||||||
|
highlightColor: blendedColors.colPrimary
|
||||||
|
trackColor: blendedColors.colSecondaryContainer
|
||||||
|
value: playerController.player?.position / playerController.player?.length
|
||||||
|
}
|
||||||
|
TrackChangeButton {
|
||||||
|
iconName: "skip_next"
|
||||||
|
onClicked: playerController.player?.next()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
buttonRadius: Appearance.rounding.full
|
RippleButton {
|
||||||
colBackground: playerController.player?.isPlaying ? blendedColors.colPrimary : blendedColors.colSecondaryContainer
|
id: playPauseButton
|
||||||
colBackgroundHover: playerController.player?.isPlaying ? blendedColors.colPrimaryHover : blendedColors.colSecondaryContainerHover
|
anchors.right: parent.right
|
||||||
colRipple: playerController.player?.isPlaying ? blendedColors.colPrimaryActive : blendedColors.colSecondaryContainerActive
|
anchors.bottom: sliderRow.top
|
||||||
|
anchors.bottomMargin: 5
|
||||||
|
implicitWidth: 44
|
||||||
|
implicitHeight: 44
|
||||||
|
onClicked: playerController.player.togglePlaying();
|
||||||
|
|
||||||
contentItem: MaterialSymbol {
|
buttonRadius: Appearance.rounding.full
|
||||||
iconSize: Appearance.font.pixelSize.huge
|
colBackground: playerController.player?.isPlaying ? blendedColors.colPrimary : blendedColors.colSecondaryContainer
|
||||||
fill: 1
|
colBackgroundHover: playerController.player?.isPlaying ? blendedColors.colPrimaryHover : blendedColors.colSecondaryContainerHover
|
||||||
horizontalAlignment: Text.AlignHCenter
|
colRipple: playerController.player?.isPlaying ? blendedColors.colPrimaryActive : blendedColors.colSecondaryContainerActive
|
||||||
color: playerController.player?.isPlaying ? blendedColors.colOnPrimary : blendedColors.colOnSecondaryContainer
|
|
||||||
text: playerController.player?.isPlaying ? "pause" : "play_arrow"
|
|
||||||
|
|
||||||
Behavior on color {
|
contentItem: MaterialSymbol {
|
||||||
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
|
iconSize: Appearance.font.pixelSize.huge
|
||||||
|
fill: 1
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
color: playerController.player?.isPlaying ? blendedColors.colOnPrimary : blendedColors.colOnSecondaryContainer
|
||||||
|
text: playerController.player?.isPlaying ? "pause" : "play_arrow"
|
||||||
|
|
||||||
|
Behavior on color {
|
||||||
|
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user