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

FEAT: Add EndStream functionality;

Browse Source 
PATCH: Fix category field input on `StreamDashboard`;
REFACTOR: Remove focused-input scaling on `StreamDashboard`;
This commit is contained in:
Chris-1010
2025-02-20 08:19:45 +00:00
parent 7484c927f1
commit ba762d5f6e
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/pages/StreamDashboardPage.tsx
View File

@@ -277,7 +277,7 @@ const StreamDashboardPage: React.FC = () => {
value={streamData.title} value={streamData.title}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="Enter your stream title" placeholder="Enter your stream title"
extraClasses="w-[70%] focus:w-[100%]" extraClasses="w-[70%] focus:w-[70%]"
maxLength={50} maxLength={50}
/> />
</div> </div>
@@ -285,6 +285,7 @@ const StreamDashboardPage: React.FC = () => {
<div className="relative"> <div className="relative">
<label className="block text-white mb-2">Category</label> <label className="block text-white mb-2">Category</label>
<Input <Input
name="category_name"
value={streamData.category_name} value={streamData.category_name}
onChange={handleInputChange} onChange={handleInputChange}
onFocus={() => setIsCategoryFocused(true)} onFocus={() => setIsCategoryFocused(true)}
@@ -292,7 +293,7 @@ const StreamDashboardPage: React.FC = () => {
setTimeout(() => setIsCategoryFocused(false), 200) setTimeout(() => setIsCategoryFocused(false), 200)
} }
placeholder="Select or type a category" placeholder="Select or type a category"
extraClasses="w-[70%] focus:w-[100%]" extraClasses="w-[70%] focus:w-[70%]"
maxLength={50} maxLength={50}
autoComplete="off" autoComplete="off"
type="search" type="search"
@@ -388,13 +389,25 @@ const StreamDashboardPage: React.FC = () => {
</div> </div>
<div className="flex flex-col w-fit mx-auto items-center justify-center pt-6 gap-6"> <div className="flex flex-col w-fit mx-auto items-center justify-center pt-6 gap-6">
<div className="flex gap-8">
<Button <Button
onClick={isStreaming ? handleUpdateStream : handleStartStream} onClick={
isStreaming ? handleUpdateStream : handleStartStream
}
disabled={!isFormValid()} disabled={!isFormValid()}
extraClasses="text-2xl px-8 py-4 disabled:opacity-50 disabled:cursor-not-allowed" extraClasses="text-2xl px-8 py-4 disabled:opacity-50 disabled:cursor-not-allowed"
> >
{isStreaming ? "Update Stream" : "Start Streaming"} {isStreaming ? "Update Stream" : "Start Streaming"}
</Button> </Button>
{isStreaming && (
<Button
onClick={handleEndStream}
extraClasses="text-2xl px-8 py-4 hover:text-red-500 hover:border-red-500"
>
End Stream
</Button>
)}
</div>
{!streamDetected && ( {!streamDetected && (
<p className="text-red-500 text-sm"> <p className="text-red-500 text-sm">
No stream input detected. Please start streaming using your No stream input detected. Please start streaming using your