Allow zoom (#162)

apps/desktop/package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",

apps/desktop/src-tauri/gen/schemas/capabilities.json

@@ -1,33 +1 @@
-{
-  "desktop-capability": {
-    "identifier": "desktop-capability",
-    "description": "",
-    "local": true,
-    "windows": ["main", "settings"],
-    "webviews": ["main", "settings"],
-    "permissions": [
-      "core:default",
-      "updater:default",
-      "fs:default",
-      { "identifier": "fs:allow-app-write", "allow": [{ "path": "$APPCONFIG/*" }] },
-      "core:window:allow-set-size",
-      "core:window:allow-start-dragging",
-      "process:default",
-      "core:tray:default",
-      "core:app:default",
-      "core:event:default",
-      "shell:default",
-      "websocket:default",
-      "window-state:default",
-      { "identifier": "http:default", "allow": [{ "url": "https://api.overlayed.dev" }] }
-    ],
-    "platforms": ["macOS", "windows", "linux"]
-  },
-  "migrated": {
-    "identifier": "migrated",
-    "description": "permissions that were migrated from v1",
-    "local": true,
-    "windows": ["main"],
-    "permissions": ["core:default"]
-  }
-}
+{"desktop-capability":{"identifier":"desktop-capability","description":"","local":true,"windows":["main","settings"],"webviews":["main","settings"],"permissions":["core:default","updater:default","fs:default",{"identifier":"fs:allow-app-write","allow":[{"path":"$APPCONFIG/*"}]},"core:window:allow-set-size","core:window:allow-start-dragging","process:default","core:tray:default","core:app:default","core:event:default","shell:default","websocket:default","window-state:default",{"identifier":"http:default","allow":[{"url":"https://api.overlayed.dev"}]}],"platforms":["macOS","windows","linux"]},"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["core:default"]}}

apps/desktop/src-tauri/src/commands.rs

@@ -7,6 +7,32 @@ use tauri::{image::Image, menu::Menu, AppHandle, Emitter, Manager, State, Webvie
 
 use crate::{constants::*, Pinned, TrayMenu};
 
+#[tauri::command]
+pub fn zoom_window(window: tauri::Window, scale_factor: f64) {
+  let window = window
+    .get_webview_window(MAIN_WINDOW_NAME)
+    .expect("can't find the main window");
+  let _ = window.with_webview(move |webview| {
+    #[cfg(target_os = "linux")]
+    {
+      // TODO: implement zoom for linux
+      // use webkit2gtk::auto::web_view::WebViewExt;
+      // webview.inner().set_zoom_level(scale_factor);
+    }
+
+    #[cfg(windows)]
+    unsafe {
+      // see https://docs.rs/webview2-com/0.19.1/webview2_com/Microsoft/Web/WebView2/Win32/struct.ICoreWebView2Controller.html
+      webview.controller().SetZoomFactor(scale_factor).unwrap();
+    }
+
+    #[cfg(target_os = "macos")]
+    unsafe {
+      let () = msg_send![webview.inner(), setPageZoom: scale_factor];
+    }
+  });
+}
+
 #[tauri::command]
 pub fn open_settings(window: WebviewWindow, update: bool) {
   let app = window.app_handle();

apps/desktop/src-tauri/src/main.rs

@@ -140,7 +140,8 @@ fn main() {
       set_pin,
       open_devtools,
       close_settings,
-      open_settings
+      open_settings,
+      zoom_window
     ]);
 
   app

apps/desktop/src/App.tsx

@@ -12,9 +12,11 @@ import { useUpdate } from "./hooks/use-update";
 import { useAppStore } from "./store";
 import { Toaster } from "./components/ui/toaster";
 import { useEffect } from "react";
+import { useSocket } from "./rpc/manager";
 
 function App() {
   useDisableWebFeatures();
+  useSocket();
 
   useEffect(() => {
     const styleForLog = "font-size: 20px; color: #00dffd";

apps/desktop/src/components/ui/slider.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/utils/tw";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

apps/desktop/src/views/settings/account.tsx

@@ -23,6 +23,7 @@ import { emit } from "@tauri-apps/api/event";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import type { VoiceUser } from "@/types";
 import { useConfigValue } from "@/hooks/use-config-value";
+import { Slider } from "@/components/ui/slider";
 import * as shell from "@tauri-apps/plugin-shell";
 
 export const Developer = () => {
@@ -125,6 +126,7 @@ export const Account = () => {
   const [showQuitDialog, setShowQuitDialog] = useState(false);
   const [user, setUser] = useState<VoiceUser | null>(null);
   const [tokenExpires, setTokenExpires] = useState(localStorage.getItem("discord_access_token_expiry"));
+  const [zoom, setZoom] = useState(1);
 
   // pull out the user data from localStorage
   useEffect(() => {
@@ -183,7 +185,6 @@ export const Account = () => {
             </div>
           </div>
         </div>
-
         <div className="flex flex-row gap-4 pb-4">
           <div>
             <Dialog
@@ -266,6 +267,20 @@ export const Account = () => {
           <Developer />
         </div>
         <AppInfo />
+        Zoom
+        <Slider
+          onValueChange={async ([val]) => {
+            setZoom(val as number);
+            console.log(val);
+            await invoke("zoom_window", { scaleFactor: zoom });
+          }}
+          defaultValue={[1.0]}
+          min={0.4}
+          max={1.5}
+          step={0.1}
+          className="w-[60%]"
+        />
+        {zoom}
       </div>
     </div>
   );