content.js rework, fix late cache hit for timestamp

.terserrc

@@ -1,11 +1,3 @@
 {
-  "mangle": true,
-  "compress": {
-    "pure_funcs": [
-      "console.log",
-      "console.info",
-      "console.debug",
-      "console.warn"
-    ]
-  }
+  "mangle": true
 }

source/background/background.js

@@ -48,7 +48,8 @@ const retrieveContentData = async (metadata, accessToken) => {
   let key
   let apiCall
 
-  console.log(metadata)
+  console.group(`Content data for ${metadata.id}`)
+  console.log('Metadata:', metadata)
 
   switch (metadata.type) {
     case 'post':
@@ -66,7 +67,13 @@ const retrieveContentData = async (metadata, accessToken) => {
   }
 
   const cachedData = await Cache.read(key)
-  if (cachedData) return cachedData.data
+  if (cachedData) {
+    console.log('✅ Retrieving from cache')
+    console.groupEnd()
+    return cachedData.data
+  } else {
+    console.log('⚠️ Cache is empty, retrieving from API')
+  }
 
   const data = await apiCall(metadata, accessToken)
 
@@ -76,7 +83,8 @@ const retrieveContentData = async (metadata, accessToken) => {
   // 5 minutes is enough (in case the post was edited)
   Cache.write(key, videos, 5)
 
-  console.log(`${metadata.postId} from API`, videos)
+  console.log(`✅ ${metadata.id} from API`, videos)
+  console.groupEnd()
   return videos
 }
 
@@ -118,7 +126,12 @@ const saveTimestamp = async (id, timestamp) => {
  * @param {String} id
  * @returns {Object}
  */
-const retrieveTimestamp = async (id) => await Cache.read(`t:${id}`)
+const retrieveTimestamp = async (id) => {
+  console.group(`Timestamp data for ${id}`)
+  const timestamp = await Cache.read(`t:${id}`)
+  console.groupEnd()
+  return timestamp
+}
 
 /**
  * Open options page

source/content/content.js

@@ -1,108 +1,111 @@
-import optionsStorage from '../global/options-storage.js'
 import * as domHelpers from './domHelpers.js'
+import optionsStorage from '../global/options-storage.js'
 
-// Classes and tag names
-const optionsInMenuBaseClass = 'MiniProfile_dropdownContainer_'
-const topMenuLeftBaseClass = 'TopMenu_left_'
-const streamPageBaseClass = 'StreamPage_block_'
-const vkVideoPlayerElement = 'vk-video-player'
-const audioPlayerElement = 'AudioBlock_root_'
+const root = document.querySelector('div#root')
+const body = document.querySelector('body')
+let options = null
 
-// Global variables
-let options
-let theaterMode = false
+/**
+ * Process audio players in root
+ */
+const processAudioPlayers = () => {
+  const audioPlayers = root.querySelectorAll('div[class*=AudioBlock_root_]:not([data-complete=true])')
+
+  for (const player of audioPlayers) {
+    // Skip nodes from app/messages
+    if (player.classList.value.includes(['Messages_audioPlayer_'])) continue
+
+    domHelpers.injectAudioPlayerChanges(player, options)
+    player.dataset.complete = true
+  }
+}
 
 /**
- * Main function
- * @async
+ * Process video players in root
  */
-const main = async () => {
-  options = await optionsStorage.getAll()
+const processVideoPlayers = () => {
+  const videoPlayers = root.querySelectorAll('vk-video-player:not([data-complete=true])')
 
-  // 1. Permanent changes
+  for (const player of videoPlayers) {
+    domHelpers.injectVkPlayerChanges(player, options)
+    player.dataset.complete = true
+  }
+}
 
-  // Inject extension icon to the top left menu
-  const topMenuLeft = document.querySelector(`div[class*=${topMenuLeftBaseClass}]`)
+/**
+ * Inject extension icon to the top left menu
+ */
+const injectExtensionIcon = () => {
+  const topMenuLeft = body.querySelector('div[class*=TopMenu_left_]')
   domHelpers.injectIconInTopMenu(topMenuLeft)
 
   if (location.hash && location.hash.includes('mb_update')) {
     location.href = '#'
 
-    const changelogButton = document.querySelector('a#MB_changelog')
+    const changelogButton = body.querySelector('a#MB_changelog')
     changelogButton.click()
   }
+}
 
-  // Inject VK video player changes (if loaded directly)
-  const videoPlayer = document.querySelectorAll(vkVideoPlayerElement)
-  for (const player of videoPlayer) {
-    domHelpers.injectVkPlayerChanges(player, options)
+/**
+ * Inject theater mode
+ */
+const processTheaterMode = (isActive = null) => {
+  if (isActive) {
+    domHelpers.injectStreamPageChanges(isActive)
+    return
   }
 
-  // Inject audio player changes (if loaded diretly)
-  const audioPlayer = document.querySelectorAll(`div[class*=${audioPlayerElement}]`)
-  for (const player of audioPlayer) {
-    domHelpers.injectAudioPlayerChanges(player, options)
+  isActive = false
+  if (window.location.href.includes('/video_stream')) {
+    isActive = true
   }
 
-  // Inject stream page stuff (if loaded directly)
-  if (options.theater_mode && !theaterMode) {
-    const streamPageBlock = document.querySelector(`div[class*=${streamPageBaseClass}]`)
+  domHelpers.injectStreamPageChanges(isActive)
+}
 
-    if (streamPageBlock) {
-      domHelpers.injectStreamPageChanges(true)
-      theaterMode = true
-    }
+/**
+ * Inject full layout
+ */
+const injectFullLayout = () => {
+  if (options.full_layout) domHelpers.injectFullLayout()
+}
+
+/**
+ * Main function
+ * @async
+ */
+const main = async () => {
+  options = await optionsStorage.getAll()
+  if (!options) {
+    console.warn('no options???')
+    return
   }
 
-  // Apply widescreen layout (if enabled)
-  if (options.full_layout) domHelpers.injectFullLayout()
+  // 1. Permanent changes
+  injectExtensionIcon()
+  injectFullLayout()
+  processAudioPlayers()
+  processVideoPlayers()
+  processTheaterMode()
 
   // 2. Dynamic changes
   const observer = new MutationObserver((mutations, _observer) => {
     try {
+      processAudioPlayers()
+      processVideoPlayers()
+
+      // Checks for streamer page
       for (const mutation of mutations) {
-        // Checking added elements
         for (const node of mutation.addedNodes) {
-          // 1. Checking for whole elements
-
-          // Inject VK video player changes
-          if (node.tagName === vkVideoPlayerElement.toUpperCase()) {
-            domHelpers.injectVkPlayerChanges(node, options)
-            continue
-          }
-
-          // 2. Checking for classes only
-          if (!node.classList || !node.classList.length) continue
-          const classes = node.classList.value
-
-          // Inject VK audio player changes
-          if (classes.includes(audioPlayerElement)) {
-            domHelpers.injectAudioPlayerChanges(node, options)
-            continue
-          }
-
-          // Inject extension options link to the menu
-          if (classes.includes(optionsInMenuBaseClass)) {
-            domHelpers.injectOptionsLink(node)
-            continue
-          }
-
-          // Inject stream page stuff
-          if (classes.includes('StreamPage_block_') && options.theater_mode && !theaterMode) {
-            domHelpers.injectStreamPageChanges(true)
-            theaterMode = true
+          if (node.classList?.value.includes('StreamPage_block_')) {
+            processTheaterMode(true)
           }
         }
 
-        // Checking removed elements
         for (const node of mutation.removedNodes) {
-          // 1. Checking for classes only
-          if (!node.classList || !node.classList.length) continue
-          const classes = node.classList.value
-
-          if (classes.includes('StreamPage_block_') && options.theater_mode && theaterMode) {
-            domHelpers.injectStreamPageChanges(false)
-            theaterMode = false
+          if (node.classList?.value.includes('StreamPage_block_')) {
+            processTheaterMode(false)
           }
         }
       }
@@ -111,10 +114,9 @@ const main = async () => {
     }
   })
 
-  observer.observe(document, {
+  observer.observe(root, {
     childList: true,
-    subtree: true,
-    attributes: true
+    subtree: true
   })
 }
 

source/content/content.scss

@@ -78,7 +78,7 @@ body.MB_stream {
     height: 100% !important;
   }
 
-  div[class*=StreamChatToggler_containerChat_] {
+  div[class*=StreamChatToggler_root_] {
     top: 0 !important;
   }
 

source/content/domHelpers.js

@@ -92,10 +92,10 @@ export const injectFullLayout = () => {
  * Inject stream page stuff
  * @param {Element} element
  */
-export const injectStreamPageChanges = (enabled) => {
+export const injectStreamPageChanges = (isActive) => {
   if (!body) body = document.querySelector('body')
 
-  if (enabled) {
+  if (isActive) {
     body.classList.add('MB_stream')
     window.addEventListener('scroll', scrollEvent)
   } else {