将视频页的瀑布流修改为feed流

EOEFANS · Jan 7, 2023 · 827d028 · 827d028
1 parent 23aab6c
commit 827d028
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 134 deletions.
diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx
@@ -72,3 +72,35 @@ export default memo(function Image({
     </InView>
   );
 });
+
+export function ImageBasic({
+  url,
+  fallbackUrl = DefaultFallbackUrl,
+  observer,
+  callback,
+  children,
+}: Omit<ImageProps, "width" | "height"> & {
+  children?: ReactElement;
+}) {
+  const res = useLoading(url),
+    { isLoaded, success } = res,
+    real_fallback_url = fallbackUrl || DefaultFallbackUrl;
+  const once_callback = useCallback(Once(callback!!), []);
+  return (
+    <InView>
+      {({ inView, ref, entry }) => (
+        <div ref={ref} className={styles.imgWrapper}>
+          <img
+            src={isLoaded && success ? url : real_fallback_url}
+            style={{
+              opacity: isLoaded ? 1.0 : 0.09,
+            }}
+            alt=''
+          />
+          <>{observer && inView && once_callback(inView)}</>
+          {children}
+        </div>
+      )}
+    </InView>
+  );
+}
diff --git a/src/index.less b/src/index.less
@@ -4,17 +4,17 @@
     margin: 0;
 }
 
-.feedContainer {
-    margin: 0 auto;
-    max-width: 1200px;
-    display: flex;
-    align-items: flex-start;
-    position: relative;
-    width: 100%;
+// .feedContainer {
+//     margin: 0 auto;
+//     // max-width: 1200px;
+//     display: flex;
+//     align-items: flex-start;
+//     position: relative;
+//     width: 100%;
 
-    .element-item {
-        min-width: 200px;
-        box-sizing: border-box;
-        padding: 0 5px;
-    }
-}
+//     .element-item {
+//         min-width: 200px;
+//         box-sizing: border-box;
+//         padding: 0 5px;
+//     }
+// }
diff --git a/src/routers/video/index.tsx b/src/routers/video/index.tsx
@@ -3,7 +3,7 @@ export default function VideoPage() {
   return (
     <>
       <h1>videopage</h1>
-      {/* <VideoMasonry /> */}
+      <VideoMasonry />
     </>
   );
 }
diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx
@@ -8,6 +8,7 @@ import {
   ImageSize,
 } from "@components/image/tool";
 import { Masonry as Masonic_masonry } from "masonic";
+import Grid from "@mui/material/Unstable_Grid2";
 import ImageShouldResizeProview from "@components/proview/imageSize";
 import { VideoRouterImageCard } from "./masonryItem";
 /**
@@ -50,13 +51,13 @@ export default function VideoMasonry(props: any) {
               "face"
             );
 
-          if (imageSize.success === true) {
-            return {
-              ...itemRes,
-              width: order_width,
-              height: getResizeHeight(imageSize, order_width),
-            };
-          }
+          // if (imageSize.success === true) {
+          //   return {
+          //     ...itemRes,
+          //     width: order_width,
+          //     height: Math.floor((order_width * 3) / 4),
+          //   };
+          // }
           return itemRes;
         }),
       ]);
@@ -66,14 +67,22 @@ export default function VideoMasonry(props: any) {
   return (
     <div className='feedContainer'>
       <ImageShouldResizeProview>
-        <Masonic_masonry
-          items={lists}
-          columnWidth={order_width}
-          rowGutter={10}
-          maxColumnCount={5}
-          render={VideoRouterImageCard}
-          overscanBy={Infinity}
-        />
+        <Grid
+          container
+          spacing={2}
+          columns={{
+            lg: 10,
+            md: 8,
+            sm: 6,
+            xs: 4,
+          }}
+        >
+          {lists.map((item, index) => (
+            <Grid key={index} xs={2}>
+              <VideoRouterImageCard data={item} />
+            </Grid>
+          ))}
+        </Grid>
       </ImageShouldResizeProview>
     </div>
   );

diff --git a/src/routers/video/masonryItem.tsx b/src/routers/video/masonryItem.tsx
@@ -1,4 +1,4 @@
-import Image from "@components/image";
+import { ImageBasic } from "@components/image";
 import { FC } from "react";
 import SlowMotionVideoSharpIcon from "@mui/icons-material/SlowMotionVideoSharp";
 import SubjectSharpIcon from "@mui/icons-material/SubjectSharp";
@@ -16,14 +16,14 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
 }) => {
   const { pic, bvid } = data;
   return (
-    <section className='element-item'>
+    <section className={styles["video-section"]}>
       <Link
         target='_blank'
         href={`https://www.bilibili.com/video/${bvid}`}
         underline='none'
         color='inherit'
       >
-        <Image
+        <ImageBasic
           url={pic}
           {...Omit(
             data,
@@ -43,7 +43,7 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
           )}
         >
           <VideoData {...Pick(data, "view", "danmaku", "duration")} />
-        </Image>
+        </ImageBasic>
       </Link>
       <VideoInfo
         {...Pick(
@@ -70,11 +70,11 @@ const VideoData: FC<
       <div className={styles["video-data-left"]}>
         <span title='播放量'>
           <SlowMotionVideoSharpIcon fontSize='small' />
-          {view}
+          {getFixedNumber(view)}
         </span>
         <span title='弹幕数'>
           <SubjectSharpIcon fontSize='small' />
-          {danmaku}
+          {getFixedNumber(danmaku)}
         </span>
       </div>
       <span title='视频时长'>{getVideoTime(duration)}</span>
@@ -132,7 +132,6 @@ const VideoInfo: FC<
     </div>
   );
 };
-// 1-6 todo：写完视频页面展示瀑布图
 
 export const CoinIcon: FC<{
   height: number | string;