fix: svg

src/libs/inputTranslate.js

@@ -7,7 +7,7 @@ import {
 import { genEventName, removeEndchar, matchInputStr } from "./utils";
 import { stepShortcutRegister } from "./shortcut";
 import { apiTranslate } from "../apis";
-import { loadingSvg } from "./svg";
+import { createLoadingSVG } from "./svg";
 import { kissLog } from "./log";
 
 function isInputNode(node) {
@@ -46,7 +46,7 @@ function addLoading(node, loadingId) {
   const rect = node.getBoundingClientRect();
   const div = document.createElement("div");
   div.id = loadingId;
-  div.innerHTML = loadingSvg;
+  div.appendChild(createLoadingSVG());
   div.style.cssText = `
         position: fixed;
         left: ${rect.left}px;

src/libs/svg.js

@@ -1,5 +1,5 @@
 export const loadingSvg = `
-<svg viewBox="0 0 100 100" 
+<svg viewBox="-20 0 100 100" 
      style="display: inline-block; width: 1em; height: 1em; vertical-align: middle;">
   <circle fill="#209CEE" stroke="none" cx="6" cy="50" r="6">
     <animateTransform attributeName="transform" dur="1s" type="translate" values="0 15 ; 0 -15; 0 15" repeatCount="indefinite" begin="0.1"/>
@@ -13,53 +13,98 @@ export const loadingSvg = `
 </svg>
 `;
 
+function createSVGElement(tag, attributes) {
+  const svgNS = "http://www.w3.org/2000/svg";
+  const el = document.createElementNS(svgNS, tag);
+  for (const key in attributes) {
+    el.setAttribute(key, attributes[key]);
+  }
+  return el;
+}
+
+/**
+ * 创建loding动画
+ * @returns
+ */
+export function createLoadingSVG() {
+  const svg = createSVGElement("svg", {
+    viewBox: "-20 0 100 100",
+    style:
+      "display: inline-block; width: 1em; height: 1em; vertical-align: middle;",
+  });
+
+  const circleData = [
+    { cx: "6", begin: "0.1", values: "0 15 ; 0 -15; 0 15" },
+    { cx: "30", begin: "0.2", values: "0 10 ; 0 -10; 0 10" },
+    { cx: "54", begin: "0.3", values: "0 5 ; 0 -5; 0 5" },
+  ];
+
+  circleData.forEach((data) => {
+    const circle = createSVGElement("circle", {
+      fill: "#209CEE",
+      stroke: "none",
+      cx: data.cx,
+      cy: "50",
+      r: "6",
+    });
+    const animation = createSVGElement("animateTransform", {
+      attributeName: "transform",
+      dur: "1s",
+      type: "translate",
+      values: data.values,
+      repeatCount: "indefinite",
+      begin: data.begin,
+    });
+    circle.appendChild(animation);
+    svg.appendChild(circle);
+  });
+
+  return svg;
+}
+
 /**
  * 创建logo
  * @param {*} param0
  * @returns
  */
-export const createLogoSvg = ({
+export function createLogoSVG({
   width = "100%",
   height = "100%",
   viewBox = "-20 -20 70 70",
   isSelected = false,
-} = {}) => {
+} = {}) {
-  const svgNS = "http://www.w3.org/2000/svg";
+  const svg = createSVGElement("svg", {
-  const svgElement = document.createElementNS(svgNS, "svg");
+    xmlns: "http://www.w3.org/2000/svg",
+    width,
+    height,
+    viewBox,
+    version: "1.1",
+  });
 
-  svgElement.setAttribute("xmlns", svgNS);
+  const path1 = createSVGElement("path", {
-  svgElement.setAttribute("width", width);
+    d: "M0 0 C10.56 0 21.12 0 32 0 C32 10.56 32 21.12 32 32 C21.44 32 10.88 32 0 32 C0 21.44 0 10.88 0 0 Z ",
-  svgElement.setAttribute("height", height);
+    fill: "#209CEE",
-  svgElement.setAttribute("viewBox", viewBox);
+    transform: "translate(0,0)",
-  svgElement.setAttribute("version", "1.1");
+  });
 
-  const path1 = document.createElementNS(svgNS, "path");
+  const path2 = createSVGElement("path", {
-  path1.setAttribute(
+    d: "M0 0 C0.66 0 1.32 0 2 0 C2 2.97 2 5.94 2 9 C2.969375 8.2575 3.93875 7.515 4.9375 6.75 C5.48277344 6.33234375 6.02804688 5.9146875 6.58984375 5.484375 C8.39053593 3.83283924 8.39053593 3.83283924 9 0 C13.95 0 18.9 0 24 0 C24 0.99 24 1.98 24 3 C22.68 3 21.36 3 20 3 C20 9.27 20 15.54 20 22 C19.01 22 18.02 22 17 22 C17 15.73 17 9.46 17 3 C15.35 3 13.7 3 12 3 C11.731875 3.598125 11.46375 4.19625 11.1875 4.8125 C10.01506533 6.97224808 8.80630718 8.35790256 7 10 C8.01790655 12.27071461 8.77442829 13.80784632 10.6875 15.4375 C11.120625 15.953125 11.55375 16.46875 12 17 C11.6875 19.6875 11.6875 19.6875 11 22 C10.34 22 9.68 22 9 22 C8.773125 21.236875 8.54625 20.47375 8.3125 19.6875 C6.73268318 16.45263699 5.16717283 15.58358642 2 14 C2 16.64 2 19.28 2 22 C1.34 22 0.68 22 0 22 C0 14.74 0 7.48 0 0 Z ",
-    "d",
+    fill: "#E9F5FD",
-    "M0 0 C10.56 0 21.12 0 32 0 C32 10.56 32 21.12 32 32 C21.44 32 10.88 32 0 32 C0 21.44 0 10.88 0 0 Z "
+    transform: "translate(4,5)",
-  );
+  });
-  path1.setAttribute("fill", "#209CEE");
-  path1.setAttribute("transform", "translate(0,0)");
 
-  const path2 = document.createElementNS(svgNS, "path");
+  svg.appendChild(path1);
-  path2.setAttribute(
+  svg.appendChild(path2);
-    "d",
-    "M0 0 C0.66 0 1.32 0 2 0 C2 2.97 2 5.94 2 9 C2.969375 8.2575 3.93875 7.515 4.9375 6.75 C5.48277344 6.33234375 6.02804688 5.9146875 6.58984375 5.484375 C8.39053593 3.83283924 8.39053593 3.83283924 9 0 C13.95 0 18.9 0 24 0 C24 0.99 24 1.98 24 3 C22.68 3 21.36 3 20 3 C20 9.27 20 15.54 20 22 C19.01 22 18.02 22 17 22 C17 15.73 17 9.46 17 3 C15.35 3 13.7 3 12 3 C11.731875 3.598125 11.46375 4.19625 11.1875 4.8125 C10.01506533 6.97224808 8.80630718 8.35790256 7 10 C8.01790655 12.27071461 8.77442829 13.80784632 10.6875 15.4375 C11.120625 15.953125 11.55375 16.46875 12 17 C11.6875 19.6875 11.6875 19.6875 11 22 C10.34 22 9.68 22 9 22 C8.773125 21.236875 8.54625 20.47375 8.3125 19.6875 C6.73268318 16.45263699 5.16717283 15.58358642 2 14 C2 16.64 2 19.28 2 22 C1.34 22 0.68 22 0 22 C0 14.74 0 7.48 0 0 Z "
-  );
-  path2.setAttribute("fill", "#E9F5FD");
-  path2.setAttribute("transform", "translate(4,5)");
-
-  svgElement.appendChild(path1);
-  svgElement.appendChild(path2);
 
   if (isSelected) {
-    const redLine = document.createElementNS(svgNS, "path");
+    const redLine = createSVGElement("path", {
-    redLine.setAttribute("d", "M0 36 L32 36");
+      d: "M0 36 L32 36",
-    redLine.setAttribute("stroke", "red");
+      stroke: "red",
-    redLine.setAttribute("stroke-width", "3");
+      "stroke-width": "3",
-    redLine.setAttribute("stroke-linecap", "round");
+      "stroke-linecap": "round",
-    svgElement.appendChild(redLine);
+    });
+    svg.appendChild(redLine);
   }
 
-  return svgElement;
+  return svg;
-};
+}

src/libs/translator.js

@@ -30,7 +30,7 @@ import { injectInlineJs, injectInternalCss } from "./injector";
 import { kissLog } from "./log";
 import { clearAllBatchQueue } from "./batchQueue";
 import { genTextClass } from "./style";
-import { loadingSvg } from "./svg";
+import { createLoadingSVG } from "./svg";
 import { shortcutRegister } from "./shortcut";
 import { tryDetectLang } from "./detect";
 import { browser } from "./browser";
@@ -1001,7 +1001,7 @@ export class Translator {
 
     const inner = document.createElement(transTag);
     inner.className = `${Translator.KISS_CLASS.inner} ${this.#textClass[textStyle]}`;
-    inner.innerHTML = loadingSvg;
+    inner.appendChild(createLoadingSVG());
     wrapper.appendChild(inner);
     nodes[nodes.length - 1].after(wrapper);
 

src/subtitle/YouTubeCaptionProvider.js

@@ -8,7 +8,7 @@ import {
   OPT_TRANS_MICROSOFT,
 } from "../config";
 import { sleep } from "../libs/utils.js";
-import { createLogoSvg } from "../libs/svg.js";
+import { createLogoSVG } from "../libs/svg.js";
 import { randomBetween } from "../libs/utils.js";
 
 const VIDEO_SELECT = "#container video";
@@ -107,7 +107,7 @@ class YouTubeCaptionProvider {
       opacity: "0.5",
     });
 
-    toggleButton.appendChild(createLogoSvg());
+    toggleButton.appendChild(createLogoSVG());
     kissControls.appendChild(toggleButton);
 
     toggleButton.onclick = () => {
@@ -334,7 +334,7 @@ class YouTubeCaptionProvider {
       return;
     }
     this.#enabled = true;
-    this.#toggleButton?.replaceChildren(createLogoSvg({ isSelected: true }));
+    this.#toggleButton?.replaceChildren(createLogoSVG({ isSelected: true }));
 
     const videoEl = document.querySelector(VIDEO_SELECT);
     if (!videoEl) {
@@ -369,7 +369,7 @@ class YouTubeCaptionProvider {
       return;
     }
     this.#enabled = false;
-    this.#toggleButton?.replaceChildren(createLogoSvg());
+    this.#toggleButton?.replaceChildren(createLogoSVG());
 
     logger.info("Youtube Provider: Destroying manager...");