Deezer Mini Player

Greasy Fork is available in English.
Deezer Mini Player

Adds CSS and JavaScript to the Deezer website so that it looks decent on small resolutions
当前为 2025-01-01 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Deezer Mini Player
// @namespace    lilybergonzat
// @license      MIT
// @version      2025-01-01
// @description  Adds CSS and JavaScript to the Deezer website so that it looks decent on small resolutions
// @author       Lily Bergonzat <[email protected]>
// @match        https://www.deezer.com/*
// @icon         https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.deezer.com&size=64
// @grant        none
// ==/UserScript==

const scriptTag = document.createElement('script');

scriptTag.setAttribute('type', 'text/javascript');

scriptTag.innerHTML = `
    const styleTag = document.createElement('style');

    styleTag.innerHTML = \`
        @media (max-width: 768px) {
           	#page_player > .player-lyrics-full {
                bottom: 227px;
            }

            #dzr-app > .naboo {
                min-width: 0;
                padding-bottom: 230px;
            }

            #dzr-app > .naboo > .page-topbar {
                min-width: 0;
            }

            #dzr-app > .naboo > .page-main {
                min-width: 0;
            }

            #page_naboo_playlist > .catalog-content > .container > div:first-child[data-testid="masthead"] > div:first-child {
                width: 125px;
                height: 125px;
            }

            #page_naboo_playlist > .catalog-content > .container > div:first-child[data-testid="masthead"] > div:nth-child(2) > h2 {
                font-size: 25px;
                margin-bottom: .75rem;
                line-height: 2rem;
            }

            #page_naboo_playlist > .catalog-content > .container > div:first-child[data-testid="masthead"] > div:nth-child(2) > ul:first-of-type {
                flex-direction: column;
            }

            #page_naboo_playlist > .catalog-content > .container > div:first-child[data-testid="masthead"] > div:nth-child(2) > ul:first-of-type > li:not(:first-child)::before {
                display: none;
            }

            #page_naboo_playlist > .catalog-content > .container > div:first-child[data-testid="masthead"] > div:nth-child(2) > ul:last-of-type {
                display: none;
            }

            #page_naboo_playlist > .catalog-content > .container > div:nth-child(2) {
                gap: 15px;
                flex-direction: column;
            }

            #page_naboo_playlist > .catalog-content > .container > div.Ledev > div:nth-child(1) > div[role="columnheader"]:nth-child(7) {
                display: none;
            }

            #page_naboo_playlist > .catalog-content > .container > div.Ledev > div:nth-child(2) > div:nth-child(2) > div > div > div > div[role="gridcell"]:nth-child(1) > div:nth-child(4) {
                display: none;
            }

            #page_naboo_playlist > .catalog-content > .container > div.Ledev > div:nth-child(2) > div:nth-child(2) > div > div > div > div[role="gridcell"]:nth-child(7) {
                display: none;
            }

            div[itemprop="lyrics"] > div[itemprop="text"] > span:first-child {
                display: none;
            }

            div[itemprop="lyrics"] > div[itemprop="text"] > span:first-child ~ a {
                font-size: 16px;
                font-weight: 500;
                padding: 0;
                line-height: 20px;
                cursor: text;
                pointer-events: all;
            }

            div[itemprop="lyrics"] + div[role="complementary"] {
            		margin-top: 30px;
            }

            #page_player > div[class^="css"] {
                flex-direction: column;
                min-width: 0;
                height: auto;
                gap: 30px;
                padding-top: 15px;
                padding-bottom: 15px;
            }

            #page_player > div[class^="css"] > div[class^="css"] {
                width: 100%;
                justify-content: center;
            }
        }
    \`;

    document.head.appendChild(styleTag);

    const pullLyricsUpStyleTag = document.createElement('style');

    pullLyricsUpStyleTag.innerHTML = \`
        @media (max-width: 768px) {
            #page_player > .player-lyrics-full > div > div > div > div {
           	    mask-image: none;
            }

            .player-lyrics-full > div > div > div > div > .nano > .nano-content {
           	    padding-top: 30px;
                padding-bottom: 30px;
           	}
        }
    \`;

    const handleLyrics = async (args) => {
        const [url, options] = args;
        const lyricsRequest = Boolean(options?.body && options.body.includes('SynchronizedTrackLyrics'));
        const headers = options?.headers ?? {};

        if (!lyricsRequest || headers['Request-Author'] === 'GM') {
            return;
        }

        if (!options.headers) {
            options.headers = {};
        }

        options.headers['Request-Author'] = 'GM';

		const response = await fetch(url, options);
    	const data = await response.json();
        const lyricsData = data?.data?.track?.lyrics;

        if (!lyricsData) {
            return;
        }

        const hasLyrics = Boolean(lyricsData.text && lyricsData.text.length > 0);
        const lyricsSynced = Boolean(lyricsData.synchronizedLines);

        if (hasLyrics && !lyricsSynced) {
            document.head.appendChild(pullLyricsUpStyleTag);
        } else {
            try {
                document.head.removeChild(pullLyricsUpStyleTag);
            } catch {}
        }
    };

    window.fetch = new Proxy(window.fetch, {
        apply(actualFetch, that, args) {
            handleLyrics(args);
            return Reflect.apply(actualFetch, that, args);
        }
    });
`;

document.head.appendChild(scriptTag);