2024-09-09 08:55:30 +04:00
// TODO(sako):: try to do something like this https://github.com/PartyWumpus/dotfiles/blob/7cecf39127af0818a3b0d2d8112bf03c304d1172/modules/hyprland/ags/src/main.ts
2024-08-08 13:39:51 +04:00
const hyprland = await Service . import ( "hyprland" )
// const notifications = await Service.import("notifications")
const mpris = await Service . import ( "mpris" )
const audio = await Service . import ( "audio" )
const battery = await Service . import ( "battery" )
const systemtray = await Service . import ( "systemtray" )
2024-09-05 11:22:41 +04:00
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'
2024-08-04 20:50:04 +04:00
const date = Variable ( "" , {
poll : [ 1000 , 'date "+%H:%M:%S %b %e."' ] ,
} )
// widgets can be only assigned as a child in one container
// so to make a reuseable widget, make it a function
// then you can simply instantiate one by calling it
2024-09-20 22:29:30 +04:00
// function Workspaces() {
// const activeId = hyprland.active.workspace.bind("id")
// const workspaces = hyprland.bind("workspaces")
// .as(ws => ws.map(({ id }) => Widget.Button({
// on_clicked: () => hyprland.messageAsync(`dispatch workspace ${id}`),
// child: Widget.Label(`${id}`),
// class_name: activeId.as(i => `${i === id ? "focused" : ""}`),
// })))
// return Widget.Box({
// class_name: "workspaces",
// children: workspaces,
// })
// }
const dispatch = ws => hyprland . sendMessage ( ` dispatch workspace ${ ws } ` ) ;
export const Workspaces = ( ) => Widget . EventBox ( {
child : Widget . Box ( {
children : Array . from ( { length : 10 } , ( _ , i ) => i + 1 ) . map ( i => Widget . Button ( {
class _name : "workspace-buttons" ,
attribute : i ,
// Keeps button from expanding to fit its container
onClicked : ( ) => dispatch ( i ) ,
child : Widget . Box ( {
class _name : "workspace-indicator" ,
// vpack: "start",
vpack : "center" ,
hpack : "center" ,
children : [
Widget . Label ( {
label : ` ${ i } ` ,
justification : "center" ,
} )
] ,
setup : self => self . hook ( hyprland , ( ) => {
// The "?" is used here to return "undefined" if the workspace doesn't exist
self . toggleClassName ( 'workspace-inactive' , ( hyprland . getWorkspace ( i ) ? . windows || 0 ) === 0 ) ;
self . toggleClassName ( 'workspace-occupied' , ( hyprland . getWorkspace ( i ) ? . windows || 0 ) > 0 ) ;
self . toggleClassName ( 'workspace-active' , hyprland . active . workspace . id === i ) ;
// self.toggleClassName('workspace-large', (hyprland.getWorkspace(i)?.windows || 0) > 1);
} ) ,
} ) ,
} ) ) ,
} ) ,
} ) ;
2024-08-04 20:50:04 +04:00
function ClientTitle ( ) {
return Widget . Label ( {
class _name : "client-title" ,
label : hyprland . active . client . bind ( "title" ) ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
}
function Clock ( ) {
return Widget . Label ( {
class _name : "clock" ,
label : date . bind ( ) ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
}
// we don't need dunst or any other notification daemon
// because the Notifications module is a notification daemon itself
2024-08-04 21:53:38 +04:00
// function Notification() {
// const popups = notifications.bind("popups")
// return Widget.Box({
// class_name: "notification",
// visible: popups.as(p => p.length > 0),
// children: [
// Widget.Icon({
// icon: "preferences-system-notifications-symbolic",
// }),
// Widget.Label({
// label: popups.as(p => p[0]?.summary || ""),
// }),
// ],
// })
// }
2024-08-04 20:50:04 +04:00
function Media ( ) {
const label = Utils . watch ( "" , mpris , "player-changed" , ( ) => {
if ( mpris . players [ 0 ] ) {
2024-08-08 13:39:51 +04:00
const { track _artists , track _title } = mpris . players [ 0 ]
return ` ${ track _artists . join ( ", " ) } - ${ track _title } `
2024-08-04 20:50:04 +04:00
} else {
return "Nothing is playing"
}
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
return Widget . Button ( {
class _name : "media" ,
on _primary _click : ( ) => mpris . getPlayer ( "" ) ? . playPause ( ) ,
on _scroll _up : ( ) => mpris . getPlayer ( "" ) ? . next ( ) ,
on _scroll _down : ( ) => mpris . getPlayer ( "" ) ? . previous ( ) ,
child : Widget . Label ( { label } ) ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
}
function Volume ( ) {
const icons = {
101 : "overamplified" ,
67 : "high" ,
34 : "medium" ,
1 : "low" ,
0 : "muted" ,
2024-08-08 13:39:51 +04:00
}
2024-08-04 20:50:04 +04:00
function getIcon ( ) {
const icon = audio . speaker . is _muted ? 0 : [ 101 , 67 , 34 , 1 , 0 ] . find (
2024-08-08 13:39:51 +04:00
threshold => threshold <= audio . speaker . volume * 100 )
2024-08-04 20:50:04 +04:00
2024-08-08 13:39:51 +04:00
return ` audio-volume- ${ icons [ icon ] } -symbolic `
2024-08-04 20:50:04 +04:00
}
const icon = Widget . Icon ( {
icon : Utils . watch ( getIcon ( ) , audio . speaker , getIcon ) ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
const slider = Widget . Slider ( {
hexpand : true ,
draw _value : false ,
on _change : ( { value } ) => audio . speaker . volume = value ,
setup : self => self . hook ( audio . speaker , ( ) => {
2024-08-08 13:39:51 +04:00
self . value = audio . speaker . volume || 0
2024-08-04 20:50:04 +04:00
} ) ,
2024-08-08 13:39:51 +04:00
} )
2024-08-06 03:50:11 +04:00
2024-08-08 14:27:24 +04:00
const volume = Widget . Label ( {
2024-09-05 07:16:17 +04:00
label : audio . speaker . bind ( "volume" ) . as ( ( x ) => ` ${ Math . round ( x * 100 ) } % ` )
2024-08-08 14:27:24 +04:00
} )
2024-08-04 20:50:04 +04:00
return Widget . Box ( {
class _name : "volume" ,
2024-08-08 14:31:02 +04:00
// css: "min-width: 180px",
2024-08-08 14:27:24 +04:00
children : [ icon , volume ] ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
}
function BatteryLabel ( ) {
2024-08-08 13:39:51 +04:00
const value = battery . bind ( "percent" ) . as ( p => p > 0 ? p / 100 : 0 )
const icon = battery . bind ( "percent" ) . as ( p =>
` battery-level- ${ Math . floor ( p / 10 ) * 10 } -symbolic ` )
2024-08-04 20:50:04 +04:00
2024-08-08 13:51:27 +04:00
const percent = battery . bind ( "percent" ) . as ( x => x . toString ( ) ) + "%"
2024-08-08 13:45:59 +04:00
2024-08-04 20:50:04 +04:00
return Widget . Box ( {
class _name : "battery" ,
visible : battery . bind ( "available" ) ,
children : [
2024-08-08 13:39:51 +04:00
Widget . Icon ( { icon } ) ,
2024-08-08 13:45:59 +04:00
Widget . Label ( {
2024-08-08 14:24:58 +04:00
label : battery . bind ( 'percent' ) . as ( x => x . toString ( ) ) ,
2024-08-08 13:45:59 +04:00
} )
2024-08-04 20:50:04 +04:00
] ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
}
2024-08-08 13:39:51 +04:00
2024-08-04 20:50:04 +04:00
function SysTray ( ) {
const items = systemtray . bind ( "items" )
. as ( items => items . map ( item => Widget . Button ( {
child : Widget . Icon ( { icon : item . bind ( "icon" ) } ) ,
on _primary _click : ( _ , event ) => item . activate ( event ) ,
on _secondary _click : ( _ , event ) => item . openMenu ( event ) ,
tooltip _markup : item . bind ( "tooltip_markup" ) ,
2024-08-08 13:39:51 +04:00
} ) ) )
2024-08-04 20:50:04 +04:00
return Widget . Box ( {
children : items ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
}
// layout of the bar
function Left ( ) {
return Widget . Box ( {
spacing : 8 ,
children : [
Workspaces ( ) ,
2024-08-08 13:39:51 +04:00
ClientTitle ( ) ,
2024-08-04 20:50:04 +04:00
] ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
}
function Center ( ) {
return Widget . Box ( {
spacing : 8 ,
children : [
Media ( ) ,
2024-08-04 21:53:38 +04:00
// Notification(),
2024-08-04 20:50:04 +04:00
] ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
}
function Right ( ) {
return Widget . Box ( {
hpack : "end" ,
spacing : 8 ,
children : [
Volume ( ) ,
2024-08-08 13:39:51 +04:00
BatteryLabel ( ) ,
2024-08-04 20:50:04 +04:00
Clock ( ) ,
SysTray ( ) ,
] ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
}
function Bar ( monitor = 0 ) {
return Widget . Window ( {
name : ` bar- ${ monitor } ` , // name has to be unique
class _name : "bar" ,
monitor ,
2024-10-14 22:06:09 +04:00
anchor : [ "bottom" , "left" , "right" ] ,
2024-10-15 15:26:04 +04:00
margins : [ 5 , 10 , 0 , 10 ] ,
2024-08-04 20:50:04 +04:00
exclusivity : "exclusive" ,
child : Widget . CenterBox ( {
start _widget : Left ( ) ,
center _widget : Center ( ) ,
end _widget : Right ( ) ,
} ) ,
2024-08-08 13:39:51 +04:00
} )
2024-08-04 20:50:04 +04:00
}
2024-09-05 17:42:05 +04:00
var hostname = Utils . exec ( "cat /etc/hostname" ) ;
2024-09-05 17:37:38 +04:00
var hosts = [ "sakotop" , "sakopc" ] ;
2024-09-05 17:35:07 +04:00
2024-09-05 17:37:38 +04:00
addExtraBar : if ( hostname === hosts [ 0 ] ) {
2024-09-05 17:35:07 +04:00
break addExtraBar ;
2024-09-05 17:37:38 +04:00
} else if ( hostname === hosts [ 1 ] ) {
2024-09-05 17:35:07 +04:00
App . addWindow ( Bar ( 1 ) ) ;
}
2024-08-04 20:50:04 +04:00
App . config ( {
style : "./style.css" ,
windows : [
2024-09-05 17:35:07 +04:00
Bar ( ) ,
2024-08-04 20:50:04 +04:00
] ,
} )
export { }