Add compact player controls and support for custom wrapped components (…

…#57)

* Add play/pause icons

* Support rendering children inside replay viewer

* Update assets commit hash

* Cache replay position requests

* Allow prop passthrough for slider

* Include compact controls

* Show compact viewer in separate docs tab

* Add Camera icon

* Show camera dialog

* Revert change to default App tab

* Fixed bug where animated objects would spawn at the center of the scene

* Added autoplay property to ReplayViewer

* Statisfy unused parameter name linting error

* Force play/pause dispatch from replay viewer

* Bump patch version

docs/src/App.tsx

@@ -4,7 +4,7 @@ import React, { Component } from "react"
 
 import Main from "./components/Main"
 
-type ActiveTab = "viewer" | "other"
+type ActiveTab = "viewer" | "compact" | "other"
 
 interface State {
   tab: ActiveTab
@@ -33,9 +33,11 @@ class App extends Component<any, State> {
         </div>
         <Tabs value={tab} onChange={this.handleChange}>
           <Tab label="Viewer" value="viewer" />
+          <Tab label="Compact" value="compact" />
           <Tab label="Other" value="other" />
         </Tabs>
         {tab === "viewer" && <Main />}
+        {tab === "compact" && <Main compact />}
         {tab === "other" && <div>Other</div>}
       </div>
     )

docs/src/components/CompactViewer.tsx

@@ -0,0 +1,55 @@
+import Grid from "@material-ui/core/Grid"
+import React, { Component } from "react"
+
+import {
+  CompactPlayControls,
+  GameBuilderOptions,
+  GameManager,
+  GameManagerLoader,
+  ReplayViewer,
+} from "../../../src"
+
+interface Props {
+  options: GameBuilderOptions
+}
+
+interface State {
+  gameManager?: GameManager
+}
+
+class CompactViewer extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = {}
+  }
+
+  renderContent() {
+    const { gameManager } = this.state
+
+    if (!gameManager) {
+      return "Food machine broke..."
+    }
+
+    return (
+      <Grid container direction="column" justify="center" spacing={24}>
+        <Grid item style={{ minHeight: 0, maxWidth: 900, width: "100%" }}>
+          <ReplayViewer gameManager={gameManager}>
+            <CompactPlayControls />
+          </ReplayViewer>
+        </Grid>
+      </Grid>
+    )
+  }
+
+  render() {
+    const { options } = this.props
+    const onLoad = (gm: GameManager) => this.setState({ gameManager: gm })
+    return (
+      <GameManagerLoader options={options} onLoad={onLoad}>
+        {this.renderContent()}
+      </GameManagerLoader>
+    )
+  }
+}
+
+export default CompactViewer

docs/src/components/Main.tsx

@@ -1,22 +1,33 @@
 import React, { Component } from "react"
 
-import { FPSClock, GameBuilderOptions, loadReplay } from "../../../src"
+import {
+  FPSClock,
+  GameBuilderOptions,
+  loadReplay,
+  ReplayData,
+  ReplayMetadata,
+} from "../../../src"
+import CompactViewer from "./CompactViewer"
 import Viewer from "./Viewer"
 
+interface Props {
+  compact?: boolean
+}
+
 interface State {
   options?: GameBuilderOptions
 }
 
