userscripts/iltapulu.fi/ip-highlight.js

// ==UserScript==
// @name        ip-highlight
// @description TV catalog item highlighter
// @author      ae
// @namespace   Violentmonkey Scripts
// @match       *://www.iltapulu.fi/*
// @version     1.0
// ==/UserScript==

const channelTags = [
  "#channel-1", // YLE 1
  "#channel-2", // YLE 2
  "#channel-3", // MTV3
  "#channel-4", // 4
  "#channel-6", // MTV Sub
  "#channel-5", // TV5
  "#channel-7", // Jim
  "#channel-62", // 6
]

const highlightCodes = {
  sport: "#186f37",
}

const findSportsItems = () => {
  let sportsItems = []
  channelTags.forEach((tag) => {
    const query = `${tag} .op`
    const channelItems = document.querySelectorAll(query)

    channelItems.forEach((item) => {
      const afterStyle = window.getComputedStyle(item, "::after")

      if (afterStyle.content !== "none" && afterStyle.content !== '""') {
        sportsItems.push(item)
      }
    })
  })
  return sportsItems
}

const applyHighlight = () => {
  const sportsItems = findSportsItems()

  sportsItems.forEach((item) => {
    if (item.parentElement.style.backgroundColor !== highlightCodes["sport"]) {
      item.parentElement.style.backgroundColor = highlightCodes["sport"]
    }
  })

  console.log("ip-highlight.js: All sports events highlighted successfully!")
}

const createUpdateObserver = () => {
  let debounceTimer

  const callback = (mutationsList, _observer) => {
    clearTimeout(debounceTimer)

    debounceTimer = setTimeout(() => {
      for (let mutation of mutationsList) {
        if (mutation.type === "childList") {
          console.log(
            "ip-highlight.js: Re-applying highlighting due to changes in the catalog"
          )
          applyHighlight()
          break
        }
      }
    }, 100) // Debounce for 100ms
  }

  return new MutationObserver(callback)
}

const initializeHighlighter = () => {
  const targetNode = document.getElementById("programtable")

  if (targetNode) {
    applyHighlight()
    const observer = createUpdateObserver()
    observer.observe(targetNode, { childList: true, subtree: true })
  } else {
    console.log("ip-highlight.js: Program table not found, retrying in 100ms")
    setTimeout(initializeHighlighter, 100)
  }
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initializeHighlighter)
} else {
  initializeHighlighter()
}