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;