shaka-video-element 0.0.5 → 0.6.1

package/README.md

@@ -1,48 +1,56 @@
 # `<shaka-video>`
 
-A custom element (web component) for [Shaka Player](https://github.com/shaka-project/shaka-player), which supports both HLS and DASH streaming protocols.
+[![NPM Version](https://img.shields.io/npm/v/shaka-video-element?style=flat-square&color=informational)](https://www.npmjs.com/package/shaka-video-element) 
+[![NPM Downloads](https://img.shields.io/npm/dm/shaka-video-element?style=flat-square&color=informational&label=npm)](https://www.npmjs.com/package/shaka-video-element) 
+[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/shaka-video-element?style=flat-square&color=%23FF5627)](https://www.jsdelivr.com/package/npm/shaka-video-element)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/shaka-video-element?style=flat-square&color=success&label=gzip)](https://bundlephobia.com/result?p=shaka-video-element) 
 
-The element API matches the HTML5 `<video>` tag, so it can be easily swapped with other media, and be compatible with other UI components that work with the video tag, including [media chrome](https://www.media-chrome.org/).
+A [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) 
+for [Shaka Player](https://github.com/shaka-project/shaka-player) with an API that matches the 
+[`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) API.
+
+- 🏄‍♂️ Compatible [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) API
+- 🕺 Seamlessly integrates with [Media Chrome](https://github.com/muxinc/media-chrome)
 
 ## Example
 
+<!-- prettier-ignore -->
 ```html
-<html>
-<head>
-  <script type="module" src="https://unpkg.com/shaka-video-element@0.5"></script>
-</head>
-<body>
-
-  <shaka-video controls src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe.m3u8"></shaka-video>
-
-</body>
-</html>
+<script type="module" src="https://cdn.jsdelivr.net/npm/shaka-video-element@0/+esm"></script>
+<shaka-video controls src="https://stream.mux.com/r4rOE02cc95tbe3I00302nlrHfT023Q3IedFJW029w018KxZA.m3u8"></shaka-video>
 ```
 
-## Installing
-
-`<shaka-video>` is packaged as a javascript module (es6) only, which is supported by all evergreen browsers and Node v12+.
+## Install
 
-### Loading into your HTML using `<script>`
+First install the NPM package:
 
-Note the `type="module"`, that's important.
+```bash
+npm install shaka-video-element
+```
 
-> Modules are always loaded asynchronously by the browser, so it's ok to load them in the head :thumbsup:, and best for registering web components quickly.
+Import in your app javascript (e.g. src/App.js):
 
-```html
-<head>
-  <script type="module" src="https://unpkg.com/shaka-video-element@0.5"></script>
-</head>
+```js
+import 'shaka-video-element';
 ```
 
-### Adding to your app via `npm`
+Optionally, you can load the script directly from a CDN using [jsDelivr](https://www.jsdelivr.com/):
 
-```bash
-npm install shaka-video-element --save
+<!-- prettier-ignore -->
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/shaka-video-element@0/+esm"></script>
 ```
 
-Include in your app javascript (e.g. src/App.js)
-```js
-import 'shaka-video-element';
-```
 This will register the custom elements with the browser so they can be used as HTML.
+
+## Related
+
+- [Media Chrome](https://github.com/muxinc/media-chrome) Your media player's dancing suit. 🕺
+- [`<youtube-video>`](https://github.com/muxinc/media-elements/tree/main/packages/youtube-video-element) A custom element for the YouTube player.
+- [`<vimeo-video>`](https://github.com/muxinc/media-elements/tree/main/packages/vimeo-video-element) A custom element for the Vimeo player.
+- [`<videojs-video>`](https://github.com/muxinc/media-elements/tree/main/packages/videojs-video-element) A custom element for Video.js.
+- [`<wistia-video>`](https://github.com/muxinc/media-elements/tree/main/packages/wistia-video-element) A custom element for the Wistia player.
+- [`<jwplayer-video>`](https://github.com/muxinc/media-elements/tree/main/packages/jwplayer-video-element) A custom element for the JW player.
+- [`castable-video`](https://github.com/muxinc/media-elements/tree/main/packages/castable-video) Cast your video element to the big screen with ease!
+- [`<mux-player>`](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player custom element.
+- [`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.

package/dist/react.d.ts

@@ -0,0 +1,4 @@
+// This file is generated by media-elements/scripts/build-react-wrapper!
+export default React.ForwardRefExoticComponent<
+  React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
+>;

package/dist/react.js

@@ -0,0 +1,79 @@
+// This file is generated by media-elements/scripts/build-react-wrapper!
+'use client';
+
+import React, { useRef, useEffect } from 'react';
+import Element from '../shaka-video-element.js';
+
+export default React.forwardRef(({ children, ...props }, ref) => {
+  ref ??= useRef();
+
+  const attrs = propsToAttrs({ ...props, ref });
+
+  for (let name in props) {
+    if (name[0] === 'o' && name[1] === 'n') {
+      const useCapture = name.endsWith('Capture');
+      const eventName = name.slice(2, useCapture ? name.length - 7 : undefined);
+      const callback = props[name];
+
+      useEffect(() => {
+        const eventTarget = ref?.current;
+        if (!eventTarget || typeof callback !== 'function') return;
+
+        eventTarget.addEventListener(eventName, callback, useCapture);
+
+        return () => {
+          eventTarget.removeEventListener(eventName, callback, useCapture);
+        };
+      }, [ref?.current, callback]);
+    }
+  }
+
+  // Only render the custom element template HTML on the server..
+  // The custom element will render itself on the client.
+  if (typeof window === 'undefined' && Element?.getTemplateHTML && Element?.shadowRootOptions) {
+    const { mode, delegatesFocus } = Element.shadowRootOptions;
+
+    const templateShadowRoot = React.createElement('template', {
+      shadowrootmode: mode,
+      shadowrootdelegatesfocus: delegatesFocus,
+      dangerouslySetInnerHTML: {
+        __html: Element.getTemplateHTML(attrs),
+      },
+    });
+
+    children = [templateShadowRoot, children];
+  }
+
+  return React.createElement('shaka-video', attrs, ...[].concat(children));
+});
+
+const ReactPropToAttrNameMap = {
+  className: 'class',
+  classname: 'class',
+  htmlFor: 'for',
+  viewBox: 'viewBox',
+};
+
+function propsToAttrs(props = {}) {
+  let attrs = {};
+  for (let [propName, propValue] of Object.entries(props)) {
+    let attrName = toAttrName(propName, propValue);
+    if (attrName) attrs[attrName] = toAttrValue(propValue);
+  }
+  return attrs;
+}
+
+function toAttrName(propName, propValue) {
+  if (ReactPropToAttrNameMap[propName]) return ReactPropToAttrNameMap[propName];
+  if (typeof propValue == 'undefined') return undefined;
+  if (typeof propValue === 'boolean' && !propValue) return undefined;
+  if (/^on[A-Z]/.test(propName)) return undefined;
+  if (/[A-Z]/.test(propName)) return propName.toLowerCase();
+  return propName;
+}
+
+function toAttrValue(propValue) {
+  if (typeof propValue === 'boolean') return '';
+  if (Array.isArray(propValue)) return propValue.join(' ');
+  return propValue;
+}