Project Scaffolding and mux-video initial implementation

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,77 @@
+---
+name: "🐛 Bug Report"
+about: Report a reproducible bug or regression.
+title: 'Bug: '
+labels: 'bug, Status: Unconfirmed'
+
+---
+<!--
+  Thanks for taking the time to file a bug report! Please fill this template out as completely as possible. 
+-->
+
+### Checklist
+- [] Verified whether your issue exists in the latest version Mux Element(s) release: `npm install @mux/[element_name]` or `yarn @mux/[element_name]`.
+  - (NOTE: If the issue is not occurring in the latest version, we may not resolve it.)
+
+### Which Mux Elements/Packages has a bug?
+<!-- 
+  Uncomment all that apply
+
+- mux-video
+- mux-audio
+- common
+-->
+
+### Which browser(s) are you using?
+<!-- 
+  Uncomment all that apply
+  (NOTE: Currently, Mux Elements are only officially supported in new versions of the browsers listed above)
+
+- Chrome
+- Safari
+- Firefox
+- Edge ("Edgeium")
+- Chrome Android
+- Safari on iOS
+- Other (list browser name(s), e.g. "Samsung Internet", "Opera"):  
+-->
+
+### Which operating system(s) are you using?
+(For example: macOS, Windows, iOS, Android)
+
+### How are you using Mux Elements?
+(For example: npm package, `<script>` tag)
+
+### Describe the bug
+
+<!--
+  Please provide a clear and concise description of what the bug is. Include
+  screenshots if needed. Please test using the latest version of the relevant
+  Mux Elements packages to make sure your issue has not already been fixed.
+-->
+
+
+## Steps To Reproduce
+
+1.
+2.
+
+<!--
+  Your bug will get fixed much faster if we can run your code and it's clear how to reproduce the issue. Issues without reproduction steps or
+  code examples may be immediately closed as not actionable.
+-->
+
+Link to code example:
+
+<!--
+  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
+  repository on GitHub, or provide a minimal code example that reproduces the
+  problem. You may provide a screenshot of the application if you think it is
+  relevant to your bug report. Here are some tips for providing a minimal
+  example: https://stackoverflow.com/help/mcve.
+-->
+
+## The current behavior
+
+
+## The expected behavior

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,41 @@
+---
+name: "🎥 Feature Request"
+about: Create a feature request for one or more Mux Elements, or for a new Mux Element you'd like to see.
+title: 'Feature: '
+labels: 'enhancement'
+
+---
+
+### Which Mux Elements/Packages would you like a new feature for?
+<!-- 
+  Uncomment all that apply
+
+- mux-video
+- mux-audio
+- common
+- I'd like to propose a new Element!
+-->
+
+## 🎥 Describe the feature you'd like to request
+
+<!--
+  Please provide a clear and concise description of what you want to see added to Mux Elements
+-->
+
+## 💻 Describe the use cases the feature will solve
+
+<!--
+  Please provide a clear and concise description of what you want and what your use case is.
+-->
+
+## ⭐ Describe the solution you'd like to see
+
+<!--
+  Please provide a clear and concise description of what you think the solution should look like.
+-->
+
+## 🔄 Describe alternatives or workarounds you've considered
+
+<!--
+  Please provide clear and concise descriptions of any alternatives you've tried or considered (e.g. alternative libraries or components, extending the existing Elements, etc.)
+-->

.gitignore

@@ -0,0 +1,118 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env.production
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.nvmrc

@@ -0,0 +1 @@
+v14.17

LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2021 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 (including the next paragraph) 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.

README.md

