# nui panel

The boombox control panel opens automatically when a player interacts with a placed boombox. It provides full playback control, volume, distance, and song management.

## Opening the Panel

{% stepper %}
{% step %}

#### Use the boombox item

Using the `boombox` item from inventory spawns the prop on the player and attaches it to their hand.
{% endstep %}

{% step %}

#### Place the boombox

Press `E` to drop the boombox at the player's location. An interaction zone is created around it.
{% endstep %}

{% step %}

#### Interact

Walk up to the boombox and use your target system key (default `Alt` for ox\_target) to select **Interact**. The NUI panel opens.
{% endstep %}
{% endstepper %}

## Playback Controls

| Control             | Description                                                                                         |
| ------------------- | --------------------------------------------------------------------------------------------------- |
| **URL Input**       | Paste any YouTube URL. Supports `watch?v=`, `youtu.be/`, `/embed/`, and `/v/` formats.              |
| **Volume Slider**   | Adjusts playback volume from 0–100. Updates live while music is playing.                            |
| **Distance Slider** | Controls how far the 3D sound travels (1–40 units). Updates live while music is playing.            |
| **▶ Play**          | Starts playback of the URL in the input. Fetches the YouTube title and album art automatically.     |
| **■ Stop**          | Stops the currently playing track and resets the vinyl animation.                                   |
| **💾 Save**         | Opens the save dialog — enter a label and the current URL is saved to your account in the database. |

## Saved Songs

Saved songs appear as scrollable chips at the bottom of the panel, loaded from the database when the UI opens.

* Click any chip to instantly load and play that track at the current volume and distance settings.
* Click the **✕** on a chip to delete that saved song from the database.
* Songs are stored per player — each account has its own saved song list.
* The chip row scrolls horizontally — hover over it and scroll with the mouse wheel.

## Keyboard Shortcuts

| Key      | Action                                                       |
| -------- | ------------------------------------------------------------ |
| `Escape` | Close the panel (or close the save dialog if it is open)     |
| `Enter`  | Confirm save — submits the song when the save dialog is open |

## Supported YouTube URL Formats

| Format             | Example                                   | Supported        |
| ------------------ | ----------------------------------------- | ---------------- |
| Standard watch URL | `https://www.youtube.com/watch?v=VIDEOID` | ✓ Yes            |
| Shortened URL      | `https://youtu.be/VIDEOID`                | ✓ Yes            |
| Embed URL          | `https://www.youtube.com/embed/VIDEOID`   | ✓ Yes            |
| Old /v/ URL        | `https://www.youtube.com/v/VIDEOID`       | ✓ Yes            |
| Non-YouTube URLs   | Any other domain                          | ⚠ No thumb/title |

## Pickup

To pick the boombox back up, interact with it via your target system and select **Pick Up**. This will:

* Stop any playing music
* Delete the boombox entity
* Return the `boombox` item to the player's inventory


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mohssins.gitbook.io/mohscriptsdocs/moh-boombox/nui-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.