player-preact-webpack-nd

# Getting Started ## About > **This project is exclusively intended for official partners of** > **[Audio Intakes](https://www.audiointakes.com/) (@audio-intakes) and is of no** > **use if you don't have the required API credentials.** Our Player component houses the result of a candidate answering all answers and completing the audio intake in our [Recorder](https://www.npmjs.com/package/@audio-intakes/recorder) component (i.e. a submission). The candidate has answered certain questions in the Recorder component and your users can (re)view these answers in our Player component within your software. Each instance of the Player component consumes, amongst other properties, a unique submissionId. So each instance of our Player component represents a set of audio answers (including transcriptions) provided by a particular candidate (in a particular step in the process). The audio of each answer can be played and the transcription of each answer can be read and updated (in case of obvious errors). In addition, your users can export the audio and transcriptions for reviewing and sharing purposes. #### Example ![Audio intake – 03 playing](https://user-images.githubusercontent.com/25084776/152657350-af7227f1-3c51-4bdf-853d-40fc43c799a4.svg) ## Installation ``` yarn add @audio-intakes/player ``` or ``` npm install --save @audio-intakes/player ``` or ```HTML <head> ...  <script src="//components.audiointakes.com/player.js"></script> ... </head> ``` ## Importing ES6: ```JavaScript import "@audio-intakes/player"; ``` CommonJS: ```JavaScript require("@audio-intakes/player"); ``` ## Versions Latest: 0.3.1 ## Usage ### Authorization To be able to use the Player application you are required to pass on a valid JWT bearer token. This token can be fetched using your api credentials (key and secret) provided by us. The token expires after one day but if the Player receives an expired token it will inform you with this feedback. #### Endpoint Development: ``` https://partner-api-development.onrender.com/v1/auth/login ``` Production: ``` https://partner-api-production.onrender.com/v1/auth/login ``` #### Headers **Content-Type** application/json #### Body ```json { "apiKey": "<YOUR_API_KEY>", "apiSecret": "<YOUR_API_SECRET>" } ``` It's recommended that you store your API Key and API Secret in safe environment. You will be sent two sets of credentials: one for development and one for production. #### Return When you pass your credentials this endpoint will return a JWT bearer token with an issued at timestamp. The token expires after one day but if the Player receives an expired token it will inform you with this feedback. ```json { "accessToken": "<your_access_token>" } ``` ### Example For the container div the minimum required width is **320px** and the minimum required height **180px**. The Player will read these dimensions and if not sufficient update the UI with this message. #### NPM ```jsx import "@audio-intakes/player"; function Demo() { return ( <div id="player-container" style="min-width: 320px; min-height:180px"> <audio-intakes-player-component token="<your_access_token>" customer="<a_valid_customer_id>" submission="<a_valid_submission_id>" language="en-gb" theme="dark" /> </div> ); } render(<Demo />); ``` #### CDN When you have added the player script with the cdn you can add it like this: ```html <body> <div id="player-container" style="min-width: 320px; min-height:180px"> <audio-intakes-player-component token="<your_token>" customer="<a_valid_customer_id>" submission="<a_valid_submission_id>" language="en-gb" theme="dark" /> </div> </body> ``` ### Arguments | Argument | Type | Description | Default value | | :-------------------- | :----- | :----------------------------------------------------------------------------- | :---------------------------------------------------------- | | token (required) | String | JWT bearer token | undefined | | customer (required) | String | A valid customer id to authorize the provided submissionId | undefined | | submission (required) | String | A valid submission id to fetch the right submission | undefined | | theme (optional) | String | A theme name (see available themes) that defines the colors of the application | "light" | | language (optional) | String | A language locale (see available languages) | The user's browser language if available, otherwise "en-gb" | ### Available languages | Language | Locale | | :------- | :------ | | English | "en-gb" | | Dutch | "nl" | ### Available themes `["light", "dark"]` ### Browser compatibility IE Edge Firefox Chrome Safari Opera Safari on iOS Opera mini Android browser Opera mobile Chrome for Android Firefox for Android ### Errors #### API | Error (code) | Description | | :--------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Not found (404) | Usually returned when the API doesn’t find the requested resource using its ID reference. In the case of the Player component this could either mean the `customerId` of the `submissionId`. | | Unauthorized (401) | Returned when either the JWT token in invalid/expired or if you are not authorized to fetch the required submission based on the provided customerId. | | Internal service error (501) | Our API experiences an internal error. We will get notified when this happens and we will do everything to get us back live as soon as possible. | #### Properties | Error | Description | | :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Invalid token | The token is not provided, not of type `string`, not a JWT token or, the token is expired. | | Invalid customerId | The customerId is either not provided or not of type `string`. | | Invalid submissionId | The submissionId is either not provided or not of type `string`. | | Invalid language | The language is either not of type `string` or not (yet) supported by us. You can find the supported languages under the 'Available languages' section in this README.md. | | Invalid theme | The theme is either not of type `string` or not (yet) supported by us. You can find the supported themes under the 'Available themes' section in this README.md. | #### Device | Error | Description | | :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Insufficient size | The size of the element containing our Player component is not sufficient. Our player component requires a minimum width of **320px** and a minimum height of **180px**. | | Unsupported browser | The device or browser is not supported by our Player component. You can find the list of supported browsers under the 'Browser compatibility' section in this README.md. |  ## Troubleshooting If you have any trouble understanding our documentation please feel free to contact us at: **Partner support:** partners@audiointakes.com or via our **Slack channel:**