Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @ndxlabs/ndx-js with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var ndxJs = require("@ndxlabs/ndx-js")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@ndxlabs/ndx-js v2.1.3

NDX connects audiences with information in movies and television.



NPM Version GitHub top language GitHub License Dependencies


NDX is the industry's new standard for connecting information to movies and television. NDX improves the TV viewing experience by connecting audiences with more information about the actors and locations they see on screen.

Installation

Using either NPM or Yarn:

npm install @ndxlabs/ndx-js
yarn add @ndxlabs/ndx-js

Usage

Javascript


<div class="ndx-embed"></div>

<script src="https://unpkg.com/@ndxlabs/ndx-js"></script>
<script>

  ndx.configure({
    apiKey: 'ab3rGRg4iwC5Qy...'
  });

  const tech = ndx.Tech('.ndx-embed', '1234567...', {
    list: {
      orientation: ndx.HORIZONTAL,
      view: ndx.LIST,
      style: {
        position: 'absolute',
        bottom: '2em',
        left: '0'
      }
    },
    detail: {
      relatedContent: true
    }
  });

  tech.list.show().updateTime(5);

</script>

React


import React from 'react';
import { withRouter } from 'react-router';
import { NDX, ndx } from '@ndxlabs/ndx-js';

import Controls from '../../components/Controls';
import Player from '../../components/Player';

const Watch = withRouter(({ match, store }) => {
  const { videoId } = match.params;
  const { playing, currentTime } = store.getState().player;

  return (
    <div className="watch-page">
      <NDX apiKey={process.env.REACT_APP_NDX_API_KEY} />
      <Player>
        <Controls />
        <NDX.Tech 
          videoId={videoId} 
          show={!playing}
          currentTime={currentTime}
          list={{
            orientation={ndx.HORIZONTAL}
            style: {
              position: 'absolute',
              bottom: '2em',
              left: '0'
            }
          }} />
      </Player>
    </div>
  );
});

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free