underpost 2.7.1 → 2.7.2

package/src/client/components/core/Stream.js

@@ -1,113 +1,113 @@
-import { loggerFactory } from './Logger.js';
-import { getProxyPath } from './VanillaJs.js';
-
-// https://peerjs.com/docs/
-
-const logger = loggerFactory(import.meta);
-
-const Stream = {
-  Data: {},
-  createPeerServer: function ({ id }) {
-    const peerOptions = {
-      host: location.hostname, // '/'
-      port: location.protocol === 'https:' ? 443 : location.port ? parseInt(location.port) + 1 : 80,
-      path: `${getProxyPath()}peer`,
-      secure: location.protocol === 'https:',
-    };
-    logger.info('peerOptions', peerOptions);
-    this.Data[id] = {
-      peer: {
-        peerOptions,
-        server: new Peer(undefined, peerOptions),
-      },
-    };
-    return this.Data[id].peer;
-  },
-  connectToNewUser: function (
-    mediaType,
-    id,
-    userId,
-    stream,
-    onConnectStream = (mediaElement) => null,
-    onDisconnectStream = (mediaElement) => null,
-  ) {
-    // This runs when someone joins our room
-    const call = this.Data[id].peer.server.call(userId, stream); // Call the user who just joined
-    const mediaElement = this.createMediaElement(mediaType);
-
-    call.on('stream', (userMediaStream) => {
-      onConnectStream(this.renderElementStream(mediaElement, userMediaStream));
-    });
-    // If they leave, remove their video
-    call.on('close', () => {
-      onDisconnectStream(mediaElement);
-    });
-    return { call, mediaElement };
-  },
-  handlePeerDisconnect({ id }) {
-    // manually close the peer connections
-    for (let conns in this.Data[id].peer.server.connections) {
-      this.Data[id].peer.server.connections[conns].forEach((conn, index, array) => {
-        console.log(`closing ${conn.connectionId} peerConnection (${index + 1}/${array.length})`, conn.peerConnection);
-        if (conn.peerConnection && conn.peerConnection.close) conn.peerConnection.close();
-
-        // close it using peerjs methods
-        if (conn.close) conn.close();
-      });
-    }
-  },
-  renderElementStream: function (mediaElement, stream) {
-    mediaElement.srcObject = stream;
-    mediaElement.addEventListener('loadedmetadata', () => {
-      // Play the video as it loads
-      mediaElement.play();
-    });
-    return mediaElement;
-    // use example:
-    // videoGrid.append(mediaElement); // Append video element to videoGrid
-  },
-  // Access the user's video and audio
-  getMediaStream: function (
-    options = {
-      video: true,
-      audio: true,
-    },
-  ) {
-    return new Promise((resolve) => {
-      navigator.mediaDevices
-        .getUserMedia(options)
-        .then((stream) => resolve(stream))
-        .catch((error) => {
-          logger.error(error);
-          resolve(undefined);
-        });
-    });
-  },
-  removeMediaStream: function (stream) {
-    // later you can do below
-    // stop both video and audio
-    stream.getTracks().forEach((track) => {
-      track.stop();
-    });
-    // stop only audio
-    // stream.getAudioTracks()[0].stop();
-    // stop only video
-    // stream.getVideoTracks()[0].stop();
-  },
-  createMediaElement: function (mediaType) {
-    let mediaElement;
-    switch (mediaType) {
-      case 'audio-video':
-        mediaElement = document.createElement('video'); // Create a new audio/video tag to show our audio/video
-        // mediaElement.muted = true; // Mute ourselves on our end so there is no feedback loop
-
-        break;
-
-      default:
-        break;
-    }
-    return mediaElement;
-  },
-};
-
-export { Stream };
+import { loggerFactory } from './Logger.js';
+import { getProxyPath } from './VanillaJs.js';
+
+// https://peerjs.com/docs/
+
+const logger = loggerFactory(import.meta);
+
+const Stream = {
+  Data: {},
+  createPeerServer: function ({ id }) {
+    const peerOptions = {
+      host: location.hostname, // '/'
+      port: location.protocol === 'https:' ? 443 : location.port ? parseInt(location.port) + 1 : 80,
+      path: `${getProxyPath()}peer`,
+      secure: location.protocol === 'https:',
+    };
+    logger.info('peerOptions', peerOptions);
+    this.Data[id] = {
+      peer: {
+        peerOptions,
+        server: new Peer(undefined, peerOptions),
+      },
+    };
+    return this.Data[id].peer;
+  },
+  connectToNewUser: function (
+    mediaType,
+    id,
+    userId,
+    stream,
+    onConnectStream = (mediaElement) => null,
+    onDisconnectStream = (mediaElement) => null,
+  ) {
+    // This runs when someone joins our room
+    const call = this.Data[id].peer.server.call(userId, stream); // Call the user who just joined
+    const mediaElement = this.createMediaElement(mediaType);
+
+    call.on('stream', (userMediaStream) => {
+      onConnectStream(this.renderElementStream(mediaElement, userMediaStream));
+    });
+    // If they leave, remove their video
+    call.on('close', () => {
+      onDisconnectStream(mediaElement);
+    });
+    return { call, mediaElement };
+  },
+  handlePeerDisconnect({ id }) {
+    // manually close the peer connections
+    for (let conns in this.Data[id].peer.server.connections) {
+      this.Data[id].peer.server.connections[conns].forEach((conn, index, array) => {
+        console.log(`closing ${conn.connectionId} peerConnection (${index + 1}/${array.length})`, conn.peerConnection);
+        if (conn.peerConnection && conn.peerConnection.close) conn.peerConnection.close();
+
+        // close it using peerjs methods
+        if (conn.close) conn.close();
+      });
+    }
+  },
+  renderElementStream: function (mediaElement, stream) {
+    mediaElement.srcObject = stream;
+    mediaElement.addEventListener('loadedmetadata', () => {
+      // Play the video as it loads
+      mediaElement.play();
+    });
+    return mediaElement;
+    // use example:
+    // videoGrid.append(mediaElement); // Append video element to videoGrid
+  },
+  // Access the user's video and audio
+  getMediaStream: function (
+    options = {
+      video: true,
+      audio: true,
+    },
+  ) {
+    return new Promise((resolve) => {
+      navigator.mediaDevices
+        .getUserMedia(options)
+        .then((stream) => resolve(stream))
+        .catch((error) => {
+          logger.error(error);
+          resolve(undefined);
+        });
+    });
+  },
+  removeMediaStream: function (stream) {
+    // later you can do below
+    // stop both video and audio
+    stream.getTracks().forEach((track) => {
+      track.stop();
+    });
+    // stop only audio
+    // stream.getAudioTracks()[0].stop();
+    // stop only video
+    // stream.getVideoTracks()[0].stop();
+  },
+  createMediaElement: function (mediaType) {
+    let mediaElement;
+    switch (mediaType) {
+      case 'audio-video':
+        mediaElement = document.createElement('video'); // Create a new audio/video tag to show our audio/video
+        // mediaElement.muted = true; // Mute ourselves on our end so there is no feedback loop
+
+        break;
+
+      default:
+        break;
+    }
+    return mediaElement;
+  },
+};
+
+export { Stream };

