Fixed bugs from adding Youtube widget

contributors.yml

@@ -13,4 +13,5 @@
 - royanger
 - Samathingamajig
 - cosmiclasagnadev
-- trobonox
+- trobonox
+- zemzelett

src/components/Nav/SideNav.tsx

@@ -178,16 +178,6 @@ export const SideNav = () => {
     },
     {
       id: "10",
-      content: <BsYoutube className="h-6 w-6" />,
-      tooltipTitle: "Youtube Video",
-      isToggled: isYoutubeToggled,
-      setToggled: setIsYoutubeToggled,
-      toggleString: "Youtube Toggled",
-      toggleIcon: "▶️",
-      isShown: isYoutubeShown,
-    },
-    {
-      id: "11",
       content: <BsArrowsFullscreen className="h-6 w-6" />,
       tooltipTitle: "Fullscreen",
       isToggled: isFullscreen,
@@ -197,7 +187,7 @@ export const SideNav = () => {
       isShown: isFullscreenShown,
     },
     {
-      id: "12",
+      id: "11",
       content: <MdOutlineViewKanban className="h-6 w-6" />,
       tooltipTitle: "Kanban",
       isToggled: isKanbanToggled,
@@ -206,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/TaskTracker/TaskTracker.tsx

@@ -13,7 +13,7 @@ export const TaskTracker = () => {
   const [isTaskInfoModalOpen, setIsTaskInfoModalOpen] = useState(false);
 
   return (
-    <div className="rounded-lg border border-gray-200 bg-white/[.96] shadow-md dark:border-gray-700 dark:bg-gray-800/[.96]">
+    <div className="mb-2 w-72 sm:w-96 rounded-lg border border-gray-200 bg-white/[.96] shadow-md dark:border-gray-700 dark:bg-gray-800/[.96]">
       <div className="handle flex w-full cursor-move justify-between p-2">
         <TaskInfoModal isVisible={isTaskInfoModalOpen} onClose={() => setIsTaskInfoModalOpen(false)} />
         <IoInformationCircleOutline
@@ -25,7 +25,7 @@ export const TaskTracker = () => {
           onClick={() => setIsTasksToggled(false)}
         />
       </div>
-      <div className="joyRideTaskTracker mb-2 w-72 pb-3 pr-3 pl-3 dark:text-gray-300 sm:w-96 ">
+      <div className="joyRideTaskTracker pb-3 pr-3 pl-3 dark:text-gray-300">
         <Header title="Task Tracker" onAdd={() => setShowAddTask(!showAddTask)} showAdd={showAddTask} />
         {showAddTask && <AddTask />}
         {tasks.length > 0 ? <Tasks tasks={tasks} /> : "No Tasks to Show"}

src/components/WidgetControl/WidgetControlModal.tsx

@@ -212,6 +212,9 @@ export const WidgetControlModal = ({ isVisible = false, onClose }) => {
             >
               Youtube
               <BsYoutube className="h-6 w-full" />
+            </div>
+            <div
+              onClick={() =>
                 toggledToastNotification(
                   isKanbanShown,
                   setIsKanbanShown,

src/components/Youtube/YoutubeVideo.tsx

@@ -9,7 +9,7 @@ export const YoutubeVideo = () => {
   const { isYoutubeToggled, isYoutubeShown, setIsYoutubeToggled } = useToggleYoutube();
   const [inputText, setInputText] = useState("");
   const [videoId, setVideoId] = useState(defaultVideoId);
-  const youtubeIdRegex = new RegExp(/(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/);
+  const youtubeIdRegex = new RegExp(/(youtu.*be.*)\/(watch\?v=|\/shorts|)(.*?((?=[&#?])|$))/);
   const playlistRegex = new RegExp(/[&?]list=([^&]+)/i);
 
   const handleVideoChange = (youtubeUrl: string) => {

src/pages/Astrostation.tsx

@@ -218,6 +218,8 @@ export const Astrostation = React.forwardRef<HTMLDivElement>((_props, ref) => {
             gridValues={grid}
           >
             <YoutubeVideo />
+          </DWrapper>
+          <DWrapper
             toggleHook={isKanbanToggled && isKanbanShown}
             defaultX={kanbanPosX}
             defaultY={kanbanPosY}

src/store.ts

@@ -43,7 +43,7 @@ import {
   IToggleKanban,
   IPosKanban,
   ISeoContent,
-  IKanbanBoardState
+  IKanbanBoardState,
 } from "./interfaces";
 import { InfoSection } from "./pages/InfoSection";
 import { uuid } from "uuidv4";
@@ -269,10 +269,10 @@ export const useStickyNote = create<IStickyNoteState>(
           stickyNotes: state.stickyNotes.map(note =>
             note.id === id
               ? ({
-                ...note,
-                stickyNotesPosX: X,
-                stickyNotesPosY: Y,
-              } as IStickyNote)
+                  ...note,
+                  stickyNotesPosX: X,
+                  stickyNotesPosY: Y,
+                } as IStickyNote)
               : note
           ),
         }));
@@ -333,9 +333,9 @@ export const useTask = create<ITaskState>(
           tasks: state.tasks.map(task =>
             task.id === id
               ? ({
-                ...task,
-                description: newName,
-              } as ITask)
+                  ...task,
+                  description: newName,
+                } as ITask)
               : task
           ),
         }));
@@ -348,9 +348,7 @@ export const useTask = create<ITaskState>(
       removeAllTasks: () => set({ tasks: [] }),
       toggleInProgressState: (id, flag) => {
         set(state => ({
-          tasks: state.tasks.map(task =>
-            task.id === id ? ({ ...task, inProgress: flag } as ITask) : task
-          ),
+          tasks: state.tasks.map(task => (task.id === id ? ({ ...task, inProgress: flag } as ITask) : task)),
         }));
       },
       setCompleted: (id, flag) => {
@@ -363,12 +361,9 @@ export const useTask = create<ITaskState>(
           tasks: state.tasks.map(task =>
             task.id === id
               ? ({
-                ...task,
-                pomodoroCounter:
-                  task.pomodoroCounter < task.pomodoro
-                    ? task.pomodoroCounter + 1
-                    : task.pomodoro,
-              } as ITask)
+                  ...task,
+                  pomodoroCounter: task.pomodoroCounter < task.pomodoro ? task.pomodoroCounter + 1 : task.pomodoro,
+                } as ITask)
               : task
           ),
         }));
@@ -378,9 +373,9 @@ export const useTask = create<ITaskState>(
           tasks: state.tasks.map(task =>
             task.id === id
               ? ({
-                ...task,
-                pomodoro: newVal,
-              } as ITask)
+                  ...task,
+                  pomodoro: newVal,
+                } as ITask)
               : task
           ),
         }));
@@ -390,9 +385,9 @@ export const useTask = create<ITaskState>(
           tasks: state.tasks.map(task =>
             task.id === id
               ? ({
-                ...task,
-                alerted: flag,
-              } as ITask)
+                  ...task,
+                  alerted: flag,
+                } as ITask)
               : task
           ),
         }));
