npm - videomail-client - Versions diffs - 5.2.1 → 5.3.0 - Mend

videomail-client 5.2.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md +1 -1
package/TODO.md +4 -3
package/package.json +3 -3
package/prototype/index.html +3 -3
package/prototype/js/videomail-client.js +152 -73
package/prototype/js/videomail-client.min.js +4 -4
package/prototype/js/videomail-client.min.js.map +1 -1
package/prototype/with_cc_and_bcc.html +115 -0
package/src/js/events.js +1 -0
package/src/js/options.js +2 -0
package/src/js/wrappers/container.js +51 -42
package/src/js/wrappers/form.js +67 -0
package/src/js/wrappers/visuals/recorder.js +5 -3
package/prototype/with_time_control.html +0 -39

package/prototype/with_cc_and_bcc.html ADDED Viewed

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>videomail-client examples</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <style type="text/css">
+      input[type='email'],
+      input[type='text'],
+      fieldset,
+      textarea,
+      .buttons,
+      #startOver {
+        margin: 1em 0;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>With CC and BCC</h1>
+    <p>Another form example with optional CC and BCC input fields for email addresses.</p>
+    <!-- Once you set the method to POST, then two request will be made internally. -->
+    <!-- The first one to the videomail server and the second one to the specified action -->
+    <form action="/contact" method="post" id="videomailFormWithCcAndBcc">
+      <input
+        name="from"
+        size="64"
+        type="email"
+        placeholder="Enter your email address"
+        required
+      />
+      <input
+        multiple
+        name="to"
+        size="64"
+        type="email"
+        placeholder="Enter recipient TO email addresss(es)"
+      />
+      <input
+        multiple
+        name="cc"
+        size="64"
+        type="email"
+        placeholder="Enter recipient CC email address(es)"
+      />
+      <input
+        multiple
+        name="bcc"
+        size="64"
+        type="email"
+        placeholder="Enter recipient BCC email address(es)"
+      />
+      <input
+        name="subject"
+        size="64"
+        type="text"
+        placeholder="Enter a subject"
+        required
+      />
+      <div id="videomail"></div>
+      <textarea
+        id="body"
+        name="body"
+        placeholder="Enter your message"
+        cols="40"
+        rows="4"
+        required
+      ></textarea>
+    </form>
+    <!-- Placed outside the form by intention to ensure code works with that scenario as well -->
+    <input type="button" value="Submit" disabled />
+    <div id="viewVideo" style="display: none">
+      <h2 class="subject"></h2>
+      <h3 class="status"></h3>
+      <p class="body"></p>
+      <video class="replay"></video>
+      <button id="startOver">Start over</button>
+    </div>
+    <script src="/js/videomail-client.js"></script>
+    <script>
+      var videomailClient = new VideomailClient({
+        verbose: true,
+        video: { limitSeconds: 120, width: 320, countdown: false },
+        selectors: {
+          submitButtonSelector: 'body input[value="Submit"]',
+          formId: 'videomailFormWithCcAndBcc'
+        }
+      })
+      var startOverButton = document.getElementById('startOver')
+      var onSubmitted = function (videomail, response) {
+        var statusHeader = document.querySelector('h3.status')
+        // status has been generated on server side, see gulp task 'connect'
+        statusHeader.innerHTML = response.status
+        this.replay(videomail, 'viewVideo')
+        startOverButton.onclick = this.startOver
+      }
+      videomailClient.on(
+        videomailClient.events.SUBMITTED,
+        onSubmitted.bind(videomailClient)
+      )
+      videomailClient.show()
+    </script>
+  </body>
+</html>

package/src/js/events.js CHANGED Viewed

