Skip to content

Commit ca49ead

Browse files
heng30heng30
committed
[*] refactor: video-editor
1 parent 4e0b739 commit ca49ead

File tree

5 files changed

+138
-18
lines changed

5 files changed

+138
-18
lines changed

‎wayshot/ui/logic.slint‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,7 @@ export global Logic {
318318
callback video-editor-segment-down-filter(index: int);
319319
callback video-editor-segment-remove-filter(index: int);
320320
callback video-editor-segment-toggle-filter(index: int);
321+
callback video-editor-segment-add-filter(track-type: VideoEditorTrackType, filter-name: string);
321322

322323
pure callback video-editor-selected-segment() -> VideoEditorTrackSegment;
323324
video-editor-selected-segment => {

‎wayshot/ui/panel/desktop/video-editor/filter.slint‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ export struct BrightnessDetail {
99
}
1010

1111
export global VEFilter {
12-
pure callback from_brightness_json(json: string) -> BrightnessDetail;
13-
callback to_brightness_json(datail: BrightnessDetail) -> string;
12+
in-out property <[string]> video-filters: ["brightness", "contrast"];
13+
in-out property <[string]> audio-filters: [];
14+
in-out property <[string]> overlay-filters: [];
15+
in-out property <[string]> subtitle-filters: [];
16+
17+
pure callback from-brightness-json(json: string) -> BrightnessDetail;
18+
callback modify-brightness-filter(index: int, config: BrightnessDetail);
1419
}

‎wayshot/ui/panel/desktop/video-editor/right-panel/filter/filter.slint‎

Lines changed: 120 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@ import {
1818
PopupActionSetting,
1919
ElevatedBtn,
2020
MovingDivider,
21+
Brand,
2122
} from "../../../../../base/widgets.slint";
2223
import { FilterVideoDetail } from "video.slint";
23-
import { SegmentFilterListItem } from "../../filter.slint";
24+
import { SegmentFilterListItem, VEFilter } from "../../filter.slint";
2425

2526
component FilterDetailTab inherits Rectangle {
2627
in-out property <int> checked-index: 0;
@@ -111,10 +112,6 @@ component SegmentFilterList inherits Rectangle {
111112

112113
callback clicked(filter: SegmentFilterListItem);
113114

114-
init => {
115-
debug(self.preferred-height);
116-
}
117-
118115
lv := ListView {
119116
for filter[index] in segment.filters: Rectangle {
120117
border-radius: Theme.border-radius;
@@ -191,22 +188,26 @@ component SegmentFilterList inherits Rectangle {
191188
}
192189

193190
component FilterAudioDetail inherits Rectangle {
191+
in-out property <int> index: -1;
194192
in-out property <SegmentFilterListItem> selected-filter;
195193
background: green;
196194
}
197195

198196
component FilterOverlayDetail inherits Rectangle {
197+
in-out property <int> index: -1;
199198
in-out property <SegmentFilterListItem> selected-filter;
200199
background: blue;
201200
}
202201

203202
component FilterSubtitleDetail inherits Rectangle {
203+
in-out property <int> index: -1;
204204
in-out property <SegmentFilterListItem> selected-filter;
205205
background: pink;
206206
}
207207

208208
component SegmentFilter inherits Rectangle {
209209
callback open-filters-selector(ty: VideoEditorTrackType);
210+
210211
private property <VideoEditorTrackSegment> segment: Logic.video-editor-selected-segment();
211212
private property <SegmentFilterListItem> selected-filter;
212213

@@ -243,14 +244,6 @@ component SegmentFilter inherits Rectangle {
243244
height: root.height - td.height - tab.height - rec.height;
244245
segment: root.segment;
245246

246-
// TODO:
247-
// init => {
248-
// self.selected-index = 0;
249-
// selected-filter = {
250-
// name: "brightness",
251-
// };
252-
// }
253-
254247
clicked(filter) => {
255248
selected-filter = filter;
256249
}
@@ -275,29 +268,142 @@ component SegmentFilter inherits Rectangle {
275268
if tab.checked-index == 0: FilterVideoDetail {
276269
y: 0;
277270
selected-filter: selected-filter;
271+
index: sl.selected-index;
278272
}
279273

280274
if tab.checked-index == 1: FilterAudioDetail {
281275
y: 0;
282276
selected-filter: selected-filter;
277+
index: sl.selected-index;
283278
}
284279

285280
if tab.checked-index == 2: FilterOverlayDetail {
286281
y: 0;
287282
selected-filter: selected-filter;
283+
index: sl.selected-index;
288284
}
289285

290286
if tab.checked-index == 3: FilterSubtitleDetail {
291287
y: 0;
292288
selected-filter: selected-filter;
289+
index: sl.selected-index;
290+
}
291+
}
292+
}
293+
294+
component FilterSelector inherits VerticalLayout {
295+
in-out property <[string]> filter-names;
296+
297+
callback clicked(name: string);
298+
callback back <=> back-icon.clicked;
299+
300+
spacing: Theme.spacing;
301+
302+
Rectangle {
303+
background: Theme.secondary-background;
304+
305+
HorizontalLayout {
306+
alignment: start;
307+
padding: Theme.padding * 2;
308+
309+
back-icon := IconBtn {
310+
icon: Icons.back-light;
311+
icon-size: Theme.icon-size * 0.9;
312+
}
313+
}
314+
}
315+
316+
ListView {
317+
for name[index] in filter-names: Rectangle {
318+
border-radius: Theme.border-radius;
319+
background: ta.has-hover ? Theme.thirdly-background : mod(index, 2) == 0 ? Theme.table-item-first : Theme.table-item-second;
320+
321+
ta := TouchArea {
322+
mouse-cursor: MouseCursor.pointer;
323+
324+
clicked => {
325+
root.clicked(name);
326+
}
327+
}
328+
329+
hbox := HorizontalLayout {
330+
spacing: Theme.spacing * 4;
331+
padding: Theme.padding * 2;
332+
alignment: start;
333+
334+
Label {
335+
text: index + 1;
336+
}
337+
338+
Label {
339+
text: name;
340+
overflow: elide;
341+
}
342+
}
293343
}
294344
}
295345
}
296346

297347
export component Filter inherits Rectangle {
348+
private property <VideoEditorTrackType> track-type;
349+
private property <bool> is-show-selector;
350+
298351
SegmentFilter {
299352
open-filters-selector(ty) => {
300-
// TODO:
353+
is-show-selector = true;
354+
track-type = ty;
355+
}
356+
}
357+
358+
if is-show-selector: Rectangle {
359+
background: Theme.base-background;
360+
if track-type == VideoEditorTrackType.Video: FilterSelector {
361+
filter-names: VEFilter.video-filters;
362+
363+
clicked(name) => {
364+
Logic.video-editor-segment-add-filter(track-type, name);
365+
is-show-selector = false;
366+
}
367+
368+
back => {
369+
is-show-selector = false;
370+
}
371+
}
372+
if track-type == VideoEditorTrackType.Audio: FilterSelector {
373+
filter-names: VEFilter.audio-filters;
374+
375+
clicked(name) => {
376+
Logic.video-editor-segment-add-filter(track-type, name);
377+
is-show-selector = false;
378+
}
379+
380+
back => {
381+
is-show-selector = false;
382+
}
383+
}
384+
if track-type == VideoEditorTrackType.Overlay: FilterSelector {
385+
filter-names: VEFilter.overlay-filters;
386+
387+
clicked(name) => {
388+
Logic.video-editor-segment-add-filter(track-type, name);
389+
is-show-selector = false;
390+
}
391+
392+
back => {
393+
is-show-selector = false;
394+
}
395+
}
396+
if track-type == VideoEditorTrackType.Subtitle: FilterSelector {
397+
filter-names: VEFilter.subtitle-filters;
398+
399+
clicked(name) => {
400+
Logic.video-editor-segment-add-filter(track-type, name);
401+
is-show-selector = false;
402+
}
403+
404+
back => {
405+
is-show-selector = false;
406+
}
301407
}
302408
}
303409
}

‎wayshot/ui/panel/desktop/video-editor/right-panel/filter/video.slint‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
import { AddressBookSetting } from "../../../../../base/address-book.slint";
3131

3232
component Brightness inherits Rectangle {
33+
in-out property <int> index: -1;
3334
in-out property <SegmentFilterListItem> selected-filter;
3435
in-out property <BrightnessDetail> config: VEFilter.from_brightness_json(selected-filter.detail);
3536

@@ -55,6 +56,11 @@ component Brightness inherits Rectangle {
5556
indicator-size: self.height * 3;
5657
value: config.adjustment;
5758
unfinished-progress-color: Theme.thirdly-background;
59+
60+
released(value) => {
61+
config.adjustment = value;
62+
VEFilter.modify-brightness-filter(index, config);
63+
}
5864
}
5965
}
6066

@@ -72,11 +78,13 @@ component Brightness inherits Rectangle {
7278
}
7379

7480
export component FilterVideoDetail inherits Rectangle {
81+
in-out property <int> index: -1;
7582
in-out property <SegmentFilterListItem> selected-filter;
7683

7784
border-radius: Theme.border-radius;
7885

7986
if selected-filter.name == "brightness": Brightness {
87+
index: index;
8088
width: parent.width;
8189
selected-filter: selected-filter;
8290
}

‎wayshot/ui/panel/desktop/video-editor/right-panel/right-panel.slint‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export component RightPanel inherits Rectangle {
1919

2020
VerticalLayout {
2121
padding-top: Theme.padding;
22-
padding-right: Theme.padding;
22+
padding-right: Theme.padding * 2;
2323
spacing: Theme.spacing;
2424

2525
if selected-index == 0: Filter {
@@ -32,7 +32,7 @@ export component RightPanel inherits Rectangle {
3232

3333
hbox := HorizontalLayout {
3434
alignment: LayoutAlignment.center;
35-
padding-right: Theme.padding;
35+
padding-right: Theme.padding * 2;
3636

3737
TabBtns {
3838
items: [

0 commit comments

Comments
 (0)