aframe-react-stories

    2.0.4 • Public • Published

    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

    Install

    npm i aframe-react-stories

    DownloadsWeekly Downloads

    10

    Version

    2.0.4

    License

    none

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar