feat(react): add react bindings for vime

Enigma10 · Aug 13, 2020 · 8ec4a11 · 8ec4a11
1 parent 8940d70
commit 8ec4a11
Show file tree

Hide file tree

Showing 54 changed files with 861 additions and 87 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -7,7 +7,8 @@
     "plugin:@stencil/recommended"
   ],
   "ignorePatterns": [
-    "ProviderTemplate.ts"
+    "media/",
+    "packages/react/src/"
   ],
   "rules": {
     "no-console": "off",

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -44,8 +44,13 @@ jobs:
         run: cd packages/core && pnpx codecov
       - name: Build
         run: pnpm run build --filter @vime/core
-      - name: Release
+      - name: Release @vime/core
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: pnpm run release --filter @vime/core
+        run: pnpm run release --filter @vime/core
+      - name: Release @vime/react
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: pnpm run release --filter @vime/react
diff --git a/.gitignore b/.gitignore
@@ -20,6 +20,9 @@ log.txt
 *.sublime-project
 *.sublime-workspace
 
+/.pnp
+.pnp.js
+.eslintcache/
 .nyc_output/
 .stencil/
 .idea/

diff --git a/README.md b/README.md
@@ -91,8 +91,8 @@ Vime is forward thinking and built for the modern web. All
 [ES6 Compatible](https://caniuse.com/#feat=es6-module) browsers are supported, some of which are 
 listed below.
 
-- Edge 16+
-- Firefox 60+
+- Edge 79+
+- Firefox 68+
 - Chrome 61+
 - Safari 11+
 - iOS Safari 11+

diff --git a/examples/angular/.gitkeep b/examples/angular/.gitkeep
diff --git a/examples/ember/.gitkeep b/examples/ember/.gitkeep
diff --git a/examples/html/.gitkeep b/examples/html/.gitkeep
diff --git a/examples/preact/.gitkeep b/examples/preact/.gitkeep
diff --git a/examples/react/README.md b/examples/react/README.md
@@ -0,0 +1,6 @@
+# Vime React Example
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
+and demonstrates using Vime with React via the `@vime/react` package.
+
+
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@vime/react-example",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@vime/react": "^1.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/react/public/favicon.ico b/examples/react/public/favicon.ico
diff --git a/examples/react/public/index.html b/examples/react/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/examples/react/public/logo192.png b/examples/react/public/logo192.png
diff --git a/examples/react/public/logo512.png b/examples/react/public/logo512.png
diff --git a/examples/react/public/manifest.json b/examples/react/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/examples/react/public/robots.txt b/examples/react/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/examples/react/src/App.css b/examples/react/src/App.css
@@ -0,0 +1,4 @@
+.container {
+  width: 100%;
+  max-width: 980px;
+}
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import './App.css';
+import { VimePlayer, VimeYoutube, VimeDefaultUi } from '@vime/react';
+import '@vime/react/dist/vime.css'
+
+function App() {
+  const onPlaying = (event: CustomEvent<boolean>) => {
+    console.log('playing:', event.detail);
+  };
+
+  return (
+    <div className="container">
+      <VimePlayer playsinline onVPlayingChange={onPlaying}>
+        <VimeYoutube videoId="DyTCOwB0DVw" />
+        <VimeDefaultUi />
+      </VimePlayer>
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/react/src/index.css b/examples/react/src/index.css
@@ -0,0 +1,13 @@
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+#root {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/examples/react/src/index.tsx b/examples/react/src/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/examples/react/src/react-app-env.d.ts b/examples/react/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/examples/react/tsconfig.json b/examples/react/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "src"
+  ]
+}
diff --git a/examples/svelte/.gitkeep b/examples/svelte/.gitkeep
diff --git a/examples/vue/.gitkeep b/examples/vue/.gitkeep
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "pnpm": ">=5"
   },
   "scripts": {
-    "lint": "eslint packages/*/src/**/*.{ts,tsx} packages/*/cypress/**/*.{js,ts} --ignore-path .gitignore --fix",
+    "lint": "eslint packages/*/src/**/*.{ts,tsx} packages/*/cypress/**/*.{js,ts} examples/*/src/**/*.{ts,tsx} tools/*.js scripts/*.js --fix --ignore-path .gitignore",
     "script:size": "node scripts/core-dist-size.js"
   },
   "devDependencies": {
@@ -25,6 +25,7 @@
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "git-log-parser": "^1.2.0",
     "gzip-size": "^5.1.1",
     "husky": "^4.2.5",

diff --git a/packages/angular/.gitkeep b/packages/angular/.gitkeep
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -5,13 +5,14 @@
   "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",
+  "es2015": "dist/index.mjs",
+  "es2017": "dist/index.mjs",
+  "jsnext:main": "dist/index.mjs",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/vime/vime.esm.js",
   "jsdelivr": "dist/vime/vime.esm.js",
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist/",
     "loader/",
@@ -48,7 +49,8 @@
     "@cypress/code-coverage": "^3.8.1",
     "@cypress/skip-test": "^2.5.0",
     "@cypress/webpack-preprocessor": "^5.4.1",
-    "@stencil/core": "1.17.3",
+    "@stencil/core": "2.0.0-1",
+    "@stencil/react-output-target": "^0.0.9",
     "@stencil/sass": "^1.3.2",
     "@types/hls.js": "^0.13.0",
     "@types/jest": "^26.0.7",
@@ -66,7 +68,7 @@
     "sirv-cli": "^1.0.3",
     "start-server-and-test": "^1.11.3",
     "ts-loader": "^8.0.1",
-    "webpack": "^4.44.0"
+    "webpack": "^4.44.1"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/core/src/components/core/player/Disposal.ts b/packages/core/src/components/core/player/Disposal.ts
@@ -1,14 +1,14 @@
 export class Disposal {
   constructor(
-    private dispose: (() => void)[] = []
+    private dispose: (() => void)[] = [],
   ) {}
 
   add(callback: () => void) {
     this.dispose.push(callback);
   }
 
   empty() {
-    this.dispose.forEach(fn => fn());
+    this.dispose.forEach((fn) => fn());
     this.dispose = [];
   }
-}
+}
diff --git a/packages/core/src/components/core/player/fullscreen/Fullscreen.ts b/packages/core/src/components/core/player/fullscreen/Fullscreen.ts
@@ -60,7 +60,7 @@ export class Fullscreen {
   get isActive() {
     if (!this.isSupported) return false;
     const fullscreenEl = (document as any)[this.api.fullscreenElement!] as Document['fullscreenElement'];
-    return (this.el === fullscreenEl) 
+    return (this.el === fullscreenEl)
       || this.el.matches(`:${this.api.fullscreen}`)
       || this.el.contains(fullscreenEl);
   }