analytica-frontend-lib 1.1.77 → 1.1.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1362,6 +1362,10 @@ var Badge_default = Badge;
1362
1362
  import { useState as useState3, useEffect as useEffect5 } from "react";
1363
1363
  var MOBILE_WIDTH = 500;
1364
1364
  var TABLET_WIDTH = 931;
1365
+ var SMALL_MOBILE_WIDTH = 425;
1366
+ var EXTRA_SMALL_MOBILE_WIDTH = 375;
1367
+ var ULTRA_SMALL_MOBILE_WIDTH = 375;
1368
+ var TINY_MOBILE_WIDTH = 320;
1365
1369
  var DEFAULT_WIDTH = 1200;
1366
1370
  var getWindowWidth = () => {
1367
1371
  if (typeof window === "undefined") {
@@ -1376,11 +1380,19 @@ var getDeviceType = () => {
1376
1380
  var useMobile = () => {
1377
1381
  const [isMobile, setIsMobile] = useState3(false);
1378
1382
  const [isTablet, setIsTablet] = useState3(false);
1383
+ const [isSmallMobile, setIsSmallMobile] = useState3(false);
1384
+ const [isExtraSmallMobile, setIsExtraSmallMobile] = useState3(false);
1385
+ const [isUltraSmallMobile, setIsUltraSmallMobile] = useState3(false);
1386
+ const [isTinyMobile, setIsTinyMobile] = useState3(false);
1379
1387
  useEffect5(() => {
1380
1388
  const checkScreenSize = () => {
1381
1389
  const width = getWindowWidth();
1382
1390
  setIsMobile(width < MOBILE_WIDTH);
1383
1391
  setIsTablet(width < TABLET_WIDTH);
1392
+ setIsSmallMobile(width < SMALL_MOBILE_WIDTH);
1393
+ setIsExtraSmallMobile(width < EXTRA_SMALL_MOBILE_WIDTH);
1394
+ setIsUltraSmallMobile(width < ULTRA_SMALL_MOBILE_WIDTH);
1395
+ setIsTinyMobile(width < TINY_MOBILE_WIDTH);
1384
1396
  };
1385
1397
  checkScreenSize();
1386
1398
  window.addEventListener("resize", checkScreenSize);
@@ -1404,13 +1416,24 @@ var useMobile = () => {
1404
1416
  const getHeaderClasses = () => {
1405
1417
  return isMobile ? getMobileHeaderClasses() : getDesktopHeaderClasses();
1406
1418
  };
1419
+ const getVideoContainerClasses = () => {
1420
+ if (isTinyMobile) return "aspect-square";
1421
+ if (isExtraSmallMobile) return "aspect-[4/3]";
1422
+ if (isSmallMobile) return "aspect-[16/12]";
1423
+ return "aspect-video";
1424
+ };
1407
1425
  return {
1408
1426
  isMobile,
1409
1427
  isTablet,
1428
+ isSmallMobile,
1429
+ isExtraSmallMobile,
1430
+ isUltraSmallMobile,
1431
+ isTinyMobile,
1410
1432
  getFormContainerClasses,
1411
1433
  getHeaderClasses,
1412
1434
  getMobileHeaderClasses,
1413
1435
  getDesktopHeaderClasses,
1436
+ getVideoContainerClasses,
1414
1437
  getDeviceType
1415
1438
  };
1416
1439
  };