Build/react wrapper

.npmignore

@@ -0,0 +1,2 @@
+demos/*
+sandbox/*

README.md

@@ -161,24 +161,25 @@ Use HTML to add or remove any of the controls. Then you can use CSS to style the
 
 ### Included elements
 
-| Element                        | Description                                                                                                                                                                                                 |
-| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `<media-controller>`           | Wraps controls and the media element, and handles communication between them. ([docs](./docs/media-controller.md))                                                                                          |
-| `<media-control-bar>`          | Optional controls container to help align the controls in the standard fashion.                                                                                                                             |
-| `<media-play-button>`          | Toggle media playback                                                                                                                                                                                       |
-| `<media-mute-button>`          | Toggle the sound. The icon responds to volume changes and acts as part of the typical volume control.                                                                                                       |
-| `<media-volume-range>`         | Change the volume of the sound.                                                                                                                                                                             |
-| `<media-time-range>`           | See how far the playhead is through the media duration, and seek to new times.                                                                                                                              |
-| `<media-time-display>`         | Show the time of the playhead.<br><br>Options: <br>`<media-time-display remaining>` Show as remaining time <br>`<media-time-display show-duration>` Also show the duration after a slash. Ex: `1:00 / 2:00` |
-| `<media-duration-display>`     | Show the duration of the media                                                                                                                                                                              |
-| `<media-fullscreen-button>`    | Toggle fullscreen viewing                                                                                                                                                                                   |
-| `<media-pip-button>`           | Toggle picture-in-picture mode of the video                                                                                                                                                                 |
-| `<media-playback-rate-button>` | Change the speed of playback                                                                                                                                                                                |
-| `<media-seek-backward-button>` | Jump back 30 seconds in the media                                                                                                                                                                           |
-| `<media-seek-forward-button>`  | Jump ahead 30 seconds in the media                                                                                                                                                                          |
-| `<media-captions-button>`      | Show/disable captions (if no captions are available, will fallback to subtitles by default unless `no-subtitles-fallback` attribute is set)                                                                 |
-| `<media-airplay-button>`       | Bring up the AirPlay menu to select/deselect AirPlay playback (Safari only).                                                                                                                                |
-| More to come                   | Requests and contributions welcome                                                                                                                                                                          |
+| Element                        | Description                                                                                                                                                                                                                                         |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<media-controller>`           | Wraps controls and the media element, and handles communication between them. ([docs](./docs/media-controller.md))                                                                                                                                  |
+| `<media-control-bar>`          | Optional controls container to help align the controls in the standard fashion.                                                                                                                                                                     |
+| `<media-play-button>`          | Toggle media playback. ([docs](./docs/media-play-button.md))                                                                                                                                                                                        |
+| `<media-mute-button>`          | Toggle the sound. The icon responds to volume changes and acts as part of the typical volume control. ([docs](./docs/media-mute-button.md))                                                                                                         |
+| `<media-volume-range>`         | Change the volume of the sound. ([docs](./docs/media-volume-range.md))                                                                                                                                                                              |
+| `<media-time-range>`           | See how far the playhead is through the media duration, and seek to new times. ([docs](./docs/media-time-range.md))                                                                                                                                 |
+| `<media-time-display>`         | Show the time of the playhead.<br><br>Options: <br>`<media-time-display remaining>` Show as remaining time <br>`<media-time-display show-duration>` Also show the duration after a slash. Ex: `1:00 / 2:00`. ([docs](./docs/media-time-display.md)) |
+| `<media-duration-display>`     | Show the duration of the media                                                                                                                                                                                                                      |
+| `<media-fullscreen-button>`    | Toggle fullscreen viewing. ([docs](./docs/media-fullscreen-button.md))                                                                                                                                                                              |
+| `<media-pip-button>`           | Toggle picture-in-picture mode of the video. ([docs](./docs/media-pip-button.md))                                                                                                                                                                   |
+| `<media-playback-rate-button>` | Change the speed of playback. ([docs](./docs/media-playback-rate-button.md))                                                                                                                                                                        |
+| `<media-seek-backward-button>` | Jump back `n` seconds in the media (default 30). ([docs](./docs/media-seek-backward-button.md))                                                                                                                                                     |
+| `<media-seek-forward-button>`  | Jump ahead `n` seconds in the media (default 30). ([docs](./docs/media-seek-forward-button.md))                                                                                                                                                     |
+| `<media-captions-button>`      | Show/disable captions (if no captions are available, will fallback to subtitles by default unless `no-subtitles-fallback` attribute is set). ([docs](./docs/media-captions-button.md))                                                              |
+| `<media-airplay-button>`       | Bring up the AirPlay menu to select/deselect AirPlay playback (Safari only). ([docs](./docs/media-airplay-button.md))                                                                                                                               |
+| `<media-loading-indicator>`    | Show when your media content is loading/buffering. ([docs](./docs/media-loading-indicator.md))                                                                                                                                                      |
+| More to come                   | Requests and contributions welcome                                                                                                                                                                                                                  |
 
 ### Extras
 
@@ -221,6 +222,10 @@ Be sure to include the `slot="media"` attribute in the player's tag.
 </media-controller>
 ```
 
+## Use with React
+
+While you technically can use the Media Chrome directly with React, it can sometimes be a bit clunky to work with Web Components in React, and some things just don't feel idiomatic to the framework. To help with this, we've published some React wrapper components for all of our core Elements. You can read up on using them [here](./docs/react.md).
+
 ## Why?
 
 More often than not web designers and developers just use the default media player controls, even when creating a beautiful custom design theme. It's hard not to.

demos/nextjs-with-typescript/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

demos/nextjs-with-typescript/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

demos/nextjs-with-typescript/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

demos/nextjs-with-typescript/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

demos/nextjs-with-typescript/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig;

demos/nextjs-with-typescript/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nextjs-with-typescript",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "media-chrome": "link:../../",
+    "next": "12.0.10",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.16",
+    "@types/react": "17.0.39",
+    "eslint": "8.8.0",
+    "eslint-config-next": "12.0.10",
+    "typescript": "4.5.5"
+  }
+}

demos/nextjs-with-typescript/pages/_app.tsx

@@ -0,0 +1,8 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

demos/nextjs-with-typescript/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

demos/nextjs-with-typescript/pages/index.tsx

@@ -0,0 +1,94 @@
+import type { NextPage } from "next";
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
+import {
+  MediaController,
+  MediaControlBar,
+  MediaTimeRange,
+  MediaTimeDisplay,
+  MediaLoadingIndicator,
+  MediaVolumeRange,
+  MediaPlaybackRateButton,
+  MediaPlayButton,
+  MediaSeekBackwardButton,
+  MediaSeekForwardButton,
+  MediaMuteButton,
+  MediaCaptionsButton,
+  MediaAirplayButton,
+  MediaPipButton,
+  MediaFullscreenButton,
+} from "media-chrome/dist/react";
+
+const primaryColor = "white";
+const chromeStyles = {
+  "--media-icon-color": primaryColor,
+  "--media-range-thumb-background": primaryColor,
+  "--media-range-bar-color": primaryColor,
+  color: primaryColor,
+};
+
+const Home: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Media Chrome React+Next.JS</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to <a href="https://www.media-chrome.org" target="_blank">Media Chrome!</a>
+        </h1>
+        <MediaController
+          ref={(node: HTMLElement) => console.log("ref", node)}
+          style={chromeStyles}
+        >
+          <video
+            slot="media"
+            src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
+            preload="auto"
+            muted
+            crossOrigin=""
+          >
+            <track
+              label="thumbnails"
+              default
+              kind="metadata"
+              src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt"
+            />
+            <track
+              label="English"
+              kind="captions"
+              srcLang="en"
+              src="./vtt/en-cc.vtt"
+            />
+          </video>
+          <div slot="centered-chrome" no-auto-hide="">
+            <MediaLoadingIndicator
+              style={{ "--media-loading-icon-width": 80 }}
+            ></MediaLoadingIndicator>
+          </div>
+          <MediaControlBar>
+            <MediaPlayButton></MediaPlayButton>
+            <MediaSeekBackwardButton></MediaSeekBackwardButton>
+            <MediaSeekForwardButton></MediaSeekForwardButton>
+            <MediaTimeRange></MediaTimeRange>
+            <MediaTimeDisplay showDuration></MediaTimeDisplay>
+            <MediaMuteButton></MediaMuteButton>
+            <MediaVolumeRange></MediaVolumeRange>
+            <MediaPlaybackRateButton></MediaPlaybackRateButton>
+            <MediaCaptionsButton defaultShowing></MediaCaptionsButton>
+            <MediaAirplayButton></MediaAirplayButton>
+            <MediaPipButton></MediaPipButton>
+            <MediaFullscreenButton></MediaFullscreenButton>
+          </MediaControlBar>
+        </MediaController>
+      </main>
+
+      <footer className={styles.footer}></footer>
+    </div>
+  );
+};
+
+export default Home;

demos/nextjs-with-typescript/public/vtt/en-cc.vtt

@@ -0,0 +1,49 @@
+WEBVTT
+
+1
+00:00:03.060 --> 00:00:06.390
+<v 0>
+[<i>♪ominous music♪</i>]
+Everything is dependent on oil, gasoline,
+</v>
+
+2
+00:00:08.280 --> 00:00:09.113
+water.
+
+3
+00:00:09.270 --> 00:00:14.270
+[inaudible].
+
+4
+00:00:26.160 --> 00:00:27.540
+<v 1>Everybody's gone out of their mind</v>
+
+5
+00:00:40.080 --> 00:00:41.340
+out here. Everything hurts.
+
+6
+00:00:44.310 --> 00:00:49.290
+You want to get through this? Do, as I say,
+
+7
+00:00:53.900 --> 00:00:54.733
+now pick up what you can and run
+
+8
+00:00:56.050 --> 00:01:01.050
+[<i>♪triumphant music♪</i>]
+[inaudible]
+
+9
+00:01:51.160 --> 00:01:56.160
+[inaudible].
+
+10
+00:02:04.620 --> 00:02:05.130
+<v 0>What's your name?</v>
+
+11
+00:02:05.130 --> 00:02:10.130
+[inaudible].