Port to react

TGlide · Jul 13, 2021 · 0b99f1c · 0b99f1c
1 parent 964b412
commit 0b99f1c
Show file tree

Hide file tree

Showing 35 changed files with 12,255 additions and 143 deletions.
diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
@@ -0,0 +1,54 @@
+name: Build & deploy
+
+on:
+ push:
+ branches:
+ - master
+ pull_request:
+ branches:
+ - master
+
+jobs:
+ build:
+ name: Build
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v2
+
+ - name: Install Node.js
+ uses: actions/setup-node@v1
+ with:
+ node-version: 13.x
+
+ - name: Install NPM packages
+ run: npm ci
+
+ - name: Build project
+ run: npm run build
+
+ - name: Upload production-ready build files
+ uses: actions/upload-artifact@v2
+ with:
+ name: production-files
+ path: ./build
+
+ deploy:
+ name: Deploy
+ needs: build
+ runs-on: ubuntu-latest
+ if: github.ref == 'refs/heads/master'
+
+ steps:
+ - name: Download artifact
+ uses: actions/download-artifact@v2
+ with:
+ name: production-files
+ path: ./build
+
+ - name: Deploy to gh-pages
+ uses: peaceiris/actions-gh-pages@v3
+ with:
+ github_token: ${{ secrets.GITHUB_TOKEN }}
+ publish_dir: ./build
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # movie-web
-
-Available at: [movie.squeezebox.dev](https://movie.squeezebox.dev)
-
-Credits to [@JipFr](https://github.com/JipFr) for initial work on [movie-cli](https://github.com/JipFr/movie-cli)
+Small web app for watching movies easily. Check it out at **[movie.squeezebox.dev](https://movie.squeezebox.dev)**.
+## Credits
+ - Thanks to [@JipFr](https://github.com/JipFr) for initial work on [movie-cli](https://github.com/JipFr/movie-cli)
+ - Thanks to [@mrjvs](https://github.com/mrjvs) for help porting to React
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/fonts/JetBrainsMono-Regular.woff2 b/assets/fonts/JetBrainsMono-Regular.woff2
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -0,0 +1,42 @@
+{
+ "name": "movie-web",
+ "version": "0.1.0",
+ "private": true,
+ "homepage": "https://movie.squeezebox.dev",
+ "dependencies": {
+ "@testing-library/jest-dom": "^5.11.4",
+ "@testing-library/react": "^11.1.0",
+ "@testing-library/user-event": "^12.1.10",
+ "fuse.js": "^6.4.6",
+ "hls.js": "^1.0.7",
+ "json5": "^2.2.0",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "react-scripts": "4.0.3",
+ "web-vitals": "^1.0.1"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
+ },
+ "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/public/index.html b/public/index.html
@@ -0,0 +1,20 @@
+<!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="because watching movies legally is boring"
+ />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <title>movie-web</title>
+ </head>
+ <body>
+ <noscript style="color: white">You need to enable JavaScript to run this app.</noscript>
+ <div id="root"></div>
+ </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+ "short_name": "movie-web",
+ "name": "movie-web",
+ "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": "#191c24",
+ "background_color": "#0c0e14"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,31 @@
+import './index.css';
+import { SearchView } from './views/Search';
+import { NotFound } from './views/NotFound';
+import { MovieView } from './views/Movie';
+import { useMovie, MovieProvider} from './hooks/useMovie';
+
+function Router() {
+ const { page } = useMovie();
+
+ if (page === "search") {
+ return <SearchView/>
+ }
+
+ if (page === "movie") {
+ return <MovieView/>
+ }
+
+ return (
+ <NotFound/>
+ )
+}
+
+function App() {
+ return (
+ <MovieProvider>
+ <Router/>
+ </MovieProvider>
+ );
+}
+
+export default App;
diff --git a/src/components/Arrow.css b/src/components/Arrow.css
@@ -0,0 +1,7 @@
+.feather.left {
+ transform: rotate(180deg);
+}
+
+.arrow {
+ display: inline-block;
+}
diff --git a/src/components/Arrow.js b/src/components/Arrow.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import './Arrow.css'
+
+// left?: boolean
+export function Arrow(props) {
+ return (
+ <div className="arrow">
+ <svg xmlns="http:https://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={`feather ${props.left?'left':''}`}>
+ <line x1="5" y1="12" x2="19" y2="12"></line>
+ <polyline points="12 5 19 12 12 19"></polyline>
+ </svg>
+ </div>
+ )
+}
diff --git a/src/components/Card.css b/src/components/Card.css
@@ -0,0 +1,28 @@
+.card {
+ background-color: #22232A;
+ padding: 3rem 4rem;
+ width: 39rem;
+ max-width: 100%;
+ margin: 0 3rem;
+ border-radius: 10px;
+ box-sizing: border-box;
+ transition: height 500ms ease-in-out, transform 800ms ease-in-out, opacity 800ms ease-in-out;
+}
+
+.card.full {
+ width: 75rem;
+}
+
+.card-wrapper {
+ transition: height 500ms ease-in-out;
+ overflow: hidden;
+}
+
+.card.doTransition {
+ opacity: 0;
+ transform: translateY(-.7rem);
+}
+.card.doTransition.show {
+ opacity: 1;
+ transform: translateY(0rem);
+}
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import './Card.css'
+
+// fullWidth: boolean
+// show: boolean
+// doTransition: boolean
+export function Card(props) {
+
+ const [showing, setShowing] = React.useState(false);
+ const measureRef = React.useRef(null)
+ const [height, setHeight] = React.useState(0);
+
+ React.useEffect(() => {
+ if (!measureRef?.current) return;
+ setShowing(props.show);
+ setHeight(measureRef.current.clientHeight)
+ }, [props.show, measureRef])
+
+ return (
+ <div className="card-wrapper" style={{
+ height: props.doTransition ? (showing ? height : 0) : "initial",
+ }}>
+ <div className={`card ${ props.fullWidth ? 'full' : '' } ${ showing ? 'show' : '' } ${ props.doTransition ? 'doTransition' : '' }`} ref={measureRef}>
+ {props.children}
+ </div>
+ </div>
+ )
+}