Skip to content

Commit 93bf769

Browse files
mirshkomirshko
committed
♻️ quick refactor to be cleaner
1 parent 4b0fd2c commit 93bf769

File tree

12 files changed

+174
-68
lines changed

12 files changed

+174
-68
lines changed

‎package.json

+8-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
"name": "thumbnailer",
33
"version": "0.1.0",
44
"private": false,
5+
"license": "MIT",
56
"dependencies": {
7+
"modern-normalize": "^0.5.0",
68
"react": "^16.6.3",
79
"react-dom": "^16.6.3",
810
"react-scripts": "2.1.1"
@@ -11,7 +13,8 @@
1113
"start": "react-scripts start",
1214
"build": "react-scripts build",
1315
"test": "react-scripts test",
14-
"eject": "react-scripts eject"
16+
"eject": "react-scripts eject",
17+
"format": "prettier --write \"./src/**/*.js\""
1518
},
1619
"eslintConfig": {
1720
"extends": "react-app"
@@ -21,5 +24,8 @@
2124
"not dead",
2225
"not ie <= 11",
2326
"not op_mini all"
24-
]
27+
],
28+
"devDependencies": {
29+
"prettier": "^1.15.3"
30+
}
2531
}

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
77
<meta name="theme-color" content="#000000" />
88

‎src/App.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
body {
2+
padding: 8px 32px 48px;
3+
max-width: 800px;
4+
color: #151513;
5+
}
6+
7+
h1,
8+
h2,
9+
h3,
10+
h4,
11+
h5,
12+
h6 {
13+
line-height: 1.2;
14+
}
15+
16+
p {
17+
line-height: 1.5;
18+
}
19+
20+
code {
21+
background-color: rgba(21, 21, 19, 0.05);
22+
padding: 0 2px;
23+
}

‎src/App.js

+14-34
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import React, { Component, Fragment } from "react";
1+
import React, { Component } from "react";
2+
3+
import Corner from "./components/Corner";
4+
import Intro from "./components/Intro";
25

