kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

music controls: back to css image

Browse Source 
prob will fix incremental lag over time
This commit is contained in:
end-4
2024-03-05 11:18:45 +07:00
parent 9de662f125
commit 6278320933
1 changed files with 56 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/modules/indicators/musiccontrols.js
+56 -48
View File
@@ -119,62 +119,63 @@ const CoverArt = ({ player, ...rest }) => {
label: 'music_note', label: 'music_note',
})] })]
}); });
const coverArtDrawingArea = Widget.DrawingArea({ className: 'osd-music-cover-art' }); // const coverArtDrawingArea = Widget.DrawingArea({ className: 'osd-music-cover-art' });
const coverArtDrawingAreaStyleContext = coverArtDrawingArea.get_style_context(); // const coverArtDrawingAreaStyleContext = coverArtDrawingArea.get_style_context();
const realCoverArt = Box({ const realCoverArt = Box({
className: 'osd-music-cover-art', className: 'osd-music-cover-art',
homogeneous: true, homogeneous: true,
children: [coverArtDrawingArea], // children: [coverArtDrawingArea],
attribute: { attribute: {
'pixbuf': null, 'pixbuf': null,
'showImage': (self, imagePath) => { // 'showImage': (self, imagePath) => {
const borderRadius = coverArtDrawingAreaStyleContext.get_property('border-radius', Gtk.StateFlags.NORMAL); // const borderRadius = coverArtDrawingAreaStyleContext.get_property('border-radius', Gtk.StateFlags.NORMAL);
const frameHeight = coverArtDrawingAreaStyleContext.get_property('min-height', Gtk.StateFlags.NORMAL); // const frameHeight = coverArtDrawingAreaStyleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
const frameWidth = coverArtDrawingAreaStyleContext.get_property('min-width', Gtk.StateFlags.NORMAL); // const frameWidth = coverArtDrawingAreaStyleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
let imageHeight = frameHeight; // let imageHeight = frameHeight;
let imageWidth = frameWidth; // let imageWidth = frameWidth;
// Get image dimensions // // Get image dimensions
execAsync(['identify', '-format', '{"w":%w,"h":%h}', imagePath]) // execAsync(['identify', '-format', '{"w":%w,"h":%h}', imagePath])
.then((output) => { // .then((output) => {
const imageDimensions = JSON.parse(output); // const imageDimensions = JSON.parse(output);
const imageAspectRatio = imageDimensions.w / imageDimensions.h; // const imageAspectRatio = imageDimensions.w / imageDimensions.h;
const displayedAspectRatio = imageWidth / imageHeight; // const displayedAspectRatio = imageWidth / imageHeight;
if (imageAspectRatio >= displayedAspectRatio) { // if (imageAspectRatio >= displayedAspectRatio) {
imageWidth = imageHeight * imageAspectRatio; // imageWidth = imageHeight * imageAspectRatio;
} else { // } else {
imageHeight = imageWidth / imageAspectRatio; // imageHeight = imageWidth / imageAspectRatio;
} // }
// Real stuff // // Real stuff
// TODO: fix memory leak(?) // // TODO: fix memory leak(?)
// if (self.attribute.pixbuf) { // // if (self.attribute.pixbuf) {
// self.attribute.pixbuf.unref(); // // self.attribute.pixbuf.unref();
// self.attribute.pixbuf = null; // // self.attribute.pixbuf = null;
// } // // }
self.attribute.pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(imagePath, imageWidth, imageHeight); // self.attribute.pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(imagePath, imageWidth, imageHeight);
coverArtDrawingArea.set_size_request(frameWidth, frameHeight); // coverArtDrawingArea.set_size_request(frameWidth, frameHeight);
coverArtDrawingArea.connect("draw", (widget, cr) => { // coverArtDrawingArea.connect("draw", (widget, cr) => {
// Clip a rounded rectangle area // // Clip a rounded rectangle area
cr.arc(borderRadius, borderRadius, borderRadius, Math.PI, 1.5 * Math.PI); // cr.arc(borderRadius, borderRadius, borderRadius, Math.PI, 1.5 * Math.PI);
cr.arc(frameWidth - borderRadius, borderRadius, borderRadius, 1.5 * Math.PI, 2 * Math.PI); // cr.arc(frameWidth - borderRadius, borderRadius, borderRadius, 1.5 * Math.PI, 2 * Math.PI);
cr.arc(frameWidth - borderRadius, frameHeight - borderRadius, borderRadius, 0, 0.5 * Math.PI); // cr.arc(frameWidth - borderRadius, frameHeight - borderRadius, borderRadius, 0, 0.5 * Math.PI);
cr.arc(borderRadius, frameHeight - borderRadius, borderRadius, 0.5 * Math.PI, Math.PI); // cr.arc(borderRadius, frameHeight - borderRadius, borderRadius, 0.5 * Math.PI, Math.PI);
cr.closePath(); // cr.closePath();
cr.clip(); // cr.clip();
// Paint image as bg, centered // // Paint image as bg, centered
Gdk.cairo_set_source_pixbuf(cr, self.attribute.pixbuf, // Gdk.cairo_set_source_pixbuf(cr, self.attribute.pixbuf,
frameWidth / 2 - imageWidth / 2, // frameWidth / 2 - imageWidth / 2,
frameHeight / 2 - imageHeight / 2 // frameHeight / 2 - imageHeight / 2
); // );
cr.paint(); // cr.paint();
}); // });
}).catch(print) // }).catch(print)
}, // },
'updateCover': (self) => { 'updateCover': (self) => {
// const player = Mpris.getPlayer(); // Maybe no need to re-get player.. can't remember why I had this // const player = Mpris.getPlayer(); // Maybe no need to re-get player.. can't remember why I had this
// Player closed // Player closed
// Note that cover path still remains, so we're checking title // Note that cover path still remains, so we're checking title
if (!player || player.trackTitle == "") { if (!player || player.trackTitle == "") {
self.css = `background-image: none;`; // CSS image
App.applyCss(`${COMPILED_STYLE_DIR}/style.css`); App.applyCss(`${COMPILED_STYLE_DIR}/style.css`);
return; return;
} }
@@ -182,13 +183,17 @@ const CoverArt = ({ player, ...rest }) => {
const coverPath = player.coverPath; const coverPath = player.coverPath;
const stylePath = `${player.coverPath}${lightDark}${COVER_COLORSCHEME_SUFFIX}`; const stylePath = `${player.coverPath}${lightDark}${COVER_COLORSCHEME_SUFFIX}`;
if (player.coverPath == lastCoverPath) { // Since 'notify::cover-path' emits on cover download complete if (player.coverPath == lastCoverPath) { // Since 'notify::cover-path' emits on cover download complete
Utils.timeout(200, () => self.attribute.showImage(self, coverPath)); Utils.timeout(200, () => {
// self.attribute.showImage(self, coverPath);
self.css = `background-image: url('${coverPath}');`; // CSS image
});
} }
lastCoverPath = player.coverPath; lastCoverPath = player.coverPath;
// If a colorscheme has already been generated, skip generation // If a colorscheme has already been generated, skip generation
if (fileExists(stylePath)) { if (fileExists(stylePath)) {
self.attribute.showImage(self, coverPath) // self.attribute.showImage(self, coverPath)
self.css = `background-image: url('${coverPath}');`; // CSS image
App.applyCss(stylePath); App.applyCss(stylePath);
return; return;
} }
@@ -200,7 +205,10 @@ const CoverArt = ({ player, ...rest }) => {
exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${lightDark}`) exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${lightDark}`)
exec(`cp ${GLib.get_user_cache_dir()}/wal/colors.scss ${App.configDir}/scss/_musicwal.scss`); exec(`cp ${GLib.get_user_cache_dir()}/wal/colors.scss ${App.configDir}/scss/_musicwal.scss`);
exec(`sass ${App.configDir}/scss/_music.scss ${stylePath}`); exec(`sass ${App.configDir}/scss/_music.scss ${stylePath}`);
Utils.timeout(200, () => self.attribute.showImage(self, coverPath)); Utils.timeout(200, () => {
// self.attribute.showImage(self, coverPath)
self.css = `background-image: url('${coverPath}');`; // CSS image
});
App.applyCss(`${stylePath}`); App.applyCss(`${stylePath}`);
}) })
.catch(print); .catch(print);