挑战用React封装100个组件【008】

项目地址
https://github.com/hismeyy/react-component-100

组件描述

这次的组件有点简单，这个卡片是可以控制视频播放的，用于展示一些比较小的视频动画。

样式展示

代码展示

VideoCard.tsx

js 复制代码

import { useRef, useState } from 'react'
import './VideoCard.css'

interface VideoCardProps {
    videoSrc: string;            
    title: string;                
    onMoreClick?: () => void;      
}

const VideoCard = ({ 
    videoSrc, 
    title, 
    onMoreClick
}: VideoCardProps) => {
    const videoRef = useRef<HTMLVideoElement>(null)
    const [isPlaying, setIsPlaying] = useState(false)

    const togglePlay = () => {
        if (videoRef.current) {
            if (isPlaying) {
                videoRef.current.pause()
            } else {
                videoRef.current.play()
            }
            setIsPlaying(!isPlaying)
        }
    }

    const handleVideoEnded = () => {
        setIsPlaying(false)
    }

    return (
        <div className="video-card">
            <div className="video">
                <video 
                    ref={videoRef}
                    src={videoSrc}
                    onEnded={handleVideoEnded}
                ></video>
            </div>
            <div className='line'></div>
            <div className='info'>
                <div className='video-info'>
                    <div className="title">{title}</div>
                </div>
                <div className='video-functions'>
                    <button className='play' onClick={togglePlay}>
                        {isPlaying ? '暂停' : '播放'}
                    </button>
                    <button className='more' onClick={onMoreClick}>
                        更多
                    </button>
                </div>
            </div>
        </div>
    )
}

export default VideoCard

VideoCard.css

js 复制代码

.video-card{
    width: 240px;
    height: 95px;
    box-sizing: border-box;
    background-color: #FEECBA;
    border-radius: 20px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 5px 5px 5px 15px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1)
}

.video-card .video{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: pink;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center
}

.video-card .video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card .line{
    width: 2px;
    height: 60px;
    background-color: rgb(211, 211, 211);
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 2px;
}

.video-card .info{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.video-card .info .video-info{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #4d4d4d;
}

.video-card .info .video-functions{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.video-card .info .video-functions button{
    all: unset;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    background-color: #4d4d4d;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.video-card .info .video-functions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.video-card .info .video-functions button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.video-card .info .video-functions button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%) scale(0);
    border-radius: inherit;
    transition: transform 0.3s ease;
}

.video-card .info .video-functions button:active::after {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
}

.video-card .info .video-functions button:first-child{
    background-color: #b57bf8;
}

.video-card .info .video-functions button:last-child{
    background-color: #f08a5d;
}

使用

App.tsx

js 复制代码

import VideoCard from './components/card/videoCard01/VideoCard'
import './App.css'

function App() {
  const handleMoreClick = () => {
    console.log('查看更多信息');
  };

  return (
    <div className="App">
      <VideoCard
        videoSrc="https://www.w3schools.com/html/mov_bbb.mp4"
        title="萌宠日常"
        onMoreClick={handleMoreClick}
      />
    </div>
  );
}

export default App;