LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish Media module.

Browse Source
This commit is contained in:
Jas Singh
2024-06-23 20:28:43 -07:00
parent 46c34e169d
commit 5eef18485d
10 changed files with 686 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
modules/menus/DropdownMenu.js
View File

@@ -30,7 +30,7 @@ const moveBoxToCursor = (self, minWidth, minHeight, fixed) => {
marginRight = 13;
marginLeft = monWidth - minWidth - 13;
}
const marginTop = 40;
const marginTop = 43;
const marginBottom = monHeight + minHeight - marginTop;
self.set_margin_left(marginLeft);
self.set_margin_right(marginRight);
@@ -58,7 +58,7 @@ export default ({
keymode: "on-demand",
exclusivity,
layer: "top",
anchor: ["top"],
anchor: ["top", "left"],
child: Widget.EventBox({
on_primary_click: () => App.closeWindow(name),
on_secondary_click: () => App.closeWindow(name),

14
modules/menus/bluetooth/index.js
View File

@@ -317,7 +317,18 @@ export default () => {
Widget.Box({
hexpand: true,
hpack: "end",
child: Widget.Switch({
children: [
// NOTE: Do we want to add this back to restart bluetooth service if it every hangs?
// Widget.Button({
// class_name: "menu-icon-button restart-bluetooth-service",
// tooltip_text: "Restart Bluetooth Service",
// on_primary_click: () => Utils.execAsync('systemctl restart bluetooth'),
// child: Widget.Label({
// class_name: "menu-icon-button-label",
// label: "󱄌"
// })
// }),
Widget.Switch({
class_name: "menu-switch bluetooth",
active: bluetooth.bind("enabled"),
on_activate: ({ active }) =>
@@ -332,6 +343,7 @@ export default () => {
),
),
}),
],
}),
],
}),

351
modules/menus/media/index.js
View File

@@ -1,30 +1,361 @@
const audio = await Service.import("mpris");
const media = await Service.import("mpris");
import DropdownMenu from "../DropdownMenu.js";
import icons from "../../icons/index.js";
media.cacheCoverArt = false;
export default () => {
const activePlayer = Variable(media.players[0]);
media.connect("changed", (value) => {
const statusOrder = {
Playing: 1,
Paused: 2,
Stopped: 3,
};
if (value.players.length === 0) {
activePlayer.value = media.players[0];
return;
}
const isPlaying = value.players.find(
(p) => p["play-back-status"] === "Playing",
);
if (isPlaying) {
activePlayer.value = value.players.sort(
(a, b) =>
statusOrder[a["play-back-status"]] -
statusOrder[b["play-back-status"]],
)[0];
}
});
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 DropdownMenu({
name: "mediamenu",
transition: "crossfade",
fixed: true,
minWidth: 550,
child: Widget.Box({
class_name: "menu-items",
child: Widget.Box({
class_name: "media-indicator-container",
vertical: true,
hexpand: true,
class_name: "menu-items-container",
vexpand: true,
child: Widget.Box({
class_name: "media-indicator-items",
vexpand: true,
hexpand: true,
vertical: true,
children: [
Widget.Box({
class_name: "menu-dropdown-label-container",
hpack: "start",
class_name: "media-indicator-current-player-info",
vpack: "center",
hexpand: true,
setup: (self) => {
self.hook(activePlayer, () => {
self.hook(media, () => {
const curPlayer = activePlayer.value;
const albumCover = (player) => {
if (
typeof player.track_cover_url === "string" &&
player.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 [];
};
if (curPlayer && curPlayer.play_back_status !== "Stopped") {
return (self.children = [
...albumCover(curPlayer),
Widget.Box({
class_name: "media-indicator-right-section",
hpack: "center",
hexpand: true,
vertical: true,
children: [
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({
class_name: "menu-dropdown-label media",
label: "Media",
truncate: "end",
wrap: true,
class_name:
"media-indicator-current-song-name-label",
label: curPlayer["track-title"],
}),
],
}),
Widget.Separator({
class_name: "menu-separator",
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"],
}),
],
}),
],
}),
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()
],
),
}),
],
}),
],
}),
],
}),
Widget.Box({
class_name: "media-indicator-current-progress-bar",
hexpand: true,
children: [
Widget.Label({
class_name: "media-indicator-time current",
vpack: "center",
setup: (self) => {
function update() {
const curMin = Math.floor(
curPlayer.position / 60,
);
const curSec = Math.floor(
curPlayer.position % 60,
);
if (
typeof curPlayer.position === "number" &&
curPlayer.position >= 0
) {
self.label = `${curMin < 10 ? "0" + curMin : curMin}:${curSec < 10 ? "0" + curSec : curSec}`;
} else {
self.label = `00:00`;
}
}
self.poll(1000, update);
self.hook(curPlayer, update);
},
}),
Widget.Box({
hexpand: true,
child: Widget.Slider({
hexpand: true,
class_name: "menu-slider media progress",
draw_value: false,
on_change: ({ value }) =>
(curPlayer.position =
value * curPlayer.length),
visible: curPlayer
.bind("length")
.as((l) => l > 0),
setup: (self) => {
const update = () => {
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);
},
}),
}),
Widget.Label({
class_name: "media-indicator-time total",
setup: (self) => {
const update = () => {
const totalSeconds = curPlayer.length;
const curHour = Math.floor(
totalSeconds / 3600,
);
const curMin = Math.floor(
(totalSeconds % 3600) / 60,
);
const curSec = Math.floor(
totalSeconds % 60,
);
self.label = `${
curHour > 0
? (curHour < 10
? "0" + curHour
: curHour) + ":"
: ""
}${curMin < 10 ? "0" + curMin : curMin}:${
curSec < 10 ? "0" + curSec : curSec
}`;
};
self.hook(curPlayer, update);
},
}),
],
}),
],
}),
]);
}
return (self.children = [
Widget.Box({
class_name: "media-indicator-none",
hpack: "center",
vpack: "center",
expand: true,
child: Widget.Label({
class_name: "media-indicator-none-label dim",
label: "No Media Is Currently Playing",
}),
}),
]);
});
});
},
}),
],
}),

