cyberia 3.1.3 → 3.2.9

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

@@ -0,0 +1,75 @@
+/**
+ * Shared factory for app-specific WebSocket event handlers.
+ * Eliminates duplication across per-app SocketIo*.js modules by providing
+ * common channel event handling (chat, email-confirmed, etc.).
+ *
+ * @module client/core/SocketIoHandler
+ * @namespace SocketIoHandlerProvider
+ */
+import { Account } from './Account.js';
+import { Chat } from './Chat.js';
+import { s4 } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
+import { SocketIo } from './SocketIo.js';
+import { s } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+/**
+ * @class SocketIoHandlerProvider
+ * @classdesc Provides a static factory method to create app-specific SocketIo event handlers
+ * from an {@link AppStore} instance. Handles common channel events (chat, email-confirmed)
+ * and wires connect/disconnect lifecycle.
+ * @memberof SocketIoHandlerProvider
+ */
+class SocketIoHandlerProvider {
+  /**
+   * Creates a standard SocketIo event initialization object for an app module.
+   *
+   * @static
+   * @param {import('./AppStore.js').AppStore} appStore - The app-specific AppStore instance.
+   * @returns {{ instance: function(): Promise<void> }} An object with an `instance` method for SocketIo event registration.
+   */
+  static create(appStore) {
+    return {
+      instance() {
+        return new Promise((resolve) => {
+          for (const type of Object.keys(appStore.Data)) {
+            SocketIo.onChannel(type, async ({ args }) => {
+              args = JSON.parse(args[0]);
+              switch (type) {
+                case 'chat':
+                  {
+                    const idModal = 'modal-chat';
+                    if (s(`.${idModal}-chat-box`)) Chat.appendChatBox({ idModal, ...args });
+                  }
+                  break;
+
+                default:
+                  break;
+              }
+              const { status } = args;
+
+              switch (status) {
+                case 'email-confirmed': {
+                  const newUser = { ...appStore.Data.user.main.model.user, emailConfirmed: true };
+                  Account.renderVerifyEmailStatus(newUser);
+                  Account.triggerUpdateEvent({ user: newUser });
+                  break;
+                }
+
+                default:
+                  break;
+              }
+            }, { key: s4() });
+          }
+          SocketIo.onConnect(async ({ id }) => {}, { key: s4() });
+          SocketIo.onDisconnect(async ({ reason }) => {}, { key: s4() });
+          return resolve();
+        });
+      },
+    };
+  }
+}
+
+export { SocketIoHandlerProvider };

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

@@ -1,113 +1,161 @@
+/**
+ * Client-side WebRTC stream manager backed by PeerJS.
+ * Handles peer creation, media capture, and room-based A/V streaming.
+ *
+ * @module client/core/Stream
+ * @see https://peerjs.com/docs/
+ */
+
 import { loggerFactory } from './Logger.js';
 import { getProxyPath } from './Router.js';
 
-// https://peerjs.com/docs/
-
 const logger = loggerFactory(import.meta);
 
