@pie-framework/pie-player-components v2.10.0

Pie Player Components

STATUS - Pre-Alpha, this is a work in progress. Apis may change.

This package provides Custom Html Elements for using PIE Framework content.

It provides pie-player

<pie-player></pie-player>

For rendering PIE content, and pie-author

<pie-author></pie-author>

For authoring content.

Using these components

Script tag

Put

<script src='https://unpkg.com/@pie-framework@latest/dist/pie-player-components.js'></script>

in the head of your index.html

Then you can use the element anywhere in your template, JSX, html etc.

<pie-player id="player"></pie-player>
<script>
      const player = document.getElementById('player');

      player.addEventListener('session-changed', event => {
        // do something
      });

      player.config = config;
</script>

Node Modules

• Run npm install @pie-framework/pie-player-components --save
• Put this <script src='node_modules/@pie-framework/pie-player-components/dist/pie-player-components.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

VUE

1: Add the component to the dependencies

// package.json

"dependencies": {
  ...
  "@pie-framework/pie-player-components": "latest"
}

2: Import the component(s)

import { defineCustomElements } from '@pie-framework/pie-player-components/dist/loader';

defineCustomElements(window);

3: Consume the component

To prevent Vue from complaining that your component has an unrecognized tag, add the following in main.js. Use either the full name, or regex if you want to capture a family of components.

Vue.config.ignoredElements = [
  "pie-player",
  "pie-author"
];

It is now possible to use the tag provided by the pie components in any template of the app.

<pie-player v-bind:config.prop="config" />

React

TODO

TODO

Element Registry This is not working yet. Goal is for these components to use a controller that maintains a registry of which custom elements are installed and only reach out to the bundle build service when it needs new one(s).

• pie-loader should handle the possiblity of two versions of a PIE being loaded (will probably need build service update to include version in global key)
• handle re-setting of same player/author with a new config