dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

REFACTOR: Update style of editing profile picture;

Browse Source 
FIX: Correctly position stream error UI
This commit is contained in:
Chris-1010
2025-03-02 16:04:17 +00:00
parent a1e8c92240
commit f434045523
2 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/Stream/VideoPlayer.tsx
View File

@@ -68,11 +68,13 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamer, extraClasses = "",
// Custom error UI
const errorElement = document.createElement("div");
errorElement.className = "absolute top-0 left-0 right-0 flex flex-col items-center justify-center h-full bg-gray-800 text-white p-4 rounded";
errorElement.className =
"absolute top-0 left-0 right-0 flex flex-col items-center justify-center h-full w-full bg-gray-800 text-white text-center p-4 rounded";
errorElement.innerHTML = `
<div class="text-xl mb-2">Stream Currently Unavailable</div>
<div class="mb-4">The streamer may be offline</div>
`;
<div class="text-xl mb-2">Stream Currently Unavailable</div>
${window.location.href.includes("dashboard") ? "" : "<div class='mb - 4'>The streamer may be offline</div>"}
<h2>Retrying...</h2>
`;
videoRef.current.appendChild(errorElement);
}
@@ -113,7 +115,10 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamer, extraClasses = "",
}, [streamerName]);
return (
<div id="video-player" className={`${extraClasses} w-full h-full mx-auto flex justify-center items-center bg-gray-900 rounded-lg`}>
<div
id="video-player"
className={`relative ${extraClasses} w-full h-full mx-auto flex justify-center items-center bg-gray-900 rounded-lg`}
>
<div ref={videoRef} className="w-full max-w-[160vh] self-center" />
</div>
);

25
frontend/src/pages/UserPage.tsx
View File

@@ -9,7 +9,7 @@ import Button from "../components/Input/Button";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
import LoadingScreen from "../components/Layout/LoadingScreen";
import { StreamListItem } from "../components/Layout/ListItem";
import { CameraIcon } from "lucide-react";
import { EditIcon } from "lucide-react";
import { getCategoryThumbnail } from "../utils/thumbnailUtils";
import { useSameUser } from "../hooks/useSameUser";
@@ -142,14 +142,16 @@ const UserPage: React.FC = () => {
</div>
{/* Profile Picture */}
<div
className="relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
rounded-full flex-shrink-0 border-4 border-[var(--user-pfp-border)] inset-0 z-20"
className={`relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
rounded-full flex-shrink-0 border-4 ${
profileData.isLive ? "border-[#ff0000]" : "border-[var(--user-pfp-border)]"
} inset-0 z-20`}
style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
>
<label className={`relative ${isUser ? "cursor-pointer group" : ""} overflow-visible`}>
<label className={`w-full h-full ${isUser ? "group cursor-pointer" : ""} overflow-visible rounded-full`}>
{/* If user is live then displays a live div */}
{Boolean(profileData.isLive) && (
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-red-600 text-white text-sm font-bold py-1 sm:px-5 px-4 z-30 flex items-center justify-center rounded-tr-xl rounded-bl-xl rounded-tl-xl rounded-br-xl">
{profileData.isLive && (
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-[#ff0000] text-white text-sm font-bold py-1 sm:px-5 px-4 z-30 flex items-center justify-center rounded-tr-xl rounded-bl-xl rounded-tl-xl rounded-br-xl">
LIVE
</div>
)}
@@ -160,18 +162,15 @@ const UserPage: React.FC = () => {
e.currentTarget.onerror = null;
}}
alt={`${profileData.username}'s profile`}
className="sm:w-full h-full object-cover rounded-full relative z-0"
className="sm:w-full h-full object-cover rounded-full group-hover:brightness-50 relative z-0 transition-all"
/>
{/* If current user is the profile user then allow profile picture swap */}
{isUser && (
<>
<div className="absolute top-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div>
<div className="absolute top-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<CameraIcon size={32} className="text-white bg-black/50 p-1 rounded-full" />
</div>
<div className="absolute top-0 bottom-0 left-0 right-0 m-auto flex items-center justify-center opacity-0 z-50 group-hover:opacity-100 transition-opacity duration-200">
<EditIcon size={75} className="text-white bg-black/50 p-1 rounded-3xl" />
<input type="file" className="hidden" onChange={saveUploadedImage} accept="image/*" />
</>
</div>
)}
</label>
</div>