audio + fix bug

2026-06-03 14:39:16 +03:30
parent 3bfd5fd1eb
commit 9b72105115
8 changed files with 331 additions and 233 deletions
@@ -1,102 +1,123 @@
-import { type FC, useEffect } from 'react'
-import Input from '@/components/Input'
+import Input from "@/components/Input";
+import { type FC, useEffect } from "react";
 // import { ArrowDown2, CloseCircle, HambergerMenu, Logout, Wallet } from 'iconsax-react'
 // import AvatarImage from '../assets/images/avatar_image.png'
-import { useTranslation } from 'react-i18next'
-import { Link, useLocation } from 'react-router-dom'
-import { Paths } from '@/config/Paths'
-import { useSharedStore } from '@/shared/store/sharedStore'
-import { Eye, HambergerMenu } from 'iconsax-react'
-import { clx } from '@/helpers/utils'
-import { requestViewerFullscreen } from '@/pages/viewer/utils/viewerFullscreen'
+import { Paths } from "@/config/Paths";
+import { clx } from "@/helpers/utils";
+import {
+  isCatalogMongoId,
+  useGetCatalogByIdOrSlug,
+} from "@/pages/home/hooks/useHomeData";
+import { useSharedStore } from "@/shared/store/sharedStore";
+import { Eye, HambergerMenu } from "iconsax-react";
+import { useTranslation } from "react-i18next";
+import { Link, useLocation } from "react-router-dom";

-type SidebarSize = 'default' | 'wide'
+type SidebarSize = "default" | "wide";

 type HeaderProps = {
-    hasMainSidebar?: boolean
-    sidebarSize?: SidebarSize
-}
+  hasMainSidebar?: boolean;
+  sidebarSize?: SidebarSize;
+};

-const sidebarSizeClasses: Record<SidebarSize, { base: string; withSub: string }> = {
-    default: {
-        base: 'xl:right-[285px] xl:w-[calc(100%-305px)]',
-        withSub: 'xl:right-[320px] xl:w-[calc(100%-340px)]',
-    },
-    wide: {
-        base: 'xl:right-[390px] xl:w-[calc(100%-406px)]',
-        withSub: 'xl:right-[425px] xl:w-[calc(100%-441px)]',
-    },
-}
+const sidebarSizeClasses: Record<
+  SidebarSize,
+  { base: string; withSub: string }
+> = {
+  default: {
+    base: "xl:right-[285px] xl:w-[calc(100%-305px)]",
+    withSub: "xl:right-[320px] xl:w-[calc(100%-340px)]",
+  },
+  wide: {
+    base: "xl:right-[390px] xl:w-[calc(100%-406px)]",
+    withSub: "xl:right-[425px] xl:w-[calc(100%-441px)]",
+  },
+};

