geckon01/decky-loader
1
0
Fork 0
mirror of https://github.com/SteamDeckHomebrew/decky-loader.git synced 2026-06-15 18:13:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

add settings page with install from URL option

Browse Source
This commit is contained in:
AAGaming
2022-06-22 23:22:27 -04:00
parent 80b223180e
commit 9619c52720
11 changed files with 152 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
backend/browser.py
View File

@@ -31,7 +31,7 @@ class PluginBrowser:
def _unzip_to_plugin_dir(self, zip, name, hash):
zip_hash = sha256(zip.getbuffer()).hexdigest()
if zip_hash != hash:
if hash and (zip_hash != hash):
return False
zip_file = ZipFile(zip)
zip_file.extractall(self.plugin_path)
@@ -45,9 +45,8 @@ class PluginBrowser:
rmtree(path.join(self.plugin_path, name), ignore_errors=True)
self.log.info(f"Installing {artifact} (Version: {version})")
async with ClientSession() as client:
url = f"https://github.com/{artifact}/archive/refs/tags/{version}.zip"
self.log.debug(f"Fetching {url}")
res = await client.get(url)
self.log.debug(f"Fetching {artifact}")
res = await client.get(artifact)
if res.status == 200:
self.log.debug("Got 200. Reading...")
data = await res.read()
@@ -67,14 +66,14 @@ class PluginBrowser:
else:
self.log.fatal(f"SHA-256 Mismatch!!!! {artifact} (Version: {version})")
else:
self.log.fatal(f"Could not fetch from github. {await res.text()}")
self.log.fatal(f"Could not fetch from URL. {await res.text()}")
async def redirect_to_store(self, request):
return web.Response(status=302, headers={"Location": self.store_url})
async def install_plugin(self, request):
data = await request.post()
get_event_loop().create_task(self.request_plugin_install(data["artifact"], data["version"], data["hash"]))
get_event_loop().create_task(self.request_plugin_install(data["artifact"], data.get("version", "dev"), data.get("hash", False)))
return web.Response(text="Requested plugin install")
async def request_plugin_install(self, artifact, version, hash):
@@ -82,7 +81,7 @@ class PluginBrowser:
self.install_requests[request_id] = PluginInstallContext(artifact, version, hash)
tab = await get_tab("SP")
await tab.open_websocket()
await tab.evaluate_js(f"DeckyPluginLoader.addPluginInstallPrompt('{artifact}', '{version}', '{request_id}')")
await tab.evaluate_js(f"DeckyPluginLoader.addPluginInstallPrompt('{artifact}', '{version}', '{request_id}', '{hash}')")
async def confirm_plugin_install(self, request_id):
request = self.install_requests.pop(request_id)

2
frontend/package.json
View File

@@ -37,7 +37,7 @@
}
},
"dependencies": {
"decky-frontend-lib": "^0.11.0",
"decky-frontend-lib": "^1.0.0",
"react-icons": "^4.4.0"
}
}

8
frontend/pnpm-lock.yaml generated
View File

@@ -9,7 +9,7 @@ specifiers:
'@types/react': 16.14.0
'@types/react-router': 5.1.18
'@types/webpack': ^5.28.0
decky-frontend-lib: ^0.11.0
decky-frontend-lib: ^1.0.0
husky: ^8.0.1
import-sort-style-module: ^6.0.0
inquirer: ^8.2.4
@@ -23,7 +23,7 @@ specifiers:
typescript: ^4.7.3
dependencies:
decky-frontend-lib: 0.11.0
decky-frontend-lib: 1.0.0
react-icons: 4.4.0_react@16.14.0
devDependencies:
@@ -803,8 +803,8 @@ packages:
ms: 2.1.2
dev: true
/decky-frontend-lib/0.11.0:
resolution: {integrity: sha512-pqBW5SQseKIvq59cvEztn6zzI4rGbd+kMx/4utzqun8lbUALODh21BU3NRsBId9TSEcRwPNl1na/QYLRsF9v9A==}
/decky-frontend-lib/1.0.0:
resolution: {integrity: sha512-ebBLyZEv0z51UmzhUNvULwmZfXsknLIelj1iQeGxfFOEI6JXrrjztcF3PsZVv3rVTTgqRfIQnXqyaaUdaeOUxA==}
dev: false
/deepmerge/4.2.2:

26
frontend/src/components/PluginView.tsx
View File

