44 |
102 |
45 |
77 |
78 |
46 |
58 |
59 | {
62 | e.currentTarget.classList.toggle("expanded-view");
63 | }}
64 | >
65 |
76 |
67 |
70 |
71 |
75 |
79 |
81 |
82 |
83 |
97 | bulkReplace(lang, { "Ara.*": "AR", "Eng.*": "EN" })
98 | }
99 | />
100 |
101 |
29 | {hours}
30 |
31 | {amPm === "PM" ? (
32 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/Hyprland.tsx:
--------------------------------------------------------------------------------
1 | import { LucideKeyboard } from "lucide-react";
2 | import { useState, useEffect } from "react";
3 |
4 | export function Workspaces() {
5 | const [activeWorkspace, setActiveWorkspace] = useState(0);
6 | const [workspaces, setWorkspaces] = useState {
48 | if (e.deltaY > 0) {
49 | return window.fabric.bridge.hyprlandSendCommand(
50 | "/dispatch workspace e-1",
51 | );
52 | }
53 | return window.fabric.bridge.hyprlandSendCommand(
54 | "/dispatch workspace e+1",
55 | );
56 | }}
57 | className="workspaces flex flex-row"
58 | >
59 | {workspaces.map((workspaceId) => (
60 |
75 | );
76 | }
77 |
78 | export const Language: React.FC<{
79 | keyboard: string;
80 | formatter: (language: string) => string;
81 | }> = ({ keyboard = ".*", formatter = (lang) => lang }) => {
82 | const [language, setLanguage] = useState
66 | window.fabric.bridge.hyprlandSendCommand(
67 | `/dispatch workspace ${workspaceId}`,
68 | )
69 | }
70 | >
71 | {workspaceId}
72 |
73 | ))}
74 | {children}
;
66 | };
67 |
--------------------------------------------------------------------------------
/src/components/Notifications.tsx:
--------------------------------------------------------------------------------
1 | import { gsap } from "gsap";
2 | import { useGSAP } from "@gsap/react";
3 | import { useState, useRef, useEffect } from "react";
4 | import { LucideX } from "lucide-react";
5 | import { insertBetween } from "./Common";
6 |
7 | const NotificationItem: React.FC<{
8 | notification: NotificationData;
9 | onRemove: (id: number) => void;
10 | }> = ({ notification, onRemove }) => {
11 | const notificationRef = useRef
40 |
93 |
41 |
92 | onRemove(notification.id)}
43 | className="absolute p-1 bg-3 border border-primary/40 rounded-full -top-1 -right-1 cursor-pointer"
44 | >
45 |
47 |
48 | {notification["image-pixmap"] && (
49 | 
60 | )}
61 |
66 | {notification.actions && (
67 |
62 |
65 | {notification.summary}
63 |{notification.body}
64 |
68 | {insertBetween(
69 | notification.actions.map((action) => (
70 |
86 | )}
87 |
91 |
74 | window.fabric.bridge.notificationsInvokeAction(
75 | notification.id,
76 | action[0],
77 | )
78 | }
79 | >
80 | {action[1]}
81 |
82 | )),
83 | ,
84 | )}
85 |
146 |
159 | );
160 | };
161 |
--------------------------------------------------------------------------------
/src/components/PlayerControlButtons.tsx:
--------------------------------------------------------------------------------
1 | import { LucideSkipBack, LucideSkipForward } from "lucide-react";
2 |
3 | const PlayerNextButton = () => {
4 | return (
5 | -
150 | {notificationsList.map((notification) => (
151 |
window.fabric.bridge.playerNext()}
8 | >
9 |
11 | );
12 | };
13 |
14 | const PlayerPreviousButton = () => {
15 | return (
16 | window.fabric.bridge.playerPrevious()}
19 | >
20 |
22 | );
23 | };
24 |
25 | export { PlayerNextButton, PlayerPreviousButton };
26 |
--------------------------------------------------------------------------------
/src/components/PlayerCover.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 |
3 | export const PlayerCover = () => {
4 | const [playerCoverUrl, setPlayerCoverUrl] = useState("");
5 |
6 | function fetchMetadata() {
7 | return window.fabric.bridge
8 | .playerGetMetadata()
9 | .then((v) => setPlayerCoverUrl(v["mpris:artUrl"]));
10 | }
11 |
12 | useEffect(() => {
13 | window.addEventListener("playerMetadataChanged", fetchMetadata);
14 | fetchMetadata();
15 | }, []);
16 |
17 | return (
18 |
20 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/src/components/PlayerProgress.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export const PlayerProgress = () => {
4 | const [playerProgress, setPlayerProgress] = useState(1.0);
5 | const [playerLength, setPlayerLength] = useState(1.0);
6 |
7 | function fetchProgress() {
8 | window.fabric.bridge
9 | .playerGetMetadata()
10 | .then((v) => setPlayerLength(v["mpris:length"]));
11 | window.fabric.bridge.playerGetPosition().then((v) => setPlayerProgress(v));
12 | }
13 |
14 | useEffect(() => {
15 | fetchProgress();
16 | const id = setInterval(fetchProgress, 1000);
17 | return () => clearInterval(id);
18 | }, []);
19 |
20 | const fillColor = "var(--color-secondary)";
21 | const bgColor = "transparent";
22 |
23 | const gradientStyle = {
24 | background: `linear-gradient(to right, ${fillColor} ${
25 | (playerProgress / playerLength) * 100
26 | }%, ${bgColor} ${(playerProgress / playerLength) * 100}%)`,
27 | };
28 |
29 | return (
30 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/src/components/PlayerStatusButton.tsx:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import { useState, useEffect } from "react";
3 | import { LucidePause, LucidePlay } from "lucide-react";
4 |
5 | const PlayerStatusButton = () => {
6 | const [isChecked, setIsChecked] = useState(true);
7 | useEffect(() => {
8 | const handlePlay = () => setIsChecked(true);
9 | const handlePause = () => setIsChecked(false);
10 |
11 | window.addEventListener("playerPlay", handlePlay);
12 | window.addEventListener("playerPause", handlePause);
13 |
14 | // inital state
15 | window.fabric.bridge
16 | .playerGetStatus()
17 | .then((v) => setIsChecked(v === 0 ? true : false));
18 |
19 | return () => {
20 | window.removeEventListener("playerPlay", handlePlay);
21 | window.removeEventListener("playerPause", handlePause);
22 | };
23 | }, []);
24 |
25 | return (
26 |
21 | {playerTitle}
22 |
23 |
24 | {playerArtist}
25 |
26 | {
20 | if (e.deltaY > 0) {
21 | window.fabric.bridge.audioSetVolume(audioVolume - 5);
22 | } else if (e.deltaY < 0) {
23 | window.fabric.bridge.audioSetVolume(audioVolume + 5);
24 | }
25 | }}
26 | >
27 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import "./style/index.css";
2 | import "@fontsource/jetbrains-mono";
3 | import "@fontsource-variable/readex-pro";
4 | import { StrictMode } from "react";
5 | import { createRoot } from "react-dom/client";
6 | import App from "./App";
7 |
8 | createRoot(document.getElementById("root")!).render(
9 |