+ setIsGdprModalOpen(false)}>
+ Terms and Conditions
+
+
+
+
+
+
+
+
+ {
+ setUsername(e.target.value)
+ }} placeholder={"Email"} name="userUserName"/>
+ {
+ setPassword(e.target.value)
+ }} placeholder="Password" name="userPassword"/>
+ Login
+ setIsGdprModalOpen(true)}>Register
+
+
+ OpenVidStreamer
+
+
+
+ )
+}
+
+export default LoginPageComp;
\ No newline at end of file
diff --git a/Frontend/openvidstreamer-fe/src/Pages/Login/TermsAndConditionsText.tsx b/Frontend/openvidstreamer-fe/src/Pages/Login/TermsAndConditionsText.tsx
index e69de29..2a36913 100644
--- a/Frontend/openvidstreamer-fe/src/Pages/Login/TermsAndConditionsText.tsx
+++ b/Frontend/openvidstreamer-fe/src/Pages/Login/TermsAndConditionsText.tsx
@@ -0,0 +1,72 @@
+
+const TermsAndConditionsText = () => {
+ return (
+ logoPlaceholder
+
+
+ );
+};
+
+export default TermsAndConditionsText;
diff --git a/Frontend/openvidstreamer-fe/src/Pages/Upload/UploadPage.tsx b/Frontend/openvidstreamer-fe/src/Pages/Upload/UploadPage.tsx
index e69de29..c15746d 100644
--- a/Frontend/openvidstreamer-fe/src/Pages/Upload/UploadPage.tsx
+++ b/Frontend/openvidstreamer-fe/src/Pages/Upload/UploadPage.tsx
@@ -0,0 +1,135 @@
+import React, {useState} from 'react';
+import axios from 'axios';
+import './VideoUploadForm.css';
+import {VideoCategory, VideoCategoryNames, VideoUploadDTO} from "../../Model/VideoUploadDTO.ts";
+import {Label} from "flowbite-react"; // Assuming your CSS is in this file
+
+const UploadPage = () => {
+ const [videoMetadata, setVideoMetadata] = useStateWelcome to OpenVidStreamer, a digital content sharing platform. By using our services, + you agree to the following terms and conditions. Please read them carefully.
+ +1. Data Collection and Use
+ +a. Data Collection
+When you use OpenVidStreamer, you agree that we are authorized to collect data generated + through your use of the platform. This includes, but is not limited to, personal + information, content preferences, interaction data, and metadata related to the content + you upload, view, and interact with.
+ +b. Data Ownership
+By agreeing to these terms, you acknowledge that OpenVidStreamer shall own all data + generated by the platform. This ownership extends to any data collected based on your + interaction with the platform.
+ +c. Use of Data for Recommendations
+We use the data collected to enhance your experience on the platform, including for the + purpose of making personalized content recommendations. Our algorithms analyze your + preferences, interactions, and other relevant data to provide you with tailored + suggestions.
+ +2. Resell and Sharing of Data
+ +a. Reselling Data
+OpenVidStreamer reserves the right to share, sell, or otherwise distribute the data + collected through the platform to third parties, in compliance with applicable laws and + regulations regarding data privacy and protection.
+ +b. Third-Party Access
+We may allow third parties to access the data for purposes including, but not limited to, + enhancing user experience, developing new features, and providing personalized + advertisements.
+ +3. User Consent
+ +By using OpenVidStreamer, you explicitly consent to the collection, ownership, use, and + sharing of your data as described in these terms and conditions. You also agree to + update your preferences and consent as necessary to reflect any changes in your + willingness to share personal information.
+ +4. Limitation of Liability
+ +You agree that OpenVidStreamer, its owners, employees, or any affiliated parties shall + not be liable for any direct, indirect, incidental, special, consequential, or exemplary + damages resulting from (i) your use or inability to use the platform; (ii) unauthorized + access to or alteration of your data; or (iii) any other matter relating to the + platform.
+ +5. Indemnification
+ +You agree to defend, indemnify, and hold harmless OpenVidStreamer and its affiliates from + any claims, damages, obligations, losses, liabilities, costs, debt, and expenses arising + from: (a) your use of and access to the platform; (b) your violation of any term of + these terms and conditions; (c) your violation of any third-party right, including + without limitation any copyright, privacy, or property right; or (d) any claim that your + content caused damage to a third party.
+ +6. Agreement
+ +Your use of OpenVidStreamer signifies your agreement to these terms and conditions. If + you do not agree with these terms, please do not use our services.
+ +
+
+
+ );
+};
+
+export default UploadPage;
diff --git a/Frontend/openvidstreamer-fe/src/Pages/Upload/VideoUploadForm.css b/Frontend/openvidstreamer-fe/src/Pages/Upload/VideoUploadForm.css
index e69de29..73d3a3d 100644
--- a/Frontend/openvidstreamer-fe/src/Pages/Upload/VideoUploadForm.css
+++ b/Frontend/openvidstreamer-fe/src/Pages/Upload/VideoUploadForm.css
@@ -0,0 +1,56 @@
+/* VideoUploadForm.css */
+.upload-form {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ max-width: 500px;
+ margin: auto;
+}
+
+.input-group, .file-input-group {
+ display: flex;
+ flex-direction: column;
+}
+
+.input-group input, .file-input-group input, .input-group select {
+ padding: 8px;
+ margin: 5px 0;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+}
+
+.submit-btn {
+ padding: 10px;
+ background-color: #007bff !important;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.25s ease;
+}
+
+label {
+ font-weight: bold;
+ color: white !important;
+}
+
+.submit-btn:hover {
+ background-color: #0056b3 !important;
+}
+
+.progress-bar {
+ width: 100%;
+ background-color: #e0e0e0;
+ border-radius: 4px;
+ overflow: hidden;
+ margin-top: 10px;
+}
+
+.progress-bar-fill {
+ height: 20px;
+ background-color: #007bff;
+ text-align: center;
+ color: white;
+ border-radius: 4px;
+ transition: width 0.25s ease-in-out;
+}
diff --git a/Frontend/openvidstreamer-fe/src/Pages/VideoRecomendations/HomePage.tsx b/Frontend/openvidstreamer-fe/src/Pages/VideoRecomendations/HomePage.tsx
new file mode 100644
index 0000000..9b00026
--- /dev/null
+++ b/Frontend/openvidstreamer-fe/src/Pages/VideoRecomendations/HomePage.tsx
@@ -0,0 +1,50 @@
+import {useEffect, useState} from 'react';
+import {VideoCategory} from "../../Model/VideoUploadDTO.ts";
+import VideoListCarosel from "./VideoRecomendations.tsx";
+import axios from "axios";
+import {ApiServerBaseUrl} from "../../../configProvider.ts";
+import {useStoreState} from "../../../persistenceProvider.ts";
+
+const HomePage = () => {
+
+ const [favoriteCategories, setFavoriteCategories] = useState
+
+
+ {favoriteCategories.length >0 ? favoriteCategories.map((category) => (
+
+ );
+};
+
+export default HomePage;
diff --git a/Frontend/openvidstreamer-fe/src/Pages/VideoRecomendations/VideoRecomendations.tsx b/Frontend/openvidstreamer-fe/src/Pages/VideoRecomendations/VideoRecomendations.tsx
new file mode 100644
index 0000000..25e9f45
--- /dev/null
+++ b/Frontend/openvidstreamer-fe/src/Pages/VideoRecomendations/VideoRecomendations.tsx
@@ -0,0 +1,156 @@
+import React, {useEffect, useState} from 'react';
+import {BiSolidDislike, BiSolidLike} from "react-icons/bi";
+import axios from "axios";
+import {ApiServerBaseUrl} from "../../../configProvider.ts";
+import {VideoCategory} from "../../Model/VideoUploadDTO.ts";
+import {Video} from "../../Model/Video.ts";
+import {useStoreState} from "../../../persistenceProvider.ts";
+import toast from "react-hot-toast";
+import * as http2 from "http2";
+
+// Mock fetch function to simulate fetching data from the backend
+
+
+// Styles
+const styles = {
+ videoList: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: '20px',
+ justifyContent: 'center',
+ padding: '20px',
+ },
+ videoItem: {
+ color: '#333',
+ width: '300px',
+ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+ borderRadius: '10px',
+ overflow: 'hidden',
+ backgroundColor: '#fff',
+ margin: '10px',
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ videoThumbnail: {
+ width: '100%',
+ height: '180px',
+ objectFit: 'cover',
+ },
+ videoContent: {
+ padding: '15px',
+ },
+ videoTitle: {
+ fontSize: '18px',
+ fontWeight: 'bold',
+ marginBottom: '10px',
+ },
+ videoDescription: {
+ fontSize: '14px',
+ marginBottom: '10px',
+ },
+ videoStats: {
+ display: 'flex',
+ alignItems: 'flex-end',
+ flexDirection: 'column',
+ fontSize: '14px',
+ marginBottom: '5px',
+ },
+ videoUploadDate: {
+ fontSize: '12px',
+ color: '#666',
+ },
+};
+
+const truncateDescription = (description: string) => {
+ return description.length > 300 ? description.substring(0, 300) + '...' : description;
+};
+
+// VideoItem component for rendering individual video details
+const VideoItem = ({video}) => (
+ loading
+ } +
+ 
+
+);
+
+// VideoList component for rendering the list of videos
+const VideoListCarosel = ({categoryName, isHotVideos}) => {
+
+ const [videos, setVideos] = useState
+
+ {video.title}
+{truncateDescription(video.description)}
+
+
+ Uploaded: {new Date(video.uploadDateTime).toLocaleDateString()}
+
+
+
+
+
+
+
+ {video.totalLikes}/{video.totalDislikes}
+
+
+ {isHotVideos?
+ );
+};
+
+export default VideoListCarosel;
diff --git a/Frontend/openvidstreamer-fe/src/assets/react.svg b/Frontend/openvidstreamer-fe/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/Frontend/openvidstreamer-fe/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Frontend/openvidstreamer-fe/src/index.css b/Frontend/openvidstreamer-fe/src/index.css
new file mode 100644
index 0000000..c2d2261
--- /dev/null
+++ b/Frontend/openvidstreamer-fe/src/index.css
@@ -0,0 +1,70 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ //display: flex;
+ place-items: center;
+ overflow: hidden;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/Frontend/openvidstreamer-fe/src/main.tsx b/Frontend/openvidstreamer-fe/src/main.tsx
new file mode 100644
index 0000000..399e570
--- /dev/null
+++ b/Frontend/openvidstreamer-fe/src/main.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+import {loadConfig} from "../configProvider.ts";
+
+
+(async () => {
+ await loadConfig()
+
+
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+ HotVideos
:{categoryName == VideoCategory.Other ? 'Recommended': categoryName}
} +
+ {videos.map(video => (
+
+ ))}
+
+