[*] refactor: video-editor

Author: heng30

lib/video-editor/src/media/playlist.rs

@@ -195,9 +195,14 @@ impl Playlist {
 
         let item_name = name.unwrap_or_else(|| {
             file_path
-                .file_stem()
+                .file_name()
                 .and_then(|s| s.to_str())
-                .unwrap_or("Unknown")
+                .unwrap_or_else(|| {
+                    file_path
+                        .file_stem()
+                        .and_then(|s| s.to_str())
+                        .unwrap_or("Unknown")
+                })
                 .to_string()
         });
 

todo.md

@@ -1,11 +1,5 @@
-1. 创建项目预览配置应该使用下拉图标，而不是switch
-2. 预览视频下应该添加也给全局定位时间轴，方便快速跳转时间轴
-3. playlist/library列表应该保留文件扩展名
-4. playlist/library图标太小, 鼠标放到图片上应该使用tooltip显示文件名。右键应该弹出是否删除或添加到轨道的选项
+## 问题
 5. 点击跳转到最后按钮没有刷新预览图片
-6. 轨道头再次点击无法取消选中
-7. segment再次点击也无法取消选中
-8. segment没有任何filter的时候应该显示空图片，表示没有任何filter
 9. 左右声道db显示没有实现
 10. 视频轨道声音波形没有实现
 11. `Timeline cursor must be within the segment` 错误。
@@ -14,10 +8,20 @@
 14. 将视频添加到轨道时会自动解码这个视频的音频。阻塞UI线程
 15. 轨道声音波形不对，幅度很小
 16. 没有轨道操作都会解码音视频数据。造成UI严重卡顿
-17. 点击segment，选中的segment不会在界面上改变
-18. 关闭时，playlist和preview没有清除
 19. 打开项目会解码整个视频文件。
+20. 视频已经暂停了，但是点击时间轴跳转的时候，会播放1秒左右的音频
+
+21. 保存项目的目录有问题，选中的是/home/blue，会保存到/home目录下
+
+## 待验证
+18. 关闭时，playlist和preview没有清除
+6. 轨道头UI没有toggle选中和没选中状态
+6. 轨道头再次点击无法取消选中
+17. 点击segment，选中的segment不会在界面上改变(有问题)
+
+
 
 
 ## 待实现功能
 1. 没有定时自动保存功能
+2. 预览视频下应该添加也给全局定位时间轴，方便快速跳转时间轴

wayshot/src/logic/video_editor/project.rs

@@ -24,7 +24,7 @@ use video_editor::{
     tracks::manager::Manager,
 };
 
-pub const PROJECT_EXT: &str = "swp";
+pub const PROJECT_EXT: &str = "wayshot";
 pub const RECENT_ID: &str = "video_editor_recent";
 pub const UI_STATE_ID: &str = "video_editor_ui_state";
 pub const LIBRARY_ID: &str = "video_editor_library";
@@ -389,7 +389,11 @@ fn video_editor_close_project_with_save(ui: &AppWindow) {
 
 fn video_editor_close_project_without_save(ui: &AppWindow) {
     global_store!(ui).set_video_editor_tracks_manager(UIVideoEditorTracksManager::default());
+    global_store!(ui).set_video_editor_preview_image(slint::Image::default());
     global_store!(ui).set_video_editor_is_unsaved(false);
+    global_store!(ui).set_video_editor_is_previewing(false);
+    global_store!(ui).set_video_editor_timeline_offset(0);
+    store_video_editor_playlist!(ui).set_vec(vec![]);
     *PROJECT_STATE.lock().unwrap() = Some(ProjectState::default());
 }
 

wayshot/src/logic/video_editor/segment.rs

@@ -68,6 +68,7 @@ pub fn init(ui: &AppWindow) {
         ui,
         selected_segment,
         index
+        _flag,
     );
     logic_cb!(video_editor_selected_segment, ui);
     logic_cb!(video_editor_remove_segments, ui);
@@ -92,9 +93,7 @@ fn video_editor_add_selected_segment(ui: &AppWindow, index: UISelectedSegmentInd
             selected_indices.push(index.clone());
         }
     } else if index.modifiers.shift {
-        // Range selection (from last selected to current)
         if let Some(last) = selected_indices.last() {
-            // Range selection within the same track
             if last.track_index == index.track_index {
                 let start = last.index.min(index.index);
                 let end = last.index.max(index.index);
@@ -117,8 +116,12 @@ fn video_editor_add_selected_segment(ui: &AppWindow, index: UISelectedSegmentInd
             selected_indices.push(index.clone());
         }
     } else {
-        selected_indices.clear();
-        selected_indices.push(index.clone());
+        if is_selected && selected_indices.len() == 1 {
+            selected_indices.clear();
+        } else {
+            selected_indices.clear();
+            selected_indices.push(index.clone());
+        }
     }
 
     store_video_editor_selected_segments_index!(ui).set_vec(selected_indices);
@@ -176,6 +179,7 @@ fn video_editor_is_selected_segment(
     _ui: &AppWindow,
     selected_segment: ModelRc<UISelectedSegmentIndex>,
     index: UISelectedSegmentIndex,
+    _flag: bool,
 ) -> bool {
     selected_segment
         .iter()

wayshot/src/logic/video_editor/track.rs

@@ -56,7 +56,13 @@ pub fn init(ui: &AppWindow) {
     logic_cb!(video_editor_is_overlay_track, ui, index);
     logic_cb!(video_editor_contain_audio_track, ui, index);
     logic_cb!(video_editor_contain_subtitle_track, ui, index);
-    logic_cb!(video_editor_is_selected_track, ui, selected_tracks, index);
+    logic_cb!(
+        video_editor_is_selected_track,
+        ui,
+        selected_tracks,
+        index,
+        _flag
+    );
 }
 
 fn video_editor_add_track(ui: &AppWindow, ty: VideoEditorTrackType) {
@@ -428,8 +434,12 @@ fn video_editor_add_selected_track(ui: &AppWindow, index: SelectedTrackIndex) {
             selected_indices.push(index.clone());
         }
     } else {
-        selected_indices.clear();
-        selected_indices.push(index.clone());
+        if is_selected && selected_indices.len() == 1 {
+            selected_indices.clear();
+        } else {
+            selected_indices.clear();
+            selected_indices.push(index.clone());
+        }
     }
 
     store_video_editor_selected_tracks_index!(ui).set_vec(selected_indices);
@@ -523,6 +533,7 @@ fn video_editor_is_selected_track(
     _ui: &AppWindow,
     selected_tracks: ModelRc<SelectedTrackIndex>,
     index: i32,
+    _flag: bool,
 ) -> bool {
     let count = selected_tracks.row_count();
     for i in 0..count {

wayshot/ui/base/collapse.slint

@@ -105,3 +105,74 @@ export component Collapse inherits Rectangle {
         }
     }
 }
+
+export component SingleCollapse inherits Rectangle {
+    in-out property <string> title;
+    in-out property <bool> is-open;
+    in-out property <image> title-icon;
+
+    in-out property <color> title-color: Theme.primary-text-color;
+    in-out property <length> title-font-size: Theme.title3-font-size;
+    in-out property <int> title-font-weight: Theme.bold-font-weight;
+
+    in-out property <image> open-icon: Icons.arrow-down-light;
+    in-out property <image> close-icon: Icons.arrow-up-light;
+
+    in-out property <length> spacing: Theme.spacing * 2;
+    in-out property <length> hpadding: Theme.padding * 2;
+    in-out property <length> vpadding: Theme.padding * 2;
+
+    callback toggle(state: bool);
+
+    background: Theme.secondary-background;
+    border-radius: Theme.border-radius;
+
+    TouchArea {
+        clicked => {
+            root.is-open = !root.is-open;
+            toggle(root.is-open);
+        }
+    }
+
+    HorizontalLayout {
+        alignment: LayoutAlignment.space-between;
+        spacing: Theme.spacing * 2;
+        padding-left: root.hpadding;
+        padding-right: root.hpadding;
+        padding-top: root.vpadding;
+        padding-bottom: root.vpadding;
+
+        HorizontalLayout {
+            spacing: root.spacing;
+
+            if root.title-icon.width > 0: VerticalLayout {
+                alignment: LayoutAlignment.center;
+
+                Image {
+                    width: Theme.icon-size;
+                    height: self.width;
+                    colorize: Theme.icon-color;
+                    source: root.title-icon;
+                }
+            }
+
+            lb := Label {
+                overflow: elide;
+                text: root.title;
+                font-size: root.title-font-size;
+                color: root.title-color;
+                font-weight: root.title-font-weight;
+            }
+        }
+
+        VerticalLayout {
+            alignment: LayoutAlignment.center;
+            Image {
+                width: Theme.icon-size;
+                height: self.width;
+                colorize: Theme.icon-color;
+                source: root.is-open ? root.close-icon : root.open-icon;
+            }
+        }
+    }
+}

wayshot/ui/base/widgets.slint

@@ -109,7 +109,7 @@ import { PinCodesCount, PinCodes } from "pin-codes.slint";
 import { Badge } from "badge.slint";
 import { Select } from "select.slint";
 import { Slider } from "slider.slint";
-import { Collapse, CollapseEntry } from "collapse.slint";
+import { Collapse, CollapseEntry, SingleCollapse } from "collapse.slint";
 import { Stretch } from "stretch.slint";
 import { Search } from "search.slint";
 import {
@@ -256,6 +256,7 @@ export {
     Select,
     Slider,
     Collapse,
+    SingleCollapse,
     CollapseEntry,
     Search,
     PopupAction,

wayshot/ui/logic.slint

@@ -300,7 +300,7 @@ export global Logic {
     pure callback video-editor-is-overlay-track(index: int) -> bool;
     pure callback video-editor-contain-audio-track(index: int) -> bool;
     pure callback video-editor-contain-subtitle-track(index: int) -> bool;
-    pure callback video-editor-is-selected-track(selected-tracks: [SelectedTrackIndex], index: int) -> bool;
+    pure callback video-editor-is-selected-track(selected-tracks: [SelectedTrackIndex], index: int, _falg: bool) -> bool;
 
     callback video-editor-remove-segments();
     callback video-editor-split-segment();
@@ -317,7 +317,7 @@ export global Logic {
     callback video-editor-segment-remove-gap(index: SelectedSegmentIndex);
     callback video-editor-segment-remove-left-gap(index: SelectedSegmentIndex);
     callback video-editor-segment-remove-right-gap(index: SelectedSegmentIndex);
-    pure callback video-editor-is-selected-segment(selected-segment: [SelectedSegmentIndex], index: SelectedSegmentIndex) -> bool;
+    pure callback video-editor-is-selected-segment(selected-segment: [SelectedSegmentIndex], index: SelectedSegmentIndex, _flag: bool) -> bool;
     pure callback video-editor-selected-segment() -> VideoEditorTrackSegment; // 获取当前选中的segment
 
     callback video-editor-playlist-item-add-to-track(index: int);

wayshot/ui/panel/desktop/video-editor/left-panel/playlist.slint

@@ -118,7 +118,7 @@ component DetailItem inherits Rectangle {
     }
 
     hbox := HorizontalLayout {
-        spacing: Theme.spacing * 8;
+        spacing: Theme.spacing * 4;
         padding: Theme.padding * 2;
         alignment: space-between;
 
@@ -141,19 +141,20 @@ component DetailItem inherits Rectangle {
                 }
             }
 
-            HorizontalLayout {
-                padding-left: Theme.padding * 4;
-                Label {
-                    text: playlist-item.name;
-                    overflow: elide;
-                }
+            Label {
+                text: playlist-item.name;
+                overflow: elide;
             }
         }
 
         HorizontalLayout {
             alignment: end;
             spacing: Theme.spacing * 4;
 
+            Label {
+                text: playlist-item.duration;
+            }
+
             Label {
                 text: playlist-item.file-size;
             }
@@ -196,6 +197,7 @@ component ThumbnailItem inherits Rectangle {
     in property <VideoEditorPlaylistItem> playlist-item;
 
     callback double-clicked <=> ta.double-clicked;
+    callback right-clicked(absolute-x: length, absolute-y: length);
 
     public pure function get-media-icon(ty: MediaType) -> image {
         if (ty == MediaType.Video) {
@@ -213,6 +215,12 @@ component ThumbnailItem inherits Rectangle {
 
     ta := TouchArea {
         mouse-cursor: MouseCursor.pointer;
+
+        pointer-event(event) => {
+            if (event.button == PointerEventButton.right) {
+                root.right-clicked(self.absolute-position.x, self.absolute-position.y + self.preferred-height);
+            }
+        }
     }
 
     rec := Rectangle {
@@ -229,7 +237,7 @@ component ThumbnailItem inherits Rectangle {
                 alignment: center;
 
                 Image {
-                    width: rec.width * Theme.golden-ratio;
+                    width: rec.width * 0.8;
                     source: playlist-item.thumbnail;
                 }
             }
@@ -258,12 +266,13 @@ component ThumbnailItem inherits Rectangle {
 export component ThumbnailView inherits ListView {
     in-out property <[VideoEditorPlaylistItem]> playlist;
 
-    private property <length> thumbnail-size: Theme.icon-size * 5;
+    private property <length> thumbnail-size: Theme.icon-size * 6;
     private property <int> column-count: clamp(root.width / (thumbnail-size + Theme.spacing), 1, 20);
 
     private property <int> row-count: playlist.length == 0 ? 0 : (mod(playlist.length, column-count) == 0 ? playlist.length / column-count : playlist.length / column-count + 1);
 
     callback double-clicked(index: int);
+    callback right-clicked(index: int, absolute-x: length, absolute-y: length);
 
     for row-index in row-count: HorizontalLayout {
         alignment: space-around;
@@ -277,6 +286,10 @@ export component ThumbnailView inherits ListView {
             double-clicked => {
                 root.double-clicked(self.index);
             }
+
+            right-clicked(absolute-x, absolute-y) => {
+                root.right-clicked(self.index, absolute-x, absolute-y);
+            }
         }
     }
 }
@@ -333,6 +346,23 @@ export component Playlist inherits Rectangle {
                 width: root.width;
                 playlist <=> root.playlist;
 
+                right-clicked(index, absolute-x, absolute-y) => {
+                    PopupActionSetting.show(absolute-x, absolute-y + self.preferred-height, [
+                        {
+                            icon: Icons.add-light,
+                            text: Logic.tr("Add To Track"),
+                            action: "video-editor-playlist-item-add-to-track",
+                            user-data: index,
+                        },
+                        {
+                            icon: Icons.clear-light,
+                            text: Logic.tr("Remove"),
+                            action: "video-editor-playlist-item-remove",
+                            user-data: index,
+                        },
+                    ]);
+                }
+
                 double-clicked(index) => {
                     Logic.video-editor-playlist-item-add-to-track(index);
                 }