Skip to content

Commit 0078d01

Browse files
heng30heng30
committed
[*] refactor: video-editor
1 parent df761f9 commit 0078d01

File tree

8 files changed

+188
-19
lines changed

8 files changed

+188
-19
lines changed

‎wayshot/ui/base/icon.slint‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,8 @@ export global Icons {
315315
out property <image> thumbnails-light: @image-url("../images/icons/thumbnails-light.svg");
316316
out property <image> import2-light: @image-url("../images/icons/import2-light.svg");
317317
out property <image> preset-light: @image-url("../images/icons/preset-light.svg");
318+
out property <image> locate-light: @image-url("../images/icons/locate-light.svg");
319+
out property <image> update-light: @image-url("../images/icons/update-light.svg");
318320

319321
out property <image> landing-account: @image-url("../images/landing/landing-account.svg");
320322
out property <image> landing-language-switch: @image-url("../images/landing/landing-language-switch.svg");

‎wayshot/ui/images/icons/locate-light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎wayshot/ui/images/icons/update-light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎wayshot/ui/logic.slint‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
VideoEditorExportVideoConfig,
3131
VideoEditorExportAudioConfig,
3232
VideoEditorTrackSegment,
33+
VideoEditorSubtitle,
3334
} from "store.slint";
3435

3536
import { Theme } from "base/theme.slint";
@@ -194,6 +195,9 @@ export global Logic {
194195

195196
pure callback is-valid-subtitle-timestamp(timestamp: string) -> bool;
196197
pure callback ms-to-srt-timestamp-ui(ms: float) -> string;
198+
ms-to-srt-timestamp-ui(ms) => {
199+
return ms;
200+
}
197201

198202
callback transcribe-init();
199203
callback transcribe-new();
@@ -315,6 +319,9 @@ export global Logic {
315319
callback video-editor-export-queue-cancel(index: int);
316320
callback video-editor-export-queue-remove(index: int);
317321

322+
callback video-editor-add-subtitle(subtitle: VideoEditorSubtitle);
323+
callback video-editor-update-subtitle(subtitle: VideoEditorSubtitle);
324+
318325
pure callback video-editor-selected-segment() -> VideoEditorTrackSegment;
319326
video-editor-selected-segment => {
320327
return Store.video-editor-tracks-manager.tracks[0].segments[0];

‎wayshot/ui/panel/def.slint‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import {
4646
VideoEditorExportQueueItem,
4747
VideoEditorExportVideoConfig,
4848
VideoEditorExportAudioConfig,
49+
VideoEditorSubtitle,
4950
} from "../store.slint";
5051

51-
export { Theme, Logic, Store, Util, Icons, TabIndex, PopupIndex, SettingPreference, SettingBackup, SettingDetailIndex, MobileSettingDetailIndex, DeviceType, MobileTabIndex, SettingRecorder, SettingCursorTracker, TransitionType, SettingPlayer, FeatureType, SettingShareScreen, SettingShareScreenClient, ConnectionStatus, SettingPushStream, SettingCamera, MixPositionWithPadding, MixPositionWithPaddingTag, RealtimeImageEffect, BackgroundRemoverModel, Downloader, DownloaderState, Transcribe, TranscribeProgressType, FileType, Subtitle, SettingTranscribe, SettingAiModel, VideoEditorTrackType, VideoEditorFilter, VideoEditorTrackSegment, VideoEditorTrack, VideoEditorTracksManager, SelectedTrackIndex, SelectedSegmentIndex, VideoEditorPlaylistItem, MediaType, VideoEditorExportQueueItem, VideoEditorExportVideoConfig, VideoEditorExportAudioConfig, SubtitleType }
52+
export { Theme, Logic, Store, Util, Icons, TabIndex, PopupIndex, SettingPreference, SettingBackup, SettingDetailIndex, MobileSettingDetailIndex, DeviceType, MobileTabIndex, SettingRecorder, SettingCursorTracker, TransitionType, SettingPlayer, FeatureType, SettingShareScreen, SettingShareScreenClient, ConnectionStatus, SettingPushStream, SettingCamera, MixPositionWithPadding, MixPositionWithPaddingTag, RealtimeImageEffect, BackgroundRemoverModel, Downloader, DownloaderState, Transcribe, TranscribeProgressType, FileType, Subtitle, SettingTranscribe, SettingAiModel, VideoEditorTrackType, VideoEditorFilter, VideoEditorTrackSegment, VideoEditorTrack, VideoEditorTracksManager, SelectedTrackIndex, SelectedSegmentIndex, VideoEditorPlaylistItem, MediaType, VideoEditorExportQueueItem, VideoEditorExportVideoConfig, VideoEditorExportAudioConfig, SubtitleType, VideoEditorSubtitle, }

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ component SegmentFilterList inherits Rectangle {
154154

155155
clicked => {
156156
VEFilter.create-preset-filter(self.text);
157+
preset-mode = false;
157158
}
158159

159160
accepted => {

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

Lines changed: 167 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,174 @@ import {
44
Logic,
55
Util,
66
Icons,
7+
VideoEditorSubtitle,
78
} from "../../../def.slint";
8-
// import {
9-
// Divider,
10-
// ToolTip,
11-
// PopupAction,
12-
// PopupActionSetting,
13-
// IconBtn,
14-
// ToastStatus,
15-
// FilePicker,
16-
// Banner,
17-
// Label,
18-
// Link,
19-
// TextBtn,
20-
// Blanket,
21-
// ReplaceDialog,
22-
// SimpleAudioControl,
23-
// ConfirmDialogSetting,
24-
// } from "../../../base/widgets.slint";
9+
import {
10+
Label,
11+
ClickAndEditLabel,
12+
IconBtn,
13+
LineInput,
14+
TxtEdit,
15+
ConfirmBtn,
16+
TextBtnWithoutIcon,
17+
} from "../../../../base/widgets.slint";
18+
19+
component Header inherits Rectangle {
20+
in-out property <int> checked-index;
21+
22+
background: Theme.thirdly-background;
23+
width: hbox.preferred-width + Theme.padding * 8;
24+
height: hbox.preferred-height + Theme.padding * 2;
25+
border-radius: self.height / 2;
26+
border-width: Theme.default-border-width;
27+
border-color: Theme.base-border-color;
28+
29+
hbox := HorizontalLayout {
30+
x: Theme.padding * 4;
31+
y: Theme.padding;
32+
spacing: Theme.spacing * 4;
33+
34+
TextBtnWithoutIcon {
35+
text: Logic.tr("New");
36+
border-radius: self.height / 3;
37+
text-color: checked-index == 0 ? Theme.light-text-color : Theme.regular-text-color;
38+
background: checked-index == 0 ? Theme.thirdly-brand-color : transparent;
39+
40+
clicked => {
41+
checked-index = 0;
42+
}
43+
}
44+
45+
TextBtnWithoutIcon {
46+
text: Logic.tr("Modify");
47+
border-radius: self.height / 3;
48+
text-color: checked-index == 1 ? Theme.light-text-color : Theme.regular-text-color;
49+
background: checked-index == 1 ? Theme.thirdly-brand-color : transparent;
50+
51+
clicked => {
52+
checked-index = 1;
53+
}
54+
}
55+
}
56+
}
57+
58+
component SubtitleBody inherits Flickable {
59+
in-out property <int> checked-index;
60+
private property edited-subtitle <=> Store.video-editor-current-edited-subtitle;
61+
62+
VerticalLayout {
63+
spacing: Theme.spacing * 2;
64+
65+
VerticalLayout {
66+
alignment: start;
67+
padding: Theme.padding * 2;
68+
spacing: Theme.spacing * 4;
69+
70+
HorizontalLayout {
71+
alignment: space-between;
72+
spacing: Theme.spacing * 2;
73+
74+
HorizontalLayout {
75+
spacing: Theme.spacing * 4;
76+
77+
Label {
78+
width: self.font-size * 3;
79+
text: Logic.tr("Start") + ": ";
80+
}
81+
82+
start-lb := Label {
83+
text: checked-index == 0 ? Logic.ms-to-srt-timestamp-ui(Store.video-editor-timeline-offset) : edited-subtitle.start-timestamp;
84+
}
85+
}
86+
87+
IconBtn {
88+
icon: Icons.locate-to-light;
89+
is-show-tip: true;
90+
tip: Logic.tr("use timeline timestamp");
91+
92+
clicked => {
93+
start-lb.text = Logic.ms-to-srt-timestamp-ui(Store.video-editor-timeline-offset);
94+
}
95+
}
96+
}
97+
98+
HorizontalLayout {
99+
alignment: space-between;
100+
spacing: Theme.spacing * 2;
101+
102+
HorizontalLayout {
103+
spacing: Theme.spacing * 4;
104+
105+
Label {
106+
width: self.font-size * 3;
107+
text: Logic.tr("End") + ": ";
108+
}
109+
110+
end-lb := Label {
111+
text: checked-index == 0 ? Logic.ms-to-srt-timestamp-ui(Store.video-editor-timeline-offset) : edited-subtitle.end-timestamp;
112+
}
113+
}
114+
115+
IconBtn {
116+
icon: Icons.locate-to-light;
117+
is-show-tip: true;
118+
tip: Logic.tr("use timeline timestamp");
119+
120+
clicked => {
121+
end-lb.text = Logic.ms-to-srt-timestamp-ui(Store.video-editor-timeline-offset);
122+
}
123+
}
124+
}
125+
}
126+
127+
te := TxtEdit {
128+
placeholder: Logic.tr("Input subtitle");
129+
text: checked-index == 0 ? "" : edited-subtitle.subtitle;
130+
}
131+
132+
HorizontalLayout {
133+
ConfirmBtn {
134+
text: checked-index == 0 ? Logic.tr("Add Subtitle") : Logic.tr("Update Subtitle");
135+
icon: checked-index == 0 ? Icons.add2-light : Icons.update-light;
136+
bg-color: checked-index == 0 ? Theme.success-color : Theme.thirdly-brand-color;
137+
icon-size: checked-index == 0 ? Theme.icon-size : Theme.icon-size * 0.8;
138+
139+
clicked => {
140+
if (checked-index == 0) {
141+
Logic.video-editor-add-subtitle({
142+
start-timestamp: start-lb.text,
143+
end-timestamp: end-lb.text,
144+
subtitle: te.text,
145+
});
146+
} else {
147+
Logic.video-editor-update-subtitle({
148+
start-timestamp: start-lb.text,
149+
end-timestamp: end-lb.text,
150+
subtitle: te.text,
151+
});
152+
}
153+
}
154+
}
155+
}
156+
}
157+
}
25158

26159
export component Subtitle inherits Rectangle {
27-
background: red;
160+
in-out property <int> checked-index: 0;
161+
162+
VerticalLayout {
163+
spacing: Theme.spacing * 2;
164+
165+
HorizontalLayout {
166+
alignment: center;
167+
168+
Header {
169+
checked-index <=> checked-index;
170+
}
171+
}
172+
173+
SubtitleBody {
174+
checked-index <=> checked-index;
175+
}
176+
}
28177
}

‎wayshot/ui/store.slint‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -483,6 +483,12 @@ export enum SubtitleType{
483483
Ass,
484484
}
485485

486+
export struct VideoEditorSubtitle {
487+
start-timestamp: string,
488+
end-timestamp: string,
489+
subtitle: string,
490+
}
491+
486492
//////////////////////////////// Logic Struct End ////////////////////////////////
487493

488494
import { PlaylistItem } from "base/def.slint";
@@ -602,6 +608,7 @@ export global Store {
602608
in-out property <KeyboardModifiers> video-editor-keyboard-modifiers;
603609
in-out property <bool> video-editor-is-previewing: false;
604610
in-out property <int> video-editor-timeline-offset; // floor(mod(animation-tick(), 10s) / 10s * 100000);
611+
in-out property <VideoEditorSubtitle> video-editor-current-edited-subtitle;
605612

606613
in-out property <VideoEditorPreviewConfig> video-editor-preview-config: {
607614
width: 1920,

0 commit comments

Comments
 (0)
⚡