package/src/client/components/core/ToggleSwitch.js

@@ -1,87 +1,87 @@
-import { getId } from './CommonJs.js';
-import { loggerFactory } from './Logger.js';
-import { htmls, s } from './VanillaJs.js';
-
-const logger = loggerFactory(import.meta);
-
-const ToggleSwitch = {
-  Tokens: {},
-  Render: async function (options) {
-    const id = options?.id ? options.id : getId(this.Tokens, 'toggle-switch-');
-    this.Tokens[id] = {};
-
-    const widthContent = 60;
-    const widthCircle = 20;
-
-    setTimeout(() => {
-      switch (options.displayMode) {
-        case 'checkbox':
-          break;
-
-        default:
-          s(`.${id}-circle`).style.left = `0px`;
-          break;
-      }
-
-      const onToggle = () => {
-        switch (options.displayMode) {
-          case 'checkbox':
-            htmls(`.${id}-circle`, html`<i class="fas fa-check"></i>`);
-            break;
-          default:
-            s(`.${id}-circle`).style.left = `${widthContent - widthCircle}px`;
-            s(`.${id}-circle`).classList.add(`toggle-switch-active`);
-            break;
-        }
-        s(`.${id}-checkbox`).checked = true;
-        options?.on?.checked ? options.on.checked() : null;
-      };
-      const offToggle = () => {
-        switch (options.displayMode) {
-          case 'checkbox':
-            htmls(`.${id}-circle`, html``);
-            break;
-          default:
-            s(`.${id}-circle`).style.left = `0px`;
-            s(`.${id}-circle`).classList.remove(`toggle-switch-active`);
-            break;
-        }
-        s(`.${id}-checkbox`).checked = false;
-        options?.on?.unchecked ? options.on.unchecked() : null;
-      };
-
-      const onClickEvent = () => {
-        s(`.${id}-checkbox`).checked ? offToggle() : onToggle();
-        logger.info(id, s(`.${id}-checkbox`).checked);
-      };
-
-      this.Tokens[id].click = onClickEvent;
-
-      if (!options.disabledOnClick) s(`.${id}`).onclick = onClickEvent;
-
-      setTimeout(() => {
-        options?.checked ? onToggle() : null;
-        logger.info(id, s(`.${id}-checkbox`).checked);
-      });
-    });
-
-    if (options.type === 'checkbox') {
-    }
-    return html`
-      ${options?.displayMode === 'checkbox'
-        ? html`<div class="${options?.containerClass ? options.containerClass : 'inl box-content-border'} ${id}">
-            <div class="in ${id}-content toggle-switch-content-checkbox">
-              <div class="abs center ${id}-circle toggle-switch-circle-checkbox"></div>
-            </div>
-          </div>`
-        : html`<div class="${options?.containerClass ? options.containerClass : 'inl box-content-border'} ${id}">
-            <div class="in ${id}-content toggle-switch-content ">
-              <div class="in ${id}-circle toggle-switch-circle"></div>
-            </div>
-          </div>`}
-      <input type="checkbox" class="${id}-checkbox" style="display: none" />
-    `;
-  },
-};
-
-export { ToggleSwitch };
+import { getId } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
+import { htmls, s } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const ToggleSwitch = {
+  Tokens: {},
+  Render: async function (options) {
+    const id = options?.id ? options.id : getId(this.Tokens, 'toggle-switch-');
+    this.Tokens[id] = {};
+
+    const widthContent = 60;
+    const widthCircle = 20;
+
+    setTimeout(() => {
+      switch (options.displayMode) {
+        case 'checkbox':
+          break;
+
+        default:
+          s(`.${id}-circle`).style.left = `0px`;
+          break;
+      }
+
+      const onToggle = () => {
+        switch (options.displayMode) {
+          case 'checkbox':
+            htmls(`.${id}-circle`, html`<i class="fas fa-check"></i>`);
+            break;
+          default:
+            s(`.${id}-circle`).style.left = `${widthContent - widthCircle}px`;
+            s(`.${id}-circle`).classList.add(`toggle-switch-active`);
+            break;
+        }
+        s(`.${id}-checkbox`).checked = true;
+        options?.on?.checked ? options.on.checked() : null;
+      };
+      const offToggle = () => {
+        switch (options.displayMode) {
+          case 'checkbox':
+            htmls(`.${id}-circle`, html``);
+            break;
+          default:
+            s(`.${id}-circle`).style.left = `0px`;
+            s(`.${id}-circle`).classList.remove(`toggle-switch-active`);
+            break;
+        }
+        s(`.${id}-checkbox`).checked = false;
+        options?.on?.unchecked ? options.on.unchecked() : null;
+      };
+
+      const onClickEvent = () => {
+        s(`.${id}-checkbox`).checked ? offToggle() : onToggle();
+        logger.info(id, s(`.${id}-checkbox`).checked);
+      };
+
+      this.Tokens[id].click = onClickEvent;
+
+      if (!options.disabledOnClick) s(`.${id}`).onclick = onClickEvent;
+
+      setTimeout(() => {
+        options?.checked ? onToggle() : null;
+        logger.info(id, s(`.${id}-checkbox`).checked);
+      });
+    });
+
+    if (options.type === 'checkbox') {
+    }
+    return html`
+      ${options?.displayMode === 'checkbox'
+        ? html`<div class="${options?.containerClass ? options.containerClass : 'inl box-content-border'} ${id}">
+            <div class="in ${id}-content toggle-switch-content-checkbox">
+              <div class="abs center ${id}-circle toggle-switch-circle-checkbox"></div>
+            </div>
+          </div>`
+        : html`<div class="${options?.containerClass ? options.containerClass : 'inl box-content-border'} ${id}">
+            <div class="in ${id}-content toggle-switch-content ">
+              <div class="in ${id}-circle toggle-switch-circle"></div>
+            </div>
+          </div>`}
+      <input type="checkbox" class="${id}-checkbox" style="display: none" />
+    `;
+  },
+};
+
+export { ToggleSwitch };

