replay-viewer
Version:
Rocket League replay viewer React component and tooling
46 lines • 2.88 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import { Button, Typography } from "@mui/material";
import React, { useEffect, useRef } from "react";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import styled from "styled-components";
import { dispatchCanvasResizeEvent } from "../../eventbus/events/canvasResize";
import { dispatchPlayPauseEvent } from "../../eventbus/events/playPause";
import FullscreenExitIcon from "./icons/FullscreenExitIcon";
import FullscreenIcon from "./icons/FullscreenIcon";
import Scoreboard from "./ScoreBoard";
var ReplayViewer = function (props) {
var mount = useRef(null);
useEffect(function () {
if (!mount.current) {
throw new Error("Did not mount replay viewer correctly");
}
var gameManager = props.gameManager, autoplay = props.autoplay;
// Mount and resize canvas
mount.current.appendChild(gameManager.getDOMNode());
handleResize();
// Set the play/pause status to match autoplay property
dispatchPlayPauseEvent({ paused: !autoplay });
addEventListener("resize", handleResize);
}, []);
var handleResize = function () {
var _a = mount.current, width = _a.clientWidth, height = _a.clientHeight;
dispatchCanvasResizeEvent({ width: width, height: height });
};
var handle = useFullScreenHandle();
return (React.createElement(ViewerContainer, null,
React.createElement(FullScreen, { handle: handle },
React.createElement("div", { style: { width: "100%", height: "100%" }, ref: mount }),
React.createElement(Scoreboard, null),
React.createElement(FullscreenToggle, null,
React.createElement(Button, { onClick: handle.active ? handle.exit : handle.enter },
React.createElement(Typography, { style: { color: "#fff" } }, handle.active ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)))),
props.children)));
};
var ViewerContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 480px;\n position: relative;\n .fullscreen {\n width: 100%;\n height: 100%;\n }\n"], ["\n width: 100%;\n height: 480px;\n position: relative;\n .fullscreen {\n width: 100%;\n height: 100%;\n }\n"])));
var FullscreenToggle = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n bottom: 0;\n right: 0;\n"], ["\n position: absolute;\n bottom: 0;\n right: 0;\n"])));
export default ReplayViewer;
var templateObject_1, templateObject_2;
//# sourceMappingURL=ReplayViewer.js.map