randyjc/Rahoot
1
0
Fork 0
mirror of https://github.com/randyjc/Rahoot.git synced 2026-03-13 20:15:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

adding probe button in quizeditor and fix player size in cooldown

Browse Source
This commit is contained in:
RandyJC
2025-12-08 21:44:01 +01:00
parent 03b00b2499
commit 6420544f35
2 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/components/game/QuestionMedia.tsx
View File

@@ -14,7 +14,7 @@ const QuestionMedia = ({ media, alt, onPlayChange }: Props) => {
return null return null
} }
const containerClass = "mx-auto flex w-full max-w-3xl justify-center" const containerClass = "mx-auto flex w-full max-w-5xl justify-center"
switch (media.type) { switch (media.type) {
case "image": case "image":
@@ -52,7 +52,7 @@ const QuestionMedia = ({ media, alt, onPlayChange }: Props) => {
crossOrigin="anonymous" crossOrigin="anonymous"
playsInline playsInline
src={media.url} src={media.url}
className="m-4 w-full max-w-3xl rounded-md shadow-lg" className="m-4 w-full max-w-5xl rounded-md shadow-lg"
preload="metadata" preload="metadata"
onPlay={() => onPlayChange?.(true)} onPlay={() => onPlayChange?.(true)}
onPause={() => onPlayChange?.(false)} onPause={() => onPlayChange?.(false)}

48
packages/web/src/components/game/create/QuizEditor.tsx
View File

@@ -258,7 +258,6 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
} }
setQuestionMedia(qIndex, nextMedia) setQuestionMedia(qIndex, nextMedia)
adjustTimingWithMedia(qIndex, nextMedia)
} }
const clearQuestionMedia = (qIndex: number) => { const clearQuestionMedia = (qIndex: number) => {
@@ -272,6 +271,7 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
try { try {
const el = document.createElement(type) const el = document.createElement(type)
el.crossOrigin = "anonymous"
el.preload = "metadata" el.preload = "metadata"
el.src = url el.src = url
@@ -371,11 +371,6 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
url: uploaded.url, url: uploaded.url,
fileName: uploaded.fileName, fileName: uploaded.fileName,
}) })
adjustTimingWithMedia(qIndex, {
type,
url: uploaded.url,
fileName: uploaded.fileName,
})
toast.success("Media uploaded") toast.success("Media uploaded")
refreshMediaLibrary() refreshMediaLibrary()
} catch (error) { } catch (error) {
@@ -647,26 +642,39 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
</div> </div>
)} )}
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span className="text-xs font-semibold text-gray-600"> <span className="text-xs font-semibold text-gray-600">
Or paste an external URL Or paste an external URL
</span> </span>
<Input <Input
value={question.media?.url || question.image || ""} value={question.media?.url || question.image || ""}
onChange={(e) => handleMediaUrlChange(qIndex, e.target.value)} onChange={(e) => handleMediaUrlChange(qIndex, e.target.value)}
placeholder="https://..." placeholder="https://..."
disabled={!question.media?.type} disabled={!question.media?.type}
/> />
<span className="text-xs text-gray-500"> <span className="text-xs text-gray-500">
Tip: set answer time longer than the clip duration. Tip: set answer time longer than the clip duration.
</span> </span>
</label> </label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap items-center gap-2">
<Button <Button
className="bg-gray-700" className="bg-gray-800"
onClick={() => clearQuestionMedia(qIndex)} onClick={() => adjustTimingWithMedia(qIndex, question.media)}
disabled={!question.media} disabled={!question.media?.url || probing[qIndex]}
>
{probing[qIndex] ? "Probing..." : "Set timing from media"}
</Button>
<span className="text-xs text-gray-500">
Probes audio/video duration and bumps cooldown/answer time if needed.
</span>
</div>
<div className="flex flex-wrap gap-2">
<Button
className="bg-gray-700"
onClick={() => clearQuestionMedia(qIndex)}
disabled={!question.media}
> >
Clear from question Clear from question
</Button> </Button>