Merge pull request #57 from lrtlt/feature/ui-update

feat: UI update for live channels & introducing Stacks!
lrtlt · Jul 18, 2024 · 6d77e5e · 6d77e5e
2 parents 96e2a19 + 023d940
commit 6d77e5e
Show file tree

Hide file tree

Showing 25 changed files with 264 additions and 177 deletions.
diff --git a/app/Theme.ts b/app/Theme.ts
@@ -59,7 +59,7 @@ export const strings: Dictionary = {
   today: 'Šiandien',
   drawerMenu: 'NAUJIENOS',
   mainWindow: 'Pagrindinis',
-  tvProgramTitle: 'Tiesiogiai',
+  tvProgramTitle: 'Šiuo metu eteryje',
   tvProgram: 'PROGRAMA',
   tvProgramButtonText: 'VISA PROGRAMA',
   history: 'ISTORIJA',

diff --git a/app/components/article/article/ArticleComponent.tsx b/app/components/article/article/ArticleComponent.tsx
@@ -1,11 +1,11 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback} from 'react';
 import {View, StyleSheet, ViewStyle} from 'react-native';
 
 import CoverImage from '../../coverImage/CoverImage';
 import TouchableDebounce from '../../touchableDebounce/TouchableDebounce';
 import MediaIndicator from '../../mediaIndicator/MediaIndicator';
 
-import {getImageSizeForWidth, buildImageUri, buildArticleImageUri} from '../../../util/ImageUtil';
+import {buildImageUri, buildArticleImageUri, IMG_SIZE_M, IMG_SIZE_S} from '../../../util/ImageUtil';
 import {themeLight, useTheme} from '../../../Theme';
 import TextComponent from '../../text/Text';
 import {Article} from '../../../../Types';
