playback styles

src/navigation/TabBar.js

@@ -1,22 +1,37 @@
 import * as Haptics from "expo-haptics";
-import React from "react";
+import React, { useMemo } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 
+import { useGlobal } from "reactn";
 import ItemContainer from "../components/ItemContainer/ItemContainer";
 import useLayoutType from "../hooks/useLayoutType";
 import { gutters, Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 
 const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
-  const { isDesktop, windowWidth, mediumDesktopBreakpoint, isWeb } =
-    useLayoutType();
+  const { windowWidth, isWeb } = useLayoutType();
+  const [webLayoutMode] = useGlobal("webLayoutMode");
+
+  const containerWidth = useMemo(() => {
+    if (!isWeb) return "90%";
+
+    const containerFraction = webLayoutMode === "playbacks-wide" ? 0.9 : 0.6;
+    const containerMax = webLayoutMode === "playbacks-wide" ? 1440 : 800;
+    const computedContainerWidth = Math.min(
+      windowWidth * containerFraction,
+      containerMax
+    );
+    const barWidth = Math.max(computedContainerWidth * 0.9, 360);
+    return barWidth;
+  }, [isWeb, webLayoutMode, windowWidth]);
 
   return (
     <View
       style={{
         position: "absolute",
         bottom: gutters * 2,
-        width: "90%",
+        width: containerWidth,
+        maxWidth: 700,
         alignSelf: "center",
         zIndex: 1,
         justifyContent: "center",