Copy playlist to clipboard, native UI (not alert)

crates/librqbit/webui/src/api-types.ts

@@ -162,6 +162,7 @@ export interface JSONLogLine {
 }
 
 export interface RqbitAPI {
+  getPlaylistUrl: (index: number) => string | null;
   getStreamLogsUrl: () => string | null;
   listTorrents: () => Promise<ListTorrentsResponse>;
   getTorrentDetails: (index: number) => Promise<TorrentDetails>;

crates/librqbit/webui/src/components/buttons/IconButton.tsx

@@ -6,8 +6,9 @@ export const IconButton: React.FC<{
   className?: string;
   color?: string;
   children: any;
+  href?: string;
 }> = (props) => {
-  const { onClick, disabled, color, children, className, ...otherProps } =
+  const { onClick, disabled, color, children, className, href, ...otherProps } =
     props;
   const onClickStopPropagation: MouseEventHandler<HTMLAnchorElement> = (e) => {
     e.stopPropagation();
@@ -22,7 +23,7 @@ export const IconButton: React.FC<{
     <a
       className={`p-1 text-blue-500 flex items-center justify-center ${colorClassName} ${className}`}
       onClick={onClickStopPropagation}
-      href="#"
+      href={href ?? "#"}
       {...otherProps}
     >
       {children}

crates/librqbit/webui/src/components/buttons/TorrentActions.tsx

@@ -3,7 +3,13 @@ import { TorrentStats } from "../../api-types";
 import { APIContext, RefreshTorrentStatsContext } from "../../context";
 import { IconButton } from "./IconButton";
 import { DeleteTorrentModal } from "../modal/DeleteTorrentModal";
-import { FaCog, FaPause, FaPlay, FaTrash, FaClipboardList } from "react-icons/fa";
+import {
+  FaCog,
+  FaPause,
+  FaPlay,
+  FaTrash,
+  FaClipboardList,
+} from "react-icons/fa";
 import { useErrorStore } from "../../stores/errorStore";
 
 export const TorrentActions: React.FC<{
@@ -39,7 +45,7 @@ export const TorrentActions: React.FC<{
             text: `Error starting torrent id=${id}`,
             details: e,
           });
-        },
+        }
       )
       .finally(() => setDisabled(false));
   };
@@ -56,7 +62,7 @@ export const TorrentActions: React.FC<{
             text: `Error pausing torrent id=${id}`,
             details: e,
           });
-        },
+        }
       )
       .finally(() => setDisabled(false));
   };
@@ -71,6 +77,32 @@ export const TorrentActions: React.FC<{
     setDeleting(false);
   };
 
+  const playlistUrl = API.getPlaylistUrl(id);
+
+  const setAlert = useErrorStore((state) => state.setAlert);
+
+  const copyPlaylistUrlToClipboard = async () => {
+    if (!playlistUrl) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(playlistUrl);
+    } catch (e) {
+      setCloseableError({
+        text: "Error",
+        details: { text: `Error copying playlist URL to clipboard: ${e}` },
+      });
+      return;
+    }
+
+    setAlert({
+      text: "Copied",
+      details: {
+        text: `Playlist URL copied to clipboard. Paste into e.g. VLC to play.`,
+      },
+    });
+  };
+
   return (
     <div className="flex w-full justify-center gap-2 dark:text-slate-300">
       {canUnpause && (
@@ -94,10 +126,11 @@ export const TorrentActions: React.FC<{
       <IconButton onClick={startDeleting} disabled={disabled}>
         <FaTrash className="hover:text-red-500" />
       </IconButton>
-      <IconButton onClick={() => {alert("Open this playlist link in external player like VLC")}}>
-      <a target="_blank" href={"/torrents/"+id+"/playlist"}>
-        <FaClipboardList className="hover:text-green-500"/>
-      </a>
+      <IconButton
+        href={playlistUrl ?? "#"}
+        onClick={copyPlaylistUrlToClipboard}
+      >
+        <FaClipboardList className="hover:text-green-500" />
       </IconButton>
       <DeleteTorrentModal id={id} show={deleting} onHide={cancelDeleting} />
     </div>

crates/librqbit/webui/src/components/modal/AlertModal.tsx

@@ -0,0 +1,33 @@
+import { ErrorWithLabel } from "../../rqbit-web";
+import { useErrorStore } from "../../stores/errorStore";
+import { Button } from "../buttons/Button";
+import { Modal } from "./Modal";
+import { ModalBody } from "./ModalBody";
+import { ModalFooter } from "./ModalFooter";
+
+export const AlertModal: React.FC<{}> = () => {
+  let alert = useErrorStore((store) => store.alert);
+  let removeAlert = useErrorStore((store) => store.removeAlert);
+
+  if (alert) {
+    return (
+      <Modal isOpen={true} onClose={removeAlert} title={alert.text}>
+        <ModalBody>
+          {alert.details?.statusText && (
+            <div className="pb-2 text-md">{alert.details?.statusText}</div>
+          )}
+          <div className="whitespace-pre-wrap text-sm">
+            {alert.details?.text}
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="cancel" onClick={removeAlert}>
+            Close
+          </Button>
+        </ModalFooter>
+      </Modal>
+    );
+  } else {
+    return <></>;
+  }
+};

crates/librqbit/webui/src/http-api.ts

@@ -151,4 +151,7 @@ export const API: RqbitAPI & { getVersion: () => Promise<string> } = {
     }
     return url;
   },
+  getPlaylistUrl: (index: number) => {
+    return apiUrl + `/torrents/${index}/playlist`;
+  },
 };

crates/librqbit/webui/src/rqbit-web.tsx

@@ -10,6 +10,7 @@ import { Header } from "./components/Header";
 import { DarkMode } from "./helper/darkMode";
 import { useTorrentStore } from "./stores/torrentStore";
 import { useErrorStore } from "./stores/errorStore";
+import { AlertModal } from "./components/modal/AlertModal";
 
 export interface ErrorWithLabel {
   text: string;
@@ -33,16 +34,16 @@ export const RqbitWebUI = (props: {
 
   const setTorrents = useTorrentStore((state) => state.setTorrents);
   const setTorrentsLoading = useTorrentStore(
-    (state) => state.setTorrentsLoading,
+    (state) => state.setTorrentsLoading
   );
   const setRefreshTorrents = useTorrentStore(
-    (state) => state.setRefreshTorrents,
+    (state) => state.setRefreshTorrents
   );
 
   const refreshTorrents = async () => {
     setTorrentsLoading(true);
     let torrents = await API.listTorrents().finally(() =>
-      setTorrentsLoading(false),
+      setTorrentsLoading(false)
     );
     setTorrents(torrents.torrents);
   };
@@ -60,9 +61,9 @@ export const RqbitWebUI = (props: {
             setOtherError({ text: "Error refreshing torrents", details: e });
             console.error(e);
             return 5000;
-          },
+          }
         ),
-      0,
+      0
     );
   }, []);
 
@@ -86,6 +87,7 @@ export const RqbitWebUI = (props: {
       </div>
 
       <LogStreamModal show={logsOpened} onClose={() => setLogsOpened(false)} />
+      <AlertModal />
     </div>
   );
 };

crates/librqbit/webui/src/stores/errorStore.ts

@@ -7,6 +7,10 @@ export interface ErrorWithLabel {
 }
 
 export const useErrorStore = create<{
+  alert: ErrorWithLabel | null;
+  setAlert: (alert: ErrorWithLabel) => void;
+  removeAlert: () => void;
+
   closeableError: ErrorWithLabel | null;
   setCloseableError: (error: ErrorWithLabel | null) => void;
 
@@ -18,4 +22,8 @@ export const useErrorStore = create<{
 
   otherError: null,
   setOtherError: (otherError) => set(() => ({ otherError })),
+
+  alert: null,
+  setAlert: (alert) => set(() => ({alert})),
+  removeAlert: () => set(() => ({alert: null}))
 }));

