feat(frontend): add profile page to view stream key

docker-compose.yml

@@ -20,8 +20,6 @@ services:
       - postgres
     env_file:
       - .env
-    environment:
-      SPRING_PROFILES_ACTIVE: dev
     volumes:
       - ${MEDIA_DATA}:/app/data/media
     ports:

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import Home from './pages/Home';
 import {useEffect} from "react";
 import MyClips from './pages/MyClips';
 import VideoPlayer from "./pages/VideoPlayer.tsx";
+import Profile from "./pages/Profile.tsx";
 import { GoogleOAuthProvider } from '@react-oauth/google';
 
 
@@ -25,6 +26,7 @@ function App() {
                         <Route path="/create/:id" element={<ClipEdit />} />
                         <Route path="/my-clips" element={<MyClips />} />
                         <Route path="/video/:id" element={<VideoPlayer />} />
+                        <Route path="/profile" element={<Profile />} />
                     </Route>
                 </Routes>
             </Router>

frontend/src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
-import { Plus, Film, Home } from 'lucide-react';
+import { Plus, Film, Home, User as UserIcon } from 'lucide-react';
 import Box from "./Box.tsx";
 import type {User} from "../utils/types.ts";
 
@@ -30,11 +30,18 @@ const Sidebar = ({user, className}: props) => {
             />
 
             { user && (
-                <SidebarButton
-                    url={"/my-clips"}
-                    logo={<Film size={20}/>}
-                    label={"My Clips"}
-                />
+                <>
+                    <SidebarButton
+                        url={"/my-clips"}
+                        logo={<Film size={20}/>}
+                        label={"My Clips"}
+                    />
+                    <SidebarButton
+                        url={"/profile"}
+                        logo={<UserIcon size={20}/>}
+                        label={"Profile"}
+                    />
+                </>
                 )}
         </Box>
     );

frontend/src/components/Topbar.tsx

@@ -70,6 +70,8 @@ const Topbar = ({
                     />
 
                     <Dropdown label={user.name}>
+                        <DropdownItem item="Profile"
+                                      onClick={() => navigate("/profile")} />
                         <DropdownItem item="Logout"
                                       onClick={() => handleLogout()}
                                       className={"text-red-500 font-medium"} />

frontend/src/utils/types.ts

@@ -17,8 +17,11 @@ type APIResponse = {
 
 type User = {
     name: string,
+    username: string,
     email: string,
-    profilePictureUrl: string
+    profilePictureUrl: string,
+    streamKey: string,
+    createdAt: string,
 }
 
 type Clip = {

src/main/Dockerfile

@@ -15,6 +15,12 @@ RUN apt-get update && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*
 
+ENV POSTGRES_DATA=/app/db
+ENV MEDIA_DATA=/app/data/media
+ENV STREAM_DATA=/app/data/media/streams
+
+VOLUME ["app/db", "app/data/media/streams", "/app/data/media"]
+
 WORKDIR /app
 COPY --from=builder /app/target/*.jar app.jar
 EXPOSE 8080

src/main/resources/application-dev.properties

@@ -1,10 +0,0 @@
-spring.docker.compose.enabled=false
-
-spring.datasource.url=jdbc:postgresql://postgres:5432/vodSystem
-spring.datasource.username=${POSTGRES_USER}
-spring.datasource.password=${POSTGRES_PASSWORD}
-spring.datasource.driver-class-name=org.postgresql.Driver
-spring.jpa.hibernate.ddl-auto=update
-spring.jpa.show-sql=true
-spring.sql.init.mode=always
-spring.sql.init.schema-locations=classpath:db/schema.sql

src/main/resources/application-local.properties

@@ -1,15 +1 @@
-# Database
-spring.datasource.url=jdbc:postgresql://localhost:5432/vodSystem
-spring.datasource.username=${POSTGRES_USER}
-spring.datasource.password=${POSTGRES_PASSWORD}
-spring.datasource.driver-class-name=org.postgresql.Driver
-spring.jpa.hibernate.ddl-auto=update
-spring.jpa.show-sql=true
-spring.sql.init.mode=always
-spring.sql.init.schema-locations=classpath:db/schema.sql
-
-# Frontend
-frontend.url=http://localhost:5173
-
-# Docker
-spring.docker.compose.file=docker-compose.dev.yml
+spring.docker.compose.file=docker-compose.dev.yml

src/main/resources/application.properties

@@ -1,5 +1,4 @@
 spring.application.name=vodSystem
-spring.profiles.default=local
 
 # VODs
 spring.servlet.multipart.max-file-size=2GB
@@ -8,6 +7,16 @@ storage.temp.inputs=videos/inputs/
 storage.temp.outputs=videos/outputs/
 storage.outputs=${MEDIA_DATA}
 
+# Database
+spring.datasource.url=${POSTGRES_URL}
+spring.datasource.username=${POSTGRES_USER}
+spring.datasource.password=${POSTGRES_PASSWORD}
+spring.datasource.driver-class-name=org.postgresql.Driver
+spring.jpa.hibernate.ddl-auto=update
+spring.jpa.show-sql=true
+spring.sql.init.mode=always
+spring.sql.init.schema-locations=classpath:db/schema.sql
+
 ## Security
 spring.security.oauth2.client.registration.google.client-id=${GOOGLE_CLIENT_ID}
 spring.security.oauth2.client.registration.google.client-secret=${GOOGLE_CLIENT_SECRET}
@@ -16,5 +25,8 @@ spring.security.oauth2.client.registration.google.scope=profile,email
 jwt.secret.key=${JWT_SECRET_KEY}
 jwt.expiration=3600000
 
+# Frontend
+frontend.url=${FRONTEND_URL}
+
 ## Server Configuration
 server.servlet.session.timeout=30m