2023-02-22 19:02:23 +01:00
|
|
|
import { MWStreamQuality, MWStreamType } from "@/backend/helpers/streams";
|
|
|
|
|
import { DetailedMeta } from "@/backend/metadata/getmeta";
|
|
|
|
|
import { MWMediaType } from "@/backend/metadata/types";
|
|
|
|
|
import { Button } from "@/components/Button";
|
2023-02-22 20:26:19 +01:00
|
|
|
import { Dropdown } from "@/components/Dropdown";
|
2023-02-22 19:02:23 +01:00
|
|
|
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";
|
|
|
|
|
import { useCallback, useState } from "react";
|
|
|
|
|
import { Helmet } from "react-helmet";
|
|
|
|
|
|
|
|
|
|
interface VideoData {
|
|
|
|
|
streamUrl: string;
|
2023-02-22 20:26:19 +01:00
|
|
|
type: MWStreamType;
|
2023-02-22 19:02:23 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const testData: VideoData = {
|
|
|
|
|
streamUrl:
|
|
|
|
|
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
|
2023-02-22 20:26:19 +01:00
|
|
|
type: MWStreamType.MP4,
|
2023-02-22 19:02:23 +01:00
|
|
|
};
|
|
|
|
|
const testMeta: DetailedMeta = {
|
|
|
|
|
imdbId: "",
|
|
|
|
|
tmdbId: "",
|
|
|
|
|
meta: {
|
|
|
|
|
id: "hello-world",
|
|
|
|
|
title: "Big Buck Bunny",
|
|
|
|
|
type: MWMediaType.MOVIE,
|
|
|
|
|
seasons: undefined,
|
|
|
|
|
year: "2000",
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export function VideoTesterView() {
|
|
|
|
|
const [video, setVideo] = useState<VideoData | null>(null);
|
2023-02-22 20:26:19 +01:00
|
|
|
const [videoType, setVideoType] = useState<MWStreamType>(MWStreamType.MP4);
|
2023-02-22 19:02:23 +01:00
|
|
|
const [url, setUrl] = useState("");
|
|
|
|
|
|
2023-02-22 20:26:19 +01:00
|
|
|
const playVideo = useCallback(
|
|
|
|
|
(streamUrl: string) => {
|
|
|
|
|
setVideo({
|
|
|
|
|
streamUrl,
|
|
|
|
|
type: videoType,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
[videoType]
|
|
|
|
|
);
|
2023-02-22 19:02:23 +01:00
|
|
|
|
|
|
|
|
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}
|
2023-03-22 10:38:12 +01:00
|
|
|
type={videoType}
|
|
|
|
|
quality={MWStreamQuality.QUNKNOWN}
|
2023-02-22 19:02:23 +01:00
|
|
|
/>
|
|
|
|
|
</VideoPlayer>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
2023-02-22 20:26:19 +01:00
|
|
|
<div className="py-64">
|
2023-02-22 19:02:23 +01:00
|
|
|
<Navigation />
|
|
|
|
|
<ThinContainer classNames="flex items-start flex-col space-y-4">
|
2023-02-22 20:26:19 +01:00
|
|
|
<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>
|
2023-02-22 19:02:23 +01:00
|
|
|
<div className="mb-4 flex gap-4">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
2023-02-22 20:26:19 +01:00
|
|
|
placeholder="stream url here..."
|
2023-02-22 19:02:23 +01:00
|
|
|
value={url}
|
|
|
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
|
|
|
/>
|
|
|
|
|
<Button onClick={() => playVideo(url)}>Play video</Button>
|
|
|
|
|
</div>
|
2023-02-22 20:26:19 +01:00
|
|
|
<Button
|
|
|
|
|
onClick={() =>
|
|
|
|
|
setVideo({
|
|
|
|
|
streamUrl: testData.streamUrl,
|
|
|
|
|
type: testData.type,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
>
|
2023-02-22 19:02:23 +01:00
|
|
|
Play default video
|
|
|
|
|
</Button>
|
|
|
|
|
</ThinContainer>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