package/src/client/components/core/ToolTip.js

@@ -1,26 +1,26 @@
-import { append } from './VanillaJs.js';
-
-const ToolTip = {
-  Tokens: {},
-  Render: async function (options = { container: '', htmlRender: '', id: '', classList: '' }) {
-    const { container, htmlRender, id } = options;
-    const tooltipId = 'tooltip-' + id;
-    append(
-      container,
-      html`
-        <style>
-          ${container}:hover .${tooltipId} {
-            visibility: visible;
-          }
-          .${tooltipId} {
-            visibility: hidden;
-          }
-        </style>
-        <div class="tooltip ${options?.classList ? `${options.classList} ` : ' '}${tooltipId}">${htmlRender}</div>
-      `,
-    );
-    return '';
-  },
-};
-
-export { ToolTip };
+import { append } from './VanillaJs.js';
+
+const ToolTip = {
+  Tokens: {},
+  Render: async function (options = { container: '', htmlRender: '', id: '', classList: '' }) {
+    const { container, htmlRender, id } = options;
+    const tooltipId = 'tooltip-' + id;
+    append(
+      container,
+      html`
+        <style>
+          ${container}:hover .${tooltipId} {
+            visibility: visible;
+          }
+          .${tooltipId} {
+            visibility: hidden;
+          }
+        </style>
+        <div class="tooltip ${options?.classList ? `${options.classList} ` : ' '}${tooltipId}">${htmlRender}</div>
+      `,
+    );
+    return '';
+  },
+};
+
+export { ToolTip };