How to Customize Douban Image Proxy Settings in LunaTV: A Complete Guide

To customize Douban image proxy settings in LunaTV, modify the localStorage keys doubanImageProxyType and doubanImageProxyUrl through the user menu settings or programmatically via the browser console.

The MoonTechLab/LunaTV application routes Douban image requests through a configurable proxy system to optimize loading speeds and bypass regional restrictions. This proxy configuration controls how the application rewrites image URLs from doubanio.com domains, allowing users to specify custom CDN endpoints or self-hosted alternatives.

Understanding the Douban Image Proxy Architecture

LunaTV stores proxy preferences in the browser's localStorage under two specific keys. The src/lib/utils.ts file contains the core logic that reads these values and constructs the proxy configuration object used throughout the application.

When the application initializes, it retrieves the stored preferences with fallback defaults:

// src/lib/utils.ts (excerpt)
let doubanImageProxyType = localStorage.getItem('doubanImageProxyType') || 'server';
if (doubanImageProxyType === 'direct' || doubanImageProxyType === 'img3') {
  doubanImageProxyType = 'server';   // forced fallback for safety
}
const doubanImageProxy = localStorage.getItem('doubanImageProxyUrl') || '';

export const doubanImageProxyConfig = {
  proxyType: doubanImageProxyType,
  proxyUrl: doubanImageProxy,
};

The system validates the proxy type and forces a fallback to 'server' if the stored value is 'direct' or 'img3', ensuring consistent image delivery. If the target image URL does not contain doubanio.com, the utility returns the original URL unchanged. Otherwise, it rewrites the hostname to match the selected proxy endpoint.

Accessing the Proxy Settings Interface

The user interface for modifying these values resides in src/components/UserMenu.tsx. This component renders a settings panel with two primary controls:

• Proxy Type Dropdown: Maps to the doubanImageProxyType localStorage key, defaulting to "cmliussss-cdn-tencent" (or "server" in the utility logic)
• Custom URL Input: Maps to the doubanImageProxyUrl key, appearing when the user selects a "Custom" option

When users interact with these controls, the component immediately persists the values:

// src/components/UserMenu.tsx (excerpt)
localStorage.setItem('doubanImageProxyType', value);   // when dropdown changes
localStorage.setItem('doubanImageProxyUrl', value);    // when custom URL is saved

The interface reads these stored values on startup, ensuring proxy preferences persist across browser sessions.

Configuration Methods

Via the Settings Menu (User Interface)

The most straightforward method to customize Douban image proxy settings in LunaTV uses the built-in settings panel:

1. Click the user avatar to open the dropdown menu
2. Locate the "Douban Image Proxy" section
3. Select a predefined proxy type from the dropdown (e.g., cmliussss-cdn-tencent)
4. Alternatively, select Custom to reveal the text input field
5. Enter the full proxy base URL (e.g., https://my-proxy.example.com)
6. Click Save to persist the configuration to localStorage

Changes take effect immediately for subsequent image requests.

Programmatic Configuration (Advanced)

Developers or users requiring scripted configuration can manipulate localStorage directly:

// Change to a specific proxy type
localStorage.setItem('doubanImageProxyType', 'custom');

// Set a custom proxy URL
localStorage.setItem('doubanImageProxyUrl', 'https://my-proxy.example.com');

// Reload to apply changes (optional)
window.location.reload();

This approach bypasses the UI and allows integration with browser extensions or deployment scripts.

Resetting to Default Values

The Reset button in the user menu settings panel restores the library-defined constants (defaultDoubanImageProxyType and defaultDoubanImageProxyUrl). This operation overwrites the localStorage keys with empty strings or default identifiers, forcing the application to use the built-in server-side proxy configuration defined in src/lib/utils.ts.

How the Proxy Logic Works

The proxy configuration directly impacts how src/lib/douban.client.ts constructs image requests. When fetching Douban media, the client checks if the image URL contains doubanio.com. If matched, it rewrites the hostname using the proxyUrl from doubanImageProxyConfig, routing the request through the specified intermediate server.

This mechanism enables several use cases:

• Regional CDN usage: Route images through geographically closer servers
• Self-hosted proxies: Use personal infrastructure to cache and serve Douban media
• Access reliability: Bypass network restrictions blocking direct Douban connections

Summary

• Storage Location: LunaTV stores proxy settings in localStorage under doubanImageProxyType and doubanImageProxyUrl
• Core Logic: The src/lib/utils.ts file handles validation and configuration object creation, with safety fallbacks for invalid proxy types
• User Interface: Modify settings through src/components/UserMenu.tsx, which provides dropdown selection and custom URL input
• Implementation: The src/lib/douban.client.ts file consumes this configuration to rewrite doubanio.com image URLs at request time
• Persistence: All changes save immediately to localStorage and persist across sessions until reset

Frequently Asked Questions

How do I use a completely custom proxy URL not listed in the dropdown?

Select Custom from the proxy type dropdown in the user menu, then enter your full proxy base URL (including the protocol, e.g., https://images.mydomain.com) in the text field that appears. Click Save to store the value in localStorage under the doubanImageProxyUrl key.

Why does LunaTV force a fallback to 'server' for certain proxy types?

The application enforces this safety mechanism in src/lib/utils.ts to prevent broken image loading. If the stored doubanImageProxyType equals 'direct' or 'img3', the code automatically reassigns it to 'server' to ensure compatibility with the current image routing implementation.

Will my proxy settings persist after clearing browser data?

No. Since LunaTV stores proxy configuration in the browser's localStorage, clearing site data or browsing history will remove the doubanImageProxyType and doubanImageProxyUrl keys. You must reconfigure the settings after clearing data, or consider backing up these specific localStorage keys if maintaining custom proxies is critical.

Which source files should I examine to understand the proxy implementation?

Review src/lib/utils.ts for the configuration logic and storage retrieval, src/components/UserMenu.tsx for the user interface implementation, and src/lib/douban.client.ts to see how the application applies these settings when constructing actual image requests to Douban's servers.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}