LMFeedVideo

LMFeedVideo is a widget that displays a video within a feed post. It supports playing videos from a URL or a local file. The widget provides customization options for styling the video player, handling playback controls, and responding to media events.

The LMFeedVideo widget is part of the likeminds_feed_flutter_ui package. It is designed to be used within an LMFeedPostWidget to display videos associated with a post.

Properties

• postId (String) - Required

The unique identifier of the post associated with the video. This is a required parameter.

• videoUrl (String)

The URL of the video to be played. Either videoUrl or videoFile must be provided.

• videoFile (File)

The local file representing the video to be played. Either videoUrl or videoFile must be provided.

• playButton (LMFeedButton)

A custom button widget for the play action. This is an optional parameter.

• pauseButton (LMFeedButton)

A custom button widget for the pause action. This is an optional parameter.

• muteButton (LMFeedButton)

A custom button widget for the mute action. This is an optional parameter.

• isMute (bool)

A flag indicating whether the video should be initially muted. This is an optional parameter with a default value of true.

• style (LMFeedPostVideoStyle)

The style configuration for the video player. It allows customization of the video player's appearance and behavior. This is an optional parameter.

• onMediaTap (VoidCallback)

A callback function that is invoked when the video is tapped. This is an optional parameter.

• autoPlay (bool)

A flag indicating whether the video should automatically start playing. This is an optional parameter with a default value of false.

Styling

The LMFeedPostVideoStyle class allows you to customize the appearance and behavior of the LMFeedVideo widget.

Customization variables

Property	Type	Description	Required	Default
height	double	The height of the video player.
width	double	The width of the video player.
aspectRatio	double	The aspect ratio of the video player.		16:9
borderRadius	BorderRadius	The border radius of the video player.		0
borderColor	Color	The border color of the video player.
borderWidth	double	The border width of the video player.
boxFit	BoxFit	How the video should be inscribed into the layout bounds.		BoxFit.cover
seekBarColor	Color	The color of the seek bar.
seekBarBufferColor	Color	The color of the seek bar buffer.
progressTextStyle	TextStyle	The text style for the progress text.
loaderWidget	Widget	The widget to be displayed while the video is loading.
errorWidget	Widget	The widget to be displayed when an error occurs.
shimmerWidget	Widget	The shimmer widget to be displayed while the video is loading.
playButton	LMFeedButton	The custom play button widget.
pauseButton	LMFeedButton	The custom pause button widget.
muteButton	LMFeedButton	The custom mute button widget.
showControls	bool	Whether to show the default video controls.
autoPlay	bool	Whether to automatically start playing the video.
looping	bool	Whether to loop the video playback.
allowFullScreen	bool	Whether to allow entering full-screen mode.
allowMuting	bool	Whether to allow muting the video.

You can create an instance of LMFeedPostVideoStyle and pass it to the LMFeedVideo widget to customize its appearance and behavior.

Usage Example

LMFeedVideo(
  postId: 'post123',
  videoUrl: 'https://example.com/video.mp4',
  playButton: LMFeedButton(
    icon: Icon(Icons.play_arrow),
    onTap: () {
      // Handle play button tap
    },
  ),
  pauseButton: LMFeedButton(
    icon: Icon(Icons.pause),
    onTap: () {
      // Handle pause button tap
    },
  ),
  muteButton: LMFeedButton(
    icon: Icon(Icons.volume_off),
    onTap: () {
      // Handle mute button tap
    },
  ),
  isMute: false,
  style: LMFeedPostVideoStyle(
    height: 200,
    width: double.infinity,
    aspectRatio: 16 / 9,
    borderRadius: BorderRadius.circular(8),
    borderColor: Colors.grey,
    seekBarColor: Colors.blue,
    loaderWidget: CircularProgressIndicator(),
    errorWidget: Icon(Icons.error),
    shimmerWidget: LMPostMediaShimmer(),
    showControls: true,
    autoPlay: true,
    looping: false,
    allowFullScreen: true,
    allowMuting: true,
  ),
  onMediaTap: () {
    // Handle video tap
  },
  autoPlay: false,
)

In this example, an LMFeedVideo widget is created with the postId and videoUrl properties set to identify the post and provide the video URL. Custom play, pause, and mute buttons are provided using the playButton, pauseButton, and muteButton properties. The isMute property is set to false to unmute the video initially. The appearance and behavior of the video player are customized using the LMFeedPostVideoStyle class, specifying various properties such as height, width, aspect ratio, border radius, border color, seek bar color, loader widget, error widget, shimmer widget, and control options. The onMediaTap callback is used to handle taps on the video, and the autoPlay property is set to false to prevent automatic playback.