Combine backend and worker with frontend

- Fix upload function
- Add production docker image
- Merge three repos into one
- Update packages
- Remove redis
- Enable separate worker to be spawned for each request
- Remove passport and replace with API authentication
- Minor fixes (removing extra spaces, linting errors ... etc)
- Update code to ES6
- Update readme
- Updated ESlint rules
- Dockerize repo
- Simplify API
- Fix production docker
- Update config

Bug: T290241
Change-Id: I1e749cd9bd07220c254d9ee0994b6eb3e6997847

.dockerignore

@@ -0,0 +1,5 @@
+# dependencies
+.git
+*Dockerfile*
+*docker-compose*
+node_modules

.editorconfig

@@ -0,0 +1,14 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab

.eslintrc.js

@@ -0,0 +1,72 @@
+// Disable all a11y rules
+const a11y = require('eslint-plugin-jsx-a11y');
+
+const a11yOff = Object.keys(a11y.rules).reduce((acc, rule) => {
+	acc[`jsx-a11y/${rule}`] = 'off';
+	return acc;
+}, {});
+
+module.exports = {
+	env: {
+		browser: true,
+		es6: true
+	},
+	extends: ['plugin:react/recommended', 'airbnb'],
+	globals: {
+		Atomics: 'readonly',
+		SharedArrayBuffer: 'readonly'
+	},
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true
+		},
+		ecmaVersion: 2018
+	},
+	plugins: ['react', 'react-hooks'],
+	settings: {
+		'import/resolver': {
+			alias: {
+				map: [['@', './src']]
+			}
+		}
+	},
+	rules: {
+		'linebreak-style': 0,
+		'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+		'no-tabs': 0,
+		indent: ['warn', 'tab', { SwitchCase: 1 }],
+		'comma-dangle': 0,
+		'arrow-parens': 0,
+		'object-curly-newline': [
+			'warn',
+			{
+				ImportDeclaration: { minProperties: 6, consistent: false, multiline: true }
+			}
+		],
+		radix: 0,
+		camelcase: ['warn', { ignoreDestructuring: true, properties: 'never' }],
+		'arrow-body-style': ['warn', 'as-needed'],
+		'no-param-reassign': 0,
+		'no-underscore-dangle': 0,
+		'no-unused-vars': ['warn', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
+		'no-use-before-define': ['warn'],
+		'no-shadow': ['warn'],
+		'consistent-return': ['warn'],
+		'operator-linebreak': ['off'],
+		'import/no-extraneous-dependencies': ['warn'],
+		'prefer-template': ['warn'],
+		'object-shorthand': ['warn'],
+		'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
+		'no-restricted-syntax': ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'],
+		'react/self-closing-comp': ['warn'],
+		'react/jsx-indent': [2, 'tab'],
+		'react/jsx-indent-props': [2, 'tab'],
+		'react/prop-types': ['off'],
+		'react/jsx-props-no-spreading': ['warn'],
+		'react/destructuring-assignment': ['warn'],
+		'react/jsx-one-expression-per-line': ['warn'],
+		'react/no-array-index-key': ['off'],
+		...a11yOff
+	}
+};

.gitignore

@@ -24,7 +24,7 @@ yarn-error.log*
 
 # server
 /server/node_modules