36
class App extends Component {
47
constructor(props) {
@@ -38,7 +41,7 @@ class App extends Component {
3841
const mediaId = this.state.videoUrl.match(/medias\/(\w{10})/)[1];
3942
const videoWidth = this.state.videoWidth;
4043
const videoHeight = Math.round(
41-
this.state.videoWidth / 16 * this.state.aspectRatio
44+
(this.state.videoWidth / 16) * this.state.aspectRatio
4245
);
4346

4447
fetch(
@@ -75,25 +78,13 @@ class App extends Component {
7578
error
7679
} = this.state;
7780

78-
const videoHeight = Math.round(videoWidth / 16 * aspectRatio);
81+
const videoHeight = Math.round((videoWidth / 16) * aspectRatio);
7982

8083
return (
81-
<Fragment>
82-
<header>
83-
<h1>Wistia Thumbnail Generator</h1>
84-
<ol>
85-
<li>
86-
Enter the <strong>URL</strong> of the Wistia video e.g.{" "}
87-
<i>
88-
https://<strong>my-account</strong>.wistia.com/medias/...
89-
</i>
90-
</li>
91-
<li>
92-
Enter desired thumbnail <strong>Width</strong>, and change the{" "}
93-
<strong>Aspect Ratio</strong> if needed (default is <i>16:9</i>)
94-
</li>
95-
</ol>
96-
</header>
84+
<>
85+
<Corner />
86+
87+
<Intro />
9788

9889
<main>
9990
<h3>Thumbnail Information</h3>
@@ -155,7 +146,7 @@ class App extends Component {
155146
</label>
156147
</div>
157148

158-
<div>
149+
<div style={{ marginTop: "1rem" }}>
159150
<input
160151
type="submit"
161152
value={!loading ? "Get Thumbnail" : "Loading"}
@@ -166,7 +157,7 @@ class App extends Component {
166157
</form>
167158

168159
{previewThumbSrc && (
169-
<Fragment>
160+
<>
170161
<div>
171162
<pre>
172163
<code>{previewThumbSrc}</code>
@@ -178,21 +169,10 @@ class App extends Component {
178169
<img alt="Wistia Thumbnail" src={previewThumbSrc} />
179170
</a>
180171
</div>
181-
</Fragment>
172+
</>
182173
)}
183174
</main>
184-
185-
<footer>
186-
<p>
187-
A thing by <a href="https://www.reiner.io">Jeff Reiner</a>, check
188-
out the{" "}
189-
<a href="https://github.com/mirshko/thumbnailer.reiner.io">
190-
source code
191-
</a>{" "}
192-
on GitHub
193-
</p>
194-
</footer>
195-
</Fragment>
175+
</>
196176
);
197177
}
198178
}

‎src/App.test.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import App from './App';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import App from "./App";
44

5-
it('renders without crashing', () => {
6-
const div = document.createElement('div');
5+
it("renders without crashing", () => {
6+
const div = document.createElement("div");
77
ReactDOM.render(<App />, div);
88
ReactDOM.unmountComponentAtNode(div);
99
});

‎src/components/Corner/index.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.github-corner:hover .octo-arm {
2+
animation: octocat-wave 560ms ease-in-out;
3+
}
4+
@keyframes octocat-wave {
5+
0%,
6+
100% {
7+
transform: rotate(0);
8+
}
9+
20%,
10+
60% {
11+
transform: rotate(-25deg);
12+
}
13+
40%,
14+
80% {
15+
transform: rotate(10deg);
16+
}
17+
}
18+
@media (max-width: 500px) {
19+
.github-corner:hover .octo-arm {
20+
animation: none;
21+
}
22+
.github-corner .octo-arm {
23+
animation: octocat-wave 560ms ease-in-out;
24+
}
25+
}

‎src/components/Corner/index.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from "react";
2+
3+
import "./index.css";
4+
5+
const Corner = () => (
6+
<a
7+
href="https://github.com/mirshko/thumbnailer"
8+
className="github-corner"
9+
aria-label="View source on Github"
10+
>
11+
<svg
12+
width="80"
13+
height="80"
14+
viewBox="0 0 250 250"
15+
style={{
16+
fill: "#151513",
17+
color: "#fff",
18+
position: "absolute",
19+
top: 0,
20+
border: 0,
21+
right: 0
22+
}}
23+
aria-hidden="true"
24+
>
25+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
26+
<path
27+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
28+
fill="currentColor"
29+
style={{ transformOrigin: "130px 106px" }}
30+
className="octo-arm"
31+
/>
32+
<path
33+
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
34+
fill="currentColor"
35+
className="octo-body"
36+
/>
37+
</svg>
38+
</a>
39+
);
40+
41+
export default Corner;

‎src/components/Intro/index.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from "react";
2+
3+
const Intro = () => (
4+
<header>
5+
<h1>Wistia Thumbnail Generator</h1>
6+
<ol>
7+
<li>
8+
Enter the <strong>URL</strong> of the Wistia video e.g.{" "}
9+
<i>
10+
https://<strong>my-account</strong>.wistia.com/medias/...
11+
</i>
12+
</li>
13+
<li>
14+
Enter desired thumbnail <strong>Width</strong>, and change the{" "}
15+
<strong>Aspect Ratio</strong> if needed (default is <i>16:9</i>)
16+
</li>
17+
</ol>
18+
<p>Here is an example video to test this out with should you need a place to start: <code>https://home.wistia.com/medias/e4a27b971d</code></p>
19+
</header>
20+
);
21+
22+
export default Intro;

‎src/index.css

-5
This file was deleted.

‎src/index.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import * as serviceWorker from './serviceWorker';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
63

7-
ReactDOM.render(<App />, document.getElementById('root'));
4+
import "modern-normalize";
5+
import "./App.css";
6+
7+
import App from "./App";
8+
9+
import * as serviceWorker from "./serviceWorker";
10+
11+
ReactDOM.render(<App />, document.getElementById("root"));
812

913
// If you want your app to work offline and load faster, you can change
1014
// unregister() to register() below. Note this comes with some pitfalls.

‎src/serviceWorker.js

+15-15
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@
1111
// opt-in, read http://bit.ly/CRA-PWA
1212

1313
const isLocalhost = Boolean(
14-
window.location.hostname === 'localhost' ||
14+
window.location.hostname === "localhost" ||
1515
// [::1] is the IPv6 localhost address.
16-
window.location.hostname === '[::1]' ||
16+
window.location.hostname === "[::1]" ||
1717
// 127.0.0.1/8 is considered localhost for IPv4.
1818
window.location.hostname.match(
1919
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
2020
)
2121
);
2222

2323
export function register(config) {
24-
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
24+
if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
2525
// The URL constructor is available in all browsers that support SW.
2626
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
2727
if (publicUrl.origin !== window.location.origin) {
@@ -31,7 +31,7 @@ export function register(config) {
3131
return;
3232
}
3333

34-
window.addEventListener('load', () => {
34+
window.addEventListener("load", () => {
3535
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
3636

3737
if (isLocalhost) {
@@ -42,8 +42,8 @@ export function register(config) {
4242
// service worker/PWA documentation.
4343
navigator.serviceWorker.ready.then(() => {
4444
console.log(
45-
'This web app is being served cache-first by a service ' +
46-
'worker. To learn more, visit http://bit.ly/CRA-PWA'
45+
"This web app is being served cache-first by a service " +
46+
"worker. To learn more, visit http://bit.ly/CRA-PWA"
4747
);
4848
});
4949
} else {
@@ -64,14 +64,14 @@ function registerValidSW(swUrl, config) {
6464
return;
6565
}
6666
installingWorker.onstatechange = () => {
67-
if (installingWorker.state === 'installed') {
67+
if (installingWorker.state === "installed") {
6868
if (navigator.serviceWorker.controller) {
6969
// At this point, the updated precached content has been fetched,
7070
// but the previous service worker will still serve the older
7171
// content until all client tabs are closed.
7272
console.log(
73-
'New content is available and will be used when all ' +
74-
'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
73+
"New content is available and will be used when all " +
74+
"tabs for this page are closed. See http://bit.ly/CRA-PWA."
7575
);
7676

7777
// Execute callback
@@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) {
8282
// At this point, everything has been precached.
8383
// It's the perfect time to display a
8484
// "Content is cached for offline use." message.
85-
console.log('Content is cached for offline use.');
85+
console.log("Content is cached for offline use.");
8686

8787
// Execute callback
8888
if (config && config.onSuccess) {
@@ -94,7 +94,7 @@ function registerValidSW(swUrl, config) {
9494
};
9595
})
9696
.catch(error => {
97-
console.error('Error during service worker registration:', error);
97+
console.error("Error during service worker registration:", error);
9898
});
9999
}
100100

@@ -103,10 +103,10 @@ function checkValidServiceWorker(swUrl, config) {
103103
fetch(swUrl)
104104
.then(response => {
105105
// Ensure service worker exists, and that we really are getting a JS file.
106-
const contentType = response.headers.get('content-type');
106+
const contentType = response.headers.get("content-type");
107107
if (
108108
response.status === 404 ||
109-
(contentType != null && contentType.indexOf('javascript') === -1)
109+
(contentType != null && contentType.indexOf("javascript") === -1)
110110
) {
111111
// No service worker found. Probably a different app. Reload the page.
112112
navigator.serviceWorker.ready.then(registration => {
@@ -121,13 +121,13 @@ function checkValidServiceWorker(swUrl, config) {
121121
})
122122
.catch(() => {
123123
console.log(
124-
'No internet connection found. App is running in offline mode.'
124+
"No internet connection found. App is running in offline mode."
125125
);
126126
});
127127
}
128128

129129
export function unregister() {
130-
if ('serviceWorker' in navigator) {
130+
if ("serviceWorker" in navigator) {
131131
navigator.serviceWorker.ready.then(registration => {
132132
registration.unregister();
133133
});

0 commit comments

Comments
 (0)