Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-08 06:25:37 -05:00
Code Packages Releases Activity

media player and gtk3/4 color updates

Browse Source
This commit is contained in:
bbedward
2025-09-14 22:07:19 -04:00
parent a0192e709e
commit cdf4ca3b3b
3 changed files with 159 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
Modules/DankDash/MediaPlayerTab.qml
View File

@@ -19,12 +19,53 @@ Item {
property var defaultSink: AudioService.sink property var defaultSink: AudioService.sink
property color extractedDominantColor: Theme.surface // Palette that stays stable across track switches until new colors are ready
property color extractedAccentColor: Theme.primary property color dom: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, 1.0)
property bool colorsExtracted: false property color acc: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.25)
property color _nextDom: dom
property color _nextAcc: acc
// Track-switch hold (prevents banner flicker only during switches)
property bool isSwitching: false
property bool paletteReady: false
property string _lastArtUrl: ""
property url _cqSource: ""
// Derived "no players" state: always correct, no timers.
readonly property int _playerCount: allPlayers ? allPlayers.length : 0
readonly property bool _noneAvailable: _playerCount === 0
readonly property bool _trulyIdle: activePlayer
&& activePlayer.playbackState === MprisPlaybackState.Stopped
&& !activePlayer.trackTitle && !activePlayer.trackArtist
readonly property bool showNoPlayerNow: (!_switchHold) && (_noneAvailable || _trulyIdle)
// Short hold only during track switches (not when players disappear)
property bool _switchHold: false
Timer {
id: _switchHoldTimer
interval: 650
repeat: false
onTriggered: _switchHold = false
}
onActivePlayerChanged: {
isSwitching = true
_switchHold = true
paletteReady = false
_switchHoldTimer.restart()
if (activePlayer && activePlayer.trackArtUrl)
_preloadImage.source = activePlayer.trackArtUrl
}
function maybeFinishSwitch() {
if (activePlayer && activePlayer.trackTitle !== "" && paletteReady) {
isSwitching = false
_switchHold = false
}
}
readonly property real ratio: { readonly property real ratio: {
if (!activePlayer || activePlayer.length <= 0) { if (!activePlayer || !activePlayer.length || activePlayer.length <= 0) {
return 0 return 0
} }
const calculatedRatio = (activePlayer.position || 0) / activePlayer.length const calculatedRatio = (activePlayer.position || 0) / activePlayer.length
@@ -34,6 +75,34 @@ Item {
implicitWidth: 700 implicitWidth: 700
implicitHeight: 410 implicitHeight: 410
Connections {
target: activePlayer
function onTrackTitleChanged() {
_switchHoldTimer.restart()
maybeFinishSwitch()
}
function onTrackArtUrlChanged() {
if (activePlayer?.trackArtUrl) {
_lastArtUrl = activePlayer.trackArtUrl
_preloadImage.source = activePlayer.trackArtUrl
}
}
}
Connections {
target: MprisController
function onAvailablePlayersChanged() {
const count = (MprisController.availablePlayers?.length || 0)
if (count === 0) {
isSwitching = false
_switchHold = false
} else {
_switchHold = true
_switchHoldTimer.restart()
}
}
}
function getAudioDeviceIcon(device) { function getAudioDeviceIcon(device) {
if (!device || !device.name) return "speaker" if (!device || !device.name) return "speaker"
@@ -75,17 +144,56 @@ Item {
} }
} }
Image {
id: _preloadImage
source: ""
asynchronous: true
cache: true
visible: false
onStatusChanged: {
if (status === Image.Ready) {
_cqSource = source
colorQuantizer.source = _cqSource
}
else if (status === Image.Error) {
_cqSource = ""
}
}
}
ColorQuantizer { ColorQuantizer {
id: colorQuantizer id: colorQuantizer
source: activePlayer?.trackArtUrl || "" source: _cqSource !== "" ? _cqSource : undefined
depth: 6 depth: 6
onColorsChanged: { onColorsChanged: {
if (colors.length > 0) { if (!colors || colors.length === 0) return
extractedDominantColor = colors[0] const d = colors[Math.min(1, colors.length-1)]
extractedAccentColor = colors.length > 2 ? colors[2] : colors[0] const a = colors[Math.min(3, colors.length-1)]
colorsExtracted = true _pendingDom = d
_pendingAcc = a
paletteApplyDelay.restart()
}
}
property color _pendingDom: dom
property color _pendingAcc: acc
Timer {
id: paletteApplyDelay
interval: 90
repeat: false
onTriggered: {
const dist = (c1, c2) => {
const dr = c1.r - c2.r, dg = c1.g - c2.g, db = c1.b - c2.b
return Math.sqrt(dr*dr + dg*dg + db*db)
} }
const domChanged = dist(_pendingDom, dom) > 0.02
const accChanged = dist(_pendingAcc, acc) > 0.02
if (domChanged || accChanged) {
dom = _pendingDom
acc = _pendingAcc
}
paletteReady = true
maybeFinishSwitch()
} }
} }
@@ -97,31 +205,31 @@ Item {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: Theme.cornerRadius radius: Theme.cornerRadius
opacity: colorsExtracted ? 1.0 : 0.3 opacity: 1.0
gradient: Gradient { gradient: Gradient {
GradientStop { GradientStop {
position: 0.0 position: 0.0
color: colorsExtracted ? color: Qt.rgba(dom.r, dom.g, dom.b, paletteReady ? 0.38 : 0.06)
Qt.rgba(extractedDominantColor.r, extractedDominantColor.g, extractedDominantColor.b, 0.4) :
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
} }
GradientStop { GradientStop {
position: 0.3 position: 0.3
color: colorsExtracted ? color: Qt.rgba(acc.r, acc.g, acc.b, paletteReady ? 0.28 : 0.05)
Qt.rgba(extractedAccentColor.r, extractedAccentColor.g, extractedAccentColor.b, 0.3) :
Qt.rgba(Theme.secondary.r, Theme.secondary.g, Theme.secondary.b, 0.15)
} }
GradientStop { GradientStop {
position: 1.0 position: 1.0
color: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, 0.85) color: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, paletteReady ? 0.92 : 0.985)
} }
} }
Behavior on opacity { NumberAnimation { duration: 160 } }
} }
Behavior on dom { ColorAnimation { duration: 220; easing.type: Easing.InOutQuad } }
Behavior on acc { ColorAnimation { duration: 220; easing.type: Easing.InOutQuad } }
Column { Column {
anchors.centerIn: parent anchors.centerIn: parent
spacing: Theme.spacingM spacing: Theme.spacingM
visible: !activePlayer || activePlayer.trackTitle === "" visible: showNoPlayerNow
DankIcon { DankIcon {
name: "music_note" name: "music_note"
@@ -141,7 +249,7 @@ Item {
Item { Item {
anchors.fill: parent anchors.fill: parent
clip: false clip: false
visible: activePlayer && activePlayer.trackTitle !== "" visible: !_noneAvailable && (!showNoPlayerNow)
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent

26
matugen/templates/gtk-colors.css
View File

@@ -3,18 +3,18 @@
* Generated with Matugen * Generated with Matugen
*/ */
@define-color accent_color {{colors.primary_fixed_dim.default.hex}}; @define-color accent_color {{colors.primary.default.hex}};
@define-color accent_fg_color {{colors.on_primary_fixed.default.hex}}; @define-color accent_fg_color {{colors.on_primary.default.hex}};
@define-color accent_bg_color {{colors.primary_fixed_dim.default.hex}}; @define-color accent_bg_color {{colors.primary_fixed_dim.default.hex}};
@define-color window_bg_color {{colors.surface_dim.default.hex}}; @define-color window_bg_color {{colors.surface_container.default.hex}};
@define-color window_fg_color {{colors.on_surface.default.hex}}; @define-color window_fg_color {{colors.on_surface.default.hex}};
@define-color headerbar_bg_color {{colors.surface_dim.default.hex}}; @define-color headerbar_bg_color {{colors.surface_container.default.hex}};
@define-color headerbar_fg_color {{colors.on_surface.default.hex}}; @define-color headerbar_fg_color {{colors.on_surface.default.hex}};
@define-color popover_bg_color {{colors.surface_dim.default.hex}}; @define-color popover_bg_color {{colors.surface_container.default.hex}};
@define-color popover_fg_color {{colors.on_surface.default.hex}}; @define-color popover_fg_color {{colors.on_surface.default.hex}};
@define-color view_bg_color {{colors.surface.default.hex}}; @define-color view_bg_color {{colors.surface_container.default.hex}};
@define-color view_fg_color {{colors.on_surface.default.hex}}; @define-color view_fg_color {{colors.on_surface.default.hex}};
@define-color card_bg_color {{colors.surface.default.hex}}; @define-color card_bg_color {{colors.surface_container.default.hex}};
@define-color card_fg_color {{colors.on_surface.default.hex}}; @define-color card_fg_color {{colors.on_surface.default.hex}};
@define-color sidebar_bg_color @window_bg_color; @define-color sidebar_bg_color @window_bg_color;
@define-color sidebar_fg_color @window_fg_color; @define-color sidebar_fg_color @window_fg_color;
@@ -22,13 +22,13 @@
@define-color sidebar_backdrop_color @window_bg_color; @define-color sidebar_backdrop_color @window_bg_color;
/* Titlebar and headerbar specific colors for window decorations */ /* Titlebar and headerbar specific colors for window decorations */
@define-color theme_bg_color {{colors.surface.default.hex}}; @define-color theme_bg_color {{colors.surface_container.default.hex}};
@define-color theme_fg_color {{colors.on_surface.default.hex}}; @define-color theme_fg_color {{colors.on_surface.default.hex}};
@define-color theme_base_color {{colors.surface.default.hex}}; @define-color theme_base_color {{colors.surface_container.default.hex}};
@define-color theme_text_color {{colors.on_surface.default.hex}}; @define-color theme_text_color {{colors.on_surface.default.hex}};
@define-color theme_selected_bg_color {{colors.primary.default.hex}}; @define-color theme_selected_bg_color {{colors.primary.default.hex}};
@define-color theme_selected_fg_color {{colors.on_primary.default.hex}}; @define-color theme_selected_fg_color {{colors.on_primary.default.hex}};
@define-color theme_button_background_normal {{colors.surface.default.hex}}; @define-color theme_button_background_normal {{colors.surface_container_high.default.hex}};
@define-color theme_button_foreground_normal {{colors.on_surface.default.hex}}; @define-color theme_button_foreground_normal {{colors.on_surface.default.hex}};
@define-color theme_button_background_hover alpha({{colors.on_surface.default.hex}}, 0.08); @define-color theme_button_background_hover alpha({{colors.on_surface.default.hex}}, 0.08);
@define-color theme_button_foreground_hover {{colors.on_surface.default.hex}}; @define-color theme_button_foreground_hover {{colors.on_surface.default.hex}};
@@ -44,8 +44,8 @@
@define-color headerbar_shade_color {{colors.surface_variant.default.hex}}; @define-color headerbar_shade_color {{colors.surface_variant.default.hex}};
/* Window control and decoration colors */ /* Window control and decoration colors */
@define-color wm_bg_a {{colors.surface_dim.default.hex}}; @define-color wm_bg_a {{colors.surface_container.default.hex}};
@define-color wm_bg_b {{colors.surface_container.default.hex}}; @define-color wm_bg_b {{colors.surface_container_high.default.hex}};
@define-color wm_border_a {{colors.outline.default.hex}}; @define-color wm_border_a {{colors.outline.default.hex}};
@define-color wm_border_b {{colors.outline_variant.default.hex}}; @define-color wm_border_b {{colors.outline_variant.default.hex}};
@define-color wm_shadow {{colors.shadow.default.hex}}; @define-color wm_shadow {{colors.shadow.default.hex}};
@@ -58,7 +58,7 @@
@define-color menu_selected_fg_color {{colors.on_primary.default.hex}}; @define-color menu_selected_fg_color {{colors.on_primary.default.hex}};
/* Button and control colors */ /* Button and control colors */
@define-color button_bg_color {{colors.surface.default.hex}}; @define-color button_bg_color {{colors.surface_container_high.default.hex}};
@define-color button_fg_color {{colors.on_surface.default.hex}}; @define-color button_fg_color {{colors.on_surface.default.hex}};
@define-color button_border_color {{colors.outline_variant.default.hex}}; @define-color button_border_color {{colors.outline_variant.default.hex}};
@define-color button_active_bg_color {{colors.primary.default.hex}}; @define-color button_active_bg_color {{colors.primary.default.hex}};

36
matugen/templates/gtk3-colors.css
View File

@@ -97,7 +97,7 @@ popover.background .menuitem.button.flat:selected, .csd treeview.view:selected,
* Base States * * Base States *
***************/ ***************/
.background { .background {
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
color: {{colors.on_surface.default.hex}}; color: {{colors.on_surface.default.hex}};
} }
@@ -139,7 +139,7 @@ popover.background .menuitem.button.flat:selected, .csd treeview.view:selected,
} }
.view { .view {
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
color: {{colors.on_surface.default.hex}}; color: {{colors.on_surface.default.hex}};
} }
@@ -160,7 +160,7 @@ window.background.csd > stack.view {
} }
textview text { textview text {
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
textview border { textview border {
@@ -412,7 +412,7 @@ entry progress {
} }
treeview entry.flat, treeview entry { treeview entry.flat, treeview entry {
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:focus { treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:focus {
@@ -1051,7 +1051,7 @@ button.combo:only-child:disabled {
toolbar { toolbar {
-GtkWidget-window-dragging: true; -GtkWidget-window-dragging: true;
padding: 2px 3px; padding: 2px 3px;
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
.osd toolbar { .osd toolbar {
@@ -1117,7 +1117,7 @@ toolbar:not(.inline-toolbar):not(.osd) switch {
} }
.toolbar { .toolbar {
background-color: {{colors.surface_container_lowest.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
frame .toolbar { frame .toolbar {
@@ -1129,7 +1129,7 @@ frame .toolbar {
border-style: solid; border-style: solid;
border-width: 0 1px 1px; border-width: 0 1px 1px;
border-color: alpha({{colors.on_surface.default.hex}}, 0.12); border-color: alpha({{colors.on_surface.default.hex}}, 0.12);
background-color: {{colors.surface_container_lowest.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
.frame .inline-toolbar { .frame .inline-toolbar {
@@ -1143,7 +1143,7 @@ searchbar > revealer > box,
border-style: solid; border-style: solid;
border-width: 0 0 1px; border-width: 0 0 1px;
border-color: alpha({{colors.on_surface.default.hex}}, 0.12); border-color: alpha({{colors.on_surface.default.hex}}, 0.12);
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
background-clip: border-box; background-clip: border-box;
} }
@@ -1219,7 +1219,7 @@ searchbar > revealer > box {
.titlebar { .titlebar {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1); transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: {{colors.surface_container_low.default.hex}}; background-color: {{colors.surface_container.default.hex}};
color: {{colors.on_surface.default.hex}}; color: {{colors.on_surface.default.hex}};
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
box-shadow: inset 0 -1px alpha({{colors.on_surface.default.hex}}, 0.12); box-shadow: inset 0 -1px alpha({{colors.on_surface.default.hex}}, 0.12);
@@ -1238,7 +1238,7 @@ searchbar > revealer > box {
} }
.csd .titlebar:backdrop { .csd .titlebar:backdrop {
background-color: {{colors.surface_container_lowest.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
.titlebar .title { .titlebar .title {
@@ -1275,7 +1275,7 @@ searchbar > revealer > box {
} }
.titlebar + separator:backdrop, .titlebar + separator.sidebar:backdrop { .titlebar + separator:backdrop, .titlebar + separator.sidebar:backdrop {
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
.titlebar.selection-mode + separator, .titlebar.selection-mode + separator.sidebar, .selection-mode .titlebar + separator, .selection-mode .titlebar + separator.sidebar { .titlebar.selection-mode + separator, .titlebar.selection-mode + separator.sidebar, .selection-mode .titlebar + separator, .selection-mode .titlebar + separator.sidebar {
@@ -1378,13 +1378,13 @@ searchbar > revealer > box {
padding: 6px 12px; padding: 6px 12px;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
border: none; border: none;
background-color: {{colors.surface_container_lowest.default.hex}}; background-color: {{colors.surface_container.default.hex}};
background-image: none; background-image: none;
box-shadow: inset 0 1px alpha({{colors.on_surface.default.hex}}, 0.1); box-shadow: inset 0 1px alpha({{colors.on_surface.default.hex}}, 0.1);
} }
.titlebar.default-decoration:backdrop { .titlebar.default-decoration:backdrop {
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
.tiled .titlebar.default-decoration, .maximized .titlebar.default-decoration, .fullscreen .titlebar.default-decoration { .tiled .titlebar.default-decoration, .maximized .titlebar.default-decoration, .fullscreen .titlebar.default-decoration {
@@ -1419,7 +1419,7 @@ headerbar {
} }
box.vertical headerbar { box.vertical headerbar {
background-color: {{colors.surface_container_low.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
headerbar entry, headerbar entry,
@@ -1668,7 +1668,7 @@ treeview.view header button:not(:focus):not(:hover):not(:active) {
} }
treeview.view header button, treeview.view header button:disabled { treeview.view header button, treeview.view header button:disabled {
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
treeview.view header button:last-child { treeview.view header button:last-child {
@@ -1683,7 +1683,7 @@ treeview.view header.button.dnd {
border-color: alpha({{colors.on_surface.default.hex}}, 0.12); border-color: alpha({{colors.on_surface.default.hex}}, 0.12);
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
background-clip: border-box; background-clip: border-box;
color: {{colors.primary.default.hex}}; color: {{colors.primary.default.hex}};
} }
@@ -1699,7 +1699,7 @@ menubar,
.menubar { .menubar {
-GtkWidget-window-dragging: true; -GtkWidget-window-dragging: true;
padding: 0; padding: 0;
background-color: {{colors.surface_container_lowest.default.hex}}; background-color: {{colors.surface_container.default.hex}};
color: {{colors.on_surface.default.hex}}; color: {{colors.on_surface.default.hex}};
box-shadow: inset 0 -1px alpha({{colors.on_surface.default.hex}}, 0.12); box-shadow: inset 0 -1px alpha({{colors.on_surface.default.hex}}, 0.12);
} }
@@ -1707,7 +1707,7 @@ menubar,
menubar:backdrop, menubar:backdrop,
.menubar:backdrop { .menubar:backdrop {
color: alpha({{colors.on_surface.default.hex}}, 0.7); color: alpha({{colors.on_surface.default.hex}}, 0.7);
background-color: {{colors.surface.default.hex}}; background-color: {{colors.surface_container.default.hex}};
} }
.csd menubar, .csd .menubar { .csd menubar, .csd .menubar {