4
modules/menus/network/index.js
View File

@@ -2,10 +2,6 @@ const network = await Service.import("network");
import DropdownMenu from "../DropdownMenu.js";
export default () => {
network.connect("changed", (value) => {
// console.log(JSON.stringify(value, null, 2));
});
const pendingAuth = Variable("");
return DropdownMenu({

4
scss/bar/media.scss
View File

@@ -2,10 +2,10 @@
.media {
font-size: 1rem;
color: $green;
color: $lavender;
}
.bar-media_icon {
font-size: 1.2em;
color: $green;
color: $lavender;
}

1
scss/main.scss
View File

@@ -30,6 +30,7 @@
@import "menus/audiomenu";
@import "menus/network";
@import "menus/bluetooth";
@import "menus/media";
//notifications
@import "notifications/popups";

162
scss/menus/media.scss Normal file
View File

@@ -0,0 +1,162 @@
@import "../colors";
.media-indicator-container {
min-width: 40rem;
min-height: 10rem;
background: $mantle;
border: 0.25rem solid $surface0;
border-radius: 0.4rem;
}
.media-indicator-items {
margin: 1rem;
margin-bottom: 1.3rem;
}
.media-indicator-current-album-cover {
border: 0.25rem solid $surface0;
background-color: $surface0;
border-radius: 0.25rem;
min-width: 11rem;
min-height: 11rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.media-indicator-right-section {
margin-left: 2rem;
}
.media-indicator-current-song-name {
margin-bottom: 0.75rem;
}
.media-indicator-current-song-author {
margin-bottom: 0.5rem;
}
.media-indicator-current-song-name-label {
color: $lavender;
font-size: 1.65rem;
}
.media-indicator-current-song-author-label {
color: $teal;
font-size: 1.1rem;
}
.media-indicator-current-song-album-label {
color: $pink;
font-size: 1.1rem;
}
.media-indicator-current-controls {
margin-top: 1.5rem;
margin-bottom: 0.2rem;
}
.media-indicator-control {
margin: 0rem 0.5rem;
}
.media-indicator-time {
color: $overlay2;
font-size: 0.9rem;
font-weight: 800;
margin-top: 0.9rem;
&.total {
margin-left: 1.2rem;
}
&.current {
margin-right: 1.2rem;
}
}
.media-indicator-control-button {
background: $lavender;
color: $crust;
min-height: 2.1rem;
min-width: 2.4rem;
border-radius: 0.2rem;
tooltip {
min-width: 10rem;
min-height: 10rem;
background: red;
}
&.disabled {
background: $surface0;
}
&.enabled {
background: $lavender;
&:hover {
background: $pink;
}
&.active {
background: $pink;
}
}
}
image {
font-size: 1.5rem;
}
.menu-slider.media.progress {
margin-top: 1rem;
min-height: 2rem;
min-width: 17rem;
trough {
background: $base;
border-radius: 0.3rem;
highlight,
progress {
min-height: 1rem;
background: $pink;
border-radius: 0.3rem;
}
}
slider {
box-shadow: none;
background-color: transparent;
min-height: 1.2rem;
min-width: 1.2rem;
border: 0rem solid transparent;
border-radius: 0.3rem;
}
&:hover {
trough {
background: $surface0;
}
slider {
background: $overlay0;
box-shadow: none;
}
}
&:disabled {
highlight,
progress {
}
}
trough:focus {
slider {
}
}
}

25
scss/menus/menu.scss
View File

@@ -1,13 +1,12 @@
.menu-slider {
// @include unset($rec: true);
trough {
background: $base;
border-radius: 0.3rem;
highlight,
progress {
background: $peach;
border-radius: 0.7rem;
border-radius: 0.3rem;
}
}
@@ -17,7 +16,7 @@
min-height: 1.6rem;
min-width: 1.6rem;
border: 0rem solid transparent;
border-radius: 0.7rem;
border-radius: 0.3rem;
}
&:hover {
@@ -30,23 +29,11 @@
box-shadow: none;
}
}
&:disabled {
highlight,
progress {
}
}
trough:focus {
slider {
}
}
}
.menu-switch {
background-color: $surface0;
border-radius: 0.3rem;
&:checked {
background: $sky;
@@ -56,7 +43,7 @@
highlight,
progress {
background-color: $peach;
border-radius: 0.7rem;
border-radius: 0.3rem;
}
}
@@ -66,7 +53,7 @@
min-height: 1.2rem;
min-width: 1.2rem;
border: 0rem solid transparent;
border-radius: 0.7rem;
border-radius: 0.3rem;
margin: 0.1rem 0.2rem;
}

147
style.css
View File

@@ -291,12 +291,12 @@ spinner:checked {
.media {
font-size: 1rem;
color: #a6e3a1;
color: #b4befe;
}
.bar-media_icon {
font-size: 1.2em;
color: #a6e3a1;
color: #b4befe;
}
.bar-network {
@@ -421,11 +421,12 @@ spinner:checked {
.menu-slider trough {
background: #1e1e2e;
border-radius: 0.3rem;
}
.menu-slider trough highlight,
.menu-slider trough progress {
background: #fab387;
border-radius: 0.7rem;
border-radius: 0.3rem;
}
.menu-slider slider {
box-shadow: none;
@@ -433,7 +434,7 @@ spinner:checked {
min-height: 1.6rem;
min-width: 1.6rem;
border: 0rem solid transparent;
border-radius: 0.7rem;
border-radius: 0.3rem;
}
.menu-slider:hover trough {
background: #313244;
@@ -442,8 +443,10 @@ spinner:checked {
background: #6c7086;
box-shadow: none;
}
.menu-switch {
background-color: #313244;
border-radius: 0.3rem;
}
.menu-switch:checked {
background: #89dceb;
@@ -451,7 +454,7 @@ spinner:checked {
.menu-switch trough highlight,
.menu-switch trough progress {
background-color: #fab387;
border-radius: 0.7rem;
border-radius: 0.3rem;
}
.menu-switch slider {
box-shadow: none;
@@ -459,7 +462,7 @@ spinner:checked {
min-height: 1.2rem;
min-width: 1.2rem;
border: 0rem solid transparent;
border-radius: 0.7rem;
border-radius: 0.3rem;
margin: 0.1rem 0.2rem;
}
.menu-switch:hover trough {
@@ -892,6 +895,138 @@ window#powermenu .powermenu.box {
color: #89dceb;
}
.media-indicator-container {
min-width: 40rem;
min-height: 10rem;
background: #181825;
border: 0.25rem solid #313244;
border-radius: 0.4rem;
}
.media-indicator-items {
margin: 1rem;
margin-bottom: 1.3rem;
}
.media-indicator-current-album-cover {
border: 0.25rem solid #313244;
background-color: #313244;
border-radius: 0.25rem;
min-width: 11rem;
min-height: 11rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.media-indicator-right-section {
margin-left: 2rem;
}
.media-indicator-current-song-name {
margin-bottom: 0.75rem;
}
.media-indicator-current-song-author {
margin-bottom: 0.5rem;
}
.media-indicator-current-song-name-label {
color: #b4befe;
font-size: 1.65rem;
}
.media-indicator-current-song-author-label {
color: #94e2d5;
font-size: 1.1rem;
}
.media-indicator-current-song-album-label {
color: #f5c2e7;
font-size: 1.1rem;
}
.media-indicator-current-controls {
margin-top: 1.5rem;
margin-bottom: 0.2rem;
}
.media-indicator-control {
margin: 0rem 0.5rem;
}
.media-indicator-time {
color: #9399b2;
font-size: 0.9rem;
font-weight: 800;
margin-top: 0.9rem;
}
.media-indicator-time.total {
margin-left: 1.2rem;
}
.media-indicator-time.current {
margin-right: 1.2rem;
}
.media-indicator-control-button {
background: #b4befe;
color: #11111b;
min-height: 2.1rem;
min-width: 2.4rem;
border-radius: 0.2rem;
}
.media-indicator-control-button tooltip {
min-width: 10rem;
min-height: 10rem;
background: red;
}
.media-indicator-control-button.disabled {
background: #313244;
}
.media-indicator-control-button.enabled {
background: #b4befe;
}
.media-indicator-control-button.enabled:hover {
background: #f5c2e7;
}
.media-indicator-control-button.enabled.active {
background: #f5c2e7;
}
image {
font-size: 1.5rem;
}
.menu-slider.media.progress {
margin-top: 1rem;
min-height: 2rem;
min-width: 17rem;
}
.menu-slider.media.progress trough {
background: #1e1e2e;
border-radius: 0.3rem;
}
.menu-slider.media.progress trough highlight,
.menu-slider.media.progress trough progress {
min-height: 1rem;
background: #f5c2e7;
border-radius: 0.3rem;
}
.menu-slider.media.progress slider {
box-shadow: none;
background-color: transparent;
min-height: 1.2rem;
min-width: 1.2rem;
border: 0rem solid transparent;
border-radius: 0.3rem;
}
.menu-slider.media.progress:hover trough {
background: #313244;
}
.menu-slider.media.progress:hover slider {
background: #6c7086;
box-shadow: none;
}
.notification-card-container {
margin-top: 3.5rem;
}

2
style.css.map
View File

File diff suppressed because one or more lines are too long