-const Stream = {
-  Data: {},
-  createPeerServer: function ({ id }) {
-    const peerOptions = {
-      host: location.hostname, // '/'
+/**
+ * @class Stream
+ * @classdesc Static manager for PeerJS connections and MediaStream lifecycle.
+ * Supports multiple concurrent peer sessions keyed by an arbitrary `id`.
+ */
+class Stream {
+  /** @type {Object.<string, { peer: Peer, options: Object }>} Active peer sessions keyed by session id. */
+  static #sessions = {};
+
+  /**
+   * Builds PeerJS connection options from current page location.
+   * @returns {{ host: string, port: number, path: string, secure: boolean }}
+   */
+  static #buildPeerOptions() {
+    return {
+      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();
+  /**
+   * Creates a PeerJS client for the given session id.
+   * @param {string} id - Unique session identifier.
+   * @returns {{ peer: Peer, options: Object }} The Peer instance and its options.
+   */
+  static createPeer(id) {
+    this.destroyPeer(id);
+    const options = this.#buildPeerOptions();
+    logger.info('peerOptions', options);
+    const peer = new Peer(undefined, options);
+    this.#sessions[id] = { peer, options };
+    return this.#sessions[id];
+  }
+
+  /**
+   * Returns an existing session or `undefined`.
+   * @param {string} id
+   * @returns {{ peer: Peer, options: Object }|undefined}
+   */
+  static getSession(id) {
+    return this.#sessions[id];
+  }
 
-        // close it using peerjs methods
-        if (conn.close) conn.close();
-      });
+  /**
+   * Destroys a peer session — closes all connections and the peer itself.
+   * @param {string} id - Session identifier.
+   */
+  static destroyPeer(id) {
+    const session = this.#sessions[id];
+    if (!session) return;
+    const { peer } = session;
+    if (peer) {
+      for (const key in peer.connections) {
+        for (const conn of peer.connections[key]) {
+          if (conn.peerConnection?.close) conn.peerConnection.close();
+          if (conn.close) conn.close();
+        }
+      }
+      if (!peer.destroyed) peer.destroy();
     }
-  },
-  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();
+    delete this.#sessions[id];
+  }
+
+  /**
+   * Calls a remote peer and streams local media to them.
+   * @param {string} id - Session identifier.
+   * @param {string} remotePeerId - The remote peer's ID.
+   * @param {MediaStream} localStream - Local media stream to send.
+   * @param {Object} [callbacks]
+   * @param {function(HTMLMediaElement): void} [callbacks.onStream] - Called when remote stream arrives.
+   * @param {function(HTMLMediaElement): void} [callbacks.onClose] - Called when the call closes.
+   * @returns {{ call: import('peerjs').MediaConnection, element: HTMLVideoElement }}
+   */
+  static callPeer(id, remotePeerId, localStream, { onStream, onClose } = {}) {
+    const session = this.#sessions[id];
+    if (!session) throw new Error(`No peer session "${id}"`);
+    const call = session.peer.call(remotePeerId, localStream);
+    const element = this.createVideoElement();
+    call.on('stream', (remoteStream) => {
+      this.attachStream(element, remoteStream);
+      onStream?.(element);
     });
-    // 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
+    call.on('close', () => onClose?.(element));
+    return { call, element };
+  }
+
+  // ── Media helpers ────────────────────────────────────────────────
 
-        break;
+  /**
+   * Requests user media (camera / microphone) with graceful fallback.
+   * Falls back to video-only if audio is unavailable (NotReadableError).
+   * @param {{ video?: boolean|MediaTrackConstraints, audio?: boolean|MediaTrackConstraints }} [constraints]
+   * @returns {Promise<MediaStream|undefined>}
+   */
+  static async getMediaStream(constraints = { video: true, audio: true }) {
+    const fallbacks = [
+      constraints,
+      constraints.audio ? { video: constraints.video, audio: false } : null,
+      constraints.video ? { video: false, audio: constraints.audio } : null,
+    ].filter(Boolean);
 
-      default:
-        break;
+    for (const c of fallbacks) {
+      try {
+        return await navigator.mediaDevices.getUserMedia(c);
+      } catch (err) {
+        logger.warn(`getUserMedia failed (${err.name}): ${err.message}`, c);
+      }
     }
-    return mediaElement;
-  },
-};
+    logger.error('All media capture attempts failed');
+    return undefined;
+  }
+
+  /**
+   * Stops all tracks of a MediaStream.
+   * @param {MediaStream} stream
+   */
+  static stopStream(stream) {
+    if (!stream) return;
+    stream.getTracks().forEach((track) => track.stop());
+  }
+
+  /**
+   * Creates a `<video>` element pre-configured for inline autoplay.
+   * @returns {HTMLVideoElement}
+   */
+  static createVideoElement() {
+    const video = document.createElement('video');
+    video.playsInline = true;
+    video.autoplay = true;
+    return video;
+  }
+
+  /**
+   * Attaches a MediaStream to a media element and starts playback.
+   * @param {HTMLMediaElement} element
+   * @param {MediaStream} stream
+   * @returns {HTMLMediaElement}
+   */
+  static attachStream(element, stream) {
+    element.srcObject = stream;
+    element.addEventListener('loadedmetadata', () => element.play());
+    return element;
+  }
+}
 
 export { Stream };

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

@@ -1,28 +1,22 @@
 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] = {};
-
+class ToggleSwitch {
+  static Tokens = {};
+  static async instance(options) {
+    const id = options?.id ? options.id : getId(ToggleSwitch.Tokens, 'toggle-switch-');
+    ToggleSwitch.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':
@@ -49,22 +43,17 @@ const ToggleSwitch = {
         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;
-
+      ToggleSwitch.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') {
     }
     const htmlRender = html`
@@ -95,7 +84,6 @@ const ToggleSwitch = {
       `;
     }
     return htmlRender;
-  },
-};
-
+  }
+}
 export { ToggleSwitch };

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

@@ -1,14 +1,12 @@
 import { renderCssAttr } from './Css.js';
 import { append, s } from './VanillaJs.js';
 import { Modal } from './Modal.js';
-
-const ToolTip = {
-  Tokens: {},
-  Render: async function (
+class ToolTip {
+  static Tokens = {};
+  static async instance(
     options = { container: '', htmlRender: '', id: '', classList: '', useVisibilityHover: false, useMenuBtn: false },
   ) {
     const { container, htmlRender, id, useVisibilityHover } = options;
-
     if (useVisibilityHover) {
       const tooltipId = 'tooltip-' + id;
       append(
@@ -27,10 +25,8 @@ const ToolTip = {
       );
       return;
     }
-
     const containerEl = s(container);
     if (!containerEl) return;
-
     const tooltipId = `tooltip-${id}`;
     const tooltip = html`
       <div
@@ -49,9 +45,7 @@ const ToolTip = {
       </div>
     `;
     append('body', tooltip);
-
     const tooltipEl = s(`.${tooltipId}`);
-
     containerEl.addEventListener('mouseenter', () => {
       if (
         options.useMenuBtn &&
@@ -60,13 +54,10 @@ const ToolTip = {
         ).classList.contains('hide')
       )
         return;
-
       const containerRect = containerEl.getBoundingClientRect();
       const tooltipRect = tooltipEl.getBoundingClientRect();
-
       let top = containerRect.bottom + window.scrollY + 5;
       let left = containerRect.left + window.scrollX + containerRect.width / 2 - tooltipRect.width / 2;
-
       // Adjust if it goes off-screen
       if (left < 0) left = 5;
       if (left + tooltipRect.width > window.innerWidth) {
@@ -75,16 +66,13 @@ const ToolTip = {
       if (top + tooltipRect.height > window.innerHeight) {
         top = containerRect.top + window.scrollY - tooltipRect.height - 5;
       }
-
       tooltipEl.style.top = `${top}px`;
       tooltipEl.style.left = `${left}px`;
       tooltipEl.style.opacity = '1';
     });
-
     containerEl.addEventListener('mouseleave', () => {
       tooltipEl.style.opacity = '0';
     });
-  },
-};
-
+  }
+}
 export { ToolTip };