@es-joy/jsoe 0.8.1 → 0.10.0

package/src/fundamentalTypes/fileType.js

@@ -1,5 +1,6 @@
 import {jml} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
+import {visualize, getUserMedia, startScreenCapture} from '../utils/media.js';
 import dialogs from '../utils/dialogs.js';
 
 /**
@@ -13,107 +14,6 @@ import dialogs from '../utils/dialogs.js';
  * @typedef {(file: FileInfo) => void} SetValue
  */
 
-/** @type {AudioContext} */
-let audioCtx;
-/**
- * @param {MediaStream} stream
- * @param {HTMLCanvasElement} canvas
- * @see Adapted from {@link https://mdn.github.io/dom-examples/media/web-dictaphone/}
- * @returns {void}
- */
-function visualize (stream, canvas) {
-  if (!audioCtx) {
-    audioCtx = new AudioContext();
-  }
-  const canvasCtx = /** @type {CanvasRenderingContext2D} */ (
-    canvas.getContext('2d')
-  );
-
-  const source = audioCtx.createMediaStreamSource(stream);
-
-  const analyser = audioCtx.createAnalyser();
-  analyser.fftSize = 2048;
-  const bufferLength = analyser.frequencyBinCount;
-  const dataArray = new Uint8Array(bufferLength);
-
-  source.connect(analyser);
-  // analyser.connect(audioCtx.destination);
-
-  draw();
-
-  /**
-   * @returns {void}
-   */
-  function draw () {
-    const WIDTH = canvas.width;
-    const HEIGHT = canvas.height;
-
-    requestAnimationFrame(draw);
-
-    analyser.getByteTimeDomainData(dataArray);
-
-    canvasCtx.fillStyle = 'rgb(200, 200, 200)';
-    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
-
-    canvasCtx.lineWidth = 2;
-    canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
-
-    canvasCtx.beginPath();
-
-    const sliceWidth = WIDTH * 1 / bufferLength;
-    let x = 0;
-
-    for (let i = 0; i < bufferLength; i++) {
-      const v = dataArray[i] / 128;
-      const y = v * HEIGHT / 2;
-
-      if (i === 0) {
-        canvasCtx.moveTo(x, y);
-      } else {
-        canvasCtx.lineTo(x, y);
-      }
-
-      x += sliceWidth;
-    }
-
-    canvasCtx.lineTo(canvas.width, canvas.height / 2);
-    canvasCtx.stroke();
-  }
-}
-
-/**
- * @param {MediaStreamConstraints} constraints
- * @returns {Promise<MediaStream|null>}
- */
-async function getUserMedia (constraints) {
-  let stream = null;
-  try {
-    stream = await navigator.mediaDevices.getUserMedia(constraints);
-  /* c8 ignore next 4 */
-  } catch (err) {
-    console.error('err', err);
-    return null;
-  }
-  return stream;
-}
-
-/**
- * @param {DisplayMediaStreamOptions|undefined} displayMediaOptions
- * @returns {Promise<MediaStream|null>}
- */
-async function startScreenCapture (displayMediaOptions) {
-  let captureStream = null;
-
-  try {
-    captureStream =
-      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
-  /* c8 ignore next 3 */
-  } catch (err) {
-    console.error(`Error: ${err}`);
-  }
-  return captureStream;
-}
-
 /**
  * @param {number} timestamp
  * @returns {string}

package/src/fundamentalTypes/filelistType.js

@@ -0,0 +1,35 @@
+import arrayType from './arrayType.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const filelistType = {
+  option: ['FileList'],
+  array: true,
+  filelist: true,
+  regexEndings: [',', ')'],
+  stringRegexBegin: /^FileList\(/u,
+  stringRegexEnd: /^\)/u,
+
+  toValue (...args) {
+    return arrayType.toValue.apply(this, args);
+  },
+  getValue (...args) {
+    return arrayType.getValue.apply(this, args);
+  },
+  getInput (...args) {
+    return arrayType.getInput.apply(this, args);
+  },
+  viewUI ({...args}) {
+    return arrayType.viewUI.call(this, {
+      ...args, type: 'filelist'
+    });
+  },
+  editUI ({...args}) {
+    return arrayType.editUI.call(this, {
+      ...args, type: 'filelist'
+    });
+  }
+};
+
+export default filelistType;

package/src/jsoe.css

@@ -97,6 +97,14 @@ video.recordedMedia {
   background-color: beige;
 }
 
+[data-type="filelist"] {
+  background-color: bisque;
+}
+
+[data-type="blob"] {
+  background-color: lightgray;
+}
+
 [class^="propertyName-"] {
   background-color: yellow;
 }

package/src/types.js

@@ -35,6 +35,8 @@ import SpecialNumberSuperType from './superTypes/SpecialNumberType.js';
 import errorType from './fundamentalTypes/errorType.js';
 import errorsSpecialType from './superTypes/errorsSpecialType.js';
 import fileType from './fundamentalTypes/fileType.js';
+import filelistType from './fundamentalTypes/filelistType.js';
+import blobType from './fundamentalTypes/blobType.js';
 
 /**
  * Utility to retrieve the property value given a legend element.
@@ -269,9 +271,11 @@ const Types = {};
  * @property {boolean} [array] Private context variable. Whether or not
  *   it is an array. Do not use in other types.
  * @property {boolean} [map] Private context variable. Whether or not
- *   it is a Map. Do not use in other types.
+ *   it is a `Map`. Do not use in other types.
  * @property {boolean} [set] Private context variable. Whether or not
- *   it is a set. Do not use in other types.
+ *   it is a `Set`. Do not use in other types.
+ * @property {boolean} [filelist] Private context variable. Whether or not
+ *   it is a `FileList` type. Do not use in other types.
  * @property {boolean} [sparse] Private context variable. Whether or not
  *   it is a sparse array. Do not use in other types.
  * @property {boolean} [valid] Private context variable. Whether or not
@@ -385,9 +389,8 @@ Types.availableTypes = {
   set: setType,
 
   file: fileType,
-  filelist: {
-    option: ['FileList']
-  },
+  filelist: filelistType,
+  blob: blobType,
   blobHTML: blobHTMLType,
   arraybuffer: {
     option: ['ArrayBuffer']
@@ -470,7 +473,7 @@ Types.availableTypes = {
 *   "int8array"|"uint8array"|"uint8clampedarray"|"int16array"|"uint16array"|
 *   "int32array"|"uint32array"|"float32array"|"float64array"|"IntlCollator"|
 *   "IntlDateTimeFormat"|"IntlNumberFormat"|"ValidDate"|
-*   "arrayNonindexKeys"|"error"|"errors"} AvailableType
+*   "arrayNonindexKeys"|"error"|"errors"|"blob"} AvailableType
 */
 
 /**

package/src/utils/FileList.js

@@ -0,0 +1,32 @@
+/**
+ * @typedef {number} Integer
+ */
+/**
+ * `FileList` polyfill.
+ */
+class FileList {
+  /**
+   * Set private properties and length.
+   */
+  constructor () {
+    // eslint-disable-next-line prefer-rest-params
+    this._files = arguments[0];
+    this.length = this._files.length;
+  }
+  /**
+   * @param {Integer} index
+   * @returns {File}
+   */
+  item (index) {
+    return this._files[index];
+  }
+  /* eslint-disable class-methods-use-this */
+  /**
+   * @returns {"FileList"}
+   */
+  get [Symbol.toStringTag] () {
+    /* eslint-enable class-methods-use-this */
+    return 'FileList';
+  }
+}
+export default FileList;

