@es-joy/jsoe 0.8.0 → 0.9.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/jsoe.css

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

package/src/types.js

@@ -35,6 +35,7 @@ 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 blobType from './fundamentalTypes/blobType.js';
 
 /**
  * Utility to retrieve the property value given a legend element.
@@ -388,6 +389,7 @@ Types.availableTypes = {
   filelist: {
     option: ['FileList']
   },
+  blob: blobType,
   blobHTML: blobHTMLType,
   arraybuffer: {
     option: ['ArrayBuffer']
@@ -470,7 +472,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/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};