94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
// Copyright Epic Games, Inc. All Rights Reserved.
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import {
|
|
Config,
|
|
PixelStreaming,
|
|
} from "@epicgames-ps/lib-pixelstreamingfrontend-ue5.7";
|
|
import type { AllSettings } from "@epicgames-ps/lib-pixelstreamingfrontend-ue5.7";
|
|
|
|
export interface PixelStreamingWrapperProps {
|
|
initialSettings?: Partial<AllSettings>;
|
|
}
|
|
|
|
export const PixelStreamingWrapper = ({
|
|
initialSettings,
|
|
}: PixelStreamingWrapperProps) => {
|
|
// A reference to parent div element that the Pixel Streaming library attaches into:
|
|
const videoParent = useRef<HTMLDivElement>(null);
|
|
|
|
// Pixel streaming library instance is stored into this state variable after initialization:
|
|
const [pixelStreaming, setPixelStreaming] = useState<PixelStreaming>();
|
|
|
|
// A boolean state variable that determines if the Click to play overlay is shown:
|
|
const [clickToPlayVisible, setClickToPlayVisible] = useState(false);
|
|
|
|
// Run on component mount:
|
|
useEffect(() => {
|
|
if (videoParent.current) {
|
|
// Attach Pixel Streaming library to videoParent element:
|
|
const config = new Config({ initialSettings });
|
|
const streaming = new PixelStreaming(config, {
|
|
videoElementParent: videoParent.current,
|
|
});
|
|
|
|
// register a playStreamRejected handler to show Click to play overlay if needed:
|
|
streaming.addEventListener("playStreamRejected", () => {
|
|
setClickToPlayVisible(true);
|
|
});
|
|
|
|
// Save the library instance into component state so that it can be accessed later:
|
|
setPixelStreaming(streaming);
|
|
|
|
// Clean up on component unmount:
|
|
return () => {
|
|
try {
|
|
streaming.disconnect();
|
|
} catch {
|
|
//
|
|
}
|
|
};
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
}}
|
|
ref={videoParent}
|
|
/>
|
|
{clickToPlayVisible && (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => {
|
|
pixelStreaming?.play();
|
|
setClickToPlayVisible(false);
|
|
}}
|
|
>
|
|
<div>Click to play</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|