add style

doc/description.md

@@ -19,6 +19,9 @@ Mouseover Translate Any Language At Once
 English, Russian, Japanese, Chinese and so on
 
 # Change Log
+- 0.1.156
+  - change youtube sub style
+  - change default tooltip style
 - 0.1.155
   - update doq library
 - 0.1.154

src/background.js

@@ -46,7 +46,7 @@ function addMessageListener() {
         var translatedResult = await translateWithReverse(request.data);
         sendResponse(translatedResult);
       } else if (request.type === "tts") {
-        playTtsQueue(request.data);
+        await playTtsQueue(request.data);
         sendResponse({});
       } else if (request.type === "stopTTS") {
         stopTts(request.data.timestamp);

src/contentScript.js

@@ -722,6 +722,7 @@ function applyStyleSetting() {
       backdrop-filter: blur(${setting["tooltipBackgroundBlur"]}px) !important;
       background-color: ${setting["tooltipBackgroundColor"]} !important;
       border: 1px solid ${setting["tooltipBorderColor"]}; 
+      box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
     }
     [data-tippy-root] {
       display: inline-block !important;
@@ -778,12 +779,20 @@ function applyStyleSetting() {
     }
     .captions-text .caption-visual-line:first-of-type:after {
       content: '⣿⣿';
-      background-color: #000000b8;
+      border-radius: 3px !important;
+      color: white !important;
+      background: transparent !important;
+      box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
       display: inline-block;
       vertical-align: top;
       opacity:0;
       transition: opacity 0.7s ease-in-out;
     }
+    .ytp-caption-segment{
+      color: white !important;
+      text-shadow: 1px 1px 2px black !important;
+      background:transparent  !important;
+    }
     .captions-text:hover .caption-visual-line:first-of-type:after {
       opacity:1;
     }

src/event/mouseover.js

@@ -86,19 +86,14 @@ async function getTextFromRange(range) {
   var output = {};
 
   for (const detectType of ["word", "sentence", "container"]) {
-    output[detectType] = "";
-    if (!range) {
-      continue;
-    }
     try {
-      var rangeClone = range.cloneRange();
-      //expand range
-      await expandRange(rangeClone, detectType);
-
-      //check mouse xy overlap the range element
-      if (checkXYInElement(rangeClone, clientX, clientY)) {
-        output[detectType] = extractTextFromRange(rangeClone);
-        output[detectType + "_range"] = rangeClone;
+      var wordRange= expandRange(range, detectType);
+
+      if (checkXYInElement(wordRange, clientX, clientY)) {
+        output[detectType] = extractTextFromRange(wordRange);
+        output[detectType + "_range"] = wordRange;
+      }else{
+        output[detectType] = "";
       }
     } catch (error) {
       console.log(error);
@@ -112,17 +107,53 @@ function extractTextFromRange(range) {
   var rangeHtml = range.cloneContents();
   return util.extractTextFromHtml(rangeHtml);
 }
+function getNextWordRange(range) {
+  var next=nextRange(range)
+  while(true){
+    var nextExpand=expandRange(next, detectType);
+    var nextText=        extractTextFromRange(nextExpand);
+    if(nextText!=text){
+      console.log(nextText);
+      break;
+    }
+    var next=  nextRange(next)
+  }
+}
 
-async function expandRange(range, type) {
+function nextRange(range){
+  var rangeClone = range.cloneRange();
+  if (rangeClone.endOffset + 1 > rangeClone.endContainer.length) {
+    let nextNode = rangeClone.endContainer.nextSibling;
+    while (nextNode && nextNode.nodeType !== Node.TEXT_NODE) {
+      nextNode = nextNode.nextSibling;
+    }
+    if (nextNode) {
+      rangeClone.setEnd(nextNode, Math.min(1, nextNode.length));
+    }
+  } else {
+    rangeClone.setEnd(rangeClone.endContainer, rangeClone.endOffset + 1);
+
+  }
+  rangeClone.collapse(false);
+  return rangeClone;
+
+}
+
+function expandRange(range, type) {
   try {
-    if (type == "container" || !range.expand) {
-      range.setStartBefore(range.startContainer);
-      range.setEndAfter(range.startContainer);
-      range.setStart(range.startContainer, 0);
+    if (!range) {
+      return
+    }
+    var rangeClone = range.cloneRange();
+    if (type == "container" || !rangeClone.expand) {
+      rangeClone.setStartBefore(rangeClone.startContainer);
+      rangeClone.setEndAfter(rangeClone.startContainer);
+      rangeClone.setStart(rangeClone.startContainer, 0);
     } else {
-      range.expand(type); // "word" or "sentence"
-      // await expandRangeWithSeg(range, type);
+      rangeClone.expand(type); // "word" or "sentence"
+      // rangeClone= expandRangeWithSeg(rangeClone, type);
     }
+    return rangeClone;
   } catch (error) {
     // console.log(error);
   }
@@ -261,6 +292,9 @@ export function getCharRanges(textNode) {
 
 export function checkXYInElement(ele, x, y) {
   try {
+    if(!ele){
+      return false;
+    }
     var rect = ele.getBoundingClientRect(); //mouse in word rect
     if (rect.left > x || rect.right < x || rect.top > y || rect.bottom < y) {
       return false;
@@ -374,22 +408,20 @@ function isPointInAnyRect(x, y, rects) {
   return false;
 }
 
+
 //firefox word break ====================================
-async function expandRangeWithSeg(range, type = "word") {
+function expandRangeWithSeg(range, type = "word") {
   const { x, y } = getCenterXY(range);
-  var rangeContainer = getContainerRange(range);
+  var rangeContainer = expandRange(range, "container");
   const textNode = rangeContainer.commonAncestorContainer;
-  // var text = textNode.innerText;
-  var text = getNodeText(textNode);
-  var wordSegInfo = await getWordSegmentInfo(text, type);
+  // var text1 = textNode.innerText;
+  var text2 = getNodeText(textNode);
+  var wordSegInfo =  getWordSegmentInfo(text2, type);
   const wordRanges = createWordRanges(wordSegInfo, textNode);
   const currentWordNode = wordRanges.find((range) =>
     isPointInRange(range, x, y)
   );
-  if (!currentWordNode) {
-    return;
-  }
-  setRangeToCurrentWordNode(range, currentWordNode);
+  return currentWordNode   
 }
 
 function isPointInRange(range, x, y) {
@@ -409,18 +441,12 @@ function isPointInRange(range, x, y) {
   return false;
 }
 
-async function getWordSegmentInfo(text, type) {
+function getWordSegmentInfo(text, type) {
   const segmenter = new Intl.Segmenter("en-US", { granularity: type });
   const wordsMeta = [...segmenter.segment(text)];
   return wordsMeta;
 }
 
-function getContainerRange(range) {
-  const containerRange = range.cloneRange();
-  expandRange(containerRange, "container");
-  return containerRange;
-}
-
 function createWordRanges(wordSegInfo, textNode) {
   return wordSegInfo.map((wordMeta) => {
     const wordRange = document.createRange();
@@ -441,11 +467,6 @@ function createWordRanges(wordSegInfo, textNode) {
   });
 }
 
-function setRangeToCurrentWordNode(range, currentWordNode) {
-  range.setStart(currentWordNode.startContainer, currentWordNode.startOffset);
-  range.setEnd(currentWordNode.endContainer, currentWordNode.endOffset);
-}
-
 function selectNode(node, offset) {
   if (node.nodeType === Node.TEXT_NODE) {
     return { node, index: offset };

src/util/index.js

@@ -44,10 +44,10 @@ export var defaultData = {
   tooltipAnimation: "fade",
   tooltipPosition: "follow",
   tooltipTextAlign: "center",
-  tooltipBackgroundBlur: "4",
+  tooltipBackgroundBlur: "6",
   mouseoverHighlightText: "false",
   tooltipFontColor: "#ffffffff",
-  tooltipBackgroundColor: "#000000b8",
+  tooltipBackgroundColor: "#00000080",
   tooltipBorderColor: "#ffffff00",
   mouseoverTextHighlightColor: "#21dc6d40",