chore: initial commit

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "extends": [
+    "plugin:@stencil/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -0,0 +1,31 @@
+dist/
+www/
+loader/
+
+packages/*/dist/
+packages/*/www/
+packages/*/loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*-lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020
+
+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.

README.md

@@ -0,0 +1,3 @@
+# Vime.
+
+wip.

now.json

@@ -0,0 +1,5 @@
+{
+  "github": {
+    "silent": true
+  }
+}

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "vime",
+  "private": true,
+  "version": "0.0.0",
+  "license": "MIT",
+  "engines": {
+    "node": ">=10",
+    "pnpm": ">=5"
+  },
+  "scripts": {
+    "lint": "eslint packages/*/src/**/*{.ts,.tsx} --ignore-path .gitignore --fix",
+    "build": "pnpm run build --recursive",
+    "test": "pnpm run test --recursive",
+    "generate": "pnpm run generate --recursive",
+    "validate": "pnpm run lint && pnpm run test && pnpm run build",
+    "release": "pnpm run validate && pnpm run release --recursive"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^9.0.1",
+    "@commitlint/config-conventional": "^9.0.1",
+    "@stencil/eslint-plugin": "^0.3.1",
+    "@typescript-eslint/eslint-plugin": "^3.4.0",
+    "@typescript-eslint/parser": "^3.4.0",
+    "eslint": "^7.3.1",
+    "eslint-plugin-react": "^7.20.0",
+    "git-log-parser": "^1.2.0",
+    "husky": "^4.2.5",
+    "react": "^16.13.1",
+    "semantic-release": "^17.1.1"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  }
+}

packages/core/README.md

@@ -0,0 +1,3 @@
+# @vime/core
+
+wip.