@@ -0,0 +1,16 @@
+<p align="center">
+  <a href="https://https://mux.com/">
+    <img src="https://avatars.githubusercontent.com/u/16199997?s=200&v=4" alt="Mux Logo">
+    <h1 align="center">&lt;mux-elements/&gt;</h1>
+  </a>
+    <p align="center">
+    Custom elements for working with media in the browser that Just Work™
+    </p>
+</p>
+
+<!-- TODO: These are placeholders for now! Make sure we update them to the appropriate packages/URLs once available (CJP) -->
+<p align="center">
+    <a href="https://npmcharts.com/compare/mux-embed?minimal=true"><img src="https://img.shields.io/npm/dm/mux-embed.svg?sanitize=true" alt="Downloads"></a>
+    <a href="https://www.npmjs.com/package/mux-embed"><img src="https://img.shields.io/npm/v/mux-embed.svg?sanitize=true" alt="Version"></a>
+    <a href="https://www.npmjs.com/package/mux-embed"><img src="https://img.shields.io/npm/l/mux-embed.svg?sanitize=true" alt="License"></a>
+</p>

lerna.json

@@ -0,0 +1,5 @@
+{
+    "lerna": "2.2.0",
+    "packages": ["packages/*"],
+    "npmClient": "npm"
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@mux/elements",
+  "engines": {
+    "node": "^14.17.0",
+    "npm": "^7.17.0"
+  },
+  "version": "0.1.0",
+  "description": "Custom elements for working with media in the browser that Just Work™",
+  "main": "index.js",
+  "repository": "https://github.com/muxinc/elements-mono",
+  "author": "Mux, Inc.",
+  "license": "MIT",
+  "private": true,
+  "devDependencies": {
+    "@snowpack/plugin-typescript": "^1.2.1",
+    "husky": "^7.0.1",
+    "lerna": "^4.0.0",
+    "prettier": "^2.3.2",
+    "snowpack": "^3.8.6"
+  },
+  "workspaces": [
+    "packages/*"
+  ]
+}

packages/mux-video/examples/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width" />
+    <title>Basic &lt;mux-video/&gt; example</title>
+    <script type="module" src="../dist/index.js"></script>
+  </head>
+  <body>
+    <!-- Add your environment key below to automatically wire up mux data -->
+    <mux-video
+      playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
+      metadata-url="./metadata.json"
+      controls
+      autoplay
+      muted
+      debug
+      env-key=""
+    >
+    </mux-video>
+  </body>
+</html>

packages/mux-video/examples/metadata.json

@@ -0,0 +1,3 @@
+{
+    "video_title": "Video Turtle"
+}

packages/mux-video/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@mux/mux-video",
+  "version": "0.1.0",
+  "description": "A custom mux video element for the browser that Just Works™",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/muxinc/elements-mono",
+    "directory": "packages/mux-video"
+  },
+  "author": "Mux, Inc.",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "snowpack dev --config snowpack.dev.config.js"
+  },
+  "dependencies": {
+    "custom-video-element": "^0.0.2",
+    "hls.js": "^1.0.9",
+    "mux-embed": "^4.1.1"
+  }
+}

packages/mux-video/snowpack.common.config.js

@@ -0,0 +1,21 @@
+// Snowpack Configuration File
+// See all supported options: https://www.snowpack.dev/reference/configuration
+
+/** @type {import("snowpack").SnowpackUserConfig } */
+module.exports = {
+  mount: {
+    /* ... */
+  },
+  plugins: [
+    /* ... */
+  ],
+  packageOptions: {
+    /* ... */
+  },
+  devOptions: {
+    /* ... */
+  },
+  buildOptions: {
+    /* ... */
+  },
+};

packages/mux-video/snowpack.dev.config.js

@@ -0,0 +1,23 @@
+// Snowpack Configuration File
+// See all supported options: https://www.snowpack.dev/reference/configuration
+
+/** @type {import("snowpack").SnowpackUserConfig } */
+module.exports = {
+  extends: './snowpack.common.config.js',
+  mount: {
+    'src': { url: '/dist' },
+    // Mount "public" to the root URL path ("/*") and serve files with zero transformations:
+    examples: { url: '/examples', static: true, resolve: false },
+  },
+  plugins: [
+    /* ... */
+  ],
+  packageOptions: {
+    /* ... */
+  },
+  devOptions: {
+    /* ... */
+  },
+  buildOptions: {
+  },
+};