☰

Natively Recap

Generate a list of everything you watched or read on Natively this year

// ==UserScript==
// @name          Natively Recap
// @namespace     https://learnnatively.com
// @description   Generate a list of everything you watched or read on Natively this year
// @author        araigoshi
// @version       1.0.9
// @match         https://learnnatively.com/*
// @license       MIT
// @grant         none
// ==/UserScript==

(async function () {
    'use strict';

    const CSS_TEXT = `
    .recap-hide-ui {
        #main-nav {
            display: none;
        }
        .body-footer {
            display: none;
        }
        
        .content-wrapper {
            padding-top: 0;
        }
    }
    #recap-takeover {
        display: grid;
        grid-template-columns: auto;
        justify-content: center;
        justify-items: center;
        padding: 1em;

        header div {
            display: flex;
            gap: 2em;
            align-items: center;
            margin: 5px 0;

            h2 {
                font-size: var(24px);
            }

            p {
                margin-bottom: 0;
            }

            input[type=number] {
                width: 3em;
            }
        }

        .recap-body {
            padding-top: 1em;
            display: grid;
            width: fit-content;
            grid-template-columns: repeat(10, 150px);
            justify-content: center;
            grid-gap: 0.5em;
        }

        .hide-title figure .title {
            display: none;
        }
        
        .hide-series figure .series-progress {
            display: none;
        }

        .hide-level figure .level {
            display: none;
        }
        
        .hide-dates figure .dates {
            display: none;
        }

        figure .level {
            cursor: default;
        }

        figure {
            margin: 0;
            text-align: center;
            padding: 0.3em;
        }

        figure img {
            height: 200px;
            aspect-ratio: keep;
        }

        span.series-progress {
            font-size: 10px;
            white-space: pre;
        }

        p.dates {
            font-size: 10px;
            margin-bottom: 0;
        }
    }
    #recap-dialog {
        padding: 1em;
        header {
            display: flex;
            align-items: center;
            margin-bottom: 1em;

            h2 {
                flex-grow: 1;
            }
        }
        #recap-settings-body {
            width: 900px;
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: 0.5em;

            .full-width {
                grid-column: 1/4;
            }

            h6.action {
                text-align: center;
            }

            .show-settings {
                display: flex;
                gap: 2em;
            }

            h4.full-width:not(:first-child) {
                margin-top: 1em;
            }
        }
    }
    `;

    const RECAP_DIALOG_ID = 'recap-dialog';

    const NATIVELY_LEVEL_RANGES = {
        'n5': { min: 0, max: 12 },
        'n4': { min: 13, max: 19 },
        'n3': { min: 20, max: 26 },
        'n2': { min: 27, max: 33 },
        'n1': { min: 34, max: 40 },
        'n1_plus': { min: 41, max: 999 },
    }

    const DEFAULT_COLORS = {
        'recap-background': 'rgba(255, 255, 255, 0)',
        'recap-text': '#161314',
        'manga': '#f7eafa',
        'manhwa': '#f7eafa',
        'comic': '#f7eafa',
        'novel': '#d9c1de',
        'light_novel': '#d9c1de',
        'childrens_book': '#d9c1de',
        'graded_reader': '#d9c1de',
        'textbook': '#d9c1de',
        'nonfiction': '#d9c1de',
        'movie': '#c7dec1',
        'tv_season': '#bce3b2',
        'other': '#d9d9d9',
    }

    const COLOR_NAME_LOOKUPS = {
        'recap-background': 'Recap Background',
        'recap-text': 'Text',
        'manga': 'Manga',
        'manhwa': 'Manhwa',
        'comic': 'Comic',
        'novel': 'Novel',
        'light_novel': 'Light Novel',
        'childrens_book': 'Children\'s Book',
        'graded_reader': 'Graded Reader',
        'textbook': 'Textbook',
        'nonfiction': 'Non-fiction',
        'movie': 'Movie',
        'tv_season': 'TV Season',
        'other': 'Other',
    };

    let state = {
        startDate: new Date("2024-01-01"),
        endDate: new Date("2024-12-31"),
        finishedFilter: {},
        settings: {
            columns: 10,
            nameReplacements: new Map(),
            colorOverrides: new Map(),
            defaultStartDate: "2024-01-01",
            defaultEndDate: "2024-12-31",
            show: {
                dates: true,
                title: true,
                seriesPos: true,
                level: false,
            }
        }
    };


    function saveSettings() {
        window.localStorage.setItem("araigoshi-recap-settings", JSON.stringify({
            columns: state.settings.columns,
            show: state.settings.show,
            nameReplacements: Object.fromEntries(state.settings.nameReplacements.entries()),
            colorOverrides: Object.fromEntries(state.settings.colorOverrides.entries()),
            defaultStartDate: state.startDate.toISOString(),
            defaultEndDate: state.endDate.toISOString(),
        }))
    }

    function loadSettings() {
        const savedSettingsStr = window.localStorage.getItem("araigoshi-recap-settings");
        if (savedSettingsStr === null) {
            return;
        }
        const savedSettings = JSON.parse(savedSettingsStr);
        if (savedSettings?.columns) {
            state.settings.columns = savedSettings.columns;
        }
        if (savedSettings?.nameReplacements) {
            state.settings.nameReplacements = new Map(Object.entries(savedSettings.nameReplacements));
        }
        if (savedSettings?.colorOverrides) {
            state.settings.colorOverrides = new Map(Object.entries(savedSettings.colorOverrides));
        }

        if (savedSettings?.show) {
            state.settings.show = {
                ...state.settings.show,
                ...savedSettings.show,
            };
        }

        if (savedSettings?.defaultStartDate) {
            state.startDate = new Date(savedSettings.defaultStartDate);
        }

        if (savedSettings?.defaultEndDate) {
            state.endDate = new Date(savedSettings.defaultEndDate);
        }
    }

    function loadStylesheet() {
        console.log('Loading recap stylesheet');
        if (document.getElementById('recap-styles') === null) {
            let styleSheet = document.createElement('style');
            styleSheet.id = 'recap-styles';
            styleSheet.textContent = CSS_TEXT;
            document.head.appendChild(styleSheet);
        }
        if (document.getElementById('recap-style-overrides') === null) {
            let overrideStyleSheet = document.createElement('style');
            overrideStyleSheet.id = 'recap-style-overrides';
            document.head.appendChild(overrideStyleSheet);
        }
    }

    function createDialog() {
        const el = document.createElement('dialog');
        el.id = RECAP_DIALOG_ID;
        document.body.appendChild(el);
        state.recapDialog = el;
    }

    function buildRequest(libraryType, page, finishedFilterId) {
        return {
            "page": page,
            "numOfPages": 1,
            "totalCount": 0,
            "itemType": "",
            "genre": "",
            "q": "",
            "bookProviders": "",
            "watchProviders": "",
            "location": "",
            "minLevel": "",
            "maxLevel": "",
            "levelFilter": "",
            "bookType": "",
            "tagFilters": "",
            "loading": false,
            "onlyFree": false,
            "excludeTemporaryRatings": false,
            "excludeLibrary": false,
            "wanikani": false,
            "mobileFilter": false,
            "tags": "",
            "includeSpoilers": false,
            "includeMinorElements": false,
            "includeMajorElementsOnly": false,
            "itemTypes": [],
            "genreOptions": [],
            "openSeries": [],
            "error": "",
            "libraryType": libraryType,
            "sort": "-recent",
            "subs": "",
            "favorite": false,
            "resultActive": null,
            "listFilter": finishedFilterId,
            "lists": [],
            "customTags": "",
            "collapseSeries": false,
            "pageSize": 50,
            "needsBackendSearch": false
        };
    }

    function isItemInRange(startDate, endDate) {
        return function (item) {
            const itemFinishedUnixDate = item.dateFinishedData?.timestampSeconds;
            if (!itemFinishedUnixDate) {
                return false;
            }

            const itemFinishedDate = new Date(itemFinishedUnixDate * 1000);
            const nextDay = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1);

            return startDate <= itemFinishedDate && itemFinishedDate < nextDay;
        }
    }

    function jsToIsoDate(jsDate) {
        return jsDate.toISOString().substring(0, 10);
    }

    function transformItemDate(item, key) {
        if (!item[key]) {
            return 'Unknown';
        }
        const unixDate = item[key].timestampSeconds;
        const jsDate = new Date(unixDate * 1000);
        return jsToIsoDate(jsDate);
    }

    function calculateRatingGroup(rating) {
        for (const [key, def] of Object.entries(NATIVELY_LEVEL_RANGES)) {
            if (def.min <= rating && rating <= def.max) {
                return key;
            }
        }
        return '';
    }

    function generateItemSummary(item, seriesCache) {
        let adjustedName = item.item.title;
        for (const [src, replacement] of state.settings.nameReplacements.entries()) {
            adjustedName = adjustedName.replace(src, replacement);
        }
        const simpleType = item.item.mediaType.replace(' ', '_').toLowerCase();
        return {
            'image': item.item.image?.url,
            'url': item.item.url,
            'level': 'L' + (item.ratingLevel ? '' + item.ratingLevel : '?') + (item.item.rating?.temporary ? '?' : ''),
            'levelGroup': calculateRatingGroup(item.ratingLevel),
            'seriesPos': item.item.seriesOrder || 1,
            'seriesLength': item.item.seriesId ? (seriesCache[item.item.seriesId]?.numOfItems || 0) : 1,
            'name': adjustedName,
            'started': transformItemDate(item, 'dateStartedData'),
            'finished': transformItemDate(item, 'dateFinishedData'),
            'finishedUnix': item.dateFinishedData?.timestampSeconds || 0,
            'type': simpleType,
        }
    }

    function itemElement(parsedItem) {
        const figure = document.createElement('figure');
        figure.classList.add(`item-${parsedItem['type']}`)
        figure.innerHTML = `
        <a href="${parsedItem['url']}"><img src="${parsedItem['image']}" /></a>
        <figcaption>
            <span class="level ${parsedItem['levelGroup']}">${parsedItem['level']}</span>
            <a class="title" href="${parsedItem['url']}">${parsedItem['name']}</a>
            <span class="series-progress">(${parsedItem['seriesPos']} / ${parsedItem['seriesLength']})</span>
            <p class="dates"><span class="started">${parsedItem['started']}</span> - <span class="ended">${parsedItem['finished']}</span></p>
        </figcaption>
        `;
        return figure;
    }

    async function findFinishedFilter(libraryType) {
        if (state.finishedFilter[libraryType]) {
            return state.finishedFilter[libraryType];
        }

        const listsResult = await fetch(`/item-list-api?user=${state.user}&library_type=${libraryType}`);
        const resultBody = await listsResult.json();
        const listFilter = resultBody.find(listFilter => listFilter.correlatedStatus === 'finished');
        if (listFilter) {
            state.finishedFilter[libraryType] = listFilter.id;
            return listFilter.id;
        } else {
            state.finishedFilter[libraryType] = '';
            return '';
        }
    }

    function generateItemList(nativelyData) {
        const dateFilter = isItemInRange(state.startDate, state.endDate);
        const items = nativelyData.results
            .filter(item => item.item != null)
            .filter(dateFilter);
        return items.map(item => generateItemSummary(item, nativelyData.seriesCache));
    }

    function setDialogToLoadingText(text) {
        state.recapDialog.innerHTML = `
            <h2>Loading Natively Recap</h2>
            <p>${text}</p>
        `
    }

    function addSettingsReplacementRow(recapBody, addReplButton, src, dest) {
        const srcInput = document.createElement('input');
        srcInput.type = 'text';
        srcInput.value = src;
        srcInput.classList.add('recap-replacement-src');
        recapBody.insertBefore(srcInput, addReplButton);

        const destInput = document.createElement('input');
        destInput.type = 'text';
        destInput.value = dest;
        destInput.classList.add('recap-replacement-dest');
        recapBody.insertBefore(destInput, addReplButton);

        const deleteButton = document.createElement('button');
        deleteButton.type = 'button';
        deleteButton.textContent = 'X';
        deleteButton.addEventListener('click', (evt) => {
            recapBody.removeChild(srcInput);
            recapBody.removeChild(destInput);
            recapBody.removeChild(deleteButton);
            evt.stopPropagation();
        });
        recapBody.insertBefore(deleteButton, addReplButton);
    }

    function addColourConfigRow(recapBody, key, currentValue) {
        const label = document.createElement('p');
        label.textContent = COLOR_NAME_LOOKUPS[key];
        recapBody.appendChild(label);

        const textInput = document.createElement('input');
        textInput.type = 'text';
        textInput.dataset.colorKey = key;
        textInput.value = currentValue;
        textInput.classList.add('color-text-code');
        recapBody.appendChild(textInput);

        const colorInput = document.createElement('input');
        colorInput.type = 'color';
        colorInput.value = currentValue;
        colorInput.addEventListener('change', (evt) => {
            textInput.value = evt.target.value;
        });
        recapBody.appendChild(colorInput);
    }

    function showSettingsDialog() {
        const initialTitleShowState = state.settings.show.title ? 'checked' : ''
        const initialSeriesShowState = state.settings.show.seriesPos ? 'checked' : ''
        const initialDatesShowState = state.settings.show.dates ? 'checked' : ''
        const initialLevelShowState = state.settings.show.level ? 'checked' : ''
        state.recapDialog.innerHTML = `
            <header>
                <h2>Recap Settings</h2>
                <button type="button" id="recap-dialog-close-button">X</button>
            </header>
            <main id="recap-settings-body">
                <h4 class="full-width">Show/Hide Info</h4>
                <div class="full-width show-settings">
                    <div><input type="checkbox" id="recap-show-title" name="recap-show-title" ${initialTitleShowState}> <label for="recap-show-title">Title</label></div>
                    <div><input type="checkbox" id="recap-show-series" name="recap-show-series" ${initialSeriesShowState}> <label for="recap-show-series">Series Position</label></div>
                    <div><input type="checkbox" id="recap-show-dates" name="recap-show-dates" ${initialDatesShowState}> <label for="recap-show-dates">Dates</label></div>
                    <div><input type="checkbox" id="recap-show-level" name="recap-show-level" ${initialLevelShowState}> <label for="recap-show-level">Level</label></div>
                </div>
                <h4 class="full-width">Name Replacements</h4>
                <p class="full-width">
                    Do some of your shows/books have long/ugly names? Make them shorter
                </p>
                <h6>Text to change</h6><h6>Replacement text</h6><h6 class="material-icons-outlined action">delete</h6>
                <div class="full-width" id="recap-add-more-replacements">
                    <button type="button" id="add-more-button">+ Add more</button>
                </div>
                <h4 class="full-width">Custom Colors</h4>
                <h6>Type</h6><h6>Colour</h6><h6 class="action">Prv</h6>
            </main>
        `;
        const recapBody = state.recapDialog.querySelector('#recap-settings-body');
        const addReplButton = state.recapDialog.querySelector('#recap-add-more-replacements');
        const nameReplacements = state.settings.nameReplacements.size > 0 ? [...state.settings.nameReplacements] : [["", ""]];
        for (const [src, dest] of nameReplacements) {
            addSettingsReplacementRow(recapBody, addReplButton, src, dest);
        }
        state.recapDialog.querySelector('#add-more-button').addEventListener('click', () => {
            addSettingsReplacementRow(recapBody, addReplButton, "", "");
        });
        const resolvedColors = resolveCurrentColors();
        for (const [key, color] of resolvedColors.entries()) {
            addColourConfigRow(recapBody, key, color);
        }
        state.recapDialog.querySelector('#recap-dialog-close-button').addEventListener('click', () => {
            const replacementSrcs = [...recapBody.querySelectorAll('.recap-replacement-src').values()].map(x => x.value);
            const replacementValues = [...recapBody.querySelectorAll('.recap-replacement-dest').values()].map(x => x.value);

            let newNameReplacements = new Map();
            for (let i = 0; i < replacementSrcs.length; i++) {
                let src = replacementSrcs[i];
                let value = replacementValues[i] || "";

                if (src !== "") {
                    newNameReplacements.set(src, value);
                }
            }
            state.settings.nameReplacements = newNameReplacements;
            let colorOverrides = new Map();
            for (const element of recapBody.querySelectorAll('.color-text-code')) {
                const key = element.dataset.colorKey;
                const value = element.value;
                colorOverrides.set(key, value);
            }
            state.settings.colorOverrides = colorOverrides;
            state.settings.show.title = document.querySelector('#recap-show-title').checked;
            state.settings.show.seriesPos = document.querySelector('#recap-show-series').checked;
            state.settings.show.dates = document.querySelector('#recap-show-dates').checked;
            state.settings.show.level = document.querySelector('#recap-show-level').checked;
            saveSettings();
            updateRecapBody();
            updateStyleOverrides();
            state.recapDialog.close();
        });
        state.recapDialog.showModal();
    }

    async function fetchLibrary(libraryType) {
        setDialogToLoadingText(`Loading filters for ${libraryType}`);
        const filterId = await findFinishedFilter(libraryType);
        let seriesCache = {};
        let results = [];
        let totalPages = 1;
        let currentPage = 0;
        do {
            setDialogToLoadingText(`Loading ${libraryType} page ${currentPage + 1} of ${totalPages}`);
            const csrfToken = document.querySelector('meta[name=csrf-token]').getAttribute('content');
            const response = await fetch(`/api/item-library-search-api/${state.user}/`, {
                method: 'POST',
                headers: {
                    'content-type': 'application/json',
                    'X-CSRFToken': csrfToken,
                },
                body: JSON.stringify(buildRequest(libraryType, currentPage + 1, filterId)),
            });
            const responseBody = await response.json();
            if (responseBody.numOfPages) {
                totalPages = responseBody.numOfPages;
            }
            currentPage++;
            for (const result of responseBody.results) {
                if (result.item) {
                    results.push(result);
                } else if (result.itemList) {
                    for (const listItem of result.results) {
                        results.push(listItem.data);
                    }
                }
            }
            if (responseBody.seriesCache) {
                seriesCache = { ...seriesCache, ...responseBody.seriesCache };
            }
        } while (currentPage < totalPages);
        return {
            seriesCache,
            results,
        };
    }

    async function loadData() {
        setDialogToLoadingText('Building your recap');
        state.recapDialog.showModal();
        if (!state.rawBookData) {
            console.log('Loading data');
            state.rawBookData = await fetchLibrary('books');
        }
        if (!state.rawVideoData) {
            state.rawVideoData = await fetchLibrary('videos');
        }
        const bookList = generateItemList(state.rawBookData);
        const videoList = generateItemList(state.rawVideoData);
        const parsedData = [...bookList, ...videoList];
        parsedData.sort((a, b) => a.finishedUnix - b.finishedUnix);
        state.recapDialog.close();
        console.log('Loaded item data');
        console.log(parsedData);
        return parsedData;
    }

    async function updateRecapBody() {
        const data = await loadData();
        let recapBodies = document.querySelectorAll('.recap-body');
        for (const recapBody of recapBodies) {
            recapBody.innerHTML = '';
            for (const item of data) {
                recapBody.appendChild(itemElement(item));
            }
        }
    }

    function addLink() {
        const navbar = document.querySelector('.navbar-nav');
        const lastLink = document.querySelector('.last-link');

        const recapLink = document.createElement('a');
        recapLink.textContent = 'Recap';
        recapLink.classList.add('nav-link');
        recapLink.href = '#recap';
        recapLink.addEventListener('click', showRecap);
        navbar.insertBefore(recapLink, lastLink);
    }

    function resolveCurrentColors() {
        const resolvedColors = new Map();
        for (const [k, v] of Object.entries(DEFAULT_COLORS)) {
            resolvedColors.set(k, v);
        }
        for (const [k, v] of state.settings.colorOverrides.entries()) {
            resolvedColors.set(k, v);
        }

        return resolvedColors;
    }

    function updateStyleOverrides() {
        const resolvedColors = resolveCurrentColors();
        const itemStyles = resolvedColors.entries().map(([key, value]) => `
            .item-${key} {
                background: ${value};
            }
        `).reduce((a, b) => a + '\n' + b);

        const textColor = resolvedColors.get('recap-text');
        const bgColor = resolvedColors.get('recap-background');
        const styles = `
        #recap-takeover {
            .recap-body {
                padding: 1em;
                grid-template-columns: repeat(${state.settings.columns}, 150px);
                color: ${textColor};
                background-color: ${bgColor};
            }
            .recap-body a {
                color: ${textColor};
            }
            ${itemStyles}
        }
        `;
        document.querySelector('#recap-style-overrides').innerHTML = styles;
        if (document.querySelector('.recap-body')) {
            document.querySelector('.recap-body').classList.toggle('hide-title', !state.settings.show.title);
            document.querySelector('.recap-body').classList.toggle('hide-series', !state.settings.show.seriesPos);
            document.querySelector('.recap-body').classList.toggle('hide-dates', !state.settings.show.dates);
            document.querySelector('.recap-body').classList.toggle('hide-level', !state.settings.show.level);
        }
    }

    function createRecapElement(elementType, id) {
        const recapEl = document.createElement(elementType);
        recapEl.id = id;
        recapEl.innerHTML = `
            <header>
                <div>
                    <h3>${state.user}'s Natively Recap</h3>
                    <button class="hide-natively-ui">Toggle Natively UI</button>
                </div>
                <div>
                    <p>Date range</p>
                    <input type="date" id="recap-start-date" value="${jsToIsoDate(state.startDate)}" min="2000-01-01" max="2050-12-31" />
                    <input type="date" id="recap-end-date" value="${jsToIsoDate(state.endDate)}" min="2000-01-01" max="2025-12-31" />
                    <p>Columns</p>
                    <input type="number" id="recap-columns" value="${state.settings.columns}" />
                    <a class="material-icons-outlined" id="recap-settings-link" href="#">settings</a>
                </div>
            </header>

            <main class="recap-body">
            </main>
        `;
        recapEl.querySelector('.hide-natively-ui').addEventListener('click', (evt) => {
            document.body.classList.toggle('recap-hide-ui');
        });
        recapEl.querySelector('#recap-start-date').addEventListener('change', (evt) => {
            state.startDate = new Date(evt.target.valueAsNumber);
            updateRecapBody();
            saveSettings();
            evt.preventDefault();
        });
        recapEl.querySelector('#recap-end-date').addEventListener('change', (evt) => {
            state.endDate = new Date(evt.target.valueAsNumber);
            updateRecapBody();
            saveSettings();
        });
        recapEl.querySelector('#recap-columns').addEventListener('change', (evt) => {
            state.settings.columns = evt.target.value;
            saveSettings();
            updateStyleOverrides();
        });
        recapEl.querySelector('#recap-settings-link').addEventListener('click', (evt) => {
            showSettingsDialog();
            evt.stopPropagation();
        });
        recapEl.querySelector('.recap-body').classList.toggle('hide-title', !state.settings.show.title);
        recapEl.querySelector('.recap-body').classList.toggle('hide-series', !state.settings.show.seriesPos);
        recapEl.querySelector('.recap-body').classList.toggle('hide-dates', !state.settings.show.dates);
        recapEl.querySelector('.recap-body').classList.toggle('hide-level', !state.settings.show.level);
        document.body.appendChild(recapEl);
        return recapEl;
    }

    function findCurrentUser() {
        const hashParams = document.location.hash.split('?')[1]?.split('&') || [];
        let hashParamsLookup = {};
        for (const hashParam of hashParams) {
            let parts = hashParam.split('=');
            let key = parts[0];
            let value = parts[1] || "";
            hashParamsLookup[key] = value;
        }
        state.user = hashParamsLookup["recap-user"] || window.gs.initialState.user.username;
    }

    function showRecap() {
        const recapEl = createRecapElement('div', 'recap-takeover');
        document.querySelector('.content-wrapper').replaceChildren(recapEl);
        updateRecapBody();
    }

    function init() {
        createDialog();
        loadStylesheet();
        findCurrentUser();
        addLink();
        loadSettings();
        updateStyleOverrides();
        window.RECAP_STATE = state;
        if (window.location.hash.startsWith('#recap')) {
            showRecap();
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();