Skip to content

Commit

Permalink
Merge branch 'main' into prod
Browse files Browse the repository at this point in the history
  • Loading branch information
@colinhartigan
colinhartigan committed Sep 30, 2024
2 parents 2d0ad6d + 13feefd commit b2ab30c
Show file tree
Hide file tree
Showing 10 changed files with 284 additions and 177 deletions.
2 changes: 1 addition & 1 deletion src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { TimeProvider } from "./contexts/TimeContext";

export default function App() {
return (
<Theme accentColor="amber" grayColor="gray" appearance="dark">
<Theme accentColor="amber" grayColor="mauve" appearance="dark">
<TimeProvider>
<InfoProvider>
<SpotifyProvider>
Expand Down
27 changes: 8 additions & 19 deletions src/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,34 +21,23 @@ export default function Dashboard({}) {
<Config />

<Grid
columns={spotifyEnabled ? "calc(100% - 550px) 550px" : "100%"}
rows="calc(100% - 225px) 225px"
columns="auto 1fr"
rows="calc(100% - 250px) 250px"
minWidth="100%"
width="100%"
height="100%"
maxHeight="100%"
>
<Box gridColumn="1" gridRow="1" width="100%" height="100%">
{/* <Clock /> */}
<Box gridColumn="2" gridRow="1" width="100%" height="100%">
<Notices />
</Box>
{spotifyEnabled && (
<Box gridColumn="2" gridRow="1" width="100%" height="100%">
<Music />
</Box>
)}
<Box gridColumn="1/5" gridRow="2" height="100%" width="100%" maxHeight="100%">
<Box gridColumn="1" gridRow="1" width="100%" minWidth="100%" height="100%">
<SpaceInfo />
</Box>
{/* <Box
gridColumn="4/5"
gridRow="2"
width="100%"
maxHeight="192px"
>
<Footer />
</Box> */}
<Box gridColumn="1/3" gridRow="2" height="100%" width="100%">
<Music />
</Box>
</Grid>
{/* </Flex> */}
</Box>
);
}
2 changes: 2 additions & 0 deletions src/components/Config.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Cross1Icon } from "@radix-ui/react-icons";
import { Dialog, Flex, IconButton, SegmentedControl } from "@radix-ui/themes";
import { useCallback, useEffect, useState } from "react";
import AnnouncementEditor from "./config/AnnouncementEditor";
import HoursEditor from "./config/HoursEditor";
import SpotifyEditor from "./config/SpotifyEditor";

export default function Config({}) {
Expand Down Expand Up @@ -63,6 +64,7 @@ export default function Config({}) {
<Flex direction="column" height="auto" width="100%" flexGrow="1" overflow="hidden">
{selectedTab === "announcements" && <AnnouncementEditor />}
{selectedTab === "spotify" && <SpotifyEditor />}
{selectedTab === "hours" && <HoursEditor />}
</Flex>
</Flex>
</Dialog.Content>
Expand Down
204 changes: 117 additions & 87 deletions src/components/Music.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Box, Flex, Progress, Text } from "@radix-ui/themes";
import { Box, Flex, Text } from "@radix-ui/themes";
import dayjs from "dayjs";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Marquee from "react-fast-marquee";
import logo from "../assets/hive_logo_white.svg";
import useSpotify from "../hooks/useSpotify";

export default function Music() {
const { playerState, currentToken, redirectToSpotifyAuthorize } = useSpotify();
const { playerState, currentToken } = useSpotify();

const [latestProgress, timestamp, durationMs, durationFormatted] = useMemo(() => {
if (!playerState) return [0, 0, 0, "0:00"];
Expand Down Expand Up @@ -72,118 +73,147 @@ export default function Music() {
setTimeout(() => {
setEnableMarquee(titleRef.current.offsetWidth > infoRef.current.offsetWidth);
setDisableWait(false);
}, 500);
}, 100);
}
}, [playerState, titleRef, infoRef, currentTrackId]);

