mirror of
https://github.com/movie-web/movie-web.git
synced 2025-01-09 22:59:22 +01:00
4880d46dc4
This commit updates the import statements in the codebase to comply with ESLint rules for import ordering. All imports have been sorted alphabetically and grouped according to the specified import groups in the ESLint configuration. This improves the codebase's consistency and maintainability.
114 lines
3.2 KiB
TypeScript
114 lines
3.2 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
import { Helmet } from "react-helmet";
|
|
|
|
import { MWStreamQuality, MWStreamType } from "@/backend/helpers/streams";
|
|
import { DetailedMeta } from "@/backend/metadata/getmeta";
|
|
import { MWMediaType } from "@/backend/metadata/types";
|
|
import { Button } from "@/components/Button";
|
|
import { Dropdown } from "@/components/Dropdown";
|
|
import { Navigation } from "@/components/layout/Navigation";
|
|
import { ThinContainer } from "@/components/layout/ThinContainer";
|
|
import { MetaController } from "@/video/components/controllers/MetaController";
|
|
import { SourceController } from "@/video/components/controllers/SourceController";
|
|
import { VideoPlayer } from "@/video/components/VideoPlayer";
|
|
|
|
interface VideoData {
|
|
streamUrl: string;
|
|
type: MWStreamType;
|
|
}
|
|
|
|
const testData: VideoData = {
|
|
streamUrl:
|
|
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
|
|
type: MWStreamType.MP4,
|
|
};
|
|
const testMeta: DetailedMeta = {
|
|
imdbId: "",
|
|
tmdbId: "",
|
|
meta: {
|
|
id: "hello-world",
|
|
title: "Big Buck Bunny",
|
|
type: MWMediaType.MOVIE,
|
|
seasons: undefined,
|
|
year: "2000",
|
|
},
|
|
};
|
|
|
|
export default function VideoTesterView() {
|
|
const [video, setVideo] = useState<VideoData | null>(null);
|
|
const [videoType, setVideoType] = useState<MWStreamType>(MWStreamType.MP4);
|
|
const [url, setUrl] = useState("");
|
|
|
|
const playVideo = useCallback(
|
|
(streamUrl: string) => {
|
|
setVideo({
|
|
streamUrl,
|
|
type: videoType,
|
|
});
|
|
},
|
|
[videoType]
|
|
);
|
|
|
|
if (video) {
|
|
return (
|
|
<div className="fixed top-0 left-0 h-[100dvh] w-screen">
|
|
<Helmet>
|
|
<html data-full="true" />
|
|
</Helmet>
|
|
<VideoPlayer includeSafeArea autoPlay onGoBack={() => setVideo(null)}>
|
|
<MetaController
|
|
data={{
|
|
captions: [],
|
|
meta: testMeta,
|
|
}}
|
|
linkedCaptions={[]}
|
|
/>
|
|
<SourceController
|
|
source={video.streamUrl}
|
|
type={videoType}
|
|
quality={MWStreamQuality.QUNKNOWN}
|
|
captions={[]}
|
|
/>
|
|
</VideoPlayer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="py-64">
|
|
<Navigation />
|
|
<ThinContainer classNames="flex items-start flex-col space-y-4">
|
|
<div className="w-48">
|
|
<Dropdown
|
|
options={[
|
|
{ id: MWStreamType.MP4, name: "Mp4" },
|
|
{ id: MWStreamType.HLS, name: "hls/m3u8" },
|
|
]}
|
|
selectedItem={{ id: videoType, name: videoType }}
|
|
setSelectedItem={(a) => setVideoType(a.id as MWStreamType)}
|
|
/>
|
|
</div>
|
|
<div className="mb-4 flex gap-4">
|
|
<input
|
|
type="text"
|
|
placeholder="stream url here..."
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
/>
|
|
<Button onClick={() => playVideo(url)}>Play video</Button>
|
|
</div>
|
|
<Button
|
|
onClick={() =>
|
|
setVideo({
|
|
streamUrl: testData.streamUrl,
|
|
type: testData.type,
|
|
})
|
|
}
|
|
>
|
|
Play default video
|
|
</Button>
|
|
</ThinContainer>
|
|
</div>
|
|
);
|
|
}
|