36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import React, { useContext, useEffect, useRef, useState } from "react";
|
|
import Hls from "hls.js";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
import "plyr/dist/plyr.css";
|
|
import { VideoPlayerContext } from "./VideoPlayer";
|
|
export const LoadingOverlay = () => {
|
|
const { loadingProgress } = useContext(VideoPlayerContext);
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm z-10">
|
|
<div className="text-white text-center">
|
|
<motion.div
|
|
animate={{ rotate: 360 }}
|
|
transition={{
|
|
duration: 1,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
className="w-12 h-12 border-4 border-white border-t-transparent rounded-full mb-4"
|
|
/>
|
|
<p className="text-sm font-medium">
|
|
{loadingProgress > 0
|
|
? `加载中... ${loadingProgress}%`
|
|
: "准备中..."}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
export default LoadingOverlay;
|