AdvancedPanelComponent class

A stateful widget rendering an advanced recording configuration panel.

Displays 6-10 configuration fields for fine-tuning recording visual appearance, layout composition, and text overlays. Provides color pickers, text input validation, and conditional field visibility based on user selections.

Form Fields:

Video Type (always visible):
- "Full Display (no background)" (value: "fullDisplay") - Tight crop with no empty space
- "Full Video" (value: "bestDisplay") - Optimized full-frame video
- "All" (value: "all") - All participants in grid
Display Type (hidden for EventType.broadcast):
- "Only Video Participants" (value: "video") - Participants with video enabled
- "Only Video Participants (optimized)" (value: "videoOpt") - Optimized video-only layout
- "Participants with media" (value: "media") - Participants with video or screenshare
- "All Participants" (value: "all") - Everyone including audio-only
Background Color (always visible):
- Color picker button showing current hex color
- Opens ColorPicker dialog from flutter_colorpicker package
Add Text (always visible):
- "True" (value: "true") - Enable custom text overlay
- "False" (value: "false") - Disable text overlay
Custom Text (visible if recordingAddText == true):
- TextFormField with alphanumeric validation (max 40 chars)
- RegExp: ^[a-zA-Z0-9\s]{1,40}$
- Invalid input reverts to previous value
Custom Text Position (visible if recordingAddText == true):
- "Top" (value: "top") - Text at top of frame
- "Middle" (value: "middle") - Centered text
- "Bottom" (value: "bottom") - Text at bottom
Custom Text Color (visible if recordingAddText == true):
- Color picker for text overlay color
Add Name Tags (always visible):
- "True" (value: "true") - Show participant names on videos
- "False" (value: "false") - Hide name overlays
Name Tags Color (visible if recordingNameTags == true):
- Color picker for name tag background/text color
Orientation Video (always visible):
- "Landscape" (value: "landscape") - 16:9 widescreen
- "Portrait" (value: "portrait") - 9:16 vertical

Rendering Structure:

Column (crossAxisAlignment: start)
  ├─ buildPicker (Video Type)
  ├─ SizedBox (15px)
  ├─ [if eventType != broadcast] buildPicker (Display Type)
  ├─ SizedBox (15px)
  ├─ buildColorPicker (Background Color)
  ├─ SizedBox (15px)
  ├─ buildPicker (Add Text: true/false)
  ├─ SizedBox (15px)
  ├─ [if recordingAddText]
  │  ├─ buildCustomText() (TextFormField)
  │  ├─ buildPicker (Custom Text Position)
  │  ├─ buildColorPicker (Custom Text Color)
  │  └─ SizedBox (15px)
  ├─ buildPicker (Add Name Tags: true/false)
  ├─ [if recordingNameTags]
  │  ├─ buildColorPicker (Name Tags Color)
  │  └─ SizedBox (15px)
  └─ buildPicker (Orientation Video)

State Management:

parsedColors: Map<String, Color> storing parsed hex colors for pickers
customTextController: TextEditingController for custom text input
showBackgroundColorModal: bool for background color picker visibility
showCustomTextColorModal: bool for text color picker visibility
showNameTagsColorModal: bool for name tags color picker visibility
selectedColorType: String tracking which color picker is active
recordingText: String mirroring recordingAddText for conditional rendering

Common Use Cases:

Professional Webinar Recording:

AdvancedPanelComponent(
  options: AdvancedPanelComponentOptions(
    parameters: RecordingParams(
      recordingVideoType: "bestDisplay",
      recordingDisplayType: "video",
      recordingBackgroundColor: "#1a1a1a",
      recordingNameTagsColor: "#ffffff",
      recordingOrientationVideo: "landscape",
      recordingNameTags: true,
      recordingAddText: true,
      recordingCustomText: "Q4 Sales Review",
      recordingCustomTextPosition: "bottom",
      recordingCustomTextColor: "#00bfff",
      eventType: EventType.webinar,
      updateRecordingVideoType: (type) => _updateState(type),
      updateRecordingDisplayType: (type) => _updateState(type),
      updateRecordingBackgroundColor: (color) => _updateState(color),
      updateRecordingNameTagsColor: (color) => _updateState(color),
      updateRecordingOrientationVideo: (orientation) => _updateState(orientation),
      updateRecordingNameTags: (enable) => _updateState(enable),
      updateRecordingAddText: (enable) => _updateState(enable),
      updateRecordingCustomText: (text) => _updateState(text),
      updateRecordingCustomTextPosition: (pos) => _updateState(pos),
      updateRecordingCustomTextColor: (color) => _updateState(color),
    ),
  ),
)
// Result: Landscape recording with blue "Q4 Sales Review" at bottom, white name tags

