Move git root. Add Status endpoint to API. Initial web form setup.

shotstack · Jul 11, 2018 · 2714c78 · 2714c78
1 parent b9bc24a
commit 2714c78
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 26 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1 @@
-# package directories
-node_modules
-jspm_packages
-
-# Serverless directories
-.serverless
-
-# Environment variables
-.env
+.idea
diff --git a/.env.dist → api/.env.dist b/.env.dist → api/.env.dist
diff --git a/api/.gitignore b/api/.gitignore
@@ -0,0 +1,9 @@
+# package directories
+node_modules
+jspm_packages
+
+# Serverless directories
+.serverless
+
+# Environment variables
+.env
diff --git a/package-lock.json → api/package-lock.json b/package-lock.json → api/package-lock.json
diff --git a/package.json → api/package.json b/package.json → api/package.json
diff --git a/serverless.yml → api/serverless.yml b/serverless.yml → api/serverless.yml
@@ -72,6 +72,15 @@ functions:
           path: shotstack
           method: post
           cors: true
+  status:
+    handler: src/handler/shotstack/handler.status
+    description: Demo - Pexels video status check
+    timeout: 10
+    events:
+      - http:
+          path: shotstack/{id}
+          method: get
+          cors: true
 
 #    The following are a few example events you can configure
 #    NOTE: Please make sure to change your handler code to work with those events

diff --git a/api/src/handler/shotstack/handler.js b/api/src/handler/shotstack/handler.js
@@ -0,0 +1,28 @@
+'use strict';
+
+const response = require('../../helper/response');
+const shotstack = require('./lib/shotstack');
+
+module.exports.submit = (event, context, callback) => {
+    const data = JSON.parse(event.body);
+
+    shotstack.submit(data).then((res) => {
+        console.log('Success');
+        callback(null, response(201, 'success', 'OK', res));
+    }).catch(function(res) {
+        console.log('Fail: ', res);
+        callback(null, response(400, 'fail', 'Bad Request', res));
+    });
+};
+
+module.exports.status = (event, context, callback) => {
+    const id = event.pathParameters.id;
+
+    shotstack.status(id).then((res) => {
+        console.log('Success');
+        callback(null, response(201, 'success', 'OK', res));
+    }).catch(function(res) {
+        console.log('Fail: ', res);
+        callback(null, response(400, 'fail', 'Bad Request', res));
+    });
+};
diff --git a/src/handler/shotstack/lib/shotstack.js → api/src/handler/shotstack/lib/shotstack.js b/src/handler/shotstack/lib/shotstack.js → api/src/handler/shotstack/lib/shotstack.js
@@ -114,11 +114,48 @@ module.exports.submit = (data) => {
                     return reject(error);
                 }
 
-                return resolve(pexels);
+                return resolve(body.response);
             });
         }).catch(function(error) {
             console.log(error);
             return reject(error);
         });
     });
 };
+
+module.exports.status = (id) => {
+    const schema = {
+        id: Joi.string().guid({
+            version: [
+                'uuidv4',
+                'uuidv5'
+            ]
+        })
+    };
+
+    const valid = Joi.validate({
+        id: id
+    }, schema);
+
+    return new Promise((resolve, reject) => {
+        if (valid.error) {
+            return reject(valid.error);
+        }
+
+        request({
+            url: shotstackUrl + 'render/' + id,
+            method: 'GET',
+            headers: {
+                'x-api-key': shotstackApiKey
+            },
+            json: true
+        }, function (error, response, body) {
+            if (error) {
+                console.log(error);
+                return reject(error);
+            }
+
+            return resolve(body.response);
+        });
+    });
+};
diff --git a/src/helper/response.js → api/src/helper/response.js b/src/helper/response.js → api/src/helper/response.js
diff --git a/src/handler/shotstack/handler.js b/src/handler/shotstack/handler.js
diff --git a/web/app.js b/web/app.js
@@ -0,0 +1,50 @@
+$(document).ready(function() {
+    $('form').submit(function(event) {
+
+        //$('.form-group').removeClass('has-error'); // remove the error class
+        //$('.help-block').remove(); // remove the error text
+
+        var formData = {
+            'search': $('#search').val(),
+            'title': $('#title').val(),
+            'soundtrack': $('#soundtrack option:selected').val()
+        };
+
+        console.log(formData);
+
+        // process the form
+        $.ajax({
+            type: 'POST',
+            url: 'https://dcsgqlt4gd.execute-api.ap-southeast-2.amazonaws.com/dev/shotstack',
+            data: JSON.stringify(formData),
+            dataType: 'json',
+            crossDomain: true,
+            contentType: 'application/json'
+        })
+        .done(function(data) {
+            console.log(data);
+            if (!data.success) {
+                if (data.errors.name) {
+                    $('#name-group').addClass('has-error'); // add the error class to show red input
+                    $('#name-group').append('<div class="help-block">' + data.errors.name + '</div>'); // add the actual error message under our input
+                }
+                if (data.errors.email) {
+                    $('#email-group').addClass('has-error'); // add the error class to show red input
+                    $('#email-group').append('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input
+                }
+                if (data.errors.superheroAlias) {
+                    $('#superhero-group').addClass('has-error'); // add the error class to show red input
+                    $('#superhero-group').append('<div class="help-block">' + data.errors.superheroAlias + '</div>'); // add the actual error message under our input
+                }
+            } else {
+                $('form').append('<div class="alert alert-success">' + data.message + '</div>');
+            }
+        })
+        .fail(function(data) {
+            console.log(data.responseText);
+        });
+
+        event.preventDefault();
+    });
+
+});
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles.css">
+
+    <title>Hello, world!</title>
+</head>
+<body>
+    <div class="container content">
+        <div class="row">
+            <div class="col">
+                <form class="jumbotron" method="post">
+                    <div class="form-group">
+                        <label for="search" class="display-4">Make a video about</label>
+                        <input name="search" type="text" class="form-control form-control-lg" id="search" placeholder="cats, mountains, waves, people, buildings, sport" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="title">Add a Title</label>
+                        <input name="title" type="text" class="form-control" id="title" placeholder="My Movie" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="soundtrack">Choose a Soundtrack</label>
+                        <select name="soundtrack" id="soundtrack" class="custom-select" required>
+                            <option selected>Choose...</option>
+                            <option value="disco">Disco</option>
+                            <option value="freeflow">Freeflow</option>
+                            <option value="melodic">Melodic</option>
+                        </select>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Create Video</button>
+                </form>
+            </div>
+            <div class="col">
+                Video
+            </div>
+        </div>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/web/styles.css b/web/styles.css
@@ -0,0 +1,10 @@
+.content {
+    margin-top: 2rem;
+}
+.content .jumbotron {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+.display-4 {
+    font-size: 2.5rem;
+}