feat: add gumlet-video-element- #250

.github/release-please/.release-please-manifest.json

@@ -13,6 +13,7 @@
   "packages/super-media-element": "1.4.2",
   "packages/tiktok-video-element": "0.1.2",
   "packages/peertube-video-element": "1.1.0",
+  "packages/gumlet-video-element": "0.1.0",
   "packages/twitch-video-element": "0.2.0",
   "packages/videojs-video-element": "1.4.8",
   "packages/vimeo-video-element": "1.7.2",

.github/release-please/release-please-config.json

@@ -20,6 +20,7 @@
     "packages/super-media-element": {},
     "packages/tiktok-video-element": {},
     "packages/peertube-video-element": {},
+    "packages/gumlet-video-element": {},
     "packages/twitch-video-element": {},
     "packages/videojs-video-element": {},
     "packages/vimeo-video-element": {},

README.md

@@ -22,6 +22,7 @@ A collection of HTMLMediaElement compatible elements and add-ons.
 | [`<twitch-video>`](packages/twitch-video-element)                                    | A custom video element for Twitch player.                                      |
 | [`<cloudflare-video>`](packages/cloudflare-video-element)                            | A custom video element for Cloudflare Stream.                                  |
 | [`<peertube-video>`](packages/peertube-video-element)                                | A custom video element for PeerTube player.                                    |
+| [`<gumlet-video>`](packages/gumlet-video-element)                                    | A custom video element for Gumlet player.                                      |
 
 ## Browser support
 

examples/nextjs/app/gumlet-video/page.tsx

@@ -0,0 +1,23 @@
+import { Metadata } from 'next';
+import GumletVideo from 'gumlet-video-element/react';
+import Player from '../player';
+
+export const metadata: Metadata = {
+  title: 'Gumlet Video - Media Elements',
+};
+
+export default function Page() {
+  return (
+    <>
+      <section>
+        <Player
+          as={GumletVideo}
+          src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"
+          config={{
+            start_high_res: true,
+          }}
+        />
+      </section>
+    </>
+  );
+}

examples/nextjs/app/sidebar-nav.tsx

@@ -47,6 +47,9 @@ export default function SidebarNav() {
       <li>
         <Link className={`link ${pathname === '/peertube-video' ? 'active' : ''}`} href="/peertube-video">peertube-video</Link>
       </li>
+      <li>
+        <Link className={`link ${pathname === '/gumlet-video' ? 'active' : ''}`} href="/gumlet-video">gumlet-video</Link>
+      </li>
       <li>
         <Link className={`link ${pathname === '/spotify-audio' ? 'active' : ''}`} href="/spotify-audio">spotify-audio</Link>
       </li>

examples/nextjs/package.json

@@ -21,6 +21,7 @@
     "shaka-video-element": "^0.7.1",
     "spotify-audio-element": "^1.0.4",
     "peertube-video-element": "^1.1.0",
+    "gumlet-video-element": "^0.1.0",
     "tiktok-video-element": "^0.1.2",
     "twitch-video-element": "^0.2.0",
     "videojs-video-element": "^1.4.8",

packages/gumlet-video-element/README.md

@@ -0,0 +1,83 @@
+# `<gumlet-video>`
+
+[![NPM Version](https://img.shields.io/npm/v/gumlet-video-element?style=flat-square&color=informational)](https://www.npmjs.com/package/gumlet-video-element)
+[![NPM Downloads](https://img.shields.io/npm/dm/gumlet-video-element?style=flat-square&color=informational&label=npm)](https://www.npmjs.com/package/gumlet-video-element)
+[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/gumlet-video-element?style=flat-square&color=%23FF5627)](https://www.jsdelivr.com/package/npm/gumlet-video-element)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/gumlet-video-element?style=flat-square&color=success&label=gzip)](https://bundlephobia.com/result?p=gumlet-video-element)
+
+A [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
+for the [Gumlet](https://www.gumlet.com/) 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
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/gumlet-video-element@0"></script>
+<gumlet-video
+  controls
+  src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"
+></gumlet-video>
+```
+
+## Installing
+
+`<gumlet-video>` is packaged as a javascript module (es6) only, which is supported by all evergreen browsers and Node v12+.
+
+### Loading into your HTML using `<script>`
+
+Note the `type="module"`, that's important.
+
+> Modules are always loaded asynchronously by the browser, so it's ok to load them in the head, and best for registering web components quickly.
+
+```html
+<head>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/gumlet-video-element@0"></script>
+</head>
+```
+
+### Adding to your app via `npm`
+
+```bash
+npm install gumlet-video-element --save
+```
+
+Or yarn:
+
+```bash
+yarn add gumlet-video-element
+```
+
+Include in your app javascript (e.g. src/App.js):
+
+```js
+import 'gumlet-video-element';
+```
+
+This will register the custom elements with the browser so they can be used as HTML.
+
+### React
+
+```jsx
+import GumletVideo from 'gumlet-video-element/react';
+
+export default function Player() {
+  return (
+    <GumletVideo
+      controls
+      src="https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"
+      config={{ start_high_res: true }}
+    />
+  );
+}
+```
+
+## Related
+
+- [Gumlet Player.js](https://docs.gumlet.com/docs/playerjs)
+- [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)
+- [`<vimeo-video>`](https://github.com/muxinc/media-elements/tree/main/packages/vimeo-video-element)
+- [`<tiktok-video>`](https://github.com/muxinc/media-elements/tree/main/packages/tiktok-video-element)

packages/gumlet-video-element/gumlet-video-element.d.ts

@@ -0,0 +1,43 @@
+export const MATCH_SRC: RegExp;
+
+export function canPlay(src: string): boolean;
+
+export interface GumletConfig {
+  /** Start playback automatically */
+  autoplay?: boolean;
+  /** Start muted */
+  muted?: boolean;
+  /** Loop playback */
+  loop?: boolean;
+  /** Start time in seconds */
+  t?: number;
+  /** DRM token for protected content */
+  drm_token?: string;
+  /** VAST tag URL for ads */
+  vast_tag_url?: string;
+  /** Start in highest available resolution */
+  start_high_res?: boolean;
+  /** Disable seek controls */
+  disable_seek?: boolean;
+  /** Hide all player controls */
+  disable_player_controls?: boolean;
+  /** Watermark text overlay */
+  watermark_text?: string;
+  [key: string]: unknown;
+}
+
+export default class GumletVideoElement extends HTMLVideoElement {
+  static readonly observedAttributes: string[];
+  static getTemplateHTML: (
+    attrs: Record<string, string>,
+    props?: { config?: GumletConfig | null }
+  ) => string;
+  config: GumletConfig | null;
+  attributeChangedCallback(
+    attrName: string,
+    oldValue?: string | null,
+    newValue?: string | null
+  ): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}