Deezer Mini Player

Adds CSS and JavaScript to the Deezer website so that it looks decent on small resolutions
Wrap lines
// ==UserScript==
// @name         Deezer Mini Player
// @namespace    lilybergonzat
// @license      MIT
// @version      2025-03-26
// @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.setAttribute('data-origin', 'Deezer Mini Player');

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

    styleTag.setAttribute('data-origin', 'Deezer Mini Player');

    styleTag.innerHTML = \`
        @media (max-width: 768px) {
            /* Global */

            /* Make the main container resizable so it can become real small */
            #page_content.page-main, #dzr-app > .naboo > .page-main, #dzr-app > .naboo > .page-topbar {
                min-width: 0;
            }

            /* Homepage */

            /* Flow channels: rows instead of columns */
            .page-main > .channel > .channel-section > .container:nth-of-type(2) > div {
                flex-direction: column;
                justify-content: center;
                gap: 15px;
            }

            /* Flow channels: reset item behaviours */
            .page-main > .channel > .channel-section > .container:nth-of-type(2) > div > div {
                flex: initial;
                width: 100%;
                max-width: 100%;
            }

            /* Flow channels: remove left margin for items */
            .page-main > .channel > .channel-section > .container:nth-of-type(2) > div > div + div {
                margin-inline-start: 0;
            }

            /* Flow channels: icon and text side to side for items */
            .page-main > .channel > .channel-section > .container:nth-of-type(2) > div > div > div {
                display: flex;
                gap: 15px;
            }

            /* Flow channels: icon and text side to side for items */
            .page-main > .channel > .channel-section > .container:nth-of-type(2) > div > div > div[data-testid="flow-config-default"] h2 {
                font-size: .75rem;
            }

            /* Flow channels: restore item icon size */
            .page-main > .channel > .channel-section > .container:nth-of-type(2) > div > div > div > div:first-child {
                width: 30px;
                height: 30px;
                padding-bottom: 0;
            }

            /* Flow channels: vertically center item text */
            .page-main > .channel > .channel-section > .container:nth-of-type(2) > div > div > div > div:last-child {
                align-self: center;
                margin-top: 0;
            }

            /* Track listing */

            /* Remove checkbox column heading */
            #page_content.page-main > div > div:nth-of-type(2) > div.Ledev > div:nth-of-type(1) > div:last-of-type {
                display: none;
            }

            /* Remove buttons next to track name */
            #page_content.page-main > div > div:nth-of-type(2) > div.Ledev > div:nth-of-type(2) > div > div > div:nth-of-type(1) > div:last-of-type {
                display: none;
            }

            /* Remove checkbox column */
            #page_content.page-main > div > div:nth-of-type(2) > div.Ledev > div:nth-of-type(2) > div > div > div:last-of-type {
                display: none;
            }

            /* Song playing */

            /* The player is higher, so gotta push the content further */
           	#page_player > .player-lyrics-full {
                bottom: 227px;
            }

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

            #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[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:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) > div:first-child {
           	    mask-image: none;
            }

            .player-lyrics-full > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child {
           	    padding-top: 30px;
                padding-bottom: 30px;
            }

            .player-lyrics-full > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:first-child {
                gap: 0;
            }

            .player-lyrics-full .chakra-text:first-child {
                display: none;
            }

            .player-lyrics-full .chakra-text {
                font-size: 14px;
                font-weight: 500;
                padding: 0;
                line-height: 20px;
                cursor: text;
                pointer-events: all;
            }
        }
    \`;

    const handleLyrics = async (args) => {
        const [url, options] = args;
        const lyricsRequest = Boolean(options?.body && options.body.includes('GetLyrics'));
        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);
欢迎访问Greasy Fork镜像
