tjallingt · tjallingt · Apr 19, 2020 · Apr 19, 2020 · Apr 4, 2020
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,3 +1,4 @@
 {
-  "buildCommand": "compile"
+  "buildCommand": "compile",
+  "sandboxes": ["/example"]
 }
diff --git a/.eslintrc b/.eslintrc
@@ -1,16 +1,7 @@
 {
-  "parser": "babel-eslint",
-  "extends": ["airbnb", "prettier"],
-  "plugins": ["prettier"],
-  "rules": {
-    "linebreak-style": 0,
-    "react/jsx-filename-extension": 0,
-    "react/destructuring-assignment": 0,
-    "import/no-extraneous-dependencies": 0,
-    "prettier/prettier": "error"
-  },
+  "extends": ["react-app", "plugin:prettier/recommended", "prettier/react"],
   "env": {
     "browser": true,
     "jest": true
   }
-}
+}
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,6 @@
-node_modules
+node_modules/
 npm-debug.log
-dist
-es
-.vscode/*
-.cache/*
-build/*
+dist/
+.vscode/
+.cache/
+build/
diff --git a/example/example.js b/example/example.js
diff --git a/example/index.html b/example/index.html
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8" />
     <title>react-youtube example</title>
+    <meta charset="UTF-8" />
   </head>
+
   <body>
-    <div id="root"></div>
-    <script src="./example.js"></script>
+    <div id="app"></div>
+
+    <script src="src/index.js"></script>
   </body>
 </html>
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "react-youtube-example",
+  "version": "1.0.0",
+  "description": "react-youtube example starter project",
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-youtube": "7.11.2"
+  },
+  "devDependencies": {
+    "@babel/core": "7.2.0",
+    "parcel-bundler": "^1.6.1"
+  },
+  "keywords": [
+    "javascript",
+    "starter"
+  ]
+}
diff --git a/example/src/index.js b/example/src/index.js
@@ -0,0 +1,116 @@
+import React, { Fragment, useState } from 'react';
+import ReactDOM from 'react-dom';
+import YouTube, { useYouTube } from 'react-youtube';
+
+import './styles.css';
+
+const VIDEOS = ['XxVg_s8xAms', '-DX3vJiqxm4'];
+
+function YouTubeHookExample() {
+  const [videoIndex, setVideoIndex] = useState(0);
+  const [width, setWidth] = useState(600);
+  const [hidden, setHidden] = useState(false);
+  const [autoplay, setAutoplay] = useState(false);
+
+  const { targetRef, player } = useYouTube({
+    videoId: VIDEOS[videoIndex],
+    autoplay,
+    width,
+    height: width * (9 / 16),
+  });
+
+  return (
+    <div className="App">
+      <div style={{ display: 'flex', marginBottom: '1em' }}>
+        <button type="button" onClick={() => player.seekTo(120)}>
+          Seek to 2 minutes
+        </button>
+        <button type="button" onClick={() => setVideoIndex((videoIndex + 1) % VIDEOS.length)}>
+          Change video
+        </button>
+        <label>
+          <input
+            type="range"
+            min="300"
+            max="1080"
+            value={width}
+            onChange={(event) => setWidth(event.currentTarget.value)}
+          />
+          Width ({width}px)
+        </label>
+        <button type="button" onClick={() => setHidden(!hidden)}>
+          {hidden ? 'Show' : 'Hide'}
+        </button>
+        <label>
+          <input
+            type="checkbox"
+            value={autoplay}
+            onChange={(event) => setAutoplay(event.currentTarget.checked === false)}
+          />
+          Autoplaying
+        </label>
+      </div>
+
+      {hidden ? 'mysterious' : <div className="container" ref={targetRef} />}
+    </div>
+  );
+}
+
+function YouTubeComponentExample() {
+  const [player, setPlayer] = useState(0);
+  const [videoIndex, setVideoIndex] = useState(0);
+  const [width, setWidth] = useState(600);
+  const [hidden, setHidden] = useState(false);
+  const [autoplay, setAutoplay] = useState(false);
+
+  return (
+    <div className="App">
+      <div style={{ display: 'flex', marginBottom: '1em' }}>
+        <button type="button" onClick={() => player.seekTo(120)}>
+          Seek to 2 minutes
+        </button>
+        <button type="button" onClick={() => setVideoIndex((videoIndex + 1) % VIDEOS.length)}>
+          Change video
+        </button>
+        <label>
+          <input
+            type="range"
+            min="300"
+            max="1080"
+            value={width}
+            onChange={(event) => setWidth(event.currentTarget.value)}
+          />
+          Width ({width}px)
+        </label>
+        <button type="button" onClick={() => setHidden(!hidden)}>
+          {hidden ? 'Show' : 'Hide'}
+        </button>
+        <label>
+          <input type="checkbox" value={autoplay} onChange={(event) => setAutoplay(event.currentTarget.checked)} />
+          Autoplaying
+        </label>
+      </div>
+
+      {hidden ? (
+        'mysterious'
+      ) : (
+        <YouTube
+          videoId={VIDEOS[videoIndex]}
+          autoplay={autoplay}
+          width={width}
+          height={width * (9 / 16)}
+          className="container"
+          onReady={(event) => setPlayer(event.target)}
+        />
+      )}
+    </div>
+  );
+}
+
+ReactDOM.render(
+  <Fragment>
+    <YouTubeComponentExample />
+    <YouTubeHookExample />
+  </Fragment>,
+  document.getElementById('app'),
+);
diff --git a/example/src/styles.css b/example/src/styles.css
@@ -0,0 +1,6 @@
+#app {
+  font-family: sans-serif;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "7.9.0",
   "description": "React.js powered YouTube player component",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.mjs",
   "types": "index.d.ts",
   "files": [
     "dist",
@@ -41,15 +41,18 @@
     "@testing-library/jest-dom": "5.3.0",
     "@testing-library/react": "10.0.2",
     "@types/youtube": "0.0.38",
+    "@typescript-eslint/eslint-plugin": "2.28.0",
+    "@typescript-eslint/parser": "2.28.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "25.2.6",
     "babel-loader": "8.1.0",
     "commitizen": "4.0.3",
     "cross-env": "7.0.2",
     "cz-conventional-changelog": "3.1.0",
     "eslint": "6.8.0",
-    "eslint-config-airbnb": "18.1.0",
     "eslint-config-prettier": "6.10.1",
+    "eslint-config-react-app": "5.2.1",
+    "eslint-plugin-flowtype": "4.7.0",
     "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-prettier": "3.1.2",
@@ -75,8 +78,8 @@
   "scripts": {
     "test": "jest",
     "test:ci": "jest --ci --runInBand",
-    "compile:cjs": "babel src/YouTube.js --out-file dist/index.js",
-    "compile:es": "cross-env BABEL_ENV=es babel src/YouTube.js --out-file dist/index.esm.js",
+    "compile:cjs": "babel src --out-dir dist",
+    "compile:es": "cross-env BABEL_ENV=es babel src --out-dir dist --out-file-extension .mjs",
     "compile": "npm-run-all --parallel compile:*",
     "prepublishOnly": "npm run compile",
     "lint": "eslint src example",

diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,19 @@
+import YouTube from './YouTube.js';
+import useYouTube from './useYouTube.js';
+
+export default YouTube;
+export { useYouTube };
+
+/**
+ * Expose PlayerState constants for convenience. These constants can also be
+ * accessed through the global YT object after the YouTube IFrame API is instantiated.
+ * https://developers.google.com/youtube/iframe_api_reference#onStateChange
+ */
+export const PlayerState = {
+  UNSTARTED: -1,
+  ENDED: 0,
+  PLAYING: 1,
+  PAUSED: 2,
+  BUFFERING: 3,
+  CUED: 5,
+};