@@ -1,37 +1,17 @@
import { ButtonItem, DialogButton, PanelSection, PanelSectionRow, Router } from 'decky-frontend-lib';
import { ButtonItem, PanelSection, PanelSectionRow } from 'decky-frontend-lib';
import { VFC } from 'react';
import { FaArrowLeft, FaStore } from 'react-icons/fa';
import { useDeckyState } from './DeckyState';
const PluginView: VFC = () => {
const { plugins, activePlugin, setActivePlugin, closeActivePlugin } = useDeckyState();
const onStoreClick = () => {
Router.CloseSideMenus();
Router.Navigate('/decky/store');
};
const { plugins, activePlugin, setActivePlugin } = useDeckyState();
if (activePlugin) {
return (
<div style={{ height: '100%' }}>
<div style={{ position: 'absolute', top: '3px', left: '16px', zIndex: 20 }}>
<DialogButton style={{ minWidth: 0, padding: '10px 12px' }} onClick={closeActivePlugin}>
<FaArrowLeft style={{ display: 'block' }} />
</DialogButton>
</div>
{activePlugin.content}
</div>
);
return <div style={{ height: '100%' }}>{activePlugin.content}</div>;
}
return (
<PanelSection>
<div style={{ position: 'absolute', top: '3px', right: '16px', zIndex: 20 }}>
<DialogButton style={{ minWidth: 0, padding: '10px 12px' }} onClick={onStoreClick}>
<FaStore style={{ display: 'block' }} />
</DialogButton>
</div>
{plugins.map(({ name, icon }) => (
<PanelSectionRow key={name}>
<ButtonItem layout="below" onClick={() => setActivePlugin(name)}>

53
frontend/src/components/TitleView.tsx
View File

@@ -1,18 +1,59 @@
import { staticClasses } from 'decky-frontend-lib';
import { VFC } from 'react';
import { DialogButton, Focusable, Router, staticClasses } from 'decky-frontend-lib';
import { CSSProperties, VFC } from 'react';
import { FaArrowLeft, FaCog, FaStore } from 'react-icons/fa';
import { useDeckyState } from './DeckyState';
const titleStyles: CSSProperties = {
display: 'flex',
paddingTop: '3px',
paddingBottom: '14px',
paddingRight: '16px',
boxShadow: 'unset',
};
const TitleView: VFC = () => {
const { activePlugin } = useDeckyState();
const { activePlugin, closeActivePlugin } = useDeckyState();
const onSettingsClick = () => {
Router.CloseSideMenus();
Router.Navigate('/decky/settings');
};
const onStoreClick = () => {
Router.CloseSideMenus();
Router.Navigate('/decky/store');
};
if (activePlugin === null) {
return <div className={staticClasses.Title}>Decky</div>;
return (
<Focusable style={titleStyles} className={staticClasses.Title}>
<DialogButton
style={{ height: '28px', width: '40px', minWidth: 0, padding: '10px 12px' }}
onClick={onSettingsClick}
>
<FaCog style={{ marginTop: '-4px', display: 'block' }} />
</DialogButton>
<div style={{ marginRight: 'auto', flex: 0.9 }}>Decky</div>
<DialogButton
style={{ height: '28px', width: '40px', minWidth: 0, padding: '10px 12px' }}
onClick={onStoreClick}
>
<FaStore style={{ marginTop: '-4px', display: 'block' }} />
</DialogButton>
</Focusable>
);
}
return (
<div className={staticClasses.Title} style={{ paddingLeft: '60px' }}>
{activePlugin.name}
<div className={staticClasses.Title} style={titleStyles}>
<DialogButton
style={{ height: '28px', width: '40px', minWidth: 0, padding: '10px 12px' }}
onClick={closeActivePlugin}
>
<FaArrowLeft style={{ marginTop: '-4px', display: 'block' }} />
</DialogButton>
<div style={{ flex: 0.9 }}>{activePlugin.name}</div>
</div>
);
};

19
frontend/src/components/settings/index.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { SidebarNavigation } from 'decky-frontend-lib';
import GeneralSettings from './pages/GeneralSettings';
export default function SettingsPage() {
return (
<SidebarNavigation
title="Decky Settings"
showTitle
pages={[
{
title: 'General',
content: <GeneralSettings />,
route: '/decky/settings/general',
},
]}
/>
);
}

30
frontend/src/components/settings/pages/GeneralSettings.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { DialogButton, Field, TextField } from 'decky-frontend-lib';
import { useState } from 'react';
import { FaShapes } from 'react-icons/fa';
import { installFromURL } from '../../store/Store';
export default function GeneralSettings() {
const [pluginURL, setPluginURL] = useState('');
// const [checked, setChecked] = useState(false); // store these in some kind of State instead
return (
<div>
{/* <Field
label="A Toggle with an icon"
icon={<FaShapes style={{ display: 'block' }} />}
>
<Toggle
value={checked}
onChange={(e) => setChecked(e)}
/>
</Field> */}
<Field
label="Manual plugin install"
description={<TextField label={'URL'} value={pluginURL} onChange={(e) => setPluginURL(e?.target.value)} />}
icon={<FaShapes style={{ display: 'block' }} />}
>
<DialogButton onClick={() => installFromURL(pluginURL)}>Install</DialogButton>
</Field>
</div>
);
}

23
frontend/src/components/store/PluginCard.tsx
View File

@@ -2,6 +2,7 @@ import {
DialogButton,
Dropdown,
Focusable,
QuickAccessTab,
Router,
SingleDropdownOption,
SuspensefulImage,
@@ -9,7 +10,7 @@ import {
} from 'decky-frontend-lib';
import { FC, useRef, useState } from 'react';
import { StorePlugin } from './Store';
import { StorePlugin, requestPluginInstall } from './Store';
interface PluginCardProps {
plugin: StorePlugin;
@@ -19,17 +20,6 @@ const classNames = (...classes: string[]) => {
return classes.join(' ');
};
async function requestPluginInstall(plugin: StorePlugin, selectedVer: string) {
const formData = new FormData();
formData.append('artifact', plugin.artifact);
formData.append('version', selectedVer);
formData.append('hash', plugin.versions[selectedVer]);
await fetch('http://localhost:1337/browser/install_plugin', {
method: 'POST',
body: formData,
});
}
const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
const [selectedOption, setSelectedOption] = useState<number>(0);
const buttonRef = useRef<HTMLDivElement>(null);
@@ -50,9 +40,12 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
buttonRef.current!.focus();
}}
onCancel={(e: CustomEvent) => {
containerRef.current!.querySelectorAll('* :focus').length === 0
? Router.NavigateBackOrOpenMenu()
: containerRef.current!.focus();
if (containerRef.current!.querySelectorAll('* :focus').length === 0) {
Router.NavigateBackOrOpenMenu();
setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
} else {
containerRef.current!.focus();
}
}}
style={{
display: 'flex',

20
frontend/src/components/store/Store.tsx
View File

@@ -13,6 +13,26 @@ export interface StorePlugin {
tags: string[];
}
export async function installFromURL(url: string) {
const formData = new FormData();
formData.append('artifact', url);
await fetch('http://localhost:1337/browser/install_plugin', {
method: 'POST',
body: formData,
});
}
export async function requestPluginInstall(plugin: StorePlugin, selectedVer: string) {
const formData = new FormData();
formData.append('artifact', `https://github.com/${plugin.artifact}/archive/refs/tags/${selectedVer}.zip`);
formData.append('version', selectedVer);
formData.append('hash', plugin.versions[selectedVer]);
await fetch('http://localhost:1337/browser/install_plugin', {
method: 'POST',
body: formData,
});
}
const StorePage: FC<{}> = () => {
const [data, setData] = useState<StorePlugin[] | null>(null);

24
frontend/src/plugin-loader.tsx
View File

@@ -1,9 +1,10 @@
import { ModalRoot, showModal, staticClasses } from 'decky-frontend-lib';
import { ModalRoot, QuickAccessTab, showModal, staticClasses } from 'decky-frontend-lib';
import { FaPlug } from 'react-icons/fa';
import { DeckyState, DeckyStateContextProvider } from './components/DeckyState';
import LegacyPlugin from './components/LegacyPlugin';
import PluginView from './components/PluginView';
import SettingsPage from './components/settings';
import StorePage from './components/store/Store';
import TitleView from './components/TitleView';
import Logger from './logger';
@@ -31,14 +32,11 @@ class PluginLoader extends Logger {
this.log('Initialized');
this.tabsHook.add({
id: 'main',
title: (
<DeckyStateContextProvider deckyState={this.deckyState}>
<TitleView />
</DeckyStateContextProvider>
),
id: QuickAccessTab.Decky,
title: null,
content: (
<DeckyStateContextProvider deckyState={this.deckyState}>
<TitleView />
<PluginView />
</DeckyStateContextProvider>
),
@@ -46,22 +44,23 @@ class PluginLoader extends Logger {
});
this.routerHook.addRoute('/decky/store', () => <StorePage />);
this.routerHook.addRoute('/decky/settings', () => <SettingsPage />);
}
public addPluginInstallPrompt(artifact: string, version: string, request_id: string) {
public addPluginInstallPrompt(artifact: string, version: string, request_id: string, hash: string) {
showModal(
<ModalRoot
onOK={() => {
console.log('ok');
this.callServerMethod('confirm_plugin_install', { request_id });
}}
onCancel={() => {
console.log('nope');
this.callServerMethod('cancel_plugin_install', { request_id });
}}
>
<div className={staticClasses.Title}>
Install {artifact} version {version}?
<div className={staticClasses.Title} style={{ flexDirection: 'column' }}>
{hash == 'False' ? <h1 style={{ color: 'red' }}>!!!!NO HASH PROVIDED!!!!</h1> : null}
Install {artifact}
{version ? ' version ' + version : null}?
</div>
</ModalRoot>,
);
@@ -76,6 +75,7 @@ class PluginLoader extends Logger {
public deinit() {
this.routerHook.removeRoute('/decky/store');
this.routerHook.removeRoute('/decky/settings');
}
public async importPlugin(name: string) {

4
frontend/src/tabs-hook.ts
View File

@@ -1,4 +1,4 @@
import { afterPatch, sleep, unpatch } from 'decky-frontend-lib';
import { QuickAccessTab, afterPatch, sleep, unpatch } from 'decky-frontend-lib';
import { memo } from 'react';
import Logger from './logger';
@@ -18,7 +18,7 @@ const isTabsArray = (tabs: any) => {
};
interface Tab {
id: string;
id: QuickAccessTab | number;
title: any;
content: any;
icon: any;