videomail-client 8.1.0 → 8.2.0

package/.eslintrc.js

@@ -1,13 +1,45 @@
 module.exports = {
-  parser: '@babel/eslint-parser',
-  extends: ['eslint:recommended', 'plugin:import/recommended', 'prettier'],
+  parser: "@babel/eslint-parser",
+  extends: ["eslint:recommended", "plugin:import/recommended", "prettier"],
   env: {
     browser: true,
     node: true,
-    es6: true
+    es6: true,
+  },
+  settings: {
+    "import/resolver": {
+      node: true,
+    },
   },
   rules: {
     // Turns on errors for missing imports which is great
-    'import/no-unresolved': 'error'
-  }
-}
+    "import/no-unresolved": "error",
+
+    // TODO Fix later
+    "sort-imports": "off",
+    "sort-keys": "off",
+    "no-warning-comments": "off",
+    "prefer-arrow-callback": "off",
+    "func-names": "off",
+    "no-magic-numbers": "off",
+    "id-length": "off",
+    "no-empty-function": "off",
+    "no-shadow": "off",
+    "max-lines": "off",
+    "max-statements": "off",
+    "max-lines-per-function": "off",
+    "no-undefined": "off",
+    "one-var": "off",
+    "no-inline-comments": "off",
+    "line-comment-position": "off",
+    "capitalized-comments": "off",
+    "func-style": "off",
+    "prefer-destructuring": "off",
+    "init-declarations": "off",
+    "no-invalid-this": "off",
+    "no-multi-assign": "off",
+    "max-params": "off",
+    "no-plusplus": "off",
+    "no-ternary": "off",
+  },
+};

package/TODO.md

@@ -1,18 +1,18 @@
 ### TODOs
 | Filename | line # | TODO
 |:------|:------:|:------
-| src/js/util/audioRecorder.js | 11 | code needs rewrite
-| src/js/util/eventEmitter.js | 6 | MAKE EVENT EMITTING IN DESPOT NOT GLOBAL BUT BY CONTAINER ID INSTEAD
-| src/js/util/eventEmitter.js | 43 | have this emitted through a configuration because it is pretty noisy
+| src/js/util/audioRecorder.js | 13 | code needs rewrite
+| src/js/util/eventEmitter.js | 7 | MAKE EVENT EMITTING IN DESPOT NOT GLOBAL BUT BY CONTAINER ID INSTEAD
+| src/js/util/eventEmitter.js | 45 | have this emitted through a configuration because it is pretty noisy
 | src/js/util/humanize.js | 4 | get rid of this class and use those imports directly
-| src/js/wrappers/container.js | 297 | figure out how to fire dom's onload event again
-| src/js/wrappers/container.js | 298 | or how to run all the scripts over again
+| src/js/wrappers/container.js | 307 | figure out how to fire dom's onload event again
+| src/js/wrappers/container.js | 308 | or how to run all the scripts over again
 | src/js/wrappers/optionsWrapper.js | 27 | fix this, it's not really an option
-| src/js/wrappers/visuals/recorder.js | 594 | in https://github.com/binarykitchen/videomail-client/issues/142
-| src/js/wrappers/visuals/recorder.js | 631 | retry with navigator.getUserMedia_() maybe?
-| src/js/wrappers/visuals/recorder.js | 778 | commented out because for some reasons server does
-| src/js/wrappers/visuals/recorder.js | 783 | consider removing this later or have it for debug=1 only?
-| src/js/wrappers/visuals/userMedia.js | 309 | consider removing that if it's not the case anymore (for better performance)
-| gulpfile.js | 1 | write this in ES6 once i have figured out how to
-| gulpfile.js | 58 | fix this, so that it also works when not minified, this
-| gulpfile.js | 63 | location is bad, should be in a temp folder or so
+| src/js/wrappers/visuals/recorder.js | 608 | in https://github.com/binarykitchen/videomail-client/issues/142
+| src/js/wrappers/visuals/recorder.js | 654 | retry with navigator.getUserMedia_() maybe?
+| src/js/wrappers/visuals/recorder.js | 802 | commented out because for some reasons server does
+| src/js/wrappers/visuals/recorder.js | 807 | consider removing this later or have it for debug=1 only?
+| src/js/wrappers/visuals/userMedia.js | 312 | consider removing that if it's not the case anymore (for better performance)
+| gulpfile.js | 2 | write this in ES6 once i have figured out how to
+| gulpfile.js | 61 | fix this, so that it also works when not minified, this
+| gulpfile.js | 67 | location is bad, should be in a temp folder or so

