added a landing page for the video

delianides · Aug 29, 2020 · 1f10c4b · 1f10c4b
1 parent 4e88416
commit 1f10c4b
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 40 deletions.
diff --git a/index.js b/index.js
@@ -1,46 +1,58 @@
-'use strict';
-const {createHash} = require('crypto');
-const through2 = require('through2');
-const {readFile} = require('fs-extra');
+"use strict";
+const { createHash } = require("crypto");
+const through2 = require("through2");
+const { readFile } = require("fs-extra");
+const ejs = require("ejs");
 
 const action = async context => {
-	const uploadEndpoint = 'https://api.vercel.com/v2/now/files';
-	const deploymentEndpoint = 'https://api.vercel.com/v12/now/deployments';
-	const Authorization = 'Bearer ' + context.config.get('token');
+	const uploadEndpoint = "https://api.vercel.com/v2/now/files";
+	const deploymentEndpoint = "https://api.vercel.com/v12/now/deployments";
+	const Authorization = "Bearer " + context.config.get("token");
 
 	const filePath = await context.filePath();
 	const data = await readFile(filePath);
-	const sha = createHash('sha1')
+	const sha = createHash("sha1")
 		.update(data)
-		.digest('hex');
+		.digest("hex");
 	const stream = through2();
 	stream.write(data);
 	stream.end();
 
-	context.setProgress('Uploading…');
+	context.setProgress("Uploading…");
 	await context.request(uploadEndpoint, {
 		headers: {
-			'Content-Type': 'application/octet-stream',
-			'x-now-digest': sha,
-			'x-now-size': data.length,
+			"Content-Type": "application/octet-stream",
+			"x-now-digest": sha,
+			"x-now-size": data.length,
 			Authorization
 		},
 		body: stream
 	});
 
-	context.setProgress('Creating Vercel deployment…');
+	context.setProgress("Generating Landing Page…");
+	const page = await ejs.renderFile(
+		__dirname + "/template.ejs",
+		{ title: context.defaultFileName, format: context.format },
+		{ async: true }
+	);
+
+	context.setProgress("Creating Vercel deployment…");
 	const deploymentResponse = await context.request(deploymentEndpoint, {
 		headers: {
 			Authorization
 		},
 		json: true,
 		body: {
-			name: context.config.get('name'),
+			name: context.config.get("name"),
 			files: [
 				{
 					file: context.defaultFileName,
 					sha,
 					size: data.length
+				},
+				{
+					file: "index.html",
+					data: page
 				}
 			],
 			projectSettings: {
@@ -56,20 +68,20 @@ const action = async context => {
 };
 
 const vercel = {
-	title: 'Share on Vercel',
-	formats: ['gif', 'mp4', 'webm', 'apng'],
+	title: "Share on Vercel",
+	formats: ["gif", "mp4", "webm", "apng"],
 	action,
 	config: {
 		token: {
-			title: 'Vercel Personal Access Token',
-			description: 'Create one here https://vercel.com/account/tokens',
-			type: 'string',
+			title: "Vercel Personal Access Token",
+			description: "Create one here https://vercel.com/account/tokens",
+			type: "string",
 			required: true
 		},
 		name: {
-			title: 'Name used in the deployment URL',
-			type: 'string',
-			default: 'kapture',
+			title: "Name used in the deployment URL",
+			type: "string",
+			default: "kapture",
 			required: true
 		}
 	}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "kap-vercel",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "Share on Vercel",
 	"main": "index.js",
 	"scripts": {
@@ -39,6 +39,7 @@
 	},
 	"homepage": "https://github.com/delianides/kap-vercel#readme",
 	"dependencies": {
+		"ejs": "^3.1.5",
 		"fs-extra": "^7.0.0",
 		"through2": "^2.0.3"
 	},

diff --git a/template.ejs b/template.ejs
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta property="og:description" 
+          content="Kapture Screen Recording"
+          />
+    <%if (format == 'webm' || format == 'mp4') { %>
+      <meta property="og:video" content="<%= title %>" />
+      <link
+        href="https://unpkg.com/video.js@7/dist/video-js.min.css"
+        rel="stylesheet"
+      />
+      <!-- City -->
+      <link
+        href="https://unpkg.com/@videojs/themes@1/dist/city/index.css"
+        rel="stylesheet"
+        />
+    <% } else { %>
+      <meta property="og:image" content="<%= title %>" />
+    <% } %>
+    <style>
+     body {
+       font-family: 'san-serif';
+     }
+     main {
+       display: flex;
+       align-items: center;
+       justify-content: center;
+       height: 100vh;
+     }
+     main .video {
+       height: 432px;
+       width: 768px;
+     }
+     main .image {
+       height: 576px;
+       width: 1024px;
+     }
+     main .image img {
+       max-width: 100%;
+       max-height: 100%;
+       display: block;
+       margin: auto;
+     }
+    </style>
+
+  <title><%= title %></title>
+  </head>
+  <body>
+    <main>
+      <%if (format == 'webm' || format == 'mp4') { %>
+      <div class="video">
+          <video
+            id="kapture-video"
+            class="video-js vjs-fill vjs-theme-city"
+            controls
+            preload="auto"
+            data-setup='{"responsive": true}'
+          >
+            <source src="<%= title %>" type="video/<%= format %>" />
+            <p class="vjs-no-js">
+              To view this video please enable JavaScript, and consider upgrading to a
+              web browser that
+              <a href="https://videojs.com/html5-video-support/" target="_blank"
+                >supports HTML5 video</a
+              >
+            </p>
+          </video>
+        </div>
+        <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
+      <% } else { %>
+        <div class="image">
+          <img src="<%= title %>" alt="Kapture Screen Recording" />
+        </div>
+      <% } %>
+    </main>
+  </body>
+</html>