From ae660b9b0494a9c17ef3213fbe51589c0409f53b Mon Sep 17 00:00:00 2001
From: Peter Abbondanzo <peter@abbondanzo.com>
Date: Sun, 6 Oct 2019 21:40:40 -0400
Subject: [PATCH] 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 +-
 docs/src/components/CompactViewer.tsx         |  55 +++++++
 docs/src/components/Main.tsx                  |  26 +++-
 docs/src/components/Viewer.tsx                |   2 +-
 package.json                                  |   2 +-
 src/assets                                    |   2 +-
 src/index.ts                                  |   3 +
 src/managers/GameManager.ts                   |   3 +
 src/viewer/clients/loadReplay.ts              |  26 +++-
 src/viewer/components/CompactPlayControls.tsx | 135 ++++++++++++++++++
 src/viewer/components/GameManagerLoader.tsx   |   2 +-
 src/viewer/components/ReplayViewer.tsx        |  10 +-
 src/viewer/components/Slider.tsx              |   5 +-
 src/viewer/components/icons/Camera.tsx        |  23 +++
 src/viewer/components/icons/PausedIcon.tsx    |  20 +++
 src/viewer/components/icons/PlayIcon.tsx      |  20 +++
 16 files changed, 317 insertions(+), 21 deletions(-)
 create mode 100644 docs/src/components/CompactViewer.tsx
 create mode 100644 src/viewer/components/CompactPlayControls.tsx
 create mode 100644 src/viewer/components/icons/Camera.tsx
 create mode 100644 src/viewer/components/icons/PausedIcon.tsx
 create mode 100644 src/viewer/components/icons/PlayIcon.tsx

diff --git a/docs/src/App.tsx b/docs/src/App.tsx
index 204d9ac..39dcaac 100644
--- a/docs/src/App.tsx
+++ b/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>
     )
diff --git a/docs/src/components/CompactViewer.tsx b/docs/src/components/CompactViewer.tsx
new file mode 100644
index 0000000..9f8abb3
--- /dev/null
+++ b/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
diff --git a/docs/src/components/Main.tsx b/docs/src/components/Main.tsx
index aa217d9..4cf5528 100644
--- a/docs/src/components/Main.tsx
+++ b/docs/src/components/Main.tsx
@@ -1,14 +1,25 @@
 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 = {}
   }
@@ -16,7 +27,7 @@ class Main extends Component<any, 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} />
+    )
   }
 }
 
diff --git a/docs/src/components/Viewer.tsx b/docs/src/components/Viewer.tsx
index ce80840..e7d134a 100644
--- a/docs/src/components/Viewer.tsx
+++ b/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
diff --git a/package.json b/package.json
index d3ba659..2c10fa9 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets b/src/assets
index d41847f..06c1140 160000
--- a/src/assets
+++ b/src/assets
@@ -1 +1 @@
-Subproject commit d41847f66626819aac1ca9f57284540ff82a3889
+Subproject commit 06c114092b95ed269949ba0ef419a2e896b051aa
diff --git a/src/index.ts b/src/index.ts
index 720ca90..fe6905e 100644
--- a/src/index.ts
+++ b/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,
diff --git a/src/managers/GameManager.ts b/src/managers/GameManager.ts
index c2a2e96..352fca0 100644
--- a/src/managers/GameManager.ts
+++ b/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)
diff --git a/src/viewer/clients/loadReplay.ts b/src/viewer/clients/loadReplay.ts
index 557200f..0e66eec 100644
--- a/src/viewer/clients/loadReplay.ts
+++ b/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()
 }
diff --git a/src/viewer/components/CompactPlayControls.tsx b/src/viewer/components/CompactPlayControls.tsx
new file mode 100644
index 0000000..96564c0
--- /dev/null
+++ b/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)
diff --git a/src/viewer/components/GameManagerLoader.tsx b/src/viewer/components/GameManagerLoader.tsx
index dc76b25..270e52e 100644
--- a/src/viewer/components/GameManagerLoader.tsx
+++ b/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
diff --git a/src/viewer/components/ReplayViewer.tsx b/src/viewer/components/ReplayViewer.tsx
index 5eb5b0b..49bd59c 100644
--- a/src/viewer/components/ReplayViewer.tsx
+++ b/src/viewer/components/ReplayViewer.tsx
@@ -5,6 +5,7 @@ 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"
@@ -12,6 +13,7 @@ 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>
     )
diff --git a/src/viewer/components/Slider.tsx b/src/viewer/components/Slider.tsx
index 3004ff8..11b689e 100644
--- a/src/viewer/components/Slider.tsx
+++ b/src/viewer/components/Slider.tsx
@@ -1,4 +1,4 @@
-import MUISlider from "@material-ui/lab/Slider"
+import MUISlider, { SliderProps } from "@material-ui/lab/Slider"
 import debounce from "lodash.debounce"
 import React, { Component } from "react"
 
@@ -10,7 +10,7 @@ import {
 import DataManager from "../../managers/DataManager"
 import { GameManager } from "../../managers/GameManager"
 
-interface Props {}
+interface Props extends Partial<SliderProps> {}
 
 interface State {
   frame: number
@@ -72,6 +72,7 @@ class Slider extends Component<Props, State> {
           }}
         >
           <MUISlider
+            {...this.props}
             value={frame}
             aria-labelledby="label"
             onChange={this.handleChange}
diff --git a/src/viewer/components/icons/Camera.tsx b/src/viewer/components/icons/Camera.tsx
new file mode 100644
index 0000000..c4673f8
--- /dev/null
+++ b/src/viewer/components/icons/Camera.tsx
@@ -0,0 +1,23 @@
+/* tslint:disable */
+
+import React from "react"
+
+const Camera = () => {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"
+          fill="white"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default Camera
diff --git a/src/viewer/components/icons/PausedIcon.tsx b/src/viewer/components/icons/PausedIcon.tsx
new file mode 100644
index 0000000..c51571f
--- /dev/null
+++ b/src/viewer/components/icons/PausedIcon.tsx
@@ -0,0 +1,20 @@
+/* tslint:disable */
+
+import React from "react"
+
+const PausedIcon = () => {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" fill="white" />
+      </svg>
+    </div>
+  )
+}
+
+export default PausedIcon
diff --git a/src/viewer/components/icons/PlayIcon.tsx b/src/viewer/components/icons/PlayIcon.tsx
new file mode 100644
index 0000000..3cd27f0
--- /dev/null
+++ b/src/viewer/components/icons/PlayIcon.tsx
@@ -0,0 +1,20 @@
+/* tslint:disable */
+
+import React from "react"
+
+const PlayIcon = () => {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path d="M8 5v14l11-7z" fill="white" />
+      </svg>
+    </div>
+  )
+}
+
+export default PlayIcon