useBigPhoneView

daostack · Oct 25, 2023 · dc85068 · dc85068
1 parent 75a947a
commit dc85068
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/src/pages/Landing/components/LandingContainer/VideoSection/VideoSection.tsx b/src/pages/Landing/components/LandingContainer/VideoSection/VideoSection.tsx
@@ -1,9 +1,8 @@
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
-import landingMobilePosterSec from "@/shared/assets/images/landing-mobile-poster.jpg";
 import landingVideoPosterSrc from "@/shared/assets/images/landing-video-poster.jpg";
 import landingVideoSrc from "@/shared/assets/videos/landing-video.mp4";
-import { useIsPhoneView } from "@/shared/hooks/viewport";
+import { useIsBigPhoneView } from "@/shared/hooks/viewport";
 import { Button, ButtonVariant } from "@/shared/ui-kit";
 import "./index.scss";
 
@@ -15,12 +14,12 @@ const VideoSection: FC<VideoSectionProps> = ({ onLaunchClick }) => {
   const { t } = useTranslation("translation", {
     keyPrefix: "landing",
   });
-  const isPhoneView = useIsPhoneView();
+  const isBigPhoneView = useIsBigPhoneView();
 
   return (
     <section className="landing-video-section">
       <div className="landing-video-section__video-wrapper">
-        {!isPhoneView && (
+        {!isBigPhoneView && (
           <video
             className="landing-video-section__video"
             autoPlay

diff --git a/src/shared/constants/viewportBreakpoint.ts b/src/shared/constants/viewportBreakpoint.ts
@@ -3,6 +3,7 @@ export enum ViewportBreakpoint {
   Desktop = 1560,
   Laptop = 1152,
   Tablet = 768,
+  BigPhone = 450,
   Phone = 390,
 }
 

diff --git a/src/shared/hooks/viewport/index.ts b/src/shared/hooks/viewport/index.ts
@@ -4,3 +4,4 @@ export * from "./useIsLaptopView";
 export * from "./useIsPhoneOrientedView";
 export * from "./useIsPhoneView";
 export * from "./useIsTabletView";
+export * from "./useIsBigPhoneView";
diff --git a/src/shared/hooks/viewport/useIsBigPhoneView.ts b/src/shared/hooks/viewport/useIsBigPhoneView.ts
@@ -0,0 +1,5 @@
+import { ViewportBreakpoint } from "@/shared/constants";
+import useScreenSize from "../useScreenSize";
+
+export const useIsBigPhoneView = (): boolean =>
+  useScreenSize(`max-width: ${ViewportBreakpoint.BigPhone}px`);