Refine neodb cards

Added card for games

src/components/Timeline/Shared/Card/Neodb.tsx

@@ -17,7 +17,15 @@ export const CardNeodb: React.FC<Props> = ({ card }) => {
   const { colors } = useTheme()
 
   const segments = Linking.parse(card.url).path?.split('/')
-  if (!segments || !(segments[0] === 'movie' || segments[0] === 'book' || segments[0] === 'tv'))
+  if (
+    !segments ||
+    !(
+      segments[0] === 'movie' ||
+      segments[0] === 'book' ||
+      (segments[0] === 'tv' && segments[1] !== 'season') ||
+      segments[0] === 'game'
+    )
+  )
     return null
 
   const [headingLines, setHeadingLines] = useState(3)
@@ -26,19 +34,18 @@ export const CardNeodb: React.FC<Props> = ({ card }) => {
 
   if (!data) return null
 
-  const pressableProps = {
+  const Content = ({ heading, details }: { heading: string[]; details: string[] }) => (
-    style: {
+    <Pressable
+      style={{
         marginTop: StyleConstants.Spacing.M,
         backgroundColor: colors.shimmerDefault,
         borderRadius: StyleConstants.BorderRadius,
         padding: StyleConstants.Spacing.S,
-      flexDirection: 'row' as 'row'
+        flexDirection: 'row'
-    },
+      }}
-    onPress: () => openLink(card.url)
+      onPress={() => openLink(card.url)}
-  }
+    >
-  const contentProps = { style: { flex: 1, gap: StyleConstants.Spacing.S } }
+      {data.cover_image_url ? (
-
-  const itemImage = data.cover_image_url ? (
         <GracefullyImage
           sources={{ default: { uri: data.cover_image_url } }}
           dimension={{
@@ -49,40 +56,36 @@ export const CardNeodb: React.FC<Props> = ({ card }) => {
           imageStyle={{ borderRadius: StyleConstants.BorderRadius / 2 }}
           dim
         />
-  ) : null
+      ) : null}
-  const itemHeading = (value: string) => (
+      <View style={{ flex: 1, gap: StyleConstants.Spacing.S, justifyContent: 'space-between' }}>
+        <View style={{ gap: StyleConstants.Spacing.S }}>
           <CustomText
             fontStyle='S'
             fontWeight='Bold'
             style={{ color: colors.primaryDefault }}
             numberOfLines={3}
-      children={value}
             onTextLayout={({ nativeEvent }) => setHeadingLines(nativeEvent.lines.length)}
+            children={heading.filter(d => d).join(' ')}
           />
-  )
+          <Rating rating={data.rating / 2} />
-  const itemDetails = (value: string) => (
+        </View>
+
         <CustomText
           fontStyle='S'
           style={{ color: colors.secondary }}
           numberOfLines={4 - headingLines}
-      children={value}
+          children={details.filter(d => d).join(' / ')}
         />
+      </View>
+    </Pressable>
   )
 
   switch (segments[0]) {
     case 'movie':
       return (
-        <Pressable {...pressableProps}>
+        <Content
-          {itemImage}
+          heading={[data.title, data.orig_title, data.year ? `(${data.year})` : null]}
-          <View {...contentProps}>
+          details={[
-            {itemHeading(
-              [data.title, data.orig_title, data.year ? `(${data.year})` : null]
-                .filter(d => d)
-                .join(' ')
-            )}
-            <Rating rating={data.rating / 2} />
-            {itemDetails(
-              [
             data.duration
               ? parseInt(data.duration).toString() === data.duration
                 ? `${data.duration}分钟`
@@ -91,56 +94,44 @@ export const CardNeodb: React.FC<Props> = ({ card }) => {
             data.area?.join(' '),
             data.genre?.join(' '),
             data.director?.join(' ')
-              ]
+          ]}
-                .filter(d => d)
+        />
-                .join(' / ')
-            )}
-          </View>
-        </Pressable>
       )
     case 'book':
       return (
-        <Pressable {...pressableProps}>
+        <Content
-          {itemImage}
+          heading={[data.title]}
-          <View {...contentProps}>
+          details={[
-            {itemHeading(data.title)}
-            <Rating rating={data.rating / 2} />
-            {itemDetails(
-              [
             data.author?.join(' '),
             data.pages ? `${data.pages}页` : null,
             data.language,
             data.pub_house
-              ]
+          ]}
-                .filter(d => d)
+        />
-                .join(' / ')
-            )}
-          </View>
-        </Pressable>
       )
     case 'tv':
       return (
-        <Pressable {...pressableProps}>
+        <Content
-          {itemImage}
+          heading={[data.title, data.orig_title, data.year ? `(${data.year})` : null]}
-          <View {...contentProps}>
+          details={[
-            {itemHeading(
-              [data.title, data.orig_title, data.year ? `(${data.year})` : null]
-                .filter(d => d)
-                .join(' ')
-            )}
-            <Rating rating={data.rating / 2} />
-            {itemDetails(
-              [
             data.season_count ? `共${data.season_count}季` : null,
             data.area?.join(' '),
             data.genre?.join(' '),
             data.director?.join(' ')
-              ]
+          ]}
-                .filter(d => d)
+        />
-                .join(' / ')
+      )
-            )}
+    case 'game':
-          </View>
+      return (
-        </Pressable>
+        <Content
+          heading={[data.title]}
+          details={[
+            data.genre?.join(' '),
+            data.developer?.join(' '),
+            data.platform?.join(' '),
+            data.release_date
+          ]}
+        />
       )
     default:
       return null

src/components/Timeline/Shared/Card/index.tsx

@@ -4,6 +4,7 @@ import openLink from '@components/openLink'
 import CustomText from '@components/Text'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
+import { isDevelopment } from '@utils/helpers/checkEnvironment'
 import { urlMatcher } from '@utils/helpers/urlMatcher'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { useAccountQuery } from '@utils/queryHooks/account'
@@ -27,8 +28,9 @@ const TimelineCard: React.FC = () => {
 
   const { i18n } = useTranslation()
   if (
-    status.card.url.includes('://neodb.social/') &&
+    (status.card.url.includes('://neodb.social/') &&
-    i18n.language.toLowerCase().startsWith('zh-hans')
+      i18n.language.toLowerCase().startsWith('zh-hans')) ||
+    isDevelopment
   ) {
     return <CardNeodb card={status.card} />
   }