package/gulpfile.js

@@ -1,245 +1,252 @@
-// todo write this in ES6 once i have figured out how to
-// transpile it with babelify itself
-
-const path = require('path')
-const fs = require('fs')
-const gulp = require('gulp')
-const plugins = require('gulp-load-plugins')()
-const nib = require('nib')
-const browserify = require('browserify')
-const source = require('vinyl-source-stream')
-const buffer = require('vinyl-buffer')
-const Router = require('router')
-const bodyParser = require('body-parser')
-const send = require('connect-send-json')
-const del = require('del')
-const minimist = require('minimist')
-const watchify = require('watchify')
-const babelify = require('babelify')
-const tapeRun = require('tape-run')
-const glob = require('glob')
-const log = require('fancy-log')
-const autoprefixer = require('autoprefixer')
-const cssnano = require('cssnano')
-
-const packageJson = require('./package.json')
+/*
+ * todo write this in ES6 once i have figured out how to
+ * transpile it with babelify itself
+ */
+
+const path = require("path");
+const fs = require("fs");
+const gulp = require("gulp");
+const plugins = require("gulp-load-plugins")();
+const nib = require("nib");
+const browserify = require("browserify");
+const source = require("vinyl-source-stream");
+const buffer = require("vinyl-buffer");
+const Router = require("router");
+const bodyParser = require("body-parser");
+const send = require("connect-send-json");
+const del = require("del");
+const minimist = require("minimist");
+const watchify = require("watchify");
+const babelify = require("babelify");
+const tapeRun = require("tape-run");
+const glob = require("glob");
+const log = require("fancy-log");
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+
+const packageJson = require("./package.json");
 
 const defaultOptions = {
   minify: true,
   importance: null,
   write: false,
-  version: null
-}
+  version: null,
+};
 
-const options = minimist(process.argv.slice(2), { default: defaultOptions })
+const options = minimist(process.argv.slice(2), { default: defaultOptions });
 
-log.info('Options:', options)
+log.info("Options:", options);
 
 function cleanJs(cb) {
-  del.sync(['prototype/js/*.js', 'prototype/js/*.js.map'])
-  cb()
+  del.sync(["prototype/js/*.js", "prototype/js/*.js.map"]);
+  cb();
 }
 
 function stylus() {
-  const postCssPlugins = [autoprefixer(), cssnano()]
+  const postCssPlugins = [autoprefixer(), cssnano()];
 
   return (
     gulp
-      .src('src/styles/styl/main.styl')
+      .src("src/styles/styl/main.styl")
       .pipe(plugins.plumber()) // with the plumber the gulp task won't crash on errors
       .pipe(
         plugins.stylus({
           use: [nib()],
-          errors: true
-        })
+          errors: true,
+        }),
       )
-      // always minify otherwise it gets broken with line-breaks
-      // when surrounded with `'s when injected
-      // todo: fix this, so that it also works when not minified, this
-      // for faster builds during development
+      /*
+       * always minify otherwise it gets broken with line-breaks
+       * when surrounded with `'s when injected
+       * todo: fix this, so that it also works when not minified, this
+       * for faster builds during development
+       */
       .pipe(plugins.postcss(postCssPlugins))
-      .pipe(plugins.rename({ suffix: '.min', extname: '.css.js' }))
+      .pipe(plugins.rename({ suffix: ".min", extname: ".css.js" }))
       .pipe(plugins.injectString.wrap("module.exports='", "'"))
       // todo: location is bad, should be in a temp folder or so
-      .pipe(gulp.dest('src/styles/css'))
+      .pipe(gulp.dest("src/styles/css"))
       .pipe(plugins.connect.reload())
