🎵 Cider for Flexbar

Control Cider from Flexbar with album artwork, live playback progress, playback buttons, Volume, and Listening Mode.

简体中文 · Current release: v2.0.0

✨ Features

• 🎵 Now Playing: Album artwork, Unicode title/artist, and a thin live timeline below the artist. The timeline scales with the key width and is display-only; tap anywhere on the key to play/pause.
• ⏯️ Playback: Previous, Play/Pause, and Next buttons.
• 🎨 Appearance: Optional play/pause icons on the cover, a custom timeline color, and system fonts with adjustable text size.
• 🔊 Volume: A native slider controls Cider's playback volume and follows changes made in Cider.
• 🎧 Listening Mode: Cycle Off → Gaming → Unwind → Off, or select each mode directly. All four controls stay synchronized with Cider.

🚀 Quick Start

You need a Flexbar and a computer running Cider 4.0 and FlexDesigner 2.2.2+.

1. Download the package for your platform from Releases.
2. Install the .flexplugin file through FlexDesigner's plugin manager.
3. Create and copy your Cider token.
4. Open FlexDesigner → Settings → Application → Cider and paste it into Cider API Token.
5. Click TEST CONNECTION, confirm Connected to Cider, then click SAVE TOKEN.
6. Add Cider controls from the key library to your layout, save, and upload to Flexbar.

🔑 Get Your Cider API Token

In Cider

1. Open Cider → Settings → Connectivity.
2. Find External Applications, then RPC Server/WebSockets API. Keep the RPC/API server enabled.
3. Click Manage External Application Access to Cider.
4. Click Create New to create a token.
5. Click Copy Token for the new entry.

In FlexDesigner

1. Open Settings → Application → Cider.
2. Paste the copied token into Cider API Token.
3. Click TEST CONNECTION and confirm Connected to Cider.
4. Click SAVE TOKEN to apply it.

Testing does not save the token. Keep your token private and leave Cider running while using the plugin.

🎨 Now Playing Appearance

Open FlexDesigner → Settings → Application → Cider and scroll to Now Playing Appearance.

Setting	Behavior
Show Play/Pause Overlay	Enabled by default. Shows a pause icon while playing and a play icon while paused. Turning it off keeps tap-to-play/pause working.
Auto-hide Play/Pause Overlay	Off by default. When enabled, the icon appears on initialization and playback changes, then hides after the configured delay.
Hide Overlay After	1–30 whole seconds, default 3. Available when the overlay and auto-hide are both enabled.
Timeline Color	Sets the played portion of the timeline; white by default.
Now Playing Font	Choose a font installed on your computer, or System Default. Applies to the song title and artist.
Now Playing Font Size	Set the title to 12–30 px, or leave empty to use the key's font size. The artist line adapts to fit.

Click SAVE APPEARANCE below the font controls to apply your choices immediately, without reconnecting Cider or uploading the layout again. SAVE TOKEN in Cider Connection saves only the connection token; each section preserves the other section's saved values. Unavailable fonts fall back to the system default.

With auto-hide enabled, using either Play/Pause control or changing playback directly in Cider shows the appropriate icon and restarts the countdown. Tap-to-play/pause remains available after the icon hides.

🎛️ Available Controls

Control	What it does
Now Playing	Shows artwork, title/artist, and a playback timeline; tap to play/pause.
Previous	Goes to the previous track.
Play/Pause	Toggles playback.
Next	Goes to the next track.
Volume	Adjusts Cider's playback volume from 0–100%.
Listening Mode	Cycles Off → Gaming → Unwind → Off.
Listening Mode - Off	Selects Off.
Listening Mode - Gaming	Selects Gaming.
Listening Mode - Unwind	Selects Unwind.

The cycle button shows the current mode; direct buttons highlight the active mode in blue. Icons: Off close-box-outline, Gaming gamepad-variant-outline, Unwind bed-king-outline.

The timeline cannot be dragged or used to seek. It hides when timing is unavailable or the key is too narrow. After resizing Now Playing, apply the change and upload the layout.

📦 Downloads

Download from the latest release:

Platform	Package
Windows 11 x64	com.sonw.cider.flexplugin
macOS 15+ Apple Silicon	com.sonw.cider.macos-arm64.flexplugin
macOS 15+ Intel	com.sonw.cider.macos-x64.flexplugin

macOS support is experimental: both builds pass CI, but physical Flexbar testing has only been completed on Windows. You may need to download the matching macOS package manually from GitHub.

Match FlexDesigner's architecture: Intel FlexDesigner running under Rosetta needs the Intel package.

🔧 Troubleshooting

Problem	What to check
Connection test fails	Keep Cider running; check Settings → Connectivity → External Applications → RPC Server. Copy the token again from Manage External Application Access to Cider, paste it correctly, test, then click SAVE TOKEN. Also make sure you installed the package for your platform and architecture: installing the Windows package on macOS, or the wrong macOS architecture package, can also cause the connection test to fail.
Set Cider Token appears	Configure and save the token in FlexDesigner → Settings → Application → Cider.
An update appears inactive	Save and upload the layout, then restart FlexDesigner to clear an older linked backend.
Missing characters	Install a system font for the affected language; fonts are not bundled.

🛠️ Build from Source

Use Node.js 20.20.2 (see .node-version) and npm in the repository folder:

npm ci
npm test
npm run build
npm run plugin:validate
npm run plugin:pack

Build on the target OS and architecture: the Canvas native library is platform-specific. The output is com.sonw.cider.flexplugin; official releases build Windows x64, macOS arm64, and macOS x64 separately.

📁 Project Structure

File	Purpose
src/plugin.js	FlexDesigner integration and control actions.
src/musicControl.js	Cider communication and artwork retrieval.
src/canvasRenderer.js	Now Playing display.
manifest.json	Plugin metadata and controls.
ui/global_config.vue	Connection and Now Playing appearance settings.

📄 License & References

MIT License · © 2026 Sonw. Releases include project and third-party license notices.

Flexbar SDK · YouTube Music plugin — README style reference