Skip to content

Commit 80244af

Browse files
mykhailodanilenkomykhailodanilenko
authored
Merge pull request OwnTube-tv#348 from mykhailodanilenko/feature/ui-adjustments-and-fixes
Small ui adjustments for non-video-playback views
2 parents c0e01b6 + 33a101f commit 80244af

26 files changed

Lines changed: 192 additions & 105 deletions

File tree

‎OwnTube.tv/app/_layout.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,11 @@ const RootStack = () => {
5858
return <AppHeader {...props} backend={backend} />;
5959
}
6060

61-
if (Object.keys(SHAREABLE_ROUTE_MODAL_TITLES).includes(pathname)) {
61+
if (
62+
Object.keys(SHAREABLE_ROUTE_MODAL_TITLES)
63+
.filter((route) => route !== `/${ROUTES.HOME}`)
64+
.includes(pathname)
65+
) {
6266
return <AppDesktopHeader />;
6367
}
6468

‎OwnTube.tv/components/AppDesktopHeader.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,26 @@ import { spacing } from "../theme";
33
import { Button } from "./shared";
44
import { useShareButton } from "../hooks";
55
import TVFocusGuideHelper from "./helpers/TVFocusGuideHelper";
6+
import { useSafeAreaInsets } from "react-native-safe-area-context";
67

78
export const AppDesktopHeader = () => {
89
const { handleToggleShareModal } = useShareButton();
10+
const { top } = useSafeAreaInsets();
911

1012
return (
1113
<TVFocusGuideHelper autoFocus style={styles.container} pointerEvents="box-none">
12-
<Button onPress={handleToggleShareModal} contrast="low" style={styles.button} icon="Share" />
14+
<Button
15+
onPress={() => handleToggleShareModal({})}
16+
contrast="low"
17+
style={{ ...styles.button, marginTop: top }}
18+
icon="Share"
19+
/>
1320
</TVFocusGuideHelper>
1421
);
1522
};
1623

1724
const styles = StyleSheet.create({
18-
button: { alignSelf: "flex-end", height: 48, paddingVertical: 6 },
25+
button: { alignSelf: "flex-end", height: 48, marginRight: spacing.xl, paddingVertical: 6 },
1926
container: {
2027
height: 60,
2128
paddingLeft: spacing.lg,

‎OwnTube.tv/components/AppHeader.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const AppHeader = ({ backend, ...props }: AppHeaderProps) => {
1515
const { colors } = useTheme();
1616
const { top } = useSafeAreaInsets();
1717
const { isRouteShareable, handleToggleShareModal } = useShareButton();
18+
1819
return (
1920
<View
2021
style={[
@@ -30,7 +31,7 @@ export const AppHeader = ({ backend, ...props }: AppHeaderProps) => {
3031
<InstanceInfo backend={backend} />
3132
</View>
3233
{isRouteShareable && (
33-
<Button style={styles.menuBtn} onPress={handleToggleShareModal} icon="Share" contrast="low" />
34+
<Button style={styles.menuBtn} onPress={() => handleToggleShareModal({})} icon="Share" contrast="low" />
3435
)}
3536
</View>
3637
);

‎OwnTube.tv/components/ListInfoHeader.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ export const ListInfoHeader = ({
3333

3434
const { currentInstanceConfig } = useInstanceConfig();
3535

36-
const isLinkShown = linkHref && !currentInstanceConfig?.customizations?.hideChannelPlaylistLinks && !Platform.isTV;
36+
const isLinkShown =
37+
linkHref &&
38+
!process.env.EXPO_PUBLIC_HIDE_VIDEO_SITE_LINKS &&
39+
!currentInstanceConfig?.customizations?.hideChannelPlaylistLinks &&
40+
!Platform.isTV;
3741

3842
return (
3943
<View
@@ -64,7 +68,6 @@ export const ListInfoHeader = ({
6468
fontSize="sizeMd"
6569
fontWeight="Medium"
6670
color={colors.themeDesaturated500}
67-
numberOfLines={4}
6871
>
6972
{description}
7073
</Typography>
@@ -76,6 +79,12 @@ export const ListInfoHeader = ({
7679
const styles = StyleSheet.create({
7780
container: { alignSelf: "flex-start", flexDirection: "row", paddingVertical: spacing.xl, width: "100%" },
7881
descriptionContainer: { flexShrink: 1, flexWrap: "wrap" },
79-
headerContainer: { alignItems: "center", flexDirection: "row", flexWrap: "wrap", gap: spacing.md },
82+
headerContainer: {
83+
alignItems: "center",
84+
flexDirection: "row",
85+
flexWrap: "wrap",
86+
gap: spacing.md,
87+
paddingRight: spacing.xxxl,
88+
},
8089
textContainer: { flex: 1, gap: spacing.md },
8190
});

‎OwnTube.tv/components/Sidebar.tsx‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@ import { Platform, StyleSheet, View } from "react-native";
1010
import { Button, Separator } from "./shared";
1111
import { spacing } from "../theme";
1212
import { Spacer } from "./shared/Spacer";
13-
import { useBreakpoints, useInstanceConfig } from "../hooks";
13+
import { useBreakpoints, useInstanceConfig, useShareButton } from "../hooks";
1414
import { InstanceInfo } from "./InstanceInfo";
1515
import { Settings } from "./VideoControlsOverlay/components/modals";
1616
import { useNetInfo } from "@react-native-community/netinfo";
1717
import { writeToAsyncStorage } from "../utils";
1818
import useLeaveInstancePermission from "../hooks/useLeaveInstancePermission";
1919
import { useSafeAreaInsets } from "react-native-safe-area-context";
2020
import { QrCodeLinkModal } from "./QRCodeLinkModal";
21+
import build_info from "../build-info.json";
2122

2223
const SIDEBAR_ROUTES = [
2324
{
@@ -70,6 +71,7 @@ export const Sidebar: FC<SidebarProps> = ({ backend, ...navigationProps }) => {
7071
const { isLeaveInstanceAllowed } = useLeaveInstancePermission(navigationProps);
7172
const { primaryBackend } = useAppConfigContext();
7273
const safeArea = useSafeAreaInsets();
74+
const { handleToggleShareModal } = useShareButton();
7375

7476
const isLeaveInstanceShown =
7577
!primaryBackend && isLeaveInstanceAllowed && !currentInstanceConfig?.customizations?.menuHideLeaveButton;
@@ -85,20 +87,25 @@ export const Sidebar: FC<SidebarProps> = ({ backend, ...navigationProps }) => {
8587
});
8688
};
8789

90+
const paddingHelperStyle = { ...styles.paddingHHelper, width: shouldExpand ? undefined : 48 };
91+
92+
const homeShareLink = `${build_info.WEB_URL?.toLowerCase()}/${ROUTES.HOME}?backend=${backend}`;
93+
8894
return (
8995
<DrawerContentScrollView
9096
{...navigationProps}
9197
contentContainerStyle={{
9298
padding: 0,
9399
paddingTop: safeArea.top,
100+
alignItems: shouldExpand ? undefined : "center",
94101
}}
95102
style={[
96103
styles.container,
97104
{
98105
backgroundColor: colors.theme50,
99106
paddingHorizontal: shouldExpand ? spacing.md : ["ios", "android"].includes(Platform.OS) ? 0 : spacing.sm,
100107
width: "100%",
101-
paddingTop: breakpoints.isDesktop ? 18 : undefined,
108+
paddingTop: shouldExpand ? spacing.lg : spacing.xl,
102109
},
103110
]}
104111
>
@@ -139,7 +146,7 @@ export const Sidebar: FC<SidebarProps> = ({ backend, ...navigationProps }) => {
139146
justifyContent="flex-start"
140147
icon={icon}
141148
text={shouldExpand ? t(nameKey) : undefined}
142-
style={{ ...styles.button, ...styles.paddingHHelper }}
149+
style={{ ...styles.button, ...paddingHelperStyle }}
143150
/>
144151
</Link>
145152
);
@@ -149,7 +156,7 @@ export const Sidebar: FC<SidebarProps> = ({ backend, ...navigationProps }) => {
149156
<View style={styles.separatorContainer}>
150157
<Separator />
151158
</View>
152-
{Number(currentInstanceConfig?.customizations?.menuExternalLinks?.length) > 0 && (
159+
{Number(currentInstanceConfig?.customizations?.menuExternalLinks?.length) > 0 && shouldExpand && (
153160
<>
154161
{currentInstanceConfig?.customizations?.menuExternalLinks?.map(({ label, url }) => (
155162
<React.Fragment key={url}>
@@ -162,15 +169,15 @@ export const Sidebar: FC<SidebarProps> = ({ backend, ...navigationProps }) => {
162169
justifyContent="flex-start"
163170
icon={"External-Link"}
164171
text={label}
165-
style={{ ...styles.button, ...styles.paddingHHelper, width: "100%" }}
172+
style={{ ...styles.button, ...paddingHelperStyle, width: "100%" }}
166173
/>
167174
) : (
168175
<Link target="_blank" rel="noreferrer noopener" href={url} asChild={Platform.OS !== "web"}>
169176
<Button
170177
justifyContent="flex-start"
171178
icon={"External-Link"}
172179
text={shouldExpand ? label : undefined}
173-
style={{ ...styles.button, ...styles.paddingHHelper, width: "100%" }}
180+
style={{ ...styles.button, ...paddingHelperStyle, width: "100%" }}
174181
/>
175182
</Link>
176183
)}
@@ -182,19 +189,26 @@ export const Sidebar: FC<SidebarProps> = ({ backend, ...navigationProps }) => {
182189
</>
183190
)}
184191
<View style={styles.routesContainer}>
192+
<Button
193+
justifyContent="flex-start"
194+
onPress={() => handleToggleShareModal({ staticHeaderKey: "shareVideoSite", staticLink: homeShareLink })}
195+
icon={"Share"}
196+
text={shouldExpand ? t("shareAppURL") : undefined}
197+
style={paddingHelperStyle}
198+
/>
185199
<Button
186200
justifyContent="flex-start"
187201
onPress={toggleScheme}
188202
icon={isDarkMode ? "Light-mode" : "Dark-mode"}
189203
text={shouldExpand ? t(isDarkMode ? "lightMode" : "darkMode") : undefined}
190-
style={styles.paddingHHelper}
204+
style={paddingHelperStyle}
191205
/>
192206
<Button
193207
justifyContent="flex-start"
194208
onPress={handleOpenSettings}
195209
icon="Settings"
196210
text={shouldExpand ? t("settingsPageTitle") : undefined}
197-
style={styles.paddingHHelper}
211+
style={paddingHelperStyle}
198212
/>
199213
{isLeaveInstanceShown && (
200214
<Button
@@ -203,7 +217,7 @@ export const Sidebar: FC<SidebarProps> = ({ backend, ...navigationProps }) => {
203217
contrast="none"
204218
icon="Exit"
205219
text={shouldExpand ? t("leaveSite") : undefined}
206-
style={styles.paddingHHelper}
220+
style={paddingHelperStyle}
207221
/>
208222
)}
209223
</View>
@@ -217,6 +231,7 @@ const styles = StyleSheet.create({
217231
paddingVertical: 6,
218232
},
219233
container: {
234+
paddingBottom: 8,
220235
paddingTop: 8,
221236
},
222237
expandedInstanceInfo: {
@@ -229,8 +244,8 @@ const styles = StyleSheet.create({
229244
},
230245
paddingHHelper: {
231246
height: 48,
232-
paddingHorizontal: ["ios", "android"].includes(Platform.OS) ? 8 : undefined,
247+
paddingHorizontal: ["ios", "android"].includes(Platform.OS) ? spacing.md : undefined,
233248
},
234249
routesContainer: { gap: 4 },
235-
separatorContainer: { paddingVertical: spacing.sm },
250+
separatorContainer: { paddingVertical: spacing.sm, width: "100%" },
236251
});

‎OwnTube.tv/components/VideoControlsOverlay/components/modals/Share/Share.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,15 @@ import { getHumanReadableDuration } from "../../../../../utils";
1515
import { useVideoLink, useViewHistory } from "../../../../../hooks";
1616
import { ROUTES } from "../../../../../types";
1717
import { QRCodeSection } from "../../../../../components";
18+
import Constants from "expo-constants";
1819

1920
interface ShareProps {
2021
onClose: () => void;
2122
titleKey: string;
23+
staticLink?: string;
2224
}
2325

24-
const Share = ({ onClose, titleKey }: ShareProps) => {
26+
const Share = ({ onClose, titleKey, staticLink }: ShareProps) => {
2527
const { t } = useTranslation();
2628
const { colors } = useTheme();
2729
const params = useGlobalSearchParams();
@@ -50,9 +52,13 @@ const Share = ({ onClose, titleKey }: ShareProps) => {
5052

5153
return (
5254
<Animated.View entering={SlideInUp} exiting={SlideOutUp} style={styles.animatedContainer} pointerEvents="box-none">
53-
<ModalContainer onClose={onClose} title={t(titleKey)} containerStyle={styles.modalContainer}>
55+
<ModalContainer
56+
onClose={onClose}
57+
title={t(titleKey, { appName: Constants.expoConfig?.name })}
58+
containerStyle={styles.modalContainer}
59+
>
5460
<ScrollView>
55-
<Input buttonText={copyButtonText} readOnly value={link} handleButtonPress={handleCopy} />
61+
<Input buttonText={copyButtonText} readOnly value={staticLink || link} handleButtonPress={handleCopy} />
5662
<Spacer height={spacing.xl} />
5763
{isTimestampShown && (
5864
<>

‎OwnTube.tv/components/VideoView/VideoView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ const VideoView = ({
133133

134134
if (currentTimeInt % 5 === 0 && currentTimeInt !== lastReportedTime.current) {
135135
lastReportedTime.current = currentTimeInt;
136-
postVideoView({ videoId: videoData?.uuid, currentTime });
136+
postVideoView({ videoId: videoData?.uuid, currentTime: currentTimeInt });
137137
}
138138
}, [currentTime]);
139139

‎OwnTube.tv/components/VideoView/VideoView.web.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ const VideoView = ({
261261

262262
if (currentTimeInt % 5 === 0 && currentTimeInt !== lastReportedTime.current) {
263263
lastReportedTime.current = currentTimeInt;
264-
postVideoView({ videoId: videoData?.uuid, currentTime: position });
264+
postVideoView({ videoId: videoData?.uuid, currentTime: currentTimeInt });
265265
}
266266
}, [playbackStatus.position]);
267267

‎OwnTube.tv/components/ViewHistory.tsx‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { ROUTES } from "../types";
1919
import { useFullScreenModalContext } from "../contexts";
2020
import { EmptyPage } from "./EmptyPage";
2121
import { InfoFooter } from "./InfoFooter";
22+
import { useSafeAreaInsets } from "react-native-safe-area-context";
2223

2324
export const ViewHistory = () => {
2425
const { t } = useTranslation();
@@ -31,6 +32,7 @@ export const ViewHistory = () => {
3132
} = useViewHistory({ backendToFilter: backend });
3233
const { isMobile } = useBreakpoints();
3334
const { colors } = useTheme();
35+
const { top } = useSafeAreaInsets();
3436

3537
const { toggleModal, setContent } = useFullScreenModalContext();
3638

@@ -87,35 +89,39 @@ export const ViewHistory = () => {
8789
}
8890

8991
return (
90-
<>
91-
<Screen style={{ paddingHorizontal: isMobile ? spacing.sm : spacing.xl, ...styles.screenContainer }}>
92-
<View style={styles.headerContainer}>
93-
<Typography
94-
fontSize={isMobile ? "sizeXL" : "sizeXXL"}
95-
fontWeight="ExtraBold"
96-
color={colors.theme900}
97-
style={styles.header}
98-
>
99-
{t("yourWatchHistory")}
92+
<Screen
93+
style={{
94+
paddingHorizontal: isMobile ? spacing.sm : spacing.xl,
95+
...styles.screenContainer,
96+
paddingTop: spacing.xl + top,
97+
}}
98+
>
99+
<View style={styles.headerContainer}>
100+
<Typography
101+
fontSize={isMobile ? "sizeXL" : "sizeXXL"}
102+
fontWeight="ExtraBold"
103+
color={colors.theme900}
104+
style={styles.header}
105+
>
106+
{t("yourWatchHistory")}
107+
</Typography>
108+
<Button icon="Trash" onPress={handleClearConfirmation} text={t("clearSiteHistory")} />
109+
</View>
110+
<Spacer height={spacing.xl} />
111+
<SectionList
112+
style={styles.sectionListContainer}
113+
renderItem={renderItem}
114+
sections={sections}
115+
renderSectionHeader={({ section: { titleKey } }) => (
116+
<Typography style={styles.sectionHeader} color={colors.theme900} fontWeight="Bold" fontSize="sizeLg">
117+
{t(titleKey)}
100118
</Typography>
101-
<Button icon="Trash" onPress={handleClearConfirmation} text={t("clearSiteHistory")} />
102-
</View>
103-
<Spacer height={spacing.xl} />
104-
<SectionList
105-
style={styles.sectionListContainer}
106-
renderItem={renderItem}
107-
sections={sections}
108-
renderSectionHeader={({ section: { titleKey } }) => (
109-
<Typography style={styles.sectionHeader} color={colors.theme900} fontWeight="Bold" fontSize="sizeLg">
110-
{t(titleKey)}
111-
</Typography>
112-
)}
113-
ItemSeparatorComponent={() => <Spacer height={spacing.xl} />}
114-
renderSectionFooter={() => <Spacer height={spacing.xxl} />}
115-
/>
116-
<InfoFooter />
117-
</Screen>
118-
</>
119+
)}
120+
ItemSeparatorComponent={() => <Spacer height={spacing.xl} />}
121+
renderSectionFooter={() => <Spacer height={spacing.xxl} />}
122+
/>
123+
<InfoFooter />
124+
</Screen>
119125
);
120126
};
121127

‎OwnTube.tv/global.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,11 @@ select {
2525
outline-offset: 4px;
2626
border-radius: 8px;
2727
}
28+
29+
* {
30+
scrollbar-width: none;
31+
}
32+
33+
*::-webkit-scrollbar {
34+
display: none; /* Safari and Chrome */
35+
}

0 commit comments

Comments
 (0)