-  )
+  );
 }
 
 function todo() {
   return gulp
-    .src(['src/**/*.{js, styl}', 'gulpfile.js', 'prototype/*.html'], { base: './' })
+    .src(["src/**/*.{js, styl}", "gulpfile.js", "prototype/*.html"], { base: "./" })
     .pipe(
       plugins.todo({
-        fileName: 'TODO.md'
-      })
+        fileName: "TODO.md",
+      }),
     )
-    .pipe(gulp.dest('./'))
+    .pipe(gulp.dest("./"));
 }
 
-const cache = {}
-const packageCache = {}
+const cache = {};
+const packageCache = {};
 
 function bundle(done, watching) {
-  const entry = path.join(__dirname, packageJson.module)
+  const entry = path.join(__dirname, packageJson.module);
   const bundler = browserify({
     entries: [entry],
-    cache: cache,
-    standalone: 'VideomailClient',
-    packageCache: packageCache,
+    cache,
+    standalone: "VideomailClient",
+    packageCache,
     plugin: watching ? [watchify] : null,
-    debug: !options.minify // enables inline source maps
+    debug: !options.minify, // enables inline source maps
   })
-    .on('update', () => {
-      pump()
-      log('Re-bundling ...')
+    .on("update", () => {
+      pump();
+      log("Re-bundling ...");
     })
-    .on('log', log)
-    .require(entry, { expose: 'videomail-client' })
-    .transform(babelify)
+    .on("log", log)
+    .require(entry, { expose: "videomail-client" })
+    .transform(babelify);
 
   function pump() {
     return bundler
       .bundle()
-      .on('error', function (err) {
-        console.error(err.toString())
-        this.emit('end')
+      .on("error", function (err) {
+        console.error(err.toString());
+        this.emit("end");
       })
-      .on('end', done)
-      .pipe(source('./src/')) // gives streaming vinyl file object
+      .on("end", done)
+      .pipe(source("./src/")) // gives streaming vinyl file object
       .pipe(buffer()) // required because the next steps do not support streams
-      .pipe(plugins.concat('videomail-client.js'))
+      .pipe(plugins.concat("videomail-client.js"))
       .pipe(plugins.derequire())
-      .pipe(gulp.dest('prototype/js'))
+      .pipe(gulp.dest("prototype/js"))
       .pipe(plugins.plumber())
-      .pipe(plugins.if(options.minify, plugins.rename({ suffix: '.min' })))
+      .pipe(plugins.if(options.minify, plugins.rename({ suffix: ".min" })))
       .pipe(plugins.if(options.minify, plugins.sourcemaps.init()))
       .pipe(plugins.if(options.minify, plugins.bytediff.start()))
       .pipe(plugins.if(options.minify, plugins.terser()))
       .pipe(plugins.if(options.minify, plugins.bytediff.stop()))
-      .pipe(plugins.if(options.minify, plugins.sourcemaps.write('/')))
-      .pipe(plugins.if(options.minify, gulp.dest('prototype/js')))
-      .pipe(plugins.connect.reload())
+      .pipe(plugins.if(options.minify, plugins.sourcemaps.write("/")))
+      .pipe(plugins.if(options.minify, gulp.dest("prototype/js")))
+      .pipe(plugins.connect.reload());
   }
 
-  return pump()
+  return pump();
 }
 
 function bundleWithWatchify(done) {
-  bundle(done, true)
+  bundle(done, true);
 }
 
 function middleware() {
-  const router = new Router()
+  const router = new Router();
 
-  router.use(bodyParser.json())
-  router.use(send.json())
+  router.use(bodyParser.json());
+  router.use(send.json());
 
   // does not work, see bug https://github.com/AveVlad/gulp-connect/issues/170
-  router.post('/contact', function (req, res) {
-    log.info('Videomail data received (with meta data):', req.body)
+  router.post("/contact", function (req, res) {
+    log.info("Videomail data received (with meta data):", req.body);
 
-    // At this stage, a backend could store the videomail_key in req.body
-    // into a database for replay functionality
+    /*
+     * At this stage, a backend could store the videomail_key in req.body
+     * into a database for replay functionality
+     */
 
     // Just an example to see that the backend can do anything with the data
     res.json({
-      status: 'Inserted on ' + new Date().toISOString()
-    })
-  })
+      status: `Inserted on ${new Date().toISOString()}`,
+    });
+  });
 
-  return [router]
+  return [router];
 }
 
 const connectOptions = {
-  root: ['prototype'],
+  root: ["prototype"],
   port: 8080,
   debug: true,
   livereload: false, // disabled since it's broken unfortunately, see https://github.com/intesso/connect-livereload/issues/79
-  middleware: middleware
-}
+  middleware,
+};
 
 function connectHttp(done) {
-  plugins.connect.server(connectOptions)
-  done()
+  plugins.connect.server(connectOptions);
+  done();
 }
 
 function connectHttps(done) {
-  const SSL_CERTS_PATH = path.join(__dirname, 'env', 'dev')
-
-  plugins.connect.server(
-    Object.assign({}, connectOptions, {
-      port: 8443,
-      https: {
-        key: fs.readFileSync(path.join(SSL_CERTS_PATH, 'key.pem')),
-        cert: fs.readFileSync(path.join(SSL_CERTS_PATH, 'cert.pem'))
-      }
-    })
-  )
-
-  done()
+  const SSL_CERTS_PATH = path.join(__dirname, "env", "dev");
+
+  plugins.connect.server({
+    ...connectOptions,
+    port: 8443,
+    https: {
+      key: fs.readFileSync(path.join(SSL_CERTS_PATH, "key.pem")),
+      cert: fs.readFileSync(path.join(SSL_CERTS_PATH, "cert.pem")),
+    },
+  });
+
+  done();
 }
 
 function reload(done) {
-  plugins.connect.reload()
-  done()
+  plugins.connect.reload();
+  done();
 }
 
 function watch(done) {
-  gulp.watch(['src/styles/styl/**/*.styl'], stylus)
-  gulp.watch(['prototype/*.html'], reload)
+  gulp.watch(["src/styles/styl/**/*.styl"], stylus);
+  gulp.watch(["prototype/*.html"], reload);
 
-  done()
+  done();
 }
 
 exports.test = function (done) {
-  const testFiles = glob.sync('test/**/*.test.js')
+  const testFiles = glob.sync("test/**/*.test.js");
   const bundler = browserify({
-    entries: testFiles
-  }).transform(babelify)
+    entries: testFiles,
+  }).transform(babelify);
 
   bundler
     .bundle()