package/src/utils/media.js

@@ -0,0 +1,103 @@
+/** @type {AudioContext} */
+let audioCtx;
+/**
+ * @param {MediaStream} stream
+ * @param {HTMLCanvasElement} canvas
+ * @see Adapted from {@link https://mdn.github.io/dom-examples/media/web-dictaphone/}
+ * @returns {void}
+ */
+function visualize (stream, canvas) {
+  if (!audioCtx) {
+    audioCtx = new AudioContext();
+  }
+  const canvasCtx = /** @type {CanvasRenderingContext2D} */ (
+    canvas.getContext('2d')
+  );
+
+  const source = audioCtx.createMediaStreamSource(stream);
+
+  const analyser = audioCtx.createAnalyser();
+  analyser.fftSize = 2048;
+  const bufferLength = analyser.frequencyBinCount;
+  const dataArray = new Uint8Array(bufferLength);
+
+  source.connect(analyser);
+  // analyser.connect(audioCtx.destination);
+
+  draw();
+
+  /**
+   * @returns {void}
+   */
+  function draw () {
+    const WIDTH = canvas.width;
+    const HEIGHT = canvas.height;
+
+    requestAnimationFrame(draw);
+
+    analyser.getByteTimeDomainData(dataArray);
+
+    canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+    canvasCtx.lineWidth = 2;
+    canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+    canvasCtx.beginPath();
+
+    const sliceWidth = WIDTH * 1 / bufferLength;
+    let x = 0;
+
+    for (let i = 0; i < bufferLength; i++) {
+      const v = dataArray[i] / 128;
+      const y = v * HEIGHT / 2;
+
+      if (i === 0) {
+        canvasCtx.moveTo(x, y);
+      } else {
+        canvasCtx.lineTo(x, y);
+      }
+
+      x += sliceWidth;
+    }
+
+    canvasCtx.lineTo(canvas.width, canvas.height / 2);
+    canvasCtx.stroke();
+  }
+}
+
+
+/**
+ * @param {MediaStreamConstraints} constraints
+ * @returns {Promise<MediaStream|null>}
+ */
+async function getUserMedia (constraints) {
+  let stream = null;
+  try {
+    stream = await navigator.mediaDevices.getUserMedia(constraints);
+  /* c8 ignore next 4 */
+  } catch (err) {
+    console.error('err', err);
+    return null;
+  }
+  return stream;
+}
+
+/**
+ * @param {DisplayMediaStreamOptions|undefined} displayMediaOptions
+ * @returns {Promise<MediaStream|null>}
+ */
+async function startScreenCapture (displayMediaOptions) {
+  let captureStream = null;
+
+  try {
+    captureStream =
+      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+  /* c8 ignore next 3 */
+  } catch (err) {
+    console.error(`Error: ${err}`);
+  }
+  return captureStream;
+}
+
+export {visualize, getUserMedia, startScreenCapture};