desktop/src-tauri/Cargo.lock

@@ -1881,6 +1881,7 @@ dependencies = [
  "serde_with",
  "size_format",
  "tokio",
+ "tokio-socks",
  "tokio-stream",
  "tokio-util",
  "tower-http",
@@ -2991,6 +2992,7 @@ dependencies = [
  "system-configuration",
  "tokio",
  "tokio-native-tls",
+ "tokio-socks",
  "tower-service",
  "url",
  "wasm-bindgen",
@@ -4013,6 +4015,18 @@ dependencies = [
  "tokio",
 ]
 
+[[package]]
+name = "tokio-socks"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0d4770b8024672c1101b3f6733eab95b18007dbe0847a8afe341fcf79e06043f"
+dependencies = [
+ "either",
+ "futures-util",
+ "thiserror",
+ "tokio",
+]
+
 [[package]]
 name = "tokio-stream"
 version = "0.1.15"

desktop/src/api.tsx

@@ -18,7 +18,7 @@ interface InvokeErrorResponse {
 }
 
 function errorToUIError(
-  path: string,
+  path: string
 ): (e: InvokeErrorResponse) => Promise<never> {
   return (e: InvokeErrorResponse) => {
     console.log(e);
@@ -35,11 +35,11 @@ function errorToUIError(
 
 export async function invokeAPI<Response>(
   name: string,
-  params?: InvokeArgs,
+  params?: InvokeArgs
 ): Promise<Response> {
   console.log("invoking", name, params);
   const result = await invoke<Response>(name, params).catch(
-    errorToUIError(name),
+    errorToUIError(name)
   );
   console.log(result);
   return result;
@@ -68,16 +68,26 @@ async function readFileAsBase64(file: File): Promise<string> {
 }
 
 export const makeAPI = (configuration: RqbitDesktopConfig): RqbitAPI => {
+  const getHttpBase = () => {
+    if (!configuration.http_api.listen_addr) {
+      return null;
+    }
+    let port = configuration.http_api.listen_addr.split(":")[1];
+    if (!port) {
+      return null;
+    }
+
+    return `http://127.0.0.1:${port}`;
+  };
+
+  let httpBase = getHttpBase();
+
   return {
     getStreamLogsUrl: () => {
-      if (!configuration.http_api.listen_addr) {
+      if (!httpBase) {
         return null;
       }
-      let port = configuration.http_api.listen_addr.split(":")[1];
-      if (!port) {
-        return null;
-      }
-      return `http://127.0.0.1:${port}/stream_logs`;
+      return `${httpBase}/stream_logs`;
     },
     listTorrents: async function (): Promise<ListTorrentsResponse> {
       return await invokeAPI<ListTorrentsResponse>("torrents_list");
@@ -96,7 +106,7 @@ export const makeAPI = (configuration: RqbitDesktopConfig): RqbitAPI => {
           {
             contents,
             opts: opts ?? {},
-          },
+          }
         );
       }
       return await invokeAPI<AddTorrentResponse>("torrent_create_from_url", {
@@ -125,5 +135,11 @@ export const makeAPI = (configuration: RqbitDesktopConfig): RqbitAPI => {
     getTorrentStreamUrl: () => {
       return "";
     },
+    getPlaylistUrl: (index: number) => {
+      if (!httpBase) {
+        return null;
+      }
+      return `${httpBase}/torrents/${index}/playlist`;
+    },
   };
 };