### X-RADIOLIST Features and Integration

Source: https://github.com/xproject/x-radiolist/blob/master/README.md

This section outlines the key features of X-RADIOLIST, including its standalone capability, RP name display integration with frameworks like ESX-Legacy and QB-Core, visual cues for players talking on the radio, and customizable radio channel naming. It also details improvements over the JLRP-RadioList, such as performance enhancements, bug fixes, code readability, and advanced configuration options for visibility, channel naming, and access control.

```lua
-- Example of configuration for RP name display (requires framework integration)
Config.ShowRPName = true

-- Example of naming radio channels
Config.RadioChannelsWithName = {
    [0] = "Admin",
    [1] = "Police",
    [2] = "EMS"
}

-- Example of toggling visibility for self
Config.ToggleSelfVisibility = true

-- Example of showing server ID next to name
Config.ShowServerID = true

-- Example of using QB callsign metadata
Config.UseQBCallsign = true

-- Example of restricting access to radio list
Config.AllowedGroups = {"admin", "police", "ems"}

```

--------------------------------

### CSS: Style Radio List Container and Talking State

Source: https://github.com/xproject/x-radiolist/blob/master/web/index.html

This CSS defines the styling for the radio list container, including its absolute positioning, text alignment, font properties, and text shadow for a distinct appearance. It also defines a '.talking' class to visually indicate when a radio station is active.

```CSS
.radio-list-container {
    position: absolute;
    top: 40%;
    right: 0%;
    text-align: right;
    padding: 5px;
    font-family: sans-serif;
    font-weight: bold;
    color: rgb(1, 176, 240);
    font-size: 0.6vw;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.talking {
    color: rgba(244, 196, 65, 255);
}
```

--------------------------------

### JavaScript: Manage Radio List Updates via Message Events

Source: https://github.com/xproject/x-radiolist/blob/master/web/index.html

This JavaScript code listens for 'message' events to dynamically update a radio list. It handles adding new radio stations, updating their talking status, removing them, clearing the entire list, and changing the visibility of the radio list container based on incoming message data.

```JavaScript
window.addEventListener("message", function(event) {
    var item = event.data;
    if (item.radioId != null) {
        let radioListElem = document.getElementById("radio-list");
        if (!radioListElem.firstChild) {
            //add radio list header
            let listHeader = document.createElement("div");
            listHeader.id = "radio-list-header";
            listHeader.textContent = "\uD83D\uDCE1Radio " + item.channel;
            listHeader.style.textDecorationLine = "underline";
            radioListElem.appendChild(listHeader);
        }
        if (item.radioName != null) {
            let listItem = document.createElement("div");
            listItem.id = "radio-list-item-" + item.radioId;
            listItem.textContent = item.radioName + (item.self ? "\uD83D\uDD38" : "\uD83D\uDD39");
            radioListElem.appendChild(listItem);
        } else if (item.radioTalking != null) {
            let listItem = document.getElementById("radio-list-item-" + item.radioId)
            if (item.radioTalking) {
                listItem.className = "talking"
            } else {
                listItem.className = ""
            }
        } else {
            let listItem = document.getElementById("radio-list-item-" + item.radioId)
            radioListElem.removeChild(listItem);
        }
    }
    if (item.clearRadioList) {
        let radioListElem = document.getElementById("radio-list");
        while (radioListElem.firstChild) {
            radioListElem.removeChild(radioListElem.firstChild);
        }
    }
    if (item.changeVisibility) {
        if (item.visible == true) {
            document.getElementById("radio-list").style.display = "block";
        } else if (item.visible == false) {
            document.getElementById("radio-list").style.display = "none";
        }
    }
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.