shaka-video-element 0.0.6 → 0.6.2

package/package.json

@@ -1,43 +1,46 @@
 {
   "name": "shaka-video-element",
-  "version": "0.0.6",
+  "version": "0.6.2",
   "description": "Custom element (web component) for Shaka Player",
-  "type": "module",
-  "main": "dist/shaka-video-element.js",
+  "author": "@muxinc",
+  "license": "MIT",
+  "homepage": "https://github.com/muxinc/media-elements#readme",
+  "bugs": {
+    "url": "https://github.com/muxinc/media-elements/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/muxinc/media-elements.git",
+    "directory": "packages/shaka-video-element"
+  },
   "files": [
-    "./dist/*",
-    "README.md",
-    "index.html"
+    "dist"
   ],
+  "type": "module",
+  "main": "shaka-video-element.js",
+  "exports": {
+    ".": "./shaka-video-element.js",
+    "./react": "./dist/react.js"
+  },
   "scripts": {
-    "build": "rm -rf dist && rollup --config",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "publish-patch": "yarn run build && np patch --no-tests"
+    "lint": "eslint *.js",
+    "serve": "wet serve --cors --livereload",
+    "build:react": "build-react-wrapper",
+    "build:esm": "esbuild --bundle --format=esm --outfile=dist/shaka-video-element.js shaka-video-element.js",
+    "build": "run-s build:*"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/muxinc/shaka-video-element.git"
+  "dependencies": {
+    "custom-media-element": "^1.3.1",
+    "shaka-player": "^4.8.4"
   },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+  "devDependencies": {
+    "build-react-wrapper": "^0.1.3",
+    "npm-run-all": "^4.1.5",
+    "wet-run": "^1.2.2"
   },
   "keywords": [
     "shaka",
     "video",
     "player"
-  ],
-  "author": "@muxinc",
-  "license": "MIT",
-  "dependencies": {
-    "custom-video-element": "^0.0.2",
-    "shaka-player": "^4.2.2"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "np": "^6.2.0",
-    "rollup": "^2.2.0",
-    "rollup-plugin-babel-minify": "^10.0.0",
-    "rollup-plugin-terser": "^5.3.0"
-  }
+  ]
 }

package/shaka-video-element.js

@@ -0,0 +1,87 @@
+import { CustomVideoElement } from 'custom-media-element';
+import shaka from 'shaka-player';
+
+function onErrorEvent(event) {
+  // Extract the shaka.util.Error object from the event.
+  onError(event.detail);
+}
+
+function onError(error) {
+  // Log the error.
+  console.error('Error code', error.code, 'object', error);
+}
+
+class ShakaVideoElement extends CustomVideoElement {
+  static shadowRootOptions = { ...CustomVideoElement.shadowRootOptions };
+
+  static getTemplateHTML = (attrs) => {
+    const { src, ...rest } = attrs; // eslint-disable-line no-unused-vars
+    return CustomVideoElement.getTemplateHTML(rest);
+  };
+
+  constructor() {
+    super();
+
+    if (shaka.Player.isBrowserSupported()) {
+      this.api = new shaka.Player();
+      // Listen for error events.
+      this.api.addEventListener('error', onErrorEvent);
+    } else {
+      // This browser does not have the minimum set of APIs we need.
+      console.error('Browser does not support Shaka Player');
+    }
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (attrName !== 'src') {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+    }
+
+    if (attrName === 'src' && oldValue != newValue) {
+      this.load();
+    }
+  }
+
+  get src() {
+    // Use the attribute value as the source of truth.
+    // No need to store it in two places.
+    // This avoids needing a to read the attribute initially and update the src.
+    return this.getAttribute('src');
+  }
+
+  set src(val) {
+    // If being set by attributeChangedCallback,
+    // dont' cause an infinite loop
+    if (val !== this.src) {
+      this.setAttribute('src', val);
+    }
+  }
+
+  async load() {
+    if (!this.api) return;
+
+    // Wait 1 tick to allow other attributes to be set.
+    await Promise.resolve();
+
+    await this.api.attach(this.nativeEl);
+
+    if (!this.src) {
+      this.api.unload();
+    } else {
+      // Try to load a manifest.
+      // This is an asynchronous process.
+      try {
+        await this.api.load(this.src);
+      } catch (e) {
+        // onError is executed if the asynchronous load fails.
+        onError(e);
+      }
+    }
+  }
+}
+
+if (globalThis.customElements && !globalThis.customElements.get('shaka-video')) {
+  globalThis.customElements.define('shaka-video', ShakaVideoElement);
+}
+
+export default ShakaVideoElement;

package/LICENSE

@@ -1,19 +0,0 @@
-Copyright (c) 2022 Mux, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/index.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <title>Shaka [Player] Video Element</title>
-    <script type="module" src="https://unpkg.com/media-chrome@0.7"></script>
-    <script type="module" src="./dist/shaka-video-element.js"></script>
-
-    <style>
-      media-controller {
-        width: 640px;
-        height: 360px;
-      }
-    </style>
-  </head>
-  <body>
-
-    <!-- Using media chrome for controls -->
-    <media-controller>
-
-      <shaka-video
-        slot="media"
-        src="https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths-hls/hls.m3u8"
-      >
-        <track label="thumbnails" id="customTrack" default kind="metadata" src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt"></track>
-      </shaka-video>
-      <media-control-bar>
-        <media-play-button></media-play-button>
-        <media-mute-button></media-mute-button>
-        <media-volume-range></media-volume-range>
-        <media-time-range></media-time-range>
-        <media-pip-button></media-pip-button>
-        <media-fullscreen-button></media-fullscreen-button>
-      </media-control-bar>
-    </media-controller>
-
-    <p><a href="https://github.com/muxinc/shaka-video-element">github.com/muxinc/shaka-video-element</a></p>
-  </body>
-</html>