Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-23 03:22:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix TIDBSubmissionForm.tsx

Browse source
This commit is contained in:
Pas 2026-02-07 11:29:52 -07:00
parent 32b0588530
commit 59dd96e85d
1 changed files with 242 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/components/player/TIDBSubmissionForm.tsx
View file

@ -1,4 +1,6 @@
import classNames from "classnames";
import { useEffect, useRef, useState } from "react";
import { Helmet } from "react-helmet-async";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/buttons/Button";
@ -11,6 +13,9 @@ import { usePlayerStore } from "@/stores/player/store";
import { usePreferencesStore } from "@/stores/preferences";
import { submitIntro } from "@/utils/tidb";
import { IconPatch } from "../buttons/IconPatch";
import { Flare } from "../utils/Flare";
type SegmentType = "intro" | "recap" | "credits" | "preview";
// Helper function to parse time format (hh:mm:ss, mm:ss, or seconds)
@ -200,8 +205,37 @@ export function TIDBSubmissionForm({
return (
<Modal id={submissionModal.id}>
<div className="w-full max-w-[32rem] md:max-w-[50rem] lg:max-w-[60rem] m-4 px-4 max-h-[90vh] overflow-y-auto pointer-events-none">
<div className="w-full bg-modal-background rounded-xl p-6 md:p-8 pointer-events-auto">
<Helmet>
<html data-no-scroll />
</Helmet>
<div className="flex absolute inset-0 items-center justify-center pt-safe">
<Flare.Base
className={classNames(
"group -m-[0.705em] rounded-3xl bg-background-main",
"max-w-[1200px] max-h-[650px]",
"bg-mediaCard-hoverBackground/60 backdrop-filter backdrop-blur-lg shadow-lg overflow-hidden",
"h-[97%] w-[95%]",
"relative",
)}
>
<div className="transition-transform duration-300 h-full relative">
<Flare.Light
flareSize={300}
cssColorVar="--colors-mediaCard-hoverAccent"
backgroundClass="bg-modal-background duration-100"
className="rounded-3xl bg-background-main group-hover:opacity-100 transition-opacity duration-300"
/>
<div className="absolute right-4 top-4 z-50 pointer-events-auto">
<button
type="button"
className="text-s font-semibold text-type-secondary hover:text-white transition-transform hover:scale-95 select-none"
onClick={handleClose}
>
<IconPatch icon={Icons.X} />
</button>
</div>
<Flare.Child className="pointer-events-auto relative h-full overflow-y-auto scrollbar-none select-text p-6 pt-20 sm:pt-6">
<div className="select-text">
<div className="flex items-center gap-2 mb-1">
<Icon icon={Icons.CLOCK} className="h-5 w-5 text-white" />
<Heading3 className="!mt-0 !mb-0">
@ -231,15 +265,23 @@ export function TIDBSubmissionForm({
? "!border-2 !border-buttons-purple !bg-buttons-purple/20 focus:outline-none focus-visible:outline-none"
: "!border-2 !border-background-secondary hover:!bg-authentication-inputBg focus:outline-none focus-visible:outline-none"
}
onClick={() => setFormData({ ...formData, segment: seg })}
onClick={() =>
setFormData({ ...formData, segment: seg })
}
>
{seg === "intro"
? t("player.skipTime.feedback.modal.types.intro")
: seg === "recap"
? t("player.skipTime.feedback.modal.types.recap")
? t(
"player.skipTime.feedback.modal.types.recap",
)
: seg === "credits"
? t("player.skipTime.feedback.modal.types.credits")
: t("player.skipTime.feedback.modal.types.preview")}
? t(
"player.skipTime.feedback.modal.types.credits",
)
: t(
"player.skipTime.feedback.modal.types.preview",
)}
</Button>
),
)}
@ -249,7 +291,11 @@ export function TIDBSubmissionForm({
{t("player.skipTime.feedback.modal.whenToDesc")}
</p>
<form ref={formRef} onSubmit={handleSubmit} className="space-y-4">
<form
ref={formRef}
onSubmit={handleSubmit}
className="space-y-4"
>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label
@ -310,7 +356,9 @@ export function TIDBSubmissionForm({
<div className="grid grid-cols-2 gap-3 text-xs text-gray-400">
<div>
<span className="font-medium text-gray-300 block mb-0.5">
{t("player.skipTime.feedback.modal.guide.startLabel")}
{t(
"player.skipTime.feedback.modal.guide.startLabel",
)}
</span>
{t(
`player.skipTime.feedback.modal.guide.${formData.segment}.startDesc`,
@ -323,7 +371,9 @@ export function TIDBSubmissionForm({
</div>
<div>
<span className="font-medium text-gray-300 block mb-0.5">
{t("player.skipTime.feedback.modal.guide.endLabel")}
{t(
"player.skipTime.feedback.modal.guide.endLabel",
)}
</span>
{t(
`player.skipTime.feedback.modal.guide.${formData.segment}.endDesc`,
@ -351,7 +401,9 @@ export function TIDBSubmissionForm({
</div>
<div>
<span className="font-medium text-gray-300 block mb-0.5">
{t("player.skipTime.feedback.modal.guide.excludeLabel")}
{t(
"player.skipTime.feedback.modal.guide.excludeLabel",
)}
</span>
{t(
`player.skipTime.feedback.modal.guide.${formData.segment}.excludeDesc`,
@ -389,6 +441,9 @@ export function TIDBSubmissionForm({
</div>
</div>
</div>
</Flare.Child>
</div>
</Flare.Base>
</div>
</Modal>
);