Start work for the media menu refactor...

This commit is contained in:
Jas Singh
2024-06-30 16:46:09 -07:00
parent 9cf5b0f5ea
commit 6b98da2145
19 changed files with 807 additions and 900 deletions

View File

@@ -0,0 +1,16 @@
const AlbumCover = (curPlayer) => {
if (
typeof curPlayer.track_cover_url === "string" &&
curPlayer.track_cover_url.length > 0
) {
return Widget.Box({
vexpand: false,
vpack: "center",
class_name: "media-indicator-current-album-cover",
css: `background-image: url("${curPlayer.track_cover_url}")`,
});
}
return Widget.Box();
};
export { AlbumCover };

View File

@@ -0,0 +1,61 @@
const Bar = (curPlayer) => {
return Widget.Box({
class_name: "media-indicator-current-progress-bar",
hexpand: true,
children: [
Widget.Box({
hexpand: true,
child: Widget.Slider({
hexpand: true,
tooltip_text: "yoyo",
class_name: "menu-slider media progress",
draw_value: false,
on_change: ({ value }) =>
(curPlayer.position = value * curPlayer.length),
setup: (self) => {
const update = () => {
const value = curPlayer.position / curPlayer.length;
console.log(`[value]: ${value}`);
console.log(self.value);
if (
typeof curPlayer.position === "number" &&
curPlayer.position > 0
) {
const value = curPlayer.position / curPlayer.length;
self.value = value > 0 ? value : 0;
}
return 0;
};
self.hook(curPlayer, update);
self.hook(curPlayer, update, "position");
self.poll(1000, update);
function updateTooltip() {
const curHour = Math.floor(curPlayer.position / 3600);
const curMin = Math.floor((curPlayer.position % 3600) / 60);
const curSec = Math.floor(curPlayer.position % 60);
if (
typeof curPlayer.position === "number" &&
curPlayer.position >= 0
) {
// WARN: These nested ternaries are absolutely disgusting lol
self.tooltip_text = `${
curHour > 0
? (curHour < 10 ? "0" + curHour : curHour) + ":"
: ""
}${curMin < 10 ? "0" + curMin : curMin}:${curSec < 10 ? "0" + curSec : curSec}`;
} else {
self.tooltip_text = `00:00`;
}
}
self.poll(1000, updateTooltip);
self.hook(curPlayer, updateTooltip);
},
}),
}),
],
});
};
export { Bar };

View File

@@ -0,0 +1,104 @@
import icons from "../../../icons/index.js";
const Controls = (curPlayer) => {
const isLoopActive = (player) => {
return player["loop-status"] !== null &&
["track", "playlist"].includes(player["loop-status"].toLowerCase())
? "active"
: "";
};
const isShuffleActive = (player) => {
return player["shuffle-status"] !== null && player["shuffle-status"]
? "active"
: "";
};
return Widget.Box({
class_name: "media-indicator-current-player-controls",
vertical: true,
children: [
Widget.Box({
class_name: "media-indicator-current-controls",
hpack: "center",
children: [
Widget.Box({
class_name: "media-indicator-control shuffle",
children: [
Widget.Button({
hpack: "center",
tooltip_text:
curPlayer.shuffle_status !== null
? curPlayer.shuffle_status
? "Shuffling"
: "Not Shuffling"
: null,
hasTooltip: true,
on_primary_click: () => curPlayer.shuffle(),
class_name: `media-indicator-control-button shuffle ${isShuffleActive(curPlayer)} ${curPlayer.shuffle_status !== null ? "enabled" : "disabled"}`,
child: Widget.Icon(icons.mpris.shuffle["enabled"]),
}),
],
}),
Widget.Box({
class_name: `media-indicator-control prev ${curPlayer.can_go_prev}`,
children: [
Widget.Button({
hpack: "center",
on_primary_click: () => curPlayer.previous(),
class_name: `media-indicator-control-button prev ${curPlayer.can_go_prev ? "enabled" : "disabled"}`,
child: Widget.Icon(icons.mpris.prev),
}),
],
}),
Widget.Box({
class_name: "media-indicator-control play",
children: [
Widget.Button({
hpack: "center",
on_primary_click: () => curPlayer.playPause(),
class_name: `media-indicator-control-button play ${curPlayer.can_play ? "enabled" : "disabled"}`,
child: Widget.Icon(
icons.mpris[curPlayer.play_back_status.toLowerCase()],
),
}),
],
}),
Widget.Box({
class_name: `media-indicator-control next`,
children: [
Widget.Button({
hpack: "center",
on_primary_click: () => curPlayer.next(),
class_name: `media-indicator-control-button next ${curPlayer.can_go_next ? "enabled" : "disabled"}`,
child: Widget.Icon(icons.mpris.next),
}),
],
}),
Widget.Box({
class_name: "media-indicator-control loop",
children: [
Widget.Button({
hpack: "center",
tooltip_text:
curPlayer.loop_status !== null
? `Looping: ${curPlayer.loop_status}`
: null,
hasTooltip: true,
on_primary_click: () => curPlayer.loop(),
class_name: `media-indicator-control-button loop ${isLoopActive(curPlayer)} ${curPlayer.loop_status !== null ? "enabled" : "disabled"}`,
child: Widget.Icon(
curPlayer.loop_status === null
? icons.mpris.loop["none"]
: icons.mpris.loop[curPlayer.loop_status?.toLowerCase()],
),
}),
],
}),
],
}),
],
});
};
export { Controls };

View File

@@ -0,0 +1,51 @@
const MediaInfo = (curPlayer) => {
return Widget.Box({
class_name: "media-indicator-current-media-info",
hpack: "center",
hexpand: true,
vertical: true,
children: [
Widget.Box({
class_name: "media-indicator-current-song-name",
hpack: "center",
children: [
Widget.Label({
truncate: "end",
max_width_chars: 21,
wrap: true,
class_name: "media-indicator-current-song-name-label",
label: curPlayer["track-title"],
}),
],
}),
Widget.Box({
class_name: "media-indicator-current-song-author",
hpack: "center",
children: [
Widget.Label({
truncate: "end",
wrap: true,
max_width_chars: 25,
class_name: "media-indicator-current-song-author-label",
label: curPlayer["track-artists"].join(", "),
}),
],
}),
Widget.Box({
class_name: "media-indicator-current-song-album",
hpack: "center",
children: [
Widget.Label({
truncate: "end",
wrap: true,
max_width_chars: 25,
class_name: "media-indicator-current-song-album-label",
label: curPlayer["track-album"],
}),
],
}),
],
});
};
export { MediaInfo };