Skip to content

Commit

Permalink
Ayo @picknik pulling up
Browse files Browse the repository at this point in the history
  • Loading branch information
Hacksore committed Nov 18, 2023
1 parent c3b181f commit 97b37c3
Show file tree
Hide file tree
Showing 14 changed files with 169 additions and 81 deletions.
Binary file removed apps/desktop/public/img/login.png
Binary file not shown.
13 changes: 13 additions & 0 deletions apps/desktop/public/img/sad-face.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed apps/desktop/public/img/sad.png
Binary file not shown.
3 changes: 3 additions & 0 deletions apps/desktop/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@ import { Error } from "./views/error";
import { NavBar } from "./components/nav-bar";
import { useClickthrough } from "./use-clickthrough";
import { useDisableContextMenu } from "./use-disable-context-menu";
import { useSetWindowSize } from "./use-set-size";

function App() {
useSocket();
useDisableContextMenu();
useSetWindowSize({ width: 400, height: 600 });

const { clickthrough } = useClickthrough();

return (
Expand Down
10 changes: 7 additions & 3 deletions apps/desktop/src/components/nav-bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,13 @@ export const NavBar = ({ clickthrough }: { clickthrough: boolean }) => {
data-tauri-drag-region
className="w-8 h-8 mr-2"
/>
<div data-tauri-drag-region className="hidden md:inline">
{currentChannel?.name}
</div>
{location.pathname === "/channel" ? (
<div data-tauri-drag-region className="hidden md:inline">
{currentChannel?.name}
</div>
) : (
<div data-tauri-drag-region>Overlayed</div>
)}
</div>
<div className="hidden md:flex">
<Button intent="secondary" size="small">
Expand Down
17 changes: 12 additions & 5 deletions apps/desktop/src/components/user.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@ import { OverlayedUser } from "../types";
import { HeadphonesOff } from "./headphones-off";
import { MicOff } from "./mic-off";

export const User = ({ item }: { item: OverlayedUser }) => {
export const User = ({
item,
windowSize,
}: {
item: OverlayedUser;
windowSize: number;
}) => {
const { id, selfMuted, selfDeafened, talking, avatarHash } = item;

const avatarUrl = avatarHash
Expand All @@ -12,11 +18,10 @@ export const User = ({ item }: { item: OverlayedUser }) => {
const talkingClass = talking ? "border-green-500" : "border-zinc-800";
const mutedClass = selfMuted ? "text-zinc-400" : "";
const mutedAndDeafened = selfMuted && selfDeafened;

const avatarClass = selfMuted || selfDeafened ? "text-red-500" : "";

return (
<div className="flex py-1 p-2 items-center">
<div className="flex flex-wrap py-1 p-2 items-center">
<div
className={`pointer-events-none relative rounded-full border-2 mr-2 ${avatarClass} ${talkingClass}`}
>
Expand All @@ -39,9 +44,11 @@ export const User = ({ item }: { item: OverlayedUser }) => {
</div>

<div
className={`hidden pointer-events-none md:flex items-center rounded-md bg-zinc-800 ${mutedClass} p-1 pl-2 pr-2`}
className={`max-w-[calc(100%_-_50px)] md:flex hidden pointer-events-none items-center rounded-md bg-zinc-800 ${mutedClass} p-1 pl-2 pr-2`}
>
<p>{item.username}</p>
<span className={`truncate text-ellipsis`}>
{item.username}
</span>
<div className="flex">
{selfMuted && <MicOff />}
{selfDeafened && <HeadphonesOff />}
Expand Down
16 changes: 9 additions & 7 deletions apps/desktop/src/rpc/manager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,10 @@ class SocketManager {
this.store.clearUsers();

if (this.store.currentChannel) {
this.channelEvents(RPCCommand.UNSUBSCRIBE, this.store.currentChannel.id);
this.channelEvents(
RPCCommand.UNSUBSCRIBE,
this.store.currentChannel.id,
);
}

// after unsub we clear the channel
Expand Down Expand Up @@ -228,21 +231,20 @@ class SocketManager {
}
}

console.log(payload);
// we are ready to do things cause we are fully authed
if (
payload.cmd === RPCCommand.AUTHENTICATE &&
payload.evt === RPCEvent.ERROR
) {
// TODO: handle
if (payload.data.code === RPCErrors.OAUTH2_ERROR) {
}

// if they have an invalid we remove it and make them auth again
if (payload.data.code === RPCErrors.INVALID_TOKEN) {
this.store.pushError(payload.data.message);
this.tokenStore?.removeAccessToken();
}

// TODO: handle saving the last error message(s) so we can display then on the error view

this.store.pushError(payload.data.message);
// move to the error page
this.navigate?.("/error");
} else if (payload?.cmd === RPCCommand.AUTHENTICATE) {
// try to find the user
Expand Down
12 changes: 12 additions & 0 deletions apps/desktop/src/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface AppState {
name: string;
} | null;
users: Record<string, OverlayedUser>;
discordErrors: string[];
}

export interface AppActions {
Expand All @@ -46,6 +47,8 @@ export interface AppActions {
// TODO: type this
setCurrentChannel: (channel: any) => void;
setMe: (user: OverlayedUser | null) => void;
pushError: (message: string) => void;
resetErrors: () => void;
}

// sort discord users by name and myself on top
Expand Down Expand Up @@ -92,6 +95,7 @@ export const useAppStore = create<AppState & AppActions>()(
// @ts-ignore
immer((set) => ({
me: null,
discordErrors: [],
clickThrough: false,
currentChannel: null,
users: {},
Expand Down Expand Up @@ -133,5 +137,13 @@ export const useAppStore = create<AppState & AppActions>()(
set((state) => {
state.clickThrough = enabled;
}),
pushError: (error) =>
set((state) => {
state.discordErrors.push(error);
}),
resetErrors: () =>
set((state) => {
state.discordErrors = [];
}),
})),
);
32 changes: 0 additions & 32 deletions apps/desktop/src/use-border.ts

This file was deleted.

28 changes: 28 additions & 0 deletions apps/desktop/src/use-set-size.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { LogicalSize, appWindow } from "@tauri-apps/api/window";
import { useEffect, useRef } from "react";

export const useSetWindowSize = ({
width,
height,
}: {
width: number;
height: number;
}) => {
const lastSizeRef = useRef<LogicalSize | null>(null);

useEffect(() => {
appWindow.outerSize().then((size) => {
lastSizeRef.current = size;

// set the new
appWindow.setSize(new LogicalSize(width, height));
});

// on unmount save the last size
return () => {
if (lastSizeRef.current) {
appWindow.setSize(lastSizeRef.current);
}
};
}, []);
};
22 changes: 22 additions & 0 deletions apps/desktop/src/use-window-resize.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { useEffect, useState } from "react";

// write a window rezise hook
export const useWindowResize = () => {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});

useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);

return windowSize;
}
5 changes: 4 additions & 1 deletion apps/desktop/src/views/channel.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import { User } from "../components/user";
import { useAppStore } from "../store";
import { useWindowResize } from "../use-window-resize";

export const Channel = () => {
const { users } = useAppStore();
const windowSize = useWindowResize();

return (
<div>
{JSON.stringify({ windowSize })}
<div className="py-2">
{Object.entries(users).map(([_k, item]) => (
<User key={item.id} item={item} />
<User key={item.id} windowSize={windowSize} item={item} />
))}
</div>
</div>
Expand Down
28 changes: 21 additions & 7 deletions apps/desktop/src/views/error.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,32 @@
import { Link } from "react-router-dom";
import { Button } from "../components/ui/button";
import { useSetWindowSize } from "../use-set-size";
import { useAppStore } from "../store";

export const Error = () => {
useSetWindowSize({ width: 400, height: 600 });
const { discordErrors } = useAppStore();

return (
<div className="h-screen p-2 bg-zinc-800">
<div className="pt-8 font-bold text-2xl text-center">
<p>Error Connecting to Dicsord</p>
<div className="flex flex-col items-center h-screen p-2 bg-zinc-800">
<div className="pt-8 pb-8 font-bold text-2xl text-center">
<p>Error Connecting to Discord</p>
</div>
<div className="w-32 h-32">
<img
src="/img/sad-face.svg"
alt="sad"
className="text-white fill-white w-full"
/>
</div>
<div className="pt-8 pb-8 text-2xl text-center">
{discordErrors.map((item, i) => (
<p key={`error-${i}`}>{item}</p>
))}
</div>
<img src="/img/sad.png" alt="sad" className="w-full" />
<div className="pt-8 text-2xl flex items-center justify-center">
<Link to="/">
<Button>
Authorize Discord
</Button>
<Button>Login to Discord</Button>
</Link>
</div>
</div>
Expand Down
64 changes: 38 additions & 26 deletions apps/desktop/src/views/main.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,49 @@
import { useNavigate } from "react-router-dom";
import { useSocket } from "../rpc/manager";
import { useAppStore } from "../store";
import { useEffect } from "react";
import { useSetWindowSize } from "../use-set-size";
import { Button } from "../components/ui/button";
import { Link } from "react-router-dom";

export const Main = () => {
const socket = useSocket();
const navigate = useNavigate();
useSocket();
useSetWindowSize({ width: 400, height: 600 });
const { resetErrors } = useAppStore();

useEffect(() => {
resetErrors();
}, []);

return (
<div className="h-screen p-2 bg-zinc-800">
{!socket?.isConnected ? (
<div className="flex items-center justify-center h-full">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-white"></div>
</div>
) : (
<>
<div className="pt-1 mb-3 font-bold text-2xl text-center">
<p>Authorize Discord</p>
</div>
<div className="pt-1 mb-3 font-bold text-2xl text-center">
<p>Authorize Discord</p>
<ul className="text-sm text-center">
<li className="text-zinc-400">
<p>
This app is not affiliated with Discord. Discord is a trademark of
Discord Inc.
</p>
</li>
</ul>
<ul className="flex flex-col gap-4 p-4 mt-6 text-2xl text-left">
<li>
<p className="leading-8">1. Discord should have opened a popup</p>
</li>
<li>
<p className="leading-8">2. Click "Authorize" within discord</p>
</li>
<li>
<p className="leading-8">3. Join a voice channel</p>
</li>
</ul>

<img src="/img/login.png" alt="login" className="w-full" />
<div className="pt-8 text-2xl flex items-center flex-col justify-center">
<p>Request Prompt again</p>
<Button
onClick={() => {
socket?.init(navigate);
}}
className="bg-blue-800 p-2 rounded-md"
>
Authorize Discord
</Button>
</div>
</>
)}
<div className="pt-8 text-2xl flex items-center justify-center">
<Button>
<Link to="/">Try Again</Link>
</Button>
</div>
</div>
</div>
);
};

0 comments on commit 97b37c3

Please sign in to comment.