feat: Update branding and color scheme, replace Plex references with …

…NEVU

.github/workflows/docker-latest.yml

@@ -1,6 +1,7 @@
 name: Publish Docker image
 
 on:
+  workflow_dispatch:
   release:
     types: [published]
 
@@ -37,13 +38,13 @@ jobs:
           password: ${{ secrets.DOCKER_PASSWORD }}
 
       - name: Create builder instance
-        run: docker buildx create --name perplexedBuilder --use
+        run: docker buildx create --name nevuBuilder --use
 
       - name: Build and push the amd64 image
-        run: docker buildx build --platform linux/amd64 -t ipmake/perplexed:latest . --push
+        run: docker buildx build --platform linux/amd64 -t ipmake/nevu:preview-amd64 . --push
 
       - name: Build and push the arm64 image
-        run: docker buildx build --platform linux/arm64 -t ipmake/perplexed:latest . --push
+        run: docker buildx build --platform linux/arm64 -t ipmake/nevu:preview-arm64 . --push
 
       - name: Build and push multi-platform Docker image
-        run: docker buildx imagetools create --tag ipmake/perplexed:latest ipmake/perplexed:latest ipmake/perplexed:latest
+        run: docker buildx imagetools create --tag ipmake/nevu:preview ipmake/nevu:preview-amd64 ipmake/nevu:preview-arm64

.github/workflows/docker-preview.yml

@@ -38,13 +38,13 @@ jobs:
           password: ${{ secrets.DOCKER_PASSWORD }}
 
       - name: Create builder instance
-        run: docker buildx create --name perplexedBuilder --use
+        run: docker buildx create --name nevuBuilder --use
 
       - name: Build and push the amd64 image
-        run: docker buildx build --platform linux/amd64 -t ipmake/perplexed:preview-amd64 . --push
+        run: docker buildx build --platform linux/amd64 -t ipmake/nevu:preview-amd64 . --push
 
       - name: Build and push the arm64 image
-        run: docker buildx build --platform linux/arm64 -t ipmake/perplexed:preview-arm64 . --push
+        run: docker buildx build --platform linux/arm64 -t ipmake/nevu:preview-arm64 . --push
 
       - name: Build and push multi-platform Docker image
-        run: docker buildx imagetools create --tag ipmake/perplexed:preview ipmake/perplexed:preview-amd64 ipmake/perplexed:preview-arm64
+        run: docker buildx imagetools create --tag ipmake/nevu:preview ipmake/nevu:preview-amd64 ipmake/nevu:preview-arm64

README.md

@@ -1,16 +1,16 @@
-# PerPlexed
+# NEVU for Plex
 Fixing Plex's old and simple UI.
 
