website: enable Zoom on transloadit example (#2474)

website/src/examples/transloadit/app.es6

@@ -6,6 +6,7 @@ const Webcam = require('@uppy/webcam')
 const Transloadit = require('@uppy/transloadit')
 const Instagram = require('@uppy/instagram')
 const Facebook = require('@uppy/facebook')
+const Zoom = require('@uppy/zoom')
 const { createHmac } = require('crypto')
 const COMPANION = require('../env')
 
@@ -20,6 +21,8 @@ function initUppy (opts = {}) {
     window.uppy.close()
   }
 
+  const zoomMode = document.location.hash === '#enable-zoom'
+  const allowedFileTypes = zoomMode ? ['video/*'] : ['image/*']
   const uppy = new Uppy({
     debug: true,
     autoProceed: false,
@@ -27,7 +30,7 @@ function initUppy (opts = {}) {
       maxFileSize: 1024 * 1024 * 1024,
       maxNumberOfFiles: 2,
       minNumberOfFiles: 1,
-      allowedFileTypes: ['image/*']
+      allowedFileTypes
     },
     locale: {
       strings: {
@@ -74,6 +77,32 @@ function initUppy (opts = {}) {
       }
     }
 
+    if (zoomMode) {
+      params.steps = {
+        resized: {
+          use: ':original',
+          robot: '/video/encode',
+          result: true,
+          ffmpeg_stack: 'v3.3.3',
+          preset: 'ipad-high',
+          resize_strategy: 'fillcrop'
+        },
+        watermarked: {
+          use: 'resized',
+          robot: '/video/encode',
+          result: true,
+          ffmpeg_stack: 'v3.3.3',
+          preset: 'ipad-high',
+          watermark_opacity: 0.7,
+          watermark_position: 'top-right',
+          watermark_size: '25%',
+          watermark_url: 'https://demos.transloadit.com/inputs/transloadit-padded.png',
+          watermark_x_offset: -10,
+          watermark_y_offset: 10
+        }
+      }
+    }
+
     let signature
     if (opts.secret) {
       params = JSON.stringify(params)
@@ -105,17 +134,40 @@ function initUppy (opts = {}) {
     })
     .use(Webcam, { target: Dashboard, modes: ['picture'] })
 
+  if (zoomMode) {
+    uppy.use(Zoom, {
+      target: Dashboard,
+      companionUrl: 'https://api2.transloadit.com/companion',
+      companionAllowedHosts: Transloadit.COMPANION_PATTERN
+    })
+  }
+
   uppy
     .on('transloadit:result', (stepName, result) => {
       const file = uppy.getFile(result.localId)
       var resultContainer = document.createElement('div')
-      resultContainer.innerHTML = `
-        <div>
-          <h3>Name: ${file.name}</h3>
-          <img src="${result.ssl_url}" /> <br />
-          <a href="${result.ssl_url}" target="_blank">View</a>
-        </div>
-      `
+      if (!zoomMode) {
+        resultContainer.innerHTML = `
+          <div>
+            <h3>Name: ${file.name}</h3>
+            <img src="${result.ssl_url}" /> <br />
+            <a href="${result.ssl_url}" target="_blank">View</a>
+          </div>
+        `
+      }
+
+      if (zoomMode && stepName === 'watermarked') {
+        resultContainer.innerHTML = `
+          <div>
+            <h3>Name: ${file.name}</h3>
+            <video controls>
+              <source src="${result.ssl_url}">
+            </video>
+             <br />
+            <a href="${result.ssl_url}" target="_blank">View</a>
+          </div>
+        `
+      }
       document
         .getElementById('uppy-transloadit-result')
         .appendChild(resultContainer)