Update dependencies

.babelrc

@@ -1,3 +1,15 @@
 {
-    "extends": "./node_modules/dash-components-archetype/config/babel/babelrc"
-}
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "env": {
+        "production": {
+            "plugins": ["@babel/plugin-proposal-object-rest-spread", "styled-jsx/babel"]
+        },
+        "development": {
+            "plugins": ["@babel/plugin-proposal-object-rest-spread", "styled-jsx/babel"]
+        },
+        "test": {
+            "plugins": ["@babel/plugin-proposal-object-rest-spread", "styled-jsx/babel-test"]
+        }
+    }
+  }
+

.eslintrc

@@ -1,2 +1,121 @@
----
-  extends: ./node_modules/dash-components-archetype/config/eslint/eslintrc-react.json
+{
+  "extends": ["eslint:recommended", "prettier"],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "arrowFunctions": true,
+      "blockBindings": true,
+      "classes": true,
+      "defaultParams": true,
+      "destructuring": true,
+      "forOf": true,
+      "generators": true,
+      "modules": true,
+      "templateStrings": true,
+      "jsx": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jasmine": true,
+    "jest": true,
+    "node": true
+  },
+  "globals": {
+    "jest": true
+  },
+  "plugins": [
+    "react",
+    "import"
+  ],
+  "rules": {
+    "accessor-pairs": ["error"],
+    "block-scoped-var": ["error"],
+    "consistent-return": ["error"],
+    "curly": ["error", "all"],
+    "default-case": ["error"],
+    "dot-location": ["off"],
+    "dot-notation": ["error"],
+    "eqeqeq": ["error"],
+    "guard-for-in": ["off"],
+    "import/named": ["off"],
+    "import/no-duplicates": ["error"],
+    "import/no-named-as-default": ["error"],
+    "new-cap": ["error"],
+    "no-alert": [1],
+    "no-caller": ["error"],
+    "no-case-declarations": ["error"],
+    "no-console": ["off"],
+    "no-div-regex": ["error"],
+    "no-dupe-keys": ["error"],
+    "no-else-return": ["error"],
+    "no-empty-pattern": ["error"],
+    "no-eq-null": ["error"],
+    "no-eval": ["error"],
+    "no-extend-native": ["error"],
+    "no-extra-bind": ["error"],
+    "no-extra-boolean-cast": ["error"],
+    "no-inline-comments": ["error"],
+    "no-implicit-coercion": ["error"],
+    "no-implied-eval": ["error"],
+    "no-inner-declarations": ["off"],
+    "no-invalid-this": ["error"],
+    "no-iterator": ["error"],
+    "no-labels": ["error"],
+    "no-lone-blocks": ["error"],
+    "no-loop-func": ["error"],
+    "no-multi-str": ["error"],
+    "no-native-reassign": ["error"],
+    "no-new": ["error"],
+    "no-new-func": ["error"],
+    "no-new-wrappers": ["error"],
+    "no-param-reassign": ["error"],
+    "no-process-env": ["warn"],
+    "no-proto": ["error"],
+    "no-redeclare": ["error"],
+    "no-return-assign": ["error"],
+    "no-script-url": ["error"],
+    "no-self-compare": ["error"],
+    "no-sequences": ["error"],
+    "no-shadow": ["off"],
+    "no-throw-literal": ["error"],
+    "no-undefined": ["error"],
+    "no-unused-expressions": ["error"],
+    "no-use-before-define": ["error", "nofunc"],
+    "no-useless-call": ["error"],
+    "no-useless-concat": ["error"],
+    "no-with": ["error"],
+    "prefer-const": ["error"],
+    "radix": ["error"],
+    "react/jsx-no-duplicate-props": ["error"],
+    "react/jsx-no-undef": ["error"],
+    "react/jsx-uses-react": ["error"],
+    "react/jsx-uses-vars": ["error"],
+    "react/no-did-update-set-state": ["error"],
+    "react/no-direct-mutation-state": ["error"],
+    "react/no-is-mounted": ["error"],
+    "react/no-unknown-property": ["error"],
+    "react/prefer-es6-class": ["error", "always"],
+    "react/prop-types": "error",
+    "valid-jsdoc": ["off"],
+    "yoda": ["error"],
+    "spaced-comment": ["error", "always", {
+      "block": {
+        "exceptions": ["*"]
+      }
+    }],
+    "no-unused-vars": ["error", {
+        "args": "after-used",
+        "argsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^e$"
+    }],
+    "no-magic-numbers": ["error", {
+      "ignoreArrayIndexes": true,
+        "ignore": [-1, 0, 1, 2, 3, 100, 10, 0.5]
+    }],
+    "no-underscore-dangle": ["off"]
+  }
+}