-    .on('error', function (err) {
-      console.error(err.toString())
-      this.emit('end')
-      done()
+    .on("error", function (err) {
+      console.error(err.toString());
+      this.emit("end");
+      done();
     })
     .pipe(tapeRun({ sandbox: false }))
-    .on('results', function () {
-      done()
+    .on("results", function () {
+      done();
     })
-    .pipe(process.stdout)
-}
-
-// get inspired by
-// https://www.npmjs.com/package/gulp-tag-version and
-// https://github.com/nicksrandall/gulp-release-tasks/blob/master/tasks/release.js
+    .pipe(process.stdout);
+};
+
+/*
+ * get inspired by
+ * https://www.npmjs.com/package/gulp-tag-version and
+ * https://github.com/nicksrandall/gulp-release-tasks/blob/master/tasks/release.js
+ */
 exports.bumpVersion = function () {
-  const bumpOptions = {}
+  const bumpOptions = {};
 
   if (options.version) {
-    bumpOptions.version = options.version
+    bumpOptions.version = options.version;
   } else if (options.importance) {
-    bumpOptions.type = options.importance
+    bumpOptions.type = options.importance;
   }
 
-  console.log({ bumpOptions })
+  console.log({ bumpOptions });
 
   return gulp
-    .src(['./package.json'])
+    .src(["./package.json"])
     .pipe(plugins.bump(bumpOptions))
-    .pipe(plugins.if(options.write, gulp.dest('./')))
-    .on('error', log.error)
-}
+    .pipe(plugins.if(options.write, gulp.dest("./")))
+    .on("error", log.error);
+};
 
-const build = gulp.series(gulp.parallel(gulp.series(stylus, cleanJs, bundle), todo))
+const build = gulp.series(gulp.parallel(gulp.series(stylus, cleanJs, bundle), todo));
 
 exports.watch = gulp.series(
   gulp.parallel(gulp.series(stylus, cleanJs, bundleWithWatchify), todo),
   gulp.parallel(connectHttp, connectHttps),
-  watch
-)
+  watch,
+);
 
