# interaction-player

> Interaction Player

Latest version **5.8.8-SNAPSHOT** (published 2018-09-26) · private license · 0 weekly downloads

## Install

```sh
npm install interaction-player
pnpm add interaction-player
yarn add interaction-player
bun add interaction-player
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.8.8-SNAPSHOT |
| Published | 2018-09-26 |
| First published | 2018-09-26 |
| Weekly downloads | 0 |
| License | private |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 29 |
| Unpacked size | 792.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ZOOM International, s.r.o. |
| Maintainers | blueberrynpm |

## Links

- npm: https://www.npmjs.com/package/interaction-player
- Repository: https://stash:7999/up/universal-player-client
- Homepage: http://www.zoomint.com
- npm.io page: https://npm.io/package/interaction-player

## Dependencies (29)

- [most](https://npm.io/package/most.md) ^1.7.0
- [debug](https://npm.io/package/debug.md) ^3.0.1
- [react](https://npm.io/package/react.md) ~15.3.2
- [redux](https://npm.io/package/redux.md) ~3.6.0
- [enzyme](https://npm.io/package/enzyme.md) ~2.6.0
- [moment](https://npm.io/package/moment.md) ~2.16.0
- [core-js](https://npm.io/package/core-js.md) ^2.5.1
- [express](https://npm.io/package/express.md) ~4.14.0
- [history](https://npm.io/package/history.md) 2.0.1
- [loglevel](https://npm.io/package/loglevel.md) ~1.4.1
- [immutable](https://npm.io/package/immutable.md) ~3.8.1
- [invariant](https://npm.io/package/invariant.md) ~2.2.2
- [react-dom](https://npm.io/package/react-dom.md) ~15.3.2
- [classnames](https://npm.io/package/classnames.md) ~2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [superagent](https://npm.io/package/superagent.md) ^3.6.3
- [react-redux](https://npm.io/package/react-redux.md) ~4.4.6
- [most-subject](https://npm.io/package/most-subject.md) ^5.3.0
- [serve-static](https://npm.io/package/serve-static.md) ~1.11.1
- [@zoom/recd-rx](https://npm.io/package/@zoom/recd-rx.md) ^0.10.4
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0
- [estraverse-fb](https://npm.io/package/estraverse-fb.md) ~1.3.1
- [serve-favicon](https://npm.io/package/serve-favicon.md) ~2.3.0
- [sockjs-client](https://npm.io/package/sockjs-client.md) ~1.1.1
- [react-input-slider](https://npm.io/package/react-input-slider.md) ~1.5.0
- [redux-side-effects](https://npm.io/package/redux-side-effects.md) ~0.2.6
- [react-document-meta](https://npm.io/package/react-document-meta.md) ~2.0.3
- [@zoom/player-playlist](https://npm.io/package/@zoom/player-playlist.md) ^1.0.0-alpha-23
- [react-addons-test-utils](https://npm.io/package/react-addons-test-utils.md) ~15.3.2

## Recent versions

- 5.8.8-SNAPSHOT (latest) — 2018-09-26

## README

# Redux-side-effects driven react boilerplate

This is a very simple example to illustrate the usage of
[redux-side-effects](https://github.com/salsita/redux-side-effects) with
[react](https://www.npmjs.com/package/react).
Together with the pre-configured development tools like
[eslint](http://eslint.org),
[webpack](https://github.com/webpack/webpack),
and testing frameworks like
[karma](http://karma-runner.github.io/0.13/index.html),
[mocha](https://github.com/mochajs/mocha), and various other
[packages](#list-of-dependencies),
it can be used as a basis for coding new React/Redux projects.


1. [Usage](#usage)
2. [Development](#development)
  1. [Using immutable for redux store state](#using-immutable-for-redux-store-state)
  2. [Passing environment variables to client](#passing-environment-variables-to-client)
3. [Server source code](#server-source-code)
4. [Client source code](#client-source-code)
  1. [Application URL router](#application-url-router)
  2. [Side-effects](#side-effects)
  3. [URL history](#url-history)
5. [Quest list](#quest-list)
  1. [Hot reloading](#hot-reloading)
  2. [Clean up webpack configuration](#clean-up-webpack-configuration)
  3. [Better side-effects example](#better-side-effects-example)
6. [Server tests](#server-tests)
7. [package.json](#package-json)
  1. [List of dependencies](#list-of-dependencies)


## Usage
```
git clone git@github.com:salsita/redux-boilerplate.git
cd redux-boilerplate
npm install
npm start
```
Navigate your browser to http://localhost:3000/


## Development
```
npm run start:dev
```
Navigate your browser to http://localhost:3001/


### Using immutable for redux store state

[Immutable](https://github.com/facebook/immutable-js) object
is used for the store instead of a plain JavaScript object.
This is against the redux specification. Because of this the
combineReducers 
function from
[redux-side-effects](https://github.com/salsita/redux-side-effects#readme)
can not be used out of the box.

The use of combineReducers is inevitable for instance for the
use of [redux-form](https://github.com/erikras/redux-form)
in the project.

Either the developer writes their own combineReducers function
(like the [hive](https://github.com/salsita/hive) project does)
or use the provided combineReducers function and relax the constraints
from for instance this:
```
import { fromJS } from 'immutable';
export default fromJS({
  appState: {
    history: null
  },
  effects: []
});
```
to this:
```
import { fromJS } from 'immutable';
export default {
  main: fromJS({
    appState: {
      history: null
    },
    effects: []
  })
};
```


### Passing environment variables to client
This is an example from the hive project on how an environment variable
is passed to the client (browser-side) code.
https://github.com/salsita/hive/blob/develop/web/webpack/webpack.frontend.config.js

```
const plugins = [
  new webpack.DefinePlugin({
    "process.env": {
      HIVE_LOGIN_PAGE: JSON.stringify(process.env.HIVE_LOGIN_PAGE),
      HIVE_LOGOUT_PAGE: JSON.stringify(process.env.HIVE_LOGOUT_PAGE)
    }
  })
];
...
module.exports = {
  ...
  plugins: plugins
};
```
On the client side, the variables are then accessed the same way
as on the server side:
```
process.env.HIVE_LOGIN_PAGE;
process.env.HIVE_LOGOUT_PAGE;
```


## Quest list
 * autoprefixer-loader is deprecated. postcss-loader should be used instead.
 * In `npm run build-artefacts`, the including of the node\_modules directory
should not be necessary because webpack tracks dependencies via require() statements
and it is therefore suppossed to deliver them.
 * In router `src/client/Routes.jsx`, the default action should be to redirect
to the root path (`/`) instead of displaying the not found page (via
the `NotFound` component. Either check if the router allows it,
or perhaps implement the component to dispatch an action (at some point)
that will redirect to the root path.


### Hot reloading
Hot reloading is not working properly (or at all). It may have to do with the use of devRunner.js,
and maybe that the client does not connect back to the webpack-dev-server to listen for
refresh events due to not being passed the port number.

Also
[react-hot-loader](https://github.com/gaearon/react-hot-loader) is going to be phased out so
[react-transform-hmr](https://github.com/gaearon/react-transform-hmr) should be used instead.
For instance the book
[SurviveJS - Webpack and React](https://leanpub.com/survivejs_webpack_react)
presents a working example.


### Clean up webpack configuration
There are currently four webpack configuration files which is way to many.
There is a separate configuration file for frontend (the client),
the backend (the server), and the development and production environment.

The webpack.backend.config.js and webpack.frontend.config.js are utilized
by webpack which is started by the babel-node in the start:dev package.json
command (done via devRunner.js).

There should be a common file for both backend and frontend to get
rid of the duplicate configuration. Then instead of having four webpack files,
use the process.env.npm\_lifecycle\_event to make selection between
a production and a development build. 

For instance use this in webpack.conf:
```
var webpack = require('webpack');
var merge = require('webpack-merge');
const TARGET = process.env.npm_lifecycle_event;
const common = { // shared configuration for production and development builds };
// ...
if (TARGET === 'start') {
  module.exports = merge(common, { // production but not development configuration });  
}
if (TARGET === 'start:dev') {
  module.exports = merge(common, { // development but not production configuration });
}
```
Where the start and start:dev commands come from package.json
```
{
  "scripts": {
    "start":     // command to start the production build
    "start:dev": // command start the development build
  }
}
```

For example it usefull to have the webpack configuration to enable source maps
for the development builds but not for the production builds. And also
to have the production build source code minified
([see -d and -p options](https://webpack.github.io/docs/cli.html))
to decrease
the network traffic and the browser application load time.


### Better side-effects example

Better side-effects example is needed. Something to show handling of success and failure
using store reducers when exchanging data with the server.


## Server source code

The server `src/server/main.js` source code listens for http requests on port 3000,
or port number configured by the environment variable PORT. It serves static files
from the `dist/client` directory under url path `/`. It returns JSON data
for http get request on path `/hello`. For every other url path,
the server returns the default `index.html` page.


## Client source code

### Application URL router

The client router `src/client/Router.jsx` shows which React component implements which url path.
For instance when the user types into a browser a url path that the server does not know
and replies with the default `index.html` file content, the client `NotFound` React component
will render the 404 Page Not Found in the browser.


### Side-effects

This a simple example of a side effect from `src/client/reducers/testingReducer.js`.
The side-effect here is the dispatch of the routerBootstrapped action. 
```
export function* applicationMounting(state) {
  yield (dispatch) => {
    dispatch(TestingActions.routerBootstrapped(history));
  };

  return state;
}

export function* routerBootstrapped(state, _history) {
  return state.setIn(['appState', 'history'], _history);
}
```

### URL history

Sometimes it is needed to be able to navigate to different url path
from a current one. Regardless of how the url path is constructed,
the `pushState` function of the `history` object can be used
to instruct the browser to change to the given url path.
The application router then gets to select the component
to render the page based on the new url path.
No request to the server is made.

Example from `src/client/reducers/testingReducer.js`:
```
import createBrowserHistory from 'history/lib/createBrowserHistory';
const history = createBrowserHistory();

export function* fooClicked(state) {
  history.pushState({}, '/foo');
  return state;
}

export function* barClicked(state) {
  history.pushState({}, '/bar');
  return state;
}
```


## Favicon

Favicon did not always function properly. The trick that made the favicon to be picked up by the browser
was to add the graphics in png format `src/client/static-resources/favicon.png`
and to modify the `src/client/static-resources/index.html` to let the browser
to choose from multiple formats. Like this:
```
<head>
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <link rel="icon" href="favicon.png" type="image/png" /> ...
</head>
```


## Server tests

There are two commands to run the same set of backend tests: `npm run test_backend`
and `npm run test_backend_cci`. The reason is that mocha only allows for one
test reporter. The test reporter `nyan` produces test reports readable by the user.
The test reporter `mocha-junit-reporter` produces test reports for
[CircleCI](https://circleci.com/) (Circle Continuous Integration, hence the `_cci` suffix).
The test reports are written to file `test-results.xml`.


## package.json

If `npm install` command is to succeed on Windows (without cygwin), then the command must not
use any syntax or programs specific to the Unix environment.

The `npm run build-artifacts` command produces production tarball for CircleCI which deploys it.
Therefore it has to be named artifacts, not artefacts
([interesting note](http://grammarist.com/spelling/artefact-artifact/)).

Be prepared to do some configuration tinkering when placing shared source code outside
the package.json directory, in order to make the eslint and babel to correctly work
with these files.


### List of dependencies

This is the list of dependencies taken from the package.json file with some short descriptions.

Development dependencies | Synopsis
------------------------ | --------
[autoprefixer-loader](https://github.com/passy/autoprefixer-loader#readme)  | Makes require('./file.css'); to compile and add the CSS to your page.
[babel, babel-core](https://babeljs.io)   | Latest (ES2015 and beyond) JavaScript transpiler/compiler.
[babel-eslint](https://github.com/babel/babel-eslint)       | Allows to lint all valid Babel code with ESLlint.
[babel-loader](https://github.com/babel/babel-loader)       | Allows transpiling JavaScript files using Babel and webpack.
[css-loader](https://github.com/webpack/css-loader#readme)  | CSS loader for webpack.
[eslint](http://eslint.org)   | Pluggable linting utility for JavaScript and JSX.
[eslint-config-airbnb](https://github.com/airbnb/javascript)    | Airbnb JavaScript Style Guide.
[eslint-loader](https://github.com/MoOx/eslint-loader#readme)   | ESLint loader for webpack
[eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import)   | ESLint plugin with support for linting of ES2015+ (ES6+) import/export syntax.
[eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react)     | React specific linting rules for ESLint.
[file-loader](https://github.com/webpack/file-loader)   | var url = require("file!./file.png"); // => emits file.png as file in the output directory and returns the public url
[font-awesome](http://fontawesome.io)   | Scalable vector icons that can instantly be customized with CSS. 
[font-awesome-webpack](https://github.com/gowravshekar/font-awesome-webpack)  | Font awesome configuration and loading package for webpack, using font-awesome (Less).
[karma](http://karma-runner.github.io/0.13/index.html)  | Testing environment to make test-driven development easy.
[karma-chai](http://xdissent.github.io/karma-chai/)     | Make the Chai assertion library available in Karma.
karma-chrome-launcher    | x
karma-cli                | x
karma-junit-reporter     | x
karma-mocha              | x
[karma-nyan-reporter](https://github.com/dgarlitt/karma-nyan-reporter#readme)   | Nyan Cat style test results reporter.
karma-phantomjs-launcher | x
karma-webpack            | x
[mocha](https://github.com/mochajs/mocha)   | JavaScript test framework for Node.js and the browser.
[mocha-junit-reporter](https://github.com/michaelleeallen/mocha-junit-reporter#readme)  | Produces JUnit-style XML test results.
[phantomjs](https://github.com/Medium/phantomjs)  | Scripted, headless browser used for automating web page interaction.
[phantomjs-polyfill](https://github.com/conversocial/phantomjs-polyfill)  | This is a polyfill for function.prototype.bind which is missing from PhantomJS.
[raw-loader](https://github.com/webpack/raw-loader)                       | var fileContent = require("raw!./file.txt"); // => returns file.txt content as string
[react-hot-loader](https://github.com/gaearon/react-hot-loader)           | Re-render the source code changes automatically in the browser.
[request](https://github.com/request/request#readme)                      | Simple way to make http calls with https and redirect support.
[single-child](https://github.com/twolfson/single-child)                  | Spawn a single child process which kills itself on restart.
[sinon](http://sinonjs.org)                                               | Standalone test spies, stubs and mocks for JavaScript.
[sinon-chai](https://github.com/domenic/sinon-chai#readme)                | Provide sinon for use with the Chai assertion library.
[source-map-support](https://github.com/evanw/node-source-map-support#readme) | Source map support for stack traces in node via the V8 stack trace API.
[style-loader](https://github.com/webpack/style-loader#readme)            | Style loader for webpack.
[url-loader](https://github.com/webpack/url-loader#readme)                | Url loader for webpack.
[webpack](https://github.com/webpack/webpack)                             | Module bundler. The main purpose is to bundle JavaScript files for usage in a browser.
[webpack-dev-server](https://github.com/webpack/webpack-dev-server)       | Serves a webpack application. Updates the browser on changes.


Dependencies            | Synopsis
----------------------- | --------
[babel-runtime](https://www.npmjs.com/package/babel-runtime)    | Self-contained babel runtime.
[bluebird](https://github.com/petkaantonov/bluebird)            | JavaScript promise library.
[express](http://expressjs.com)     | Web application framework for Node.js. 
[history](https://github.com/rackt/history#readme)          | JavaScript library to manage session history in browsers (and testing environments).
[immutable](https://github.com/facebook/immutable-js)       | Immutable collections for JavaScript. Immutable data cannot be changed once created.
[invariant](https://github.com/zertosh/invariant#readme)    | Throw exception if condition is false.
[less, less-loader](http://lesscss.org)        | CSS pre-processor. Adds variables, mixins, functions and other techniques.
[react](https://www.npmjs.com/package/react)   | JavaScript library for user interfaces.
[react-document-meta](https://github.com/kodyl/react-document-meta#readme)  | HTML meta tags for React-based applications.
[react-dom](https://www.npmjs.com/package/react-dom)    | Entry point of the DOM-related rendering paths (ReactDOM.render()).
[react-redux](https://github.com/gaearon/react-redux)   | React bindings for Redux.
[react-router](https://github.com/rackt/react-router/tree/master/docs)  | Router directs URLs in a single page application to specific handlers.
[redux](http://rackt.org/redux)     | Predictable state container for JavaScript applications.
[redux-router](https://github.com/acdlite/redux-router#readme)              | Library to keep the router state (current pathname, query, and params) inside the Redux store.
[redux-side-effects](https://github.com/salsita/redux-side-effects#readme)  | Redux store implementation with proper interface for asynchronous store operations.
[serve-favicon](https://github.com/expressjs/serve-favicon) | Node.js middleware for serving a favicon.
[serve-static](https://github.com/expressjs/serve-static)   | Node.js middleware to serve static files from withing a given root directory.

---
_Source: https://npm.io/package/interaction-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._