test-html-player v1.1.0-test

html-player

Uses @slidebean/render to produce assets to be used by html-exporter. For clients of html-player (such as html-exporter), the assets of html-player are located at:

./node_modules/@slidebean/html-player/dist/

How it works

The the html-player is a small angular app that has slidebean dependencies; the main dependency is @slidebean/render. The html-player expects an html file that contains the presentation data in a variable called __sb__. It uses @slidebean/core to instantiate the objects for the json data to be passed to the render component.

Example html file:

<script>
  window.__sb__ = {
    presentation: {"title":"icons","owner":
   {"__type":"Pointer","className":"_User","objectId":"PE9xMpcCYG"},
    ...
</script>    

Updating @slidebean/render

If render is updated, the html-player needs rebuilt and published to npm so so that html-exporter can also be updated.

# get the latest
npm install --save @slidebean/render@latest

# rebuild the assets
npm run _build

# bump version, update to github, etc...

# publish
npm publish

Hiding assets

By default angular produces a ./dist directory with the index.html and many assets (fonts, js, fav icons. etc...). This is a problem for the html-exports if we want to produce a "clean" export for users. The way that we get around this is by changing the paths of assets in the html file. This is done in the build step. Below is the structure of an html folder.

HTML Folder

├── assets
│   ├── favicon.ico
│   ├── fonts
│   │   └── ...
│   ├── img
│   │   └── ...
│   ├── js
│   │   └── ...
│   └── render
│       └── ...
└── presentation.html

The build does the following:

• build the angular app
• move favicon to assets folder
• make img directory
• make a .gitkeep file to make sure the directory is created
• make js directory
• move *.bundle.js files into assets/js
• remove bundle map files
• remove unneeded fontawesome files
• update the fontawesomoe paths in the styles.bundle.js
• copy the test index.html for testing.

ng build --output-hashing=none && \
  mv dist/favicon.ico dist/assets/ && \
  mkdir dist/assets/img && \
  touch dist/assets/img/.gitkeep && \ 
  mkdir dist/assets/js && \
  mv dist/*.bundle.js dist/assets/js/ && \
  rm dist/*.bundle.js.map && \
  rm dist/fontawesome-* && \
  node update-font-path && \
  cp index.html dist/

Building

Run npm run _build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

note: we renamed build to _build so npm would not automatically build the project on the npm servers; we build locally only. We also renamed postinstall to _postinstall or clients that use @slidebean/html-player would break.

deploying to npm

npm publsh

development

# watch and compile and changes
npm run dev