Skip to main content
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

​
Overview

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe>
        <VeltRecorderPlayerExpandedWireframe.Panel />
        <VeltRecorderPlayerExpandedWireframe.Transcription />
    </VeltRecorderPlayerExpandedWireframe>
</VeltWireframe>

​
Panel

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Panel>
        <VeltRecorderPlayerExpandedWireframe.Display />
        <VeltRecorderPlayerExpandedWireframe.CopyLink />
        <VeltRecorderPlayerExpandedWireframe.MinimizeButton />
        <VeltRecorderPlayerExpandedWireframe.Subtitles />
        <VeltRecorderPlayerExpandedWireframe.Controls />
    </VeltRecorderPlayerExpandedWireframe.Panel>
</VeltWireframe>

​
Display

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Display />
</VeltWireframe>

​
Subtitles

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Subtitles />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.CopyLink />
</VeltWireframe>

​
MinimizeButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.MinimizeButton />
</VeltWireframe>

​
Controls

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls>
        <VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton />
        <VeltRecorderPlayerExpandedWireframe.Controls.Time />
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton />
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton />
        <VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
        <VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
        <VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
    </VeltRecorderPlayerExpandedWireframe.Controls>
</VeltWireframe>

​
ProgressBar

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
</VeltWireframe>

​
ToggleButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
    </VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
</VeltWireframe>
Pause
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
</VeltWireframe>
Play
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
</VeltWireframe>

​
Time

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.Time>
        <VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
				<!-- Add custom divider by adding any tag like <p> / <p> -->
        <VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
    </VeltRecorderPlayerExpandedWireframe.Controls.Time>
</VeltWireframe>
CurrentTime
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
</VeltWireframe>
TotalTime
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
</VeltWireframe>

​
SubtitleButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
    </VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
</VeltWireframe>
Icon
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
</VeltWireframe>
Tooltip
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
</VeltWireframe>

​
TranscriptionButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
    </VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
</VeltWireframe>
Icon
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
</VeltWireframe>
Tooltip
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
</VeltWireframe>

​
VolumeButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
</VeltWireframe>

​
SettingsButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
</VeltWireframe>

​
DeleteButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
</VeltWireframe>

​
Transcription

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerExpandedWireframe.Transcription />
</VeltWireframe>
⌘I