☰

Super Anki

Supercharges AnkiWeb. Currently Supported Functionality - Show card total, done and remaining count per session - Dark Mode

// ==UserScript==
// @name         Super Anki
// @version      9
// @grant        none
// @match        https://*.ankiuser.net/**
// @match        https://*.ankiweb.net/decks
// @description  Supercharges AnkiWeb. Currently Supported Functionality - Show card total, done and remaining count per session - Dark Mode
// @namespace    asleepysamurai.com
// @license      BSD Zero Clause License
// ==/UserScript==

const version = GM_info.script.version
const key = 'super-anki-data'

function readLocalStorage(){
  return JSON.parse(localStorage.getItem(key)) || {}
}

function writeLocalStorage(dataDiff = {}){
  const data = {...readLocalStorage(), ...dataDiff}
  localStorage.setItem(key, JSON.stringify(data))
  return data
}

function initSpeechSynthesis(){
  addSpeakButtons()
  //speakAllOnCardSide()
  
  const observer = new MutationObserver(() => {
    addSpeakButtons()
    //speakAllOnCardSide()
  })

  const qaNode = document.querySelector('#qa')
  observer.observe(qaNode, { characterData: false, attributes: false, childList: true, subtree: false });
}

let isSpeaking = false
const speakerIcon = String.fromCodePoint(0x1F508)
const speakingIcon = String.fromCodePoint(0x1F50A)

function say(voice, text, button){
  if(isSpeaking){
    return
  }
  
  isSpeaking = true
  const utterThis = new SpeechSynthesisUtterance(text);
  utterThis.voice = voice
    
  utterThis.addEventListener('end', (evt) => {
    button.textContent = speakerIcon
    isSpeaking = false
  })

  button.textContent = speakingIcon
  window.speechSynthesis.speak(utterThis)
}

function addSpeakButton(voice, speakableTextNode, childNodes = [speakableTextNode]){
  if(!speakableTextNode.textContent.trim()){
      return
  }

  const speakButton = document.createElement('div')
  speakButton.textContent = speakerIcon
  speakButton.setAttribute('style', 'padding-right: 0.5rem;font-size: 2rem;cursor: pointer')
  speakButton.classList.add('speak-button')
  speakButton.addEventListener('click', (ev)=>{
    say(voice, speakableTextNode.textContent.trim(), ev.currentTarget)
  })

  const container = document.createElement('div')
  const wordContainer = document.createElement('div')

  container.appendChild(speakButton)
  container.appendChild(wordContainer)
  container.setAttribute('style', 'display: flex;justify-content: center;align-items: center;')

  speakableTextNode.parentNode.insertBefore(container, speakableTextNode)
  childNodes.forEach(node => wordContainer.appendChild(node))
}

function addDESpeakButton(speakableTextNode, childNodes = [speakableTextNode]){
  const deVoice = window.speechSynthesis.getVoices().find(v=>v.lang==='de-DE')
  if(!deVoice){
    console.log('No German Support')
    return false
  }
  
  addSpeakButton(deVoice, speakableTextNode, childNodes)
}

function addENSpeakButton(speakableTextNodes = []){
  const enVoice = window.speechSynthesis.getVoices().find(v=>v.lang==='en-US')
  if(!enVoice){
    console.log('No English Support')
    return false
  }
  
  const speakButton = document.createElement('span')
  speakButton.textContent = speakerIcon
  speakButton.setAttribute('style', 'padding-right: 0.5rem;font-size: 2rem;cursor: pointer')
  speakButton.classList.add('speak-button')

  speakableTextNodes.forEach(node=>addSpeakButton(enVoice, node))
}

function addSpeakButtons(){
  const word = document.querySelector('.word')
  const ipa = document.querySelector('.ipa')
  addDESpeakButton(word, [word,ipa])

  const deSentence = document.querySelectorAll('.spanish')
  deSentence.forEach(deSentence=>addDESpeakButton(deSentence))

  const definitions = Array.from(document.querySelectorAll('.definition'))
  addENSpeakButton(definitions)

  const enSentences = document.querySelectorAll('.english')
  addENSpeakButton(enSentences)
}