@@ -39,10 +39,9 @@ const ArticleComponent: React.FC<React.PropsWithChildren<Props>> = ({
   style: styleProp,
   article,
   styleType,
-  dateEnabled,
+  dateEnabled = true,
   onPress,
 }) => {
-  const [dimensions, setDimensions] = useState({width: 0, height: 0});
   const {colors} = useTheme();
   const style = getArticleStyle(styleType);
 
@@ -81,16 +80,14 @@ const ArticleComponent: React.FC<React.PropsWithChildren<Props>> = ({
   );
 
   let imgUri;
-  if (dimensions.width > 0) {
-    if (article.img_path_prefix && article.img_path_postfix) {
-      imgUri = buildImageUri(
-        getImageSizeForWidth(dimensions.width),
-        article.img_path_prefix,
-        article.img_path_postfix,
-      );
-    } else if (article.photo) {
-      imgUri = buildArticleImageUri(getImageSizeForWidth(dimensions.width), article.photo);
-    }
+  if (article.img_path_prefix && article.img_path_postfix) {
+    imgUri = buildImageUri(
+      styleType === 'single' ? IMG_SIZE_M : IMG_SIZE_S,
+      article.img_path_prefix,
+      article.img_path_postfix,
+    );
+  } else if (article.photo) {
+    imgUri = buildArticleImageUri(styleType === 'single' ? IMG_SIZE_M : IMG_SIZE_S, article.photo);
   }
 
   return (
@@ -103,9 +100,6 @@ const ArticleComponent: React.FC<React.PropsWithChildren<Props>> = ({
               ...style.imageContainer,
               backgroundColor: colors.greyBackground,
               borderRadius: article.is_audio ? 8 : 0,
-            }}
-            onLayout={(event) => {
-              setDimensions(event.nativeEvent.layout);
             }}>
             <CoverImage
               style={style.image}
@@ -150,10 +144,6 @@ export default React.memo(ArticleComponent, (prevProps, nextProps) => {
   );
 });
 
-ArticleComponent.defaultProps = {
-  dateEnabled: true,
-};
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -162,7 +152,6 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: 'hidden',
   },
-
   imageContainer: {
     justifyContent: 'center',
     aspectRatio: 3 / 2,
@@ -194,8 +183,8 @@ const styles = StyleSheet.create({
     fontSize: 22,
   },
   subtitle: {
-    marginTop: 4,
-    fontSize: 14,
+    marginTop: 8,
+    fontSize: 13.5,
   },
   mediaIndicator: {
     position: 'absolute',
@@ -217,9 +206,6 @@ const styles = StyleSheet.create({
   badges: {
     paddingTop: 8,
   },
-  mediaIconContainer: {
-    paddingEnd: 8,
-  },
   listenCount: {
     position: 'absolute',
     bottom: 8,
@@ -229,20 +215,22 @@ const styles = StyleSheet.create({
 
 const stylesScroll = {
   ...styles,
+
   container: {
     ...styles.container,
     width: 280,
+    padding: 8,
   },
   title: {
     ...styles.title,
-    fontSize: 18,
+    fontSize: 17,
   },
 };
 
 const stylesMulti = {
   ...styles,
   title: {
     ...styles.title,
-    fontSize: 17,
+    fontSize: 16,
   },
 };
diff --git a/app/components/article/articleRow/ArticleRow.tsx b/app/components/article/articleRow/ArticleRow.tsx
@@ -4,6 +4,7 @@ import ArticleComponent, {ArticleStyleType} from '../article/ArticleComponent';
 import {Article} from '../../../../Types';
 import {SavedArticle} from '../../../redux/reducers/articleStorage';
 import MyScrollView from '../../MyScrollView/MyScrollView';
+import {Tiles} from '@grapp/stacks';
 
 //TODO calculate for bigger screens.
 const articleFitCount = 2;
@@ -35,7 +36,7 @@ const ArticleRow: React.FC<React.PropsWithChildren<Props>> = (props) => {
       data.map((a, i) => {
         return (
           <ArticleComponent
-            style={{...styles.article, ...props.articleStyle}}
+            style={{...props.articleStyle}}
             article={a as Article}
             onPress={onArticlePress}
             styleType={articleStyleType}
@@ -53,16 +54,17 @@ const ArticleRow: React.FC<React.PropsWithChildren<Props>> = (props) => {
       </MyScrollView>
     );
   } else {
-    return <View style={styles.container}>{content}</View>;
+    return (
+      <Tiles space={4} margin={2} columns={content.length} flex={'fluid'}>
+        {content}
+      </Tiles>
+    );
   }
 };
 
 export default ArticleRow;
 
 const styles = StyleSheet.create({
-  article: {
-    padding: 8,
-  },
   container: {
     flex: 1,
     justifyContent: 'center',

diff --git a/app/components/articleGallery/ArticleGallery.tsx b/app/components/articleGallery/ArticleGallery.tsx
@@ -2,11 +2,12 @@ import React, {useCallback} from 'react';
 import {View, StyleSheet} from 'react-native';
 import CoverImage from '../coverImage/CoverImage';
 import TouchableDebounce from '../touchableDebounce/TouchableDebounce';
-import {buildArticleImageUri, getImageSizeForWidth} from '../../util/ImageUtil';
+import {buildArticleImageUri, IMG_SIZE_M} from '../../util/ImageUtil';
 import {ArticlePhotoType} from '../../api/Types';
 import {checkEqual} from '../../util/LodashEqualityCheck';
 import TextComponent from '../text/Text';
 import {useTheme} from '../../Theme';
+import {Stack, Tiles} from '@grapp/stacks';
 
 const DEFAULT_ASPECT_RATIO = 1.5;
 
@@ -22,18 +23,14 @@ const getAspectRatio = (w_h: string | number) => {
   return DEFAULT_ASPECT_RATIO;
 };
 
-const PhotoComponent = (
-  photo: ArticlePhotoType,
-  width: number,
-  pressHandler?: (selectedPhoto: any) => void,
-) => {
+const PhotoComponent = (photo: ArticlePhotoType, pressHandler?: (selectedPhoto: any) => void) => {
   const {colors} = useTheme();
   return (
     <View
       style={{
         ...styles.imageContainer,
         backgroundColor: colors.photoBackground,
-        width,
+        flex: 1,
       }}>
       <TouchableDebounce
         style={styles.flex}
@@ -44,10 +41,9 @@ const PhotoComponent = (
           <CoverImage
             style={{
               ...styles.image,
-              width,
               aspectRatio: getAspectRatio(photo.w_h),
             }}
-            source={{uri: buildArticleImageUri(getImageSizeForWidth(width), photo.path)}}
+            source={{uri: buildArticleImageUri(IMG_SIZE_M, photo.path)}}
           />
         )}
       </TouchableDebounce>
@@ -57,7 +53,6 @@ const PhotoComponent = (
 
 const PhotoWithOverlayComponent = (
   photo: ArticlePhotoType,
-  width: number,
   pressHandler: (selectedPhoto: any) => void,
   count: number,
 ) => {
@@ -68,7 +63,7 @@ const PhotoWithOverlayComponent = (
   return (
     <TouchableDebounce onPress={onPressHandler}>
       <View style={styles.imageContainer}>
-        {PhotoComponent(photo, width)}
+        {PhotoComponent(photo)}
 
         <View style={styles.imageCountOverlay}>
           <TextComponent style={styles.imageCountOverlayText} fontFamily="SourceSansPro-SemiBold">
@@ -82,39 +77,30 @@ const PhotoWithOverlayComponent = (
 
 interface Props {
   data: ArticlePhotoType[];
-  expectedWidth: number;
   itemSelectHandler: (photo: {type: 'photo'; item: ArticlePhotoType}) => void;
 }
-const ArticleGallery: React.FC<React.PropsWithChildren<Props>> = ({
-  data,
-  expectedWidth,
-  itemSelectHandler,
-}) => {
+const ArticleGallery: React.FC<React.PropsWithChildren<Props>> = ({data, itemSelectHandler}) => {
   if (!data?.length) {
     return null;
   }
 
   return (
-    <View style={styles.container}>
-      {data.length > 0 && PhotoComponent(data[0], expectedWidth, itemSelectHandler)}
-      <View style={styles.row}>
-        {data.length > 1 && PhotoComponent(data[1], expectedWidth / 2, itemSelectHandler)}
-        <View style={styles.space} />
-        {data.length > 2 && PhotoComponent(data[2], expectedWidth / 2, itemSelectHandler)}
-      </View>
-      <View style={styles.row}>
-        {data.length > 3 && PhotoComponent(data[3], expectedWidth / 2, itemSelectHandler)}
-        <View style={styles.space} />
-        {data.length > 4 && PhotoComponent(data[4], expectedWidth / 2, itemSelectHandler)}
-      </View>
-      <View style={styles.space} />
-
+    <Stack space={4} paddingTop={8} paddingBottom={4}>
+      {data.length > 0 && PhotoComponent(data[0], itemSelectHandler)}
+      <Tiles space={4} columns={2} flex={'fluid'}>
+        {data.length > 1 && PhotoComponent(data[1], itemSelectHandler)}
+        {data.length > 2 && PhotoComponent(data[2], itemSelectHandler)}
+      </Tiles>
+      <Tiles space={4} columns={2} flex={'fluid'}>
+        {data.length > 3 && PhotoComponent(data[3], itemSelectHandler)}
+        {data.length > 4 && PhotoComponent(data[4], itemSelectHandler)}
+      </Tiles>
       {data[6]
-        ? PhotoWithOverlayComponent(data[5], expectedWidth, itemSelectHandler, data.length - 6)
+        ? PhotoWithOverlayComponent(data[5], itemSelectHandler, data.length - 6)
         : data[5]
-        ? PhotoComponent(data[5], expectedWidth, itemSelectHandler)
+        ? PhotoComponent(data[5], itemSelectHandler)
         : null}
-    </View>
+    </Stack>
   );
 };
 

diff --git a/app/components/logo/Logo.tsx b/app/components/logo/Logo.tsx
@@ -4,8 +4,8 @@ import {useSettings} from '../../settings/useSettings';
 import {useSelector} from 'react-redux';
 import {selectLogo} from '../../redux/selectors';
 import {SvgCss} from 'react-native-svg/css';
-import {LogoDark, LogoLight} from '../svg';
-import {themeDark} from '../../Theme';
+import {LRTLogo} from '../svg';
+import {themeDark, useTheme} from '../../Theme';
 
 interface Props {
   width?: number;
@@ -19,6 +19,7 @@ const LogoComponent: React.FC<React.PropsWithChildren<Props>> = ({
   useOnlyInternal = false,
 }) => {
   const {isDarkMode} = useSettings();
+  const {colors} = useTheme();
 
   const logo = useSelector(selectLogo);
 
@@ -30,11 +31,7 @@ const LogoComponent: React.FC<React.PropsWithChildren<Props>> = ({
     return <SvgCss xml={formattedSvg} width={width} height={height} />;
   }
 
-  return isDarkMode ? (
-    <LogoDark width={width} height={height} />
-  ) : (
-    <LogoLight width={width} height={height} />
-  );
+  return <LRTLogo height={height} color={colors.headerTint} />;
 };
 
 export default React.memo(LogoComponent);
diff --git a/app/components/moreArticlesButton/MoreArticlesButton.tsx b/app/components/moreArticlesButton/MoreArticlesButton.tsx
@@ -34,13 +34,13 @@ export default MoreArticlesButton;
 
 const styles = StyleSheet.create({
   container: {
-    height: 60,
+    height: 48,
     alignItems: 'center',
     justifyContent: 'center',
     margin: 8,
   },
   title: {
     padding: 8,
-    fontSize: 16,
+    fontSize: 14,
   },
 });
diff --git a/app/components/programItem/ProgramItem.tsx b/app/components/programItem/ProgramItem.tsx
@@ -123,6 +123,7 @@ const styles = StyleSheet.create({
   titleText: {
     paddingStart: 0,
     fontSize: 15,
+    letterSpacing: 0.1,
   },
   descriptionText: {
     paddingStart: 0,