@@ -11,6 +11,7 @@ export default keymirror({
   COUNTDOWN: null, // countdown for recording has started
   RECORDING: null, // webcam is recording
   STOPPING: null, // recording is being stopped (= preview)
+  STOPPED: null, // recording has stopped
   PROGRESS: null, // start sending
   BEGIN_AUDIO_ENCODING: null, // encoding video
   BEGIN_VIDEO_ENCODING: null, // encoding video

package/src/js/options.js CHANGED Viewed

@@ -135,6 +135,8 @@ export default {
   defaults: {
     from: null, // define default FROM email address
     to: null, // define default TO email address
+    cc: null, // define default CC email address
+    bcc: null, // define default BCC email address
     subject: null, // define default subject line
     body: null // define default body content
   },

package/src/js/wrappers/container.js CHANGED Viewed

@@ -222,49 +222,8 @@ const Container = function (options) {
     hidden(containerElement, true)
   }
-  // fixes https://github.com/binarykitchen/videomail-client/issues/71
-  function trimEmail(email) {
-    return email.replace(/(^[,\s]+)|([,\s]+$)/g, '')
-  }
   function submitVideomail(formData, method, cb) {
-    const FORM_FIELDS = {
-      subject: options.selectors.subjectInputName,
-      from: options.selectors.fromInputName,
-      to: options.selectors.toInputName,
-      cc: options.selectors.ccInputName,
-      bcc: options.selectors.bccInputName,
-      body: options.selectors.bodyInputName,
-      key: options.selectors.keyInputName,
-      parentKey: options.selectors.parentKeyInputName,
-      sendCopy: options.selectors.sendCopyInputName
-    }
-    const videomailFormData = {}
-    Object.keys(FORM_FIELDS).forEach(function (key) {
-      const formFieldValue = FORM_FIELDS[key]
-      if (formFieldValue in formData) {
-        videomailFormData[key] = formData[formFieldValue]
-      }
-    })
-    if (videomailFormData.from) {
-      videomailFormData.from = trimEmail(videomailFormData.from)
-    }
-    if (videomailFormData.to) {
-      videomailFormData.to = trimEmail(videomailFormData.to)
-    }
-    if (videomailFormData.cc) {
-      videomailFormData.cc = trimEmail(videomailFormData.cc)
-    }
-    if (videomailFormData.bcc) {
-      videomailFormData.bcc = trimEmail(videomailFormData.bcc)
-    }
+    const videomailFormData = form.transformFormData(formData)
     // when method is undefined, treat it as a post
     if (isPost(method) || !method) {
@@ -613,6 +572,56 @@ const Container = function (options) {
             whyInvalid = 'Form input(s() are invalid'
           }
         }
+        // TODO CONTINUE FROM HERE, MAKE VALIDATION CLEVER WHEN AUTOMATIC SO THAT IT REQUIRES AT
+        // LEAST ONE RECIPIENT AMONG TO/CC/BCC
+        if (valid) {
+          // If CC and/or BCC exist, validate one more time to ensure at least
+          // one recipient is given
+          const recipients = form.getRecipients()
+          const toIsConfigured = 'to' in recipients
+          const ccIsConfigured = 'cc' in recipients
+          const bccIsConfigured = 'bcc' in recipients
+          const hasTo = recipients.to?.length > 0
+          const hasCc = recipients.cc?.length > 0
+          const hasBcc = recipients.bcc?.length > 0
+          if (toIsConfigured) {
+            if (!hasTo) {
+              if (ccIsConfigured && bccIsConfigured) {
+                if (!hasCc && !hasBcc) {
+                  valid = false
+                }
+              } else if (ccIsConfigured) {
+                if (!hasCc) {
+                  valid = false
+                }
+              } else if (bccIsConfigured) {
+                if (!hasBcc) {
+                  valid = false
+                }
+              } else {
+                whyInvalid = 'Please configure the form to have at least one recipient.'
+              }
+            }
+          } else if (ccIsConfigured) {
+            if (!hasCc) {
+              if (bccIsConfigured) {
+                if (!hasBcc) {
+                  valid = false
+                }
+              }
+            }
+          }
+          if (!valid) {
+            whyInvalid = 'Please enter at least one recipient.'
+          }
+          console.log({ recipients })
+        }
       } else {
         valid = visualsValid
       }

package/src/js/wrappers/form.js CHANGED Viewed

@@ -7,6 +7,11 @@ import Events from '../events'
 import EventEmitter from '../util/eventEmitter'
 import VideomailError from '../util/videomailError'
+// fixes https://github.com/binarykitchen/videomail-client/issues/71
+function trimEmail(email) {
+  return email.replace(/(^[,\s]+)|([,\s]+$)/g, '')
+}
 const Form = function (container, formElement, options) {
   EventEmitter.call(this, options, 'Form')
@@ -18,6 +23,68 @@ const Form = function (container, formElement, options) {
     return getFormData(formElement, { includeDisabled: true })
   }
+  this.transformFormData = function (formData) {
+    const FORM_FIELDS = {
+      subject: options.selectors.subjectInputName,
+      from: options.selectors.fromInputName,
+      to: options.selectors.toInputName,
+      cc: options.selectors.ccInputName,
+      bcc: options.selectors.bccInputName,
+      body: options.selectors.bodyInputName,
+      key: options.selectors.keyInputName,
+      parentKey: options.selectors.parentKeyInputName,
+      sendCopy: options.selectors.sendCopyInputName
+    }
+    const transformedFormData = {}
+    Object.keys(FORM_FIELDS).forEach(function (key) {
+      const formFieldValue = FORM_FIELDS[key]
+      if (formFieldValue in formData) {
+        transformedFormData[key] = formData[formFieldValue]
+      }
+    })
+    if (transformedFormData.from) {
+      transformedFormData.from = trimEmail(transformedFormData.from)
+    }
+    if (transformedFormData.to) {
+      transformedFormData.to = trimEmail(transformedFormData.to)
+    }
+    if (transformedFormData.cc) {
+      transformedFormData.cc = trimEmail(transformedFormData.cc)
+    }
+    if (transformedFormData.bcc) {
+      transformedFormData.bcc = trimEmail(transformedFormData.bcc)
+    }
+    return transformedFormData
+  }
+  this.getRecipients = function () {
+    const videomailFormData = this.transformFormData(getData())
+    const recipients = {}
+    if ('to' in videomailFormData) {
+      recipients.to = videomailFormData.to
+    }
+    if ('cc' in videomailFormData) {
+      recipients.cc = videomailFormData.cc
+    }
+    if ('bcc' in videomailFormData) {
+      recipients.bcc = videomailFormData.bcc
+    }
+    return recipients
+  }
   this.loadVideomail = function (videomail) {
     const limit = formElement.elements.length

package/src/js/wrappers/visuals/recorder.js CHANGED Viewed

@@ -756,8 +756,8 @@ const Recorder = function (visuals, replay, defaultOptions = {}) {
         args: args
       }
-      // todo commented out because for some reasons server does not accept such a long
-      // array of many log lines. to examine later.
+      // todo commented out because for some reasons server does
+      // not accept such a long array of many log lines. to examine later.
       //
       // add some useful debug info to examine weird stuff like this one
       // UnprocessableError: Unable to encode a video with FPS near zero.
@@ -858,7 +858,9 @@ const Recorder = function (visuals, replay, defaultOptions = {}) {
         recordingStats.sampleRate = userMedia.getAudioSampleRate()
       }
-      writeCommand('stop', recordingStats)
+      writeCommand('stop', recordingStats, function () {
+        self.emit(Events.STOPPED, { recordingStats })
+      })
       // beware, resetting will set framesCount to zero, so leave this here
       self.reset()

package/prototype/with_time_control.html DELETED Viewed

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>videomail-client examples</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-  </head>
-  <body>
-    <h1>BETA! Include time control to ensure video frames are in perfect order</h1>
-    <div id="videomail"></div>
-    <script src="/js/videomail-client.js"></script>
-    <script>
-      var videomailClient = new VideomailClient({
-        verbose: true,
-        enableAutoPause: false,
-        disableSubmit: true,
-        audio: {
-          enabled: true,
-          switch: true
-        },
-        image: {
-          quality: 0.5
-        },
-        video: {
-          limitSeconds: 120,
-          countdown: false,
-          width: 640,
-          timeControl: true
-        },
-        text: {
-          buttons: {
-            preview: 'Stop'
-          }
-        }
-      })
-      videomailClient.show()
-    </script>
-  </body>
-</html>