From f48f9c4e432829f385eb059277c364fd75923ca4 Mon Sep 17 00:00:00 2001 From: master1lan <278457198@qq.com> Date: Fri, 6 Jan 2023 15:30:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9video=E9=A1=B5=E9=9D=A2item?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/image/image.module.less | 4 +- src/components/image/imagetype.ts | 4 +- src/components/image/index.tsx | 2 +- src/components/masonry/index.tsx | 2 +- src/components/message/message.module.less | 5 +- src/components/proview/imageSize.tsx | 18 +++-- src/index.less | 2 +- src/routers/video/masonry.tsx | 6 +- src/routers/video/masonryItem.tsx | 74 +++++++++++++++--- src/routers/video/video.module.less | 89 ++++++++++++++++++---- src/routers/video/videotype.ts | 2 + src/utils/fetch/fetchtype.ts | 14 +++- src/utils/number/index.ts | 9 +++ 13 files changed, 184 insertions(+), 47 deletions(-) create mode 100644 src/utils/number/index.ts diff --git a/src/components/image/image.module.less b/src/components/image/image.module.less index a2a1b3e..82d5a72 100644 --- 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 index 92b77e0..0ae73ed 100644 --- 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 index 17e45f9..eb003c9 100644 --- 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 index 858c5b2..9395ec7 100644 --- a/src/components/masonry/index.tsx +++ b/src/components/masonry/index.tsx @@ -62,7 +62,7 @@ export default function Masonry() {
({ isShouldchangeSize: false, }); -//todo -//@ts-ignore -const ImageShouldResizeProview = ({ children }) => { +type ImageProviewProps = { + children: ReactElement; +}; +const ImageShouldResizeProview = ({ children }: ImageProviewProps) => { const [isShouldchangeSize, setIs] = useState(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 index 76b9b23..064e4ce 100644 --- 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 index 1454884..1588678 100644 --- 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([]); - 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 index 848c7e5..355ee0b 100644 --- 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 */} - + ); }; @@ -68,9 +82,19 @@ const VideoData: FC< ); }; const VideoInfo: FC< - Pick + 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 (

@@ -83,13 +107,45 @@ const VideoInfo: FC< {title}

-
- - {name} - {getrealtiveTime(updated_at * 1000)} - +
+
+ +
+
+ + {name} + {getrealtiveTime(updated_at * 1000)} + +
+ + {" "} + {getFixedNumber(like)} + + + {getFixedNumber(coin)} + + + {" "} + {getFixedNumber(favorite)} + +
+
); }; // 1-6 todo：写完视频页面展示瀑布图 + +export const CoinIcon: FC<{ + height: number | string; + width?: number | string; +}> = ({ height, width = height }) => ( + + + +); diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less index 060f8d1..47c3858 100644 --- 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; + } + + } } } + } } \ No newline at end of file diff --git a/src/routers/video/videotype.ts b/src/routers/video/videotype.ts index 712300d..bf86b73 100644 --- 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; diff --git a/src/utils/fetch/fetchtype.ts b/src/utils/fetch/fetchtype.ts index d42885f..c28e5c6 100644 --- a/src/utils/fetch/fetchtype.ts +++ b/src/utils/fetch/fetchtype.ts @@ -53,7 +53,7 @@ interface RFetchVideoResResult { */ bvid: string; /** - * @description 暂时不知道是啥 + * @description 视频AVID */ aid: number; /** @@ -62,7 +62,7 @@ interface RFetchVideoResResult { */ name: string; /** - * @description 暂时不知道是什么 + * @description 视频作者UID */ mid: number; /** @@ -71,7 +71,7 @@ interface RFetchVideoResResult { */ face: string; /** - * @description 暂时不知道是什么 + * @description 视频分区ID */ tid: number; /** @@ -111,7 +111,7 @@ interface RFetchVideoResResult { */ tag: string; /** - * @description 不知道是啥 + * @description 视频上传时间 */ pubdate: number; /** @@ -128,7 +128,13 @@ interface RFetchVideoResResult { * */ danmaku: number; + /** + * @description 视频评论条数 + */ reply: number; + /** + * @description 收藏数量 + */ favorite: number; /** * @description 视频硬币数 diff --git a/src/utils/number/index.ts b/src/utils/number/index.ts new file mode 100644 index 0000000..cc27b88 --- /dev/null +++ b/src/utils/number/index.ts @@ -0,0 +1,9 @@ +/** + * @description 给大数字进行缩减，如10000-》1.0w + */ +export default function getFixedNumber(number: number): number | string { + if (number > 10000) { + return (number / 10000).toFixed(1) + "w"; + } + return number; +}