From dc85068400db1bafb3a391e48d7b334fb3d88545 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Wed, 25 Oct 2023 12:32:02 +0100
Subject: [PATCH] useBigPhoneView

---
 .../LandingContainer/VideoSection/VideoSection.tsx         | 7 +++----
 src/shared/constants/viewportBreakpoint.ts                 | 1 +
 src/shared/hooks/viewport/index.ts                         | 1 +
 src/shared/hooks/viewport/useIsBigPhoneView.ts             | 5 +++++
 4 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 src/shared/hooks/viewport/useIsBigPhoneView.ts

diff --git a/src/pages/Landing/components/LandingContainer/VideoSection/VideoSection.tsx b/src/pages/Landing/components/LandingContainer/VideoSection/VideoSection.tsx
index 6f9928c589..4852e714b1 100644
--- 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
index 6b693b5a54..b6b3d8b8d6 100644
--- 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
index 642e70bf13..e16fad16b9 100644
--- 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
new file mode 100644
index 0000000000..f97d7d9ee4
--- /dev/null
+++ 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`);