diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..6e5a532
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "extends": "./node_modules/dash-components-archetype/config/babel/babelrc"
+}
\ No newline at end of file
diff --git a/.builderrc b/.builderrc
new file mode 100644
index 0000000..8cf7af3
--- /dev/null
+++ b/.builderrc
@@ -0,0 +1,3 @@
+---
+archetypes:
+ - dash-components-archetype
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..0c30581
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,2 @@
+---
+ extends: ./node_modules/dash-components-archetype/config/eslint/eslintrc-react.json
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..abe98a0
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,16 @@
+build/
+coverage/
+dist/
+lib/
+lib/bundle.js*
+node_modules/
+dash_player/metadata.json
+dash_player/bundle.js*
+.npm
+vv/
+venv/
+*.pyc
+*.egg-info
+*.log
+.DS_Store
+.idea
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..dbd8407
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,9 @@
+node_modules/
+.npm
+.git/
+vv/
+venv/
+*.pyc
+*.log
+.DS_Store
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..6024edb
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,16 @@
+# Change Log for dash-player
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## Unreleased
+
+### Added
+- Feature x
+
+### Fixed
+- Bug y
+
+## 0.0.1 - 2018-07-26
+- Initial release
+
+[Unreleased]: https://github.com/plotly/dash-player/v0.0.1...HEAD
diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 0000000..8d611d7
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 plotly
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/MANIFEST.in b/MANIFEST.in
new file mode 100644
index 0000000..f30443f
--- /dev/null
+++ b/MANIFEST.in
@@ -0,0 +1,5 @@
+include dash_player/bundle.js
+include dash_player/bundle.js.map
+include dash_player/metadata.json
+include README.md
+include LICENSE.md
diff --git a/README.md b/README.md
index e0e4bb5..10d0db1 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,164 @@
-# dash-player
\ No newline at end of file
+# dash-player
+
+A Dash component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion.
+
+## Dash
+
+Go to this link to learn about [Dash][].
+
+## Getting started
+
+```sh
+# Install dependencies
+$ npm install
+
+# Watch source for changes and build to `lib/`
+$ npm start
+```
+
+## Development
+
+### Demo server
+
+You can start up a demo development server to see a demo of the rendered
+components:
+
+```sh
+$ builder run demo
+$ open http://localhost:9000
+```
+
+You have to maintain the list of components in `demo/Demo.react.js`.
+
+### Code quality and tests
+
+#### To run lint and unit tests:
+
+```sh
+$ npm test
+```
+
+#### To run unit tests and watch for changes:
+
+```sh
+$ npm run test-watch
+```
+
+#### To debug unit tests in a browser (Chrome):
+
+```sh
+$ npm run test-debug
+```
+
+1. Wait until Chrome launches.
+2. Click the "DEBUG" button in the top right corner.
+3. Open up Chrome Devtools (`Cmd+opt+i`).
+4. Click the "Sources" tab.
+5. Find source files
+ - Navigate to `webpack:// -> . -> spec/components` to find your test source files.
+ - Navigate to `webpack:// -> [your/repo/path]] -> dash-player -> src` to find your component source files.
+6. Now you can set breakpoints and reload the page to hit them.
+7. The test output is available in the "Console" tab, or in any tab by pressing "Esc".
+
+#### To run a specific test
+
+In your test, append `.only` to a `describe` or `it` statement:
+
+```javascript
+describe.only('Foo component', () => {
+ // ...
+})l
+```
+
+### Testing your components in Dash
+
+1. Build development bundle to `lib/` and watch for changes
+
+ # Once this is started, you can just leave it running.
+ $ npm start
+
+2. Install module locally (after every change)
+
+ # Generate metadata, and build the JavaScript bundle
+ $ npm run install-local
+
+ # Now you're done. For subsequent changes, if you've got `npm start`
+ # running in a separate process, it's enough to just do:
+ $ python setup.py install
+
+3. Run the dash layout you want to test
+
+ # Import dash-player to your layout, then run it:
+ $ python my_dash_layout.py
+
+
+**TODO:** There is a workflow that links your module into `site-packages` which would
+make it unnecessary to re-run `2.` on every change: `python setup.py develop`.
+Unfortunately, this doesn't seem to work with resources defined in
+`package_data`.
+
+See https://github.com/plotly/dash-components-archetype/issues/20
+
+
+## Installing python package locally
+
+Before publishing to PyPi, you can test installing the module locally:
+
+```sh
+# Install in `site-packages` on your machine
+$ npm run install-local
+```
+
+## Uninstalling python package locally
+
+```sh
+$ npm run uninstall-local
+```
+
+## Publishing
+
+For now, multiple steps are necessary for publishing to NPM and PyPi,
+respectively. **TODO:**
+[#5](https://github.com/plotly/dash-components-archetype/issues/5) will roll up
+publishing steps into one workflow.
+
+Ask @chriddyp to get NPM / PyPi package publishing accesss.
+
+1. Preparing to publish to NPM
+
+ # Bump the package version
+ $ npm version major|minor|patch
+
+ # Push branch and tags to repo
+ $ git push --follow-tags
+
+2. Preparing to publish to PyPi
+
+ # Bump the PyPi package to the same version
+ $ vi setup.py
+
+ # Commit to github
+ $ git add setup.py
+ $ git commit -m "Bump pypi package version to vx.x.x"
+
+3. Publish to npm and PyPi
+
+ $ npm run publish-all
+
+## Builder / Archetype
+
+We use [Builder][] to centrally manage build configuration, dependencies, and
+scripts.
+
+To see all `builder` scripts available:
+
+```sh
+$ builder help
+```
+
+See the [dash-components-archetype][] repo for more information.
+
+
+[Builder]: https://github.com/FormidableLabs/builder
+[Dash]: https://github.com/plotly/dash2
+[dash-components-archetype]: https://github.com/plotly/dash-components-archetype
diff --git a/dash_player/__init__.py b/dash_player/__init__.py
new file mode 100644
index 0000000..a701292
--- /dev/null
+++ b/dash_player/__init__.py
@@ -0,0 +1,33 @@
+import os as _os
+import dash as _dash
+import sys as _sys
+from .version import __version__
+
+_current_path = _os.path.dirname(_os.path.abspath(__file__))
+
+_components = _dash.development.component_loader.load_components(
+ _os.path.join(_current_path, 'metadata.json'),
+ 'dash_player'
+)
+
+_this_module = _sys.modules[__name__]
+
+
+_js_dist = [
+ {
+ "relative_package_path": "bundle.js",
+ "external_url": (
+ "https://unpkg.com/dash-player@{}"
+ "/dash_player/bundle.js"
+ ).format(__version__),
+ "namespace": "dash_player"
+ }
+]
+
+_css_dist = []
+
+
+for _component in _components:
+ setattr(_this_module, _component.__name__, _component)
+ setattr(_component, '_js_dist', _js_dist)
+ setattr(_component, '_css_dist', _css_dist)
diff --git a/dash_player/version.py b/dash_player/version.py
new file mode 100644
index 0000000..b8023d8
--- /dev/null
+++ b/dash_player/version.py
@@ -0,0 +1 @@
+__version__ = '0.0.1'
diff --git a/demo/Demo.react.js b/demo/Demo.react.js
new file mode 100644
index 0000000..cb70827
--- /dev/null
+++ b/demo/Demo.react.js
@@ -0,0 +1,30 @@
+import React, {Component} from 'react';
+import {ExampleComponent} from '../src';
+
+class Demo extends Component {
+ constructor() {
+ super();
+ this.state = {
+ value: ''
+ }
+ }
+
+ render() {
+ return (
+
+
dash-player Demo
+
+ ExampleComponent
+ this.setState({value: newProps.value})}
+ />
+
+ );
+ }
+}
+
+export default Demo;
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..b15bcbb
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/demo/index.js b/demo/index.js
new file mode 100644
index 0000000..5714e06
--- /dev/null
+++ b/demo/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Demo from './Demo.react';
+
+// Fix for rendering React externally:
+// See https://github.com/gaearon/react-hot-loader/tree/v1.3.1/docs#usage-with-external-react
+const rootInstance = ReactDOM.render(
+
+ ExampleComponent: {label}
+
+ );
+ }
+}
+
+ExampleComponent.propTypes = {
+ /**
+ * The ID used to identify this compnent in Dash callbacks
+ */
+ id: PropTypes.string,
+
+ /**
+ * A label that will be printed when this component is rendered.
+ */
+ label: PropTypes.string.isRequired,
+
+ /**
+ * The value displayed in the input
+ */
+ value: PropTypes.string,
+
+ /**
+ * Dash-assigned callback that should be called whenever any of the
+ * properties change
+ */
+ setProps: PropTypes.func
+};
diff --git a/src/components/PlayerComponent.react.js b/src/components/PlayerComponent.react.js
new file mode 100644
index 0000000..adc65c5
--- /dev/null
+++ b/src/components/PlayerComponent.react.js
@@ -0,0 +1,132 @@
+import React, {Component} from 'react';
+import ReactPlayer from 'react-player';
+import PropTypes from 'prop-types';
+
+/**
+ * ExampleComponent is an example component.
+ * It takes a property, `label`, and
+ * displays it.
+ * It renders an input with the property `value`
+ * which is editable by the user.
+ */
+export default class PlayerComponent extends Component {
+ render() {
+ const {
+ url,
+ playing,
+ loop,
+ controls,
+ volume,
+ muted,
+ playbackRate,
+ width,
+ height,
+ progressInterval,
+ playsinline
+ } = this.props;
+
+ return (
+