function speakAllOnCardSide(){
  const [deVoice, enVoice] = window.speechSynthesis.getVoices().reduce((voices,v)=>{
    if(v.lang==='en-US'){
      voices[1] = v
    } else if(v.lang === 'de-DE'){
      voices[0] = v
    }

    return voices
  },[])

  function getUtterance(node, voice){
    const text = node?.innerText?.trim() || ''
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.voice = voice
    return utterance
  }

  const utterances = [
    document.querySelector('.word'), 
    ...Array.from(document.querySelectorAll('.definition'))
  ].map((node,i)=>getUtterance(node, i === 0 ? deVoice : enVoice))

  utterances.forEach(u=>{
    window.speechSynthesis.speak(u)
    const pause = new SpeechSynthesisUtterance(', !')
    pause.voice = enVoice
    window.speechSynthesis.speak(pause)
  })
}

function initMediaSession(){
  if (! "mediaSession" in navigator) {
    return
  }

  navigator.mediaSession.metadata = new MediaMetadata({
    title: "SuperAnki",
    artist: `v${version}`,
    artwork: [
      {
        src: "https://ankiuser.net/logo.png",
        type: "image/png",
      },
    ],
  });

  navigator.mediaSession.setActionHandler("play", () => {
    speakAllOnCardSide()
  });
  navigator.mediaSession.setActionHandler("pause", () => {
    window.speechSynthesis.cancel()
  });
  navigator.mediaSession.setActionHandler("stop", () => {
    window.speechSynthesis.cancel()
  });

  navigator.mediaSession.setActionHandler("previoustrack", () => {
    const againButton = Array.from(document.querySelectorAll('.btn.m-1')).find(b=>b.innerText.toLowerCase() === 'again')
    againButton.dispatchEvent(new PointerEvent('click'))
  });
  navigator.mediaSession.setActionHandler("nexttrack", () => {
    const goodButton = Array.from(document.querySelectorAll('.btn.m-1')).find(b=>b.innerText.toLowerCase() === 'good')
    const showAnswerButton = Array.from(document.querySelectorAll('.btn.btn-lg')).find(b=>b.innerText.toLowerCase() === 'show answer')
    (goodButton||showAnswerButton).dispatchEvent(new PointerEvent('click'))
  });
}

function getTodaysDoneCount(done){
  const now = new Date()
  const cutOffTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 4, 0, 0)
  if(now.getHours() < 4){
    cutOffTime.setTime(cutOffTime.getTime() - (1000 * 60 * 60 * 24))
  }

  const savedData = readLocalStorage()
  if(done === 0 && savedData.doneCount !== undefined && savedData.lastDoneTime && savedData.lastDoneTime >= cutOffTime.getTime()){
    done = savedData.doneCount
  }
  
  writeLocalStorage({doneCount: done, lastDoneTime: now.getTime()})
  return done
}

function formatCounts(total, remaining){
  const done = getTodaysDoneCount(total - remaining)
  return `${remaining} Left + ${done} Done = ${total}`
}

function addTotalCount(){
  const counts = Array.from(document.querySelectorAll('.count'))
  
  const equals = document.createTextNode(' = ')
  
  const totalCards = counts.reduce((total, thisCount) => total + parseInt(thisCount.innerText), 0)
  const totalCount = counts[0].cloneNode(true)
  totalCount.innerText = formatCounts(totalCards, totalCards)
  totalCount.classList.remove('active', 'new', 'learn', 'review')
  
  const countParent = counts[0].parentElement
  countParent.appendChild(equals)
  countParent.appendChild(totalCount)
  
  const observer = new MutationObserver(() => {
    const restCards = counts.reduce((total, thisCount) => total + parseInt(thisCount.innerText), 0)
    totalCount.innerText = formatCounts(totalCards, restCards)
  })

  counts.forEach(countNode => observer.observe(countNode, { characterData: true, attributes: false, childList: true, subtree: true }));
}

function setupObserver(){
  try{
    init()
  }catch(err){
    setTimeout(() => {
    	setupObserver()
    }, 100)
  }
}

function enableDarkMode(){
  const style = document.documentElement.getAttribute('style')
  document.documentElement.setAttribute('style', `${style || ''}; filter: invert(0.9);`)
}

function updateBranding(){
  document.querySelector('.navbar-brand > span').innerHTML = `SuperAnki <small><small>v${version}</small></small>`
}

function init(){
  updateBranding()
  enableDarkMode()
  
  if(window.location.pathname.toLowerCase().startsWith('/study')){
    addTotalCount()
    initSpeechSynthesis()
    initMediaSession()
  }
}

setupObserver()