@twipla/recordings-player v0.0.1-rc.10

TWIPLA Recordings Player

React library that allows playing TWIPLA recordings.

Installation and usage

Installation

npm install @twipla/recordings-library

Usage

In order to get started with the lightest integration, the following props are mandatory:

• websiteId - the id of the website where the recordings were created
• sessionId - the id of the session for which the recording events need to be played
• token - bearer token used for interacting with the TWIPLA API (note: pass only the token, without Bearer)

import { TwiplaPlayer } from '@twipla/recordings-player';
import '@twipla/recordings-player/dist/esm/index.css';

const ReactComponent = () => {
  return <TwiplaPlayer
    websiteId={WEBSITE_ID}
    sessionId={SESSION_ID}
    token={AUTHENTICATION_TOKEN}
  />
};

Customization options

In addition to the mandatory props listed above, there are others available:

• loaderNode - will be displayed as long as the API calls are in progress
• errorNode - will be displayed if an error occurs
• playButton - allows the customization of a play/pause button with proprietary components/icons
• skipInactiveSwitch - allows the customization of the skip inactive switch with a proprietary component
• toggleFullScreenButton - allows the customization of the fullscreen toggle button with a proprietary component

<TwiplaPlayer
      loaderNode={<Loader />}
      errorNode={({ message, status }) => <ErrorNode message={message} status={status} />}
      playButton={({ isPlaying }) => <div>{isPlaying ? 'Playing' : 'Paused'}</div>}
      skipInactiveSwitch={({ isSkipping }) => <div>{isSkipping ? 'Skipping' : 'Not skipping'}</div>}
      toggleFullScreenButton={({ isFullscreen }) => <div>{isFullscreen ? 'Minimize' : 'Maximize'}</div>}
/>

© TWIPLA, 2024