Merge pull request #291 from Crossbell-Box/develop

Develop

Author: dohooo

.changeset/curvy-glasses-try.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Fixed styles problem.

.changeset/weak-flowers-lick.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Display the long content normaly.

src/components/BlockchainInfoIcon.tsx

@@ -72,7 +72,7 @@ export const BlockchainInfoIcon: FC<Props> = (props) => {
   return (
     <>
       <TouchableWithoutFeedback onPress={openModal}>
-        <ShieldCheck color="$green10" width={size}/>
+        <ShieldCheck color="$green10" size={size}/>
       </TouchableWithoutFeedback>
       <ModalWithFadeAnimation
         isVisible={isModalVisible}

src/components/CommentItem.tsx

@@ -196,7 +196,7 @@ export const CommentItem: React.FC<CommentItemProps> = (props) => {
             <Paragraph size={"$4"}>
               {comment?.metadata?.content?.content}
             </Paragraph>
-            <XStack alignItems="center">
+            <XStack alignItems="center" marginTop={"$1"}>
               <Text color={"$colorSubtitle"}>
                 {commonI18n.t("ago", {
                   time: date.dayjs
@@ -208,9 +208,7 @@ export const CommentItem: React.FC<CommentItemProps> = (props) => {
                 })}
                 {" · "}
               </Text>
-              <Stack height={22} alignItems="center">
-                <BlockchainInfoIcon size={16} character={comment?.character} page={comment?.toNote}/>
-              </Stack>
+              <BlockchainInfoIcon size={16} character={comment?.character} page={comment?.toNote}/>
             </XStack>
           </YStack>
 

src/components/HomeTabBar.tsx

@@ -96,18 +96,10 @@ export const HomeTabBar: FC<BottomTabBarProps> = (props) => {
         width={"95%"}
         height={height}
         position="absolute"
+        borderRadius={100}
+        overflow="hidden"
       >
-        <Stack
-          overflow="hidden"
-          backgroundColor={"rgba(50, 50, 50, 0.4)"}
-          borderRadius={100}
-          style={StyleSheet.absoluteFill}
-          width={"100%"}
-          height={"100%"}
-          position="absolute"
-        >
-          <BlurView tint="dark" intensity={30} style={StyleSheet.absoluteFillObject}/>
-        </Stack>
+        <BlurView tint="dark" intensity={30} experimentalBlurMethod="dimezisBlurView" style={StyleSheet.absoluteFillObject}/>
 
         <XStack zIndex={2} flex={1} alignItems="center">
           {[

src/pages/PostDetails/Content.tsx

@@ -17,14 +17,13 @@ import useGAWithPageStayTime from "@/hooks/ga/use-ga-with-page-stay-time";
 import { useCharacterId } from "@/hooks/use-character-id";
 import { useGlobalLoading } from "@/hooks/use-global-loading";
 import type { useScrollVisibilityHandler } from "@/hooks/use-scroll-visibility-handler";
-import type { RootStackParamList } from "@/navigation/types";
 import { useGetPage } from "@/queries/page";
-import type { ExpandedNote } from "@/types/crossbell";
 import { GA } from "@/utils/GA";
 import { getNoteSlug } from "@/utils/get-slug";
 import { isShortNotes } from "@/utils/is-short-notes";
 
 import { ShortsContentRenderer } from "./ShortsContentRenderer";
+import type { WebViewRendererInstance } from "./WebViewRenderer";
 import { WebViewRenderer } from "./WebViewRenderer";
 
 export interface Props {
@@ -77,6 +76,7 @@ export const Content = React.forwardRef<PostDetailsContentInstance, Props>((prop
   const globalLoading = useGlobalLoading();
   const toast = useToastController();
   const gaReadEventLogged = useRef(false);
+  const webviewRendererRef = useRef<WebViewRendererInstance>(null);
   const noteTitle = note?.metadata?.content?.title;
   const isShort = isShortNotes(note);
   const scrollIndicatorInsets = useMemo(() => ({
@@ -180,6 +180,7 @@ export const Content = React.forwardRef<PostDetailsContentInstance, Props>((prop
       {...scrollVisibilityHandler}
       scrollEventThrottle={16}
       style={styles.scrollView}
+      onScroll={e => webviewRendererRef.current?.handleScroll(e)}
       onMomentumScrollEnd={onMomentumScrollEnd}
       scrollIndicatorInsets={scrollIndicatorInsets}
       contentContainerStyle={{ paddingBottom: bottomBarHeight }}
@@ -196,6 +197,7 @@ export const Content = React.forwardRef<PostDetailsContentInstance, Props>((prop
           )
           : (
             <WebViewRenderer
+              ref={webviewRendererRef}
               postUri={postUri}
               headerContainerHeight={headerContainerHeight}
               bottomBarHeight={bottomBarHeight}

src/pages/PostDetails/WebViewRenderer.tsx

@@ -1,10 +1,12 @@
 import type { FC } from "react";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
+import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
 import { StyleSheet, useWindowDimensions } from "react-native";
 import DeviceInfo from "react-native-device-info";
-import Animated, { useSharedValue } from "react-native-reanimated";
+import Animated, { runOnUI, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import { Image } from "expo-image";
 import { Stack } from "tamagui";
 
 import { ImageGallery } from "@/components/ImageGallery";
@@ -18,18 +20,23 @@ import { javaScriptBeforeContentLoaded } from "./javascript-before-content";
 import { javaScriptContentLoaded } from "./javascript-content";
 import { Skeleton } from "./Skeleton";
 
-export const WebViewRenderer: FC<{
+interface Props {
   headerContainerHeight: number
   postUri?: string
   bottomBarHeight: number
-}> = ({ headerContainerHeight, postUri, bottomBarHeight }) => {
-  const { top } = useSafeAreaInsets();
+}
+
+export interface WebViewRendererInstance {
+  handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+}
+
+export const WebViewRenderer = forwardRef<WebViewRendererInstance, Props>(({ headerContainerHeight, postUri, bottomBarHeight }, ref) => {
+  const { top, bottom } = useSafeAreaInsets();
   const { width, height } = useWindowDimensions();
   const { isDarkMode, mode } = useThemeStore();
   const navigation = useRootNavigation();
   const headerHeight = top + headerContainerHeight;
   const contentLoaderDimensions = { width, height: height - headerHeight };
-  const [webviewHeight, setWebviewHeight] = useState(contentLoaderDimensions.height);
   const [userAgent, setUserAgent] = React.useState<string>(null);
   const [displayImageUris, setDisplayImageUris] = React.useState<string[]>([]);
   const webviewLoadingAnimValue = useSharedValue<number>(0);
@@ -70,7 +77,7 @@ export const WebViewRenderer: FC<{
       }
 
       if (height) {
-        setWebviewHeight(Math.max(height, contentLoaderDimensions.height));
+        setMaxContentHeight(Math.max(height, contentLoaderDimensions.height));
       }
 
       if (imageUrlArray) {
@@ -88,14 +95,31 @@ export const WebViewRenderer: FC<{
     });
   }, []);
 
+  const { height: screenHeight } = useWindowDimensions();
+  const [maxContentHeight, setMaxContentHeight] = useState<number>(screenHeight);
+  const animHeight = useSharedValue<number>(screenHeight);
+  const animatedStyle = useAnimatedStyle(() => ({ height: animHeight.value }), []);
+
+  const updateHeight = React.useCallback((offsetY) => {
+    "worklet";
+    const tolerance = 100;
+    const isReachBottom = (offsetY + bottomBarHeight + headerContainerHeight) > (animHeight.value / 2);
+    if (isReachBottom && animHeight.value < maxContentHeight) {
+      animHeight.value += tolerance;
+    }
+  }, [maxContentHeight, bottomBarHeight, headerContainerHeight]);
+
+  useImperativeHandle(ref, () => ({
+    handleScroll: (e) => {
+      runOnUI(updateHeight)(e.nativeEvent.contentOffset.y);
+    },
+  }), [updateHeight]);
+
   const closeModal = React.useCallback(() => setDisplayImageUris([]), []);
 
   return (
     <>
-      <Animated.ScrollView
-        contentContainerStyle={{ height: webviewHeight }}
-        scrollEventThrottle={16}
-      >
+      <Animated.View style={animatedStyle}>
         {postUri && userAgent && (
           <WebView
             progressBarShown={false}
@@ -118,7 +142,7 @@ export const WebViewRenderer: FC<{
             injectedJavaScriptBeforeContentLoaded={javaScriptBeforeContentLoaded(mode)}
           />
         )}
-      </Animated.ScrollView>
+      </Animated.View>
       {
         displayImageUris.length > 0 && (
           <ImageGallery
@@ -130,7 +154,7 @@ export const WebViewRenderer: FC<{
       }
     </>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {

src/pages/PostDetails/javascript-content.ts

@@ -39,8 +39,14 @@ export const javaScriptContentLoaded = (
         return false;
       }
 
+      const isDataUrl = src => src.startsWith('data:image');
       const clickedImageUrl = event.target.src || event.target.dataset.src;
-      const images = Array.from(document.getElementsByTagName('img')).filter(img => !isAvatar(img));
+
+      if (isDataUrl(clickedImageUrl)) {
+        return false;
+      }
+
+      const images = Array.from(document.getElementsByTagName('img')).filter(img => !isAvatar(img) && !isDataUrl(img.src));
       const allImageUrls = Array.from(images).map(img => img.src || img.dataset.src);
       const imageUrlSet = new Set([clickedImageUrl, ...allImageUrls]);
       const imageUrlArray = Array.from(imageUrlSet);