docs: example and contribution guide (#10)

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,11 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Report a Bug
+    url: https://dashboard.bitmovin.com/support/tickets
+    about: Report a Bug you encountered in our Player React Native SDK in your Bitmovin Customer Dashboard.
+  - name: Feature Requests
+    url: https://community.bitmovin.com/t/how-to-submit-a-feature-request-to-us/1463
+    about: Learn how to suggest new features for our Player SDKs.
+  - name: Report a security vulnerability
+    url: https://bitmovin.atlassian.net/wiki/external/1502085332/YTYwODMwZjQyNjkwNGQ0ODg5MTgwM2NhMDliNjRmODE
+    about: Report a security vulnerability.

.gitignore

@@ -9,3 +9,5 @@ coverage
 npm-debug.log*
 
 release/.npmrc
+
+example/src/config.ts

CHANGELOG.md

@@ -9,17 +9,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Initial React wrapper implementation
-- CI workflow
-- Release workflow
-- Skip CHANGELOG update option to the release workflow
-- Pre-commit hook for linting
+- Initial React wrapper implementation ([#1](https://github.com/bitmovin/bitmovin-player-react/pull/1))
+- CI workflow ([#2](https://github.com/bitmovin/bitmovin-player-react/pull/2))
+- Release workflow ([#3](https://github.com/bitmovin/bitmovin-player-react/pull/3))
+- Skip CHANGELOG update option to the release workflow  ([#6](https://github.com/bitmovin/bitmovin-player-react/pull/6))
+- Pre-commit hook for linting ([#9](https://github.com/bitmovin/bitmovin-player-react/pull/9))
+- Example ([#10](https://github.com/bitmovin/bitmovin-player-react/pull/10))
+- Contribution guide ([#10](https://github.com/bitmovin/bitmovin-player-react/pull/10))
+- Issue template ([#10](https://github.com/bitmovin/bitmovin-player-react/pull/10))
 
 ### Changed
 
-- Improve `UIVariant` imports
-- Include React 18 in peer dependencies
-- Safe NPM login in the release workflow
+- Improve `UIVariant` imports ([#4](https://github.com/bitmovin/bitmovin-player-react/pull/4))
+- Include React 18 in peer dependencies ([#5](https://github.com/bitmovin/bitmovin-player-react/pull/5))
+- Safe NPM login in the release workflow ([#7](https://github.com/bitmovin/bitmovin-player-react/pull/7))
 
 ### Fixed
 

CONTRIBUTING.md

@@ -0,0 +1,75 @@
+# Contributing
+
+## Issues
+
+With bugs and problems, please try to describe the issue as detailed as possible to help us reproduce it.
+
+## Pull Requests
+
+Before creating a pull request, please
+
+- Make sure all guidelines are followed
+- Make sure your branch is free of merge conflicts
+
+## Development workflow
+
+To get started with the project:
+
+- Create the config file from the dist file `cp ./example/src/config.dist.ts ./example/src/config.ts` and update it with your Bitmovin Player license key
+- Run `npm run bootstrap && npm run start:dev` in the root directory to install the required dependencies for each package, start the example app and the build scripts in the watch mode. Any changes you make in your library's JavaScript (TypeScript) code will be reflected in the example app without a rebuild.
+
+## TypeScript Code Style
+
+- Follow the `eslint` rules (`npm run lint`). They are enforced automatically via a pre-commit git hook.
+- Public functions should be documented with a description that explains _what_ it does
+- Every code block that does not obviously explain itself should be commented with an explanation of _why_ and _what_ it does
+
+## Linting
+
+### Typescript
+
+- [ESLint](https://eslint.org/)
+- [Prettier](https://prettier.io/)
+- [TypeScript](https://www.typescriptlang.org/)
+
+We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing.
+
+Our pre-commit hooks verify that the linter will pass when committing. Make sure your code passes TypeScript and ESLint. Run the following to verify:
+
+```sh
+npm run lint
+```
+
+To fix lint errors, run the following:
+
+```sh
+npm run lint:fix
+```
+
+## Testing
+
+Remember to add tests for your change if possible. Run the tests by:
+
+```sh
+npm run test
+```
+
+### Adding new tests
+
+To add new tests:
+
+1. Create a new file `*.test.ts` or `*.test.tsx` near the file you want to test
+2. Implement the test suite using the Jest framework
+3. Refer to the `BitmovinPlayer.test.tsx` as an example
+
+## Scripts
+
+The `package.json` file contains various scripts for common tasks:
+
+- `npm run bootstrap`: setup the whole project by installing all dependencies
+- `npm run start:dev`: start the example app and the build scripts in the watch mode
+- `npm run build`: compile TypeScript files into `./dist`
+- `npm run release`: release a new version of the package
+- `npm run lint`: lint files with ESLint (includes Prettier)
+- `npm run lint:fix`: fix lint errors
+- `npm run test`: run the tests

README.md

@@ -1,6 +1,16 @@
-# Bitmovin player React wrapper
+# Bitmovin Player React
 
-# Getting started
+This is an open-source project created to enable customers to integrate the Bitmovin Player into React projects. It has been created to provide customers with a starting point, which can be built upon through active collaboration and contributions. We look forward to seeing this library expand and grow.
+
+[![CI](https://github.com/bitmovin/bitmovin-player-react/actions/workflows/ci.yml/badge.svg)](https://github.com/bitmovin/bitmovin-player-react/actions/workflows/ci.yml)
+[![MIT License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)
+[![Bitmovin Community](https://img.shields.io/discourse/users?label=community&server=https%3A%2F%2Fcommunity.bitmovin.com)](https://community.bitmovin.com/?utm_source=github&utm_medium=bitmovin-player-react&utm_campaign=dev-community)
+[![npm version](https://img.shields.io/npm/v/bitmovin-player-react)](https://www.npmjs.com/package/bitmovin-player-react)
+[![npm dm](https://img.shields.io/npm/dm/bitmovin-player-react.svg)](https://www.npmjs.com/package/bitmovin-player-react)
+[![npm dt](https://img.shields.io/npm/dt/bitmovin-player-react.svg)](https://www.npmjs.com/package/bitmovin-player-react)
+
+
+# Getting Started
 
 1. `npm i bitmovin-player-react bitmovin-player bitmovin-player-ui --save`
 2. Add `import "bitmovin-player-ui/dist/css/bitmovinplayer-ui.css";` to your entry point file
@@ -33,8 +43,9 @@ export function MyComponent() {
 }
 ```
 
+# Documentation
 
-# Dynamically update player source config
+## Dynamically update player source config
 
 `BitmovinPlayer` keeps track of the source config and reloads the player when the source config changes:
 
@@ -76,7 +87,7 @@ export function MyComponent() {
 }
 ```
 
-# Attach event listeners
+## Attach event listeners
 
 ```tsx
 import { PlayerConfig, PlayerEvent } from "bitmovin-player";
@@ -104,7 +115,7 @@ export function MyComponent() {
 }
 ```
 
-# Get player instance
+## Get player instance
 
 ```tsx
 import { PlayerAPI } from "bitmovin-player";
@@ -127,9 +138,9 @@ export function MyComponent() {
 }
 ```
 
-# Customize player UI
+## Customize player UI
 
-## Use UI container
+### Use UI container
 
 You can use `UIContainer` from https://www.npmjs.com/package/bitmovin-player-ui to customize the player UI:
 
@@ -158,7 +169,7 @@ export function MyComponent() {
 }
 ```
 
-## Use UI variants
+### Use UI variants
 
 You can use `UIVariant`s from https://www.npmjs.com/package/bitmovin-player-ui to customize the player UI:
 
@@ -203,7 +214,7 @@ export function MyComponent() {
 }
 ```
 
-## Use custom CSS
+### Use custom CSS
 
 You either can implement your own CSS for the default player UI or build on top of `bitmovin-player-ui/dist/css/bitmovinplayer-ui.css`.
 
@@ -233,7 +244,7 @@ export function MyComponent() {
 
 ```
 
-## Disable UI
+### Disable UI
 
 ```tsx
 import { PlayerConfig } from "bitmovin-player";
@@ -261,9 +272,9 @@ export function MyComponent() {
 }
 ```
 
-# Possible pitfalls
+## Possible pitfalls
 
-## Avoid source object recreation on every render
+### Avoid source object recreation on every render
 
 ```tsx
 export function MyComponent() {
@@ -326,3 +337,27 @@ export function MyComponent() {
   );
 }
 ```
+
+# Maintenance and Updates
+
+As an open source project, this library is not part of a regular maintenance or update schedule and is updated on an adhoc basis when contributions are made.
+
+# Contributing to this project
+
+We are pleased to accept changes, updates and fixes from the community wishing to use and expand this project. Bitmovin will review any Pull Requests made. We do our best to provide timely feedback, but please note that no SLAs apply. New releases are tagged and published on our discretion. Please see [CONTRIBUTING.md](CONTRIBUTING.md) for more details on how to contribute.
+
+## Raising a Feature Suggestion
+
+If you see something missing that might be useful but are unable to contribute the feature yourself, please feel free to [submit a feature request](https://community.bitmovin.com/t/how-to-submit-a-feature-request-to-us/1463) through the Bitmovin Community. Feature suggestions will be considered by Bitmovin’s Product team for future roadmap plans.
+
+## Reporting a bug
+
+If you come across a bug related to the Bitmovin Player React, please raise this through the support ticketing system accessible in your [Bitmovin Dashboard](https://dashboard.bitmovin.com/support/tickets).
+
+## Support and SLA Disclaimer
+
+As an open-source project and not a core product offering, any request, issue or query related to this project is excluded from any SLA and Support terms that a customer might have with either Bitmovin or another third-party service provider or Company contributing to this project. Any and all updates are purely at the contributor's discretion.
+
+## Need more help?
+
+Should you need further help, please raise your request to your Bitmovin account team. We can assist in a number of ways, from providing you professional services help to putting you in touch with preferred system integrators who can work with you to achieve your goals.

example/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/bitmovin.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bitmovin Player React Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>