README.md

@@ -11,14 +11,10 @@ For updates and more, please see the dash community discussion on Dash Player.
 
 This is a custom community component, so if your organization or company is interested in sponsoring enhancements to this project, [please reach out to the Plotly Dash team](https://plot.ly/dash/pricing).
 
-Example from `usage-advanced.py`
-
-![Gif demoing Dash Player](images/usage-advanced.gif)
-
-
 ## Getting started
 
 Here are the following steps to get started with your own apps
+
 ```sh
 $ git clone https://github.com/xhlulu/dash-player.git
 $ cd dash-player
@@ -38,43 +34,40 @@ Once that done, you can copy the `dash_player` package in the folder of your app
 
 ## Documentation
 
-
-Prop | Description | Default
----- | ----------- | -------
-`id` | The ID used to identify this compnent in Dash callbacks |
-`url` | The url of a video or song to play<br/>&nbsp; ◦ &nbsp;Can be an [array](#multiple-sources-and-tracks) or [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) object
-`playing` | Set to `true` or `false` to pause or play the media | `false`
-`loop` | Set to `true` or `false` to loop the media | `false`
-`controls` | Set to `true` or `false` to display native player controls<br />&nbsp; ◦ &nbsp;Vimeo, Twitch and Wistia player will always display controls | `false`
-`volume` | Set the volume of the player, between `0` and `1`<br/>&nbsp; ◦ &nbsp;`null` uses default volume on all players [`#357`](https://github.com/CookPete/react-player/issues/357) | `null`
-`muted` | Mutes the player<br/>&nbsp; ◦ &nbsp;Only works if `volume` is set | `false`
-`width` | Set the width of the player | `640px`
-`height` | Set the height of the player | `360px`
-`style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element | `{}`
-`playsinline` | Applies the `playsinline` attribute where supported | `false`
-`currentTime` | Returns the number of seconds that have been played
-`secondsLoaded` | Returns the number of seconds that have been loaded
-`duration` | Returns the duration (in seconds) of the currently playing media
-`intervalCurrentTime`| Interval in milliseconds at which currenTtime prop is updated. | `40`
-`intervalSecondsLoaded` | Interval in milliseconds at which secondsLoaded prop is updated. | `500`
-`intervalDuration` | Interval in milliseconds at which duration prop is updated. | `500`
-`seekTo` | Seek to the given number of seconds, or fraction if amount is between 0 and 1 | `null`
-
+| Prop                    | Description                                                                                                                                                                                   | Default |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `id`                    | The ID used to identify this compnent in Dash callbacks                                                                                                                                       |
+| `url`                   | The url of a video or song to play<br/>&nbsp; ◦ &nbsp;Can be an [array](#multiple-sources-and-tracks) or [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) object |
+| `playing`               | Set to `true` or `false` to pause or play the media                                                                                                                                           | `false` |
+| `loop`                  | Set to `true` or `false` to loop the media                                                                                                                                                    | `false` |
+| `controls`              | Set to `true` or `false` to display native player controls<br />&nbsp; ◦ &nbsp;Vimeo, Twitch and Wistia player will always display controls                                                   | `false` |
+| `volume`                | Set the volume of the player, between `0` and `1`<br/>&nbsp; ◦ &nbsp;`null` uses default volume on all players [`#357`](https://github.com/CookPete/react-player/issues/357)                  | `null`  |
+| `muted`                 | Mutes the player<br/>&nbsp; ◦ &nbsp;Only works if `volume` is set                                                                                                                             | `false` |
+| `width`                 | Set the width of the player                                                                                                                                                                   | `640px` |
+| `height`                | Set the height of the player                                                                                                                                                                  | `360px` |
+| `style`                 | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element                                                                                             | `{}`    |
+| `playsinline`           | Applies the `playsinline` attribute where supported                                                                                                                                           | `false` |
+| `currentTime`           | Returns the number of seconds that have been played                                                                                                                                           |
+| `secondsLoaded`         | Returns the number of seconds that have been loaded                                                                                                                                           |
+| `duration`              | Returns the duration (in seconds) of the currently playing media                                                                                                                              |
+| `intervalCurrentTime`   | Interval in milliseconds at which currenTtime prop is updated.                                                                                                                                | `40`    |
+| `intervalSecondsLoaded` | Interval in milliseconds at which secondsLoaded prop is updated.                                                                                                                              | `500`   |
+| `intervalDuration`      | Interval in milliseconds at which duration prop is updated.                                                                                                                                   | `500`   |
+| `seekTo`                | Seek to the given number of seconds, or fraction if amount is between 0 and 1                                                                                                                 | `null`  |
 
 ## Built With
 
-* [Dash](https://dash.plot.ly/) - Main server and interactive components
-* [react-player](https://www.npmjs.com/package/react-player) - The react component that was wrapped by this
+- [Dash](https://dash.plot.ly/) - Main server and interactive components
+- [react-player](https://www.npmjs.com/package/react-player) - The react component that was wrapped by this
 
 ## Contributing
 
 Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
 
-
 ## Authors
 
-* **Xing Han** - *Initial Work* - [@xhlulu](https://github.com/xhlulu)
-* **Chris** - *Code Review*
+- **Xing Han** - _Initial Work_ - [@xhlulu](https://github.com/xhlulu)
+- **Chris** - _Code Review_
 
 See also the list of [contributors](https://github.com/xhlulu/dash-player/contributors) who participated in this project.
 

dash_player/DashPlayer.py

@@ -10,46 +10,84 @@ class DashPlayer(Component):
 and DailyMotion.
 
 Keyword arguments:
-- id (string; optional): The ID used to identify this compnent in Dash callbacks
-- url (string; optional): The url of a video or song to play
-◦  Can be an array or MediaStream object
-- playing (boolean; optional): Set to true or false to pause or play the media
-- loop (boolean; optional): Set to true or false to loop the media
-- controls (boolean; optional): Set to true or false to display native player controls
-Vimeo, Twitch and Wistia player will always display controls
-- volume (number; optional): Set the volume of the player, between 0 and 1
-null uses default volume on all players
-- muted (boolean; optional): Mutes the player
-Only works if volume is set
-- playbackRate (number; optional): Set the playback rate of the player
-Only supported by YouTube, Wistia, and file paths
-- width (string; optional): Set the width of the player
-- height (string; optional): Set the height of the player
-- style (dict; optional): Add inline styles to the root element
-- playsinline (boolean; optional): Applies the html5 playsinline attribute where supported, which allows
-videos to be played inline and will not automatically enter fullscreen
-mode when playback begins (for iOS).
-- currentTime (number; optional): Returns the number of seconds that have been played
-- secondsLoaded (number; optional): Returns the number of seconds that have been loaded
-- duration (number; optional): Returns the duration (in seconds) of the currently playing media
-- intervalCurrentTime (number; optional): Interval in milliseconds at which currenTtime prop is updated.
-- intervalSecondsLoaded (number; optional): Interval in milliseconds at which secondsLoaded prop is updated.
-- intervalDuration (number; optional): Interval in milliseconds at which duration prop is updated.
-- seekTo (number; optional): Seek to the given number of seconds, or fraction if amount is between 0 and 1"""
+
+- id (string; optional):
+    The ID used to identify this compnent in Dash callbacks.
+
+- controls (boolean; default False):
+    Set to True or False to display native player controls Vimeo,
+    Twitch and Wistia player will always display controls.
+
+- currentTime (number; optional):
+    Returns the number of seconds that have been played.
+
+- duration (number; optional):
+    Returns the duration (in seconds) of the currently playing media.
+
+- height (string; default '360px'):
+    Set the height of the player.
+
+- intervalCurrentTime (number; default 100):
+    Interval in milliseconds at which currenTtime prop is updated.
+
+- intervalDuration (number; default 500):
+    Interval in milliseconds at which duration prop is updated.
+
+- intervalSecondsLoaded (number; default 500):
+    Interval in milliseconds at which secondsLoaded prop is updated.
+
+- loop (boolean; default False):
+    Set to True or False to loop the media.
+
+- muted (boolean; default False):
+    Mutes the player Only works if volume is set.
+
+- playbackRate (number; default 1):
+    Set the playback rate of the player Only supported by YouTube,
+    Wistia, and file paths.
+
+- playing (boolean; default False):
+    Set to True or False to pause or play the media.
+
+- playsinline (boolean; default False):
+    Applies the html5 playsinline attribute where supported, which
+    allows videos to be played inline and will not automatically enter
+    fullscreen mode when playback begins (for iOS).
+
+- secondsLoaded (number; optional):
+    Returns the number of seconds that have been loaded.
+
+- seekTo (number; optional):
+    Seek to the given number of seconds, or fraction if amount is
+    between 0 and 1.
+
+- style (dict; optional):
+    Add inline styles to the root element.
+
+- url (string; optional):
+    The url of a video or song to play ◦  Can be an array or
+    MediaStream object.
+
+- volume (number; optional):
+    Set the volume of the player, between 0 and 1 None uses default
+    volume on all players.
+
+- width (string; default '640px'):
+    Set the width of the player."""
+    _children_props = []
+    _base_nodes = ['children']
+    _namespace = 'dash_player'
+    _type = 'DashPlayer'
     @_explicitize_args
     def __init__(self, id=Component.UNDEFINED, url=Component.UNDEFINED, playing=Component.UNDEFINED, loop=Component.UNDEFINED, controls=Component.UNDEFINED, volume=Component.UNDEFINED, muted=Component.UNDEFINED, playbackRate=Component.UNDEFINED, width=Component.UNDEFINED, height=Component.UNDEFINED, style=Component.UNDEFINED, playsinline=Component.UNDEFINED, currentTime=Component.UNDEFINED, secondsLoaded=Component.UNDEFINED, duration=Component.UNDEFINED, intervalCurrentTime=Component.UNDEFINED, intervalSecondsLoaded=Component.UNDEFINED, intervalDuration=Component.UNDEFINED, seekTo=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'url', 'playing', 'loop', 'controls', 'volume', 'muted', 'playbackRate', 'width', 'height', 'style', 'playsinline', 'currentTime', 'secondsLoaded', 'duration', 'intervalCurrentTime', 'intervalSecondsLoaded', 'intervalDuration', 'seekTo']
-        self._type = 'DashPlayer'
-        self._namespace = 'dash_player'
+        self._prop_names = ['id', 'controls', 'currentTime', 'duration', 'height', 'intervalCurrentTime', 'intervalDuration', 'intervalSecondsLoaded', 'loop', 'muted', 'playbackRate', 'playing', 'playsinline', 'secondsLoaded', 'seekTo', 'style', 'url', 'volume', 'width']
         self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'url', 'playing', 'loop', 'controls', 'volume', 'muted', 'playbackRate', 'width', 'height', 'style', 'playsinline', 'currentTime', 'secondsLoaded', 'duration', 'intervalCurrentTime', 'intervalSecondsLoaded', 'intervalDuration', 'seekTo']
+        self.available_properties = ['id', 'controls', 'currentTime', 'duration', 'height', 'intervalCurrentTime', 'intervalDuration', 'intervalSecondsLoaded', 'loop', 'muted', 'playbackRate', 'playing', 'playsinline', 'secondsLoaded', 'seekTo', 'style', 'url', 'volume', 'width']
         self.available_wildcard_properties =            []
-
         _explicit_args = kwargs.pop('_explicit_args')
         _locals = locals()
-        _locals.update(kwargs)  # For wildcard attrs
+        _locals.update(kwargs)  # For wildcard attrs and excess named props
         args = {k: _locals[k] for k in _explicit_args if k != 'children'}
-
         for k in []:
             if k not in args:
                 raise TypeError(