# Full Configuration Guide

Video Background

js

```js
video: {
    source: '...',
    blur: '0px',
    volume: 0.2
}
```

| Property | Type     | Description                                                                                                                     |
| -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `source` | `string` | Direct URL to the background video (.mp4 recommended). Also used for the dynamic preload — changing this is all you need to do. |
| `blur`   | `string` | CSS blur value. Use `'0px'` for no blur, e.g. `'4px'` to blur                                                                   |
| `volume` | `number` | Initial volume for music. Range: `0.0` (muted) to `1.0` (full)                                                                  |

***

### Music

js

```js
music: {
    enabled: true,
    playlist: [
        {
            artist: "ARTIST NAME",
            song:   "SONG NAME",
            cover:  'https://...',
            source: 'https://...'
        }
    ]
}
```

| Property            | Type      | Description                                                                                                                          |
| ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `enabled`           | `boolean` | Set to `true` to use a separate audio track. Video will be muted automatically. Set to `false` to use the video's own audio instead. |
| `playlist[]`        | `array`   | List of songs. The ⏮ / ⏭ buttons cycle through all entries. No limit on how many you add.                                            |
| `playlist[].artist` | `string`  | Artist name displayed on the music card                                                                                              |
| `playlist[].song`   | `string`  | Song name displayed on the music card                                                                                                |
| `playlist[].cover`  | `string`  | URL to the album/cover artwork image                                                                                                 |
| `playlist[].source` | `string`  | Direct URL to the audio file (.mp3 recommended). Host on FiveManage and paste the r2 URL.                                            |

> 💡 When a track ends it automatically advances to the next song in the playlist. All volume and play/pause controls target the audio player, not the video.

***

### Project / Branding

js

```js
project: {
    titlePart1: "NM1",
    titlePart2: "SCRIPTS",
    description: "...",
    color: "#00a2ff",
    topbarLabel: "...",
    version: "v1.0.0"
}
```

| Property      | Type     | Description                                                                       |
| ------------- | -------- | --------------------------------------------------------------------------------- |
| `titlePart1`  | `string` | First part of the large center title (rendered in the accent color)               |
| `titlePart2`  | `string` | Second part of the large center title (rendered in white)                         |
| `description` | `string` | Subtitle text displayed below the title                                           |
| `color`       | `string` | Primary accent color (hex). Applied to highlights, particles, and active elements |
| `topbarLabel` | `string` | Text shown in the top-left status bar                                             |
| `version`     | `string` | Version tag shown in the top-right corner                                         |

***

### Social Links

js

```js
socials: [
    { icon: "fa-brands fa-discord", link: "https://discord.gg/..." },
]
```

Each entry in the `socials` array creates a clickable icon button. You can add or remove as many as you like.

| Property | Type     | Description                                               |
| -------- | -------- | --------------------------------------------------------- |
| `icon`   | `string` | Font Awesome 6 class string (e.g. `fa-brands fa-twitter`) |
| `link`   | `string` | URL that opens when the icon is clicked                   |

***

### Server Tips

js

```js
tips: [
    "Know the rules of your server - seriously.",
    "Press F1 to open the main menu.",
    "Respect the staff team at all times."
]
```

Tips are displayed one at a time in the bottom-left tip box and rotate every 5 seconds with a fade transition. Add as many strings as you want.

***

### Team Modal

js

```js
showTeamButton: true,

team: [
    { name: "Felix", role: "Owner", avatar: "https://yourlink.com/avatar.jpg" },
]
```

| Property         | Type      | Description                                           |
| ---------------- | --------- | ----------------------------------------------------- |
| `showTeamButton` | `boolean` | Set to `false` to hide the "OUR TEAM" button entirely |
| `team[].name`    | `string`  | Staff member's display name                           |
| `team[].role`    | `string`  | Staff member's role (displayed in uppercase)          |
| `team[].avatar`  | `string`  | URL to the member's avatar image                      |

> 💡 The team grid is inside a scrollable modal, so there is no member limit. Click the backdrop or the ✕ button to close it.

### How It Works (Technical)

#### Loading & Shutdown Flow

1. When the player connects, `client.lua` immediately creates a black scripted camera to prevent the default GTA bridge camera from showing.
2. The HTML loading screen (`index.html`) is displayed by FiveM via the `loadscreen` manifest entry.
3. `config.js` is loaded first in the `<head>` and immediately injects a `<link rel="preload">` for the background video using `Config.video.source`, so the video starts buffering before any other asset loads.
4. The client script polls until three conditions are all true: the network session has started, the player is active, and the player ped exists.
5. After a 2-second safety delay, it sends a `{ action: "shutdown" }` NUI message to the loading screen, triggering a fade-out animation on the HTML side.
6. After 800ms, `ShutdownLoadingScreen()` and `ShutdownLoadingScreenNui()` are called, the custom camera is destroyed, and the screen fades back in cleanly over 1 second.

#### Progress Bar

The loading bar is driven by FiveM's native `loadProgress` events sent to the NUI. The status text updates automatically through the following stages:

| Event                    | Status Text                    |
| ------------------------ | ------------------------------ |
| `startInitFunctionOrder` | Initializing Session...        |
| `initFunctionInvoking`   | Loading: `<resource name>`     |
| `startDataFileEntries`   | Loading Map Assets...          |
| `onLogLine`              | Shows the raw log line message |