diff --git a/contributors.yml b/contributors.yml index 6202484d..c79fd8e4 100644 --- a/contributors.yml +++ b/contributors.yml @@ -15,3 +15,4 @@ - cosmiclasagnadev - trobonox - zemzelett +- josewal diff --git a/src/components/Nav/SideNav.tsx b/src/components/Nav/SideNav.tsx index 623c849c..c928854c 100644 --- a/src/components/Nav/SideNav.tsx +++ b/src/components/Nav/SideNav.tsx @@ -21,6 +21,7 @@ import { useToggleYoutube, useSideNavOrderStore, useToggleKanban, + useBrainfmMusic, } from "@Store"; import { useState, useEffect } from "react"; import useSetDefault from "@App/utils/hooks/useSetDefault"; @@ -29,6 +30,7 @@ import { defaultToast } from "@Utils/toast"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { fullscreenChanged, toggleFullScreen } from "@Utils/fullscreen"; import { DraggableNavItem } from "./DraggableNavItem"; +import { BrainfmIcon } from "../Player/BrainFm/Icon"; export const SideNav = () => { const { isDark, toggleDarkMode } = useDarkToggleStore(); @@ -39,6 +41,7 @@ export const SideNav = () => { const { isTimerToggled, setIsTimerToggled } = useToggleTimer(); const { isTasksToggled, setIsTasksToggled } = useToggleTasks(); const { isSpotifyToggled, setIsSpotifyToggled } = useSpotifyMusic(); + const { isBrainfmToggled, setIsBrainfmToggled } = useBrainfmMusic(); const { isQuoteToggled, setIsQuoteToggled } = useToggleQuote(); const { isTwitchToggled, setIsTwitchToggled } = useToggleTwitch(); const { isYoutubeToggled, setIsYoutubeToggled } = useToggleYoutube(); @@ -49,6 +52,7 @@ export const SideNav = () => { const { isMusicShown } = useToggleMusic(); const { isKanbanShown } = useToggleKanban(); const { isSpotifyShown } = useSpotifyMusic(); + const { isBrainfmShown } = useBrainfmMusic(); const { isDarkModeShown } = useDarkToggleStore(); const { isFullscreenShown } = useFullScreenToggleStore(); const { isQuoteShown } = useToggleQuote(); @@ -206,6 +210,16 @@ export const SideNav = () => { toggleIcon: "▶️", isShown: isYoutubeShown, }, + { + id: "13", + content: , + tooltipTitle: "Brain.fm", + isToggled: isBrainfmToggled, + setToggled: setIsBrainfmToggled, + toggleString: "Brain.fm Toggled", + toggleIcon: "🎧", + isShown: isBrainfmShown, + }, ]; // a little function to help us with reordering the result diff --git a/src/components/Player/BrainFm/Icon.tsx b/src/components/Player/BrainFm/Icon.tsx new file mode 100644 index 00000000..2fb48194 --- /dev/null +++ b/src/components/Player/BrainFm/Icon.tsx @@ -0,0 +1,28 @@ +import {} from "react"; + +export const BrainfmIcon = (props: React.SVGProps) => { + return ( + + + + + + + ); +}; diff --git a/src/components/Player/BrainFm/Player.tsx b/src/components/Player/BrainFm/Player.tsx new file mode 100644 index 00000000..15916816 --- /dev/null +++ b/src/components/Player/BrainFm/Player.tsx @@ -0,0 +1,33 @@ +import { useDarkToggleStore, useBrainfmMusic } from "@Store"; +import { useState } from "react"; +import { AiOutlineReload } from "react-icons/ai"; +import { IoCloseSharp } from "react-icons/io5"; +import { WithTooltip } from "../../Tooltip"; +import { failureToast } from "@Root/src/utils/toast"; + +export const BrainFm = () => { + const { setIsBrainfmToggled } = useBrainfmMusic(); + + return ( +
+
+

Brain.fm

+ setIsBrainfmToggled(false)} + /> +
+ +
+ +
+
+ ); +}; diff --git a/src/components/WidgetControl/WidgetControlModal.tsx b/src/components/WidgetControl/WidgetControlModal.tsx index 86da3686..49dca0c9 100644 --- a/src/components/WidgetControl/WidgetControlModal.tsx +++ b/src/components/WidgetControl/WidgetControlModal.tsx @@ -2,12 +2,7 @@ import { useEffect } from "react"; import { FaSpotify } from "react-icons/fa"; import { IoMusicalNotesOutline, IoCloseSharp } from "react-icons/io5"; import { CgNotes } from "react-icons/cg"; -import { - MdOutlineTimer, - MdWbSunny, - MdOutlineNoteAdd, - MdOutlineViewKanban, -} from "react-icons/md"; +import { MdOutlineTimer, MdWbSunny, MdOutlineNoteAdd, MdOutlineViewKanban } from "react-icons/md"; import { VscDebugRestartFrame } from "react-icons/vsc"; import { BsArrowsFullscreen, BsFillChatLeftQuoteFill, BsTwitch, BsYoutube } from "react-icons/bs"; import clsx from "clsx"; @@ -25,13 +20,16 @@ import { useToggleTwitch, useToggleYoutube, useToggleKanban, + useBrainfmMusic, } from "@Store"; import useMediaQuery from "@Utils/hooks/useMediaQuery"; import { toggledToastNotification } from "@Utils/toast"; +import { BrainfmIcon } from "../Player/BrainFm/Icon"; export const WidgetControlModal = ({ isVisible = false, onClose }) => { const { isMusicShown, setIsMusicShown } = useToggleMusic(); const { isSpotifyShown, setIsSpotifyShown } = useSpotifyMusic(); + const { isBrainfmShown, setIsBrainfmShown } = useBrainfmMusic(); const { isTimerShown, setIsTimerShown } = useToggleTimer(); const { isStickyNoteShown, setIsStickyNoteShown } = useToggleStickyNote(); const { isTasksShown, setIsTasksShown } = useToggleTasks(); @@ -83,6 +81,7 @@ export const WidgetControlModal = ({ isVisible = false, onClose }) => { Spotify +
toggledToastNotification(isMusicShown, setIsMusicShown, "Music Widget Added", 750, "🎧")} className={clsx( @@ -213,20 +212,28 @@ export const WidgetControlModal = ({ isVisible = false, onClose }) => { Youtube
+ {isDesktop && ( +
+ toggledToastNotification(isBrainfmShown, setIsBrainfmShown, "Brain.fm Widget Added", 750, "🎧") + } + className={clsx( + "grid cursor-pointer content-center justify-center gap-2 rounded md:hover:bg-gray-200 md:hover:text-gray-800 md:dark:hover:bg-violet-500", + isBrainfmShown && "dark:bg-violet-500 md:bg-gray-200 md:text-gray-800" + )} + > + Brain.fm + +
+ )} +
- toggledToastNotification( - isKanbanShown, - setIsKanbanShown, - "Kanban board Widget Added", - 750, - "📃" - ) + toggledToastNotification(isKanbanShown, setIsKanbanShown, "Kanban board Widget Added", 750, "📃") } className={clsx( "grid cursor-pointer content-center justify-center gap-2 rounded md:hover:bg-gray-200 md:hover:text-gray-800 md:dark:hover:bg-violet-500", - isKanbanShown && - "dark:bg-violet-500 md:bg-gray-200 md:text-gray-800" + isKanbanShown && "dark:bg-violet-500 md:bg-gray-200 md:text-gray-800" )} > Kanban board diff --git a/src/interfaces.ts b/src/interfaces.ts index fe02f2b1..3cef7a6f 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -204,6 +204,20 @@ export interface IPosSpotify { setSpotifyPosDefault: () => void; } +export interface IToggleBrainfm { + isBrainfmToggled: boolean; + setIsBrainfmToggled: (isBrainfmToggled: boolean) => void; + isBrainfmShown: boolean; + setIsBrainfmShown: (isBrainfmShown: boolean) => void; +} + +export interface IPosBrainfm { + brainfmPosX: number; + brainfmPosY: number; + setBrainfmPos: (X: number, Y: number) => void; + setBrainfmPosDefault: () => void; +} + export interface IToggleTimer { isTimerToggled: boolean; setIsTimerToggled: (isTimerToggled: boolean) => void; @@ -322,5 +336,5 @@ export interface ISeoContent { } export interface ISeoToggle { - onButtonClick: () => void; + onButtonClick: () => void; } diff --git a/src/pages/Astrostation.tsx b/src/pages/Astrostation.tsx index aec036d2..322ca1e5 100644 --- a/src/pages/Astrostation.tsx +++ b/src/pages/Astrostation.tsx @@ -20,6 +20,8 @@ import { usePosKanban, useGrid, useSetBackground, + useBrainfmMusic, + useBrainfmPos, } from "@Store"; import { Player } from "@Components/Player/Player"; import { Timer } from "@Components/Timer/Timer"; @@ -45,12 +47,14 @@ import clsx from "clsx"; import React from "react"; import { Background } from "@App/App"; import BottomButtons from "@Components/Nav/BottomButtons"; +import { BrainFm } from "../components/Player/BrainFm/Player"; export const Astrostation = React.forwardRef((_props, ref) => { const { isMusicToggled, isMusicShown } = useToggleMusic(); const { isTimerToggled, isTimerShown } = useToggleTimer(); const { isTasksToggled, isTasksShown } = useToggleTasks(); const { isSpotifyToggled, isSpotifyShown } = useSpotifyMusic(); + const { isBrainfmToggled, isBrainfmShown } = useBrainfmMusic(); const { isStickyNoteShown } = useToggleStickyNote(); const { isQuoteToggled, isQuoteShown } = useToggleQuote(); const { isTwitchToggled, isTwitchShown } = useToggleTwitch(); @@ -61,6 +65,7 @@ export const Astrostation = React.forwardRef((_props, ref) => { const { taskPosX, taskPosY, setTaskPos } = usePosTask(); const { musicPosX, musicPosY, setMusicPos } = usePosMusic(); const { spotifyPosX, spotifyPosY, setSpotifyPos } = usePosSpotify(); + const { brainfmPosX, brainfmPosY, setBrainfmPos } = useBrainfmPos(); const { quotePosX, quotePosY, setQuotePos } = usePosQuote(); const { timerPosX, timerPosY, setTimerPos } = usePosTimer(); const { stickyNotes, setStickyNotesPos } = useStickyNote(); @@ -189,6 +194,16 @@ export const Astrostation = React.forwardRef((_props, ref) => { > + + + ( ) ); +/** + * Brain.fm Section Store + * --- + * Handle the Brain.fm section + */ + +export const useBrainfmMusic = create( + persist( + (set, _) => ({ + isBrainfmToggled: true, + setIsBrainfmToggled: isBrainfmToggled => set({ isBrainfmToggled }), + isBrainfmShown: true, + setIsBrainfmShown: isBrainfmShown => set({ isBrainfmShown }), + }), + { + name: "state_brainfm_section", + } + ) +); + +export const useBrainfmPos = create( + persist( + (set, _) => ({ + brainfmPosX: 400, + brainfmPosY: 158, + setBrainfmPos: (X, Y) => set({ brainfmPosX: X, brainfmPosY: Y }), + setBrainfmPosDefault: () => set(() => ({ brainfmPosX: 400, brainfmPosY: 158 })), + }), + { + name: "set_brainfm_position", + } + ) +); + /** * Timer Section Store * --- diff --git a/src/utils/hooks/useSetDefault.ts b/src/utils/hooks/useSetDefault.ts index 3ce1f6bb..43d7d44e 100644 --- a/src/utils/hooks/useSetDefault.ts +++ b/src/utils/hooks/useSetDefault.ts @@ -1,9 +1,19 @@ -import { usePosTask, usePosMusic, usePosSpotify, usePosTimer, usePosQuote, usePosTwitch, usePosYoutube } from "@Store"; +import { + usePosTask, + usePosMusic, + usePosSpotify, + usePosTimer, + usePosQuote, + usePosTwitch, + usePosYoutube, + useBrainfmPos, +} from "@Store"; function useSetDefault() { const { setTaskPosDefault } = usePosTask(); const { setMusicPosDefault } = usePosMusic(); const { setSpotifyPosDefault } = usePosSpotify(); + const { setBrainfmPosDefault } = useBrainfmPos(); const { setTimerPosDefault } = usePosTimer(); const { setQuotePosDefault } = usePosQuote(); const { setTwitchPosDefault } = usePosTwitch(); @@ -14,6 +24,7 @@ function useSetDefault() { setTaskPosDefault(); setMusicPosDefault(); setSpotifyPosDefault(); + setBrainfmPosDefault(); setTimerPosDefault(); setQuotePosDefault(); setTwitchPosDefault();