AceFire6 / ordered-arrowverse

A listing of all shows in the Arrowverse in watch order to ensure continuity and sensible ordering for crossover episodes
https://arrowverse.info
102 stars 33 forks source link

Suggestion for functionality - bookmarking episodes #406

Open LordKriegan opened 2 months ago

LordKriegan commented 2 months ago

Hello! I recently started watching the arrowverse and stumbled upon this amazing site! I had an idea for some functionality which I already have implemented with a tampermonkey script. I am not well versed in python or I would have forked your repo and put in a pull request. Instead I just wanted to share my script. It essentially creates a checkbox on every table row. On click, it adds the episode to an array which it saves in local storage. on second click it removes it. Essentially it will allow users to keep track of which episodes they have and haven't watched.

// ==UserScript==
// @name         Arrowverse Bookmarker
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  Save which episodes have been watched.
// @author       Qamar A. Stationwala
// @match        https://arrowverse.info/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=arrowverse.info
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const headerRow = document.querySelector('table > thead > tr')
    headerRow.prepend(document.createElement('td'))
    const bodyRows = document.querySelectorAll('table > tbody > tr')
    const bookmarks = JSON.parse(localStorage.getItem('bookmarks'))
    for (const row of bodyRows) {
        const cell = document.createElement('td')
        const checkbox = document.createElement('input')
        checkbox.type = 'checkbox'
        const episodeId = row.children[1].textContent + ' ' + row.children[2].textContent
        checkbox.dataset.episodeId = episodeId
        if (bookmarks && bookmarks?.indexOf(episodeId) !== -1) checkbox.checked = true
        checkbox.addEventListener('click', e => bookmarkEpisode(e))
        cell.appendChild(checkbox)
        row.prepend(cell)
    }
})();

const bookmarkEpisode = ({target}) => {
    const { episodeId } = target.dataset
    let bookmarks = JSON.parse(localStorage.getItem('bookmarks'))
    const index = bookmarks?.indexOf(episodeId)
    if (target.checked) {
        //add episode to localstorage
        if (!bookmarks) bookmarks = [episodeId] //bookmarks array doesnt exist. create it
        else {
            //check to see if it exists in array already
            if (index === -1) {//does not exist, push to array
                bookmarks.push(episodeId)
            }
            else return //already in array, no need to do anything
        }
    } else {
        //remove episode from localstorage
        if (!bookmarks || index === -1) return //array does not exist OR does not exist in array, no need to do anything
        else {
            bookmarks.splice(index, 1) //remove from bookmarks array
        }
    }
    if (bookmarks) localStorage.setItem('bookmarks', JSON.stringify(bookmarks)) //if bookmarks array exists, save it to local storage
}