Release v1.3.1

contributors.yml

@@ -7,6 +7,7 @@
 - herropaul
 - madeleine-patience
 - mastermajorman
+- mechakin
 - melkeydev
 - nchudleigh
 - royanger

package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/components/Nav/SideNav.tsx

@@ -4,7 +4,7 @@ import { IoMenu } from "react-icons/io5";
 import { CgNotes } from "react-icons/cg";
 import { MdOutlineTimer, MdWbSunny, MdDarkMode, MdOutlineNoteAdd, MdOutlineViewKanban } from "react-icons/md";
 import { VscDebugRestartFrame } from "react-icons/vsc";
-import { BsArrowsFullscreen, BsFillChatLeftQuoteFill, BsTwitch } from "react-icons/bs";
+import { BsArrowsFullscreen, BsFillChatLeftQuoteFill, BsTwitch, BsYoutube } from "react-icons/bs";
 import { FaSpotify } from "react-icons/fa";
 import {
   useToggleMusic,
@@ -18,6 +18,7 @@ import {
   useToggleStickyNote,
   useToggleWidgetReset,
   useToggleTwitch,
+  useToggleYoutube,
   useSideNavOrderStore,
   useToggleKanban,
 } from "@Store";
@@ -40,6 +41,7 @@ export const SideNav = () => {
   const { isSpotifyToggled, setIsSpotifyToggled } = useSpotifyMusic();
   const { isQuoteToggled, setIsQuoteToggled } = useToggleQuote();
   const { isTwitchToggled, setIsTwitchToggled } = useToggleTwitch();
+  const { isYoutubeToggled, setIsYoutubeToggled } = useToggleYoutube();
 
   const { isTimerShown } = useToggleTimer();
   const { isStickyNoteShown } = useToggleStickyNote();
@@ -52,6 +54,7 @@ export const SideNav = () => {
   const { isQuoteShown } = useToggleQuote();
   const { isWidgetResetShown } = useToggleWidgetReset();
   const { isTwitchShown } = useToggleTwitch();
+  const { isYoutubeShown } = useToggleYoutube();
 
   const { sideNavOrder, setSideNavOrder } = useSideNavOrderStore();
 
@@ -193,6 +196,16 @@ export const SideNav = () => {
       toggleIcon: "📃",
       isShown: isKanbanShown,
     },
+    {
+      id: "12",
+      content: <BsYoutube className="h-6 w-6" />,
+      tooltipTitle: "Youtube Video",
+      isToggled: isYoutubeToggled,
+      setToggled: setIsYoutubeToggled,
+      toggleString: "Youtube Toggled",
+      toggleIcon: "▶️",
+      isShown: isYoutubeShown,
+    },
   ];
 
   // a little function to help us with reordering the result

src/components/WidgetControl/WidgetControlModal.tsx

@@ -9,7 +9,7 @@ import {
   MdOutlineViewKanban,
 } from "react-icons/md";
 import { VscDebugRestartFrame } from "react-icons/vsc";
-import { BsArrowsFullscreen, BsFillChatLeftQuoteFill, BsTwitch } from "react-icons/bs";
+import { BsArrowsFullscreen, BsFillChatLeftQuoteFill, BsTwitch, BsYoutube } from "react-icons/bs";
 import clsx from "clsx";
 
 import {
@@ -23,6 +23,7 @@ import {
   useFullScreenToggleStore,
   useToggleWidgetReset,
   useToggleTwitch,
+  useToggleYoutube,
   useToggleKanban,
 } from "@Store";
 import useMediaQuery from "@Utils/hooks/useMediaQuery";
@@ -39,6 +40,7 @@ export const WidgetControlModal = ({ isVisible = false, onClose }) => {
   const { isQuoteShown, setIsQuoteShown } = useToggleQuote();
   const { isWidgetResetShown, setIsWidgetResetShown } = useToggleWidgetReset();
   const { isTwitchShown, setIsTwitchShown } = useToggleTwitch();
+  const { isYoutubeShown, setIsYoutubeShown } = useToggleYoutube();
   const { isKanbanShown, setIsKanbanShown } = useToggleKanban();
 
   const isDesktop = useMediaQuery("(min-width: 641px)");
@@ -199,6 +201,18 @@ export const WidgetControlModal = ({ isVisible = false, onClose }) => {
               Twitch
               <BsTwitch className="h-6 w-full" />
             </div>
+            <div
+              onClick={() =>
+                toggledToastNotification(isYoutubeShown, setIsYoutubeShown, "Youtube 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",
+                isYoutubeShown && "dark:bg-violet-500 md:bg-gray-200 md:text-gray-800"
+              )}
+            >
+              Youtube
+              <BsYoutube className="h-6 w-full" />
+            </div>
             <div
               onClick={() =>
                 toggledToastNotification(

src/components/Youtube/YoutubeVideo.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { IoCloseSharp } from "react-icons/io5";
+import { AiOutlineReload } from "react-icons/ai";
+import { useToggleYoutube } from "@Store";
+
+export const YoutubeVideo = () => {
+  const defaultVideoId = "TYCBicKyVhs";
+  const playlistText = "?listType=playlist";
+  const { isYoutubeToggled, isYoutubeShown, setIsYoutubeToggled } = useToggleYoutube();
+  const [inputText, setInputText] = useState("");
+  const [videoId, setVideoId] = useState(defaultVideoId);
+  const youtubeIdRegex = new RegExp(/(youtu.*be.*)\/(watch\?v=|\/shorts|)(.*?((?=[&#?])|$))/);
+  const playlistRegex = new RegExp(/[&?]list=([^&]+)/i);
+
+  const handleVideoChange = (youtubeUrl: string) => {
+    const youtubeId = getYoutubeId(youtubeUrl);
+    const playlistId = getPlaylistId(youtubeUrl);
+
+    youtubeId && setVideoId(playlistId ? `${playlistText}${playlistId}` : youtubeId);
+  };
+
+  const getYoutubeId = (youtubeUrl: string) => {
+    const match = youtubeUrl.match(youtubeIdRegex);
+    return match ? match[3] : null;
+  };
+
+  const getPlaylistId = (youtubeUrl: string) => {
+    const match = youtubeUrl.match(playlistRegex);
+    return match ? match[0] : null;
+  };
+
+  const handleKeyDown = e => {
+    if (e.key === "Enter") {
+      const url = e.target.value;
+      handleVideoChange(url);
+    }
+  };
+
+  return (
+    <div className="w-full resize-x justify-between overflow-auto rounded-lg bg-white/[.96] py-2 text-gray-800 shadow-md dark:border-gray-700 dark:bg-gray-800/[.96] dark:text-gray-300 sm:w-96">
+      <div className="handle flex items-center justify-between p-1">
+        <p>Youtube</p>
+        <IoCloseSharp
+          className="cursor-pointer text-red-500 hover:bg-red-200"
+          onClick={() => setIsYoutubeToggled(false)}
+        />
+      </div>
+      <div className="relative aspect-video justify-center">
+        {isYoutubeShown && isYoutubeToggled && (
+          <iframe
+            className="left-0 h-full w-full"
+            src={"https://www.youtube.com/embed/" + videoId}
+            allowFullScreen
+          ></iframe>
+        )}
+      </div>
+      <div className="cancelDrag flex items-center space-x-1 p-1">
+        <input
+          className="w-full border border-gray-300 p-1 dark:border-gray-500 dark:bg-gray-700/[.96]"
+          type="text"
+          value={inputText}
+          placeholder="Paste video/playlist here..."
+          onChange={e => {
+            setInputText(e.target.value);
+          }}
+          onKeyDown={handleKeyDown}
+        />
+        <AiOutlineReload
+          className="w-5 cursor-pointer hover:text-slate-500"
+          onClick={() => {
+            handleVideoChange(inputText);
+          }}
+        />
+      </div>
+    </div>
+  );
+};

src/interfaces.ts

@@ -265,6 +265,20 @@ export interface IPosTwitch {
   setTwitchPosDefault: () => void;
 }
 
+export interface IToggleYoutube {
+  isYoutubeToggled: boolean;
+  setIsYoutubeToggled: (isYoutubeToggled: boolean) => void;
+  isYoutubeShown: boolean;
+  setIsYoutubeShown: (isYoutubeShown: boolean) => void;
+}
+
+export interface IPosYoutube {
+  youtubePosX: number;
+  youtubePosY: number;
+  setYoutubePos: (X: number, Y: number) => void;
+  setYoutubePosDefault: () => void;
+}
+
 export interface IFirstTimeUserState {
   isFirstTimeUser: boolean;
   toggleIsFirstTimeUser: () => void;

src/pages/Astrostation.tsx

@@ -9,12 +9,14 @@ import {
   useStickyNote,
   useToggleQuote,
   useToggleTwitch,
+  useToggleYoutube,
   useToggleKanban,
   usePosMusic,
   usePosSpotify,
   usePosTimer,
   usePosQuote,
   usePosTwitch,
+  usePosYoutube,
   usePosKanban,
   useGrid,
   useSetBackground,
@@ -36,6 +38,7 @@ import { Sticky } from "@Components/Sticky/Sticky";
 import { Quotes } from "@App/components/Quotes/Quotes";
 import useMediaQuery from "@Utils/hooks/useMediaQuery";
 import { TwitchStream } from "@Components/Twitch/TwitchStream";
+import { YoutubeVideo } from "@Components/Youtube/YoutubeVideo";
 import { Kanban } from "@Components/Kanban/Kanban";
 import { UnsplashFooter } from "../components/Nav/UnsplashFooter";
 import clsx from "clsx";
@@ -51,6 +54,7 @@ export const Astrostation = React.forwardRef<HTMLDivElement>((_props, ref) => {
   const { isStickyNoteShown } = useToggleStickyNote();
   const { isQuoteToggled, isQuoteShown } = useToggleQuote();
   const { isTwitchToggled, isTwitchShown } = useToggleTwitch();
+  const { isYoutubeToggled, isYoutubeShown } = useToggleYoutube();
   const { isKanbanToggled, isKanbanShown } = useToggleKanban();
 
   // Position hooks
@@ -61,6 +65,7 @@ export const Astrostation = React.forwardRef<HTMLDivElement>((_props, ref) => {
   const { timerPosX, timerPosY, setTimerPos } = usePosTimer();
   const { stickyNotes, setStickyNotesPos } = useStickyNote();
   const { twitchPosX, twitchPosY, setTwitchPos } = usePosTwitch();
+  const { youtubePosX, youtubePosY, setYoutubePos } = usePosYoutube();
   const { kanbanPosX, kanbanPosY, setKanbanPos } = usePosKanban();
   const isDesktop = useMediaQuery("(min-width: 768px)");
   const [isSettingsModalOpen, setSettingsModalOpen] = useState(false);
@@ -204,6 +209,16 @@ export const Astrostation = React.forwardRef<HTMLDivElement>((_props, ref) => {
           >
             <TwitchStream />
           </DWrapper>
+          <DWrapper
+            toggleHook={isYoutubeToggled && isYoutubeShown}
+            defaultX={youtubePosX}
+            defaultY={youtubePosY}
+            setPosition={setYoutubePos}
+            isSticky={false}
+            gridValues={grid}
+          >
+            <YoutubeVideo />
+          </DWrapper>
           <DWrapper
             toggleHook={isKanbanToggled && isKanbanShown}
             defaultX={kanbanPosX}

src/pages/InfoSection.tsx

@@ -91,6 +91,7 @@ export const InfoSection = ({ onButtonClick, isSeoVisible }: { onButtonClick; is
               <li>Tune into our Lofi Wifi Station with 4 different channels!</li>
               <li>Listen to your go-to Spotify playlist with our Spotify widget</li>
               <li>Use the Twitch widget to support your favorite streamer while you study!</li>
+              <li>Watch some videos with our YouTube widget!</li>
               <li>Use our quote widget to display inspirational quotes</li>
               <li>Need to remember something? There’s a sticky note widget for that!</li>
             </ul>

src/store.ts

@@ -38,6 +38,8 @@ import {
   IGrid,
   ILockWidgets,
   ISideNavOrderStore,
+  IToggleYoutube,
+  IPosYoutube,
   IToggleKanban,
   IPosKanban,
   ISeoContent,
@@ -795,6 +797,40 @@ export const usePosTwitch = create<IPosTwitch>(
   )
 );
 
+/**
+ * Youtube Section Store
+ * ---
+ * Handle the Youtube section
+ */
+
+export const useToggleYoutube = create<IToggleYoutube>(
+  persist(
+    (set, _) => ({
+      isYoutubeToggled: false,
+      setIsYoutubeToggled: isYoutubeToggled => set({ isYoutubeToggled }),
+      isYoutubeShown: false,
+      setIsYoutubeShown: isYoutubeShown => set({ isYoutubeShown }),
+    }),
+    {
+      name: "state_youtube",
+    }
+  )
+);
+
+export const usePosYoutube = create<IPosYoutube>(
+  persist(
+    (set, _) => ({
+      youtubePosX: 804,
+      youtubePosY: 436,
+      setYoutubePos: (X, Y) => set({ youtubePosX: X, youtubePosY: Y }),
+      setYoutubePosDefault: () => set(() => ({ youtubePosX: 1208, youtubePosY: 324 })),
+    }),
+    {
+      name: "set_youtube_position",
+    }
+  )
+);
+
 /**
  * First-time user Store
  * ---

src/utils/hooks/useSetDefault.ts

@@ -1,4 +1,4 @@
-import { usePosTask, usePosMusic, usePosSpotify, usePosTimer, usePosQuote, usePosTwitch } from "@Store";
+import { usePosTask, usePosMusic, usePosSpotify, usePosTimer, usePosQuote, usePosTwitch, usePosYoutube } from "@Store";
 
 function useSetDefault() {
   const { setTaskPosDefault } = usePosTask();
@@ -7,6 +7,7 @@ function useSetDefault() {
   const { setTimerPosDefault } = usePosTimer();
   const { setQuotePosDefault } = usePosQuote();
   const { setTwitchPosDefault } = usePosTwitch();
+  const { setYoutubePosDefault } = usePosYoutube();
 
   return () => {
     // Reset all widget positions
@@ -16,6 +17,7 @@ function useSetDefault() {
     setTimerPosDefault();
     setQuotePosDefault();
     setTwitchPosDefault();
+    setYoutubePosDefault();
   };
 }