@@ -481,10 +476,10 @@ export const useKanban = create<IKanbanBoardState>(
       setColumns: (columns: any) => {
         set(state => ({
           board: {
-            columns: columns
-          }
+            columns: columns,
+          },
         }));
-      }
+      },
     }),
     {
       name: "state_kanban_board",
@@ -503,8 +498,8 @@ export const useSetBackground = create<IBackground>(
     (set, _) => ({
       backgroundId: 0,
       backgroundColor: "",
-      setBackgroundColor: (color) => set({ backgroundColor: color }),
-      setBackgroundId: (backgroundId) => set({ backgroundId }),
+      setBackgroundColor: color => set({ backgroundColor: color }),
+      setBackgroundId: backgroundId => set({ backgroundId }),
     }),
     {
       name: "app_background",
@@ -522,9 +517,9 @@ export const useToggleKanban = create<IToggleKanban>(
   persist(
     (set, _) => ({
       isKanbanToggled: false,
-      setIsKanbanToggled: (isKanbanToggled) => set({ isKanbanToggled }),
+      setIsKanbanToggled: isKanbanToggled => set({ isKanbanToggled }),
       isKanbanShown: false,
-      setIsKanbanShown: (isKanbanShown) => set({ isKanbanShown }),
+      setIsKanbanShown: isKanbanShown => set({ isKanbanShown }),
     }),
     {
       name: "state_kanban_section",
@@ -538,8 +533,7 @@ export const usePosKanban = create<IPosKanban>(
       kanbanPosX: 200,
       kanbanPosY: 0,
       setKanbanPos: (X, Y) => set({ kanbanPosX: X, kanbanPosY: Y }),
-      setKanbanPosDefault: () =>
-        set(() => ({ kanbanPosX: 200, kanbanPosY: 0 })),
+      setKanbanPosDefault: () => set(() => ({ kanbanPosX: 200, kanbanPosY: 0 })),
     }),
     {
       name: "set_kanban_position",
@@ -741,9 +735,9 @@ export const usePosQuote = create<IPosQuote>(
   persist(
     (set, _) => ({
       quotePosX: 804,
-      quotePosY: 436,
+      quotePosY: 572,
       setQuotePos: (X, Y) => set({ quotePosX: X, quotePosY: Y }),
-      setQuotePosDefault: () => set(() => ({ quotePosX: 804, quotePosY: 464 })),
+      setQuotePosDefault: () => set(() => ({ quotePosX: 804, quotePosY: 572 })),
     }),
     {
       name: "set_quote_position",
@@ -903,7 +897,7 @@ export const useSeoVisibilityStore = create<ISeoContent>(
   persist(
     (set, _) => ({
       isSeoVisible: true,
-      setSeoVisibility: (isSeoVisible) => set({ isSeoVisible }),
+      setSeoVisibility: isSeoVisible => set({ isSeoVisible }),
     }),
     { name: "state_seo_visibility" }
   )