rotor-react

React Components for Rotor

Install

npm install --save rotor-react
yarn add --dev rotor-react

API

Quick Start

import React from 'react'

import { RotorVideosProvider, RotorVideosButton } from 'rotor-react'
import 'rotor-react/dist/index.css'

const Example = ({ someTracks }) => {
  return (
    <RotorVideosProvider accessToken={'your_access_token_here'}>
      {someTracks.map((track) => (
        <>
          <h2>{track.name}</h2>
          <RotorVideosButton
            artistName={track.artistName}
            artworkUrl={track.artworkUrl}
            audioUrl={track.audioUrl}
            trackName={track.name}
            trackId={track.id}
          />
        </>
      ))}
    </RotorVideosProvider>
  )
}

Styles

import 'rotor-react/dist/index.css'

A stylesheet containing styles used by the library.

RotorVideosProvider

<RotorVideosProvider accessToken={'your_access_token_here'}>
  ...
</RotorVideosProvider>

A context that provides necessary information to other Rotor components. Any other Rotor component must be a descendant of this.

Prop|Type|Required|Info -|-|-|- accessToken|string|true|An individual user's access token

RotorVideosButton

<RotorVideosButton
  artistName={track.artistName}
  artworkUrl={track.artworkUrl}
  audioUrl={track.audioUrl}
  trackName={track.name}
  trackId={track.id}
/>

When clicked by a user, this component will open a modal allowing them to create and manage videos for an individual track. As well as the props detailed below, it also accepts the props a regular React button element would. This button is delivered unstyled, you should style it to match your site.

Prop|Type|Required|Info -|-|-|- artistName|string|true|The artist who created the track artworkUrl|string|true|The URL of the album artwork trackName|string|true|The name of the track audioUrl|string|true|The URL of the track's audio trackId|string or number|true|The ID of the track in your own database, this should be unique and static.

Development

This repo contains both the library and an example app in the /example directory. This example app consumes the library and allows us to test it in an environment similar to that of an end user.

Running the example app

In two separate windows, run yarn start and yarn start-example. Changes to the library will automatically be reflected in the example application.

You'll need to get a Rotor OAuth access token and provide it when prompted in the example app. You can then change your access token if needed by clicking the 'Set Access Token' link in the sidebar.

Rotor developers can consult the Rotor Web documentation on how to acquire a token for local development. Non-Rotor devs should use the token provided for your integration.

Testing

The unit tests can be run using yarn test.

The linter can be run using yarn lint.

The Cypress integration tests can be run using either yarn cypress to open up the Cypress GUI or yarn cypress-headless to run the tests in headless mode. These tests communicate with the example app, so you'll need to have the example app running.

All the above testing and linting scripts can be run using the yarn test-all script.

Deploying to NPM

NPM deploys can be triggered from this page Ensure that the version number in the package.json has been appropriately updated before attempting a deploy, otherwise it will fail.

Staging and Production Test Apps

You'll need access keys from the respective backend for these to work. Non-Rotor devs will not be able to use these.

Staging Production

License

PRIVATE © Kanisi Ltd