-class Main extends Component<any, State> {
-  constructor(props: any) {
+class Main extends Component<Props, State> {
+  constructor(props: Props) {
     super(props)
     this.state = {}
   }
 
   componentDidMount() {
     const REPLAY_ID = "9944A36A11E987D3E286C1B524E68ECC"
 
-    loadReplay(REPLAY_ID).then(([replayData, replayMetadata]) => {
+    loadReplay(REPLAY_ID, true).then(([replayData, replayMetadata]) => {
       this.setState({
         options: {
           replayData,
@@ -33,8 +44,11 @@ class Main extends Component<any, State> {
     if (!options) {
       return "Loading..."
     }
-
-    return <Viewer options={options} />
+    return this.props.compact ? (
+      <CompactViewer options={options} />
+    ) : (
+      <Viewer options={options} />
+    )
   }
 }
 

docs/src/components/Viewer.tsx

@@ -44,7 +44,7 @@ class Viewer extends Component<Props, State> {
         spacing={24}
       >
         <Grid item style={{ minHeight: 0, maxWidth: 900, width: "100%" }}>
-          <ReplayViewer gameManager={gameManager} />
+          <ReplayViewer gameManager={gameManager} autoplay />
         </Grid>
         <Grid item>
           <Grid

package.json

@@ -1,6 +1,6 @@
 {
   "name": "replay-viewer",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Rocket League replay viewer React component and tooling",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

src/index.ts

@@ -10,6 +10,9 @@ export { default as ReplayViewer } from "./viewer/components/ReplayViewer"
 export {
   default as GameManagerLoader,
 } from "./viewer/components/GameManagerLoader"
+export {
+  default as CompactPlayControls,
+} from "./viewer/components/CompactPlayControls"
 export { default as PlayControls } from "./viewer/components/PlayControls"
 export {
   default as PlayerCameraControls,

src/managers/GameManager.ts

@@ -41,7 +41,10 @@ export class GameManager {
     this.render = this.render.bind(this)
     this.clock = clock
 
+    // Spawns the animation clips
     AnimationManager.getInstance().playAnimationClips()
+    // Forces every animation to "take position"
+    AnimationManager.getInstance().updateAnimationClips(0)
     addPlayPauseListener(this.onPlayPause)
     addFrameListener(this.animate)
     addCanvasResizeListener(this.updateSize)

src/viewer/clients/loadReplay.ts

@@ -10,11 +10,25 @@ const fetchByURL = (url: string) =>
     },
   }).then(response => response.json())
 
-export const loadReplay = (
-  replayId: string
+const cache: { [key: string]: [ReplayData, ReplayMetadata] } = {}
+
+export const loadReplay = async (
+  replayId: string,
+  cached?: boolean
 ): Promise<[ReplayData, ReplayMetadata]> => {
-  return Promise.all([
-    fetchByURL(`https://calculated.gg/api/replay/${replayId}/positions`),
-    fetchByURL(`https://calculated.gg/api/v1/replay/${replayId}?key=1`),
-  ])
+  const fetch = () =>
+    Promise.all([
+      fetchByURL(`https://calculated.gg/api/replay/${replayId}/positions`),
+      fetchByURL(`https://calculated.gg/api/v1/replay/${replayId}?key=1`),
+    ])
+  if (cached) {
+    if (!cache[replayId]) {
+      return fetch().then(data => {
+        cache[replayId] = data
+        return data
+      })
+    }
+    return Promise.resolve(cache[replayId])
+  }
+  return fetch()
 }

src/viewer/components/CompactPlayControls.tsx

@@ -0,0 +1,135 @@
+import Button from "@material-ui/core/Button"
+import Dialog from "@material-ui/core/Dialog"
+import DialogContent from "@material-ui/core/DialogContent"
+import DialogTitle from "@material-ui/core/DialogTitle"
+import Grid from "@material-ui/core/Grid"
+import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles"
+import Typography from "@material-ui/core/Typography"
+import React, { Component } from "react"
+import styled from "styled-components"
+
+import {
+  addCameraChangeListener,
+  removeCameraChangeListener,
+} from "../../eventbus/events/cameraChange"
+import {
+  addPlayPauseListener,
+  dispatchPlayPauseEvent,
+  PlayPauseEvent,
+  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"
+
+interface Props extends WithStyles {}
+
+interface State {
+  paused: boolean
+  cameraControlsShowing: boolean
+}
+
+class CompactPlayControls extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      paused: false,
+      cameraControlsShowing: false,
+    }
+
+    addPlayPauseListener(this.onPlayPause)
+    addCameraChangeListener(this.hideCameraControls)
+  }
+
+  componentWillUnmount() {
+    removePlayPauseListener(this.onPlayPause)
+    removeCameraChangeListener(this.hideCameraControls)
+  }
+
+  setPlayPause = () => {
+    const isPaused = this.state.paused
+    dispatchPlayPauseEvent({
+      paused: !isPaused,
+    })
+  }
+
+  onPlayPause = ({ paused }: PlayPauseEvent) => {
+    this.setState({
+      paused,
+    })
+  }
+
+  showCameraControls = () => {
+    this.setState({
+      cameraControlsShowing: true,
+    })
+  }
+
+  hideCameraControls = () => {
+    this.setState({
+      cameraControlsShowing: false,
+    })
+  }
+
+  render() {
+    const { paused, cameraControlsShowing } = this.state
+    const { focused, thumb, track } = this.props.classes
+    return (
+      <ControlsWrapper>
+        <Grid container spacing={24} alignItems="center">
+          <Grid item>
+            <Button onClick={this.setPlayPause}>
+              {paused ? <PlayIcon /> : <PausedIcon />}
+            </Button>
+          </Grid>
+          <Grid item zeroMinWidth xs>
+            <Slider
+              classes={{
+                thumb,
+                track,
+                focused,
+              }}
+            />
+          </Grid>
+          <Grid item>
+            <Button onClick={this.showCameraControls}>
+              <Camera />
+            </Button>
+          </Grid>
+        </Grid>
+        <Dialog open={cameraControlsShowing} onClose={this.hideCameraControls}>
+          <DialogTitle>Camera Controls</DialogTitle>
+          <DialogContent>
+            <Typography>Field Cameras</Typography>
+            <FieldCameraControls />
+            <Typography>Player Cameras</Typography>
+            <PlayerCameraControls />
+          </DialogContent>
+        </Dialog>
+      </ControlsWrapper>
+    )
+  }
+}
+
+const ControlsWrapper = styled.div`
+  position: absolute;
+  bottom: 6px;
+  left: 12px;
+  right: 60px;
+`
+
+export default withStyles({
+  focused: {},
+  track: {
+    backgroundColor: "#fff",
+  },
+  thumb: {
+    backgroundColor: "#fff",
+    "&:focus,&:hover,&$active": {
+      boxShadow: "inherit",
+    },
+  },
+})(CompactPlayControls)

src/viewer/components/GameManagerLoader.tsx

@@ -45,7 +45,7 @@ class GameManagerLoader extends Component<Props, State> {
     GameManager.destruct()
   }
 
-  handleProgress = (item: any, loaded: number, total: number) => {
+  handleProgress = (_: any, loaded: number, total: number) => {
     const newPercent = Math.round((loaded / total) * 1000) / 10
     const { percentLoaded } = this.state
     const stateValue = newPercent > percentLoaded ? newPercent : percentLoaded

src/viewer/components/ReplayViewer.tsx

@@ -5,13 +5,15 @@ import FullScreen from "react-full-screen"
 import styled from "styled-components"
 
 import { dispatchCanvasResizeEvent } from "../../eventbus/events/canvasResize"
+import { dispatchPlayPauseEvent } from "../../eventbus/events/playPause"
 import { GameManager } from "../../managers/GameManager"
 import FullscreenExitIcon from "./icons/FullscreenExitIcon"
 import FullscreenIcon from "./icons/FullscreenIcon"
 import Scoreboard from "./ScoreBoard"
 
 interface Props {
   gameManager: GameManager
+  autoplay?: boolean
 }
 
 interface State {
@@ -34,10 +36,13 @@ class ReplayViewer extends PureComponent<Props, State> {
     if (!current) {
       throw new Error("Did not mount replay viewer correctly")
     }
-    const { gameManager } = this.props
+    const { gameManager, autoplay } = this.props
+    // Mount and resize canvas
     current.appendChild(gameManager.getDOMNode())
     this.handleResize()
-    gameManager.clock.play()
+
+    // Set the play/pause status to match autoplay property
+    dispatchPlayPauseEvent({ paused: !autoplay })
 
     addEventListener("resize", this.handleResize)
   }
@@ -77,6 +82,7 @@ class ReplayViewer extends PureComponent<Props, State> {
               </Typography>
             </Button>
           </FullscreenToggle>
+          {this.props.children}
         </FullscreenWrapper>
       </ViewerContainer>
     )