☰

Lucida Downloader

Download music from Spotify, Qobuz, Tidal, Soundcloud, Deezer, Amazon Music and Yandex Music via Lucida. Adds download buttons and floating button.

当前为 2025-01-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Lucida Downloader
  3. // @description  Download music from Spotify, Qobuz, Tidal, Soundcloud, Deezer, Amazon Music and Yandex Music via Lucida. Adds download buttons and floating button.
  4. // @icon         https://raw.githubusercontent.com/afkarxyz/misc-scripts/refs/heads/main/lucida/lucida.png
  5. // @version      1.6
  6. // @author       afkarxyz
  7. // @namespace    https://github.com/afkarxyz/misc-scripts/
  8. // @supportURL   https://github.com/afkarxyz/misc-scripts/issues
  9. // @license      MIT
  10. // @match        https://open.spotify.com/*
  11. // @match        https://listen.tidal.com/*
  12. // @match        https://music.yandex.com/*
  13. // @match        https://music.amazon.com/*
  14. // @match        https://www.deezer.com/*
  15. // @match        https://soundcloud.com/*
  16. // @match        https://www.qobuz.com/*
  17. // @match        https://lucida.to/*
  18. // @match        https://lucida.su/*
  19. // @grant        GM_setValue
  20. // @grant        GM_getValue
  21. // @grant        GM_registerMenuCommand
  22. // @grant        GM_addStyle
  23. // ==/UserScript==
  24.  
  25. (function() {
  26.     'use strict';
  27.  
  28.     const DOMAINS = ['lucida.to', 'lucida.su'];
  29.     const BASE_URL = 'https://raw.githubusercontent.com/afkarxyz/misc-scripts/refs/heads/main/lucida/';
  30.     const LOGO_SVG = `<svg xml:space="preserve" width="48" height="28" viewBox="0 0 213.86 126.117" xmlns="http://www.w3.org/2000/svg"><g style="display:inline" transform="translate(-92.77 -153.171)"><ellipse class="st17" cx="199.7" cy="211.95" rx="103.93" ry="51" style="fill:#f42e8d;stroke:#fff;stroke-width:6;stroke-miterlimit:10"/><ellipse class="st18" cx="199.97" cy="211.95" rx="93.24" ry="41" style="fill:#f42e8d;stroke:#fff;stroke-width:3;stroke-miterlimit:10"/></g><path class="st19" style="fill:#fff;stroke:#fff;stroke-width:6;stroke-miterlimit:10" transform="translate(-92.77 -153.171)" d="M216.68 222.27v-8.79l2.1-2.21 5.4.25v10.75zM248.83 222.27v-8.79l2.1-2.21 5.4.25v10.75z"/><path class="st19" style="fill:#fff;stroke:#fff;stroke-width:6;stroke-miterlimit:10" transform="translate(-92.77 -153.171)" d="M216.68 223.56v-8.79l2.1-2.21 5.4.25v10.75zM125.12 237.48v-54.5l3.78-4.75h9.47v59.25zM139.86 204.18l3.75-3.28h7.36l-.18 16.25h9.01l.28-16.25h9.53l.25 36.58h-30zM171.18 204.4l3.65-3.5h23.6v12.19l-15.25.21v10.47l15.25-.05v13.76h-27.25zM199.97 200.9h12.5v36.59h-12.5z"/><path class="st19" style="fill:#fff;stroke:#fff;stroke-width:6;stroke-miterlimit:10" d="m214.09 204.41 4-3.51h14.44l-.25-17.14 3-5.53h9.92l.14 22.67v36.58h-31.25zM251.42 200.9h19.99l.25 4.25 3.49-4.25h6.35v36.58H247l-.25-32.08zM116.91 237.48v-54.5l3.78-4.75h9.47v59.25zM131.64 204.18l3.75-3.28h7.36l-.18 16.25h9.01l.29-16.25h9.52l.25 36.58h-30zM162.97 204.4l3.64-3.5h23.61v12.19l-15.25.21v10.47l15.25-.05v13.76h-27.25zM191.76 200.9h12.5v36.59h-12.5z" transform="translate(-92.77 -153.171)"/><path class="st19" style="fill:#fff;stroke:#fff;stroke-width:6;stroke-miterlimit:10" d="m205.88 204.41 4-3.51h14.43l-.25-17.14 3-5.53h9.93l.14 22.67v36.58h-31.25zM243.21 200.9h19.99l.24 4.25 3.5-4.25h6.34v36.58h-34.5l-.25-32.08zM162.97 204.4l3.64-3.5h23.61v12.19l-15.25.21v10.47l15.25-.05v13.76h-27.25zM131.64 204.18l3.75-3.28h7.36l-.18 16.25h9.01l.29-16.25h9.52l.25 36.58h-30z" transform="translate(-92.77 -153.171)"/><g transform="translate(-92.77 -153.171)"><path class="st19" style="fill:#fff;stroke:#fff;stroke-width:6;stroke-miterlimit:10" d="M216.68 222.27v-8.79l2.1-2.21 5.4.25v10.75zM248.83 222.27v-8.79l2.1-2.21 5.4.25v10.75z"/><path class="st19" style="fill:#fff;stroke:#fff;stroke-width:6;stroke-miterlimit:10" d="M216.68 223.56v-8.79l2.1-2.21 5.4.25v10.75z"/><circle class="st21" cx="279.8" cy="173.88" r="4.56" style="stroke:#fff;stroke-width:6;stroke-miterlimit:10"/><path class="st21" style="stroke:#fff;stroke-width:6;stroke-miterlimit:10" d="m132.88 255.72 2.83 4.71 5.1-1.26-3.34 4.17 2.83 4.71-4.9-2.13-3.35 4.17.32-5.49-4.91-2.14 5.1-1.25z"/><circle class="st21" cx="199.97" cy="236.84" r="5.62" style="stroke:#fff;stroke-width:6;stroke-miterlimit:10"/><ellipse class="st21" cx="184.25" cy="245.48" rx="3.38" ry="3.14" style="stroke:#fff;stroke-width:6;stroke-miterlimit:10"/><path class="st21" style="stroke:#fff;stroke-width:6;stroke-miterlimit:10" d="M216.68 223.77v-8.79l2.1-2.21 5.4.25v10.75zM248.83 223.77v-8.79l2.1-2.21 5.4.25v10.75zM194.48 175.23l4.06 3.92 4.72-2.6-2.21 5.03 4.06 3.92-5.43-.82-2.22 5.02-1.14-5.52-5.43-.82 4.73-2.6z"/></g><path class="st22" d="M21.66 110.899c-6.48-10.44 27.24-43.11 75.33-72.98 48.09-29.87 86.75-41.62 93.23-31.18 6.48 10.44-21.67 39.11-69.76 68.98-48.09 29.87-92.32 45.62-98.8 35.18z" style="fill:none;stroke:#fff;stroke-width:6;stroke-miterlimit:10"/><path class="st7" style="stroke:#000;stroke-width:3;stroke-miterlimit:10" d="M125.12 237.48v-54.5l3.78-4.75h9.47v59.25zM139.86 204.18l3.75-3.28h7.36l-.18 16.25h9.01l.28-16.25h9.53l.25 36.58h-30zM171.18 204.4l3.65-3.5h23.6v12.19l-15.25.21v10.47l15.25-.05v13.76h-27.25zM199.97 200.9h12.5v36.59h-12.5zM214.09 204.41l4-3.51h14.44l-.25-17.14 3-5.53h9.92l.14 22.67v36.58h-31.25zM251.42 200.9h19.99l.25 4.25 3.49-4.25h6.35v36.58H247l-.25-32.08z" transform="translate(-92.77 -153.171)"/><path class="st23" style="fill:#fff;stroke:#000;stroke-width:3;stroke-miterlimit:10" transform="translate(-92.77 -153.171)" d="m131.64 204.18 3.75-3.28h7.36l-.18 16.25h9.01l.29-16.25h9.52l.25 36.58h-30zM162.97 204.4l3.64-3.5h23.61v12.19l-15.25.21v10.47l15.25-.05v13.76h-27.25z"/><path class="st23" style="fill:#fff;stroke:#000;stroke-width:3;stroke-miterlimit:10" d="M98.99 47.729h12.5v36.59h-12.5z"/><path class="st23" style="fill:#fff;stroke:#000;stroke-width:3;stroke-miterlimit:10" transform="translate(-92.77 -153.171)" d="m205.88 204.41 4-3.51h14.43l-.25-17.14 3-5.53h9.93l.14 22.67v36.58h-31.25zM243.21 200.9h19.99l.24 4.25 3.5-4.25h6.34v36.58h-34.5l-.25-32.08z"/><circle class="st7" cx="190.62" cy="7.149" r="2.38" style="stroke:#000;stroke-width:3;stroke-miterlimit:10"/><circle class="st7" cx="187.03" cy="20.709" r="4.56" style="stroke:#000;stroke-width:3;stroke-miterlimit:10"/><path class="st7" style="stroke:#000;stroke-width:3;stroke-miterlimit:10" transform="translate(-92.77 -153.171)" d="m132.88 255.72 2.83 4.71 5.1-1.26-3.34 4.17 2.83 4.71-4.9-2.13-3.35 4.17.32-5.49-4.91-2.14 5.1-1.25z"/><circle class="st7" cx="107.2" cy="83.669" r="5.62" style="stroke:#000;stroke-width:3;stroke-miterlimit:10"/><ellipse class="st7" cx="91.48" cy="92.309" rx="3.38" ry="3.14" style="stroke:#000;stroke-width:3;stroke-miterlimit:10"/><path class="st7" style="stroke:#000;stroke-width:3;stroke-miterlimit:10" transform="translate(-92.77 -153.171)" d="m194.48 175.23 4.06 3.92 4.72-2.6-2.21 5.03 4.06 3.92-5.43-.82-2.22 5.02-1.14-5.52-5.43-.82 4.73-2.6zM248.83 223.77v-8.79l2.1-2.21 5.4.25v10.75zM216.68 223.77v-8.79l2.1-2.21 5.4.25v10.75z"/><path class="st9" d="M21.66 110.899c-6.48-10.44 27.24-43.11 75.33-72.98 48.09-29.87 86.75-41.62 93.23-31.18 6.48 10.44-21.67 39.11-69.76 68.98-48.09 29.87-92.32 45.62-98.8 35.18z" style="fill:none;stroke:#000;stroke-width:3;stroke-miterlimit:10"/><path class="st23" style="fill:#fff;stroke:#000;stroke-width:3;stroke-miterlimit:10" transform="translate(-92.77 -153.171)" d="m162.97 204.4 3.64-3.5h23.61v12.19l-15.25.21v10.47l15.25-.05v13.76h-27.25zM131.64 204.18l3.75-3.28h7.36l-.18 16.25h9.01l.29-16.25h9.52l.25 36.58h-30zM116.91 237.48v-54.5l3.78-4.75h9.47v59.25z"/></svg>`;
  31.     const SERVICES = {
  32.         '': { name: 'Disabled', icon: '' },
  33.         'spotify': { 
  34.             name: 'Spotify',
  35.             icon: `${BASE_URL}spotify.png`
  36.         },
  37.         'qobuz': {
  38.             name: 'Qobuz',
  39.             icon: `${BASE_URL}qobuz.png`
  40.         },
  41.         'tidal': {
  42.             name: 'Tidal',
  43.             icon: `${BASE_URL}tidal.svg`
  44.         },
  45.         'soundcloud': {
  46.             name: 'Soundcloud',
  47.             icon: `${BASE_URL}soundcloud.ico`
  48.         },
  49.         'deezer': {
  50.             name: 'Deezer',
  51.             icon: `${BASE_URL}deezer.ico`
  52.         },
  53.         'amazon': {
  54.             name: 'Amazon Music',
  55.             icon: `${BASE_URL}amazon.png`
  56.         }
  57.     };
  58.  
  59.     GM_addStyle(`
  60.         .lucida-modal *,
  61.         .lucida-modal *::before,
  62.         .lucida-modal *::after {
  63.             all: initial;
  64.             box-sizing: border-box;
  65.             margin: 0;
  66.             padding: 0;
  67.             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  68.             font-weight: normal !important;
  69.             font-size: 14px !important;
  70.             color: #333;
  71.         }
  72.     
  73.         .lucida-modal-overlay {
  74.             position: fixed;
  75.             top: 0;
  76.             left: 0;
  77.             right: 0;
  78.             bottom: 0;
  79.             background: rgba(0, 0, 0, 0.7);
  80.             display: flex;
  81.             justify-content: center;
  82.             align-items: center;
  83.             z-index: 10000;
  84.             font-weight: normal;
  85.         }
  86.         
  87.         .lucida-modal {
  88.             background: #fff;
  89.             padding: 20px;
  90.             border-radius: 8px;
  91.             width: 400px;
  92.             max-width: 90%;
  93.             color: #333;
  94.             font-size: 14px;
  95.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  96.             font-weight: normal !important;
  97.         }
  98.         
  99.         .lucida-modal h2 {
  100.             margin: 0 0 20px;
  101.             color: #f42e8d;
  102.             font-size: 18px !important;
  103.             font-weight: 600 !important;
  104.             line-height: 1.4;
  105.         }
  106.         
  107.         .lucida-modal .preference-group {
  108.             margin-bottom: 20px;
  109.             color: #333;
  110.         }
  111.         
  112.         .lucida-modal label {
  113.             display: block;
  114.             margin-top: 20px;
  115.             margin-bottom: 8px;
  116.             font-weight: 600 !important;
  117.             font-size: 14px !important;
  118.             color: #333;
  119.         }
  120.  
  121.         .lucida-modal .header {
  122.             display: flex;
  123.             align-items: center;
  124.             justify-content: flex-start;
  125.         }
  126.  
  127.         .lucida-modal .header img {
  128.             width: 64px;
  129.             height: 64px;
  130.             object-fit: contain;
  131.         }
  132.  
  133.         .lucida-modal .header h2 {
  134.             margin: 0;
  135.         }
  136.     
  137.         .lucida-modal .preference-group label:first-child {
  138.             margin-top: 0;
  139.         }
  140.         
  141.         .lucida-modal select {
  142.             -webkit-appearance: none;
  143.             -moz-appearance: none;
  144.             appearance: none;
  145.             width: 100%;
  146.             padding: 8px 32px 8px 12px;
  147.             border: 1px solid #ddd;
  148.             border-radius: 4px;
  149.             background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") calc(100% - 12px) center no-repeat;
  150.             cursor: pointer;
  151.             font-size: 14px !important;
  152.             color: #333;
  153.         }
  154.         
  155.         .lucida-modal select:hover {
  156.             border-color: #f42e8d;
  157.         }
  158.         
  159.         .lucida-modal select:focus {
  160.             outline: none;
  161.             border-color: #f42e8d;
  162.             box-shadow: 0 0 0 2px rgba(244, 46, 141, 0.2);
  163.         }
  164.     
  165.         .custom-options {
  166.             scrollbar-width: thin;
  167.             scrollbar-color: #f42e8d #f0f0f0;
  168.             font-size: 14px !important;
  169.         }
  170.     
  171.         .custom-options::-webkit-scrollbar {
  172.             width: 8px;
  173.         }
  174.     
  175.         .custom-options::-webkit-scrollbar-track {
  176.             background: #f0f0f0;
  177.             border-radius: 4px;
  178.         }
  179.     
  180.         .custom-options::-webkit-scrollbar-thumb {
  181.             background: #f42e8d;
  182.             border-radius: 4px;
  183.         }
  184.     
  185.         .custom-options::-webkit-scrollbar-thumb:hover {
  186.             background: #d41d7a;
  187.         }
  188.         
  189.         .service-select-wrapper {
  190.             position: relative;
  191.             margin-bottom: 15px;
  192.         }
  193.         
  194.         .custom-select {
  195.             width: 100%;
  196.             padding: 8px 32px 8px 12px;
  197.             border: 1px solid #ddd;
  198.             border-radius: 4px;
  199.             background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") calc(100% - 12px) center no-repeat;
  200.             display: flex;
  201.             align-items: center;
  202.             gap: 8px;
  203.             cursor: pointer;
  204.             transition: all 0.2s ease;
  205.             user-select: none;
  206.             font-size: 14px !important;
  207.             color: #333;
  208.         }
  209.     
  210.         .custom-select span {
  211.             font-size: 14px !important;
  212.             color: #333;
  213.         }
  214.         
  215.         .custom-select:hover {
  216.             border-color: #f42e8d;
  217.         }
  218.         
  219.         .custom-options {
  220.             position: absolute;
  221.             top: 100%;
  222.             left: 0;
  223.             right: 0;
  224.             background: white;
  225.             border: 1px solid #ddd;
  226.             border-radius: 4px;
  227.             margin-top: 4px;
  228.             max-height: 200px;
  229.             overflow-y: auto;
  230.             z-index: 1000;
  231.             display: none;
  232.             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  233.         }
  234.         
  235.         .custom-options.show {
  236.             display: block;
  237.         }
  238.         
  239.         .service-option {
  240.             display: flex;
  241.             align-items: center;
  242.             gap: 8px;
  243.             padding: 8px 12px;
  244.             cursor: pointer;
  245.             transition: background-color 0.2s ease;
  246.             font-weight: normal !important;
  247.             font-size: 14px !important;
  248.             color: #333;
  249.         }
  250.     
  251.         .service-option span {
  252.             font-size: 14px !important;
  253.             color: #333;
  254.         }
  255.         
  256.         .service-option:hover {
  257.             background-color: #f5f5f5;
  258.         }
  259.         
  260.         .service-option img,
  261.         .custom-select img {
  262.             width: 16px;
  263.             height: 16px;
  264.             object-fit: contain;
  265.         }
  266.         
  267.         .lucida-modal .buttons {
  268.             display: flex;
  269.             justify-content: flex-end;
  270.             gap: 10px;
  271.             margin-top: 20px;
  272.         }
  273.         
  274.         .lucida-modal button {
  275.             padding: 8px 16px;
  276.             border: none;
  277.             border-radius: 4px;
  278.             cursor: pointer;
  279.             font-weight: 500;
  280.             transition: all 0.2s ease;
  281.             font-size: 14px !important;
  282.         }
  283.         
  284.         .lucida-modal .save-btn {
  285.             background: linear-gradient(135deg, #f42e8d, #b91c68);
  286.             color: white;
  287.         }
  288.         
  289.         .lucida-modal .save-btn:hover {
  290.             background: linear-gradient(135deg, #ff3d9c, #d02077);
  291.             transform: translateY(-1px);
  292.             box-shadow: 0 2px 8px rgba(244, 46, 141, 0.4);
  293.         }
  294.         
  295.         .lucida-modal .save-btn:active {
  296.             transform: translateY(0);
  297.             box-shadow: 0 1px 4px rgba(244, 46, 141, 0.4);
  298.         }
  299.         
  300.         .lucida-modal .cancel-btn {
  301.             background: #eee;
  302.             color: #333;
  303.         }
  304.         
  305.         .lucida-modal .cancel-btn:hover {
  306.             background: #ddd;
  307.             color: #333;
  308.             transform: translateY(-1px);
  309.         }
  310.         
  311.         .lucida-modal .cancel-btn:active {
  312.             transform: translateY(0);
  313.         }
  314.     
  315.         .floating-button {
  316.             position: fixed;
  317.             width: 80px;
  318.             height: 80px;
  319.             background-color: transparent;
  320.             border-radius: 50%;
  321.             display: flex;
  322.             justify-content: center;
  323.             align-items: center;
  324.             cursor: move;
  325.             z-index: 9999;
  326.             opacity: 0.3;
  327.             transition: opacity 0.3s ease;
  328.             border: none;
  329.         }
  330.     
  331.         .floating-button:hover {
  332.             opacity: 1;
  333.         }
  334.     
  335.         .floating-button svg {
  336.             width: 48px;
  337.             height: auto;
  338.             cursor: pointer;
  339.         }
  340.     
  341.         [role='grid'] {
  342.             margin-left: 50px;
  343.         }
  344.     
  345.         [data-testid="tracklist-row"] {
  346.             position: relative;
  347.         }
  348.     
  349.         [role="presentation"] > * {
  350.             contain: unset;
  351.         }
  352.     
  353.         .btn {
  354.             width: 40px;
  355.             height: 40px;
  356.             border-radius: 50%;
  357.             border: 0;
  358.             position: relative;
  359.             cursor: pointer;
  360.             transition: all 0.2s ease;
  361.             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  362.             display: flex;
  363.             align-items: center;
  364.             justify-content: center;
  365.             background: linear-gradient(135deg, #f42e8d, #b91c68);
  366.         }
  367.     
  368.         .btn:hover {
  369.             transform: scale(1.1);
  370.             box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  371.         }
  372.     
  373.         .btn .icon {
  374.             width: 50%;
  375.             height: 50%;
  376.             background-position: center;
  377.             background-repeat: no-repeat;
  378.             background-size: contain;
  379.             background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23ffffff" d="M222.2 319.2c.5 .5 1.1 .8 1.8 .8s1.4-.3 1.8-.8L350.2 187.3c1.2-1.2 1.8-2.9 1.8-4.6c0-3.7-3-6.7-6.7-6.7L288 176c-8.8 0-16-7.2-16-16l0-120c0-4.4-3.6-8-8-8l-80 0c-4.4 0-8 3.6-8 8l0 120c0 8.8-7.2 16-16 16l-57.3 0c-3.7 0-6.7 3-6.7 6.7c0 1.7 .7 3.3 1.8 4.6L222.2 319.2zM224 352c-9.5 0-18.6-3.9-25.1-10.8L74.5 209.2C67.8 202 64 192.5 64 182.7c0-21.4 17.3-38.7 38.7-38.7l41.3 0 0-104c0-22.1 17.9-40 40-40l80 0c22.1 0 40 17.9 40 40l0 104 41.3 0c21.4 0 38.7 17.3 38.7 38.7c0 9.9-3.8 19.3-10.5 26.5L249.1 341.2c-6.5 6.9-15.6 10.8-25.1 10.8zM32 336l0 96c0 26.5 21.5 48 48 48l288 0c26.5 0 48-21.5 48-48l0-96c0-8.8 7.2-16 16-16s16 7.2 16 16l0 96c0 44.2-35.8 80-80 80L80 512c-44.2 0-80-35.8-80-80l0-96c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>');
  380.         }
  381.     
  382.         [data-testid="tracklist-row"] .btn {
  383.             position: absolute;
  384.             top: 50%;
  385.             right: 100%;
  386.             margin-top: -20px;
  387.             margin-right: 10px;
  388.         }
  389.     
  390.         .N7GZp8IuWPJvCPz_7dOg .btn {
  391.             width: 24px;
  392.             height: 24px;
  393.             transform-origin: center;
  394.             position: absolute;
  395.             top: 50%;
  396.             right: 100%;
  397.             margin-top: -12px !important;
  398.             margin-right: 10px;
  399.         }
  400.     
  401.         .N7GZp8IuWPJvCPz_7dOg .btn .icon {
  402.             transform: scale(0.85);
  403.             width: 65%;
  404.             height: 65%;
  405.         }
  406.     `);
  407.  
  408.     function createServiceOption(value, service) {
  409.         const option = document.createElement('div');
  410.         option.className = 'service-option';
  411.         option.dataset.value = value;
  412.     
  413.         if (service.icon) {
  414.             const img = document.createElement('img');
  415.             img.src = service.icon;
  416.             img.alt = service.name;
  417.             img.style.display = 'none';
  418.             
  419.             img.onload = () => {
  420.                 img.style.display = 'inline';
  421.             };
  422.             
  423.             option.appendChild(img);
  424.         }
  425.     
  426.         const span = document.createElement('span');
  427.         span.textContent = service.name;
  428.         option.appendChild(span);
  429.         
  430.         return option;
  431.     }
  432.     
  433.     function updateCustomSelect(customSelect, value) {
  434.         const service = SERVICES[value];
  435.         let content = `<span>${service.name}</span>`;
  436.         
  437.         if (service.icon) {
  438.             const img = new Image();
  439.             img.src = service.icon;
  440.             img.style.display = 'none';
  441.             
  442.             img.onload = () => {
  443.                 img.style.display = 'inline';
  444.                 customSelect.querySelector('img')?.style.setProperty('display', 'inline');
  445.             };
  446.             
  447.             content = `<img src="${service.icon}" alt="${service.name}" style="display: none;"><span>${service.name}</span>`;
  448.         }
  449.         
  450.         customSelect.innerHTML = content;
  451.     }
  452.     
  453.     function createPreferencesModal() {
  454.         const existingModal = document.querySelector('.lucida-modal-overlay');
  455.         if (existingModal) {
  456.             existingModal.remove();
  457.         }
  458.     
  459.         const modalHTML = `
  460.             <div class="lucida-modal-overlay">
  461.                 <div class="lucida-modal">
  462.                     <div class="header">
  463.                         <h2>Lucida Preferences</h2>
  464.                         <img src="${BASE_URL}lucida.svg" alt="Lucida Icon" class="lucida-icon" style="cursor: pointer; margin-left: auto; display: none;">
  465.                     </div>
  466.                     <div class="preference-group">
  467.                         <label for="domain-select">Domain</label>
  468.                         <select id="domain-select">
  469.                             <option value="random">Random</option>
  470.                             <option value="lucida.to">Lucida.to</option>
  471.                             <option value="lucida.su">Lucida.su</option>
  472.                         </select>
  473.                         
  474.                         <label for="service-select">Service Resolver</label>
  475.                         <div class="service-select-wrapper">
  476.                             <div class="custom-select" id="custom-service-select">
  477.                                 <img src="" alt="" style="display: none;">
  478.                                 <span>Select a service</span>
  479.                             </div>
  480.                             <div class="custom-options">
  481.                             </div>
  482.                         </div>
  483.                         <input type="hidden" id="service-select">
  484.                         
  485.                         <label for="format-select">Download Format</label>
  486.                         <select id="format-select">
  487.                             <option value="original">Original Format (Highest Quality)</option>
  488.                             <option value="flac">FLAC</option>
  489.                             <option value="mp3">MP3</option>
  490.                             <option value="ogg-vorbis">OGG Vorbis</option>
  491.                             <option value="opus">Opus</option>
  492.                             <option value="m4a-aac">M4A AAC</option>
  493.                             <option value="wav">WAV</option>
  494.                             <option value="bitcrush">Bitcrush</option>
  495.                         </select>
  496.  
  497.                         <div id="quality-settings-container" style="display: none; margin-top: 20px;">
  498.                             <label for="quality-select" style="margin-top: 0;">Quality Settings</label>
  499.                             <select id="quality-select"></select>
  500.                         </div>
  501.  
  502.                         <label for="float-select">Float Icon</label>
  503.                         <select id="float-select">
  504.                             <option value="enabled">Enabled</option>
  505.                             <option value="disabled">Disabled</option>
  506.                         </select>
  507.                     </div>
  508.                     <div class="buttons">
  509.                         <button class="cancel-btn">Cancel</button>
  510.                         <button class="save-btn">Save</button>
  511.                     </div>
  512.                 </div>
  513.             </div>
  514.         `;
  515.     
  516.         const modalContainer = document.createElement('div');
  517.         modalContainer.innerHTML = modalHTML;
  518.         document.body.appendChild(modalContainer.firstElementChild);
  519.     
  520.         const customSelect = document.getElementById('custom-service-select');
  521.         const customOptions = document.querySelector('.custom-options');
  522.         const serviceSelect = document.getElementById('service-select');
  523.         const domainSelect = document.getElementById('domain-select');
  524.         const floatSelect = document.getElementById('float-select');
  525.         const formatSelect = document.getElementById('format-select');
  526.         const qualityContainer = document.getElementById('quality-settings-container');
  527.         const qualitySelect = document.getElementById('quality-select');
  528.         const lucidaIcon = document.querySelector('.lucida-icon');
  529.     
  530.         lucidaIcon.onload = () => {
  531.             lucidaIcon.style.display = 'inline';
  532.         };
  533.     
  534.         lucidaIcon.onerror = () => {
  535.             lucidaIcon.style.display = 'none';
  536.         };
  537.     
  538.         lucidaIcon.addEventListener('click', () => {
  539.             const domainPref = GM_getValue('domainPreference', 'random');
  540.             let domain = domainPref === 'random' 
  541.                 ? DOMAINS[Math.floor(Math.random() * DOMAINS.length)]
  542.                 : domainPref;
  543.             window.open(`https://${domain}/stats`, '_blank');
  544.         });
  545.     
  546.         if (domainSelect) domainSelect.value = GM_getValue('domainPreference', 'random');
  547.         if (floatSelect) floatSelect.value = GM_getValue('floatIconEnabled', 'enabled');
  548.         if (formatSelect) formatSelect.value = GM_getValue('formatPreference', 'original');
  549.     
  550.         const savedService = GM_getValue('targetService', '');
  551.         if (savedService && SERVICES[savedService]) {
  552.             updateCustomSelect(customSelect, savedService);
  553.             serviceSelect.value = savedService;
  554.         }
  555.     
  556.         function updateQualityOptions(format) {
  557.             qualitySelect.innerHTML = '';
  558.             
  559.             switch(format) {
  560.                 case 'flac':
  561.                     qualitySelect.innerHTML = '<option value="16">16-bit 44.1kHz</option>';
  562.                     qualityContainer.style.display = 'block';
  563.                     break;
  564.                 case 'mp3':
  565.                 case 'ogg-vorbis':
  566.                 case 'm4a-aac':
  567.                     qualitySelect.innerHTML = `
  568.                         <option value="320">320kb/s</option>
  569.                         <option value="256">256kb/s</option>
  570.                         <option value="192">192kb/s</option>
  571.                         <option value="128">128kb/s</option>
  572.                     `;
  573.                     qualityContainer.style.display = 'block';
  574.                     break;
  575.                 case 'opus':
  576.                     qualitySelect.innerHTML = `
  577.                         <option value="320">320kb/s</option>
  578.                         <option value="256">256kb/s</option>
  579.                         <option value="192">192kb/s</option>
  580.                         <option value="128">128kb/s</option>
  581.                         <option value="96">96kb/s</option>
  582.                         <option value="64">64kb/s</option>
  583.                     `;
  584.                     qualityContainer.style.display = 'block';
  585.                     break;
  586.                 default:
  587.                     qualityContainer.style.display = 'none';
  588.             }
  589.         }
  590.     
  591.         updateQualityOptions(formatSelect.value);
  592.         if (qualitySelect) {
  593.             qualitySelect.value = GM_getValue('qualityPreference', '320');
  594.         }
  595.     
  596.         formatSelect.addEventListener('change', () => {
  597.             updateQualityOptions(formatSelect.value);
  598.         });
  599.     
  600.         Object.entries(SERVICES).forEach(([value, service]) => {
  601.             const option = createServiceOption(value, service);
  602.             customOptions.appendChild(option);
  603.             
  604.             option.addEventListener('click', () => {
  605.                 serviceSelect.value = value;
  606.                 updateCustomSelect(customSelect, value);
  607.                 customOptions.classList.remove('show');
  608.             });
  609.         });
  610.     
  611.         customSelect.addEventListener('click', () => {
  612.             customOptions.classList.toggle('show');
  613.         });
  614.     
  615.         document.addEventListener('click', (e) => {
  616.             if (!e.target.closest('.service-select-wrapper')) {
  617.                 customOptions.classList.remove('show');
  618.             }
  619.         });
  620.     
  621.         const saveBtn = document.querySelector('.save-btn');
  622.         if (saveBtn) {
  623.             saveBtn.addEventListener('click', () => {
  624.                 if (domainSelect && serviceSelect && floatSelect && formatSelect && qualitySelect) {
  625.                     GM_setValue('domainPreference', domainSelect.value);
  626.                     GM_setValue('targetService', serviceSelect.value);
  627.                     GM_setValue('floatIconEnabled', floatSelect.value);
  628.                     GM_setValue('formatPreference', formatSelect.value);
  629.                     GM_setValue('qualityPreference', qualitySelect.value);
  630.                     
  631.                     const floatingButton = document.querySelector('.floating-button');
  632.                     if (floatingButton) {
  633.                         floatingButton.style.display = floatSelect.value === 'enabled' ? 'flex' : 'none';
  634.                     }
  635.                 }
  636.                 document.querySelector('.lucida-modal-overlay').remove();
  637.             });
  638.         }
  639.     
  640.         const cancelBtn = document.querySelector('.cancel-btn');
  641.         if (cancelBtn) {
  642.             cancelBtn.addEventListener('click', () => {
  643.                 document.querySelector('.lucida-modal-overlay').remove();
  644.             });
  645.         }
  646.     
  647.         const modalOverlay = document.querySelector('.lucida-modal-overlay');
  648.         if (modalOverlay) {
  649.             modalOverlay.addEventListener('click', (e) => {
  650.                 if (e.target === modalOverlay) {
  651.                     modalOverlay.remove();
  652.                 }
  653.             });
  654.         }
  655.     }
  656.  
  657.     function autoSelectFormat() {
  658.         if (!window.location.hostname.includes('lucida.')) return;
  659.  
  660.         const selectFormatAndQuality = () => {
  661.             const convertSelect = document.getElementById('convert');
  662.             if (!convertSelect) return;
  663.  
  664.             const format = GM_getValue('formatPreference', 'original');
  665.             const quality = GM_getValue('qualityPreference', '320');
  666.  
  667.             convertSelect.value = format;
  668.             convertSelect.dispatchEvent(new Event('change', { bubbles: true }));
  669.  
  670.             const observer = new MutationObserver((mutations, obs) => {
  671.                 const downsettingSelect = document.getElementById('downsetting');
  672.                 if (downsettingSelect) {
  673.                     downsettingSelect.value = quality;
  674.                     downsettingSelect.dispatchEvent(new Event('change', { bubbles: true }));
  675.                     obs.disconnect();
  676.                 }
  677.             });
  678.  
  679.             observer.observe(document.body, { childList: true, subtree: true });
  680.         };
  681.  
  682.         if (document.getElementById('convert')) {
  683.             selectFormatAndQuality();
  684.         }
  685.  
  686.         const pageObserver = new MutationObserver((mutations) => {
  687.             if (document.getElementById('convert')) {
  688.                 selectFormatAndQuality();
  689.             }
  690.         });
  691.  
  692.         pageObserver.observe(document.body, { childList: true, subtree: true });
  693.     }
  694.     
  695.     function setupMenuCommand() {
  696.         try {
  697.             GM_registerMenuCommand('Lucida Preferences', () => {
  698.                 console.log('Opening preferences modal...');
  699.                 createPreferencesModal();
  700.             });
  701.         } catch (error) {
  702.             console.error('Error registering menu command:', error);
  703.         }
  704.     }
  705.     
  706.     function openInLucida(trackUrl) {
  707.         const currentUrl = encodeURIComponent(trackUrl || window.location.href);
  708.         const prefs = getPreferences();
  709.         
  710.         let domain = prefs.domainPreference === 'random' 
  711.             ? DOMAINS[Math.floor(Math.random() * DOMAINS.length)]
  712.             : prefs.domainPreference;
  713.         
  714.         let url = `https://${domain}/?url=${currentUrl}&country=auto`;
  715.         if (prefs.targetService) {
  716.             url += `&to=${prefs.targetService}`;
  717.         }
  718.         
  719.         window.open(url, '_blank');
  720.     }
  721.     
  722.     const getPreferences = () => ({
  723.         targetService: GM_getValue('targetService', ''),
  724.         domainPreference: GM_getValue('domainPreference', 'random')
  725.     });
  726.     
  727.     function addButton(el) {
  728.         const button = document.createElement('button');
  729.         button.className = 'btn';
  730.         
  731.         const icon = document.createElement('div');
  732.         icon.className = 'icon';
  733.         
  734.         button.appendChild(icon);
  735.         el.appendChild(button);
  736.         
  737.         return button;
  738.     }
  739.     
  740.     function addNowPlayingButton() {
  741.         const downloadButton = document.createElement('button');
  742.         downloadButton.className = 'Lucida-Button-sc-1dqy6lx-0 dmdXQN';
  743.         downloadButton.innerHTML = '<span aria-hidden="true" class="IconWrapper__Wrapper-sc-16usrgb-0 hYdsxw"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 448 512" class="Svg-sc-ytk21e-0 dYnaPI" width="24" height="24" fill="currentColor"><path d="M114.2 192L224 302 333.8 192 280 192c-13.3 0-24-10.7-24-24l0-120-64 0 0 120c0 13.3-10.7 24-24 24l-53.8 0zM224 352c-11.5 0-22.5-4.6-30.6-12.7L77.6 223.2C68.9 214.5 64 202.7 64 190.4c0-25.6 20.8-46.4 46.4-46.4l33.6 0 0-96c0-26.5 21.5-48 48-48l64 0c26.5 0 48 21.5 48 48l0 96 33.6 0c25.6 0 46.4 20.8 46.4 46.4c0 12.3-4.9 24.1-13.6 32.8L254.6 339.3c-8.1 8.1-19.1 12.7-30.6 12.7zM48 344l0 80c0 22.1 17.9 40 40 40l272 0c22.1 0 40-17.9 40-40l0-80c0-13.3 10.7-24 24-24s24 10.7 24 24l0 80c0 48.6-39.4 88-88 88L88 512c-48.6 0-88-39.4-88-88l0-80c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg></span>';
  744.     
  745.         downloadButton.style.cssText = 'background:transparent;border:none;color:#f42e8d;cursor:pointer;padding:8px;margin:0 4px;transition:transform .2s ease';
  746.     
  747.         downloadButton.onmouseover = () => downloadButton.style.transform = 'scale(1.1)';
  748.         downloadButton.onmouseout = () => downloadButton.style.transform = 'scale(1)';
  749.     
  750.         downloadButton.onclick = () => {
  751.             const link = document.querySelector('a[href*="spotify:track:"]');
  752.             if (link) {
  753.                 const match = link.getAttribute('href').match(/spotify:track:([a-zA-Z0-9]+)/);
  754.                 if (match) {
  755.                     const trackUrl = `https://open.spotify.com/track/${match[1]}`;
  756.                     openInLucida(trackUrl);
  757.                 }
  758.             }
  759.         };
  760.     
  761.         const container = document.querySelector('.snFK6_ei0caqvFI6As9Q')?.querySelector('.deomraqfhIAoSB3SgXpu');
  762.         if (container && !container.querySelector('.Lucida-Button-sc-1dqy6lx-0')) {
  763.             container.appendChild(downloadButton);
  764.         }
  765.     }
  766.  
  767.     function animate() {
  768.         const currentUrl = window.location.href;
  769.         const urlParts = currentUrl.split('/');
  770.         const type = urlParts[3];
  771.     
  772.         addNowPlayingButton();
  773.     
  774.         if (type === 'track') {
  775.             const actionBarRow = document.querySelector('.eSg4ntPU2KQLfpLGXAww[data-testid="action-bar-row"]');
  776.             if (actionBarRow && !actionBarRow.hasButtons) {
  777.                 const downloadButton = addButton(actionBarRow);
  778.                 downloadButton.onclick = function() {
  779.                     const spotifyId = urlParts[4].split('?')[0];
  780.                     openInLucida(`https://open.spotify.com/track/${spotifyId}`);
  781.                 }
  782.                 actionBarRow.hasButtons = true;
  783.             }
  784.         }
  785.     
  786.         if (type === 'artist') {
  787.             const tracks = document.querySelectorAll('[role="gridcell"]');
  788.             tracks.forEach(track => {
  789.                 if (!track.hasButtons) {
  790.                     const downloadButton = addButton(track);
  791.                     downloadButton.onclick = function() {
  792.                         const btn = track.querySelector('[data-testid="more-button"]');
  793.                         if (btn) {
  794.                             btn.click();
  795.                             setTimeout(() => {
  796.                                 const highlightEl = document.querySelector('#context-menu a[href*="highlight"]');
  797.                                 if (highlightEl) {
  798.                                     const highlight = highlightEl.href.match(/highlight=(.+)/)[1];
  799.                                     document.dispatchEvent(new MouseEvent('mousedown'));
  800.                                     const spotifyId = highlight.split(':')[2];
  801.                                     openInLucida(`https://open.spotify.com/track/${spotifyId}`);
  802.                                 }
  803.                             }, 1);
  804.                         }
  805.                     }
  806.                     track.hasButtons = true;
  807.                 }
  808.             });
  809.         }
  810.     
  811.         if (type === 'album' || type === 'playlist' || type === 'track') {
  812.             const tracks = document.querySelectorAll('[data-testid="tracklist-row"]');
  813.             tracks.forEach(track => {
  814.                 if (!track.hasButtons) {
  815.                     const downloadButton = addButton(track);
  816.                     downloadButton.onclick = function() {
  817.                         const trackLink = track.querySelector('a[href^="/track"]');
  818.                         if (trackLink) {
  819.                             openInLucida(trackLink.href);
  820.                         } else {
  821.                             const btn = track.querySelector('[data-testid="more-button"]');
  822.                             if (btn) {
  823.                                 btn.click();
  824.                                 setTimeout(() => {
  825.                                     const highlightEl = document.querySelector('#context-menu a[href*="highlight"]');
  826.                                     if (highlightEl) {
  827.                                         const highlight = highlightEl.href.match(/highlight=(.+)/)[1];
  828.                                         document.dispatchEvent(new MouseEvent('mousedown'));
  829.                                         const spotifyId = highlight.split(':')[2];
  830.                                         openInLucida(`https://open.spotify.com/track/${spotifyId}`);
  831.                                     }
  832.                                 }, 1);
  833.                             }
  834.                         }
  835.                     }
  836.                     track.hasButtons = true;
  837.                 }
  838.             });
  839.         }
  840.     }
  841.     
  842.     function animateLoop() {
  843.         if (window.location.hostname === 'open.spotify.com') {
  844.             animate();
  845.         }
  846.         requestAnimationFrame(animateLoop);
  847.     }
  848.     
  849.     const button = document.createElement('button');
  850.     button.className = 'floating-button';
  851.     button.innerHTML = LOGO_SVG;
  852.     
  853.     const savedPosition = {
  854.         left: GM_getValue('buttonLeft', '20'),
  855.         top: GM_getValue('buttonTop', '20')
  856.     };
  857.     
  858.     button.style.left = savedPosition.left + 'px';
  859.     button.style.top = savedPosition.top + 'px';
  860.     
  861.     let isDragging = false;
  862.     let startX, startY;
  863.     
  864.     button.addEventListener('mousedown', e => {
  865.         if (e.target.tagName.toLowerCase() !== 'svg') {
  866.             isDragging = true;
  867.             startX = e.clientX - button.offsetLeft;
  868.             startY = e.clientY - button.offsetTop;
  869.         }
  870.     });
  871.     
  872.     document.addEventListener('mousemove', e => {
  873.         if (!isDragging) return;
  874.         
  875.         let left = e.clientX - startX;
  876.         let top = e.clientY - startY;
  877.         
  878.         left = Math.max(0, Math.min(window.innerWidth - button.offsetWidth, left));
  879.         top = Math.max(0, Math.min(window.innerHeight - button.offsetHeight, top));
  880.         
  881.         button.style.left = left + 'px';
  882.         button.style.top = top + 'px';
  883.     });
  884.     
  885.     document.addEventListener('mouseup', () => {
  886.         if (!isDragging) return;
  887.         isDragging = false;
  888.         
  889.         const SNAP = 20;
  890.         const rect = button.getBoundingClientRect();
  891.         
  892.         if (rect.left < SNAP) button.style.left = '0px';
  893.         if (rect.top < SNAP) button.style.top = '0px';
  894.         if (window.innerWidth - rect.right < SNAP) button.style.left = (window.innerWidth - rect.width) + 'px';
  895.         if (window.innerHeight - rect.bottom < SNAP) button.style.top = (window.innerHeight - rect.height) + 'px';
  896.     
  897.         GM_setValue('buttonLeft', button.style.left.replace('px', ''));
  898.         GM_setValue('buttonTop', button.style.top.replace('px', ''));
  899.     });
  900.     
  901.     button.addEventListener('click', e => {
  902.         if (e.target.closest('svg')) {
  903.             openInLucida();
  904.         }
  905.     });
  906.     
  907.     if (GM_getValue('floatIconEnabled', 'enabled') === 'disabled') {
  908.         button.style.display = 'none';
  909.     }
  910.     
  911.     document.body.appendChild(button);
  912.     setupMenuCommand();
  913.     requestAnimationFrame(animateLoop);
  914.     autoSelectFormat();
  915. })();