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
}
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) {
case "image":
@@ -52,7 +52,7 @@ const QuestionMedia = ({ media, alt, onPlayChange }: Props) => {
crossOrigin="anonymous"
playsInline
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"
onPlay={() => onPlayChange?.(true)}
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)
adjustTimingWithMedia(qIndex, nextMedia)
}
const clearQuestionMedia = (qIndex: number) => {
@@ -272,6 +271,7 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
try {
const el = document.createElement(type)
el.crossOrigin = "anonymous"
el.preload = "metadata"
el.src = url
@@ -371,11 +371,6 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
url: uploaded.url,
fileName: uploaded.fileName,
})
adjustTimingWithMedia(qIndex, {
type,
url: uploaded.url,
fileName: uploaded.fileName,
})
toast.success("Media uploaded")
refreshMediaLibrary()
} catch (error) {
@@ -647,26 +642,39 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
</div>
)}
<label className="flex flex-col gap-1">
<span className="text-xs font-semibold text-gray-600">
Or paste an external URL
</span>
<Input
<label className="flex flex-col gap-1">
<span className="text-xs font-semibold text-gray-600">
Or paste an external URL
</span>
<Input
value={question.media?.url || question.image || ""}
onChange={(e) => handleMediaUrlChange(qIndex, e.target.value)}
placeholder="https://..."
disabled={!question.media?.type}
/>
<span className="text-xs text-gray-500">
Tip: set answer time longer than the clip duration.
</span>
</label>
<span className="text-xs text-gray-500">
Tip: set answer time longer than the clip duration.
</span>
</label>
<div className="flex flex-wrap gap-2">
<Button
className="bg-gray-700"
onClick={() => clearQuestionMedia(qIndex)}
disabled={!question.media}
<div className="flex flex-wrap items-center gap-2">
<Button
className="bg-gray-800"
onClick={() => adjustTimingWithMedia(qIndex, 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
</Button>