return (
<>
{currentToken.access_token ? (
<>
{playerState ? (
<Box
height="100%"
width="100%"
maxWidth="100%"
maxHeight="100%"
style={{
backgroundImage: `url('${playerState?.item.album.images[0].url}')`,
backgroundSize: "100vw 100vh",
backgroundPosition: "center",
backgroundClip: "content-box",
}}
>
<Flex
width="100%"
height="100%"
minWidth="100%"
maxHeight="100%"
maxWidth="100%"
overflow="hidden"
direction="column"
align="center"
justify="start"
gap="6"
p="8"
style={{
backdropFilter: "blur(50px) brightness(0.35)",
}}
>
<img
src={playerState?.item.album.images[0].url}
alt="album cover"
style={{
height: "100%",
}}
/>

<Box
height="100%"
width="100%"
maxWidth="100%"
maxHeight="100%"
minWidth="100%"
// className="border-t-2 border-[--gray-6]"
style={{
backgroundImage: `url('${playerState?.item.album.images[0].url}')`,
backgroundSize: "100vw 100vh",
backgroundPosition: "center",
backgroundClip: "content-box",
}}
>
<Flex
direction="row"
align="center"
justify="between"
width="100%"
height="100%"
style={{
backdropFilter: "blur(100px) brightness(0.25)",
}}
>
{currentToken.access_token ? (
<>
{playerState ? (
<Flex
direction="column"
align="start"
justify="between"
gap="4"
width="100%"
maxWidth="100%"
height="100%"
maxHeight="100%"
maxWidth="100%"
overflow="hidden"
// p="4"
direction="row"
align="center"
justify="start"
gap="8"
p="6"
>
<img
src={playerState?.item.album.images[0].url}
alt="album cover"
style={{
height: "100%",
}}
/>

<Flex
direction="column"
align="start"
justify="start"
justify="center"
gap="4"
width="100%"
maxWidth="100%"
height="100%"
overflow="hidden"
ref={infoRef}
// p="4"
>
<Marquee
onCycleComplete={pauseMarquee}
play={playMarquee}
loop={0}
style={{ overflow: "hidden" }}
<Flex
direction="column"
align="start"
justify="start"
gap="4"
width="100%"
maxWidth="100%"
overflow="hidden"
ref={infoRef}
>
<p className="max-w-full text-7xl font-bold" ref={titleRef}>
{playerState?.item.name}
{enableMarquee ? (
<Marquee
onCycleComplete={pauseMarquee}
play={playMarquee}
loop={0}
style={{ overflow: "hidden" }}
>
<p className="max-w-full text-7xl font-bold" ref={titleRef}>
{playerState?.item.name}
</p>
<div
style={{
width: "120px",
}}
/>
</Marquee>
) : (
<p className="max-w-full text-7xl font-bold" ref={titleRef}>
{playerState?.item.name}
</p>
)}
<p className="text-5xl text-[--gray-11]">
{playerState?.item.artists[0].name}
</p>
<div
style={{
width: enableMarquee
? `calc(${infoRef?.current?.offsetWidth - titleRef?.current?.offsetWidth})`
: "120px",
}}
/>
</Marquee>
<p className="text-5xl text-gray-300">{playerState?.item.artists[0].name}</p>
</Flex>

<Flex direction="row" justify="center" align="center" width="100%" gap="4">
<Text className="w-16 min-w-16 text-left text-2xl">{progressFormatted}</Text>
<Progress
className="w-full"
size="3"
value={progressPercent}
variant="surface"
color="gray"
highContrast
/>
<Text className="w-16 min-w-16 text-right text-2xl">{durationFormatted}</Text>
</Flex>
</Flex>
</Flex>
</Flex>
</Box>
) : (
<Flex
direction="column"
align="center"
justify="center"
width="100%"
height="100%"
gap="4"
>
<Text className="text-4xl">No music playing</Text>
</Flex>
)}
</>
) : (
<Flex direction="column" align="center" justify="center" width="100%" height="100%" gap="4">
<Text className="text-4xl">No music playing</Text>
<Text className="text-center text-4xl">No Spotify account connected</Text>
</Flex>
)}
</>
) : (
<Flex direction="column" align="center" justify="center" width="100%" height="100%" gap="4">
<Text className="text-center text-4xl">No Spotify account connected</Text>
<Flex
direction="column"
justify="center"
align="center"
width="auto"
height="100%"
p="8"
// className="to-[ bg-gradient-to-r from-transparent from-0% to-[--gray-1] to-100%"
>
<img
src={logo}
width="100%"
height="100%"
style={{
width: "auto",
height: "148px",
// filter: "drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2))",
}}
/>
</Flex>
</Flex>
)}
</Box>
</>
);
}
4 changes: 2 additions & 2 deletions src/components/Notices.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default function Notices({}) {
}, [runSlide, slidesFiltered, loadSlide]);

return (
<Box width="100%" height="100%" maxWidth="100%" maxHeight="100%" overflow="hidden" ref={boxRef}>
<Box minWidth="100%" height="100%" maxWidth="100%" maxHeight="100%" overflow="hidden" ref={boxRef}>
<motion.div
// fade the div when currentSlide changes
exit={{ opacity: 0 }}
Expand All @@ -106,7 +106,7 @@ export default function Notices({}) {
style={{
height: "100%",
width: "100%",
overflow: "auto",
overflow: "hidden",
padding: "48px",
}}
>
Expand Down
Loading

0 comments on commit b2ab30c

Please sign in to comment.