☰

LingQ Addon

Provides custom LingQ layouts

安装此脚本?
作者推荐脚本

您可能也喜欢Simplify Embedded YouTube Player。

安装此脚本 
  1. // ==UserScript==
  2. // @name         LingQ Addon
  3. // @description  Provides custom LingQ layouts
  4. // @match        https://www.lingq.com/*/learn/*/web/reader/*
  5. // @match        https://www.lingq.com/*/learn/*/web/library/course/*
  6. // @exclude      https://www.lingq.com/*/learn/*/web/editor/*
  7. // @version      5.3.4
  8. // @grant       GM_setValue
  9. // @grant       GM_getValue
  10. // @namespace https://greasyfork.org/users/1458847
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     "use strict";
  15.  
  16.     const storage = {
  17.         get: (key, defaultValue) => {
  18.             const value = GM_getValue(key);
  19.             return value === undefined ? defaultValue : value;
  20.         },
  21.         set: (key, value) => GM_setValue(key, value)
  22.     };
  23.     
  24.     const defaults = {
  25.         styleType: "video",
  26.         colorMode: "dark",
  27.         fontSize: 1.1,
  28.         lineHeight: 1.7,
  29.         heightBig: 400,
  30.         sentenceHeight: 400,
  31.         darkColors: {
  32.             fontColor: "#e0e0e0",
  33.             lingqBackground: "rgba(109, 89, 44, 0.7)",
  34.             lingqBorder: "rgba(254, 203, 72, 0.3)",
  35.             lingqBorderLearned: "rgba(254, 203, 72, 0.5)",
  36.             knownBackground: "rgba(37, 57, 82, 0.7)",
  37.             knownBorder: "rgba(72, 154, 254, 0.5)",
  38.             playingUnderline: "#ffffff"
  39.         },
  40.         whiteColors: {
  41.             fontColor: "#000000",
  42.             lingqBackground: "rgba(255, 200, 0, 0.4)",
  43.             lingqBorder: "rgba(255, 200, 0, 0.3)",
  44.             lingqBorderLearned: "rgba(255, 200, 0, 1)",
  45.             knownBackground: "rgba(198, 223, 255, 0.7)",
  46.             knownBorder: "rgba(0, 111, 255, 0.3)",
  47.             playingUnderline: "#000000"
  48.         },
  49.         librarySortOption: 0,
  50.         autoFinishing: false,
  51.         chatWidget: false,
  52.         llmProvider: "openai",
  53.         llmApiKey: "",
  54.         askSelected: false,
  55.         tts: false,
  56.         ttsApiKey: "",
  57.         ttsVoice: "alloy",
  58.     };
  59.  
  60.     const settings = {
  61.         styleType: storage.get("styleType", defaults.styleType),
  62.         colorMode: storage.get("colorMode", defaults.colorMode),
  63.         fontSize: storage.get("fontSize", defaults.fontSize),
  64.         lineHeight: storage.get("lineHeight", defaults.lineHeight),
  65.         heightBig: storage.get("heightBig", defaults.heightBig),
  66.         sentenceHeight: storage.get("sentenceHeight", defaults.sentenceHeight),
  67.         librarySortOption: storage.get("librarySortOption", defaults.librarySortOption),
  68.         get autoFinishing() { return storage.get("autoFinishing", defaults.autoFinishing); },
  69.         get chatWidget() { return storage.get("chatWidget", defaults.chatWidget); },
  70.         get llmProvider() { return storage.get("llmProvider", defaults.llmProvider); },
  71.         get llmApiKey() { return storage.get("llmApiKey", defaults.llmApiKey); },
  72.         get askSelected() { return storage.get("askSelected", defaults.askSelected); },
  73.         get tts() { return storage.get("tts", defaults.tts); },
  74.         get ttsApiKey() { return storage.get("ttsApiKey", defaults.ttsApiKey); },
  75.         get ttsVoice() { return storage.get("ttsVoice", defaults.ttsVoice); },
  76.     };
  77.  
  78.     const colorSettings = getColorSettings(settings.colorMode);
  79.  
  80.     let styleElement = null;
  81.  
  82.     function getColorSettings(colorMode) {
  83.         const prefix = colorMode === "dark" ? "dark_" : "white_";
  84.         const defaultColors = colorMode === "dark" ? defaults.darkColors : defaults.whiteColors;
  85.  
  86.         return {
  87.             fontColor: storage.get(prefix + "fontColor", defaultColors.fontColor),
  88.             lingqBackground: storage.get(prefix + "lingqBackground", defaultColors.lingqBackground),
  89.             lingqBorder: storage.get(prefix + "lingqBorder", defaultColors.lingqBorder),
  90.             lingqBorderLearned: storage.get(prefix + "lingqBorderLearned", defaultColors.lingqBorderLearned),
  91.             knownBackground: storage.get(prefix + "knownBackground", defaultColors.knownBackground),
  92.             knownBorder: storage.get(prefix + "knownBorder", defaultColors.knownBorder),
  93.             playingUnderline: storage.get(prefix + "playingUnderline", defaultColors.playingUnderline)
  94.         };
  95.     }
  96.  
  97.     function createElement(tag, props = {}) {
  98.         const element = document.createElement(tag);
  99.         Object.entries(props).forEach(([key, value]) => {
  100.             if (key === "style" && typeof value === "string") {
  101.                 element.style.cssText = value;
  102.             } else if (key === "textContent") {
  103.                 element.textContent = value;
  104.             } else {
  105.                 element[key] = value;
  106.             }
  107.         });
  108.         return element;
  109.     }
  110.  
  111.     function createSettingsPopup() {
  112.         const popup = createElement("div", {id: "lingqAddonSettingsPopup"});
  113.  
  114.         // drag handle
  115.         const dragHandle = createElement("div", {id: "lingqAddonSettingsDragHandle"});
  116.  
  117.         const dragHandleTitle = createElement("h3", {textContent: "LingQ Addon Settings"});
  118.         dragHandle.appendChild(dragHandleTitle);
  119.  
  120.         // popup content
  121.         const content = createElement("div", {style: `padding: 0 5px;`});
  122.         const popupContentElement = generatePopupContent();
  123.         content.appendChild(popupContentElement);
  124.  
  125.         popup.appendChild(dragHandle);
  126.         popup.appendChild(content);
  127.  
  128.         return popup;
  129.     }
  130.  
  131.     function generatePopupContent() {
  132.         function addSelect(parent, id, labelText, options, selectedValue) {
  133.             const container = createElement("div", {className: "popup-row"});
  134.             container.appendChild(createElement("label", {htmlFor: id, textContent: labelText}));
  135.  
  136.             const select = createElement("select", {id});
  137.             options.forEach(option => {
  138.                 select.appendChild(createElement("option", {value: option.value, textContent: option.text, selected: selectedValue === option.value}));
  139.             });
  140.  
  141.             container.appendChild(select);
  142.             parent.appendChild(container);
  143.             return container;
  144.         }
  145.  
  146.         function addSlider(parent, id, labelText, valueId, value, unit, min, max, step) {
  147.             const container = createElement("div", {className: "popup-row"});
  148.  
  149.             const label = createElement("label", { htmlFor: id });
  150.             label.appendChild(document.createTextNode(labelText + " "));
  151.             label.appendChild(createElement("span", { id: valueId, textContent: value }));
  152.             if (unit) label.appendChild(document.createTextNode(unit));
  153.  
  154.             container.appendChild(label);
  155.             container.appendChild(createElement("input", {type: "range", id, min, max, step, value, style: "width: 100%;"}));
  156.  
  157.             parent.appendChild(container);
  158.             return container;
  159.         }
  160.  
  161.         function addColorPicker(parent, id, labelText, value) {
  162.             const container = createElement("div", {className: "popup-row"});
  163.             container.appendChild(createElement("label", {htmlFor: id + "Text", textContent: labelText}));
  164.  
  165.             const flexContainer = createElement("div", {style: "display: flex; align-items: center;"});
  166.             flexContainer.appendChild(createElement("div", {id: id + "Picker", className: "color-picker" }));
  167.             flexContainer.appendChild(createElement("input", {type: "text", id: id + "Text", value, style: "margin-left: 10px;", className: "popup-input"}));
  168.  
  169.             container.appendChild(flexContainer);
  170.             parent.appendChild(container);
  171.             return container;
  172.         }
  173.  
  174.         function addCheckbox(parent, id, labelText, checked) {
  175.             const container = createElement("div", {className: "popup-row"});
  176.             const label = createElement("label", {htmlFor: id, textContent: labelText});
  177.             const checkbox = createElement("input", {type: "checkbox", id, checked, style: "margin-left: 10px;"});
  178.  
  179.             label.style.display = "flex";
  180.             label.style.alignItems = "center";
  181.             container.appendChild(label);
  182.             label.appendChild(checkbox);
  183.             parent.appendChild(container);
  184.  
  185.             return container;
  186.         }
  187.  
  188.         const popupLayout = createElement("div");
  189.         const columns = createElement("div", {style: "display: flex; flex-direction: row;"});
  190.  
  191.         const container = createElement("div", {style: "padding: 5px; width: 350px;"});
  192.  
  193.         addSelect(container, "styleTypeSelector", "Layout Style:", [
  194.             { value: "video", text: "Video" },
  195.             { value: "video2", text: "Video2" },
  196.             { value: "audio", text: "Audio" },
  197.             { value: "off", text: "Off" }
  198.         ], settings.styleType);
  199.  
  200.         const videoSettings = createElement("div", {
  201.             id: "videoSettings",
  202.             style: `${settings.styleType === "video" ? "" : "display: none"}`
  203.         });
  204.         addSlider(videoSettings, "heightBigSlider", "Video Height:", "heightBigValue", settings.heightBig, "px", 300, 800, 10);
  205.         container.appendChild(videoSettings);
  206.  
  207.         const sentenceVideoSettings = createElement("div", {
  208.             id: "sentenceVideoSettings",
  209.             style: `${settings.styleType === "off" ? "" : "display: none"}`
  210.         });
  211.         addSlider(sentenceVideoSettings, "sentenceHeightSlider", "Sentence Video Height:", "sentenceHeightValue", settings.heightBig, "px", 300, 600, 10);
  212.         container.appendChild(sentenceVideoSettings);
  213.  
  214.         addSlider(container, "fontSizeSlider", "Font Size:", "fontSizeValue", settings.fontSize, "rem", 0.8, 1.8, 0.05);
  215.         addSlider(container, "lineHeightSlider", "Line Height:", "lineHeightValue", settings.lineHeight, "", 1.2, 3.0, 0.1);
  216.  
  217.         const colorSection = createElement("div", {className: "popup-section"});
  218.  
  219.         addSelect(colorSection, "colorModeSelector", "Color Mode:", [
  220.             { value: "dark", text: "Dark" },
  221.             { value: "white", text: "White" }
  222.         ], settings.colorMode);
  223.  
  224.         [
  225.             { id: "fontColor", label: "Font Color:", value: colorSettings.fontColor },
  226.             { id: "lingqBackground", label: "LingQ Background:", value: colorSettings.lingqBackground },
  227.             { id: "lingqBorder", label: "LingQ Border:", value: colorSettings.lingqBorder },
  228.             { id: "lingqBorderLearned", label: "LingQ Border Learned:", value: colorSettings.lingqBorderLearned },
  229.             { id: "knownBackground", label: "Known Background:", value: colorSettings.knownBackground },
  230.             { id: "knownBorder", label: "Known Border:", value: colorSettings.knownBorder },
  231.             { id: "playingUnderline", label: "Playing Underline:", value: colorSettings.playingUnderline }
  232.         ].forEach(config => addColorPicker(colorSection, config.id, config.label, config.value));
  233.  
  234.         container.appendChild(colorSection);
  235.  
  236.         addCheckbox(container, "autoFinishingCheckbox", "Finish Lesson Automatically", settings.autoFinishing);
  237.  
  238.         columns.appendChild(container);
  239.  
  240.         const llmContainer = createElement("div", {style: "padding: 10px; width: 350px;"});
  241.  
  242.         addCheckbox(llmContainer, "chatWidgetCheckbox", "Enable the Chat Widget", settings.chatWidget);
  243.  
  244.         const llmSection = createElement("div", {id: "llmSection", className: "popup-section", style: `${settings.chatWidget ? "" : "display: none"}`});
  245.  
  246.         addSelect(llmSection, "llmProviderSelector", "LLM Provider:", [
  247.             { value: "openai", text: "OpenAI (GPT-4.1 nano)" },
  248.             { value: "google", text: "Google (Gemini 2.0 Flash)" }
  249.         ], settings.llmProvider);
  250.  
  251.         const apiKeyContainer = createElement("div", {className: "popup-row"});
  252.         apiKeyContainer.appendChild(createElement("label", {htmlFor: "llmApiKeyInput", textContent: "API Key:"}));
  253.  
  254.         const apiKeyFlexContainer = createElement("div", {style: "display: flex; align-items: center;"});
  255.         const apiKeyInput= createElement("input", {type: "password", id: "llmApiKeyInput", value: settings.llmApiKey, className: "popup-input"});
  256.         apiKeyFlexContainer.appendChild(apiKeyInput)
  257.         apiKeyContainer.appendChild(apiKeyFlexContainer);
  258.         llmSection.appendChild(apiKeyContainer);
  259.  
  260.         addCheckbox(llmSection, "askSelectedCheckbox", "Enable asking with selected text", settings.askSelected);
  261.  
  262.         llmContainer.appendChild(llmSection);
  263.  
  264.         addCheckbox(llmContainer, "ttsCheckbox", "Enable AI-TTS", settings.tts);
  265.  
  266.         const ttsSection = createElement("div", {id: "ttsSection", className: "popup-section", style: `${settings.tts ? "" : "display: none"}`});
  267.  
  268.         const ttsApiKeyContainer = createElement("div", {className: "popup-row"});
  269.         ttsApiKeyContainer.appendChild(createElement("label", {htmlFor: "ttsApiKeyInput", textContent: "OpenAI API Key:"}));
  270.  
  271.         const ttsApiKeyFlexContainer = createElement("div", {style: "display: flex; align-items: center;"});
  272.         const ttsApiKeyInput= createElement("input", {type: "password", id: "ttsApiKeyInput", value: settings.ttsApiKey, className: "popup-input"});
  273.         ttsApiKeyFlexContainer.appendChild(ttsApiKeyInput)
  274.         ttsApiKeyContainer.appendChild(ttsApiKeyFlexContainer);
  275.         ttsSection.appendChild(ttsApiKeyContainer);
  276.  
  277.         addSelect(ttsSection, "ttsVoiceSelector", "TTS Voice:", [
  278.             { value: "alloy", text: "alloy" },
  279.             { value: "ash", text: "ash" },
  280.             { value: "ballad", text: "ballad" },
  281.             { value: "coral", text: "coral" },
  282.             { value: "echo", text: "onyx" },
  283.             { value: "fable", text: "onyx" },
  284.             { value: "onyx", text: "onyx" },
  285.             { value: "nova", text: "nova" },
  286.             { value: "sage", text: "sage" },
  287.             { value: "shimmer", text: "onyx" },
  288.             { value: "verse", text: "verse" },
  289.         ], settings.ttsVoice);
  290.  
  291.         llmContainer.appendChild(ttsSection);
  292.  
  293.         columns.appendChild(llmContainer);
  294.  
  295.         const buttonContainer = createElement("div", {style: "display: flex; justify-content: space-between;", className: "popup-row"});
  296.         [
  297.             {id: "resetSettingsBtn", textContent: "Reset", className: "popup-button"},
  298.             {id: "closeSettingsBtn", textContent: "Close", className: "popup-button"}
  299.         ].forEach((prop) => {
  300.             buttonContainer.appendChild(createElement("button", prop));
  301.         });
  302.  
  303.         popupLayout.appendChild(columns)
  304.         popupLayout.appendChild(buttonContainer);
  305.         return popupLayout;
  306.     }
  307.  
  308.     function createDownloadWordsPopup() {
  309.         const popup = createElement("div", {id: "lingqDownloadWordsPopup"});
  310.  
  311.         // drag handle
  312.         const dragHandle = createElement("div", {id: "lingqDownloadWordsDragHandle"});
  313.  
  314.         const dragHandleTitle = createElement("h3", {textContent: "Download Words"});
  315.         dragHandle.appendChild(dragHandleTitle);
  316.  
  317.         const content = createElement("div", {style: `padding: 0 10px;`});
  318.  
  319.         [
  320.             {id: "downloadUnknownLingqsBtn", textContent: "Download Unknown LingQs (words + phrases)", className: "popup-button"},
  321.             {id: "downloadUnknownLingqWordsBtn", textContent: "Download Unknown LingQ Words (1, 2, 3, 4)", className: "popup-button"},
  322.             {id: "downloadUnknownLingqPhrasesBtn", textContent: "Download Unknown LingQ Phrases (1, 2, 3, 4)", className: "popup-button"},
  323.             {id: "downloadKnownLingqsBtn", textContent: "Download Known LingQs (✓)", className: "popup-button"},
  324.             {id: "downloadKnownWordsBtn", textContent: "Download Known Words ", className: "popup-button"}
  325.         ].forEach((prop) => {
  326.             let rowContainer = createElement("div", {className: "popup-row"});
  327.             rowContainer.appendChild(createElement("button", prop))
  328.             content.appendChild(rowContainer);
  329.         });
  330.  
  331.         // Progress Bar Elements
  332.         const progressContainer = createElement("div", {id: "downloadProgressContainer", className: "popup-row"});
  333.         const progressText = createElement("div", {id: "downloadProgressText"});
  334.         const progressBar = createElement("progress", {id: "downloadProgressBar", value: "0", max: "100"});
  335.  
  336.         progressContainer.appendChild(progressText);
  337.         progressContainer.appendChild(progressBar);
  338.         content.appendChild(progressContainer);
  339.  
  340.         const buttonContainer = createElement("div", {style: "display: flex; justify-content: flex-end;", className: "popup-row"});
  341.         const closeButton = createElement("button", {id: "closeDownloadWordsBtn", textContent: "Close", className: "popup-button"});
  342.         buttonContainer.appendChild(closeButton);
  343.         content.appendChild(buttonContainer);
  344.  
  345.         popup.appendChild(dragHandle);
  346.         popup.appendChild(content);
  347.  
  348.         return popup;
  349.     }
  350.  
  351.     function createUI() {
  352.         // Create settings button
  353.         const settingsButton = createElement("button", {
  354.             id: "lingqAddonSettings",
  355.             textContent: "⚙️",
  356.             title: "LingQ Addon Settings",
  357.             className: "nav-button"
  358.         });
  359.  
  360.         // Create lesson complete button
  361.         const completeLessonButton = createElement("button", {
  362.             id: "lingqLessonComplete",
  363.             textContent: "✔",
  364.             title: "Complete Lesson Button",
  365.             className: "nav-button"
  366.         });
  367.  
  368.         // Create download words button
  369.         const downloadWordsButton = createElement("button", {
  370.             id: "lingqDownloadWords",
  371.             textContent: "💾",
  372.             title: "Download Words",
  373.             className: "nav-button"
  374.         });
  375.  
  376.         // Find the #main-nav element
  377.         let mainNav = document.querySelector("#main-nav > nav > div:nth-child(2) > div:nth-child(1)");
  378.  
  379.         if (mainNav) {
  380.             mainNav.appendChild(settingsButton);
  381.             mainNav.appendChild(downloadWordsButton);
  382.             mainNav.appendChild(completeLessonButton);
  383.         } else {
  384.             console.error("#main-nav element not found. Buttons not inserted.");
  385.         }
  386.  
  387.         // Create settings popup
  388.         const settingsPopup = createSettingsPopup();
  389.         document.body.appendChild(settingsPopup);
  390.  
  391.         // Create download words popup
  392.         const downloadWordsPopup = createDownloadWordsPopup();
  393.         document.body.appendChild(downloadWordsPopup);
  394.  
  395.         // Add event listeners
  396.         setupSettingEventListeners(settingsButton, settingsPopup);
  397.         setupDownloadWordsEventListeners(downloadWordsButton, downloadWordsPopup);
  398.         setupEventListeners()
  399.     }
  400.  
  401.     function makeDraggable(element, handle) {
  402.         let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  403.  
  404.         if (handle) {
  405.             handle.onmousedown = dragMouseDown;
  406.         } else {
  407.             element.onmousedown = dragMouseDown;
  408.         }
  409.  
  410.         function dragMouseDown(e) {
  411.             e = e || window.event;
  412.             e.preventDefault();
  413.  
  414.             if (element.style.transform && element.style.transform.includes('translate')) {
  415.                 const rect = element.getBoundingClientRect();
  416.  
  417.                 element.style.transform = 'none';
  418.                 element.style.top = rect.top + 'px';
  419.                 element.style.left = rect.left + 'px';
  420.             }
  421.  
  422.             pos3 = e.clientX;
  423.             pos4 = e.clientY;
  424.             document.onmouseup = closeDragElement;
  425.             document.onmousemove = elementDrag;
  426.         }
  427.  
  428.         function elementDrag(e) {
  429.             e = e || window.event;
  430.             e.preventDefault();
  431.  
  432.             pos1 = pos3 - e.clientX;
  433.             pos2 = pos4 - e.clientY;
  434.             pos3 = e.clientX;
  435.             pos4 = e.clientY;
  436.  
  437.             element.style.top = (element.offsetTop - pos2) + "px";
  438.             element.style.left = (element.offsetLeft - pos1) + "px";
  439.         }
  440.  
  441.         function closeDragElement() {
  442.             document.onmouseup = null;
  443.             document.onmousemove = null;
  444.         }
  445.     }
  446.  
  447.     function setupSettingEventListeners(settingsButton, settingsPopup) {
  448.         function initializePickrs() {
  449.             function setupRGBAPickr(pickerId, textId, settingKey, cssVar) {
  450.                 function saveColorSetting(key, value) {
  451.                     const currentColorMode = document.getElementById("colorModeSelector").value;
  452.                     const prefix = currentColorMode === "dark" ? "dark_" : "white_";
  453.                     storage.set(prefix + key, value);
  454.                 }
  455.  
  456.                 const pickerElement = document.getElementById(pickerId);
  457.                 const textElement = document.getElementById(textId);
  458.  
  459.                 if (!pickerElement || !textElement) return;
  460.  
  461.                 pickerElement.style.backgroundColor = textElement.value;
  462.  
  463.                 const pickr = Pickr.create({
  464.                     el: pickerElement,
  465.                     theme: 'nano',
  466.                     useAsButton: true,
  467.                     default: textElement.value,
  468.                     components: {preview: true, opacity: true, hue: true}
  469.                 });
  470.  
  471.                 pickr.on('change', (color) => {
  472.                     const rgbaColor = color.toRGBA();
  473.  
  474.                     const r = Math.round(rgbaColor[0]);
  475.                     const g = Math.round(rgbaColor[1]);
  476.                     const b = Math.round(rgbaColor[2]);
  477.                     const a = rgbaColor[3];
  478.  
  479.                     const roundedRGBA = `rgba(${r}, ${g}, ${b}, ${a})`;
  480.  
  481.                     textElement.value = roundedRGBA;
  482.                     pickerElement.style.backgroundColor = roundedRGBA;
  483.                     document.documentElement.style.setProperty(cssVar, roundedRGBA);
  484.  
  485.                     saveColorSetting(settingKey, roundedRGBA);
  486.                 });
  487.  
  488.                 textElement.addEventListener('change', function () {
  489.                     const rgbaColor = this.value;
  490.  
  491.                     pickr.setColor(this.value);
  492.                     saveColorSetting(settingKey, rgbaColor);
  493.                     document.documentElement.style.setProperty(cssVar, rgbaColor);
  494.                     pickerElement.style.backgroundColor = rgbaColor;
  495.                 });
  496.  
  497.                 pickr.on('hide', () => {
  498.                     const rgbaColor = pickr.getColor().toRGBA().toString();
  499.                     pickerElement.style.backgroundColor = rgbaColor;
  500.                 });
  501.             }
  502.  
  503.             return new Promise((resolve) => {
  504.                 const pickrCss = createElement('link', {
  505.                     rel: 'stylesheet',
  506.                     href: 'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css'
  507.                 });
  508.                 document.head.appendChild(pickrCss);
  509.  
  510.                 const pickrScript = createElement('script', {
  511.                     src: 'https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js',
  512.                     onload: () => resolve() // Pass function reference directly
  513.                 });
  514.                 document.head.appendChild(pickrScript);
  515.             }).then(() => {
  516.                 setupRGBAPickr('lingqBackgroundPicker', 'lingqBackgroundText', 'lingqBackground', '--lingq_background');
  517.                 setupRGBAPickr('lingqBorderPicker', 'lingqBorderText', 'lingqBorder', '--lingq_border');
  518.                 setupRGBAPickr('lingqBorderLearnedPicker', 'lingqBorderLearnedText', 'lingqBorderLearned', '--lingq_border_learned');
  519.                 setupRGBAPickr('knownBackgroundPicker', 'knownBackgroundText', 'knownBackground', '--known_background');
  520.                 setupRGBAPickr('knownBorderPicker', 'knownBorderText', 'knownBorder', '--known_border');
  521.                 setupRGBAPickr('fontColorPicker', 'fontColorText', 'fontColor', '--font_color');
  522.                 setupRGBAPickr('playingUnderlinePicker', 'playingUnderlineText', 'playingUnderline', '--is_playing_underline');
  523.             });
  524.         }
  525.  
  526.         settingsButton.addEventListener("click", () => {
  527.             settingsPopup.style.display = "block";
  528.             initializePickrs();
  529.  
  530.             const dragHandle = document.getElementById("lingqAddonSettingsDragHandle");
  531.             makeDraggable(settingsPopup, dragHandle);
  532.         });
  533.  
  534.         const styleTypeSelector = document.getElementById("styleTypeSelector");
  535.         styleTypeSelector.addEventListener("change", (event) => {
  536.             const selectedStyleType = event.target.value;
  537.             storage.set("styleType", selectedStyleType);
  538.             document.getElementById("videoSettings").style.display = selectedStyleType === "video" ? "block" : "none";
  539.             document.getElementById("sentenceVideoSettings").style.display = selectedStyleType === "off" ? "block" : "none";
  540.             applyStyles(selectedStyleType, document.getElementById("colorModeSelector").value);
  541.         });
  542.  
  543.         function updateColorInputs(colorSettings) {
  544.             document.getElementById("fontColorText").value = colorSettings.fontColor;
  545.             document.getElementById("lingqBackgroundText").value = colorSettings.lingqBackground;
  546.             document.getElementById("lingqBorderText").value = colorSettings.lingqBorder;
  547.             document.getElementById("lingqBorderLearnedText").value = colorSettings.lingqBorderLearned;
  548.             document.getElementById("knownBackgroundText").value = colorSettings.knownBackground;
  549.             document.getElementById("knownBorderText").value = colorSettings.knownBorder;
  550.             document.getElementById("playingUnderlineText").value = colorSettings.playingUnderline;
  551.  
  552.             const fontColorPicker = document.getElementById("fontColorPicker");
  553.             if (fontColorPicker) fontColorPicker.style.backgroundColor = colorSettings.fontColor;
  554.  
  555.             const playingUnderlinePicker = document.getElementById("playingUnderlinePicker");
  556.             if (playingUnderlinePicker) playingUnderlinePicker.style.backgroundColor = colorSettings.playingUnderline;
  557.         }
  558.  
  559.         function updateColorPickerBackgrounds(colorSettings) {
  560.             const pickerIds = [
  561.                 { id: "lingqBackgroundPicker", color: colorSettings.lingqBackground },
  562.                 { id: "lingqBorderPicker", color: colorSettings.lingqBorder },
  563.                 { id: "lingqBorderLearnedPicker", color: colorSettings.lingqBorderLearned },
  564.                 { id: "knownBackgroundPicker", color: colorSettings.knownBackground },
  565.                 { id: "knownBorderPicker", color: colorSettings.knownBorder },
  566.                 { id: "fontColorPicker", color: colorSettings.fontColor },
  567.                 { id: "playingUnderlinePicker", color: colorSettings.playingUnderline }
  568.             ];
  569.  
  570.             pickerIds.forEach(item => {
  571.                 const picker = document.getElementById(item.id);
  572.                 if (picker) {
  573.                     picker.style.backgroundColor = item.color;
  574.                 }
  575.             });
  576.         }
  577.  
  578.         function updateCssColorVariables(colorSettings) {
  579.             document.documentElement.style.setProperty("--font_color", colorSettings.fontColor);
  580.             document.documentElement.style.setProperty("--lingq_background", colorSettings.lingqBackground);
  581.             document.documentElement.style.setProperty("--lingq_border", colorSettings.lingqBorder);
  582.             document.documentElement.style.setProperty("--lingq_border_learned", colorSettings.lingqBorderLearned);
  583.             document.documentElement.style.setProperty("--known_background", colorSettings.knownBackground);
  584.             document.documentElement.style.setProperty("--known_border", colorSettings.knownBorder);
  585.             document.documentElement.style.setProperty("--is_playing_underline", colorSettings.playingUnderline);
  586.         }
  587.  
  588.         function updateColorMode(event) {
  589.             event.stopPropagation();
  590.  
  591.             const selectedColorMode = this.value;
  592.             const settingsPopup = document.getElementById("lingqAddonSettingsPopup");
  593.             settingsPopup.style.backgroundColor = selectedColorMode === "dark" ? "#2a2c2e" : "#ffffff";
  594.  
  595.             storage.set("colorMode", selectedColorMode);
  596.  
  597.             const colorSettings = getColorSettings(selectedColorMode);
  598.  
  599.             updateColorInputs(colorSettings);
  600.  
  601.             document.documentElement.style.setProperty(
  602.                 "--background-color",
  603.                 selectedColorMode === "dark" ? "#2a2c2e" : "#ffffff"
  604.             );
  605.             updateCssColorVariables(colorSettings);
  606.  
  607.             applyStyles(document.getElementById("styleTypeSelector").value, selectedColorMode);
  608.  
  609.             updateColorPickerBackgrounds(colorSettings);
  610.         }
  611.  
  612.         document.getElementById("colorModeSelector").addEventListener("change", updateColorMode);
  613.  
  614.         function setupSlider(sliderId, valueId, settingKey, unit, cssVar, valueTransform) {
  615.             const slider = document.getElementById(sliderId);
  616.             const valueDisplay = document.getElementById(valueId);
  617.  
  618.             slider.addEventListener("input", function () {
  619.                 const value = parseFloat(this.value);
  620.                 const transformedValue = valueTransform(value);
  621.  
  622.                 valueDisplay.textContent = transformedValue.toString().replace(unit, '');
  623.                 storage.set(settingKey, value);
  624.                 document.documentElement.style.setProperty(cssVar, transformedValue);
  625.             });
  626.         }
  627.  
  628.         setupSlider("fontSizeSlider", "fontSizeValue", "fontSize", "rem", "--font_size", (val) => `${val}rem`);
  629.         setupSlider("lineHeightSlider", "lineHeightValue", "lineHeight", "", "--line_height", (val) => val);
  630.         setupSlider("heightBigSlider", "heightBigValue", "heightBig", "px", "--height_big", (val) => `${val}px`);
  631.         setupSlider("sentenceHeightSlider", "sentenceHeightValue", "sentenceHeight", "px", "--sentence_height", (val) => `${val}px`);
  632.  
  633.         const autoFinishingCheckbox = document.getElementById("autoFinishingCheckbox");
  634.         autoFinishingCheckbox.addEventListener('change', (event) => {
  635.             const checked = event.target.checked;
  636.             storage.set("autoFinishing", checked);
  637.         });
  638.  
  639.         const chatWidgetCheckbox = document.getElementById("chatWidgetCheckbox");
  640.         chatWidgetCheckbox.addEventListener('change', (event) => {
  641.             const checked = event.target.checked;
  642.             document.getElementById("llmSection").style.display = checked ? "block" : "none";
  643.             storage.set("chatWidget", checked);
  644.         });
  645.  
  646.         const llmProviderSelector = document.getElementById("llmProviderSelector");
  647.         llmProviderSelector.addEventListener("change", (event) => {
  648.             const selectedProvider = event.target.value;
  649.             storage.set("llmProvider", selectedProvider);
  650.         });
  651.  
  652.         const llmApiKeyInput = document.getElementById("llmApiKeyInput");
  653.         llmApiKeyInput.addEventListener("change", (event) => {
  654.             const apiKey = event.target.value;
  655.             storage.set("llmApiKey", apiKey);
  656.         });
  657.  
  658.         const askSelectedCheckbox = document.getElementById("askSelectedCheckbox");
  659.         askSelectedCheckbox.addEventListener('change', (event) => {
  660.             const checked = event.target.checked;
  661.             storage.set("askSelected", checked);
  662.         });
  663.  
  664.         const ttsCheckbox = document.getElementById("ttsCheckbox");
  665.         ttsCheckbox.addEventListener('change', (event) => {
  666.             const checked = event.target.checked;
  667.             document.getElementById("ttsSection").style.display = checked ? "block" : "none";
  668.             storage.set("tts", checked);
  669.         });
  670.  
  671.         const ttsApiKeyInput = document.getElementById("ttsApiKeyInput");
  672.         ttsApiKeyInput.addEventListener("change", (event) => {
  673.             const apiKey = event.target.value;
  674.             storage.set("ttsApiKey", apiKey);
  675.         });
  676.  
  677.         const ttsVoiceSelector = document.getElementById("ttsVoiceSelector");
  678.         ttsVoiceSelector.addEventListener("change", (event) => {
  679.             const selectedVoice = event.target.value;
  680.             storage.set("ttsVoice", selectedVoice);
  681.         });
  682.  
  683.         document.getElementById("closeSettingsBtn").addEventListener("click", () => {
  684.             settingsPopup.style.display = "none";
  685.         });
  686.  
  687.         function resetSettings() {
  688.             if (!confirm("Reset all settings to default?")) return;
  689.  
  690.             const currentColorMode = document.getElementById("colorModeSelector").value;
  691.             const defaultColorSettings = currentColorMode === "dark" ? defaults.darkColors : defaults.whiteColors;
  692.  
  693.             document.getElementById("styleTypeSelector").value = defaults.styleType;
  694.             document.getElementById("fontSizeSlider").value = defaults.fontSize;
  695.             document.getElementById("fontSizeValue").textContent = defaults.fontSize;
  696.             document.getElementById("lineHeightSlider").value = defaults.lineHeight;
  697.             document.getElementById("lineHeightValue").textContent = defaults.lineHeight;
  698.             document.getElementById("heightBigSlider").value = defaults.heightBig;
  699.             document.getElementById("heightBigValue").textContent = defaults.heightBig;
  700.             document.getElementById("sentenceHeightSlider").value = defaults.sentenceHeight;
  701.             document.getElementById("sentenceHeightValue").textContent = defaults.sentenceHeight;
  702.  
  703.             updateColorInputs(defaultColorSettings);
  704.             updateColorPickerBackgrounds(defaultColorSettings);
  705.  
  706.             applyStyles(defaults.styleType, currentColorMode);
  707.  
  708.             document.getElementById("videoSettings").style.display = defaults.styleType === "video" ? "block" : "none";
  709.             document.getElementById("sentenceVideoSettings").style.display = defaults.styleType === "off" ? "block" : "none";
  710.  
  711.             document.documentElement.style.setProperty("--font_size", `${defaults.fontSize}rem`);
  712.             document.documentElement.style.setProperty("--line_height", defaults.lineHeight);
  713.             document.documentElement.style.setProperty("--height_big", `${defaults.heightBig}px`);
  714.             document.documentElement.style.setProperty("--sentence_height", `${defaults.sentenceHeight}px`);
  715.             updateCssColorVariables(defaultColorSettings);
  716.  
  717.             document.getElementById("autoFinishingCheckbox").checked = defaults.autoFinishing;
  718.  
  719.             document.getElementById("chatWidgetCheckbox").value = defaults.chatWidget;
  720.             document.getElementById("llmProviderSelector").value = defaults.llmProvider;
  721.             document.getElementById("llmApiKeyInput").value = defaults.llmApiKey;
  722.             document.getElementById("askSelectedCheckbox").value = defaults.askSelected;
  723.  
  724.             document.getElementById("ttsCheckbox").value = defaults.tts;
  725.             document.getElementById("ttsApiKeyInput").value = defaults.ttsApiKey;
  726.             document.getElementById("ttsVoiceSelector").value = defaults.ttsVoice;
  727.  
  728.             for (const [key, value] of Object.entries(defaults)) {
  729.                 storage.set(key, value);
  730.             }
  731.  
  732.             const prefix = currentColorMode === "dark" ? "dark_" : "white_";
  733.             for (const [key, value] of Object.entries(defaultColorSettings)) {
  734.                 storage.set(prefix + key, value);
  735.             }
  736.         }
  737.  
  738.         document.getElementById("resetSettingsBtn").addEventListener("click", resetSettings);
  739.     }
  740.  
  741.     async function setupDownloadWordsEventListeners(downloadWordsButton, downloadWordsPopup) {
  742.         async function getAllWords(baseUrl, pageSize, apiType, additionalParams="", progressCallback = () => {}) {
  743.             let allResults = [];
  744.             let nextUrl = `${baseUrl}?page_size=${pageSize}&page=1${additionalParams}`;
  745.             let currentPage = 0;
  746.             let totalPages = 0;
  747.             let isFirstCall = true;
  748.  
  749.             while (nextUrl) {
  750.                 try {
  751.                     const response = await fetch(nextUrl);
  752.  
  753.                     if (!response.ok) {
  754.                         throw new Error(`HTTP error! Status: ${response.status}`);
  755.                     }
  756.  
  757.                     const data = await response.json();
  758.                     currentPage++;
  759.  
  760.                     if (isFirstCall) {
  761.                         isFirstCall = false;
  762.                         totalPages = Math.ceil(data.count / pageSize);
  763.                         console.log(`total pages: ${totalPages}`);
  764.                     }
  765.  
  766.                     progressCallback(currentPage, totalPages, false, null, data.count);
  767.  
  768.                     if (apiType === 'lingq') {
  769.                         const filteredResults = data.results.map(item => ({
  770.                             pk: item.pk,
  771.                             term: item.term,
  772.                             fragment: item.fragment,
  773.                             status: item.status,
  774.                             hint: item.hints && item.hints[0] ? item.hints[0].text : null
  775.                         }));
  776.                         allResults = allResults.concat(filteredResults);
  777.                     } else if (apiType === 'known') {
  778.                         allResults = allResults.concat(data.results);
  779.                     }
  780.  
  781.                     nextUrl = data.next;
  782.  
  783.                     if (nextUrl) {
  784.                         console.log("Fetched page. Next URL:", nextUrl);
  785.                     } else {
  786.                         console.log("Finished fetching all pages");
  787.                         progressCallback(currentPage, totalPages, true, null, data.count);
  788.                     }
  789.                 } catch (error) {
  790.                     console.error('Error fetching data:', error);
  791.                     progressCallback(currentPage, totalPages, true, error, 0);
  792.                     break;
  793.                 }
  794.             }
  795.  
  796.             return allResults;
  797.         }
  798.  
  799.         async function downloadWords(baseUrl, pageSize, fileName, apiType, additionalParams="") {
  800.             const progressContainer = document.getElementById("downloadProgressContainer");
  801.             const progressBar = document.getElementById("downloadProgressBar");
  802.             const progressText = document.getElementById("downloadProgressText");
  803.  
  804.             if (progressContainer && progressBar && progressText) {
  805.                 progressBar.value = 0;
  806.                 progressBar.max = 100;
  807.                 progressText.textContent = "Initializing download...";
  808.                 progressContainer.style.display = "block";
  809.             }
  810.  
  811.             const progressCallback = (currentPage, totalPages,_isDone, error_isErrorEncountered, totalCount) => {
  812.                 if (progressBar && progressText) {
  813.                     if (error_isErrorEncountered) {
  814.                         progressText.textContent = `Error fetching page ${currentPage}: ${error_isErrorEncountered.message}`;
  815.                         progressBar.style.backgroundColor = 'red';
  816.                         return;
  817.                     }
  818.  
  819.                     progressBar.max = totalPages;
  820.                     progressBar.value = currentPage;
  821.                     progressText.textContent = `Fetching data... Page ${currentPage} of ${totalPages} (Total items: ${totalCount || 'N/A'})`;
  822.  
  823.                     if (_isDone) {
  824.                         progressText.textContent = error_isErrorEncountered ? `Export failed: ${error_isErrorEncountered.message}` : `${totalCount} items exported`;
  825.                     }
  826.                 }
  827.             };
  828.  
  829.             try {
  830.                 const allWords = await getAllWords(baseUrl, pageSize, apiType, additionalParams, progressCallback);
  831.  
  832.                 if (!allWords || allWords.length === 0) {
  833.                     console.warn("No words found or an error occurred.");
  834.                     return;
  835.                 }
  836.  
  837.                 let blob;
  838.                 const fileType = fileName.split(".")[1];
  839.  
  840.                 if (fileType === 'json') {
  841.                     const dataString = JSON.stringify(allWords, null, 2);
  842.                     blob = new Blob([dataString], { type: 'application/json' });
  843.                 } else if (fileType === 'csv') {
  844.                     const headers = Object.keys(allWords[0]).join(',');
  845.                     const rows = allWords.map(item => {
  846.                         return Object.values(item).map(value => {
  847.                             if (typeof value === 'string') {
  848.                                 return `"${value.replace(/"/g, '""')}"`;
  849.                             }
  850.                             return value;
  851.                         }).join(',');
  852.                     }).join('\n');
  853.  
  854.                     const dataString = headers + '\n' + rows;
  855.                     blob = new Blob([dataString], { type: 'text/csv' });
  856.                 }
  857.  
  858.                 downloadBlob(blob, fileName);
  859.                 console.log("Export completed.");
  860.             } catch (error) {
  861.                 console.error('Error:', error);
  862.             }
  863.         }
  864.  
  865.         function downloadBlob(blob, fileName) {
  866.             const url = URL.createObjectURL(blob);
  867.             const a = createElement("a", {href: url, download: fileName});
  868.             document.body.appendChild(a);
  869.             a.click();
  870.             document.body.removeChild(a);
  871.             URL.revokeObjectURL(url);
  872.         }
  873.  
  874.         downloadWordsButton.addEventListener("click", () => {
  875.             downloadWordsPopup.style.display = "block";
  876.  
  877.             const progressContainer = document.getElementById("downloadProgressContainer");
  878.             if (progressContainer) progressContainer.style.display = "none";
  879.  
  880.             const dragHandle = document.getElementById("lingqDownloadWordsDragHandle");
  881.             if (dragHandle) {
  882.                 makeDraggable(downloadWordsPopup, dragHandle);
  883.             }
  884.         });
  885.  
  886.         const languageCode = await getLanguageCode();
  887.         const pageSize = 1000;
  888.  
  889.         const setButtonsDisabled = (disabled) => {
  890.             const buttons = downloadWordsPopup.querySelectorAll('.popup-button');
  891.             buttons.forEach(button => {
  892.                 button.disabled = disabled;
  893.             });
  894.         };
  895.  
  896.         const handleDownloadButtonClick = async (url, filename, type, params = '') => {
  897.             setButtonsDisabled(true);
  898.             try {
  899.                 await downloadWords(url, pageSize, filename, type, params);
  900.             } finally {
  901.                 setButtonsDisabled(false);
  902.             }
  903.         };
  904.  
  905.         // Download Unknown LingQs button
  906.         document.getElementById("downloadUnknownLingqsBtn").addEventListener("click", async () => {
  907.             await handleDownloadButtonClick(`https://www.lingq.com/api/v3/${languageCode}/cards/`, "unknown_lingqs.csv", 'lingq', '&status=0&status=1&status=2&status=3');
  908.         });
  909.  
  910.         // Download Unknown LingQ Words button
  911.         document.getElementById("downloadUnknownLingqWordsBtn").addEventListener("click", async () => {
  912.             await handleDownloadButtonClick(`https://www.lingq.com/api/v3/${languageCode}/cards/`, "unknown_lingq_words.csv", 'lingq', '&status=0&status=1&status=2&status=3&phrases=false');
  913.         });
  914.  
  915.         // Download Unknown LingQ phrases button
  916.         document.getElementById("downloadUnknownLingqPhrasesBtn").addEventListener("click", async () => {
  917.             await handleDownloadButtonClick(`https://www.lingq.com/api/v3/${languageCode}/cards/`, "unknown_lingq_phrases.csv", 'lingq', '&status=0&status=1&status=2&status=3&phrases=True');
  918.         });
  919.  
  920.         // Download Known LingQs button
  921.         document.getElementById("downloadKnownLingqsBtn").addEventListener("click", async () => {
  922.             await handleDownloadButtonClick(`https://www.lingq.com/api/v3/${languageCode}/cards/`, "known_lingqs.csv", 'lingq', '&status=4');
  923.         });
  924.  
  925.         // Download known words button
  926.         document.getElementById("downloadKnownWordsBtn").addEventListener("click", async () => {
  927.             await handleDownloadButtonClick(`https://www.lingq.com/api/v2/${languageCode}/known-words/`, "known_words.csv", "known");
  928.         });
  929.  
  930.         // Close button
  931.         document.getElementById("closeDownloadWordsBtn").addEventListener("click", () => {
  932.             downloadWordsPopup.style.display = "none";
  933.         });
  934.     }
  935.  
  936.     function setupEventListeners() {
  937.         document.getElementById("lingqLessonComplete").addEventListener("click", finishLesson);
  938.     }
  939.  
  940.     function applyStyles(styleType, colorMode) {
  941.         const colorSettings = getColorSettings(colorMode);
  942.  
  943.         let baseCSS = generateBaseCSS(colorSettings, colorMode);
  944.         let layoutCSS = generateLayoutCSS();
  945.         let specificCSS = "";
  946.  
  947.         switch (colorMode) {
  948.             case "dark":
  949.                 clickElement(".reader-themes-component > button:nth-child(5)");
  950.                 break;
  951.             case "white":
  952.                 clickElement(".reader-themes-component > button:nth-child(1)");
  953.                 break;
  954.         }
  955.  
  956.         switch (styleType) {
  957.             case "video":
  958.                 specificCSS = generateVideoCSS();
  959.                 break;
  960.             case "video2":
  961.                 specificCSS = generateVideo2CSS();
  962.                 break;
  963.             case "audio":
  964.                 specificCSS = generateAudioCSS();
  965.                 break;
  966.             case "off":
  967.                 specificCSS = generateOffModeCSS();
  968.                 layoutCSS = "";
  969.                 break;
  970.         }
  971.  
  972.         baseCSS += layoutCSS;
  973.         baseCSS += specificCSS;
  974.  
  975.         if (styleElement) {
  976.             styleElement.remove();
  977.             styleElement = null;
  978.         }
  979.  
  980.         styleElement = createElement("style", {textContent: baseCSS});
  981.         document.querySelector("head").appendChild(styleElement);
  982.     }
  983.  
  984.     function generateBaseCSS(colorSettings, colorMode) {
  985.         return`
  986.         :root {
  987.             --font_size: ${settings.fontSize}rem;
  988.             --line_height: ${settings.lineHeight};
  989.  
  990.             --font_color: ${colorSettings.fontColor};
  991.             --lingq_background: ${colorSettings.lingqBackground};
  992.             --lingq_border: ${colorSettings.lingqBorder};
  993.             --lingq_border_learned: ${colorSettings.lingqBorderLearned};
  994.             --known_background: ${colorSettings.knownBackground};
  995.             --known_border: ${colorSettings.knownBorder};
  996.             --is_playing_underline: ${colorSettings.playingUnderline};
  997.  
  998.             --background-color: ${colorMode === "dark" ? "#2a2c2e" : "#ffffff"}
  999.         }
  1000.         
  1001.         /*Color picker*/
  1002.  
  1003.         .color-picker {
  1004.             width: 30px;
  1005.             height: 15px;
  1006.             border-radius: 4px;
  1007.             cursor: pointer;
  1008.         }
  1009.  
  1010.         .pcr-app {
  1011.             z-index: 10001 !important;
  1012.         }
  1013.  
  1014.         .pcr-app .pcr-interaction .pcr-result {
  1015.             color: var(--font_color) !important;
  1016.         }
  1017.  
  1018.         /*Popup settings*/
  1019.  
  1020.         #lingqAddonSettings {
  1021.             color: var(--font_color);
  1022.         }
  1023.  
  1024.         #lingqAddonSettingsPopup, #lingqDownloadWordsPopup {
  1025.             position: fixed;
  1026.             top: 40%;
  1027.             left: 40%;
  1028.             transform: translate(-40%, -40%);
  1029.             background-color: var(--background-color, #2a2c2e);
  1030.             color: var(--font_color, #e0e0e0);
  1031.             border: 1px solid rgb(125 125 125 / 30%);
  1032.             border-radius: 8px;
  1033.             box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
  1034.             z-index: 10000;
  1035.             display: none;
  1036.             max-height: 90vh;
  1037.             overflow-y: auto;
  1038.         }
  1039.  
  1040.         #lingqAddonSettingsDragHandle, #lingqDownloadWordsDragHandle {
  1041.             cursor: move;
  1042.             background-color: rgba(128, 128, 128, 0.2);
  1043.             padding: 8px;
  1044.             border-radius: 8px 8px 0 0;
  1045.             text-align: center;
  1046.             user-select: none;
  1047.         }
  1048.  
  1049.         .popup-row {
  1050.             margin: 5px 0;
  1051.         }
  1052.  
  1053.         .nav-button {
  1054.             background: none;
  1055.             border: none;
  1056.             cursor: pointer;
  1057.             font-size: 1.2rem;
  1058.             margin-left: 10px;
  1059.             padding: 5px;
  1060.         }
  1061.  
  1062.         .popup-button {
  1063.             padding: 5px 10px;
  1064.             border: 1px solid rgb(125, 125, 125, 50%);
  1065.             border-radius: 5px;
  1066.             margin: 5px 0;
  1067.             
  1068.         }
  1069.  
  1070.         .popup-section {
  1071.             border: 1px solid rgb(125 125 125 / 50%);
  1072.             padding: 5px 10px;
  1073.             border-radius: 5px;
  1074.             margin: 10px 0;
  1075.         }
  1076.  
  1077.         .popup-input {
  1078.             flex-grow: 1;
  1079.             border: 1px solid rgb(125 125 125 / 50%);
  1080.             border-radius: 5px;
  1081.         }
  1082.  
  1083.         #downloadProgressContainer {
  1084.             display: none;
  1085.         }
  1086.  
  1087.         #downloadProgressText {
  1088.             text-align: center;
  1089.             margin-bottom: 5px;
  1090.             font-size: 0.9em;
  1091.         }
  1092.  
  1093.         #downloadProgressBar {
  1094.             width: 100%;
  1095.             height: 20px;
  1096.         }
  1097.  
  1098.         progress[value]::-webkit-progress-bar {
  1099.             border-radius: 5px;
  1100.         }
  1101.  
  1102.         progress[value]::-webkit-progress-value {
  1103.             border-radius: 5px;
  1104.         }
  1105.         
  1106.         select {
  1107.             width: 100%; 
  1108.             margin-top: 5px; 
  1109.             padding: 5px; 
  1110.             background: rgb(125 125 125 / 10%) !important;
  1111.         }
  1112.  
  1113.         /*Chat*/
  1114.  
  1115.         #chat-container {
  1116.             margin-bottom:10px;
  1117.             border: 1px solid rgb(125 125 125 / 35%);
  1118.             border-radius: 5px;
  1119.             height: 180px;
  1120.             overflow-y: auto;
  1121.             resize: vertical;
  1122.             padding: 5px !important;
  1123.         }
  1124.  
  1125.         .input-container {
  1126.             display: flex;
  1127.             margin-bottom:10px;
  1128.         }
  1129.  
  1130.         #user-input {
  1131.             flex-grow: 1;
  1132.             padding: 5px 10px;
  1133.             margin-right: 5px;
  1134.             border: 1px solid rgb(125 125 125 / 35%);
  1135.             border-radius: 5px;
  1136.             font-size: 0.85rem;
  1137.         }
  1138.  
  1139.         #send-button {
  1140.             padding: 5px 10px;
  1141.             border: 1px solid rgb(125 125 125 / 35%);
  1142.             border-radius: 5px;
  1143.         }
  1144.  
  1145.         .user-message, 
  1146.         .bot-message {
  1147.             padding: 3px 7px;
  1148.             margin: 3px 3px 8px 3px !important;
  1149.             border-radius: 8px;
  1150.             font-size: 0.85rem;
  1151.         }
  1152.  
  1153.         .user-message {
  1154.             background-color: rgb(125 125 125 / 5%);
  1155.         }
  1156.  
  1157.         .bot-message {
  1158.             background-color: rgb(125 125 125 / 10%);
  1159.         }
  1160.         
  1161.         #playAudio {
  1162.             cursor: pointer;
  1163.             font-size: 1.5rem;
  1164.             padding: 5px;
  1165.         }
  1166.  
  1167.         /*font settings*/
  1168.  
  1169.         .reader-container {
  1170.             line-height: var(--line_height) !important;
  1171.             font-size: var(--font_size) !important;
  1172.         }
  1173.  
  1174.         .sentence-text-head {
  1175.             min-height: 4.5rem !important;
  1176.         }
  1177.  
  1178.         .reader-container p {
  1179.             margin-top: 0 !important;
  1180.         }
  1181.  
  1182.         .reader-container p span.sentence-item,
  1183.         .reader-container p .sentence {
  1184.             color: var(--font_color) !important;
  1185.         }
  1186.  
  1187.         .sentence.is-playing,
  1188.         .sentence.is-playing span {
  1189.             text-underline-offset: .2em !important;
  1190.             text-decoration-color: var(--is_playing_underline) !important;
  1191.         }
  1192.  
  1193.         /*highlightings*/
  1194.  
  1195.         .phrase-item {
  1196.             padding: 0 !important;
  1197.         }
  1198.  
  1199.         .phrase-item:not(.phrase-item-status--4, .phrase-item-status--4x2)) {
  1200.             background-color: var(--lingq_background) !important;
  1201.         }
  1202.  
  1203.         .phrase-item.phrase-item-status--4,
  1204.         .phrase-item.phrase-item-status--4x2 {
  1205.             background-color: rgba(0, 0, 0, 0) !important;
  1206.         }
  1207.  
  1208.         .phrase-cluster:not(:has(.phrase-item-status--4, .phrase-item-status--4x2)) {
  1209.             border: 1px solid var(--lingq_border) !important;
  1210.             border-radius: .25rem;
  1211.         }
  1212.  
  1213.         .phrase-cluster:has(.phrase-item-status--4, .phrase-item-status--4x2) {
  1214.             border: 1px solid var(--lingq_border_learned) !important;
  1215.             border-radius: .25rem;
  1216.         }
  1217.  
  1218.         .reader-container .sentence .lingq-word:not(.is-learned) {
  1219.             border: 1px solid var(--lingq_border) !important;
  1220.             background-color: var(--lingq_background) !important;
  1221.         }
  1222.  
  1223.         .reader-container .sentence .lingq-word.is-learned {
  1224.             border: 1px solid var(--lingq_border_learned) !important;
  1225.         }
  1226.  
  1227.         .reader-container .sentence .blue-word {
  1228.             border: 1px solid var(--known_border) !important;
  1229.             background-color: var(--known_background) !important;;
  1230.         }
  1231.  
  1232.         .phrase-cluster:hover,
  1233.         .phrase-created:hover {
  1234.             padding: 0 !important;
  1235.         }
  1236.  
  1237.         .phrase-cluster:hover .phrase-item,
  1238.         .phrase-created .phrase-item {
  1239.             padding: 0 !important;
  1240.         }
  1241.  
  1242.         .reader-container .sentence .selected-text {
  1243.             padding: 0 !important;
  1244.         }
  1245.         `;
  1246.     }
  1247.  
  1248.     function generateLayoutCSS() {
  1249.         return `
  1250.         :root {
  1251.             --article_height: calc(var(--app-height) - var(--height_big) - 10px);
  1252.             --grid-layout: var(--article_height) calc(var(--height_big) - 80px) 90px;
  1253.         }
  1254.  
  1255.         /*header settings*/
  1256.  
  1257.         .main-wrapper {
  1258.             padding: 0 !important;
  1259.         }
  1260.  
  1261.         #main-nav {
  1262.             z-index: 1;
  1263.         }
  1264.  
  1265.         #main-nav > nav {
  1266.             height: 50px;
  1267.         }
  1268.  
  1269.         #main-nav > nav > div:nth-child(1) {
  1270.             height: 50px;
  1271.         }
  1272.  
  1273.         .main-header {
  1274.             pointer-events: none;
  1275.         }
  1276.  
  1277.         .main-header > div {
  1278.             grid-template-columns: 1fr 150px !important;
  1279.             padding-left: 400px !important;
  1280.         }
  1281.  
  1282.         .main-header section:nth-child(1) {
  1283.             display: none;
  1284.         }
  1285.  
  1286.         .main-header section {
  1287.             pointer-events: auto;
  1288.             z-index: 1;
  1289.         }
  1290.  
  1291.         .main-header svg {
  1292.             width: 20px !important;
  1293.             height: 20px !important;
  1294.         }
  1295.  
  1296.         .main-header section .dropdown-content {
  1297.             position: fixed;
  1298.         }
  1299.  
  1300.         .lesson-progress-section {
  1301.             grid-template-rows: unset !important;
  1302.             grid-template-columns: unset !important;
  1303.             grid-column: 1 !important;
  1304.             pointer-events: auto;
  1305.         }
  1306.  
  1307.         .lesson-progress-section .rc-slider{
  1308.             grid-row: unset !important;
  1309.             grid-column: unset !important;
  1310.             width: 50% !important;
  1311.         }
  1312.  
  1313.         /*layout*/
  1314.  
  1315.         #lesson-reader {
  1316.             grid-template-rows: var(--grid-layout);
  1317.             overflow-y: hidden;
  1318.             height: auto !important;
  1319.         }
  1320.  
  1321.         .sentence-text {
  1322.             height: calc(var(--article_height) - 70px) !important;
  1323.         }
  1324.  
  1325.         .reader-container-wrapper {
  1326.             height: 100% !important;
  1327.         }
  1328.  
  1329.         .widget-area {
  1330.             padding-top: 50px !important;
  1331.             height: 100% !important;
  1332.         }
  1333.  
  1334.         .main-footer {
  1335.             grid-area: 3 / 1 / 3 / 1 !important;
  1336.             align-self: end;
  1337.             margin: 10px 0;
  1338.         }
  1339.  
  1340.         .main-content {
  1341.             grid-template-rows: 45px 1fr !important;
  1342.             overflow: hidden;
  1343.             align-items: anchor-center;
  1344.         }
  1345.  
  1346.         /*make prev/next page buttons compact*/
  1347.  
  1348.         .reader-component {
  1349.             grid-template-columns: 0rem 1fr 0rem !important;
  1350.             align-items: baseline;
  1351.             margin-top: 10px;
  1352.         }
  1353.  
  1354.         .reader-component > div > a.button > span {
  1355.             width: 0.5rem !important;
  1356.         }
  1357.  
  1358.         .reader-component > div > a.button > span > svg {
  1359.             width: 15px !important;
  1360.             height: 15px !important;
  1361.         }
  1362.  
  1363.         .loadedContent {
  1364.             padding: 0 0 5px 15px !important;;
  1365.         }
  1366.  
  1367.         /*font settings*/
  1368.  
  1369.         .reader-container {
  1370.             margin: 0 !important;
  1371.             float: left !important;
  1372.             columns: unset !important;
  1373.             overflow-y: scroll !important;
  1374.             max-width: unset !important;
  1375.         }
  1376.  
  1377.         /*video viewer*/
  1378.  
  1379.         .video-player {
  1380.             display: flex !important;
  1381.             justify-content: flex-end !important;
  1382.             align-items: flex-start !important;
  1383.             pointer-events: none;
  1384.             z-index: 38 !important;
  1385.         }
  1386.  
  1387.         .video-player > .modal-background {
  1388.             background-color: rgb(26 28 30 / 0%) !important;
  1389.         }
  1390.  
  1391.         .video-player > .modal-content {
  1392.             max-width: var(--width_big) !important;
  1393.             margin: var(--video_margin) !important;
  1394.             border-radius: 0.75rem !important;
  1395.         }
  1396.  
  1397.         .video-player .modal-section {
  1398.             display: none !important;
  1399.         }
  1400.  
  1401.         .video-wrapper {
  1402.             height: var(--height_big) !important;
  1403.             overflow: hidden;
  1404.             pointer-events: auto;
  1405.         }
  1406.  
  1407.         /*video controller*/
  1408.  
  1409.         .rc-slider-rail {
  1410.             background-color: dimgrey !important;
  1411.         }
  1412.  
  1413.         .rc-slider-step {
  1414.             margin-top: -8px !important;
  1415.             height: 1.2rem !important;
  1416.         }
  1417.  
  1418.         .lingq-audio-player {
  1419.             margin-left: 10px;
  1420.         }
  1421.  
  1422.         .section--player.is-expanded {
  1423.             padding: 5px 0px !important;
  1424.             width: 390px !important;
  1425.             margin-left: 10px !important;
  1426.         }
  1427.  
  1428.         .sentence-mode-button {
  1429.             margin: 0 0 10px 0;
  1430.         }
  1431.  
  1432.         .player-wrapper {
  1433.             grid-template-columns: 1fr 40px !important;
  1434.             padding: 0 !important;
  1435.         }
  1436.  
  1437.         .audio-player {
  1438.             padding: 0 0.5rem !important;
  1439.         }
  1440.         `;
  1441.     }
  1442.  
  1443.     function generateVideoCSS() {
  1444.         return `
  1445.         :root {
  1446.             --width_big: calc(100vw - 424px - 10px);
  1447.             --height_big: ${settings.heightBig}px;
  1448.             --video_margin: 0 0 10px 10px !important;
  1449.         }
  1450.  
  1451.         .main-content {
  1452.             grid-area: 1 / 1 / 2 / 2 !important;
  1453.         }
  1454.  
  1455.         .widget-area {
  1456.             grid-area: 1 / 2 / 3 / 2 !important;
  1457.         }
  1458.  
  1459.         .main-footer {
  1460.             grid-area: 3 / 2 / 4 / 3 !important;
  1461.             align-self: end;
  1462.         }
  1463.         `;
  1464.     }
  1465.  
  1466.     function generateVideo2CSS() {
  1467.         return `
  1468.         :root {
  1469.             --width_big: calc(50vw - 217px);
  1470.             --height_big: calc(100vh - 80px);
  1471.  
  1472.             --grid-layout: var(--article_height) 90px;
  1473.             --video_margin: 0 10px 10px 10px !important;
  1474.             --article_height: calc(var(--app-height) - 85px);
  1475.         }
  1476.  
  1477.         .page.reader-page.has-widget-fixed:not(.is-edit-mode):not(.workspace-sentence-reviewer) {
  1478.             grid-template-columns: 1fr 424px 1fr;
  1479.         }
  1480.  
  1481.         .main-content {
  1482.             grid-area: 1 / 1 / 2 / 2 !important;
  1483.         }
  1484.  
  1485.         .widget-area {
  1486.             grid-area: 1 / 2 / 2 / 3 !important;
  1487.         }
  1488.  
  1489.         .main-footer {
  1490.             grid-area: 2 / 2 / 3 / 3 !important;
  1491.             align-self: end;
  1492.         }
  1493.  
  1494.         .modal-container .modls {
  1495.             align-items: end;
  1496.         }
  1497.         `;
  1498.     }
  1499.  
  1500.     function generateAudioCSS() {
  1501.         return `
  1502.         :root {
  1503.             --height_big: 60px;
  1504.         }
  1505.  
  1506.         .main-content {
  1507.             grid-area: 1 / 1 / 2 / 2 !important;
  1508.         }
  1509.  
  1510.         .widget-area {
  1511.             grid-area: 1 / 2 / 2 / 2 !important;
  1512.         }
  1513.         `;
  1514.     }
  1515.  
  1516.     function generateOffModeCSS() {
  1517.         return `
  1518.         :root {
  1519.             --width_small: 440px;
  1520.             --height_small: 260px;
  1521.             --sentence_height: ${settings.sentenceHeight}px;
  1522.             --right_pos: 0.5%;
  1523.             --bottom_pos: 5.5%;
  1524.         }
  1525.  
  1526.         /*video player*/
  1527.  
  1528.         .video-player.is-minimized .video-wrapper,
  1529.         .sent-video-player.is-minimized .video-wrapper {
  1530.             height: var(--height_small);
  1531.             width: var(--width_small);
  1532.             overflow: auto;
  1533.             resize: both;
  1534.         }
  1535.  
  1536.         .video-player.is-minimized .modal-content,
  1537.         .sent-video-player.is-minimized .modal-content {
  1538.             max-width: calc(var(--width_small)* 3);
  1539.             margin-bottom: 0;
  1540.         }
  1541.  
  1542.         .video-player.is-minimized,
  1543.         .sent-video-player.is-minimized {
  1544.             left: auto;
  1545.             top: auto;
  1546.             right: var(--right_pos);
  1547.             bottom: var(--bottom_pos);
  1548.             z-index: 99999999;
  1549.             overflow: visible
  1550.         }
  1551.  
  1552.         /*sentence mode video player*/
  1553.         .loadedContent:has(#sentence-video-player-portal) {
  1554.             grid-template-rows: var(--sentence_height) auto auto 1fr !important;
  1555.         }
  1556.  
  1557.         #sentence-video-player-portal .video-section {
  1558.             width: 100% !important;
  1559.             max-width: none !important;
  1560.         }
  1561.  
  1562.         #sentence-video-player-portal .video-wrapper {
  1563.             height: 100% !important;
  1564.             max-height: none !important;
  1565.         }
  1566.  
  1567.         #sentence-video-player-portal div:has(> iframe) {
  1568.             height: 100% !important;
  1569.         }
  1570.         `;
  1571.     }
  1572.  
  1573.     function clickElement(selector) {
  1574.         const element = document.querySelector(selector);
  1575.         if (element) element.click();
  1576.     }
  1577.  
  1578.     function focusElement(selector) {
  1579.         const element = document.querySelector(selector);
  1580.         if (element) {
  1581.             element.focus();
  1582.             element.setSelectionRange(element.value.length, element.value.length);
  1583.         }
  1584.     }
  1585.  
  1586.     function copySelectedText() {
  1587.         const selected_text = document.querySelector(".reference-word");
  1588.         if (selected_text) {
  1589.             navigator.clipboard.writeText(selected_text.textContent);
  1590.         }
  1591.     }
  1592.  
  1593.     function finishLesson(){
  1594.         clickElement(".reader-component > .nav--right > a");
  1595.     }
  1596.  
  1597.     function setupKeyboardShortcuts() {
  1598.         function preventPropagation(event){
  1599.             event.preventDefault();
  1600.             event.stopPropagation();
  1601.         }
  1602.  
  1603.         document.addEventListener("keydown", function (event) {
  1604.             const targetElement = event.target;
  1605.             const isTextInput = targetElement.type === "text" || targetElement.type === "textarea" || targetElement.type === "input";
  1606.             const withoutModifierKeys = !event.ctrlKey && !event.shiftKey && !event.altKey;
  1607.             const eventKey = event.key.toLowerCase();
  1608.             if (isTextInput) {
  1609.                 if (targetElement.id == "user-input") {
  1610.                     return;
  1611.                 }
  1612.  
  1613.                 if ((eventKey == 'enter' || eventKey == 'escape') && withoutModifierKeys) {
  1614.                     preventPropagation(event);
  1615.                     event.target.blur();
  1616.                 } else {
  1617.                     return;
  1618.                 }
  1619.             }
  1620.  
  1621.             const shortcuts = {
  1622.                 'q': () => clickElement(".modal-section > div > button:nth-child(2)"), // video full screen toggle
  1623.                 'w': () => clickElement(".audio-player--controllers > div:nth-child(1) > a"), // 5 sec Backward
  1624.                 'e': () => clickElement(".audio-player--controllers > div:nth-child(2) > a"), // 5 sec Forward
  1625.                 'r': () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "k" })), // Make word Known
  1626.                 't': () => clickElement(".dictionary-resources > a:nth-last-child(1)"), // Open Translator
  1627.                 '`': () => focusElement(".reference-input-text"), // Move cursor to reference input
  1628.                 'd': () => clickElement(".dictionary-resources > a:nth-child(1)"), // Open Dictionary
  1629.                 'f': () => clickElement(".dictionary-resources > a:nth-child(1)"), // Open Dictionary
  1630.                 'c': () => copySelectedText() // Copy selected text
  1631.             };
  1632.  
  1633.             if (shortcuts[eventKey] && withoutModifierKeys) {
  1634.                 preventPropagation(event);
  1635.                 shortcuts[eventKey]();
  1636.             }
  1637.         }, true);
  1638.     }
  1639.  
  1640.     async function getUserProfile() {
  1641.         const url = `https://www.lingq.com/api/v3/profiles/`;
  1642.  
  1643.         const response = await fetch(url);
  1644.         const data = await response.json();
  1645.  
  1646.         return data.results[0]
  1647.     }
  1648.  
  1649.     async function getLanguageCode() {
  1650.         const userProfile = await getUserProfile();
  1651.         return userProfile.active_language;
  1652.     }
  1653.  
  1654.     async function getDictionaryLanguage() {
  1655.         const userProfile = await getUserProfile();
  1656.         return await userProfile.dictionary_languages[0];
  1657.     }
  1658.  
  1659.     function getLessonId() {
  1660.         const url = document.URL;
  1661.         const regex = /https*:\/\/www\.lingq\.com\/\w+\/learn\/\w+\/web\/reader\/(\d+)/;
  1662.         const match = url.match(regex);
  1663.  
  1664.         return match[1];
  1665.     }
  1666.  
  1667.     async function getCollectionId() {
  1668.         const url = document.URL;
  1669.         const regex = /https*:\/\/www\.lingq\.com\/\w+\/learn\/\w+\/web\/library\/course\/(\d+)/;
  1670.         const match = url.match(regex);
  1671.  
  1672.         return match[1];
  1673.     }
  1674.  
  1675.     async function getLessonInfo(lessonId) {
  1676.         const languageCode = await getLanguageCode();
  1677.         const url = `https://www.lingq.com/api/v3/${languageCode}/lessons/counters/?lesson=${lessonId}`;
  1678.  
  1679.         const response = await fetch(url);
  1680.         const data = await response.json();
  1681.  
  1682.         return data[lessonId];
  1683.     }
  1684.  
  1685.     async function getAllLessons(languageCode, collectionId) {
  1686.         let allLessons = [];
  1687.         let nextUrl = `https://www.lingq.com/api/v3/${languageCode}/search/?page=1&page_size=1000&collection=${collectionId}`;
  1688.  
  1689.         while (nextUrl) {
  1690.             try {
  1691.                 const response = await fetch(nextUrl);
  1692.                 if (!response.ok) {
  1693.                     throw new Error(`HTTP error! Status: ${response.status}`);
  1694.                 }
  1695.  
  1696.                 const data = await response.json();
  1697.                 allLessons = allLessons.concat(data.results);
  1698.                 nextUrl = data.next;
  1699.             } catch (error) {
  1700.                 console.error('Error fetching lessons:', error);
  1701.                 break;
  1702.             }
  1703.         }
  1704.  
  1705.         return allLessons;
  1706.     }
  1707.  
  1708.     async function setLessonProgress(lessonId, wordIndex) {
  1709.         const languageCode = await getLanguageCode();
  1710.         const url = `https://www.lingq.com/api/v3/${languageCode}/lessons/${lessonId}/bookmark/`;
  1711.         const payload = { wordIndex: wordIndex, completedWordIndex: wordIndex, client: 'web' };
  1712.  
  1713.         fetch(url, {
  1714.             method: 'POST',
  1715.             headers: { 'Content-Type': 'application/json' },
  1716.             body: JSON.stringify(payload)
  1717.         });
  1718.     }
  1719.  
  1720.     function setupYoutubePlayerCustomization() {
  1721.         function replaceNoCookie() {
  1722.             document.querySelectorAll("iframe").forEach(function (iframe) {
  1723.                 let src = iframe.getAttribute("src");
  1724.                 if (src && src.includes("disablekb=1")) {
  1725.                     src = src.replace("disablekb=1", "disablekb=0"); // keyboard controls are enabled
  1726.                     src = src + "&cc_load_policy=1"; // caption is shown by default
  1727.                     src = src + "&controls=0"; // player controls do not display in the player
  1728.                     iframe.setAttribute("src", src);
  1729.                 }
  1730.             });
  1731.         }
  1732.  
  1733.         async function setupSliderObserver() {
  1734.             const lessonId = getLessonId();
  1735.             const lessonInfo = await getLessonInfo(lessonId);
  1736.             let lastCompletedPercentage = lessonInfo["progress"];
  1737.             console.log(`last progress: ${lastCompletedPercentage}`);
  1738.  
  1739.             const sliderTrack = document.querySelector('.audio-player--progress .rc-slider-track');
  1740.  
  1741.             const sliderContainer = createSliderElements();
  1742.             const videoContainer = document.querySelector(".modal-content > div");
  1743.             videoContainer.appendChild(sliderContainer);
  1744.             const videoSliderTrack = sliderContainer.querySelector(".rc-slider-track");
  1745.  
  1746.             const syncVideoSliderTrack = (videoSliderTrack, sliderTrack) => {
  1747.                 videoSliderTrack.style.cssText = sliderTrack.style.cssText;
  1748.             };
  1749.  
  1750.             const updateLessonProgress = (lessonId, lessonInfo, progressPercentage, lastCompletedPercentage) => {
  1751.                 const progressUpdatePeriod = 5;
  1752.                 const flooredProgressPercentage = Math.floor(progressPercentage / progressUpdatePeriod) * progressUpdatePeriod;
  1753.  
  1754.                 if (flooredProgressPercentage > lastCompletedPercentage) {
  1755.                     console.log(`progress percentage: ${flooredProgressPercentage}. Updated`);
  1756.                     const wordIndex = Math.floor(lessonInfo["totalWordsCount"] * (flooredProgressPercentage / 100));
  1757.                     setLessonProgress(lessonId, wordIndex);
  1758.                     return flooredProgressPercentage;
  1759.                 }
  1760.                 return lastCompletedPercentage;
  1761.             };
  1762.  
  1763.             const sliderObserver = new MutationObserver(function (mutationsList) {
  1764.                 for (const mutation of mutationsList) {
  1765.                     if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
  1766.                         syncVideoSliderTrack(videoSliderTrack, sliderTrack);
  1767.  
  1768.                         const progressPercentage = parseFloat(sliderTrack.style.width);
  1769.  
  1770.                         lastCompletedPercentage = updateLessonProgress(lessonId, lessonInfo, progressPercentage, lastCompletedPercentage);
  1771.                         const isLessonFinished = progressPercentage >= 99.5;
  1772.                         if (isLessonFinished && settings.autoFinishing) {
  1773.                             setTimeout(finishLesson, 3000);
  1774.                         }
  1775.                     }
  1776.                 }
  1777.             });
  1778.  
  1779.             sliderObserver.observe(sliderTrack, {attributes: true, attributeFilter: ['style']});
  1780.             console.log('Observer started for rc-slider-track');
  1781.         }
  1782.  
  1783.         function createSliderElements() {
  1784.             const sliderContainer = createElement("div", {className: "rc-slider rc-slider-horizontal"});
  1785.             const sliderRail = createElement("div", {className: "rc-slider-rail"});
  1786.             const sliderTrack = createElement("div", {className: "rc-slider-track"});
  1787.             sliderContainer.appendChild(sliderRail);
  1788.             sliderContainer.appendChild(sliderTrack);
  1789.             return sliderContainer;
  1790.         }
  1791.  
  1792.         const iframeObserver = new MutationObserver(function (mutationsList) {
  1793.             for (const mutation of mutationsList) {
  1794.                 if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
  1795.                     mutation.addedNodes.forEach((node) => {
  1796.                         if (node.nodeName === "IFRAME") {
  1797.                             replaceNoCookie();
  1798.                             clickElement('.modal-section.modal-section--head button[title="Expand"]');
  1799.                             setupSliderObserver();
  1800.                         }
  1801.                     });
  1802.                 }
  1803.             }
  1804.         });
  1805.  
  1806.         iframeObserver.observe(document.body, {childList: true, subtree: true, attributes: true, attributeFilter: ["src"]});
  1807.     }
  1808.  
  1809.     async function changeScrollAmount() {
  1810.         const readerContainer = await waitForElement(".reader-container");
  1811.  
  1812.         if (readerContainer) {
  1813.             readerContainer.addEventListener("wheel", (event) => {
  1814.                 event.preventDefault();
  1815.                 const delta = event.deltaY;
  1816.                 const scrollAmount = 0.3;
  1817.                 readerContainer.scrollTop += delta * scrollAmount;
  1818.             });
  1819.         }
  1820.     }
  1821.  
  1822.     function setupSentenceFocus() {
  1823.         function focusPlayingSentence() {
  1824.             const playingSentence = document.querySelector(".sentence.is-playing");
  1825.             if (playingSentence) {
  1826.                 /*
  1827.                 playingSentence.scrollIntoView({
  1828.                     behavior: "smooth",
  1829.                     block: "center"
  1830.                 });
  1831.                 */
  1832.                 const scrolling_div = document.querySelector(".reader-container")
  1833.                 scrolling_div.scrollTop = playingSentence.offsetTop + Math.floor(playingSentence.offsetHeight / 2) - Math.floor(scrolling_div.offsetHeight / 2);
  1834.  
  1835.             }
  1836.         }
  1837.  
  1838.         const observer = new MutationObserver((mutations) => {
  1839.             mutations.forEach((mutation) => {
  1840.                 if (
  1841.                     mutation.type === "attributes" &&
  1842.                     mutation.attributeName === "class" &&
  1843.                     mutation.target.classList.contains("sentence")
  1844.                 ) {
  1845.                     focusPlayingSentence();
  1846.                 }
  1847.             });
  1848.         });
  1849.  
  1850.         const container = document.querySelector(".sentence-text");
  1851.         if (container) {
  1852.             observer.observe(container, {
  1853.                 attributes: true,
  1854.                 subtree: true
  1855.             });
  1856.         }
  1857.     }
  1858.  
  1859.     async function waitForElement(selector) {
  1860.         return new Promise(resolve => {
  1861.             if (document.querySelector(selector)) {
  1862.                 return resolve(document.querySelector(selector));
  1863.             }
  1864.  
  1865.             const observer = new MutationObserver(() => {
  1866.                 if (document.querySelector(selector)) {
  1867.                     resolve(document.querySelector(selector));
  1868.                     observer.disconnect();
  1869.                 }
  1870.             });
  1871.  
  1872.             observer.observe(document.documentElement, {
  1873.                 childList: true,
  1874.                 subtree: true
  1875.             });
  1876.         });
  1877.     }
  1878.  
  1879.     async function playAudio(audioData, volume = 0.5) {
  1880.         if (typeof volume !== 'number' || volume < 0 || volume > 1) {
  1881.             console.warn(`Invalid volume "${volume}". Using default volume 0.5.`);
  1882.             volume = 0.5;
  1883.         }
  1884.  
  1885.         return new Promise((resolve, reject) => {
  1886.             const audioContext = new AudioContext();
  1887.             const gainNode = audioContext.createGain();
  1888.             gainNode.gain.value = volume;
  1889.             gainNode.connect(audioContext.destination);
  1890.  
  1891.             const audioDataCopy = audioData.slice(0);
  1892.  
  1893.             audioContext.decodeAudioData(audioDataCopy)
  1894.                 .then(buffer => {
  1895.                     const source = audioContext.createBufferSource();
  1896.                     source.buffer = buffer;
  1897.                     source.connect(gainNode);
  1898.                     source.start(0);
  1899.  
  1900.                     source.onended = () => {
  1901.                         resolve();
  1902.                         audioContext.close();
  1903.                     };
  1904.                     source.onerror = (e) => {
  1905.                         reject("Audio play error : " + e);
  1906.                     }
  1907.                 })
  1908.                 .catch(e => {
  1909.                     reject("Decoding error : " + e)
  1910.                 });
  1911.         });
  1912.     }
  1913.  
  1914.     async function openAITTS(text, API_KEY, voice = "nova", playbackRate = 1, instructions) {
  1915.         const modelId = "gpt-4o-mini-tts";
  1916.         const apiUrl = "https://api.openai.com/v1/audio/speech";
  1917.  
  1918.         if (!API_KEY) {
  1919.             throw new Error("Invalid or missing OpenAI API key.  Please set the API_KEY");
  1920.         }
  1921.  
  1922.         if (!["nova", "onyx", "alloy", "echo", "fable", "shimmer"].includes(voice)) {
  1923.             console.warn(`Invalid voice "${voice}".  Using default voice "nova".`);
  1924.             voice = "nova";
  1925.         }
  1926.  
  1927.         if (typeof playbackRate !== 'number' || playbackRate < 0.5 || playbackRate > 1.5) {
  1928.             console.warn(`Invalid playback rate "${playbackRate}". Using default rate 1.`);
  1929.             playbackRate = 1;
  1930.         }
  1931.  
  1932.         try {
  1933.             const response = await fetch(apiUrl, {
  1934.                 method: "POST",
  1935.                 headers: {
  1936.                     "Accept": "audio/mpeg",
  1937.                     "Content-Type": "application/json",
  1938.                     "Authorization": `Bearer ${API_KEY}`
  1939.                 },
  1940.                 body: JSON.stringify({
  1941.                     input: text,
  1942.                     model: modelId,
  1943.                     voice: voice,
  1944.                     instructions: instructions,
  1945.                     speed: playbackRate
  1946.                 })
  1947.             });
  1948.  
  1949.             if (!response.ok) {
  1950.                 let errorMessage = `HTTP error! Status: ${response.status}`;
  1951.                 try {
  1952.                     const errorBody = await response.json();
  1953.                     errorMessage += ` - OpenAI Error: ${errorBody?.error?.message || JSON.stringify(errorBody)}`;
  1954.                 } catch (parseError) {
  1955.                     errorMessage += ` - Failed to parse error response.`;
  1956.                 }
  1957.                 throw new Error(errorMessage);
  1958.             }
  1959.  
  1960.             return await response.arrayBuffer();
  1961.  
  1962.         } catch (error) {
  1963.             console.error("Error during OpenAI TTS request:", error);
  1964.             throw error;
  1965.         }
  1966.     }
  1967.  
  1968.     function setupLLMs() {
  1969.         async function updateWidget() {
  1970.             if (document.getElementById('chatWidget')) return;
  1971.  
  1972.             const targetSectionHead = document.querySelector("#lesson-reader .widget-area > .reader-widget > .section-widget--head");
  1973.             if (!targetSectionHead) return;
  1974.  
  1975.             const llmProvider = settings.llmProvider;
  1976.             const llmApiKey = settings.llmApiKey;
  1977.             const llmModel = llmProvider === 'openai' ? 'gpt-4.1-nano' : 'gemini-2.0-flash';
  1978.             const userDictionaryLang = await getDictionaryLanguage();
  1979.             console.log(llmProvider, llmModel)
  1980.  
  1981.             const systemPrompt = `
  1982. Assist users in understanding words and sentences, using HTML tags for formatting, while responding in the language specified by '${userDictionaryLang}'. Focus on accurate translation and explanation based on the input type.
  1983.  
  1984. ## Instructions for Different Input Types
  1985.  
  1986. - **Single Word Input:**
  1987.   - Focus on a single word, even if additional context is provided.
  1988.   1. Provide a concise definition in the specified language.
  1989.   2. Include an example sentence that aids in understanding without directly translating the provided context. Discuss the original form, part of speech, meaning, explanation, and create a new example with its translation.
  1990.  
  1991. - **Sentence Input:**
  1992.   1. Translate the entire sentence into the specified language, fully considering the context for accurate translation.
  1993.   2. Identify and explain interesting, difficult, or idiomatic expressions within the user's specified language. Use context whenever needed for clarity.
  1994.  
  1995. - **Plain Text Input:**
  1996.   1. Respond to user requests for additional examples or clarifications based on previous discussions, formatted in HTML.
  1997.  
  1998. ## Formatting
  1999.  
  2000. - Use '<b>', '<p>', '<ul>', '<li>', and '<br>' for formatting.
  2001. - Answer directly without a preface.
  2002.  
  2003. # Output Format
  2004.  
  2005. - Ensure the output is in the language specified by '${userDictionaryLang}'.
  2006.  
  2007. # Steps for Sentence Input
  2008.  
  2009. 1. **Translate the Sentence:** Fully translate the provided sentence, maintaining the original context for accuracy.
  2010. 2. **Explain Expressions:** Identify any expressions that may require additional context or explanation, providing insights in the specified language.
  2011.  
  2012. # Examples
  2013.  
  2014. ### Example 1: Single Word with Context (User's language code: ko)
  2015.  
  2016. **User Input:** "Input: \"translators\", Context: \"However, the ESV translators chose to translate that same word as 'servant,' closing off the potential interpretation that she held any formal position of authority.\""
  2017.  
  2018. **Assistant Output:**
  2019. <b>translators (명사)</b>
  2020. <p><b>뜻:</b> 번역가, 통역사</p>
  2021. <p><b>설명:</b> 다른 언어로 문서나 발화를 번역하는 사람들을 의미합니다.</p>
  2022. <ul>
  2023.   <li><b>새로운 예문:</b> Many translators help publish books in multiple languages.</li>
  2024.   <li><b>번역 예문:</b> 많은 번역가들이 책을 다양한 언어로 출간하도록 돕고 있습니다.</li>
  2025. </ul>
  2026.  
  2027. ### Example 2: Sentence Input (User's language code: ko)
  2028.  
  2029. **User Input:** "Input: \"Interestingly, elsewhere in the letters of Paul, the ESV editors translated that exact same word as \"minister\"\", Context: \"\""
  2030.  
  2031. **Assistant Output:**
  2032. <p><b>번역:</b> 흥미롭게도, 바울의 다른 서신들에서는 ESV 편집자들이 바로 그 같은 단어를 “minister”(일꾼, 봉사자)로 번역했습니다.</p>
  2033. <ul>
  2034.  <li>“Interestingly”는 어떤 사실이 대조적이거나 생각할 거리가 있을 때 쓰는 연결어입니다.</li> 
  2035. </ul>
  2036.  
  2037. ### Example 3: Plain Text Input (User's language code: ko)
  2038.  
  2039. **User Input:** "예문 하나 더 만들어줘"
  2040.  
  2041. **Assistant Output:**
  2042. <ul>
  2043.   <li><b>추가 예문:</b> The translators were praised for accurately capturing the author's intent.</li>
  2044.   <li><b>번역 예문:</b> 번역가들은 작가의 의도를 정확하게 포착한 것에 대해 칭찬받았습니다.</li>
  2045. </ul>
  2046.  
  2047. # Notes
  2048.  
  2049. - Focus on ensuring output in the user's specified language ('${userDictionaryLang}').
  2050. - Avoid verbosity and unnecessary details; aim for clarity and usefulness in language learning contexts.
  2051. - Do not provide explanations of individual words within sentences unless they are part of a larger idiomatic expression requiring translation.
  2052.             `;
  2053.             const ttsInstructions = `
  2054.                 Accent/Affect: Neutral and clear, like a professional voice-over artist. Focus on accuracy.
  2055.                 Tone: Objective and methodical. Maintain a slightly formal tone without emotion.
  2056.                 Pacing: Use distinct pauses between words and phrases to demonstrate pronunciation nuances. Emphasize syllabic clarity.
  2057.                 Pronunciation: Enunciate words with deliberate clarity, focusing on vowel sounds and consonant clusters.
  2058.             `;
  2059.             let chatHistory = [];
  2060.  
  2061.             function updateChatHistoryState(currentHistory, message, role) {
  2062.                 return [...currentHistory, { role: role, content: message }];
  2063.             }
  2064.  
  2065.             function addMessageToUI(message, isUser, container) {
  2066.                 const messageDiv = createElement("div", {
  2067.                     className: `${isUser ? 'user-message' : 'bot-message'}`,
  2068.                     innerHTML: message
  2069.                 });
  2070.                 container.appendChild(messageDiv);
  2071.                 container.scrollTop = container.scrollHeight;
  2072.             }
  2073.  
  2074.             async function getOpenAIResponse(apiKey, model, history) {
  2075.                 try {
  2076.                     const api_url = `https://api.openai.com/v1/chat/completions`;
  2077.                     const response = await fetch(
  2078.                         api_url,
  2079.                         {
  2080.                             method: 'POST',
  2081.                             headers: {
  2082.                                 'Content-Type': 'application/json',
  2083.                                 'Authorization': `Bearer ${apiKey}`
  2084.                             },
  2085.                             body: JSON.stringify({
  2086.                                 model: model,
  2087.                                 messages: history,
  2088.                                 max_tokens: 500,
  2089.                                 temperature: 1.0,
  2090.                             })
  2091.                         }
  2092.                     );
  2093.  
  2094.                     if (!response.ok) {
  2095.                         const errorData = await response.json();
  2096.                         console.error('OpenAI API error:', errorData);
  2097.                         throw new Error(`OpenAI API error: ${response.status} - ${response.statusText}`);
  2098.                     }
  2099.  
  2100.                     const data = await response.json();
  2101.                     return data.choices[0]?.message?.content || "Sorry, could not get a response.";
  2102.  
  2103.                 } catch (error) {
  2104.                     console.error('OpenAI API call failed:', error);
  2105.                     return "Sorry, something went wrong communicating with OpenAI.";
  2106.                 }
  2107.             }
  2108.  
  2109.             async function getGoogleResponse(apiKey, model, history) {
  2110.                 try {
  2111.                     const formattedMessages = history.map(msg => ({
  2112.                         role: msg.role === 'assistant' ? 'model' : msg.role,
  2113.                         parts: [{ text: msg.content }]
  2114.                     }));
  2115.  
  2116.                     const api_url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
  2117.                     const response = await fetch(
  2118.                         api_url,
  2119.                         {
  2120.                             method: 'POST',
  2121.                             headers: { 'Content-Type': 'application/json' },
  2122.                             body: JSON.stringify({
  2123.                                 system_instruction: {parts: [{text: systemPrompt}]},
  2124.                                 contents: formattedMessages,
  2125.                                 generationConfig: { temperature: 1.0, maxOutputTokens: 500}
  2126.                             })
  2127.                         }
  2128.                     );
  2129.  
  2130.                     if (!response.ok) {
  2131.                         const errorData = await response.json();
  2132.                         console.error('Google Gemini API error:', errorData);
  2133.                         const message = errorData?.error?.message || `Google Gemini API error: ${response.status} - ${response.statusText}`;
  2134.                         throw new Error(message);
  2135.                     }
  2136.  
  2137.                     const data = await response.json();
  2138.                     return data.candidates[0].content.parts[0].text;
  2139.                 } catch (error) {
  2140.                     console.error('Google Gemini API call failed:', error);
  2141.                     return `Sorry, something went wrong communicating with Google. ${error.message || ''}`;
  2142.                 }
  2143.             }
  2144.  
  2145.             async function getBotResponse(provider, apiKey, model, history) {
  2146.                 if (provider === 'openai') {
  2147.                     return await getOpenAIResponse(apiKey, model, history);
  2148.                 } else if (provider === 'google') {
  2149.                     return await getGoogleResponse(apiKey, model, history);
  2150.                 }
  2151.             }
  2152.  
  2153.             async function handleSendMessage() {
  2154.                 const userInput = document.getElementById("user-input")
  2155.                 const chatContainer = document.getElementById("chat-container")
  2156.  
  2157.                 const message = userInput.value.trim();
  2158.                 if (!message) return;
  2159.  
  2160.                 const userMessage = message;
  2161.                 userInput.value = '';
  2162.  
  2163.                 addMessageToUI(userMessage, true, chatContainer);
  2164.                 chatHistory = updateChatHistoryState(chatHistory, userMessage, "user");
  2165.                 const botResponse = await getBotResponse(llmProvider, llmApiKey, llmModel, chatHistory);
  2166.                 addMessageToUI(botResponse, false, chatContainer);
  2167.                 chatHistory = updateChatHistoryState(chatHistory, botResponse, "assistant");
  2168.             }
  2169.  
  2170.             function getSelectedWithContext() {
  2171.                 const selectedTextElement = targetSectionHead.querySelector(".reference-word");
  2172.                 const contextElement = document.querySelector(".reader-container .sentence:has(.sentence-item.is-selected)");
  2173.                 const selectedText = selectedTextElement ? selectedTextElement.textContent.trim() : "";
  2174.                 const contextText = contextElement ? contextElement.innerText.trim() : "";
  2175.  
  2176.                 return `Input: "${selectedText}"` +  `, Context: "${contextText}"`;
  2177.             }
  2178.  
  2179.             async function updateChatWidget(){
  2180.                 if (!settings.chatWidget) return;
  2181.                 
  2182.                 const chatWrapper = createElement("div", { id: "chat-widget", style: "margin: 10px 0;" });
  2183.                 const chatContainer = createElement("div", { id: "chat-container" });
  2184.                 const inputContainer = createElement("div", { className: "input-container" });
  2185.                 const userInput = createElement("input", { type: "text", id: "user-input", placeholder: "Ask anything" });
  2186.                 const sendButton = createElement("button", { id: "send-button", textContent: "Send" });
  2187.  
  2188.                 inputContainer.appendChild(userInput);
  2189.                 inputContainer.appendChild(sendButton);
  2190.                 chatWrapper.appendChild(chatContainer);
  2191.                 chatWrapper.appendChild(inputContainer);
  2192.  
  2193.                 userInput.addEventListener('keydown', (event) => {
  2194.                     if (event.key === 'Enter' && !event.shiftKey) {
  2195.                         event.preventDefault();
  2196.                         handleSendMessage();
  2197.                     }
  2198.                     event.stopPropagation();
  2199.                 }, true);
  2200.                 sendButton.addEventListener('click', handleSendMessage);
  2201.  
  2202.                 if (llmProvider === 'openai') chatHistory = updateChatHistoryState(chatHistory, systemPrompt, "system");
  2203.  
  2204.                 if (settings.askSelected) {
  2205.                     const initialUserMessage = getSelectedWithContext();
  2206.  
  2207.                     chatHistory = updateChatHistoryState(chatHistory, initialUserMessage, "user");
  2208.                     const botResponse = await getBotResponse(llmProvider, llmApiKey, llmModel, chatHistory);
  2209.                     addMessageToUI(botResponse, false, chatContainer);
  2210.                     chatHistory = updateChatHistoryState(chatHistory, botResponse, "assistant");
  2211.                 }
  2212.  
  2213.                 const existingChatWidget = document.getElementById('chat-widget');
  2214.                 if(existingChatWidget) {
  2215.                     existingChatWidget.replaceWith(chatWrapper);
  2216.                 } else {
  2217.                     targetSectionHead.appendChild(chatWrapper);
  2218.                 }
  2219.             }
  2220.  
  2221.             async function updateTTS() {
  2222.                 if (!settings.tts) return;
  2223.  
  2224.                 const selectedTextElement = document.querySelector(".reference-word");
  2225.                 const selectedText = selectedTextElement ? selectedTextElement.textContent.trim() : "";
  2226.  
  2227.                 let audioData = await openAITTS(`${selectedText}`, settings.ttsApiKey, settings.ttsVoice, 1.0, ttsInstructions);
  2228.                 if (audioData == null) return;
  2229.  
  2230.                 const ttsButton = await waitForElement('.is-tts');
  2231.                 const newTtsButton = createElement("button", {id: "playAudio", textContent: "🔊", className: "is-tts"});
  2232.                 newTtsButton.addEventListener('click', async (event) => {
  2233.                     await playAudio(audioData, 1.0);
  2234.                 })
  2235.                 ttsButton.replaceWith(newTtsButton);
  2236.  
  2237.                 playAudio(audioData, 1.0);
  2238.             }
  2239.  
  2240.             await updateChatWidget();
  2241.             await updateTTS();
  2242.  
  2243.             const selectedTextElement = targetSectionHead.querySelector(".reference-word");
  2244.             const observer = new MutationObserver((mutations) => {
  2245.                 mutations.forEach((mutation) => {
  2246.                     if (mutation.type !== 'characterData') return;
  2247.                     updateChatWidget();
  2248.                     updateTTS();
  2249.                 });
  2250.             });
  2251.             observer.observe(selectedTextElement, {subtree: true, characterData: true});
  2252.         }
  2253.  
  2254.         const lessonReader = document.getElementById('lesson-reader');
  2255.  
  2256.         const observer = new MutationObserver((mutations) => {
  2257.             if (!settings.chatWidget) return;
  2258.  
  2259.             mutations.forEach((mutation) => {
  2260.                 mutation.addedNodes.forEach((node) => {
  2261.                     if (node.nodeType !== Node.ELEMENT_NODE) return;
  2262.  
  2263.                     if (node.matches(".widget-area")) {
  2264.                         updateWidget();
  2265.                     }
  2266.                 });
  2267.             });
  2268.         });
  2269.         observer.observe(lessonReader, {childList: true});
  2270.     }
  2271.  
  2272.     async function setupCourse() {
  2273.         function createCourseUI(){
  2274.             const resetButton = createElement("button", {
  2275.                 id: "resetLessonPositions",
  2276.                 textContent: "⏮️",
  2277.                 title: "Reset all lessons to the first page",
  2278.                 className: "nav-button"
  2279.             });
  2280.  
  2281.             let nav = document.querySelector(".library-section > .list-header > .list-header-index");
  2282.             nav.appendChild(resetButton);
  2283.         }
  2284.  
  2285.         function setupCourseStyles() {
  2286.             const css = `
  2287.             .nav-button {
  2288.                 background: none;
  2289.                 border: none;
  2290.                 cursor: pointer;
  2291.                 font-size: 1.5rem;
  2292.             }
  2293.  
  2294.             .library-section > .list-header > .list-header-index {
  2295.                 grid-template-columns: auto 1fr auto !important;
  2296.             }
  2297.  
  2298.             .dynamic--word-progress {
  2299.                 grid-template-columns: repeat(3, auto) !important;
  2300.             }
  2301.  
  2302.             .word-indicator--box-white {
  2303.                 background-color: rgb(255 255 255 / 85%);
  2304.                 border-color: rgb(255 255 255);
  2305.             }
  2306.             `;
  2307.             const styleElement = createElement("style", { textContent: css });
  2308.             document.querySelector("head").appendChild(styleElement);
  2309.         }
  2310.  
  2311.         function enrichLessonDetails() {
  2312.             function addKnownWordsIndicator(lessonElement, lessonInfo) {
  2313.                 const dynamicWordProgress = lessonElement.querySelector('.dynamic--word-progress');
  2314.  
  2315.                 const knownWordPercentage = Math.round((lessonInfo.knownWordsCount / lessonInfo.uniqueWordsCount) * 100);
  2316.  
  2317.                 const knownWordsItem = createElement('div', {className: 'word-indicator--item grid-layout grid-align--center grid-item is-fluid--left', title: 'Known Words'});
  2318.  
  2319.                 const knownWordsBox = createElement('div', {className: 'word-indicator--box word-indicator--box-white'});
  2320.                 knownWordsItem.appendChild(knownWordsBox);
  2321.  
  2322.                 const textWrapper = createElement('span', {className: 'text-wrapper is-size-8'});
  2323.                 textWrapper.appendChild(createElement('span', {textContent: `${lessonInfo.knownWordsCount} (${knownWordPercentage}%)`}));
  2324.  
  2325.                 knownWordsItem.appendChild(textWrapper);
  2326.                 dynamicWordProgress.appendChild(knownWordsItem);
  2327.             }
  2328.  
  2329.             async function updateWordIndicatorPercentages(lessonElement, lessonId) {
  2330.                 console.log(`lessonId: ${lessonId}`);
  2331.                 const lessonInfo = await getLessonInfo(lessonId);
  2332.  
  2333.                 const wordIndicatorItems = lessonElement.querySelector(".word-indicator--item");
  2334.                 if (!wordIndicatorItems) { return; }
  2335.  
  2336.                 const lingqsPercentage = Math.round((lessonInfo.cardsCount / lessonInfo.uniqueWordsCount) * 100);
  2337.                 const lingqsElement = lessonElement.querySelector('.word-indicator--item[title="LingQs"] > span > span');
  2338.                 lingqsElement.textContent = `${lessonInfo.cardsCount} (${lingqsPercentage}%)`;
  2339.  
  2340.                 addKnownWordsIndicator(lessonElement, lessonInfo);
  2341.             }
  2342.  
  2343.             const observer = new MutationObserver((mutations) => {
  2344.                 mutations.forEach((mutation) => {
  2345.                     if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
  2346.                         mutation.addedNodes.forEach((node) => {
  2347.                             if (node.classList && node.classList.contains('library-item-wrap')) {
  2348.                                 const lessonId = node.id.split("--")[1].split("-")[0];
  2349.                                 updateWordIndicatorPercentages(node, lessonId);
  2350.                             }
  2351.                         });
  2352.                     }
  2353.                 });
  2354.             });
  2355.  
  2356.             const targetNode = document.querySelector('.library-section .library-list');
  2357.             console.log(targetNode);
  2358.             const config = { childList: true, subtree: true };
  2359.             observer.observe(targetNode, config);
  2360.         }
  2361.  
  2362.         function enableCourseSorting() {
  2363.             const dropdownItems = document.querySelectorAll('.library-section > .list-header .tw-dropdown--item');
  2364.             if (dropdownItems.length) {
  2365.                 // Setup library sort event listener
  2366.                 dropdownItems.forEach((item, index) => {
  2367.                     item.addEventListener('click', () => {
  2368.                         console.log(`Clicked sort option: ${index}`);
  2369.                         storage.set('librarySortOption', index);
  2370.                         settings.librarySortOption = index;
  2371.                     });
  2372.                 });
  2373.  
  2374.                 // Change sort by the setting
  2375.                 dropdownItems[settings.librarySortOption].click();
  2376.                 return true;
  2377.             } else {
  2378.                 console.warn("Dropdown items not found for library sort.");
  2379.                 return false;
  2380.             }
  2381.         }
  2382.  
  2383.         function setupLessonResetButton() {
  2384.             const resetButton = document.getElementById("resetLessonPositions");
  2385.             resetButton.addEventListener("click", async () => {
  2386.                 const languageCode = await getLanguageCode();
  2387.                 const collectionId = await getCollectionId();
  2388.  
  2389.                 const allLessons = await getAllLessons(languageCode, collectionId);
  2390.                 const confirmed = confirm(`Reset all ${allLessons.length} lessons to their starting positions?`);
  2391.                 if (!confirmed) { return; }
  2392.  
  2393.                 for (const lesson of allLessons) {
  2394.                     await setLessonProgress(lesson.id, 0);
  2395.                     console.log(`Reset lesson ID: ${lesson.id} to the first page`);
  2396.                 }
  2397.  
  2398.                 alert(`Successfully reset ${allLessons.length} lessons to their starting positions.`);
  2399.             });
  2400.         }
  2401.  
  2402.         const libraryHeader = await waitForElement('.library-section > .list-header');
  2403.         createCourseUI();
  2404.         setupCourseStyles();
  2405.  
  2406.         enrichLessonDetails();
  2407.         enableCourseSorting();
  2408.         setupLessonResetButton();
  2409.     }
  2410.  
  2411.     function fixBugs() {
  2412.         const resizeToast = () => {
  2413.             const css = `
  2414.             .toasts {
  2415.                 height: fit-content;
  2416.             }
  2417.             `;
  2418.             const cssElement = createElement("style", {textContent: css});
  2419.             document.querySelector("head").appendChild(cssElement);
  2420.         }
  2421.  
  2422.         resizeToast();
  2423.     }
  2424.  
  2425.     function init() {
  2426.         fixBugs();
  2427.  
  2428.         if (document.URL.includes("reader")) {
  2429.             createUI();
  2430.             applyStyles(settings.styleType, settings.colorMode);
  2431.             setupKeyboardShortcuts();
  2432.             setupYoutubePlayerCustomization();
  2433.             changeScrollAmount();
  2434.             setupSentenceFocus();
  2435.             setupLLMs();
  2436.         }
  2437.         if (document.URL.includes("library")) {
  2438.             setupCourse();
  2439.         }
  2440.     }
  2441.  
  2442.     init();
  2443. })();
  2444.  
  2445. // TODO: add the tts toggles for each sentence and word.