Skip to main content

[Client] Request Details

Overview​

Clients can view detailed information about a specific text-to-audio request. This page shows the request status, text content, selected voice, and provides access to the audio file and QR code when ready.

Access: Client login required

Purpose: View individual request details and download results

Key Actions:

  • View complete request information
  • Download audio file (when done)
  • Download QR code (when done)
  • View playback link

Live Preview​

Request REQ-001234

Created 2 days ago

✓ Status: Done

Request Information

👩

Rachel - Female, American

Welcome to MicDots! Scan the QR code to hear your personalized message. This is a sample text that demonstrates the text-to-speech conversion functionality.

Character count: 187 / 1000

Jan 20, 2024 10:30 AM

Jan 21, 2024 2:15 PM

Your Audio is Ready!

Listen to your audio and download the QR code below

🎵

Audio Player

QR Code (Scan to Play)

📱

Shareable Playback Link

API Endpoints​

This page uses the following API endpoint:

Get Submission by ID​

Endpoint: GET /api/v1/text-to-speech/{id}

Authentication: Required (Bearer token)

Role Required: client role for viewing personal submission

Description: Retrieves detailed information for a specific submission. Clients can only access their own submissions. Admins can access all submissions.

Status States​

Pending State​

Visual:

  • Orange status badge
  • Pending icon (clock)
  • Message: "Your request is pending"

Information Shown:

  • Request ID, voice, text content
  • Created date
  • No audio/QR available yet

Processing State​

Visual:

  • Blue status badge
  • Processing icon (hourglass)
  • Message: "Your request is being processed"

Information Shown:

  • Request ID, voice, text content
  • Created date
  • Estimated completion time
  • No audio/QR available yet

Done State​

Visual:

  • Green status badge
  • Success icon (checkmark)
  • Audio player section highlighted

Information Shown:

  • Request ID, voice, text content
  • Created and completed dates
  • Audio player with play/download
  • QR code with download button
  • Shareable playback link

Page Elements​

Header Section​

  • Request ID: Displayed as page title
  • Back Button: Returns to My Requests list
  • Status Badge: Color-coded status indicator
  • Created Date: Time since creation

Request Information Card​

Fields Displayed:

  • Voice Model: Avatar and name/details
  • Text Content: Full text with character count
  • Created At: Request creation timestamp
  • Completed At: Completion timestamp (when done)

Audio Player Section (Done Status Only)​

Components:

  1. Audio Player:

    • Play/pause button
    • Download MP3 button
    • Embedded HTML5 audio player

  2. QR Code Display:

    • Visual QR code preview (200x200px)
    • Download QR code button
    • Scan instructions

  3. Playback Link:

    • Shareable public URL
    • Copy to clipboard button
    • Instructions for sharing

Status Messages​

Pending:

  • Clock icon
  • "Your request is pending" message
  • Expected wait time information

Processing:

  • Hourglass icon
  • "Your request is being processed" message
  • Progress indication

Done:

  • Checkmark icon
  • Full audio player section
  • QR code download
  • Playback link

User Actions​

Primary Actions (Done Status)​

  1. Play Audio - Listen to generated audio
  2. Download MP3 - Save audio file locally
  3. Download QR Code - Save QR code image
  4. Copy Playback Link - Share public URL

Secondary Actions​

  • Back to List - Return to My Requests
  • Create New Request - Submit another request

User Flow​

Previous Page: My Requests List

Current Page: Request Details (Single View)

Flow:

  1. Client clicks request from list
  2. Client views detailed request information
  3. If Pending: Client sees pending message
  4. If Processing: Client sees processing message
  5. If Done: Client can play audio, download QR, copy link
  6. Client returns to list or creates new request

Email Notifications​

Users receive emails at each status change. When clicking the link in the "Done" email, they arrive directly at this page.

See Email Templates for notification details.

Success Criteria​

  • ✅ Client can view complete request details
  • ✅ Status badge displays correct state
  • ✅ Text content displays fully
  • ✅ Audio player works (when done)
  • ✅ Download buttons work (when done)
  • ✅ QR code displays correctly (when done)
  • ✅ Playback link is copyable
  • ✅ Back button returns to list
  • ✅ Appropriate messages for each status
  • ✅ Responsive on mobile devices