Bangumi Status UserScript

userscript.js

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2025-04-14
// @description  try to take over the world!
// @author       You
// @match        https://www.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=scriptcat.org
// @grant        window.onurlchange
// @grant        GM_xmlhttpRequest
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @run-at       document-end
// @require      https://scriptcat.org/lib/513/2.1.0/ElementGetter.js#sha256=aQF7JFfhQ7Hi+weLrBlOsY24Z2ORjaxgZNoni7pAz5U=
// @require      https://cdn.jsdelivr.net/npm/@supabase/[email protected]/dist/umd/supabase.min.js
// ==/UserScript==

const db = supabase.createClient(
    'https://vjoiwkfzeblwbkufrzuo.supabase.co',
    ''
);

function isNumber(value) {
    return typeof value === 'number';
}

async function writeBangumiStatusData(id, status) {
    let _storeKey = `bangumi_status_${id}`;
    console.log(`set ${_storeKey}.status = ${status}`);
    GM_setValue(_storeKey, status);
    const { data, error } = await db
        .from('bangumi_status')
        .upsert({ id: `${id}`, status: status })
        .select();

    if (error !== null) {
        console.log(error);
    }
}

async function readBangumiStatusData(id) {
    let _storeKey = `bangumi_status_${id}`;
    let fallback = GM_getValue(_storeKey, 0) || 0;

    const { data, error } = await db
        .from('bangumi_status')
        .select()
        .eq('id', `${id}`);

    if (error !== null) {
        console.log(error);
    }

    const element = data[0];
    if (element !== undefined) {
        return element.status;
    } else {
        console.log(`get ${_storeKey} fallback to 0`);
        return 0;
    }
}

await readBangumiStatusData('hello')

// status: 
// 0 -> 未标记
// 1 -> 在看
// 2 -> 已看
function getBangumiStatusText(status) {
    if (status == 0) {
        return "未标记"
    }
    if (status == 1) {
        return "在看"
    }
    if (status == 2) {
        return "已看"
    }
    return "未标记"
}

function updateNodeStyleForBangumiStatus(node, status) {
    if (node instanceof Element) {
        let alpha = status == 2 ? 0.5 : 1.0
        node.style.opacity = alpha;
    }
}

async function handleFeedItem(node) {
    if (node instanceof Element) {
        // console.log(node.id);

        let id = node.id;
        let titleNode = node.querySelector(`a[title]`);
        let title = titleNode.title;

        console.log(`${title}[${id}]`);

        if (titleNode.parentElement.querySelector('.bangumi-status-container') == null) {
            let _storeKey = `${title}`;
            let bangumiStatus = await readBangumiStatusData(_storeKey);

            updateNodeStyleForBangumiStatus(node, bangumiStatus);
            console.log(`node setup label: ${title} status: ${bangumiStatus}`);

            let bangumiStatusLabel = document.createElement("button");
            bangumiStatusLabel.className = `bangumi-status-label uk-button uk-button-default`
            bangumiStatusLabel.innerText = getBangumiStatusText(bangumiStatus);

            bangumiStatusLabel.onclick = async function () {
                console.log(`click ${title}`);
                let statusData = await readBangumiStatusData(_storeKey);
                let status = (statusData + 1) % 3;
                await writeBangumiStatusData(_storeKey, status);

                let statusText = getBangumiStatusText(status);
                bangumiStatusLabel.innerText = statusText;
                updateNodeStyleForBangumiStatus(node, status);

                console.log(`onclick finish: ${title} status: ${status}`);
            }

            // let dropdown = document.createElement('div');
            // dropdown.className = `bangumi-status-dropdown uk-width-large`;
            // dropdown.setAttribute('uk-dropdown', 'pos: top-left');
            // dropdown.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';

            // container 
            let container = document.createElement('div');
            container.className = `bangumi-status-container uk-inline`
            // append button label 
            container.appendChild(bangumiStatusLabel);
            // append dropdown
            // container.appendChild(dropdown);

            titleNode.parentElement.insertBefore(container, titleNode);
        }
    }
}

elmGetter.each('.timeline-weekday-item', document, async node => {
    await handleFeedItem(node);
});

elmGetter.each('[id^="feed"]', document, async node => {
    await handleFeedItem(node);
});