修改video页面item

EOEFANS · Jan 6, 2023 · f48f9c4 · f48f9c4
1 parent e03b2e0
commit f48f9c4
Show file tree

Hide file tree

Showing 13 changed files with 184 additions and 47 deletions.
diff --git a/src/components/image/image.module.less b/src/components/image/image.module.less
@@ -9,9 +9,7 @@
         display: inline-block;
         object-fit: cover;
         transition: opacity .5s linear;
-        -webkit-transition: opacity .5s linear;
-        transition: transform .2s linear;
-        -webkit-transition: transform .2s linear;
+        transition: transform .3s linear;
 
         &:hover {
             transform: scale(1.1);

diff --git a/src/components/image/imagetype.ts b/src/components/image/imagetype.ts
@@ -15,8 +15,8 @@ export type ImageProps = {
   fallbackUrl?: string;
   /**
    * @description 图片默认宽度，因为自适应的原因最终效果可能大于该宽度
-   * @default 180
-   * @example 180
+   * @default 200
+   * @example 200
    */
   width?: number;
   /**

diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx
@@ -36,7 +36,7 @@ function useLoading(url: string) {
 
 export default memo(function Image({
   url,
-  width = 180,
+  width = 200,
   height,
   fallbackUrl = DefaultFallbackUrl,
   observer,

diff --git a/src/components/masonry/index.tsx b/src/components/masonry/index.tsx
@@ -62,7 +62,7 @@ export default function Masonry() {
       <div className='feedContainer'>
         <Masonic_masonry
           items={lists}
-          columnWidth={180}
+          columnWidth={200}
           rowGutter={10}
           columnGutter={10}
           maxColumnCount={5}

diff --git a/src/components/message/message.module.less b/src/components/message/message.module.less
@@ -1,15 +1,16 @@
 .MessageWrapper {
     position: fixed;
-    top: 10px;
+    top: 40%;
     left: 50%;
-    transform: translate(-50%, 0);
+    transform: translate(-50%, -50%);
     /* 消息提示的优先级应该是最高的！ */
     z-index: 9999;
 }
 
 .message {
     border-radius: 8px;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 10px;
+    background-color: #fff;
     padding: 12px 24px;
     margin-bottom: 10px;
     display: flex;

diff --git a/src/components/proview/imageSize.tsx b/src/components/proview/imageSize.tsx
@@ -1,18 +1,24 @@
-import { useContext, useState, createContext, useEffect } from "react";
+import {
+  useContext,
+  useState,
+  createContext,
+  useEffect,
+  ReactElement,
+} from "react";
 import { thorttleFn } from "@utils/index";
-export const image_order_width = 180;
+export const image_order_width = 200;
 
 const ImageContext = createContext<{ isShouldchangeSize: boolean }>({
   isShouldchangeSize: false,
 });
 
-//todo
-//@ts-ignore
-const ImageShouldResizeProview = ({ children }) => {
+type ImageProviewProps = {
+  children: ReactElement;
+};
+const ImageShouldResizeProview = ({ children }: ImageProviewProps) => {
   const [isShouldchangeSize, setIs] = useState<boolean>(false);
   useEffect(() => {
     const handleWindowResize = () => {
-      // console.log({ width: window.innerWidth });
       setIs(() => window.innerWidth < image_order_width * 2.5);
     };
     handleWindowResize();

diff --git a/src/index.less b/src/index.less
@@ -13,7 +13,7 @@
     width: 100%;
 
     .element-item {
-        min-width: 180px;
+        min-width: 200px;
         box-sizing: border-box;
         padding: 0 5px;
     }

diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx
@@ -15,7 +15,7 @@ import { VideoRouterImageCard } from "./masonryItem";
  */
 export default function VideoMasonry(props: any) {
   const [lists, setLists] = useState<VideoRouterImageCardType[]>([]);
-  const order_width = 180;
+  const order_width = 200;
   useEffect(() => {
     // 在内部定义fetchHandler，保证拿到的是同步的
     const fetchHandler = async () => {
@@ -45,7 +45,9 @@ export default function VideoMasonry(props: any) {
               "like",
               "updated_at",
               "danmaku",
-              "duration"
+              "duration",
+              "favorite",
+              "face"
             );
 
           if (imageSize.success === true) {

diff --git a/src/routers/video/masonryItem.tsx b/src/routers/video/masonryItem.tsx
@@ -2,11 +2,14 @@ import Image from "@components/image";
 import { FC } from "react";
 import SlowMotionVideoSharpIcon from "@mui/icons-material/SlowMotionVideoSharp";
 import SubjectSharpIcon from "@mui/icons-material/SubjectSharp";
+import ThumbUpSharpIcon from "@mui/icons-material/ThumbUpSharp";
+import FavoriteSharpIcon from "@mui/icons-material/FavoriteSharp";
 import Link from "@mui/material/Link";
 import { VideoRouterImageCardType } from "./videotype";
 import getrealtiveTime, { getVideoTime } from "@utils/time";
 import styles from "./video.module.less";
 import { Omit, Pick } from "@utils/index";
+import getFixedNumber from "../../utils/number/index";
 
 export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
   data,
@@ -39,11 +42,22 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
             "duration"
           )}
         >
-          {/* todo:lost tag */}
           <VideoData {...Pick(data, "view", "danmaku", "duration")} />
         </Image>
       </Link>
-      <VideoInfo {...Pick(data, "title", "name", "updated_at", "bvid")} />
+      <VideoInfo
+        {...Pick(
+          data,
+          "title",
+          "name",
+          "updated_at",
+          "bvid",
+          "coin",
+          "favorite",
+          "like",
+          "face"
+        )}
+      />
     </section>
   );
 };
@@ -68,9 +82,19 @@ const VideoData: FC<
   );
 };
 const VideoInfo: FC<
-  Pick<VideoRouterImageCardType, "title" | "name" | "updated_at" | "bvid">
+  Pick<
+    VideoRouterImageCardType,
+    | "title"
+    | "name"
+    | "updated_at"
+    | "bvid"
+    | "coin"
+    | "favorite"
+    | "like"
+    | "face"
+  >
 > = (props) => {
-  const { title, name, bvid, updated_at } = props;
+  const { title, name, bvid, updated_at, coin, like, favorite, face } = props;
   return (
     <div className={styles["video-info"]}>
       <p title={title}>
@@ -83,13 +107,45 @@ const VideoInfo: FC<
           {title}
         </Link>
       </p>
-      <div className={styles["video-up-info"]}>
-        <Link underline='none' color='inherit'>
-          <span title={name}>{name}</span>
-          <span>{getrealtiveTime(updated_at * 1000)}</span>
-        </Link>
+      <div className={styles["video-up"]}>
+        <div className={styles["video-up-face"]} title={`芝士${name}`}>
+          <img src={face} />
+        </div>
+        <div className={styles["video-up-desc"]}>
+          <Link underline='none' color='inherit'>
+            <span title={name}>{name}</span>
+            <span>{getrealtiveTime(updated_at * 1000)}</span>
+          </Link>
+          <div className={styles["video-up-desc-data"]}>
+            <span title='点赞数'>
+              <ThumbUpSharpIcon fontSize='small' htmlColor='#707070' />{" "}
+              {getFixedNumber(like)}
+            </span>
+            <span title='硬币数'>
+              <CoinIcon height={"1.25rem"} /> {getFixedNumber(coin)}
+            </span>
+            <span title='收藏数'>
+              <FavoriteSharpIcon fontSize='small' htmlColor='#707070' />{" "}
+              {getFixedNumber(favorite)}
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   );
 };
 // 1-6 todo：写完视频页面展示瀑布图
+
+export const CoinIcon: FC<{
+  height: number | string;
+  width?: number | string;
+}> = ({ height, width = height }) => (
+  <svg fill='none' viewBox='0 0 24 24' height={height} width={width}>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.25 4.75a.75.75 0 010 1.5h-2.5v1.29c1.117.125 2.062.539 2.761 1.253.849.867 1.239 2.077 1.239 3.457v.5a.75.75 0 01-1.5 0v-.5c0-1.105-.31-1.895-.81-2.407-.383-.39-.934-.678-1.69-.79V17a.75.75 0 01-1.5 0v-5.947c-.756.112-1.307.4-1.69.79-.5.512-.81 1.302-.81 2.407v.5a.75.75 0 01-1.5 0v-.5c0-1.38.39-2.59 1.239-3.457.7-.714 1.644-1.128 2.761-1.252V8.25h-2.5a.75.75 0 010-1.5h6.5z'
+      fill='#707070'
+    />
+  </svg>
+);
diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less
@@ -1,4 +1,10 @@
 .video-data {
+    transition: opacity .3s linear;
+
+    *:hover+& {
+        opacity: 0;
+    }
+
     position: absolute;
     left: 0;
     bottom: 0;
@@ -14,8 +20,8 @@
     font-size: 13px;
     font-weight: 400;
     background-image: linear-gradient(180deg,
-            rgba(0, 0, 0, 0) 0%,
-            rgba(0, 0, 0, .8) 100%);
+        rgba(0, 0, 0, 0) 0%,
+        rgba(0, 0, 0, .8) 100%);
 
     &-left {
         flex: 1;
@@ -36,6 +42,10 @@
 }
 
 .video-info {
+    &>*:not(:first-child) {
+        margin-top: 5px;
+    }
+
     &>p {
         color: #18191c;
         font-size: 15px;
@@ -49,29 +59,76 @@
 
     }
 
-    .video-up-info {
-        a {
-            font-size: 13px;
-            color: rgb(148, 153, 160);
-            cursor: pointer;
-            transition: color .2s linear;
+    .video-up {
+        display: flex;
+        align-items: stretch;
 
-            &:hover,
-            &:active {
-                color: #00aeec;
+        &>*:not(:first-child) {
+            margin-left: 5px;
+        }
+
+        &-face {
+            width: 40px;
+            height: 40px;
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                border-radius: 50%;
+                overflow: hidden;
             }
+        }
+
+        &-desc {
+            font-size: 13px;
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: space-between;
+            cursor: default;
 
-            &>span {
+            &-data {
+                display: flex;
+                flex-flow: row nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
-                word-break: break-all;
 
-                &:not(:last-of-type):after {
-                    content: '·';
-                    margin: 0 4px;
+                &>span {
+                    white-space: nowrap;
+                    display: flex;
+                    align-items: center;
+
+                    &:not(:first-of-type) {
+                        margin-left: 10px;
+                    }
                 }
+            }
+
+
+            a {
+
+                color: rgb(148, 153, 160);
+                cursor: pointer;
+                transition: color .2s linear;
 
+                &:hover,
+                &:active {
+                    color: #00aeec;
+                }
+
+                &>span {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    word-break: break-all;
+
+                    &:not(:last-of-type):after {
+                        content: '·';
+                        margin: 0 4px;
+                    }
+
+                }
             }
         }
+
     }
 }
diff --git a/src/routers/video/videotype.ts b/src/routers/video/videotype.ts
@@ -23,6 +23,8 @@ export type VideoRouterImageCardType = Pick<
   | "updated_at"
   | "danmaku"
   | "duration"
+  | "favorite"
+  | "face"
 > &
   Omit<ImageProps, "url">;