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/