Start work for the media menu refactor...
This commit is contained in:
16
modules/menus/media/components/albumcover.js
Normal file
16
modules/menus/media/components/albumcover.js
Normal 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 };
|
||||
61
modules/menus/media/components/bar.js
Normal file
61
modules/menus/media/components/bar.js
Normal 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 };
|
||||
104
modules/menus/media/components/controls.js
vendored
Normal file
104
modules/menus/media/components/controls.js
vendored
Normal 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 };
|
||||
51
modules/menus/media/components/mediainfo.js
Normal file
51
modules/menus/media/components/mediainfo.js
Normal 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 };
|
||||
Reference in New Issue
Block a user