Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improvement of documentation in readme & comments + fix bad naming #84

Merged
merged 9 commits into from
Apr 1, 2022
Merged

Improvement of documentation in readme & comments + fix bad naming #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6f5d60a
[doc] add doc in sources and readme + rename some parameters
LeGoffMael Mar 16, 2022
b7fefb3
[doc] improve doc description
LeGoffMael Mar 16, 2022
dfcd2bf
[doc] improve controller doc
LeGoffMael Mar 16, 2022
6a44595
[doc] update controller documentation
LeGoffMael Mar 16, 2022
de15df6
[readme] add expanded sections
LeGoffMael Mar 16, 2022
4f218c3
[readme] add emojis on main contributors section
LeGoffMael Mar 16, 2022
21c2ca5
[readme] fix typo
LeGoffMael Mar 16, 2022
2ac5cdf
Merge branch 'master' into improveDoc
LeGoffMael Apr 1, 2022
f6acad7
[doc] add comments about customInstruction param
LeGoffMael Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
136 changes: 131 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
A video editor that allows to edit (trim, crop, rotate and scale) and choose a cover with a very flexible UI design.
The changes are then exported with `ffmpeg`.

## Installation

## 📖 Installation

Following steps will help you add this library as a dependency in your flutter project.

Expand Down Expand Up @@ -49,7 +48,8 @@ Those Android API level and iOS deployment target are required to uses this pack
</tbody>
</table>

