refactor: openmenuoptions function

src/SEQTA.ts

@@ -62,16 +62,14 @@ async function init() {
 
     enableCurrentTheme()
     try {
-      const items = await browser.storage.local.get() as SettingsState
+      if (settingsState.onoff) {
-      
-      if (items.onoff) {
         const injectedStyle = document.createElement('style')
         injectedStyle.textContent = injectedCSS
 
         document.head.appendChild(injectedStyle)
       }
       
-      main(items)
+      main()
     } catch (error: any) {
       onError(error)
     }
@@ -97,10 +95,8 @@ export function enableAnimatedBackground() {
 
 export async function HideMenuItems(): Promise<void> {
   try {
-    const result = await browser.storage.local.get() as SettingsState
-
     let stylesheetInnerText: string = ''
-    for (const [menuItem, { toggle }] of Object.entries(result.menuitems)) {
+    for (const [menuItem, { toggle }] of Object.entries(settingsState.menuitems)) {
       if (!toggle) {
         stylesheetInnerText += SetDisplayNone(menuItem)
         console.log(`[BetterSEQTA+] Hiding ${menuItem} menu item`)
@@ -312,20 +308,15 @@ async function finishLoad() {
     console.error("Error during loading cleanup:", err);
   }
 
-  try {
+  if (settingsState.justupdated && !document.getElementById('whatsnewbk')) {
-    const { justupdated } = await browser.storage.local.get('justupdated');
+    OpenWhatsNewPopup();
-    if (justupdated && !document.getElementById('whatsnewbk')) {
-      OpenWhatsNewPopup();
-    }
-  } catch (error) {
-    console.error("Error retrieving 'justupdated' from storage:", error);
   }
 }
 
 async function DeleteWhatsNew() {
   const bkelement = document.getElementById('whatsnewbk')
   const popup = document.getElementsByClassName('whatsnewContainer')[0]
-  
+
   animate(
     [popup, bkelement!],
     { opacity: [1, 0], scale: [1, 0] },
@@ -441,8 +432,7 @@ async function updateIframesWithDarkMode(): Promise<void> {
         if (node.nodeName === 'IFRAME') {
           const iframe = node as HTMLIFrameElement
           try {
-            const settings = await browser.storage.local.get('DarkMode') as SettingsState
+            applyDarkModeToIframe(iframe, cssLink, settingsState.DarkMode);
-            applyDarkModeToIframe(iframe, cssLink, settings.DarkMode);
           } catch (error) {
             console.error('Error applying dark mode:', error)
           }
@@ -514,7 +504,7 @@ function SortMessagePageItems(messagesParentElement: any) {
 }
 
 async function LoadPageElements(): Promise<void> {
-  await AddBetterSEQTAElements(true)
+  await AddBetterSEQTAElements()
   const sublink: string | undefined = window.location.href.split('/')[4]
 
   const observer = new MutationObserver(function (mutations_list) {
@@ -597,11 +587,9 @@ async function LoadPageElements(): Promise<void> {
 
   async function handleNewsPage(): Promise<void> {
     console.log('[BetterSEQTA+] Started Init')
-    const settings: SettingsState = await browser.storage.local.get() as SettingsState
+    if (settingsState.onoff) {
-    if (settings.onoff) {
       SendNewsPage()
-      const notificationSettings: SettingsState = await browser.storage.local.get() as SettingsState
+      if (settingsState.notificationcollector) {
-      if (notificationSettings.notificationcollector) {
         enableNotificationCollector()
       }
       finishLoad()
@@ -610,8 +598,7 @@ async function LoadPageElements(): Promise<void> {
 
   async function handleDefault(): Promise<void> {
     finishLoad()
-    const settings: SettingsState = await browser.storage.local.get() as SettingsState
+    if (settingsState.notificationcollector) {
-    if (settings.notificationcollector) {
       enableNotificationCollector()
     }
   }
@@ -718,55 +705,51 @@ function ChangeMenuItemPositions(storage: any) {
 }
 
 export async function ObserveMenuItemPosition() {
-  const result = browser.storage.local.get()
+  let menuorder = settingsState.menuorder
-  function open (result: any) {
+  if (!(menuorder && settingsState.onoff)) return;
-    let menuorder = result.menuorder
-    if (menuorder && result.onoff) {
-      const observer = new MutationObserver(function (mutations_list) {
-        mutations_list.forEach(function (mutation) {
-          mutation.addedNodes.forEach(function (added_node) {
-            const node = added_node as HTMLElement
-            if (!node?.dataset?.checked && !MenuOptionsOpen) {
-              const key = MenuitemSVGKey[node?.dataset?.key! as keyof typeof MenuitemSVGKey]
-              if (key) {
-                ReplaceMenuSVG(
-                  node,
-                  MenuitemSVGKey[node.dataset.key as keyof typeof MenuitemSVGKey],
-                )
-              } else if (node?.firstChild?.nodeName === 'LABEL') {
-                // Assuming `node` is an <li> element containing a <label>
-                const label = node.firstChild as HTMLElement;
-                
-                // The magical step: We find the last child. If it's a text node, embrace it with <span>
-                let textNode = label.lastChild as HTMLElement;
-                
-                // A quick check to ensure it's a text node and not already ensconced in a <span>
-                if (textNode.nodeType === 3 && textNode.parentNode && textNode.parentNode.nodeName !== 'SPAN') {
-                  // The text node is indeed bare, and not in a <span>. Time to act!
-                  const span = document.createElement('span'); // The creation of the <span>
-                  span.textContent = textNode.nodeValue; // Transferring the text
-                  
-                  // Replacing the text node with our newly minted <span> full of text
-                  label.replaceChild(span, textNode);
-                }
-              }
-              ChangeMenuItemPositions(menuorder)
-            }
-          })
-        })
-      })
 
-      observer.observe(document.querySelector('#menu')!.firstChild!, {
+  const observer = new MutationObserver(function (mutations_list) {
-        subtree: true,
+    mutations_list.forEach(function (mutation) {
-        childList: true,
+      mutation.addedNodes.forEach(function (added_node) {
+        const node = added_node as HTMLElement
+        if (!node?.dataset?.checked && !MenuOptionsOpen) {
+          const key = MenuitemSVGKey[node?.dataset?.key! as keyof typeof MenuitemSVGKey]
+          if (key) {
+            ReplaceMenuSVG(
+              node,
+              MenuitemSVGKey[node.dataset.key as keyof typeof MenuitemSVGKey],
+            )
+          } else if (node?.firstChild?.nodeName === 'LABEL') {
+            // Assuming `node` is an <li> element containing a <label>
+            const label = node.firstChild as HTMLElement;
+            
+            // The magical step: We find the last child. If it's a text node, embrace it with <span>
+            let textNode = label.lastChild as HTMLElement;
+            
+            // A quick check to ensure it's a text node and not already ensconced in a <span>
+            if (textNode.nodeType === 3 && textNode.parentNode && textNode.parentNode.nodeName !== 'SPAN') {
+              // The text node is indeed bare, and not in a <span>. Time to act!
+              const span = document.createElement('span'); // The creation of the <span>
+              span.textContent = textNode.nodeValue; // Transferring the text
+              
+              // Replacing the text node with our newly minted <span> full of text
+              label.replaceChild(span, textNode);
+            }
+          }
+          ChangeMenuItemPositions(menuorder)
+        }
       })
-    }
+    })
-  }
+  })
-  result.then(open, onError)
+
+  observer.observe(document.querySelector('#menu')!.firstChild!, {
+    subtree: true,
+    childList: true,
+  })
 }
 
-function main(storedSetting: SettingsState) {
+function main() {
-  if (typeof storedSetting.onoff === 'undefined') {
+  if (typeof settingsState.onoff === 'undefined') {
     browser.runtime.sendMessage({ type: 'setDefaultStorage' })
   }
 
@@ -774,7 +757,7 @@ function main(storedSetting: SettingsState) {
     waitForElm('.code').then(AppendElementsToDisabledPage)
   }
 
-  if (storedSetting.onoff) {
+  if (settingsState.onoff) {
     console.log('[BetterSEQTA+] Enabled')
     if (settingsState.DarkMode) document.documentElement.classList.add('dark')
 
@@ -787,7 +770,6 @@ function main(storedSetting: SettingsState) {
     loading()
     InjectCustomIcons()
     HideMenuItems()
-    tryLoad()
     
     window.addEventListener('load', tryLoad)
   } else {
@@ -813,7 +795,7 @@ function InjectCustomIcons() {
 
 export function AppendElementsToDisabledPage() {
   console.log("[BetterSEQTA+] Appending elements to disabled page")
-  AddBetterSEQTAElements(false)
+  AddBetterSEQTAElements()
 
   let settingsStyle = document.createElement('style')
   settingsStyle.innerHTML = /* css */`
@@ -910,76 +892,179 @@ export function addExtensionSettings() {
 }
 
 export function OpenMenuOptions() {
-  const result = browser.storage.local.get()
+  var container = document.getElementById('container')
-  function open (result: any) {
+  var menu = document.getElementById('menu')
-    var container = document.getElementById('container')
-    var menu = document.getElementById('menu')
 
-    if (result.defaultmenuorder.length == '0') {
+  if (settingsState.defaultmenuorder.length == 0) {
-      let childnodes = menu!.firstChild!.childNodes
-      let newdefaultmenuorder = []
-      for (let i = 0; i < childnodes.length; i++) {
-        const element = childnodes[i]
-        newdefaultmenuorder.push((element as HTMLElement).dataset.key)
-        browser.storage.local.set({ defaultmenuorder: newdefaultmenuorder })
-      }
-    }
     let childnodes = menu!.firstChild!.childNodes
-    if (result.defaultmenuorder.length != childnodes.length) {
+    let newdefaultmenuorder = []
-      for (let i = 0; i < childnodes.length; i++) {
+    for (let i = 0; i < childnodes.length; i++) {
-        const element = childnodes[i]
+      const element = childnodes[i]
-        if (!result.defaultmenuorder.indexOf((element as HTMLElement).dataset.key)) {
+      newdefaultmenuorder.push((element as HTMLElement).dataset.key)
-          let newdefaultmenuorder = result.defaultmenuorder
+      browser.storage.local.set({
-          newdefaultmenuorder.push((element as HTMLElement).dataset.key)
+        defaultmenuorder: newdefaultmenuorder
-          browser.storage.local.set({ defaultmenuorder: newdefaultmenuorder })
+      })
-        }
+    }
+  }
+  let childnodes = menu!.firstChild!.childNodes
+  if (settingsState.defaultmenuorder.length != childnodes.length) {
+    for (let i = 0; i < childnodes.length; i++) {
+      const element = childnodes[i]
+      if (!settingsState.defaultmenuorder.indexOf((element as HTMLElement).dataset.key)) {
+        let newdefaultmenuorder = settingsState.defaultmenuorder
+        newdefaultmenuorder.push((element as HTMLElement).dataset.key)
+        browser.storage.local.set({
+          defaultmenuorder: newdefaultmenuorder
+        })
       }
     }
+  }
 
-    MenuOptionsOpen = true
+  MenuOptionsOpen = true
 
-    let cover = document.createElement('div')
+  var cover = document.createElement('div')
-    cover.classList.add('notMenuCover')
+  cover.classList.add('notMenuCover')
-    menu!.style.zIndex = '20'
+  menu!.style.zIndex = '20'
-    menu!.style.setProperty('--menuHidden', 'flex')
+  menu!.style.setProperty('--menuHidden', 'flex')
-    container!.append(cover)
+  container!.append(cover)
 
-    let menusettings = document.createElement('div')
+  var menusettings = document.createElement('div')
-    menusettings.classList.add('editmenuoption-container')
+  menusettings.classList.add('editmenuoption-container')
 
-    let defaultbutton = document.createElement('div')
+  var defaultbutton = document.createElement('div')
-    defaultbutton.classList.add('editmenuoption')
+  defaultbutton.classList.add('editmenuoption')
-    defaultbutton.innerText = 'Restore Default'
+  defaultbutton.innerText = 'Restore Default'
-    defaultbutton.id = 'restoredefaultoption'
+  defaultbutton.id = 'restoredefaultoption'
 
-    let savebutton = document.createElement('div')
+  var savebutton = document.createElement('div')
-    savebutton.classList.add('editmenuoption')
+  savebutton.classList.add('editmenuoption')
-    savebutton.innerText = 'Save'
+  savebutton.innerText = 'Save'
-    savebutton.id = 'restoredefaultoption'
+  savebutton.id = 'restoredefaultoption'
 
-    menusettings.appendChild(defaultbutton)
+  menusettings.appendChild(defaultbutton)
-    menusettings.appendChild(savebutton)
+  menusettings.appendChild(savebutton)
 
-    menu!.appendChild(menusettings)
+  menu!.appendChild(menusettings)
+
+  var ListItems = menu!.firstChild!.childNodes
+  for (let i = 0; i < ListItems.length; i++) {
+    const element1 = ListItems[i]
+    const element = element1 as HTMLElement
+
+    (element as HTMLElement).classList.add('draggable');
+    if ((element as HTMLElement).classList.contains('hasChildren')) {
+      (element as HTMLElement).classList.remove('active');
+      (element.firstChild as HTMLElement).classList.remove('noscroll');
+    }
+
+    let MenuItemToggle = stringToHTML(
+      `<div class="onoffswitch" style="margin: auto 0;"><input class="onoffswitch-checkbox notification menuitem" type="checkbox" id="${(element as HTMLElement).dataset.key}"><label for="${(element as HTMLElement).dataset.key}" class="onoffswitch-label"></label>`
+    ).firstChild;
+    (element as HTMLElement).append(MenuItemToggle!)
+
+    if (!element.dataset.betterseqta) {
+      const a = document.createElement('section')
+      a.innerHTML = element.innerHTML
+      cloneAttributes(a, element)
+      menu!.firstChild!.insertBefore(a, element)
+      element.remove()
+    }
+  }
+
+  if (Object.keys(settingsState.menuitems).length == 0) {
+    menubuttons = menu!.firstChild!.childNodes
+    let menuItems = {} as any
+    for (var i = 0; i < menubuttons.length; i++) {
+      var id = (menubuttons[i] as HTMLElement).dataset.key
+      const element: any = {}
+      element.toggle = true;
+      (menuItems[id as keyof typeof menuItems] as any) = element;
+    }
+    settingsState.menuitems = menuItems
+  }
+
+  var menubuttons: any = document.getElementsByClassName('menuitem')
+
+  let menuItems = settingsState.menuitems as any
+  let buttons = document.getElementsByClassName('menuitem')
+  for (let i = 0; i < buttons.length; i++) {
+    let id = buttons[i].id as string | undefined
+    if (menuItems[id as keyof typeof menuItems]) {
+      (buttons[i] as HTMLInputElement).checked = menuItems[id as keyof typeof menuItems].toggle
+    } else {
+      (buttons[i] as HTMLInputElement).checked = true
+    }
+    (buttons[i] as HTMLInputElement).checked = true
+  }
+
+  try {
+    var el = document.querySelector('#menu > ul')
+    var sortable = Sortable.create((el as HTMLElement), {
+      draggable: '.draggable',
+      dataIdAttr: 'data-key',
+      animation: 150,
+      easing: "cubic-bezier(.5,0,.5,1)",
+      onEnd: function() {
+        saveNewOrder(sortable)
+      },
+    });
+  } catch (err) {
+    console.log(err)
+  }
+
+  function changeDisplayProperty(element: any) {
+    if (!element.checked) {
+      element.parentNode.parentNode.style.display = 'var(--menuHidden)'
+    }
+    if (element.checked) {
+      element.parentNode.parentNode.style.setProperty(
+        'display',
+        'flex',
+        'important',
+      )
+    }
+  }
+
+  function StoreMenuSettings() {
+    let menu = document.getElementById('menu')
+    const menuItems: any = {}
+    let menubuttons = menu!.firstChild!.childNodes
+    const button = document.getElementsByClassName('menuitem')
+    for (let i = 0; i < menubuttons.length; i++) {
+      const id = (menubuttons[i] as HTMLElement).dataset.key
+      const element: any = {}
+      element.toggle = (button[i] as HTMLInputElement).checked
+
+      menuItems[id as keyof typeof menuItems] = element
+    }
+    settingsState.menuitems = menuItems
+  }
+
+  for (let i = 0; i < menubuttons.length; i++) {
+    const element = menubuttons[i]
+    element.addEventListener('change', () => {
+      element.parentElement.parentElement.getAttribute('data-key')
+      StoreMenuSettings()
+      changeDisplayProperty(element)
+    })
+  }
+
+  function closeAll() {
+    console.log("Closing!")
+    menusettings?.remove()
+    cover?.remove()
+    MenuOptionsOpen = false
+    menu!.style.setProperty('--menuHidden', 'none')
 
-    let ListItems = menu!.firstChild!.childNodes
     for (let i = 0; i < ListItems.length; i++) {
       const element1 = ListItems[i]
       const element = element1 as HTMLElement
+      element.classList.remove('draggable')
+      element.setAttribute('draggable', 'false')
 
-      (element as HTMLElement).classList.add('draggable');
-      if ((element as HTMLElement).classList.contains('hasChildren')) {
-        (element as HTMLElement).classList.remove('active');
-        (element.firstChild as HTMLElement).classList.remove('noscroll');
-      }
-
-      let MenuItemToggle = stringToHTML(
-        `<div class="onoffswitch" style="margin: auto 0;"><input class="onoffswitch-checkbox notification menuitem" type="checkbox" id="${(element as HTMLElement).dataset.key}"><label for="${(element as HTMLElement).dataset.key}" class="onoffswitch-label"></label>`
-      ).firstChild;
-      (element as HTMLElement).append(MenuItemToggle!)
 
       if (!element.dataset.betterseqta) {
-        const a = document.createElement('section')
+        const a = document.createElement('li')
         a.innerHTML = element.innerHTML
         cloneAttributes(a, element)
         menu!.firstChild!.insertBefore(a, element)
@@ -987,142 +1072,33 @@ export function OpenMenuOptions() {
       }
     }
 
-    if (Object.keys(result.menuitems).length == 0) {
+    let switches = menu!.querySelectorAll('.onoffswitch')
-      menubuttons = menu!.firstChild!.childNodes
+    for (let i = 0; i < switches.length; i++) {
-      var menuItems = {}
+      switches[i].remove()
-      for (var i = 0; i < menubuttons.length; i++) {
-        var id = (menubuttons[i] as HTMLElement).dataset.key
-        const element: any = {}
-        element.toggle = true;
-        (menuItems[id as keyof typeof menuItems] as any) = element;
-      }
-      browser.storage.local.set({ menuitems: menuItems })
     }
+  }
 
-    var menubuttons: any = document.getElementsByClassName('menuitem')
+  cover?.addEventListener('click', closeAll)
-    const result1 = browser.storage.local.get(['menuitems'])
+  savebutton?.addEventListener('click', closeAll)
-    function open (result: any) {
-      var menuItems = result.menuitems
-      let buttons = document.getElementsByClassName('menuitem')
-      for (var i = 0; i < buttons.length; i++) {
-        var id = buttons[i].id
-        if (menuItems[id]) {
-          (buttons[i] as HTMLInputElement).checked = menuItems[id].toggle
-        }
-        if (!menuItems[id]) {
-          (buttons[i] as HTMLInputElement).checked = true
-        }
-      }
-    }
-    result1.then(open, onError)
 
-    try {  
+  defaultbutton?.addEventListener('click', function() {
-      var el = document.querySelector('#menu > ul')
+    const options = settingsState.defaultmenuorder
-      var sortable = Sortable.create((el as HTMLElement), {
+    browser.storage.local.set({
-        draggable: '.draggable',
+      menuorder: options
-        dataIdAttr: 'data-key',
+    })
-        animation: 150,
+    ChangeMenuItemPositions(options)
-        easing: "cubic-bezier(.5,0,.5,1)",
-        onEnd: function () {
-          saveNewOrder(sortable)
-        },
-      });  
-    } catch (err) {
-      console.log(err)
-    }
-
-    function changeDisplayProperty(element: any) {
-      if (!element.checked) {
-        element.parentNode.parentNode.style.display = 'var(--menuHidden)'
-      }
-      if (element.checked) {
-        element.parentNode.parentNode.style.setProperty(
-          'display',
-          'flex',
-          'important',
-        )
-      }
-    }
-
-    function StoreMenuSettings() {
-      const menuItems: any = {}
-      const menubuttons = menu!.firstChild!.childNodes
-      const button = document.getElementsByClassName('menuitem')
-      for (let i = 0; i < menubuttons.length; i++) {
-        const id = (menubuttons[i] as HTMLElement).dataset.key
-        const element: any = {}
-        element.toggle = (button[i] as HTMLInputElement).checked
-
-        menuItems[id as keyof typeof menuItems] = element
-      }
-      browser.storage.local.set({ menuitems: menuItems })
-    }
 
     for (let i = 0; i < menubuttons.length; i++) {
       const element = menubuttons[i]
-      element.addEventListener('change', () => {
+      element.checked = true
-        element.parentElement.parentElement.getAttribute('data-key')
+      element.parentNode.parentNode.style.setProperty(
-        StoreMenuSettings()
+        'display',
-        changeDisplayProperty(element)
+        'flex',
-      })
+        'important',
+      )
     }
-
+    saveNewOrder(sortable)
-    function closeAll() {
+  })
-      console.log("Closing!")
-      ListItems = menu!.firstChild!.childNodes
-      menusettings.remove()
-      cover.remove()
-      MenuOptionsOpen = false
-      menu!.style.setProperty('--menuHidden', 'none')
-
-      for (let i = 0; i < ListItems.length; i++) {
-        const element1 = ListItems[i]
-        const element = element1 as HTMLElement
-        element.classList.remove('draggable')
-        element.setAttribute('draggable', 'false')
-
-
-        if (!element.dataset.betterseqta) {
-          const a = document.createElement('li')
-          a.innerHTML = element.innerHTML
-          cloneAttributes(a, element)
-          menu!.firstChild!.insertBefore(a, element)
-          element.remove()
-        }
-      }
-
-      let switches = menu!.querySelectorAll('.onoffswitch')
-      for (let i = 0; i < switches.length; i++) {
-        switches[i].remove()
-      }
-
-    }
-
-    cover.addEventListener('click', closeAll)
-    savebutton.addEventListener('click', closeAll)
-
-    defaultbutton.addEventListener('click', function () {
-      const result = browser.storage.local.get()
-      function open (response: any) {
-        const options = response.defaultmenuorder
-        browser.storage.local.set({ menuorder: options })
-        ChangeMenuItemPositions(options)
-
-        for (let i = 0; i < menubuttons.length; i++) {
-          const element = menubuttons[i]
-          element.checked = true
-          element.parentNode.parentNode.style.setProperty(
-            'display',
-            'flex',
-            'important',
-          )
-        }
-        saveNewOrder(sortable)
-      }
-      result.then(open, onError)
-    })
-  }
-  result.then(open, onError)
 }
 
 function saveNewOrder(sortable: any) {

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -6,6 +6,7 @@ import { settingsState } from "../utils/listeners/SettingsState";
 import { updateAllColors } from "./colors/Manager";
 
 export async function AddBetterSEQTAElements() {
+  console.log('AddBetterSEQTAElements');
   if (settingsState.onoff) {    
     initializeSettings();
     if (settingsState.DarkMode) {

src/seqta/ui/Animation.ts

@@ -6,20 +6,22 @@ import { settingsState } from "../utils/listeners/SettingsState";
  * @param {number} [minDuration=1] - The minimum animation duration in seconds.
  * @param {number} [maxDuration=10] - The maximum animation duration in seconds.
  */
-export function updateBgDurations(minDuration: number = 0.5, maxDuration: number = 10) {
+export function updateBgDurations() {
   // Class names to look for
   const bgClasses = ['bg', 'bg2', 'bg3'];
-  let reversedValue: any;
+    
-
-  // Reverse the slider direction to align with the animation
-  reversedValue = 150 - parseInt(settingsState.bksliderinput);
-  
-  // Range of possible animation durations
-  const durationRange = maxDuration - minDuration;
-  
   // Function to calculate animation duration
-  const calcDuration = (baseValue: number, offset = 0) => minDuration + ((baseValue / 200) + offset) * durationRange;
+  const calcDuration = (
-  
+    baseValue: number, 
+    offset = 0, 
+    minBase = 50, 
+    maxBase = 150, 
+  ) => {
+    const scaledValue = 2 + ((maxBase - baseValue) / (maxBase - minBase)) ** 4;
+    console.log(scaledValue);
+    return scaledValue + offset;
+  };
+    
   // Iterate through each class name to update its animation duration
   bgClasses.forEach((className, index) => {
     const elements = document.getElementsByClassName(className);
@@ -29,7 +31,8 @@ export function updateBgDurations(minDuration: number = 0.5, maxDuration: number
     }
     
     const offset = index * 0.05;
-    const duration = calcDuration(reversedValue, offset);
+    const duration = calcDuration(parseInt(settingsState.bksliderinput), offset);
     (elements[0] as HTMLElement).style.animationDuration = `${duration}s`;
+    (elements[0] as HTMLElement).style.animationDelay = `${offset * 5}s`;
   });
 }

src/types/storage.ts

@@ -32,6 +32,7 @@ export interface SettingsState {
   shortcuts: Shortcut[];
   subjectfilters: Record<string, any>;
   transparencyEffects: boolean;
+  justupdated?: boolean | null;
 }
 
 interface ToggleItem {