[*] share screen ui

Author: heng30

wayshot/src/config.rs

@@ -2,7 +2,7 @@ use crate::slint_generatedAppWindow::{
     Fps as UIFps, RTCIceServer as UIRTCIceServer, Resolution as UIResolution,
     SettingControl as UISettingControl, SettingCursorTracker as UISettingCursorTracker,
     SettingRecorder as UISettingRecorder, SettingShareScreen as UISettingShareScreen,
-    TransitionType as UITransitionType,
+    SettingShareScreenClient as UISettingShareScreenClient, TransitionType as UITransitionType,
 };
 use anyhow::{Context, Result, bail};
 use log::debug;
@@ -82,6 +82,9 @@ pub struct Config {
 
     #[serde(default)]
     pub share_screen: ShareScreen,
+
+    #[serde(default)]
+    pub share_screen_client: ShareScreenClient,
 }
 
 #[derive(Serialize, Deserialize, Debug, Clone, Derivative)]
@@ -198,8 +201,15 @@ pub struct CursorTracker {
     pub zoom_out_transition_type: UITransitionType,
 }
 
-#[derive(Serialize, Deserialize, Debug, Clone, Derivative, SlintFromConvert)]
-#[derivative(Default)]
+#[derive(Serialize, Deserialize, Debug, Clone, Default, SlintFromConvert)]
+#[from("UISettingShareScreenClient")]
+pub struct ShareScreenClient {
+    pub enable_auth: bool,
+    pub auth_token: String,
+    pub server_addr: String,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone, Default, SlintFromConvert)]
 #[from("UIRTCIceServer")]
 pub struct RTCIceServer {
     pub url: String,

wayshot/src/logic/setting.rs

@@ -115,6 +115,18 @@ pub fn init(ui: &AppWindow) {
         toast_success!(ui_weak.unwrap(), tr("save configuration successfully"));
     });
 
