playbacks web

src/config/initialGlobalState.js

@@ -1,4 +1,4 @@
-import { Palette } from '../styles';
+import { Palette } from "../styles";
 
 export default {
   currentUID: null,
@@ -6,6 +6,7 @@ export default {
   currentUserRoles: [],
 
   webBackgroundImg: null,
+  webLayoutMode: "default",
 
   _config: {
     colors: {

src/layouts/AppLayout.js

@@ -6,11 +6,13 @@ import useLayoutType from "../hooks/useLayoutType";
 import { background as backgrounds } from "../assets";
 import { Style } from "../styles";
 
+// eslint-disable-next-line react/display-name
 export default ({ currentUID = null, children }) => {
   const { isWeb = false } = useLayoutType();
 
   // Web: full-screen background with a centered content area (30% width)
   const [webBackgroundImg] = useGlobal("webBackgroundImg");
+  const [webLayoutMode] = useGlobal("webLayoutMode");
 
   if (isWeb) {
     return (
@@ -39,9 +41,15 @@ export default ({ currentUID = null, children }) => {
         {/* Centered content column (phone-like width) */}
         <View
           style={{
-            width: isWeb ? "60%" : "30%",
+            width:
+              webLayoutMode === "playbacks-wide"
+                ? "90%"
+                : isWeb
+                  ? "60%"
+                  : "30%",
             minWidth: 360,
-            maxWidth: isWeb ? 800 : 520,
+            maxWidth:
+              webLayoutMode === "playbacks-wide" ? 1440 : isWeb ? 800 : 520,
             height: "100svh",
             backgroundColor: "transparent",
           }}

src/navigation/BottomTab.js

@@ -12,7 +12,7 @@ import TabBar from "./TabBar";
 import { Platform } from "react-native";
 import HitParade from "../screens/HitParade/HitParade.js";
 import Library from "../screens/Library/Library.js";
-import Playbacks from "../screens/Playbacks.js";
+import Playbacks from "../screens/Playbacks/Playbacks";
 import Profile from "../screens/Profile/Profile.js";
 import HomeStack from "./HomeStack";
 

src/screens/Playbacks/Playbacks.js

@@ -12,22 +12,22 @@ import React, {
 import { Image, Platform, Pressable, Share, Text, View } from "react-native";
 import Carousel from "react-native-reanimated-carousel";
 import { responsiveHeight } from "react-native-responsive-dimensions";
-import { icons, img } from "../assets";
-import { openComments } from "../components/bottomsheets/CommentsBottomSheet";
-import KaraokeLyrics from "../components/KaraokeLyrics";
+import { icons, img } from "../../assets";
+import { openComments } from "../../components/bottomsheets/CommentsBottomSheet";
+import KaraokeLyrics from "../../components/KaraokeLyrics";
 import {
   arrayRemove,
   arrayUnion,
   projectsRef,
   usersRef,
-} from "../config/firebase";
-import useDataFromRef from "../hooks/useDataFromRef";
-import { Routes } from "../navigation";
-import { navigate } from "../navigation/NavigationService";
-import { useUser } from "../providers/UserDataProvider";
-import { Palette } from "../styles";
-import { FONT_FAMILY } from "../styles/Fonts";
-import { size } from "../styles/Style";
+} from "../../config/firebase";
+import useDataFromRef from "../../hooks/useDataFromRef";
+import { Routes } from "../../navigation";
+import { navigate } from "../../navigation/NavigationService";
+import { useUser } from "../../providers/UserDataProvider";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { size } from "../../styles/Style";
 
 const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
   const { currentUID, followUser, unfollowUser } = useUser() || {};