// index.tsx
import { useState } from 'react'
import './index.css'
let timer = null  //  遞增進度的定時器
let totalTime = 3000  // 假設(shè)視頻播放為3s
function App() {
    const [progress, setProgress] = useState(0)  // 進度
    const [isPlay, setIsPlay] = useState(false)  // 是否播放
    // setProgress的遞增邏輯
    const handlerProgress = pre => {
        if(pre < 100) return pre + 1;
        else {  
          alert('播放結(jié)束')
          return 0   // 播放結(jié)束，重新開始播放
        }
    }
    // 開始播放 && 暫停播放
    const handleVideo = () => {
        setIsPlay(!isPlay)
        isPlay
        ? clearInterval(timer)
        : timer = setInterval(() => setProgress(handlerProgress), totalTime / 100)
    }
    // 重播
    const replay = () => {
        setIsPlay(true)
        if(timer) clearInterval(timer);
        setProgress(0)
        timer = setInterval(() => setProgress(handlerProgress), totalTime / 100)
    }
    return (
        <div id="root">
            <button onClick={handleVideo}>{ isPlay ? '暫停' : '播放' }</button>
            <button onClick={replay}>重播</button>
            <div className="container">
                <div className="progress" style={{ width: `${progress}%` }}/>
            </div>
        </div>
    )
}

.container {
    height: 10px;
    border-radius: 5px;
    border: 1px solid black;
}
.progress {
    height: 100%;
    width: 0;
    background-color: red;
}

// index.jsx
import { useState } from 'react'
import './index.css'
let totalTime = 3000  // 假設(shè)視頻播放為3s
function App() {
    const [isPlay, setIsPlay] = useState(false)  // 是否播放
    const [count, setCount] = useState(0)  // 播放次數(shù)
    const [type, setType] = useState(0)   // 使用哪個動畫。0: @keyframes play; 1: @keyframes replay;
    // 暫停 && 播放
    const handleVideo = () => setIsPlay(!isPlay);
    // 重播
    const replay = () => {
        setIsPlay(true)
        setType(type ? 0 : 1)
    }
    // 動畫結(jié)束時觸發(fā)的事件
    const end = () => {
        setCount(count + 1)  // 播放次數(shù) +1
        replay()   // 重新開始播放
    }
    return (
        <div id="root">
            <button onClick={handleVideo}>{ isPlay ? '暫停' : '播放' }</button>
            <button onClick={replay}>重播</button>
            <span>{ `播放次數(shù)為：${count}` }</span>
            <div className="container">
                <div 
                    className={`progress ${isPlay ? 'play' : 'pause'}`} 
                    style={{
                        animationDuration: `${totalTime}ms`,
                        animationName: `${type ? 'replay' : 'play'}`
                    }}
                    onAnimationEnd={end}  // 動畫結(jié)束時的事件
                />
            </div>
        </div>
    )
}

@keyframes play {   
    to {
        width: 100%;
    }
}
@keyframes replay {
    to {
        width: 100%;
    }
}
.container {
    height: 10px;
    border-radius: 5px;
    border: 1px solid black;
}
.progress {
    height: 100%;
    width: 0;
    background-color: red;
    animation-timing-function: linear;
}
.progress.play {     /* 使animation動畫啟動 */
    animation-play-state: running;
}
.progress.pause {    /* 使animation動畫暫停 */
    animation-play-state: paused;
}

@keyframes play {     /* 通過transform來啟用GPU加速，跳過重排重繪階段 */
    0% {  
        transform: translateX(-50%) scaleX(0);  /* 用 scaleX 來代替 width */
    }
    to {
        transform: translateX(0) scaleX(1);
    }
}
@keyframes replay {
    0% {
        transform: translateX(-50%) scaleX(0);
    }
    to {
        transform: translateX(0) scaleX(1);
    }
}
.container {
    height: 10px;
    border-radius: 5px;
    border: 1px solid black;
}
.progress {
    height: 100%;
    width: 100%;   /* 初始寬度為100%，因為我們要對其縮放 */
    background-color: red;
    will-change: transform;   /* 通過will-change告知瀏覽器提前做好優(yōu)化準備 */
    animation-timing-function: linear;
}
.progress.play {    
    animation-play-state: running;
}
.progress.pause {   
    animation-play-state: paused;
}