diff --git a/frontend/public/images/sample_game_video.mp4 b/frontend/public/images/sample_game_video.mp4 deleted file mode 100644 index 5869a6d..0000000 Binary files a/frontend/public/images/sample_game_video.mp4 and /dev/null differ diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx index 36cf9b2..cc6d9c7 100644 --- a/frontend/src/components/Input/Input.tsx +++ b/frontend/src/components/Input/Input.tsx @@ -27,7 +27,7 @@ const Input: React.FC = ({ onChange={onChange} onKeyDown={onKeyDown} {...props} - className={`${extraClasses} relative p-2 rounded-[1rem] w-[20vw] focus:w-[21vw] bg-black/40 border border-gray-300 focus:border-purple-500 focus:outline-purple-500 text-center text-white text-xl transition-all`} + className={`${extraClasses} relative p-2 rounded-[1rem] w-[20vw] focus:w-[22vw] bg-black/40 border border-gray-300 focus:border-purple-500 focus:outline-purple-500 text-center text-white text-xl transition-all`} /> diff --git a/frontend/src/components/Input/SearchBar.tsx b/frontend/src/components/Input/SearchBar.tsx index e88df5f..31f268e 100644 --- a/frontend/src/components/Input/SearchBar.tsx +++ b/frontend/src/components/Input/SearchBar.tsx @@ -8,18 +8,6 @@ const SearchBar: React.FC = () => { //const [debouncedQuery, setDebouncedQuery] = useState(searchQuery); const navigate = useNavigate(); - // Debounce the search query - { - /* - useEffect(() => { - const timer = setTimeout(() => { - setDebouncedQuery(searchQuery); - }, 500); // Wait 500ms after user stops typing - - return () => clearTimeout(timer); - }, [searchQuery]); */ - } - const handleSearch = async () => { if (!searchQuery.trim()) return; diff --git a/frontend/src/pages/VideoPage.tsx b/frontend/src/pages/VideoPage.tsx index 0172c8d..ba20c86 100644 --- a/frontend/src/pages/VideoPage.tsx +++ b/frontend/src/pages/VideoPage.tsx @@ -37,6 +37,7 @@ const VideoPage: React.FC = ({ streamerId }) => { const showReturn = window.location.search.includes("session_id"); const navigate = useNavigate(); const [isSubscribed, setIsSubscribed] = useState(false); + const [timeStarted, setTimeStarted] = useState(""); useEffect(() => { // Prevent scrolling when checkout is open @@ -60,7 +61,6 @@ const VideoPage: React.FC = ({ streamerId }) => { res .json() .then((data) => { - // Transform snake_case to camelCase const transformedData: StreamDataProps = { streamerName: data.username, streamTitle: data.title, @@ -69,6 +69,20 @@ const VideoPage: React.FC = ({ streamerId }) => { }; setStreamData(transformedData); + const time = Math.floor( + (Date.now() - new Date(data.start_time).getTime()) / 60000 // Convert to minutes + ); + + if (time < 60) setTimeStarted(`${time}m ago`); + else if (time < 1440) + setTimeStarted(`${Math.floor(time / 60)}h ${time % 60}m ago`); + else + setTimeStarted( + `${Math.floor(time / 1440)}d ${Math.floor((time % 1440) / 60)}h ${ + time % 60 + }m ago` + ); + // Check if the logged-in user is following this streamer if (isLoggedIn) checkFollowStatus(data.username); }) @@ -100,14 +114,14 @@ const VideoPage: React.FC = ({ streamerId }) => { // Checks if user is subscribed useEffect(() => { fetch(`/api/user/subscription/${streamerName}/expiration`) - .then(response => response.json()) - .then(data => { - console.log(data.remaining_time); + .then((response) => response.json()) + .then((data) => { + console.log(streamData?.streamerName, data.remaining_time); if (data.remaining_time > 0) { setIsSubscribed(true); } }) - .catch(error => console.error("Error fetching subscription:", error)); + .catch((error) => console.error("Error fetching subscription:", error)); }, [streamerName]); return ( @@ -214,12 +228,7 @@ const VideoPage: React.FC = ({ streamerId }) => {
Started - {streamData - ? `${Math.floor( - (Date.now() - new Date(streamData.startTime).getTime()) / - 3600000 - )} hours ago` - : "Loading..."} + {streamData ? timeStarted : "Loading..."}