fix: modernize build using esbuild (#1684)

* fix: modernize build using esbuild

* example: build & serve demo w/ esbuild
move to examples folder so more apps could be added

* tools: add livereload, fix demo target folder

* tools: remove Webpack tooling

* tools: remove babel-eslint, upgrade standard

* fix: robust minimal test stack esbuild/zora/c8

* fix: add esbuild global externals plugin
evanw/esbuild#337

.github/workflows/ci.yml

@@ -4,7 +4,27 @@ on: [push, pull_request]
 
 jobs:
   build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        # node-version: [16.x, 18.x, 20.x]
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: npm
+    - run: npm ci
+    - run: npm run build:lib
+    - run: npm run build:demo
+    - run: npm run build:dist
+    - run: npm run build:standalone
 
+  lint:
     runs-on: ubuntu-latest
 
     strategy:
@@ -13,16 +33,29 @@ jobs:
         node-version: [16.x]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
-    - run: yarn install
-    - run: yarn lint
-    - run: yarn test:coverage -v
-    - run: yarn build:lib
-    - run: yarn build:demo
-    - run: yarn build:dist
-    - run: yarn build:standalone
+        cache: npm
+    - run: npm ci
+    - run: npm run lint
 
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        # node-version: [16.x, 18.x, 20.x]
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: npm
+    - run: npm ci
+    - run: npm run test:coverage

.gitignore

@@ -1,7 +1,6 @@
 node_modules
 npm-debug.log
 yarn-error.log
-package-lock.json
 .DS_Store
 /lib
 /lazy
@@ -10,3 +9,4 @@ package-lock.json
 /es6
 .idea/
 .vscode/
+/disttest/

src/demo/App.css → examples/react/public/App.css

@@ -1,5 +1,7 @@
-$column-width: 480px;
-$gutter-width: 20px;
+:root {
+  --column-width: 480px;
+  --gutter-width: 20px;
+}
 
 .app {
   margin: auto;
@@ -10,8 +12,8 @@ $gutter-width: 20px;
 
 .section {
   display: inline-block;
-  max-width: $column-width;
-  margin: $gutter-width;
+  max-width: var(--column-width);
+  margin: var(--gutter-width);
   text-align: left;
   vertical-align: top;
 }
@@ -31,5 +33,5 @@ $gutter-width: 20px;
 }
 
 .footer {
-  margin: $gutter-width;
+  margin: var(--gutter-width);
 }

examples/react/public/defaults.css

@@ -0,0 +1,121 @@
+:root {
+  /*
+   * Variables with --color-base prefix define
+   * the hue, and saturation values to be used for
+   * hsla colors.
+   *
+   * ex:
+   *
+   * --color-base-{color}: {hue}, {saturation};
+   *
+   */
+
+  --color-base-white: 0 0%;
+  --color-base-black: 240 100%;
+  --color-base-gray: 60 3%;
+
+  /*
+   * Color palettes are made using --color-base
+   * variables, along with a lightness value to
+   * define different variants.
+   *
+   */
+
+  --color-gray-5: var(--color-base-gray) 5%;
+  --color-gray-10: var(--color-base-gray) 10%;
+  --color-gray-20: var(--color-base-gray) 20%;
+  --color-gray-30: var(--color-base-gray) 30%;
+  --color-gray-40: var(--color-base-gray) 40%;
+  --color-gray-50: var(--color-base-gray) 50%;
+  --color-gray-60: var(--color-base-gray) 60%;
+  --color-gray-70: var(--color-base-gray) 70%;
+  --color-gray-80: var(--color-base-gray) 80%;
+  --color-gray-90: var(--color-base-gray) 90%;
+  --color-gray-95: var(--color-base-gray) 95%;
+}
+
+body {
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+em {
+  font-style: italic;
+}
+
+body,
+h1,
+h2,
+h3 {
+  font-weight: 300;
+  margin-bottom: 1em;
+}
+
+h1 { font-size: 20px; }
+h2 { font-size: 16px; margin-top: 1em; }
+
+table,
+progress {
+  width: 100%;
+}
+
+th,
+td,
+[type=text],
+textarea {
+  margin-right: 5px;
+  padding: 3px 6px;
+}
+
+th {
+  width: 10%;
+  font-weight: 500;
+  text-align: right;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+[type=text],
+textarea {
+  width: 200px;
+  padding: 5px;
+  border: 1px solid hsl(var(--color-gray-70));
+  border-radius: 3px;
+  outline: 0;
+}
+
+[type=text]:focus,
+textarea:focus {
+  border-color: hsl(var(--color-gray-50));
+  box-shadow: 0 0 5px hsl(var(--color-gray-90));
+}
+
+textarea {
+  height: 100px;
+  font-family: monospace;
+  vertical-align: bottom;
+}
+
+button {
+  cursor: pointer;
+  margin: 3px;
+  padding: 6px 12px;
+  border: 0;
+  border-radius: 3px;
+  outline: 0;
+  background-color: hsl(var(--color-gray-95));
+}
+
+button:focus {
+  background-color: hsl(var(--color-gray-90));
+}
+
+button:hover {
+  background-color: hsl(var(--color-gray-80));
+}
+
+button:active {
+  background-color: hsl(var(--color-gray-70));
+}

examples/react/public/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+    <title>ReactPlayer Demo</title>
+    <link rel='stylesheet' href='./reset.css'>
+    <link rel='stylesheet' href='./defaults.css'>
+    <link rel='stylesheet' href='./range.css'>
+    <link rel='stylesheet' href='./App.css'>
+    <script defer src='./index.js'></script>
+  </head>
+  <body>
+    <div id='app'></div>
+  </body>
+</html>

examples/react/public/range.css

@@ -0,0 +1,83 @@
+/*
+// Styling Cross-Browser Compatible Range Inputs with Sass
+// Github: https://github.com/darlanrod/input-range-sass
+// Author: Darlan Rod https://github.com/darlanrod
+// Version 1.4.1
+// MIT License
+*/
+/* Transformed to plain CSS and removed -ms selectors */
+
+:root {
+  --track-color: #eee;
+  --thumb-color: #666;
+  --thumb-radius: 12px;
+  --thumb-height: 12px;
+  --thumb-width: 12px;
+  --thumb-shadow-size: 0;
+  --thumb-shadow-blur: 0;
+  --thumb-shadow-color: #111;
+  --thumb-border-width: 0;
+  --thumb-border-color: #fff;
+  --track-width: 100%;
+  --track-height: 10px;
+  --track-shadow-size: 0;
+  --track-shadow-blur: 0;
+  --track-shadow-color: #222;
+  --track-border-width: 0;
+  --track-border-color: #000;
+  --track-radius: 5px;
+}
+
+[type='range'] {
+  -webkit-appearance: none;
+  margin: var(--thumb-height) / 2 0;
+  width: var(--track-width);
+}
+
+[type='range']:focus {
+  outline: 0;
+}
+
+[type='range']::-webkit-slider-runnable-track {
+  cursor: pointer;
+  height: var(--track-height);
+  transition: all 0.2s ease;
+  width: var(--track-width);
+  background: var(--track-color);
+  border: var(--track-border-width) solid var(--track-border-color);
+  border-radius: var(--track-radius);
+  box-shadow: var(--track-shadow-size) var(--track-shadow-size) var(--track-shadow-blur) var(--track-shadow-color), 0 0 var(--track-shadow-size) lighten(var(--track-shadow-color), 5%);
+}
+
+[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  cursor: pointer;
+  width: var(--thumb-width);
+  height: var(--thumb-height);
+  background: var(--thumb-color);
+  border: var(--thumb-border-width) solid var(--thumb-border-color);
+  border-radius: var(--thumb-radius);
+  margin-top: calc((var(--track-border-width) * -2 + var(--track-height)) / 2 - (var(--thumb-height) / 2));
+  box-shadow: var(--thumb-shadow-size) var(--thumb-shadow-size) var(--thumb-shadow-blur) var(--thumb-shadow-color);
+}
+
+[type='range']::-moz-range-track {
+  cursor: pointer;
+  height: var(--track-height);
+  transition: all 0.2s ease;
+  width: var(--track-width);
+  background: var(--track-color);
+  border: var(--track-border-width) solid var(--track-border-color);
+  border-radius: var(--track-radius);
+  box-shadow: var(--track-shadow-size) var(--track-shadow-size) var(--track-shadow-blur) var(--track-shadow-color);
+}
+
+[type='range']::-moz-range-thumb {
+  cursor: pointer;
+  width: var(--thumb-width);
+  height: var(--thumb-height);
+  background: var(--thumb-color);
+  border: var(--thumb-border-width) solid var(--thumb-border-color);
+  border-radius: var(--thumb-radius);
+  box-shadow: var(--thumb-shadow-size) var(--thumb-shadow-size) var(--thumb-shadow-blur) var(--thumb-shadow-color);
+}

src/demo/App.js → examples/react/src/App.js

@@ -1,15 +1,8 @@
 import React, { Component } from 'react'
-import { findDOMNode } from 'react-dom'
-import { hot } from 'react-hot-loader'
 import screenfull from 'screenfull'
 
-import './reset.css'
-import './defaults.css'
-import './range.css'
-import './App.css'
-
-import { version } from '../../package.json'
-import ReactPlayer from '../index'
+import { version } from '../../../package.json'
+import ReactPlayer from '../../..'
 import Duration from './Duration'
 
 class App extends Component {
@@ -133,7 +126,7 @@ class App extends Component {
   }
 
   handleClickFullscreen = () => {
-    screenfull.request(findDOMNode(this.player))
+    screenfull.request(document.querySelector('.react-player'))
   }
 
   renderLoadButton = (url, label) => {
@@ -435,4 +428,4 @@ class App extends Component {
   }
 }
 
-export default hot(module)(App)
+export default App