diff --git a/README.md b/README.md index 7819647b8..50ab4ff17 100644 --- a/README.md +++ b/README.md @@ -127,11 +127,17 @@ optionsTranslation: OptionsTranslation( ## Subtitles -> Since version 1.1.0 chewie supports subtitles. Here you can see how to use them. +> Since version 1.1.0, Chewie supports subtitles. -You can provide an `List` and customize your subtitles with the `subtitleBuilder` function. +Chewie allows you to enhance the video playback experience with text overlays. You can add a `List` to your `ChewieController` and fully customize their appearance using the `subtitleBuilder` function. -Add subtitles to your `ChewieController` like the following example: +### Showing Subtitles by Default + +Chewie provides the `showSubtitlesPerDefault` flag, allowing you to control whether subtitles are displayed automatically when the video starts. By default, this flag is set to `false`. + +### Adding Subtitles + +Here’s an example of how to add subtitles to your `ChewieController`: ```dart ChewieController( @@ -149,9 +155,10 @@ ChewieController( index: 1, start: const Duration(seconds: 10), end: const Duration(seconds: 20), - text: 'Whats up? :)', + text: 'What’s up? :)', ), ]), + showSubtitlesPerDefault: true, // Automatically display subtitles subtitleBuilder: (context, subtitle) => Container( padding: const EdgeInsets.all(10.0), child: Text( @@ -162,9 +169,16 @@ ChewieController( ); ``` -The `index` attribute is for if you want to structure your subtitles in your database and provide your indexes here. `end` and `text` are the key attributes. +### Subtitle Structure + +The `Subtitle` model contains the following key attributes: -The Duration defines which part of your video your subtitles should start and end. For example, if your video is 10 minutes long and you want to add a subtitle between: `00:00` and `00:10`'th of a second: +- **`index`**: A unique identifier for the subtitle, useful for database integration. +- **`start`**: The starting point of the subtitle, defined as a `Duration`. +- **`end`**: The ending point of the subtitle, defined as a `Duration`. +- **`text`**: The subtitle text that will be displayed. + +For example, if your video is 10 minutes long and you want to add a subtitle that appears between `00:00` and `00:10`, you can define it like this: ```dart Subtitle( @@ -175,6 +189,10 @@ Subtitle( ), ``` +### Customizing Subtitles + +Use the `subtitleBuilder` function to customize how subtitles are rendered, allowing you to modify text styles, add padding, or apply other customizations to your subtitles. + ## Example Please run the app in the [`example/`](https://github.com/brianegan/chewie/tree/master/example) folder to start playing! diff --git a/example/lib/app/app.dart b/example/lib/app/app.dart index 768b4e86d..37c91b488 100644 --- a/example/lib/app/app.dart +++ b/example/lib/app/app.dart @@ -41,9 +41,9 @@ class _ChewieDemoState extends State { } List srcs = [ - "https://assets.mixkit.co/videos/preview/mixkit-spinning-around-the-earth-29351-large.mp4", - "https://assets.mixkit.co/videos/preview/mixkit-daytime-city-traffic-aerial-view-56-large.mp4", - "https://assets.mixkit.co/videos/preview/mixkit-a-girl-blowing-a-bubble-gum-at-an-amusement-park-1226-large.mp4" + "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", + "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4", + "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4", ]; Future initializePlayer() async { @@ -126,6 +126,7 @@ class _ChewieDemoState extends State { ]; }, subtitle: Subtitles(subtitles), + showSubtitlesPerDefault: true, subtitleBuilder: (context, dynamic subtitle) => Container( padding: const EdgeInsets.all(10.0), child: subtitle is InlineSpan diff --git a/lib/src/chewie_player.dart b/lib/src/chewie_player.dart index 5ebe0620f..bd39e250e 100644 --- a/lib/src/chewie_player.dart +++ b/lib/src/chewie_player.dart @@ -288,6 +288,7 @@ class ChewieController extends ChangeNotifier { this.zoomAndPan = false, this.maxScale = 2.5, this.subtitle, + this.showSubtitlesPerDefault = false, this.subtitleBuilder, this.customControls, this.errorBuilder, @@ -339,6 +340,7 @@ class ChewieController extends ChangeNotifier { bool? zoomAndPan, double? maxScale, Subtitles? subtitle, + bool? showSubtitlesPerDefault, Widget Function(BuildContext, dynamic)? subtitleBuilder, Widget? customControls, WidgetBuilder? bufferingBuilder, @@ -391,6 +393,8 @@ class ChewieController extends ChangeNotifier { optionsBuilder: optionsBuilder ?? this.optionsBuilder, additionalOptions: additionalOptions ?? this.additionalOptions, showControls: showControls ?? this.showControls, + showSubtitlesPerDefault: + showSubtitlesPerDefault ?? this.showSubtitlesPerDefault, subtitle: subtitle ?? this.subtitle, subtitleBuilder: subtitleBuilder ?? this.subtitleBuilder, customControls: customControls ?? this.customControls, @@ -454,6 +458,13 @@ class ChewieController extends ChangeNotifier { /// Add a List of Subtitles here in `Subtitles.subtitle` Subtitles? subtitle; + /// Determines whether subtitles should be shown by default when the video starts. + /// + /// If set to `true`, subtitles will be displayed automatically when the video + /// begins playing. If set to `false`, subtitles will be hidden by default. + /// + bool showSubtitlesPerDefault; + /// The controller for the video you want to play final VideoPlayerController videoPlayerController; diff --git a/lib/src/cupertino/cupertino_controls.dart b/lib/src/cupertino/cupertino_controls.dart index ea0bf4d80..31a0e73a8 100644 --- a/lib/src/cupertino/cupertino_controls.dart +++ b/lib/src/cupertino/cupertino_controls.dart @@ -641,7 +641,8 @@ class _CupertinoControlsState extends State } Future _initialize() async { - _subtitleOn = chewieController.subtitle?.isNotEmpty ?? false; + chewieController.showSubtitlesPerDefault && + (chewieController.subtitle?.isNotEmpty ?? false); controller.addListener(_updateState); _updateState(); diff --git a/lib/src/material/material_controls.dart b/lib/src/material/material_controls.dart index 9b20f0722..accc1b156 100644 --- a/lib/src/material/material_controls.dart +++ b/lib/src/material/material_controls.dart @@ -524,7 +524,8 @@ class _MaterialControlsState extends State } Future _initialize() async { - _subtitleOn = chewieController.subtitle?.isNotEmpty ?? false; + _subtitleOn = chewieController.showSubtitlesPerDefault && + (chewieController.subtitle?.isNotEmpty ?? false); controller.addListener(_updateState); _updateState(); diff --git a/lib/src/material/material_desktop_controls.dart b/lib/src/material/material_desktop_controls.dart index 1b8fba8e2..bf7f7e0d2 100644 --- a/lib/src/material/material_desktop_controls.dart +++ b/lib/src/material/material_desktop_controls.dart @@ -466,7 +466,8 @@ class _MaterialDesktopControlsState extends State } Future _initialize() async { - _subtitleOn = chewieController.subtitle?.isNotEmpty ?? false; + _subtitleOn = chewieController.showSubtitlesPerDefault && + (chewieController.subtitle?.isNotEmpty ?? false); controller.addListener(_updateState); _updateState();