-
-#OAuth
-config.js
-.eslintrc.js
+/server/videos/*
+!/server/videos/.gitkeep
+/server/public/*
+!/server/public/.gitkeep

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"tabWidth": 2,
+	"useTabs": true,
+	"arrowParens": "avoid",
+	"printWidth": 100,
+	"singleQuote": true,
+	"trailingComma": "none"
+}

.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+	"extends": "stylelint-config-standard",
+	"rules": {
+		"indentation": "tab",
+		"at-rule-no-unknown": null,
+		"scss/at-rule-no-unknown": true,
+		"declaration-colon-newline-after": "always-multi-line"
+	},
+	"plugins": ["stylelint-scss"]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"editor.formatOnType": false,
+	"editor.formatOnPaste": false,
+	"editor.formatOnSave": true
+}

Dockerfile.dev

@@ -0,0 +1,25 @@
+# Install node
+FROM node:14
+
+# Install FFMPEG library
+RUN apt update -y
+RUN apt install ffmpeg -y
+
+# Set the workdir /app
+WORKDIR /app
+
+# Frontend
+# Copy the package.json to workdir
+COPY package.json ./
+COPY server/package.json ./server/
+
+# Run npm install - install the npm dependencies
+RUN npm install --legacy-peer-deps
+
+# Copy application source
+COPY . .
+
+EXPOSE 3000 4000 8081
+
+# Start the application
+CMD ["npm", "run", "dev"]

Dockerfile.prd

@@ -0,0 +1,33 @@
+# Install node
+FROM node:16 as build
+
+# Install FFMPEG library
+RUN apt update -y
+RUN apt install ffmpeg -y
+
+# Set the workdir /app
+WORKDIR /app
+
+# Frontend
+# Copy the package.json to workdir
+COPY package.json ./
+COPY server/package.json ./server/
+
+# Install dependncies
+RUN npm install --legacy-peer-deps
+
+# Copy application source
+COPY . .
+
+EXPOSE 80 4000
+
+# run express server
+# RUN node server/index.js
+CMD ["npm", "run", "prd"]
+
+# Build
+RUN npm run build
+
+# Run ngnix server
+FROM nginx:1.21.4 as server
+COPY --from=build /app/build /usr/share/nginx/html

README.md

@@ -1,71 +1,62 @@
-An online tool to cut/trim videos in wikimedia commons.
-Tool live at: https://videocuttool.wmflabs.org/
+An online tool to cut/trim videos in Wikimedia commons.
+
+See live demo at: https://videocuttool.wmflabs.org/
 
 ## Learn More
 
 You can learn more in the https://commons.wikimedia.org/wiki/Commons:VideoCutTool.
 
 ## Installation
 
-### Install front-end
-```
-git clone "https://gerrit.wikimedia.org/r/labs/tools/VideoCutTool"   # clone front-end
-cd ./VideoCutTool                                                    # move to front-end directory
-npm install                                                          # install node dependencies
-google-chrome http://localhost:3000                                  # open in web-browser with hot-reload & console messages
-```
+### Get OAuth2 Credentials
 
-### Execute VideoCutTool locally
+Go to:
 
-VideoCutTool runs in development mode by default - to run VideoCutTool in a production environment, 
-you need to set the NODE_ENV environment variable to `production`. You can do that with the command 
-`export NODE_ENV=production`
+https://meta.wikimedia.org/wiki/Special:OAuthConsumerRegistration/propose.
 
-In the project directory, you need to use the following command to run the application.
+Create an application with the following grants:
 
-### Install back-end (Connect with the tool's back-end)
-```
-git clone "https://gerrit.wikimedia.org/r/labs/tools/video-cut-tool-back-end"     # clone back-end
-cd ./video-cut-tool-back-end         # move to back-end directory
-npm install                          # install node dependencies
-```
+- Edit existing pages.
 
-To run the back-end tool you need to request Mediawiki OAuth keys from 
-`https://meta.wikimedia.org/wiki/Special:OAuthConsumerRegistration/propose.`
+- Create, edit, and move pages.
 
-1. Dont forget to turn on these following items under Applicable grants:
+- Upload new files.
 
-	1. Edit existing pages.
-	2. Create, edit, and move pages.
-	3. Upload new files.
-	4. Upload, replace, and move files.
+- Upload, replace, and move files.
 
-2. Call back URL as 'https://localhost:4000/video-cut-tool-back-end/auth/mediawiki/callback'
-
-After submitting form, you will be given `config.consumer_key` and `config.consumer_secret` substitue these keys in your `config.js` file.
+Add the keys to server/config.js file under CLIENT_ID and CLIENT_SERCRET after you clone the repo.
 
-You are also required to install and start MongoDB, Follow official documentation for the installation and starting service locally https://docs.mongodb.com/manual/installation/
+### Install Docker
 
-```
-npm start                            # service back-end service, runs app in development mode.
-google-chrome http://localhost:4000  # open app in web-browser with hot-reload & console messages
-```
+The tool uses docker to install and run everything with a single command.
 
-### Connect with the service worker
+Install docker from this link: https://docs.docker.com/get-docker/
+
+### Clone Repo
+
+Run these commands to clone the code from the remote repo.
 
 ```
-git clone "https://gerrit.wikimedia.org/r/labs/tools/video-cut-tool-worker"    # clone worker
-cd ./video-cut-tool-worker                                                     # move to worker directory
-npm install                                                                    # install node dependencies
-npm i -g nodemon                                                               # installs nodemon globally
-```
 
-You will also need to install and configure Redis. For the installation you can follow
-https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-redis-on-ubuntu-20-04
+git clone "https://gerrit.wikimedia.org/r/labs/tools/VideoCutTool"
+
+cd ./VideoCutTool
 
 ```
-node index.js                       # runs app in the development mode, has hot-reload and console logs
-``` 
+
+### Run environment
+
+Run this command inside VideoCutTool to start development docker container.
+
+`docker-compose -f .\docker-compose.dev.yml up --build`
+
+The first time you run it will take some time 4-8 minutes (depending on your internet speed) because it will pull the necessary images from docker and install NPM packages. Once it is up and running changes will be hot loaded.
+
+> Note: anytime you update package.json the build process will take a while.
+
+To run production you can run this command
+
+`docker-compose -f .\docker-compose.prd.yml up -d`
 
 ## Credits
 

docker-compose-mongodb.yml

@@ -0,0 +1,13 @@
+version: '3.7'
+services:
+  mongo:
+    image: mongo
+    container_name: "mongo"
+    restart: always
+    # environment:
+    #   MONGO_INITDB_ROOT_USERNAME: root
+    #   MONGO_INITDB_ROOT_PASSWORD: example
+    volumes:
+      - './dockervolume/mongodb:/data/db'
+    ports:
+      - 27018:27017

docker-compose.dev.yml

@@ -0,0 +1,27 @@
+version: '3.7'
+services:
+  videocuttool:
+    container_name: videocuttool
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    volumes:
+      - ./src:/app/src:ro
+      - ./server:/app/server
+      - ./public:/app/public
+      - '/app/node_modules'
+    ports:
+      - '3000:3000'
+      - '4000:4000'
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+      - NODE_ENV=development
+    links:
+      - mongo
+    depends_on:
+      - mongo
+  mongo:
+    container_name: videocuttool-mongo
+    image: 'mongo:4'
+    ports:
+      - '27017:27017'

docker-compose.prd.yml

@@ -0,0 +1,40 @@
+version: '3.9'
+services:
+  videocuttool:
+    container_name: videocuttool
+    build:
+      context: .
+      dockerfile: Dockerfile.prd
+    volumes:
+      - ./src:/app/src:ro
+      - ./server:/app/server
+      - ./public:/app/public
+      - '/app/node_modules'
+    ports:
+      - '80:80'
+      - '4000:4000'
+    environment:
+      - NODE_ENV=production
+    networks:
+      - my-network
+    links:
+      - mongodb
+    depends_on:
+      - mongodb
+  mongodb:
+    image: 'mongo:4'
+    command: ["--bind_ip_all"]
+    # environment:
+    #   - MONGO_INITDB_ROOT_USERNAME=admin
+    #   - MONGO_INITDB_ROOT_PASSWORD=<YOUR_PASSWORD>
+    ports:
+      - 27017:27017
+    restart: always
+    # volumes:
+    #   - ./mongodb/db:/data/db
+    networks:
+      - my-network
+
+networks:
+  my-network:
+    driver: bridge

docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3.4'
+
+services:
+  videocuttool:
+    image: videocuttool
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    environment:
+      NODE_ENV: production
+    ports:
+      - 80:80
+      - 4000:4000