[*] add video editor ui

Author: heng30

wayshot/ui/base/playhead.slint

@@ -0,0 +1,53 @@
+import { Theme } from "theme.slint";
+import { Util } from "util.slint";
+
+export component Playhead inherits Rectangle {
+    out property pressed <=> ta.pressed;
+    out property mouse-x <=> ta.mouse-x;
+    out property mouse-y <=> ta.mouse-y;
+    out property pressed-x <=> ta.pressed-x;
+    out property pressed-y <=> ta.pressed-y;
+    in-out property line-color <=> line.background;
+
+    in-out property <length> handle-width: Theme.default-font-size;
+    in-out property <length> handle-height: Theme.default-font-size * Theme.golden-ratio;
+    in-out property <length> line-width: Theme.default-border-width * 2;
+
+    callback moved <=> ta.moved;
+    callback clicked <=> ta.clicked;
+
+    width: handle-width;
+
+    ta := TouchArea {
+        mouse-cursor: MouseCursor.pointer;
+    }
+
+    Path {
+        y: -1px;
+        width: handle-width;
+        height: handle-height;
+        fill: line.background;
+
+        MoveTo {
+            x: 0;
+            y: 0;
+        }
+
+        LineTo {
+            x: handle-width / line.width;
+            y: handle-height / 1px;
+        }
+
+        LineTo {
+            x: handle-width / 1px;
+            y: 0;
+        }
+
+        Close { }
+    }
+
+    line := Rectangle {
+        background: Theme.thirdly-brand-color;
+        width: line-width;
+    }
+}

wayshot/ui/base/widgets.slint

@@ -141,6 +141,7 @@ import { AudioLevel } from "audio-level.slint";
 import { GentleBackground } from "gentle-backgound.slint";
 import { SoundWaveForm } from "sound-wave-form.slint";
 import { MovingDivider } from "moving-divider.slint";
+import { Playhead } from "playhead.slint";
 
 export {
     AppPosType,
@@ -291,4 +292,5 @@ export {
     GentleBackground,
     SoundWaveForm,
     MovingDivider,
+    Playhead,
 }

wayshot/ui/logic.slint

@@ -275,14 +275,19 @@ export global Logic {
     callback video-editor-toggle-locked-track(index: int);
     callback video-editor-toggle-hiding-track(index: int);
     callback video-editor-toggle-muted-track(index: int);
-    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: [int], index: int) -> bool;
     callback video-editor-detach-audio-track(index: int);
     callback video-editor-detach-subtitle-track(index: int);
     callback video-editor-add-selected-track(index: int);
     callback video-editor-select-all-tracks();
 
+    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: [int], index: int) -> bool;
+    pure callback video-editor-calc-timeline-offset(index: int, total-index: int) -> string;
+    video-editor-calc-timeline-offset(index, total-index) => {
+        return "00:00:00";
+    }
+
     pure public function fps-to-int(fps: Fps) -> int {
         if (fps == Fps.Fps24) {
             return 24;

wayshot/ui/panel/desktop/video-editor/tracks/timeline.slint

@@ -13,10 +13,14 @@ import {
 
 export component Timeline inherits Rectangle {
     in property <length> header-width;
+    in property <length> timeline-width;
+    out property pressed-x <=> ta.pressed-x;
     in-out property viewport-x <=> flick.viewport-x;
     in-out property viewport-width <=> flick.viewport-width;
     private property <length> label-width: Theme.default-font-size * 6;
 
+    callback clicked <=> ta.clicked;
+
     height: Theme.icon-size * 1.3;
     background: Theme.table-item-second;
 
@@ -26,7 +30,7 @@ export component Timeline inherits Rectangle {
             width: max(header-width, ouput-lb.preferred-width);
 
             ouput-lb := Label {
-                text: Logic.tr("Track");
+                text: Logic.tr("Tracks");
             }
 
             TouchArea {
@@ -37,8 +41,12 @@ export component Timeline inherits Rectangle {
         }
 
         flick := Flickable {
+            interactive: false;
+
             HorizontalLayout {
-                for index in root.width / label-width: HorizontalLayout {
+                private property <int> total-index: root.timeline-width / label-width;
+
+                for index in total-index: HorizontalLayout {
                     spacing: Theme.spacing;
 
                     VerticalLayout {
@@ -53,12 +61,14 @@ export component Timeline inherits Rectangle {
                     }
 
                     Label {
-                        text: "00:00:00";
+                        text: Logic.video-editor-calc-timeline-offset(index, total-index);
                         font-size: Theme.default-font-size * 0.8;
                         color: Theme.regular-text-color;
                     }
                 }
             }
+
+            ta := TouchArea { }
         }
     }
 }

wayshot/ui/panel/desktop/video-editor/tracks/tracks.slint

@@ -1,4 +1,4 @@
-import { ListView } from "std-widgets.slint";
+import { ListView, StyleMetrics } from "std-widgets.slint";
 import {
     Theme,
     Store,
@@ -14,6 +14,7 @@ import {
 import {
     Divider,
     IconBtn,
+    Playhead,
     PopupActionEntry,
     PopupActionSetting,
     ClickAndEditLabel,
@@ -58,7 +59,7 @@ component TrackSegment inherits Rectangle {
             index: index;
             segment: segment;
 
-            width: 500px;
+            width: 5000px;
             background: green;
         }
     }
@@ -127,9 +128,15 @@ export component Tracks inherits Rectangle {
             spacing: Theme.spacing;
 
             timeline := Timeline {
-                header-width: tl.track-header-width;
-                viewport-width: tl.viewport-width;
                 viewport-x: tl.viewport-x;
+                viewport-width: tl.viewport-width;
+                header-width: tl.track-header-width;
+                timeline-width: tl.viewport-width;
+
+                clicked => {
+                    let offset-x = self.pressed-x - abs(self.viewport-x);
+                    playhead.x = clamp(playhead.start-x + offset-x, playhead.start-x, playhead.end-x);
+                }
             }
 
             tl := TracksList { }
@@ -143,4 +150,18 @@ export component Tracks inherits Rectangle {
         height: tlvbox.height;
         background: Theme.regular-text-color;
     }
+
+    playhead := Playhead {
+        x: tlvbox.x + tl.track-header-width - self.width / 2;
+        y: timeline.y + timeline.height + self.handle-height;
+        height: tlvbox.height;
+
+        out property <length> start-x: tlvbox.x + tl.track-header-width - self.width / 2;
+        out property <length> end-x: root.width - self.handle-width / 2;
+
+        moved => {
+            let offset-x = self.mouse-x - self.pressed-x;
+            self.x = clamp(self.x + offset-x, start-x, end-x);
+        }
+    }
 }