@tencentcloud/roomkit-web-vue3/lib/services/function/waterMark.js

<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,

"use strict";
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const types = require("../types.js");
class WaterMark {
  constructor(service) {
    __publicField(this, "service");
    __publicField(this, "isWatermarkEnabled", false);
    __publicField(this, "handleRoomStart", () => {
      this.updateWatermarkVisibility(true);
    });
    __publicField(this, "handleRoomJoin", () => {
      this.updateWatermarkVisibility(true);
    });
    this.service = service;
    this.bindEvent();
  }
  bindEvent() {
    this.service.on(types.EventType.ROOM_START, this.handleRoomStart);
    this.service.on(types.EventType.ROOM_JOIN, this.handleRoomJoin);
  }
  dispose() {
    this.service.off(types.EventType.ROOM_START, this.handleRoomStart);
    this.service.off(types.EventType.ROOM_JOIN, this.handleRoomJoin);
  }
  toggleWatermark(enabled) {
    this.isWatermarkEnabled = enabled;
    this.updateWatermarkVisibility(enabled);
  }
  updateWatermarkVisibility(enabled) {
    const watermarkContainer = document.querySelector(".watermark-container");
    if (!enabled || !this.isWatermarkEnabled) {
      watermarkContainer == null ? void 0 : watermarkContainer.remove();
      return;
    }
    if (!watermarkContainer) {
      const videoElement = document.querySelector(".content-container");
      const { userId, userName } = this.service.basicStore;
      this.addWatermark(videoElement, `${userName}(${userId})`);
    }
  }
  addStyles() {
    const styles = `
          .watermark-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }
          .watermark {
            font-size: 16px;
            position: absolute;
            transform: rotate(-45deg);
            opacity: 0.3;
            word-wrap: break-word;
            text-align: center;
            color: #99A2B2;
            max-width: 400px;
            font-weight: 500;
          }
        `;
    const styleElement = document.createElement("style");
    styleElement.type = "text/css";
    styleElement.appendChild(document.createTextNode(styles));
    document.head.appendChild(styleElement);
  }
  addWatermark(targetElement, watermarkText) {
    if (!targetElement) return;
    this.addStyles();
    let watermarkContainer = document.createElement("div");
    watermarkContainer.classList.add("watermark-container");
    targetElement.appendChild(watermarkContainer);
    const addWatermarkElements = () => {
      watermarkContainer.innerHTML = "";
      const maxWidth = 200;
      const watermarkSpacing = maxWidth + 25;
      for (let y = -225; y < watermarkContainer.offsetHeight + watermarkSpacing; y += watermarkSpacing) {
        for (let x = -225; x < watermarkContainer.offsetWidth + watermarkSpacing; x += watermarkSpacing) {
          const watermarkElement = document.createElement("div");
          watermarkElement.classList.add("watermark");
          watermarkElement.textContent = watermarkText;
          watermarkElement.style.left = `${x}px`;
          watermarkElement.style.top = `${y}px`;
          watermarkContainer.appendChild(watermarkElement);
        }
      }
    };
    addWatermarkElements();
    const resizeObserver = new ResizeObserver(addWatermarkElements);
    resizeObserver.observe(watermarkContainer);
    const observerCallback = (mutations, observer) => {
      mutations.forEach((mutation) => {
        if (mutation.removedNodes.length > 0) {
          const removedWatermark = Array.from(mutation.removedNodes).some(
            (node) => {
              var _a;
              return (_a = node.classList) == null ? void 0 : _a.contains("watermark-container");
            }
          );
          if (removedWatermark) {
            watermarkContainer = document.createElement("div");
            watermarkContainer.classList.add("watermark-container");
            targetElement.appendChild(watermarkContainer);
            addWatermarkElements();
            observer.disconnect();
            observeChanges();
          }
        }
        if (mutation.type === "attributes" && mutation.attributeName === "style") {
          watermarkContainer.style.display = "";
        }
      });
    };
    const observeChanges = () => {
      const observer = new MutationObserver(observerCallback);
      observer.observe(targetElement, { childList: true });
      observer.observe(watermarkContainer, {
        attributes: true,
        attributeFilter: ["style"]
      });
    };
    observeChanges();
  }
}
exports.WaterMark = WaterMark;