@pie-api/pie-api-player

A custom element that renders pies and interacts with pie-api.

install

npm install

commands

commands	description
demo/run --port XXXX (default: 4001)	run demo code, see below
npm test
npm run release	commit the release to github and send the webpack bundle to s3
npm run build	build the bundle
npm run deploy-to-s3	send the webpack bundle to s3

release a beta

./node_modules/.bin/release-it --preRelease

```

# demo

When you run the demo, you get a little demo page where you can see the player element in use.
Also you can use `/player.js` in other applications. This can be useful if you need to load it up in another app.

# build

The build outputs a reqular npm package + a webpack bundle (`player.js` and `player.js.map`). This is until we figure out how this is best consumed in the pie-api.

# Usage

```html
<!-- load by item (creates a new session) -->
<pie-api-player token="token" item-id="itemId" host="host"></pie-api-player>
<!-- load by session  -->
<pie-api-player token="token" session-id="sessionId" host="host"></pie-api-player>

<pie-api-configure token="token" itemId="itemId" host="host"></pie-api-configure>

attributes	description
token	the pie-api token used for authentication
host	the host of pie-api default: https://pie-api.io/services
itemId	for the player loads for that itemId and creates a session, for editor load that item
sessionId	for the player only loads for that sessionId

events	description
session-created	(player) dispatched if the item has loaded with a sessionId that was not specified on load.

Customizing the config

You can customize the player/editor endpoints completely if you want in js. This must be done before you mount the element.

const player = document.createElement("pie-api-player");
player.config = {
  endpoints: { host, load, saveSession, model, score }
};

const editor = document.createElement("pie-api-ediitor");

editor.config = {
  endpoints: { host, load, save }
};

If you have set the host attribute AND set {endpoints: {host}}, the latter will be used.

todos..

• instance lifecycle handling
• multiple instances on page
• session id support
• s3 deploy w/ tagged version?