react-slippi-visualizer
A React component for displaying slippi replays in the browser. Based on slippi-visualiser (commit: d19c3bf00474ad57b0d204a3aaf9fd2dcb757b6c) and react-iframe-comm.
How it works
The SlippiVisualizer
component returns an <iframe>
that renders the contents of the replay
prop, which should be a Slippi file (a JSON file with specific fields). Currently, the file autoplays with a playback slider that can be used to control playback.
Installation
npm install react-slippi-visualizer
or
yarn add react-slippi-visualizer
Getting Started
import SlippiVisualizer from 'react-slippi-visualizer';
const MyComponent = { replay } => (
<SlippiVisualizer replay={replay} />
)
Functionality
Functionality is limited to replaying Slippi files, but future development will allow play/pause, jump-to-frame, better timeline visualization, and more.
SlippiVisualizer
Props
//
attributes: PropTypes.shape({
allowFullScreen: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
frameBorder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
name: PropTypes.string,
scrolling: PropTypes.string,
// https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
sandbox: PropTypes.string,
srcDoc: PropTypes.string,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}),
// Callback function called when iFrame sends the parent window a message.
// Not functional, currently.
handleReceiveMessage: PropTypes.func,
// The replay file
replay: PropTypes.object
Contributing
I would love some help with this lol. Feel free to submit PRs, or get in touch to discuss the project.