Skip to content

Commit f917bf5

Browse files
Programming-SaiProgramming-Sai
committed
Working on Responsiveness. not as easy as it looks or i thought it would be.
1 parent 4f4c364 commit f917bf5

23 files changed

+846
-186
lines changed

‎app/_layout.js‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,39 @@ import { PlayerProvider } from "../contexts/PlayerContext";
1616
import { Stack } from "expo-router";
1717
import { Host } from "react-native-portalize";
1818
import ShortcutProvider from "../contexts/ShortCutContext";
19-
import ShortcutsModal from "../components/ShortcutsModal";
19+
import "react-native-gesture-handler";
20+
import { ResponsiveProvider } from "../contexts/ResponsiveContext";
21+
import { GestureHandlerRootView } from "react-native-gesture-handler";
22+
import { SafeAreaProvider } from "react-native-safe-area-context";
2023

2124
const API_BASE = process.env.NEXT_PUBLIC_API_BASE || "http://localhost:8000";
2225

2326
export default function Layout() {
2427
return (
25-
<Host>
26-
<ThemeProvider>
27-
<AppStorageProvider>
28-
<PlayerProvider streamBase={API_BASE}>
29-
<MenuProvider>
30-
<SidebarProvider>
31-
<SearchProvider>
32-
<ShortcutProvider>
33-
<LayoutContent />
34-
<Toast />
35-
</ShortcutProvider>
36-
</SearchProvider>
37-
</SidebarProvider>
38-
</MenuProvider>
39-
</PlayerProvider>
40-
</AppStorageProvider>
41-
</ThemeProvider>
42-
</Host>
28+
<GestureHandlerRootView style={{ flex: 1 }}>
29+
<SafeAreaProvider>
30+
<ResponsiveProvider>
31+
<Host>
32+
<ThemeProvider>
33+
<AppStorageProvider>
34+
<PlayerProvider streamBase={API_BASE}>
35+
<MenuProvider>
36+
<SidebarProvider>
37+
<SearchProvider>
38+
<ShortcutProvider>
39+
<LayoutContent />
40+
<Toast />
41+
</ShortcutProvider>
42+
</SearchProvider>
43+
</SidebarProvider>
44+
</MenuProvider>
45+
</PlayerProvider>
46+
</AppStorageProvider>
47+
</ThemeProvider>
48+
</Host>
49+
</ResponsiveProvider>
50+
</SafeAreaProvider>
51+
</GestureHandlerRootView>
4352
);
4453
}
4554

‎app/index.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@ import AccordionGroup from "../components/AccordionGroup";
88
import { useSearch } from "../contexts/SearchContext";
99
import LoadingSkeleton from "../components/LoadingSkeleton";
1010
import Toast from "react-native-toast-message";
11+
import { useResponsive } from "../contexts/ResponsiveContext";
1112

