replay-viewer
Version:
Rocket League replay viewer React component and tooling
103 lines • 5.2 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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 from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import React, { Component } from "react";
import styled from "styled-components";
import { addCameraChangeListener, removeCameraChangeListener, } from "../../eventbus/events/cameraChange";
import { addPlayPauseListener, dispatchPlayPauseEvent, removePlayPauseListener, } from "../../eventbus/events/playPause";
import FieldCameraControls from "./FieldCameraControls";
import Camera from "./icons/Camera";
import PausedIcon from "./icons/PausedIcon";
import PlayIcon from "./icons/PlayIcon";
import PlayerCameraControls from "./PlayerCameraControls";
import Slider from "./Slider";
var CompactPlayControls = /** @class */ (function (_super) {
__extends(CompactPlayControls, _super);
function CompactPlayControls(props) {
var _this = _super.call(this, props) || this;
_this.setPlayPause = function () {
var isPaused = _this.state.paused;
dispatchPlayPauseEvent({
paused: !isPaused,
});
};
_this.onPlayPause = function (_a) {
var paused = _a.paused;
_this.setState({
paused: paused,
});
};
_this.showCameraControls = function () {
_this.setState({
cameraControlsShowing: true,
});
};
_this.hideCameraControls = function () {
_this.setState({
cameraControlsShowing: false,
});
};
_this.state = {
paused: false,
cameraControlsShowing: false,
};
addPlayPauseListener(_this.onPlayPause);
addCameraChangeListener(_this.hideCameraControls);
return _this;
}
CompactPlayControls.prototype.componentWillUnmount = function () {
removePlayPauseListener(this.onPlayPause);
removeCameraChangeListener(this.hideCameraControls);
};
CompactPlayControls.prototype.render = function () {
var _a = this.state, paused = _a.paused, cameraControlsShowing = _a.cameraControlsShowing;
return (React.createElement(ControlsWrapper, null,
React.createElement(Grid, { container: true, spacing: 3, alignItems: "center" },
React.createElement(Grid, { item: true },
React.createElement(Button, { onClick: this.setPlayPause }, paused ? React.createElement(PlayIcon, null) : React.createElement(PausedIcon, null))),
React.createElement(Grid, { item: true, zeroMinWidth: true, xs: true },
React.createElement(Slider, { sx: {
backgroundColor: "#fff",
"&:focus,&:hover,&$active": {
boxShadow: "inherit",
},
} })),
React.createElement(Grid, { item: true },
React.createElement(Button, { onClick: this.showCameraControls },
React.createElement(Camera, null)))),
React.createElement(Dialog, { open: cameraControlsShowing, onClose: this.hideCameraControls },
React.createElement(DialogTitle, null, "Camera Controls"),
React.createElement(DialogContent, null,
React.createElement(Typography, null, "Field Cameras"),
React.createElement(FieldCameraControls, null),
React.createElement(Typography, null, "Player Cameras"),
React.createElement(PlayerCameraControls, null)))));
};
return CompactPlayControls;
}(Component));
export default CompactPlayControls;
var ControlsWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n bottom: 6px;\n left: 12px;\n right: 60px;\n"], ["\n position: absolute;\n bottom: 6px;\n left: 12px;\n right: 60px;\n"])));
var templateObject_1;
//# sourceMappingURL=CompactPlayControls.js.map