57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import Hls from "../componets/hls";
|
|
import { M3UObject, parseM3u } from "../lib/parseM3u";
|
|
|
|
interface PlayerProps {
|
|
url: string;
|
|
};
|
|
|
|
function Player(props: PlayerProps) {
|
|
const videoRef = useRef<HTMLVideoElement>();
|
|
useEffect(() => {
|
|
videoRef.current?.load();
|
|
}, [props.url]);
|
|
|
|
return <div style={{ background: "black" }}>
|
|
<span style={{ color: "white" }}>{props.url}</span>
|
|
{ !props.url.endsWith(".ts") && <video controls autoPlay preload="none" ref={videoRef} style={{ objectFit: "fill" }} src={props.url} /> }
|
|
{ props.url.endsWith(".ts") && <Hls src={`/api?url=${btoa(props.url)}`} controls autoPlay /> }
|
|
</div>;
|
|
}
|
|
|
|
export default function Home() {
|
|
const [ list, setList ] = useState<Set<M3UObject>>(new Set);
|
|
const [ playerUrl, setUrl ] = useState<string>(null);
|
|
return <div>
|
|
<input type="file"
|
|
onDragEnter={async e => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
const fileSelect = e.currentTarget.files[0];
|
|
console.log(fileSelect);
|
|
if (!fileSelect) return;
|
|
if (!fileSelect.stream) return;
|
|
const file = await parseM3u(fileSelect.stream());
|
|
console.log(file)
|
|
setList(file);
|
|
}}
|
|
onChange={async e => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
const fileSelect = e.currentTarget.files[0];
|
|
console.log(fileSelect);
|
|
if (!fileSelect) return;
|
|
if (!fileSelect.stream) return;
|
|
const file = await parseM3u(fileSelect.stream());
|
|
console.log(file)
|
|
setList(file);
|
|
}}
|
|
/>
|
|
|
|
<br />
|
|
<br />
|
|
{playerUrl && <Player url={playerUrl} />}
|
|
<br />
|
|
{Array.from(list).map(s => <div onClick={() => setUrl(s.url[0])}>{s.name || s.url[0]}</div>)}
|
|
</div>;;
|
|
} |