Merge pull request #1 from maciej3031/frontend

Frontend

.gitignore

@@ -108,3 +108,19 @@ data
 .idea
 media
 
+# JS Stuff
+node_modules/
+.npm
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock

frontend/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

frontend/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class FrontendConfig(AppConfig):
+    name = 'frontend'

frontend/client/App.js

@@ -0,0 +1,125 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { post } from "axios";
+import Dropzone from "react-dropzone";
+import { BarLoader } from "react-spinners";
+import { css } from "react-emotion";
+
+const COMIXIFY_API = "/comixify/";
+const MAX_FILE_SIZE = 50000000;
+const PERMITTED_VIDEO_EXTENSIONS = "video/*";
+
+class App extends React.Component {
+	static appStates = {
+		INITIAL: 0,
+		PROCESSING: 1,
+		FINISHED: 2,
+		UPLOAD_ERROR: 3,
+		DROP_ERROR: 4
+	};
+	constructor(props) {
+		super(props);
+		this.state = {
+			state: App.appStates.INITIAL,
+			drop_errors: [],
+			result_comics: null
+		};
+		this.onVideoDrop = this.onVideoDrop.bind(this);
+		this.onVideoUploadProgress = this.onVideoUploadProgress.bind(this);
+	}
+	onVideoUploadProgress(progressEvent) {
+		let percentCompleted = Math.round(
+			progressEvent.loaded * 100 / progressEvent.total
+		);
+		console.log(percentCompleted);
+	}
+	processVideo(video) {
+		let data = new FormData();
+		data.append("file", video);
+		post(COMIXIFY_API, data, {
+			headers: { "content-type": "multipart/form-data" },
+			onUploadProgress: this.onVideoUploadProgress
+		})
+			.then(res => {
+				if (res.data["status_message"] === "ok") {
+					this.setState({
+						state: App.appStates.FINISHED,
+						result_comics: res.data["comic"]
+					});
+				} else {
+					this.setState({
+						state: App.appStates.UPLOAD_ERROR
+					});
+				}
+			})
+			.catch(err => {
+				console.error(err);
+				this.setState({
+					state: App.appStates.UPLOAD_ERROR
+				});
+			});
+		this.setState({
+			state: App.appStates.PROCESSING
+		});
+	}
+	onVideoDrop(files, rejected) {
+		if (rejected.length !== 0) {
+			console.error(rejected);
+			this.setState({
+				drop_errors: ["Maximum size for single video is 50MB"],
+				stata: App.appStates.DROP_ERROR
+			});
+			return;
+		}
+		this.processVideo(files[0]);
+	}
+
+	render() {
+		let { state, drop_errors, result_comics } = this.state;
+		let showDropzone = [
+			App.appStates.INITIAL,
+			App.appStates.UPLOAD_ERROR,
+			App.appStates.DROP_ERROR,
+			App.appStates.FINISHED
+		].includes(state);
+		return (
+			<div className="wrap">
+				<h1>Comixify</h1>
+				{state === App.appStates.FINISHED && [
+					<img key="1" src={result_comics} />,
+					<p key="2">Go again:</p>
+				]}
+				{state === App.appStates.DROP_ERROR &&
+					drop_errors.map((o, i) => <p key={i}>{o}</p>)}
+				{state === App.appStates.UPLOAD_ERROR && (
+					<p>Server Error: Please try again later.</p>
+				)}
+				{showDropzone && (
+					<Dropzone
+						onDrop={this.onVideoDrop}
+						accept={PERMITTED_VIDEO_EXTENSIONS}
+						maxSize={MAX_FILE_SIZE}
+						className="dropzone"
+						acceptClassName="dropzone--accepted"
+						rejectClassName="dropzone--rejected"
+						multiple={false} // Only one video at the time
+					>
+						<p>Drop files here, or click to select manually</p>
+					</Dropzone>
+				)}
+				{state === App.appStates.PROCESSING && (
+					<BarLoader
+						color={"rgb(54, 215, 183)"}
+						className={css`
+							margin: 0 auto;
+						`}
+						width={10}
+						widthUnit="rem"
+					/>
+				)}
+			</div>
+		);
+	}
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));

frontend/client/webpack.config.js