1213
export default function Home() {
1314
const { setRightSidebarKey } = useRightSidebar();
1415
const { viewMode, getLastSearch, setLastSearch } = useAppStorage();
1516
const { normalized, isLoading, error } = useSearch();
1617
const { theme } = useTheme();
18+
const { isAtOrBelow } = useResponsive();
19+
const tabletAndBelow = isAtOrBelow("md", true);
1720

1821
const lastSearch = getLastSearch();
1922
// Save the *normalized* result to storage when it becomes available.
@@ -61,9 +64,17 @@ export default function Home() {
6164
return (
6265
<ScrollView
6366
showsVerticalScrollIndicator={false}
67+
contentContainerStyle={{
68+
flexGrow: 1,
69+
backgroundColor: theme.background,
70+
}}
6471
style={[styles.container, { backgroundColor: theme.background }]}
6572
>
66-
<LoadingSkeleton viewMode={viewMode} displayType={displayType} />
73+
<LoadingSkeleton
74+
viewMode={viewMode}
75+
displayType={displayType}
76+
tabletAndBelow={tabletAndBelow}
77+
/>
6778
</ScrollView>
6879
);
6980
}
@@ -105,6 +116,7 @@ export default function Home() {
105116
return (
106117
<ScrollView
107118
showsVerticalScrollIndicator={false}
119+
// contentContainerStyle={{ flex: 1, marginBottom: 100 }}
108120
style={[styles.container, { backgroundColor: theme.background }]}
109121
>
110122
<View>
@@ -137,6 +149,7 @@ export default function Home() {
137149

138150
const styles = StyleSheet.create({
139151
container: {
152+
flex: 1,
140153
padding: 20,
141154
paddingVertical: 200,
142155
width: "100%",

‎app/player/[id].js‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,15 @@ import Toast from "react-native-toast-message";
4343
import { useDownloader } from "../../contexts/DownloaderContext";
4444
import Thumb from "../../components/Thumb";
4545
import { MutedIcon } from "../../components/MutedIcon";
46+
import { useResponsive } from "../../contexts/ResponsiveContext";
4647

4748
/**
4849
* Full Player Page (fixed hook ordering)
4950
*/
5051
export default function PlayerPage() {
5152
const { id, edit } = useLocalSearchParams();
53+
const { isAtOrBelow } = useResponsive();
54+
const tabletAndBelow = isAtOrBelow("md", true);
5255

5356
// const { id } = useLocalSearchParams();
5457
// const { edit } = useLocalSearchParams();
@@ -634,7 +637,10 @@ export default function PlayerPage() {
634637
<ImageBackground
635638
source={{ uri: track.largest_thumbnail || track.thumbnail || "" }}
636639
blurRadius={60}
637-
style={[styles.background, { backgroundColor: theme.background }]}
640+
style={[
641+
styles.background,
642+
{ backgroundColor: theme.background, flex: 1 },
643+
]}
638644
resizeMode="cover"
639645
>
640646
<ScrollView
@@ -643,11 +649,22 @@ export default function PlayerPage() {
643649
{
644650
backgroundColor: HEXA(theme.background, 0.5),
645651
height: "100%",
652+
paddingVertical: 100,
653+
paddingBottom: 800,
646654
},
647655
]}
648656
showsVerticalScrollIndicator={false}
649657
>
650-
<View style={[styles.coverWrap, { position: "relative" }]}>
658+
<View
659+
style={[
660+
styles.coverWrap,
661+
{
662+
position: "relative",
663+
width: tabletAndBelow ? 200 : 320,
664+
height: tabletAndBelow ? 200 : 320,
665+
},
666+
]}
667+
>
651668
{!isEditor ? (
652669
// View Mode (just show image)
653670
<Image
@@ -682,11 +699,13 @@ export default function PlayerPage() {
682699
}}
683700
style={[
684701
styles.coverImage,
685-
styles.coverWrap,
702+
// styles.coverWrap,
686703
{
687704
border: "1px solid",
688705
borderColor: theme.accent,
689706
marginTop: 0,
707+
width: tabletAndBelow ? 200 : 320,
708+
height: tabletAndBelow ? 200 : 320,
690709
},
691710
]}
692711
/>
@@ -779,6 +798,7 @@ export default function PlayerPage() {
779798
{
780799
color: theme.text,
781800
backgroundColor: HEXA(theme.textSecondary, 0.4),
801+
width: "90%",
782802
},
783803
]}
784804
placeholderTextColor={theme.textSecondary}

‎app/settings.js‎

Lines changed: 69 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Toast from "react-native-toast-message";
1616
import ShortCutsTable from "../components/ShortCutsTable";
1717
import { InfoIcon } from "../components/InfoIcon";
1818
import { useShortcuts } from "../contexts/ShortCutContext";
19+
import { useResponsive } from "../contexts/ResponsiveContext";
1920

2021
export default function Settings() {
2122
const { setRightSidebarKey } = useRightSidebar();
@@ -35,6 +36,8 @@ export default function Settings() {
3536
downloadUsePlaybackSettings,
3637
setDownloadUsePlaybackSettings,
3738
} = useAppStorage();
39+
const { isAtOrBelow } = useResponsive();
40+
const tabletAndBelow = isAtOrBelow("md", true);
3841

3942
const handleClear = () => {
4043
if (confirm("Permanently delete all search history?")) {
@@ -109,25 +112,44 @@ export default function Settings() {
109112
<View
110113
style={[
111114
styles.settingBoxContainer,
115+
tabletAndBelow && { flexDirection: "column" },
112116
{ border: `1px solid ${theme.textSecondary}`, padding: 20 },
113117
]}
114118
>
115-
<View style={[styles.settingDescSet, { alignItems: "flex-start" }]}>
116-
<Text style={[styles.settingHeading, { color: theme.text }]}>
119+
<View
120+
style={[
121+
styles.settingDescSet,
122+
{ alignItems: "flex-start" },
123+
tabletAndBelow && { width: "50%" },
124+
]}
125+
>
126+
<Text
127+
style={[
128+
styles.settingHeading,
129+
{ color: theme.text },
130+
tabletAndBelow && { textAlign: "center", width: "100%" },
131+
]}
132+
>
117133
Set Accent Color
118134
</Text>
119135
<Text
120136
style={[
121137
styles.settingSecondary,
122138
{ color: theme.textSecondary },
139+
tabletAndBelow && { textAlign: "center", width: "100%" },
123140
]}
124141
>
125142
Pick the accent used across the app (buttons, highlights, and
126143
active states).
127144
</Text>
128145
</View>
129146
<View style={styles.settingDescSet}>
130-
<ColorPicker colors={colors} setColor={setAccent} theme={theme} />
147+
<ColorPicker
148+
colors={colors}
149+
setColor={setAccent}
150+
theme={theme}
151+
tabletAndBelow={tabletAndBelow}
152+
/>
131153
</View>
132154
</View>
133155
</View>
@@ -142,7 +164,13 @@ export default function Settings() {
142164
{ border: `1px solid ${theme.textSecondary}`, padding: 20 },
143165
]}
144166
>
145-
<View style={[styles.settingDescSet, { alignItems: "flex-start" }]}>
167+
<View
168+
style={[
169+
styles.settingDescSet,
170+
{ alignItems: "flex-start" },
171+
tabletAndBelow && { width: "50%" },
172+
]}
173+
>
146174
<Text style={[styles.settingHeading, { color: theme.text }]}>
147175
Set Search Results Display View
148176
</Text>
@@ -179,7 +207,13 @@ export default function Settings() {
179207
{ borderBottomWidth: 0 },
180208
]}
181209
>
182-
<View style={[styles.settingDescSet, { alignItems: "flex-start" }]}>
210+
<View
211+
style={[
212+
styles.settingDescSet,
213+
{ alignItems: "flex-start" },
214+
tabletAndBelow && { width: "50%" },
215+
]}
216+
>
183217
<Text style={[styles.settingHeading, { color: theme.text }]}>
184218
Save Search History
185219
</Text>
@@ -211,7 +245,13 @@ export default function Settings() {
211245
{ border: `1px solid ${theme.textSecondary}`, padding: 20 },
212246
]}
213247
>
214-
<View style={[styles.settingDescSet, { alignItems: "flex-start" }]}>
248+
<View
249+
style={[
250+
styles.settingDescSet,
251+
{ alignItems: "flex-start" },
252+
tabletAndBelow && { width: "50%" },
253+
]}
254+
>
215255
<Text style={[styles.settingHeading, { color: theme.text }]}>
216256
Clear Search History
217257
</Text>
@@ -248,7 +288,13 @@ export default function Settings() {
248288
{ borderBottomWidth: 0 },
249289
]}
250290
>
251-
<View style={[styles.settingDescSet, { alignItems: "flex-start" }]}>
291+
<View
292+
style={[
293+
styles.settingDescSet,
294+
{ alignItems: "flex-start" },
295+
tabletAndBelow && { width: "50%" },
296+
]}
297+
>
252298
<Text style={[styles.settingHeading, { color: theme.text }]}>
253299
Mirror Playback Speed/Volume
254300
</Text>
@@ -281,7 +327,13 @@ export default function Settings() {
281327
{ border: `1px solid ${theme.textSecondary}`, padding: 20 },
282328
]}
283329
>
284-
<View style={[styles.settingDescSet, { alignItems: "flex-start" }]}>
330+
<View
331+
style={[
332+
styles.settingDescSet,
333+
{ alignItems: "flex-start" },
334+
tabletAndBelow && { width: "50%" },
335+
]}
336+
>
285337
<Text style={[styles.settingHeading, { color: theme.text }]}>
286338
Clear Download History
287339
</Text>
@@ -318,7 +370,13 @@ export default function Settings() {
318370
{ borderBottomWidth: 1 },
319371
]}
320372
>
321-
<View style={[styles.settingDescSet, { alignItems: "flex-start" }]}>
373+
<View
374+
style={[
375+
styles.settingDescSet,
376+
{ alignItems: "flex-start" },
377+
tabletAndBelow && { width: "50%" },
378+
]}
379+
>
322380
<Text style={[styles.settingHeading, { color: theme.text }]}>
323381
Open Keyboard Shortcuts.
324382
</Text>
@@ -373,7 +431,8 @@ const styles = StyleSheet.create({
373431
display: "flex",
374432
justifyContent: "center",
375433
alignItems: "flex-end",
376-
width: "fit-content",
434+
// width: "50%",
435+
// width: "fit-content",
377436
},
378437
settingHeading: {
379438
fontWeight: "500",

‎babel.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
presets: ["babel-preset-expo"],
3+
plugins: [
4+
"react-native-reanimated/plugin", // 👈 MUST be last
5+
],
6+
};

0 commit comments

Comments
 (0)