Purpose

To produce a ready-to-use React component that can play the sentences in a given article, and mark the sentences in the DOM.

Playback controls are not included in the component, but examples of how to implement them are.

Usage

Installation

yarn add @inlasningstjanst/dtmn_player

Arguments

apiUrl: (string) Required. The url to the ILT API, serving the audio files

token: (string) Required. The authorization JWT token provided by ILT.

url: (string) Optional. The url to requested article. Defaults to window.location, but this will only work in a production environment where there is only one article per page.

backgroundColor: (string) Optional. The background color of marked text

color: (string) Optional. The color of marked text

onAudioEnded: (func) Optional. Callback when audio playback ends

onSentencePlay: (func) Optional. Callback when audio playback starts/resumes to play

playToSentence: (number) Optional. If provided, the player will play until selected number of sentence

playbackSpeed: (float) Optional. The playback speed. Recommended value is between 0.8 and 2.0. Default is 1.0.

domContainerQuery: (string) Optional. If provided, the player will look for the sentences to mark in the first DOM element matching provided query. Defaults to container query set in the article. Important that this is set properly if there are more than one instance of the same article in a page.

Public methods

To call methods on the component, use the ref argument as demonstrated below.

play(): Will start playing recorded sentences

pause(): Will pause any currently playing sentence

reset(): Will stop any currently playing sentence reset playback to first sentence

nextSentence(): Will play the next sentence

prevSentence(): Will play the previous sentence

playSentence(x): Will jump to and play sentence x (where x is the order within the article)

isAvailable(): (bool) Returns true if the specified article is found, published and ready to play.

Example

import IltDtmnPlayer from "@inlasningstjanst/dtmn_player";
<IltDtmnPlayer
	ref={player => {
		this.player = player;
	}}
	backgroundColor="#808000"
	color="#FFFF00"
	onAudioEnded={this.onAudioEnded}
        onSentencePlay={this.onSentencePlay}
        playToSentence={10}
	playbackSpeed={1.0}
	domContainerQuery="#articles #article-12345"
	apiUrl="[URL TO ILT API]"
	url="[URL TO CURRENT ARTICLE]"
	token="[JWT TOKEN OBTAINED FROM ILT]"
/>;

For a more detailed example, please see the provided files in the /examples folder

Available Scripts

In the project directory, you can run:

yarn transpile

Builds the player component into the /dist folder, ready to be imported into another project as a IltDtmnPlayer component.

yarn start

Runs the example app in development mode. Open http://localhost:3001 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

yarn test

Runs all tests in the project.

yarn build

Builds the example app to the examples/build folder.

Distribution

The transpiled component is ready to use by a React application. To publish the packaged component to NPM, run:

npm publish --access public

Authorization

The transpiled component expects a JWT token that will be forwarded and verified by the API. This token determines if the user has access to the requested article or not.

See this ILT confluence article for more info about how to obtain a valid token: https://publisher-auth-dev.inlasningstjanst.se/docs/