+    global_logic!(ui).on_get_setting_share_screen_client(move || {
+        let config = config::all().share_screen_client;
+        config.into()
+    });
+
+    let ui_weak = ui.as_weak();
+    global_logic!(ui).on_set_setting_share_screen_client(move |setting| {
+        let mut all = config::all();
+        all.share_screen_client = setting.into();
+        _ = config::save(all);
+    });
+
     global_logic!(ui).on_get_setting_share_screen(move || {
         let config = config::all().share_screen;
         config.into()

wayshot/src/logic/share_screen.rs

@@ -2,7 +2,10 @@ use crate::{
     config, global_store,
     logic::{toast, tr::tr},
     logic_cb,
-    slint_generatedAppWindow::{AppWindow, SettingShareScreen as UISettingShareScreen},
+    slint_generatedAppWindow::{
+        AppWindow, SettingShareScreen as UISettingShareScreen,
+        SettingShareScreenClient as UISettingShareScreenClient,
+    },
 };
 use recorder::{RTCIceServer, ShareScreenConfig};
 use slint::{ComponentHandle, Model, ModelRc, SharedString, VecModel, Weak};
@@ -18,26 +21,35 @@ macro_rules! host_ips {
 }
 
 pub fn init(ui: &AppWindow) {
-    logic_cb!(add_host_ip, ui, ips, ip);
-    logic_cb!(remove_host_ip, ui, ips, index);
-    logic_cb!(load_share_screen_cert_file, ui);
-    logic_cb!(load_share_screen_key_file, ui);
-    logic_cb!(verify_setting_share_screen, ui, setting);
+    // share screen server
+    logic_cb!(share_screen_add_host_ip, ui, ips, ip);
+    logic_cb!(share_screen_remove_host_ip, ui, ips, index);
+    logic_cb!(share_screen_load_cert_file, ui);
+    logic_cb!(share_screen_load_key_file, ui);
+    logic_cb!(share_screen_verify_setting, ui, setting);
+
+    // share screen client
+    logic_cb!(share_screen_player_play, ui);
+    logic_cb!(share_screen_player_stop, ui);
+    logic_cb!(share_screen_player_sound_changed, ui, progress);
+    logic_cb!(share_screen_client_disconnect, ui);
+    logic_cb!(share_screen_client_connect, ui, setting);
+    logic_cb!(convert_to_meida_time, ui, duration);
 }
 
-fn add_host_ip(_ui: &AppWindow, ips: ModelRc<SharedString>, ip: SharedString) {
+fn share_screen_add_host_ip(_ui: &AppWindow, ips: ModelRc<SharedString>, ip: SharedString) {
     host_ips!(ips).insert(0, ip);
 }
 
-fn remove_host_ip(_ui: &AppWindow, ips: ModelRc<SharedString>, index: i32) {
+fn share_screen_remove_host_ip(_ui: &AppWindow, ips: ModelRc<SharedString>, index: i32) {
     if index < 0 || index >= host_ips!(ips).row_count() as i32 {
         return;
     }
 
     host_ips!(ips).remove(index as usize);
 }
 
-fn load_share_screen_cert_file(ui: &AppWindow) {
+fn share_screen_load_cert_file(ui: &AppWindow) {
     let ui_weak = ui.as_weak();
 
     tokio::spawn(async move {
@@ -57,7 +69,7 @@ fn load_share_screen_cert_file(ui: &AppWindow) {
     });
 }
 
-fn load_share_screen_key_file(ui: &AppWindow) {
+fn share_screen_load_key_file(ui: &AppWindow) {
     let ui_weak = ui.as_weak();
 
     tokio::spawn(async move {
@@ -77,7 +89,7 @@ fn load_share_screen_key_file(ui: &AppWindow) {
     });
 }
 
-fn verify_setting_share_screen(_ui: &AppWindow, config: UISettingShareScreen) -> SharedString {
+fn share_screen_verify_setting(_ui: &AppWindow, config: UISettingShareScreen) -> SharedString {
     if config.enable_stun_server && !config.stun_server.url.starts_with("stun") {
         return tr("Invalid STUN server url format. Should start with `stun:`").into();
     }
@@ -89,6 +101,30 @@ fn verify_setting_share_screen(_ui: &AppWindow, config: UISettingShareScreen) ->
     SharedString::default()
 }
 
+fn share_screen_player_play(ui: &AppWindow) {
+    todo!()
+}
+
+fn share_screen_player_stop(ui: &AppWindow) {
+    todo!()
+}
+
+fn share_screen_player_sound_changed(ui: &AppWindow, progress: f32) {
+    todo!()
+}
+
+fn share_screen_client_disconnect(ui: &AppWindow) {
+    todo!()
+}
+
+fn share_screen_client_connect(ui: &AppWindow, setting: UISettingShareScreenClient) {
+    // todo!()
+}
+
+fn convert_to_meida_time(ui: &AppWindow, duration: i32) -> SharedString {
+    cutil::time::seconds_to_media_timestamp(duration.max(0) as f64).into()
+}
+
 pub fn picker_file(
     ui: Weak<AppWindow>,
     title: &str,

wayshot/ui/base/icon.slint

@@ -253,6 +253,7 @@ export global Icons {
     out property <image> ipv6-light: @image-url("../images/icons/ipv6-light.svg");
     out property <image> stun-light: @image-url("../images/icons/stun-light.svg");
     out property <image> video-recorder-light: @image-url("../images/icons/video-recorder-light.svg");
+    out property <image> share-screen-fill: @image-url("../images/icons/share-screen-fill.svg");
 
     out property <image> landing-account: @image-url("../images/landing/landing-account.svg");
     out property <image> landing-language-switch: @image-url("../images/landing/landing-language-switch.svg");

wayshot/ui/base/theme.slint

@@ -10,6 +10,7 @@ export global Theme {
     out property <length> spacing: padding;
     out property <length> scrollbar-size: padding * 2;
     out property <length> border-radius: padding;
+    out property <length> sidebar-width: header-height * 1.5;
     out property <length> header-height: Math.max(32px, icon-size + padding * 2);
     out property <length> footer-height: Math.max(40px, icon-size + default-font-size);
 

wayshot/ui/base/video-player.slint

@@ -18,11 +18,14 @@ export component VideoPlayer inherits Rectangle {
     in-out property <float> current-sound: 50;
     in-out property <float> current-speed: 1.0;
     in-out property <float> progress: 0;
+    in-out property <bool> show-time-label: true;
     in-out property <string> current-time: "0:00";
     in-out property <string> end-time: "4:00";
+    in-out property <string> time-label: root.current-time + " / " + root.end-time;
     in-out property <bool> show-controls: false;
     in-out property <length> control-height: Theme.icon-size * 3;
     in-out property <float> center-icon-opacity: Theme.golden-ratio;
+    in-out property <bool> show-progress-bar: true;
     in-out property <bool> show-prev-buttons: true;
     in-out property <bool> show-next-buttons: true;
     in-out property <bool> show-playlist-button: true;
@@ -83,6 +86,7 @@ export component VideoPlayer inherits Rectangle {
         key-pressed(event) => {
             if (event.text == Key.Escape) {
                 if (root.show-full-screen-btn && root.is-full-screen) {
+                    root.is-full-screen = !root.is-full-screen;
                     root.exit-full-screen();
                 }
             } else if (event.text == Key.Space) {
@@ -300,10 +304,11 @@ export component VideoPlayer inherits Rectangle {
             }
 
             progress-bar := Slider {
+                visible: root.show-progress-bar;
                 y: Theme.padding * 2;
                 x: Theme.padding * 2;
                 width: parent.width - Theme.padding * 4;
-                height: Theme.default-font-size * 0.33;
+                height: self.visible ? Theme.default-font-size * 0.33 : 0;
                 value: root.progress;
                 finished-progress-color: Theme.is-dark ? Theme.success-color.brighter(20%) : Theme.success-color;
                 unfinished-progress-color: Theme.light-text-color.darker(80%);
@@ -470,7 +475,7 @@ export component VideoPlayer inherits Rectangle {
                     }
 
                     Label {
-                        text: root.current-time + " / " + root.end-time;
+                        text: root.time-label;
                         color: Theme.light-text-color;
                         font-size: Theme.title4-font-size;
                         vertical-alignment: TextVerticalAlignment.center;

wayshot/ui/images/icons/share-screen-fill.svg

@@ -16,6 +16,7 @@ import {
     Resolution,
     HistoryEntry,
     ProcessMode,
+    SettingShareScreenClient,
 } from "store.slint";
 
 import { PlaylistItem } from "base/def.slint";
@@ -110,6 +111,9 @@ export global Logic {
     callback get-setting-share-screen() -> SettingShareScreen;
     callback set-setting-share-screen(setting: SettingShareScreen);
 
+    callback get-setting-share-screen-client() -> SettingShareScreenClient;
+    callback set-setting-share-screen-client(setting: SettingShareScreenClient);
+
     callback init-sources-dialog();
     callback choose-save-dir();
     callback update-sources(setting: SettingControl);
@@ -151,11 +155,21 @@ export global Logic {
         return -1;
     }
 
-    callback add-host-ip(host-ips: [string], ip: string);
-    callback remove-host-ip(host-ips: [string], index: int);
-    callback load-share-screen-cert-file();
-    callback load-share-screen-key-file();
-    callback verify-setting-share-screen(setting: SettingShareScreen) -> string;
+    // share screen server
+    callback share-screen-add-host-ip(host-ips: [string], ip: string);
+    callback share-screen-remove-host-ip(host-ips: [string], index: int);
+    callback share-screen-load-cert-file();
+    callback share-screen-load-key-file();
+    callback share-screen-verify-setting(setting: SettingShareScreen) -> string;
+
+    // share screen client
+    callback share-screen-player-play();
+    callback share-screen-player-stop();
+    callback share-screen-player-sound-changed(progress: float);
+    callback share-screen-client-disconnect();
+    callback share-screen-client-connect(setting: SettingShareScreenClient);
+
+    pure callback convert-to-meida-time(duration: int) -> string;
 
     pure public function fps-to-int(fps: Fps) -> int {
         if (fps == Fps.Fps24) {

wayshot/ui/logic.slint

@@ -17,6 +17,7 @@ import {
     SettingShareScreen,
     SettingPlayer,
     FeatureType,
+    SettingShareScreenClient,
 } from "../store.slint";
 
-export { Theme, Logic, Store, Util, Icons, TabIndex, PopupIndex, SettingPreference, SettingBackup, SettingDetailIndex, MobileSettingDetailIndex, DeviceType, MobileTabIndex, SettingRecorder, SettingCursorTracker, TransitionType, SettingPlayer, FeatureType, SettingShareScreen }
+export { Theme, Logic, Store, Util, Icons, TabIndex, PopupIndex, SettingPreference, SettingBackup, SettingDetailIndex, MobileSettingDetailIndex, DeviceType, MobileTabIndex, SettingRecorder, SettingCursorTracker, TransitionType, SettingPlayer, FeatureType, SettingShareScreen, SettingShareScreenClient }