## **Screenshots** (The UI Design is fully customizable on the [example](https://pub.dev/packages/video_editor/example))
## 📸 Screenshots
(The UI Design is fully customizable on the [example](https://pub.dev/packages/video_editor/example))

| Crop Video | Rotate Video | Video cover (selection, viewer) |
| ----------------------------------- | ------------------------------------- | ------------------------------------- |
Expand All @@ -59,6 +59,132 @@ Those Android API level and iOS deployment target are required to uses this pack
| --------------------------------------- | ------------------------------------------ |
| ![](./assets/readme/new_trim_video.gif) | ![](./assets/readme/new_trimmer_icons.gif) |

## 👀 Usage

### VideoEditorController

| Function | Description |
| -------------------------------- | --------------------------------- |
| initialize() | Init the `controller` parameters, the video, the trim and the cover |
| rotate90Degrees(RotateDirection) | Rotate the video by 90 degrees in the direction provided |
| preferredCropAspectRatio | Update the aspect ratio of the crop area |
| updateCrop | Update the controller crop min and max values |
| getMetaData(onCompleted) | Return the metadata of the video file in `onCompleted` function |
| exportVideo(onCompleted) | Return the generated video with the controller parameters in `onCompleted` function |
| extractCover(onCompleted) | Return the selected cover with the controller parameters in `onCompleted` function |

### Widgets

<details>
<summary>Click to expand widgets documentation</summary>

#### Crop
##### 1. CropGridViewer

This widget is used to enable the crop actions on top of the video, or only to preview the cropped result.

| Param | Description |
| -------------------------------- | --------------------------------- |
| required VideoEditorController controller | The `controller` param is mandatory so every change in the controller settings will propagate in the crop view |
| bool showGrid = true | The `showGrid` param specifies whether the crop action can be triggered and if the crop grid is shown, set this param to `false` to display the preview of the cropped video |
| double horizontalMargin = 0.0 | The `horizontalMargin` param need to be specify when there is a margin outside the crop view, so in case of a change the new layout can be computed properly (i.e after a rotation) |

#### Trimmer

##### 1. TrimSlider

Display the trimmer containing video thumbnails with rotation and crop parameters.

| Param | Description |
| -------------------------------- | --------------------------------- |
| required VideoEditorController controller | The `controller` param is mandatory so every change in the controller settings will propagate in the trim slider view |
| double height = 0.0 | The `height` param specifies the height of the generated thumbnails |
| double quality = 10 | The `quality` param specifies the quality of the generated thumbnails, from 0 to 100 ([more info](https://pub.dev/packages/video_thumbnail)) |
| double horizontalMargin = 0.0 | The `horizontalMargin` param specifies the horizontal space to set around the slider. It is important when the trim can be dragged (`controller.maxDuration` < `controller.videoDuration`) |
| Widget? child | The `child` param can be specify to display a widget below this one (e.g: TrimTimeline) |

##### 2. TrimTimeline

Display the video timeline.

| Param | Description |
| -------------------------------- | --------------------------------- |
| required VideoEditorController controller | The `controller` param is mandatory so depending on the `controller.maxDuration`, the generated timeline will be different |
| double secondGap = 5 | The `secondGap` param specifies time gap in second between every points of the timeline |
| EdgeInsets margin = EdgeInsets.zero | The `margin` param specifies the space surrounding the timeline |

#### Cover
##### 1. CoverSelection

Display a couple of generated covers with rotation and crop parameters to updated the selected cover.

| Param | Description |
| -------------------------------- | --------------------------------- |
| required VideoEditorController controller | The `controller` param is mandatory so every change in the controller settings will propagate in the cover selection view |
| double height = 0.0 | The `height` param specifies the height of the generated thumbnails |
| double quality = 10 | The `quality` param specifies the quality of the generated thumbnails, from 0 to 100 ([more info](https://pub.dev/packages/video_thumbnail)) |
| double horizontalMargin = 0.0 | The `horizontalMargin` param need to be specify when there is a margin outside the crop view, so in case of a change the new layout can be computed properly. |
| int quantity = 5 | The `quantity` param specifies the quantity of thumbnails to generate |

##### 2. CoverViewer

Display the selected cover with rotation and crop parameters.

| Param | Description |
| -------------------------------- | --------------------------------- |
| required VideoEditorController controller | The `controller` param is mandatory so every change in the controller settings will propagate the crop parameters in the cover view |
| String noCoverText = 'No selection' | The `noCoverText` param specifies the text to display when selectedCover is `null` |

</details>

### Style

<details>
<summary>Click to expand style documentation</summary>

#### 1. CropStyle

You can create your own CropStyle class to customize the CropGridViewer appareance.

| Param | Description |
| -------------------------------- | --------------------------------- |
| Color croppingBackground = Colors.black.withOpacity(0.48) | The `croppingBackground` param specifies the color of the paint area outside the crop area when copping |
| Color background = Colors.black | The `background` param specifies the color of the paint area outside the crop area when not copping |
| double gridLineWidth = 1 | The `gridLineWidth` param specifies the width of the crop lines |
| Color gridLineColor = Colors.white | The `gridLineColor` param specifies the color of the crop lines |
| int gridSize = 3 | The `gridSize` param specifies the quantity of columns and rows in the crop view |
| Color boundariesColor = Colors.white | The `boundariesColor` param specifies the color of the crop area's corner |
| double boundariesLength = 20 | The `boundariesLength` param specifies the length of the crop area's corner |
| double boundariesWidth = 5 | The `boundariesWidth` param specifies the width of the crop area's corner |

#### 2. TrimStyle

You can create your own TrimStyle class to customize the TrimSlider appareance.

| Param | Description |
| -------------------------------- | --------------------------------- |
| Color background = Colors.black.withOpacity(0.6) | The `background` param specifies the color of the paint area outside the trimmed area |
| Color positionLineColor = Colors.red | The `positionLineColor` param specifies the color of the line showing the video position |
| double positionLineWidth = 2 | The `positionLineWidth` param specifies the width of the line showing the video position |
| Color lineColor = Colors.white | The `lineColor` param specifies the color of the borders around the trimmed area |
| double lineWidth = 2 | The `lineWidth` param specifies the width of the borders around the trimmed area |
| Color iconColor = Colors.black | The `iconColor` param specifies the color of the icons on the trimmed area's edges |
| double circleSize = 8 | The `circleSize` param specifies the size of the circle behind the icons on the trimmed area's edges |
| double iconSize = 25 | The `iconSize` param specifies the size of the icon on the trimmed area's edges |
| IconData? leftIcon = Icons.arrow_left | The `leftIcon` param specifies the icon to show on the left edge of the trimmed area |
| IconData? rightIcon = Icons.arrow_right | The `rightIcon` param specifies the icon to show on the right edge of the trimmed area |

#### 3. CoverStyle

You can create your own CoverStyle class to customize the CoverSelection appareance.

| Param | Description |
| -------------------------------- | --------------------------------- |
| Color selectedBorderColor = Colors.white | The `selectedBorderColor` param specifies the color of the border around the selected cover thumbnail |
| double selectedBorderWidth = 2 | The `selectedBorderWidth` param specifies the width of the border around the selected cover thumbnail |

</details>

## FAQ

### 1. How to use FFmpeg LTS release
Expand All @@ -72,11 +198,11 @@ dependency_overrides:
ffmpeg_kit_flutter_min_gpl: ^4.5.1-LTS
```

## Main Contributors
## ✨ Main contributors

<table>
<tr>
<td align="center"><a href="https://github.com/LeGoffMael"><img src="https://avatars.githubusercontent.com/u/22376981?v=4?s=200" width="200px;" alt=""/><br/><sub><b>Le Goff Maël</b></sub></a></td>
<td align="center"><a href="https://github.com/LeGoffMael"><img src="https://avatars.githubusercontent.com/u/22376981?v=4?s=200" width="100px;" alt=""/><br/><sub><b>Le Goff Maël</b></sub></a></td>
</tr>
</table>
<br/>
6 changes: 3 additions & 3 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
title: 'Flutter Video Editor Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
Expand Down Expand Up @@ -120,7 +120,7 @@ class _VideoEditorState extends State<VideoEditor> {
void _exportVideo() async {
_isExporting.value = true;
bool _firstStat = true;
//NOTE: To use `-crf 1` and [VideoExportPreset] you need `ffmpeg_kit_flutter_min_gpl` package (with `ffmpeg_kit` only it won't work)
// NOTE: To use `-crf 1` and [VideoExportPreset] you need `ffmpeg_kit_flutter_min_gpl` package (with `ffmpeg_kit` only it won't work)
await _controller.exportVideo(
// preset: VideoExportPreset.medium,
// customInstruction: "-crf 17",
Expand Down Expand Up @@ -398,7 +398,7 @@ class _VideoEditorState extends State<VideoEditor> {
child: CoverSelection(
controller: _controller,
height: height,
nbSelection: 8,
quantity: 8,
));
}

Expand Down