timeside-player
⚠️ This player is in pre-alpha stage.
Timeside Player is an application and library for Timeside Rest API.
Demo: https://ircam-web.github.io/timeside-player/
This project is built with :
- Typescript
- Vue 3
- ESLint: Linting
- Jest: Unit Testing
- Cypress: End-to-end testing
- EditorConfig
- Github Actions: CI & Deployment
- Dependabot
Library usage
Usage (UMD)
<!-- Player location -->
<div id="timeside-player"></div>
<!-- Load CSS -->
<link href="https://unpkg.com/@ircam/timeside-player@latest/lib/style.css" rel="stylesheet">
<!-- Load latest version -->
<script src="https://unpkg.com/@ircam/timeside-player@latest/lib/timeside-player.umd.js"></script>
<!-- Init the player -->
<script>
const timesideUuid = '733f655a-1c9d-4ab8-93af-53eeddb030db'
const apiUrl = 'https://sandbox.wasabi.telemeta.org'
const player = window.TimesidePlayer('#timeside-player', timesideUuid, apiUrl)
</script>For a usage example, see lib-examples/umd/index.html
Usage (CommonJS): Webpack, Rollup etc...
npm install --save @ircam/timeside-player@latest
import TimesidePlayer from '@ircam/timeside-player'
const playerDiv = document.querySelector('#timeside-player')
const timesideItem = '733f655a-1c9d-4ab8-93af-53eeddb030db'
const timesidePlayer = TimesidePlayer(playerDiv, timesideItem)
// You can unload it
// timesidePlayer.destroy()For an integration example with React, see lib-examples/react/src/TimesidePlayer.jsx.
If you want to load the package from a CDN for an up-to-date version, see lib-examples/react/src/TimesidePlayerCDN.jsx.
Project setup
npm install
Configure environment
cp env.example .env.local
$EDITOR .env.local
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Run your unit tests
npm run test:unit
Run your end-to-end tests
In order to run unit tests, you'll to set the following cypress environments variables:
-
TIMESIDE_USER: Username for the Timeside API -
TIMESIDE_PASS: Password for the Timeside API -
TIMESIDE_BASE_URL: Base URL for the Timeside API (e.g 'https://sandbox.wasabi.telemeta.org')
For local environment, you may want to make use of the cypress.env.json file which has a template.
cp cypress.env.json.example cypress.env.json
You can edit the file to set the appropriate values.
$EDITOR cypress.env.json
And run the end-to-end test suite.
npm run test:e2e
Lints and fixes files
npm run lint