AFrame React Stories

A plug and play react UI module that lets you quickly add social media style stories into your current VR project. Click here to see the demo.

Getting Started

Prerequisites

A-Frame
Aframe-animation-component
React
React-Dom

Install

Using npm or yarn:

$ npm i --save aframe-react-stories
or
$ yarn add aframe-react-stories

Usage

In React:

import Stories from 'aframe-react-stories';

Setup

Profile:

Each profile should to be formatted as shown below

{
  displayName: 'John',
  img_url: 'http://yourprofileimage.com/profile.jpg'
  stories: [
    {
      type: 'image/jpeg',
      src: 'http://yourstoryimage.com/image.jpg'
    },
    {
      type: 'video/mp4',
      src: 'http://your360video.com/video.mp4'
    }
  ]
}

The aframe-react-stories component takes in a user prop and friends prop. The user prop should be a single profile and the friends prop should be a list of profiles.

Media Type:

Pictures will need to be specified with the type, 'image/jpeg', 'image/png', 'image', etc..., in order for aframe-react-stories to display the media in the img tag under assets. Otherwise, all other types will default to playing in the video tag.

Assets Callback:

The aframe-react-stories component takes in a callback function through the assetsCallback prop. Once mounted, the aframe-react-stories component will run a process that tags all the video and image assets for the stories playback logic. It will then pass the processed assets into callback function in the assetsCallback once it's done. The list of assets returned needs to be saved inside <a-assets> tag for the component to work properly.

View Callback:

This callback is invoked every time a story is played. It should take in an object that contains the current story and metadata.

Props

Props	Description	Default Value	Type
autoPlayNext	Autoplay the next friend's story when current friend's stories end	false	boolean
autoPlayStart	Autoplay the first friend's story when loaded	false	boolean
enableAnimation	Animates icons	false	boolean
defaultDuration	Duration for showing pictures	7000	number
exitCallback	Gets called when exit button is clicked		callback function
assetsCallback	Gets called when initiated. A list of assets to be saved inside `a-assets` is passed in		callback function
viewCallback	Invoked when a story is played. An object with the relevant video data and metadata is passed in		callback function
user	This profile will show at the beginning of stories		profile
friends	These are list of profiles to show stories of for each user		array of objects

Example

import React from 'react';
import ReactDOM from 'react-dom';
 
import 'aframe';
import 'aframe-animation-component';
import 'aframe-mouse-cursor-component';
import Stories from 'aframe-react-stories';
 
class App extends React.Component {
  constructor() {
    super()
    this.state({
      user: {},
      friends: [],
      storyAssets: []
    });
  }
 
  assetsCallback(storyAssets) {
    this.setState({ storyAssets });
  }
 
  return () {
    render(
      <a-scene>
        <a-assets>
          {this.state.storyAssets}
        </a-assets>
        <Stories 
          user={this.state.user}
          friends={this.state.friends}
          assetsCallback={this.assetsCallback.bind(this)}
        />
      </a-scene>
    )
  }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Running the tests

Using npm or yarn:

yarn run test
npm run test

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

npm