-const Header: FC<HeaderProps> = ({ hasMainSidebar = true, sidebarSize = 'default' }) => {
+const Header: FC<HeaderProps> = ({
+  hasMainSidebar = true,
+  sidebarSize = "default",
+}) => {
+  // const location = useLocation();
+  // const [popoverKey, setPopoverKey] = useState(0);
+  const { t } = useTranslation("global");
+  const { setOpenSidebar, openSidebar, hasSubMenu, setSearch } =
+    useSharedStore();
+  const location = useLocation();
+  const editorPathPrefix = `${Paths.editor}/`;
+  const isEditorRoute =
+    location.pathname.startsWith(editorPathPrefix) &&
+    location.pathname.length > editorPathPrefix.length;
+  const editorRouteParam = isEditorRoute
+    ? (location.pathname.slice(editorPathPrefix.length).split("/")[0] ?? "")
+    : "";
+  const { data: catalogData } = useGetCatalogByIdOrSlug(
+    isEditorRoute && editorRouteParam ? editorRouteParam : "",
+  );
+  const viewerSlug =
+    catalogData?.data?.slug ??
+    (editorRouteParam && !isCatalogMongoId(editorRouteParam)
+      ? editorRouteParam
+      : "");

-    // const location = useLocation();
-    // const [popoverKey, setPopoverKey] = useState(0);
-    const { t } = useTranslation('global')
-    const { setOpenSidebar, openSidebar, hasSubMenu, setSearch } = useSharedStore()
-    const location = useLocation()
-    const editorPathPrefix = `${Paths.editor}/`
-    const isEditorRoute =
-        location.pathname.startsWith(editorPathPrefix) &&
-        location.pathname.length > editorPathPrefix.length
-    const editorDocumentId = isEditorRoute
-        ? (location.pathname.slice(editorPathPrefix.length).split('/')[0] ?? '')
-        : ''
+  // useEffect(() => {
+  //     setPopoverKey((prevKey) => prevKey + 1);
+  // }, [location.pathname]);

-    // useEffect(() => {
-    //     setPopoverKey((prevKey) => prevKey + 1);
-    // }, [location.pathname]);
+  // const handleLogout = () => {
+  //     removeToken()
+  //     removeRefreshToken()
+  //     window.location.href = Pages.auth.login
+  // }

-    // const handleLogout = () => {
-    //     removeToken()
-    //     removeRefreshToken()
-    //     window.location.href = Pages.auth.login
-    // }
+  useEffect(() => {
+    setSearch("");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);

-    useEffect(() => {
-        setSearch('')
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname])
+  return (
+    <div
+      className={clx(
+        "fixed z-10 right-4 left-4 top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px]",
+        hasMainSidebar &&
+          (hasSubMenu
+            ? sidebarSizeClasses[sidebarSize].withSub
+            : sidebarSizeClasses[sidebarSize].base),
+      )}
+    >
+      <div className="min-w-[270px] hidden xl:block">
+        <Input
+          variant="search"
+          placeholder={t("header.search")}
+          onChangeSearchFinal={(value) => setSearch(value)}
+        />
+      </div>
+      <div
+        onClick={() => setOpenSidebar(!openSidebar)}
+        className="xl:hidden block"
+      >
+        <HambergerMenu size={24} color="black" />
+      </div>
+      {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
+      <div className="flex xl:gap-6 gap-4 items-center">
+        {isEditorRoute && viewerSlug ? (
+          <Link
+            target="_blank"
+            to={`${Paths.viewer}/${viewerSlug}`}
+            className="flex items-center"
+            aria-label={t("header.open_viewer")}
+            title={t("header.open_viewer")}
+            // onClick={requestViewerFullscreen}
+          >
+            <Eye size={20} color="black" />
+          </Link>
+        ) : null}

-    return (
-        <div className={clx(
-            'fixed z-10 right-4 left-4 top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px]',
-            hasMainSidebar && (
-                hasSubMenu
-                    ? sidebarSizeClasses[sidebarSize].withSub
-                    : sidebarSizeClasses[sidebarSize].base
-            )
-        )}>
-
-            <div className='min-w-[270px] hidden xl:block'>
-                <Input
-                    variant='search'
-                    placeholder={t('header.search')}
-                    onChangeSearchFinal={(value) => setSearch(value)}
-                />
-            </div>
-            <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
-                <HambergerMenu size={24} color='black' />
-            </div>
-            {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
-            <div className='flex xl:gap-6 gap-4 items-center'>
-                {isEditorRoute && editorDocumentId ? (
-                    <Link
-                        to={`${Paths.viewer}/${editorDocumentId}`}
-                        className='flex items-center'
-                        aria-label={t('header.open_viewer')}
-                        title={t('header.open_viewer')}
-                        onClick={requestViewerFullscreen}
-                    >
-                        <Eye size={20} color='black' />
-                    </Link>
-                ) : null}
-
-                {/* <Link className='xl:hidden' to={Paths.wallet}>
+        {/* <Link className='xl:hidden' to={Paths.wallet}>
                    <Wallet className='xl:size-[18px] size-[17px]' color='#da2129' />
                </Link> */}
-                {/* <Notifications /> */}
-                {/* {
+        {/* <Notifications /> */}
+        {/* {
                    data && (
                        <Popover className="relative" key={popoverKey}>
                            <PopoverButton >
@@ -144,9 +165,9 @@ const Header: FC<HeaderProps> = ({ hasMainSidebar = true, sidebarSize = 'default
                        </Popover>
                    )
                } */}
-            </div>
-        </div>
-    )
-}
+      </div>
+    </div>
+  );
+};

-export default Header
+export default Header;