@@ -0,0 +1,51 @@
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+
+let common = {
+    entry: {
+        app: __dirname + "/App.js"
+    },
+    output: {
+        path: __dirname + "/../static/frontend/js",
+        filename: "[name].client.js"
+    },
+    externals: {
+        cheerio: "window",
+        "react/lib/ExecutionEnvironment": true,
+        "react/lib/ReactContext": true
+    },
+    module: {
+        rules: [
+            {
+                test: /\.jsx?$/,
+                exclude: /(node_modules|bower_components)/,
+                loader: "babel-loader",
+                query: {
+                    presets: ["react", "stage-0", "flow"],
+                    plugins: ["emotion"]
+                }
+            },
+            {
+                test: /\.css$/,
+                use: ["style-loader", "css-loader"]
+            }
+        ]
+    }
+};
+
+if (process.env.NODE_ENV === "production") {
+    module.exports = merge(common, {
+        plugins: [
+            new webpack.DefinePlugin({
+                "process.env.NODE_ENV": JSON.stringify("production")
+            }),
+            new UglifyJsPlugin()
+        ],
+        mode: "production"
+    });
+} else {
+    module.exports = merge(common, {
+        mode: "development"
+    });
+}

frontend/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

frontend/static/frontend/css/app.css

@@ -0,0 +1,58 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	color: #222;
+	background: #eee;
+}
+
+.wrap {
+	padding: 1rem;
+	margin: 2rem auto 0 auto;
+	max-width: 700px;
+	background: white;
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+	border: 1px solid rgba(0, 0, 0, 0.09);
+	border-radius: 3px;
+	box-sizing: border-box;
+}
+
+img {
+	width: 100%;
+}
+
+.bar-loader {
+	margin: 0 auto;
+}
+
+.dropzone {
+	padding: 1rem;
+	height: 10rem;
+	border: 2px dashed gray;
+}
+
+.dropzone--rejected {
+	border-style: solid;
+	border-color: #c66;
+	background-color: #eee;
+}
+
+.dropzone--disabled {
+	opacity: 0.5;
+}
+
+.dropzone--accepted {
+	border-style: solid;
+	border-color: #6c6;
+	background-color: #eee;
+}
+
+@media all and (max-width: 700px) {
+	.wrap {
+		margin-top: 0;
+		border-radius: 0;
+	}
+}

frontend/templates/index.html

@@ -0,0 +1,16 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Comixify</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="{% static 'frontend/css/app.css' %}" />
+</head>
+<body>
+
+<div id="root"></div>
+<script type="text/javascript" src="{% static 'frontend/js/app.client.js' %}"></script>
+
+</body>
+</html>

frontend/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

frontend/urls.py

@@ -0,0 +1,8 @@
+from django.conf.urls import url
+
+from .views import index
+
+
+urlpatterns = [
+    url(r'^$', index, name='comixify_index'),
+]

frontend/views.py

@@ -0,0 +1,5 @@
+from django.shortcuts import render
+
+
+def index(request):
+	return render(request, "index.html")

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "comixify",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config ./frontend/client/webpack.config.js",
+    "build:watch":
+      "webpack --config ./frontend/client/webpack.config.js --watch",
+    "build:prod":
+      "NODE_ENV=production webpack --config ./frontend/client/webpack.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maciej3031/comixify.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/maciej3031/comixify/issues"
+  },
+  "homepage": "https://github.com/maciej3031/comixify#readme",
+  "dependencies": {
+    "axios": "^0.18.0",
+    "babel": "^6.23.0",
+    "babel-core": "^6.7.*",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.6.*",
+    "babel-preset-flow": "^6.23.0",
+    "babel-preset-react": "^6.5.*",
+    "babel-preset-stage-0": "^6.3.13",
+    "babel-register": "^6.18.0",
+    "css-loader": "^0.28.7",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "react-dropzone": "^5.0.1",
+    "react-spinners": "^0.4.5",
+    "style-loader": "^0.23.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "webpack": "^4.17.1",
+    "webpack-merge": "^4.1.1"
+  },
+  "devDependencies": {
+    "webpack-cli": "^3.1.0"
+  }
+}

settings/settings.py

@@ -41,6 +41,7 @@ INSTALLED_APPS = [
     'api',
     'style_transfer',
     'comic_layout',
+    'frontend',
 ]
 
 MIDDLEWARE = [

settings/urls.py

@@ -23,6 +23,7 @@ from django.urls import path
 urlpatterns = [
     path('admin/', admin.site.urls),
     path(r'comixify/', include('api.urls')),
+    path(r'', include('frontend.urls')),
 ]
 
 urlpatterns += staticfiles_urlpatterns()