Portrait Social Media Recording:

AdvancedPanelComponent(
  options: AdvancedPanelComponentOptions(
    parameters: RecordingParams(
      recordingVideoType: "fullDisplay",
      recordingDisplayType: "videoOpt",
      recordingBackgroundColor: "#000000",
      recordingNameTagsColor: "#ff6b6b",
      recordingOrientationVideo: "portrait",
      recordingNameTags: true,
      recordingAddText: true,
      recordingCustomText: "@YourBrand",
      recordingCustomTextPosition: "top",
      recordingCustomTextColor: "#ffffff",
      eventType: EventType.conference,
      updateRecordingVideoType: updateVidType,
      updateRecordingDisplayType: updateDispType,
      updateRecordingBackgroundColor: updateBgColor,
      updateRecordingNameTagsColor: updateNameColor,
      updateRecordingOrientationVideo: updateOrientation,
      updateRecordingNameTags: updateNameTags,
      updateRecordingAddText: updateAddText,
      updateRecordingCustomText: updateCustomText,
      updateRecordingCustomTextPosition: updateTextPos,
      updateRecordingCustomTextColor: updateTextColor,
    ),
  ),
)
// Result: 9:16 portrait with "@YourBrand" at top, coral name tags, black background

Minimal Recording (No Overlays):

AdvancedPanelComponent(
  options: AdvancedPanelComponentOptions(
    parameters: RecordingParams(
      recordingVideoType: "bestDisplay",
      recordingDisplayType: "video",
      recordingBackgroundColor: "#ffffff",
      recordingNameTagsColor: "#000000",
      recordingOrientationVideo: "landscape",
      recordingNameTags: false, // no names
      recordingAddText: false, // no text
      recordingCustomText: "",
      recordingCustomTextPosition: "bottom",
      recordingCustomTextColor: "#000000",
      eventType: EventType.conference,
      updateRecordingVideoType: (type) => updateSettings(type),
      updateRecordingDisplayType: (type) => updateSettings(type),
      updateRecordingBackgroundColor: (color) => updateSettings(color),
      updateRecordingNameTagsColor: (color) => updateSettings(color),
      updateRecordingOrientationVideo: (orientation) => updateSettings(orientation),
      updateRecordingNameTags: (enable) => updateSettings(enable),
      updateRecordingAddText: (enable) => updateSettings(enable),
      updateRecordingCustomText: (text) => updateSettings(text),
      updateRecordingCustomTextPosition: (pos) => updateSettings(pos),
      updateRecordingCustomTextColor: (color) => updateSettings(color),
    ),
  ),
)
// Result: Clean landscape recording with white background, no overlays

Color Picker Implementation:

Uses flutter_colorpicker package (ColorPicker widget)
Opens AlertDialog with color picker on button tap
Persists color selection via update callback
Parses hex strings to Color objects using _parseColor()
Updates parsedColors map for reactive UI

Text Input Validation:

validateTextInput(): RegExp ^[a-zA-Z0-9\s]{1,40}$
Allows: letters, numbers, spaces
Max length: 40 characters
Invalid input: reverts to previous value (no update)
Prevents special characters, emojis, or overflow

EventType Filtering:

EventType.broadcast: Hides "Display Type" (broadcaster controls all sources)
EventType.conference/webinar/chat: Shows all fields

Update Callbacks:

Invoked immediately when user changes dropdown/color/text
Should update parent state (typically MediasfuParameters)
Changes not persisted until "Confirm" button clicked in RecordingModal
Color callbacks receive hex strings (e.g., "#1a2b3c")

Typical Usage Context:

RecordingModal "Advanced" tab
Power user recording customization
Brand-consistent recording styling
Custom overlay text for branding/disclaimers

Inheritance

Object
DiagnosticableTree
Widget
StatefulWidget
AdvancedPanelComponent

Constructors

AdvancedPanelComponent({Key? key, required AdvancedPanelComponentOptions options}): const

Properties

hashCode → int: The hash code for this object.
no setterinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
options → AdvancedPanelComponentOptions: final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → _AdvancedPanelComponentState: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

AdvancedPanelComponent class

Constructors

Properties

Methods

Operators

advanced_panel_component library