packages/core/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@vime/core",
+  "version": "1.0.0",
+  "description": "Media player built for the modern web.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/vime/vime.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test:watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "release": "semantic-release -e ../../tools/semantic-release"
+  },
+  "devDependencies": {
+    "@stencil/core": "^1.15.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/core/src/components/vime-icon/vime-icon.css

@@ -0,0 +1,7 @@
+svg {
+  display: block;
+  fill: currentColor;
+  pointer-events: none;
+  width: 18px;
+  height: 18px;
+}

packages/core/src/components/vime-icon/vime-icon.tsx

@@ -0,0 +1,49 @@
+import { Component, h, Prop } from '@stencil/core';
+import { is_string } from '../../utils';
+
+/**
+ * Displays an SVG icon inline or loaded from a sprite.
+ */
+@Component({
+  tag: 'vime-icon',
+  styleUrl: 'vime-icon.css',
+  shadow: true
+})
+export class Icon {
+  /**
+   * The icon SVG identifier if a sprite is loaded otherwise plain svg to inline.
+   */
+  @Prop() icon!: string | SVGElement;
+
+  /**
+   * The color (fill) of the icon.
+   */
+  @Prop() color = '#fff';
+
+  /**
+   * The amount to scale the size of the icon (respecting aspect ratio) up or down by.
+   */
+  @Prop() scale = 1;
+
+  /**
+   * The amount of transparency to add to the icon.
+   */
+  @Prop() opacity = 1;
+
+  render () {
+    return (
+      <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        role="presentation" 
+        focusable="false"
+        style={{ 
+          color: this.color, 
+          transform: `scale(${this.scale})`,
+          opacity: `${this.opacity}`,
+        }}
+      >
+        {is_string(this.icon) ? <use href={this.icon as string}></use> : this.icon}
+      </svg>
+    );
+  }
+}

packages/core/src/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
+  <title>Stencil Component Starter</title>
+
+  <script type="module" src="/build/vime.esm.js"></script>
+  <script nomodule src="/build/vime.js"></script>
+
+</head>
+<body>
+
+</body>
+</html>

packages/core/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

packages/core/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './support.utils';
+export * from './unit.utils';
+export * from './network.utils';
+export * from './media-file.utils';

packages/core/src/utils/media-file.utils.ts

@@ -0,0 +1,12 @@
+import { is_string, is_instance_of } from './unit.utils';
+
+export const AUDIO_EXT = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i;
+export const VIDEO_EXT = /\.(mp4|og[gv]|webm|mov|m4v)($|\?)/i;
+export const HLS_EXT = /\.(m3u8)($|\?)/i;
+export const DASH_EXT = /\.(mpd)($|\?)/i;
+
+export const is_media_stream = (src: any) => is_instance_of(src, MediaStream);
+export const is_hls = (src: string) => is_string(src) && HLS_EXT.test(src);
+export const is_dash = (src: string) => is_string(src) && DASH_EXT.test(src);
+export const is_audio = (src: string) => AUDIO_EXT.test(src);
+export const is_video = (src: string) => VIDEO_EXT.test(src);

packages/core/src/utils/network.utils.ts

@@ -0,0 +1,88 @@
+import { is_string, is_array, is_null_or_undefined, is_object } from './unit.utils';
+import { IS_CLIENT } from './index';
+
+/**
+ * Attempt to parse json into a POJO.
+ */
+export function try_parse_json(json: string): undefined | object {
+  try {
+    return JSON.parse(json);
+  } catch (e) {
+    return undefined;
+  }
+}
+
+/**
+ * Check if the given input is json or a plain object.
+ */
+export const is_json_or_obj = (input: any): boolean => !is_null_or_undefined(input)
+  && (is_object(input) || input.startsWith('{'));
+
+/**
+ * If an object return otherwise try to parse it as json.
+ */
+export const obj_or_try_parse_json = (input: any): undefined | object => is_object(input)
+  ? input
+  : try_parse_json(input);
+
+/**
+ * Load image avoiding xhr/fetch CORS issues. Server status can't be obtained this way
+ * unfortunately, so this uses "naturalWidth" to determine if the image has been loaded. By
+ * default it checks if it is at least 1px.
+ */
+export const load_image = (src: string, minWidth = 1): Promise<HTMLImageElement> => new Promise(
+  (resolve, reject) => {
+    const image = new Image();
+    const handler = () => {
+      delete image.onload;
+      delete image.onerror;
+      image.naturalWidth >= minWidth ? resolve(image) : reject(image);
+    };
+    Object.assign(image, { onload: handler, onerror: handler, src });
+  }
+);
+
+/**
+ * Tries to parse json and return a object.
+ */
+export const decode_json = (data: any): false | object => is_json_or_obj(data) && obj_or_try_parse_json(data);
+
+/**
+ * Tries to convert a query string into a object.
+ */
+export const decode_query_string = (data: any): false | object => is_string(data) && parse_query_string(data);
+
+export const try_decode_uri_component = (component: string, fallback = ''): string => {
+  if (!IS_CLIENT) return fallback;
+  try {
+    return window.decodeURIComponent(component);
+  } catch (e) {
+    return fallback;
+  }
+};
+
+/**
+ * Returns a simple key/value map and duplicate keys are merged into an array.
+ *
+ * @see https://github.com/ampproject/amphtml/blob/c7c46cec71bac92f5c5da31dcc6366c18577f566/src/url-parse-query-string.js#L31
+ */
+const QUERY_STRING_REGEX = /(?:^[#?]?|&)([^=&]+)(?:=([^&]*))?/g;
+export const parse_query_string = (qs: any): { [id: string]: string | string[] } => {
+  const params = Object.create(undefined);
+
+  if (!qs) return params;
+
+  let match;
+  // eslint-disable-next-line @stencil/strict-boolean-conditions
+  while ((match = QUERY_STRING_REGEX.exec(qs))) {
+    const name = try_decode_uri_component(match[1], match[1]).replace('[]', '');
+    const value = match[2]
+      ? try_decode_uri_component(match[2].replace(/\+/g, ' '), match[2])
+      : '';
+    const currValue = params[name];
+    if (currValue && !is_array(currValue)) params[name] = [currValue];
+    currValue ? params[name].push(value) : (params[name] = value);
+  }
+
+  return params;
+};