-exports.build = build
-exports.default = build
+exports.build = build;
+exports.default = build;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videomail-client",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "A wicked npm package to record videos directly in the browser, wohooo!",
   "author": "Michael Heuberger <michael.heuberger@binarykitchen.com>",
   "contributors": [
@@ -33,8 +33,8 @@
     "prettier:fix": "prettier --write ./src ./test ./prototype/*.html gulpfile.js"
   },
   "engines": {
-    "node": ">=20.5.1",
-    "npm": ">=9.8.0"
+    "node": "^20.12.2",
+    "npm": "^10.5.0"
   },
   "keywords": [
     "webcam",
@@ -45,8 +45,9 @@
     "audio",
     "recorder"
   ],
+  "prettier": "./prettier.config.js",
   "dependencies": {
-    "@babel/core": "7.24.7",
+    "@babel/core": "7.25.2",
     "add-eventlistener-with-options": "1.25.5",
     "animitter": "3.0.0",
     "audio-sample": "3.0.1",
@@ -57,14 +58,16 @@
     "create-error": "0.3.1",
     "deepmerge": "4.3.1",
     "defined": "1.0.1",
-    "despot": "1.1.3",
+    "despot": "2.0.0",
     "document-visibility": "1.0.1",
     "element-closest": "3.0.2",
-    "filesize": "10.1.2",
+    "filesize": "10.1.4",
+    "format-util": "1.0.5",
     "get-form-data": "3.0.0",
     "hidden": "1.1.1",
     "humanize-duration": "3.32.1",
     "hyperscript": "2.0.2",
+    "inherits": "2.0.4",
     "insert-css": "2.0.0",
     "iphone-inline-video": "2.2.2",
     "is-power-of-two": "1.0.0",
@@ -78,11 +81,11 @@
     "websocket-stream": "5.5.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.24.7",
+    "@babel/eslint-parser": "7.25.1",
     "@babel/plugin-transform-runtime": "7.24.7",
-    "@babel/preset-env": "7.24.7",
+    "@babel/preset-env": "7.25.3",
     "audit-ci": "6.6.1",
-    "autoprefixer": "10.4.19",
+    "autoprefixer": "10.4.20",
     "babelify": "10.0.0",
     "body-parser": "1.20.2",
     "browserify": "17.0.0",
@@ -114,8 +117,8 @@
     "gulp-todo": "7.1.1",
     "minimist": "1.2.8",
     "nib": "1.2.0",
-    "postcss": "8.4.39",
-    "prettier": "3.3.2",
+    "postcss": "8.4.40",
+    "prettier": "3.3.3",
     "router": "1.3.8",
     "tape": "5.8.1",
     "tape-catch": "1.0.6",

package/prettier.config.js

@@ -0,0 +1,8 @@
+//@ts-check
+
+/** @type {import('prettier').Config} */
+const config = {
+  printWidth: 90
+}
+
+module.exports = config

package/prototype/bad_browser.html

@@ -12,11 +12,11 @@
       var videomailClient = new VideomailClient({
         verbose: true,
         adjustFormOnBrowserError: true,
-        fakeUaString: 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)',
-        reportErrors: true
-      })
+        fakeUaString: "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)",
+        reportErrors: true,
+      });
 
-      videomailClient.show()
+      videomailClient.show();
     </script>
   </body>
 </html>

package/prototype/bad_ios.html

@@ -13,16 +13,16 @@
         verbose: true,
         adjustFormOnBrowserError: true,
         fakeUaString:
-          'Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25',
+          "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25",
         reportErrors: true,
         video: {
           // just to test that this height will get removed so that the whole error
           // message will be shown.
-          height: 100
-        }
-      })
+          height: 100,
+        },
+      });
 
-      videomailClient.show()
+      videomailClient.show();
     </script>
   </body>
 </html>