chore: make example work with codesandbox ci

tjallingt · tjallingt · commit 145d77170998 · 2020-04-19T16:49:55.000+02:00
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,3 +1,4 @@
 {
-  "buildCommand": "compile"
+  "buildCommand": "compile",
+  "sandboxes": ["/example"]
 }
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/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,60 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import YouTube from 'react-youtube';
+
+import './styles.css';
+
+const VIDEOS = ['XxVg_s8xAms', '-DX3vJiqxm4'];
+
+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(<YouTubeComponentExample />, 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;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "buildCommand": "compile"`
	`2`	`+ "buildCommand": "compile",`
	`3`	`+ "sandboxes": ["/example"]`
`3`	`4`	`}`