Skip to content

Commit

Permalink
Allow for previewing ui outside fivem
Browse files Browse the repository at this point in the history
  • Loading branch information
OMikkel committed Nov 25, 2023
1 parent 6e93295 commit 9720549
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 4 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
## Features

- ### Typescript - <https://www.typescriptlang.org/>
- ### NextJS - <https://nextjs.org/>
- ### NextJS 13 - <https://nextjs.org/>
- ### Next-themes - <https://www.npmjs.com/package/next-themes>
- ### Tailwindcss - <https://tailwindcss.com/>
- ### FiveM Integration
Expand Down
1 change: 0 additions & 1 deletion fivem/config.lua
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,5 @@ cfg = {}

cfg.resourceName = GetCurrentResourceName()


cfg.cmd = "openNUI"
cfg.hotkey = "H"
4 changes: 3 additions & 1 deletion ui/src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ import Image from "next/image";
import { RootState } from "@/state/store";
import { useState } from "react";
import { nuiCallback } from "@/lib/nuiCallback";
import { useSearchParams } from "next/navigation";

export default function Home() {
const searchParams = useSearchParams();
const display = useSelector((state: RootState) => state.app.display);
const [playerCount, setPlayerCount] = useState<number>(0);

if (!display) return null;
if (!display && !searchParams.get("preview")) return null;

const getPlayerCount = async () => {
nuiCallback("/getPlayerCount", {}, (result: number) => {
Expand Down
16 changes: 16 additions & 0 deletions ui/src/middleware.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { NextRequest, NextResponse } from "next/server";

// This is only to allow for previewing the site outside FiveM - it's not needed for production

export function middleware(req: NextRequest) {
const userAgent = req.headers.get("user-agent");

if (req.nextUrl.searchParams.get("preview") === "true") return;
if (userAgent && !userAgent.includes("CitizenFX")) {
return NextResponse.redirect(`${req.url}?preview=true`);
}
}

export const config = {
matcher: "/",
};
2 changes: 1 addition & 1 deletion ui/src/state/reducers/app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export interface appState {
}

const initialState: appState = {
display: true,
display: false,
};

const appSlice = createSlice({
Expand Down

0 comments on commit 9720549

Please sign in to comment.