cyberia 2.8.885

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

@@ -0,0 +1,113 @@
+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, // '/'
+      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

@@ -0,0 +1,101 @@
+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') {
+    }
+    const htmlRender = 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" />
+    `;
+    if (options.wrapper) {
+      setTimeout(() => (s(`.toggle-form-container-${id}`).onclick = () => ToggleSwitch.Tokens[`${id}`].click()));
+      return html`
+        <div class="in toggle-form-container toggle-form-container-${id} hover">
+          <div class="fl ">
+            <div class="in fll" style="width: 70%">
+              <div class="in">${options.wrapperLabel}</div>
+            </div>
+            <div class="in fll" style="width: 30%">${htmlRender}</div>
+          </div>
+        </div>
+      `;
+    }
+    return htmlRender;
+  },
+};
+
+export { ToggleSwitch };

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

@@ -0,0 +1,90 @@
+import { renderCssAttr } from './Css.js';
+import { append, s } from './VanillaJs.js';
+import { Modal } from './Modal.js';
+
+const ToolTip = {
+  Tokens: {},
+  Render: async function (
+    options = { container: '', htmlRender: '', id: '', classList: '', useVisibilityHover: false, useMenuBtn: false },
+  ) {
+    const { container, htmlRender, id, useVisibilityHover } = options;
+
+    if (useVisibilityHover) {
+      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;
+    }
+
+    const containerEl = s(container);
+    if (!containerEl) return;
+
+    const tooltipId = `tooltip-${id}`;
+    const tooltip = html`
+      <div
+        class="fix fix-tooltip ${tooltipId}"
+        style="${renderCssAttr({
+          style: {
+            'z-index': 10,
+            position: 'absolute',
+            opacity: 0,
+            transition: 'opacity 0.2s ease-in-out',
+            'pointer-events': 'none',
+          },
+        })}"
+      >
+        ${htmlRender}
+      </div>
+    `;
+    append('body', tooltip);
+
+    const tooltipEl = s(`.${tooltipId}`);
+
+    containerEl.addEventListener('mouseenter', () => {
+      if (
+        options.useMenuBtn &&
+        s(
+          `.btn-icon-menu-mode-${Modal.Data['modal-menu'].options.mode === 'slide-menu-right' ? 'left' : 'right'}`,
+        ).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) {
+        left = window.innerWidth - tooltipRect.width - 5;
+      }
+      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 };