-[**Docker Hub**](https://hub.docker.com/r/ipmake/perplexed)
+[**Docker Hub**](https://hub.docker.com/r/ipmake/nevu)
 
 *Click image for video*
-[![PerPlexed](assets/screenshot1.png)](https://www.youtube.com/watch?v=PuTOw3Wg9oY)
-![PerPlexed2](assets/screenshot2.png)
+[![Nevu1](assets/screenshot1.png)](https://www.youtube.com/watch?v=PuTOw3Wg9oY)
+![Nevu2](assets/screenshot2.png)
 ## Description
 
-PerPlexed is a complete redesign of Plex's UI using the Plex media server's API. It comes with its own web server. As the keen eye may notice, the UI is heavily inspired by Netflix's UI. It is currently only developed for desktops and laptops. It is not optimized for mobile or TV use.
+Nevu is a complete redesign of Plex's UI using the Plex media server's API. It comes with its own web server. As the keen eye may notice, the UI is heavily inspired by Netflix's UI. It is currently only developed for desktops and laptops. It is not optimized for mobile or TV use.
 
-PerPlexed currently supports Movie and TV Show libraries. You can also play media via the interface.
+Nevu currently supports Movie and TV Show libraries. You can also play media via the interface.
 
 It is currently not possible to edit media metadata or switch between different Plex servers. The "+" and Star buttons on the info pages for shows and movies are placeholders and are currently not functional.
 
@@ -24,7 +24,7 @@ Mind that this project is still in development and may be unstable.
 - Play media
 - Browse libraries
 - Search for media
-- Watch Together (PerPlexed Sync)
+- Watch Together (Nevu Sync)
 - Get Recommendations
 - Simple and easy to use
 - Pro-User features (like special shortcuts etc.)
@@ -33,10 +33,10 @@ Mind that this project is still in development and may be unstable.
 
 ### Docker
 
-The easiest way to run PerPlexed is to use Docker. You can use the following command to run PerPlexed in a Docker container:
+The easiest way to run Nevu is to use Docker. You can use the following command to run Nevu in a Docker container:
 
 ```bash
-docker run --name perplexed -p 3000:3000 -e PLEX_SERVER=http://your-plex-server:32400 ipmake/perplexed
+docker run --name nevu -p 3000:3000 -e PLEX_SERVER=http://your-plex-server:32400 ipmake/nevu
 ```
 
 #### Environment Variables
@@ -46,7 +46,7 @@ docker run --name perplexed -p 3000:3000 -e PLEX_SERVER=http://your-plex-server:
 | PROXY_PLEX_SERVER      | string     | No       | The URL of the Plex server to proxy requests to                             |
 | DISABLE_PROXY          | true/false | No       | If set to true, the proxy will be disabled and all requests go directly to the Plex server from the frontend (NOT RECOMMENDED) |
 | DISABLE_TLS_VERIFY     | true/false | No       | If set to true, the proxy will not check any https ssl certificates         |
-| DISABLE_PERPLEXED_SYNC | true/false | No       | If set to true, perplexed sync (watch together) will be disabled            |
+| DISABLE_nevu_SYNC | true/false | No       | If set to true, Nevu sync (watch together) will be disabled            |
 | DISABLE_REQUEST_LOGGING| true/false | No       | If set to true, the server will not log any requests                        |
 
 
@@ -56,7 +56,7 @@ Pull requests are welcome for any feature or a bug fix. For major changes, pleas
 
 ## Development
 
-To develop you need 2 terminals for the front and the backend of PerPlexed
+To develop you need 2 terminals for the front and the backend of Nevu
 
 ```bash
 # Terminal 1

backend/src/index.ts

@@ -15,7 +15,7 @@ import { CheckPlexUser } from './common/plex';
     * PROXY_PLEX_SERVER?: The URL of the Plex server to proxy requests to
     * DISABLE_PROXY?: If set to true, the proxy will be disabled and all requests go directly to the Plex server from the frontend (NOT RECOMMENDED)
     * DISABLE_TLS_VERIFY?: If set to true, the proxy will not check any https ssl certificates
-    * DISABLE_PERPLEXED_SYNC?: If set to true, perplexed sync (watch together) will be disabled
+    * DISABLE_NEVU_SYNC?: If set to true, NEVU sync (watch together) will be disabled
     * DISABLE_REQUEST_LOGGING?: If set to true, the server will not log any requests
 **/
 const deploymentID = randomBytes(8).toString('hex');
@@ -138,7 +138,7 @@ app.get('/config', (req, res) => {
         DEPLOYMENTID: deploymentID,
         CONFIG: {
             DISABLE_PROXY: process.env.DISABLE_PROXY === 'true',
-            DISABLE_PERPLEXED_SYNC: process.env.DISABLE_PERPLEXED_SYNC === 'true',
+            DISABLE_NEVU_SYNC: process.env.DISABLE_NEVU_SYNC === 'true',
         }
     });
 });
@@ -257,7 +257,7 @@ const server = app.listen(3000, () => {
     console.log('Server started on http://localhost:3000');
 });
 
-let io = (process.env.DISABLE_PERPLEXED_SYNC === 'true') ? null : new SocketIOServer(server, {
+let io = (process.env.DISABLE_NEVU_SYNC === 'true') ? null : new SocketIOServer(server, {
     cors: {
         origin: '*',
     },

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "perplexed",
+  "name": "nevu",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

frontend/public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/plexIcon.png" />
+    <link rel="icon" href="%PUBLIC_URL%/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Fixing Plex's old and simple UI." />
     <!--
@@ -14,7 +14,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>PerPlexed</title>
+    <title>NEVU</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

frontend/src/App.tsx

@@ -16,6 +16,7 @@ import PerPlexedSync from "./components/PerPlexedSync";
 import WaitingRoom from "./pages/WaitingRoom";
 import ToastManager from "./components/ToastManager";
 import LibraryScreen from "./components/LibraryScreen";
+import { useSessionStore } from "./states/SessionState";
 
 function AppManager() {
   const { loading } = useStartupState();
@@ -25,8 +26,10 @@ function AppManager() {
   useEffect(() => {
     if (loading) return;
 
-    setFadeOut(true);
-    setTimeout(() => setShowApp(true), 500);
+    setTimeout(() => {
+      setFadeOut(true);
+      setTimeout(() => setShowApp(true), 500);
+    }, 1000);
   }, [loading]);
 
   if (!showApp) {
@@ -40,6 +43,24 @@ function AppManager() {
   return <App />;
 }
 
+function AppTitleManager() {
+  const { PlexServer } = useSessionStore();
+
+  useEffect(() => {
+    console.log(PlexServer);
+    if (!PlexServer?.friendlyName) return;
+
+    const capitalizedFriendlyName = PlexServer.friendlyName.charAt(0).toUpperCase() + PlexServer.friendlyName.slice(1);
+    document.title = `${capitalizedFriendlyName} - Nevu`;
+  }, [PlexServer]);
+
+  useEffect(() => {
+    document.title = "Nevu";
+  }, []);
+
+  return <></>
+}
+
 function App() {
   const location = useLocation();
   const navigate = useNavigate();
@@ -54,6 +75,7 @@ function App() {
 
   useEffect(() => {
     useWatchListCache.getState().loadWatchListCache();
+    useSessionStore.getState().fetchPlexServer();
 
     const interval = setInterval(() => {
       useWatchListCache.getState().loadWatchListCache();
@@ -68,6 +90,7 @@ function App() {
       <PerPlexedSync />
       <ToastManager />
       <LibraryScreen />
+      <AppTitleManager />
       <Routes>
         <Route path="*" element={<AppBar />} />
         <Route path="/watch/:itemID" element={<></>} />

frontend/src/components/AppBar.tsx

@@ -141,7 +141,7 @@ function Appbar() {
           <ListItemText>Sponsor</ListItemText>
         </MenuItem>
 
-        {!config.DISABLE_PERPLEXED_SYNC && (
+        {!config.DISABLE_NEVU_SYNC && (
           <MenuItem
             onClick={() => {
               useSyncInterfaceState.getState().setOpen(true);
@@ -227,9 +227,9 @@ S - Skip onscreen markers (intro, credits, etc)
         }}
       >
         <img
-          src="/plex.png"
+          src="/logo.png"
           alt=""
-          height="80"
+          height="100"
           style={{
             aspectRatio: 1,
             objectFit: "contain",

frontend/src/components/HeroDisplay.tsx

@@ -181,22 +181,21 @@ function HeroDisplay({ item }: { item: Plex.Metadata }) {
               mb: 0,
             }}
           >
-            <img
+            {/* <img
               src="/plexIcon.png"
               alt=""
               height="35"
               style={{
                 aspectRatio: 1,
                 borderRadius: 8,
               }}
-            />
+            /> */}
             <Typography
               sx={{
                 fontSize: "24px",
                 fontWeight: "900",
                 letterSpacing: "0.1em",
-                ml: 1,
-                color: "#e6a104",
+                color: theme => theme.palette.primary.main,
                 textTransform: "uppercase",
               }}
             >
@@ -249,8 +248,8 @@ function HeroDisplay({ item }: { item: Plex.Metadata }) {
             <Button
               variant="contained"
               sx={{
-                backgroundColor: "#CCCCCC",
-                color: "#000000",
+                backgroundColor: "#F4F8FF",
+                color: "#1A1A1A",
                 fontWeight: "bold",
                 letterSpacing: "0.1em",
                 textTransform: "uppercase",
@@ -271,8 +270,8 @@ function HeroDisplay({ item }: { item: Plex.Metadata }) {
             <Button
               variant="contained"
               sx={{
-                backgroundColor: "#555555",
-                color: "#FFFFFF",
+                backgroundColor: "#5A5A5A",
+                color: "#F4F8FF",
                 fontWeight: "bold",
                 letterSpacing: "0.1em",
                 textTransform: "uppercase",

frontend/src/components/MetaScreen.tsx

@@ -416,25 +416,24 @@ function MetaScreen() {
                   flexDirection: "row",
                   alignItems: "center",
                   justifyContent: "flex-start",
-                  mb: 0,
+                  mb: "-10px",
                 }}
               >
-                <img
+                {/* <img
                   src="/plexIcon.png"
                   alt=""
                   height="40"
                   style={{
                     aspectRatio: 1,
                     borderRadius: 8,
                   }}
-                />
+                /> */}
                 <Typography
                   sx={{
                     fontSize: "30px",
                     fontWeight: "900",
                     letterSpacing: "0.1em",
-                    ml: 1,
-                    color: "#e6a104",
+                    color: theme => theme.palette.primary.main,
                     textTransform: "uppercase",
                   }}
                 >

frontend/src/components/MovieItem.tsx

@@ -271,7 +271,7 @@ function MovieItem({
           minWidth: itemsPerPage
             ? `calc((100vw / ${itemsPerPage}) - 10px - (5vw / ${itemsPerPage}))`
             : "100%",
-          backgroundColor: "#1C1C1C",
+          backgroundColor: "#1A1A1A",
 
           borderRadius: "7px",
           overflow: "hidden",
@@ -435,7 +435,7 @@ function MovieItem({
               fontSize: "14px",
               fontWeight: "700",
               letterSpacing: "0.15em",
-              color: "#e6a104",
+              color: theme => theme.palette.primary.main,
               textTransform: "uppercase",
               mt: "2px",
             }}
@@ -616,8 +616,8 @@ function MovieItem({
               sx={{
                 width: "100%",
                 height: "100%",
-                backgroundColor: "#CCCCCC",
-                color: "#000000",
+                backgroundColor: "#F4F8FF",
+                color: "#1A1A1A",
                 letterSpacing: "0.1em",
                 textTransform: "uppercase",
                 "&:hover": {
@@ -693,8 +693,8 @@ export function WatchListButton({ item }: { item: Plex.Metadata }) {
       sx={{
         width: "fit-content",
         height: "100%",
-        backgroundColor: "#555555",
-        color: "#FFFFFF",
+        backgroundColor: "#5A5A5A",
+        color: "#F4F8FF",
         fontSize: "12px",
         letterSpacing: "0.1em",
         textTransform: "uppercase",

frontend/src/components/PerPlexedSync.tsx

@@ -74,7 +74,7 @@ function PerPlexedSync() {
             fontWeight: "bold",
           }}
         >
-          PerPlexed Sync
+          Nevu Sync
         </Typography>
 
         <Divider