watch: very basic video player
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
parent
64c8c6bb74
commit
c29052ca61
@ -1,11 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { Component } from "@/typings/component";
|
|
||||||
|
|
||||||
export const Player: Component = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<video src="" className="w-full" />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -0,0 +1,209 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useDebounce } from "use-debounce";
|
||||||
|
|
||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import {
|
||||||
|
FiMaximize as MaximizeIcon,
|
||||||
|
FiMinimize as MinimizeIcon,
|
||||||
|
FiVolumeX as MutedIcon,
|
||||||
|
FiPause as PauseIcon,
|
||||||
|
FiFastForward as PlaybackRateIcon,
|
||||||
|
FiPlay as PlayIcon,
|
||||||
|
FiVolume as VolumeIcon,
|
||||||
|
FiVolume1 as VolumeIcon1,
|
||||||
|
FiVolume2 as VolumeIcon2
|
||||||
|
} from "react-icons/fi";
|
||||||
|
import ReactPlayer from "react-player";
|
||||||
|
|
||||||
|
import { Button } from "@nextui-org/button";
|
||||||
|
import {
|
||||||
|
Dropdown,
|
||||||
|
DropdownItem,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownTrigger
|
||||||
|
} from "@nextui-org/dropdown";
|
||||||
|
import { Slider } from "@nextui-org/slider";
|
||||||
|
|
||||||
|
import { HlsStream, Stream, StreamType } from "@/client/typings/stream";
|
||||||
|
import formatDuration from "@/utils/formatDuration";
|
||||||
|
|
||||||
|
import { Component } from "@/typings/component";
|
||||||
|
|
||||||
|
export const Player: Component<{ streams: Stream[] }> = ({ streams }) => {
|
||||||
|
const stream = streams.find((stream) => stream.type === StreamType.Hls);
|
||||||
|
|
||||||
|
const player = useRef<ReactPlayer>(null);
|
||||||
|
|
||||||
|
const [progress, setProgress] = useState(0);
|
||||||
|
const [duration, setDuration] = useState(0);
|
||||||
|
const [maximized, setMaximized] = useState(false);
|
||||||
|
const [volume, setVolume] = useState(40);
|
||||||
|
const [playbackRate, setPlaybackRate] = useState(1.0);
|
||||||
|
const [playing, setPlaying] = useState(false);
|
||||||
|
|
||||||
|
const [userSetProgress, setUserSetProgress] = useState(0);
|
||||||
|
|
||||||
|
const [seek] = useDebounce(userSetProgress, 100);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
player.current?.seekTo(seek);
|
||||||
|
}, [seek]);
|
||||||
|
|
||||||
|
const volumeIcons = useMemo(
|
||||||
|
() => [
|
||||||
|
<VolumeIcon key="vol" />,
|
||||||
|
<VolumeIcon1 key="vol1" />,
|
||||||
|
<VolumeIcon2 key="vol2" />
|
||||||
|
],
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const playbackRateCategories = useMemo(
|
||||||
|
() => [
|
||||||
|
{ key: 0.25, label: "0.25" },
|
||||||
|
{ key: 0.5, label: "0.5" },
|
||||||
|
{ key: 1, label: "1.0" },
|
||||||
|
{ key: 1.25, label: "1.25" },
|
||||||
|
{ key: 1.5, label: "1.5" },
|
||||||
|
{ key: 2, label: "2.0" }
|
||||||
|
],
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleBuffering = useCallback(() => {}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{stream && (
|
||||||
|
<div className="relative" style={{ paddingTop: `${100 / (16 / 9)}%` }}>
|
||||||
|
<div
|
||||||
|
className="w-full absolute bottom-0 z-10 pb-2 px-4"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
"linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<Slider
|
||||||
|
aria-label="Video progress bar"
|
||||||
|
step={0.1}
|
||||||
|
onChange={(value) => {
|
||||||
|
if (typeof value === "number") {
|
||||||
|
setUserSetProgress(value / 100);
|
||||||
|
setProgress(value / 100);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="cursor-pointer"
|
||||||
|
value={progress * 100}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-row items-center gap-4">
|
||||||
|
<div className="flex flex-1 flex-row gap-2 items-center">
|
||||||
|
<Button
|
||||||
|
variant="light"
|
||||||
|
isIconOnly
|
||||||
|
className="text-xl"
|
||||||
|
onClick={() => setPlaying((state) => !state)}
|
||||||
|
>
|
||||||
|
{playing ? <PauseIcon /> : <PlayIcon />}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Dropdown>
|
||||||
|
<DropdownTrigger>
|
||||||
|
<Button
|
||||||
|
variant="light"
|
||||||
|
isIconOnly
|
||||||
|
className="text-xl"
|
||||||
|
onClick={() => setMaximized((state) => !state)}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
volumeIcons[
|
||||||
|
Math.floor((volume / 100) * volumeIcons.length)
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</Button>
|
||||||
|
</DropdownTrigger>
|
||||||
|
<DropdownMenu aria-label="Volume menu">
|
||||||
|
<DropdownItem>
|
||||||
|
<Slider
|
||||||
|
className="h-48"
|
||||||
|
value={volume}
|
||||||
|
onChange={(value) => {
|
||||||
|
if (typeof value === "number") setVolume(value);
|
||||||
|
}}
|
||||||
|
orientation="vertical"
|
||||||
|
/>
|
||||||
|
</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{formatDuration(progress * duration * 1000)} /{" "}
|
||||||
|
{formatDuration(duration * 1000)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row gap-2 items-center">
|
||||||
|
<Dropdown>
|
||||||
|
<DropdownTrigger>
|
||||||
|
<Button
|
||||||
|
className="text-xl"
|
||||||
|
// startContent={<PlaybackRateIcon />}
|
||||||
|
variant="light"
|
||||||
|
>
|
||||||
|
{playbackRate}x
|
||||||
|
</Button>
|
||||||
|
</DropdownTrigger>
|
||||||
|
<DropdownMenu
|
||||||
|
aria-label="Playback rate menu"
|
||||||
|
onAction={(key) => {
|
||||||
|
setPlaybackRate(parseFloat(key as string));
|
||||||
|
}}
|
||||||
|
items={playbackRateCategories}
|
||||||
|
>
|
||||||
|
{(item) => (
|
||||||
|
<DropdownItem key={item.key}>
|
||||||
|
{item.label}x
|
||||||
|
</DropdownItem>
|
||||||
|
)}
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="light"
|
||||||
|
isIconOnly
|
||||||
|
className="text-xl"
|
||||||
|
onClick={() => setMaximized((state) => !state)}
|
||||||
|
>
|
||||||
|
{maximized ? <MinimizeIcon /> : <MaximizeIcon />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ReactPlayer
|
||||||
|
playing={playing}
|
||||||
|
volume={volume / 100}
|
||||||
|
playbackRate={playbackRate}
|
||||||
|
ref={player}
|
||||||
|
className="absolute top-0 left-0"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
config={{ file: { forceHLS: true } }}
|
||||||
|
onPause={() => setPlaying(false)}
|
||||||
|
onPlay={() => setPlaying(true)}
|
||||||
|
onDuration={(duration) => setDuration(duration)}
|
||||||
|
onBuffer={handleBuffering}
|
||||||
|
onProgress={({ played }) => {
|
||||||
|
setProgress(played);
|
||||||
|
}}
|
||||||
|
// onPlaybackQualityChange={(e: unknown) =>
|
||||||
|
// console.log("onPlaybackQualityChange", e)
|
||||||
|
// }
|
||||||
|
url={(stream as HlsStream).url}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,11 +1,31 @@
|
|||||||
import { Item } from "./item";
|
export enum StreamType {
|
||||||
import { Video } from "./video";
|
Dash,
|
||||||
|
Hls,
|
||||||
|
Standard
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BaseStream {
|
||||||
|
type: StreamType;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashStream extends BaseStream {
|
||||||
|
type: StreamType.Dash;
|
||||||
|
url: string;
|
||||||
|
}
|
||||||
|
|
||||||
export interface Stream {
|
export interface HlsStream extends BaseStream {
|
||||||
video: Video;
|
type: StreamType.Hls;
|
||||||
keywords: string[];
|
url: string;
|
||||||
likes: number;
|
|
||||||
dislikes: number;
|
|
||||||
category: string;
|
|
||||||
related: Item[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface StandardStream extends BaseStream {
|
||||||
|
type: StreamType.Standard;
|
||||||
|
video: VideoStream[];
|
||||||
|
audio: AudioStream[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VideoStream {}
|
||||||
|
|
||||||
|
export interface AudioStream {}
|
||||||
|
|
||||||
|
export type Stream = DashStream | HlsStream | StandardStream;
|
||||||
|
|||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { Item } from "./item";
|
||||||
|
import { Stream } from "./stream";
|
||||||
|
import { Video } from "./video";
|
||||||
|
|
||||||
|
export interface Watchable {
|
||||||
|
video: Video;
|
||||||
|
streams: Stream[];
|
||||||
|
keywords: string[];
|
||||||
|
likes: number;
|
||||||
|
dislikes: number;
|
||||||
|
category: string;
|
||||||
|
related: Item[];
|
||||||
|
}
|
||||||
Loading…
Reference in new issue