Skip to content

41 add build instructions to readme #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexshoe merged 24 commits into from
Sep 30, 2022
Merged

41 add build instructions to readme #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
1b6ed3e
Added manual build instructions
srhm-ca Sep 28, 2022
b964882
Formatted headline
srhm-ca Sep 28, 2022
cb883c0
Add className attribute
srhm-ca Sep 29, 2022
0e2959b
Fix typo
srhm-ca Sep 29, 2022
579b9a1
Rebuild DashPlayer with className attribute
srhm-ca Sep 29, 2022
c6f4013
Remove test attribute
srhm-ca Sep 29, 2022
4102a18
Linting
srhm-ca Sep 29, 2022
8a359f5
Update README.md with new attribute
srhm-ca Sep 29, 2022
7eb90d3
Fix typo in property description
alexshoe Sep 29, 2022
8e251fd
Add detail to property documentation and fix typos
alexshoe Sep 29, 2022
62e717a
Rebuild Dash Player
alexshoe Sep 29, 2022
e77a82f
Add additional change to property docs
alexshoe Sep 29, 2022
0afee30
Update README to reflect property doc changes
alexshoe Sep 29, 2022
66ba182
Fix package name
alexshoe Sep 29, 2022
786c916
Add class property to the rendering process
alexshoe Sep 29, 2022
5406a44
Merge pull request #47 from plotly/21-css-classes
srhm-ca Sep 30, 2022
c38d0c2
Added manual build instructions
srhm-ca Sep 28, 2022
b6a5ca7
Formatted headline
srhm-ca Sep 28, 2022
6bccc37
Add detail to property documentation and fix typos
alexshoe Sep 30, 2022
1641398
Rebuild Dash Player
alexshoe Sep 30, 2022
cb5fcf3
Add additional change to property docs
alexshoe Sep 29, 2022
9e1692c
Update README to reflect property doc changes
alexshoe Sep 30, 2022
08051ff
Merge branch '41-add-build-instructions-to-readme' of https://github.…
alexshoe Sep 30, 2022
41094df
Merge branch '41-add-build-instructions-to-readme' of https://github.…
alexshoe Sep 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions @plotly/dash_player/@plotly/dash_player.min.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion @plotly/dash_player/@plotly/dash_player.min.js.map
View file
Open in desktop

This file was deleted.

75 changes: 41 additions & 34 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,72 @@
Dash Player: Control and play videos using Dash
# Dash Player

![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)
[![GitHub stars](https://img.shields.io/github/stars/xhlulu/dash-player.svg)](https://github.com/xhlulu/dash-player/stargazers)

Dash Player is a dash component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. It is wrapped around the react-player component.
Dash Player is a Dash component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. It is wrapped around the [ReactPlayer](https://github.com/cookpete/react-player) component.

You can find a [demo of the component here](http://dash-player-usage.herokuapp.com).

For updates and more, please see the dash community discussion on Dash Player.
For updates and more, please see the ongoing changes to this repository's issue tracker or 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).

## Getting started

Here are the following steps to get started with your own apps
Here are the following steps to get started with using Dash Player in your own Dash apps

```sh
$ git clone https://github.com/xhlulu/dash-player.git
$ git clone https://github.com/plotly/dash-player
$ cd dash-player
$ npm install
$ python usage-advanced.py
```

Once that done, you can copy the `dash_player` package in the folder of your app, and import it within your app.
Once that's done, you can copy the `dash_player` package in the folder of your app, and import it within your app.

## Build manually

To generate builds manually, run the following:

```sh
$ npm install webpack webpack-cli
$ npm run build:all
```

## Usage

`usage.py` provides you with the basic functionality of the app. Use it to learn how to use the component.
`usage.py` provides you with the basic functionality of the app. Use it to learn the most basic implementation of a Dash Player component.

`usage-methods.py` lets you test the props that are updated at an interval, which are originally react instance methods.
`usage-methods.py` allows you to test properties that are updated at an interval.

`usage-advanced.py` gives an overview of the full functionality of the component, and serves as an extensive testing tool.

## 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 component in Dash callbacks. |
| `className` | The CSS class used to identify this component in external stylesheets. |
| `url` | The url of the media to be played. |
| `playing` | Whether or not the media is currently playing. Can be set to `True` or `False` to play and pause the media, respectively. | `false` |
| `loop` | Whether or not the media will loop once the player reaches the end. Can be set to `True` or `False` to set looping on or off, respectively. | `false` |
| `controls` | Set to true or false to display native player controls. Vimeo, Twitch and Wistia player will always display controls. | `false` |
| `volume` | A number between `0` and `1` representing the volume of the player. If set to None, Dash Player ises default volume on all players. | `null` |
| `muted` | Set to true or false to mute or unmute player volume, respectively. Only works if volume is set. | `false` |
| `playbackRate` | Set the playback rate of the player (only supported by YouTube, Wistia, and file paths). |
| `width` | A number or string representing the pixel width of the player. | `640px` |
| `height` | A number or string representing the pixel height of the player. | `360px` |
| `style` | Optional additional CSS styles. If width or height are supplied within style, then this will override the component-level width or height. | `{}` |
| `playsinline` | 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). | `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
- [ReactPlayer](https://www.npmjs.com/package/react-player) - The react component that was wrapped by this

## Contributing

Expand All @@ -67,12 +75,11 @@ Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduc
## Authors

- **Xing Han** - _Initial Work_ - [@xhlulu](https://github.com/xhlulu)
- **Alex Hsu** - _Maintainer/Ongoing Developer_ - [@alexshoe](https://github.com/alexshoe)
- **Chris** - _Code Review_

See also the list of [contributors](https://github.com/xhlulu/dash-player/contributors) who participated in this project.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

## Acknowledgments
Loading