leyoda/rqbit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Removed global variable from Web UI

Browse source
This commit is contained in:
Igor Katson 2023-12-02 15:03:25 +00:00
parent 98d487a5af
commit 08cd8c8b54
No known key found for this signature in database
GPG key ID: B4EC22B66D61A3F5
4 changed files with 53 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

20
crates/librqbit/webui/dist/assets/index.js vendored
View file

File diff suppressed because one or more lines are too long

2
crates/librqbit/webui/dist/manifest.json vendored
View file

@ -4,7 +4,7 @@
"src": "assets/logo.svg"
},
"index.html": {
"file": "assets/index-48d4950c.js",
"file": "assets/index-c6a3908d.js",
"isEntry": true,
"src": "index.html"
}

13
crates/librqbit/webui/src/main.tsx
View file

@ -1,9 +1,12 @@
import { StrictMode } from "react";
import ReactDOM from 'react-dom/client';
import { RqbitWebUI } from "./rqbit-web";
import { RqbitWebUI, APIContext } from "./rqbit-web";
import { API } from "./http-api";
globalThis.API = API;
const torrentsContainer = document.getElementById('app') as HTMLInputElement;
ReactDOM.createRoot(torrentsContainer).render(<StrictMode><RqbitWebUI /></StrictMode >);
ReactDOM.createRoot(document.getElementById('app') as HTMLInputElement).render(
<StrictMode>
<APIContext.Provider value={API}>
<RqbitWebUI />
</APIContext.Provider>
</StrictMode>
);

37
crates/librqbit/webui/src/rqbit-web.tsx
View file

@ -1,8 +1,6 @@
import { MouseEventHandler, RefObject, createContext, useContext, useEffect, useRef, useState } from 'react';
import { ProgressBar, Button, Container, Row, Col, Alert, Modal, Form, Spinner } from 'react-bootstrap';
import { AddTorrentResponse, TorrentDetails, TorrentId, TorrentStats, ErrorDetails as ApiErrorDetails, STATE_INITIALIZING, STATE_LIVE, STATE_PAUSED, STATE_ERROR, RqbitAPI, ErrorDetails } from './api-types';
declare const API: RqbitAPI;
import { AddTorrentResponse, TorrentDetails, TorrentId, TorrentStats, ErrorDetails as ApiErrorDetails, STATE_INITIALIZING, STATE_LIVE, STATE_PAUSED, STATE_ERROR, RqbitAPI, ErrorDetails, ListTorrentsResponse } from './api-types';
interface Error {
text: string,
@ -14,6 +12,33 @@ interface ContextType {
refreshTorrents: () => void,
}
export const APIContext = createContext<RqbitAPI>({
listTorrents: function (): Promise<ListTorrentsResponse> {
throw new Error('Function not implemented.');
},
getTorrentDetails: function (index: number): Promise<TorrentDetails> {
throw new Error('Function not implemented.');
},
getTorrentStats: function (index: number): Promise<TorrentStats> {
throw new Error('Function not implemented.');
},
uploadTorrent: function (data: string | File, opts?: { listOnly?: boolean | undefined; selectedFiles?: number[] | undefined; unpopularTorrent?: boolean | undefined; initialPeers?: string[] | null | undefined; } | undefined): Promise<AddTorrentResponse> {
throw new Error('Function not implemented.');
},
pause: function (index: number): Promise<void> {
throw new Error('Function not implemented.');
},
start: function (index: number): Promise<void> {
throw new Error('Function not implemented.');
},
forget: function (index: number): Promise<void> {
throw new Error('Function not implemented.');
},
delete: function (index: number): Promise<void> {
throw new Error('Function not implemented.');
}
});
const AppContext = createContext<ContextType>({
setCloseableError: (_) => { },
refreshTorrents: () => { },
@ -49,6 +74,7 @@ const DeleteTorrentModal: React.FC<{
const [deleting, setDeleting] = useState(false);
const ctx = useContext(AppContext);
const API = useContext(APIContext);
const close = () => {
setDeleteFiles(false);
@ -117,6 +143,7 @@ const TorrentActions: React.FC<{
const canUnpause = state == 'paused' || state == 'error';
const ctx = useContext(AppContext);
const API = useContext(APIContext);
const unpause = () => {
setDisabled(true);
@ -258,6 +285,7 @@ const Torrent: React.FC<{
const [detailsResponse, updateDetailsResponse] = useState<TorrentDetails | null>(null);
const [statsResponse, updateStatsResponse] = useState<TorrentStats | null>(null);
const [forceStatsRefresh, setForceStatsRefresh] = useState(0);
const API = useContext(APIContext);
const forceStatsRefreshCallback = () => {
setForceStatsRefresh(forceStatsRefresh + 1);
@ -327,6 +355,7 @@ export const RqbitWebUI = () => {
const [torrents, setTorrents] = useState<Array<TorrentId> | null>(null);
const [torrentsLoading, setTorrentsLoading] = useState(false);
const API = useContext(APIContext);
const refreshTorrents = async () => {
setTorrentsLoading(true);
@ -399,6 +428,7 @@ const UploadButton: React.FC<{
const [loading, setLoading] = useState(false);
const [listTorrentResponse, setListTorrentResponse] = useState<AddTorrentResponse | null>(null);
const [listTorrentError, setListTorrentError] = useState<Error | null>(null);
const API = useContext(APIContext);
// Get the torrent file list if there's data.
useEffect(() => {
@ -567,6 +597,7 @@ const FileSelectionModal = (props: {
const [uploadError, setUploadError] = useState<Error | null>(null);
const [unpopularTorrent, setUnpopularTorrent] = useState(false);
const ctx = useContext(AppContext);
const API = useContext(APIContext);
useEffect(() => {
setSelectedFiles(listTorrentResponse ? listTorrentResponse.details.files.map((_, id) => id) : []);