Greasy Fork is available in English.

save-playlist

保存歌单

// ==UserScript==
// @name         save-playlist
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  保存歌单
// @author       luxunLi
// @match        https://zz123.com/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=zz123.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...
    window.onload = function() {
        // 在页面加载完成后执行的代码
        var po = document.querySelector('.playlist-option');

        const style = document.createElement('style');
        style.innerHTML = `
        .player-playlist-wrap .playlist-header .playlist-option .save-playlist {
            margin-right: 8px;
            cursor: pointer;
            opacity: .7;
            transition: all .3s;
            border: 1px solid #E1E3E5;
            padding: 0 10px;
            border-radius: 12px;
        }

        .player-playlist-wrap .playlist-header .playlist-option .save-playlist:hover {
            opacity: 1;
        }

        .player-playlist-wrap .playlist-header .playlist-option .save-playlist i {
            font-size: 14px;
            margin-right: 4px;
        }
        
        .player-playlist-wrap .playlist-header .playlist-option .load-playlist {
            margin-right: 8px;
            cursor: pointer;
            opacity: .7;
            transition: all .3s;
            border: 1px solid #E1E3E5;
            padding: 0 10px;
            border-radius: 12px;
        }

        .player-playlist-wrap .playlist-header .playlist-option .load-playlist:hover {
            opacity: 1;
        }

        .player-playlist-wrap .playlist-header .playlist-option .load-playlist i {
            font-size: 14px;
            margin-right: 4px;
        }`;

        document.head.appendChild(style);


        // 删除关闭按钮
        po.removeChild(po.lastElementChild)

        // 获取按钮的style
        var cp = document.querySelector('.clear-playlist');
        var sourceStyles = window.getComputedStyle(cp);


        var sp = document.createElement('span');
        var lp = document.createElement('span');
        sp.className = 'save-playlist';
        lp.className = 'load-playlist';
        sp.textContent = '保存';
        lp.textContent = '读取';

        // copyStyle(sourceStyles, sp);
        // copyStyle(sourceStyles, lp);

        po.insertBefore(sp, po.children[0]);
        po.insertBefore(lp, po.children[1]);

        sp.addEventListener('click', () => {
            const confirmation = confirm('Are you sure you want to save the playlist to IndexedDB?');
            if (!confirmation){
                return ;
            }

            const playlist = localStorage.getItem('playlist');

            if (playlist) {
                const request = indexedDB.open('zz123DB', 1);

                request.onerror = (event) => {
                    console.log('Error opening database');
                };

                request.onupgradeneeded = (event) => {
                    const db = event.target.result;
                    const objectStore = db.createObjectStore('playlist', { keyPath: 'id' });
                    objectStore.createIndex('name', 'name', { unique: false });
                };

                request.onsuccess = (event) => {
                    const db = event.target.result;
                    const transaction = db.transaction('playlist', 'readwrite');
                    const objectStore = transaction.objectStore('playlist');

                    const data = JSON.parse(playlist);

                    data.forEach((item) => {
                        objectStore.add(item);
                    });

                    transaction.oncomplete = () => {
                        console.log('Playlist stored in IndexedDB');
                    };

                    transaction.onerror = () => {
                        console.log('Error storing playlist in IndexedDB');
                    };

                    db.close();
                };
            }
        });

        lp.addEventListener('click', () => {
            const confirmation = confirm('Are you sure you want to load the playlist from IndexedDB?');
            if (!confirmation){
                return ;
            }

            const request = indexedDB.open('zz123DB', 1);

            request.onerror = (event) => {
                console.log('Error opening database');
            };

            request.onsuccess = (event) => {
                const db = event.target.result;
                const transaction = db.transaction('playlist', 'readonly');
                const objectStore = transaction.objectStore('playlist');
                const getAllRequest = objectStore.getAll();

                getAllRequest.onsuccess = (event) => {
                    const playlist = event.target.result;
                    localStorage.setItem('playlist', JSON.stringify(playlist));
                    console.log('Playlist written back to localStorage');
                };

                transaction.onerror = () => {
                    console.log('Error reading playlist from IndexedDB');
                };

                db.close();
            };

            
            location.reload();
        });


    };
})();