diff options
| -rw-r--r-- | README.md | 10 | ||||
| -rw-r--r-- | assets/logo.png | bin | 21108 -> 0 bytes | |||
| -rw-r--r-- | assets/qam-screenshot.jpeg | bin | 60314 -> 0 bytes | |||
| -rw-r--r-- | decky.pyi | 184 | ||||
| -rw-r--r-- | defaults/defaults.txt | 13 | ||||
| -rw-r--r-- | justfile | 3 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | plugin.json | 6 | ||||
| -rw-r--r-- | py_modules/lsfg_vk/config_schema_generated.py | 3 | ||||
| -rw-r--r-- | scripts/generate_python_boilerplate.py | 7 | ||||
| -rw-r--r-- | src/api/lsfgApi.ts | 20 | ||||
| -rw-r--r-- | src/components/ClipboardButton.tsx | 22 | ||||
| -rw-r--r-- | src/components/ClipboardDisplay.tsx | 139 | ||||
| -rw-r--r-- | src/components/ConfigurationSection.tsx | 167 | ||||
| -rw-r--r-- | src/components/Content.tsx | 87 | ||||
| -rw-r--r-- | src/components/FlatpaksModal.tsx | 151 | ||||
| -rw-r--r-- | src/components/FpsMultiplierControl.tsx | 4 | ||||
| -rw-r--r-- | src/components/NerdStuffModal.tsx | 20 | ||||
| -rw-r--r-- | src/components/PluginUpdateChecker.tsx | 176 | ||||
| -rw-r--r-- | src/components/ProfileManagement.tsx | 11 | ||||
| -rw-r--r-- | src/components/WikiButton.tsx | 22 | ||||
| -rw-r--r-- | src/components/index.ts | 11 |
22 files changed, 299 insertions, 759 deletions
@@ -3,6 +3,10 @@ > **Note:** > This is an **unofficial community plugin**. It is independently developed and **not officially supported** by the creators of Lossless Scaling or lsfg-vk. For support, please use the [decky-lsfg-vk Discord Channel](https://discord.gg/TwvHdVucC3). + +<p align="center"> + <img src="assets/decky-lossless-logo.png" alt="decky-lsfg-vk Logo" width="200"/> +</p> <p align="center"> <a href="https://ko-fi.com/B0B71HZTAX" target="_blank" rel="noopener noreferrer"> <img src="https://ko-fi.com/img/githubbutton_sm.svg" alt="Support on Ko-fi"/> @@ -10,12 +14,6 @@ </p> - -<p align="center"> - <img src="assets/decky-lossless-logo.png" alt="decky-lsfg-vk Logo" width="200"/> -</p> - - ## What is this? A Decky plugin that streamlines the installation of **lsfg-vk** ([Lossless Scaling Frame Generation Vulkan layer](https://github.com/PancakeTAS/lsfg-vk)) on Steam Deck, allowing you to use the Lossless Scaling frame generation features on Linux with a controller friendly UI in SteamOS, Bazzite, or any other Linux platform compatible with Decky Loader. diff --git a/assets/logo.png b/assets/logo.png Binary files differdeleted file mode 100644 index 48c4851..0000000 --- a/assets/logo.png +++ /dev/null diff --git a/assets/qam-screenshot.jpeg b/assets/qam-screenshot.jpeg Binary files differdeleted file mode 100644 index 8df12b2..0000000 --- a/assets/qam-screenshot.jpeg +++ /dev/null diff --git a/decky.pyi b/decky.pyi deleted file mode 100644 index a72c74c..0000000 --- a/decky.pyi +++ /dev/null @@ -1,184 +0,0 @@ -""" -This module exposes various constants and helpers useful for decky plugins. - -* Plugin's settings and configurations should be stored under `DECKY_PLUGIN_SETTINGS_DIR`. -* Plugin's runtime data should be stored under `DECKY_PLUGIN_RUNTIME_DIR`. -* Plugin's persistent log files should be stored under `DECKY_PLUGIN_LOG_DIR`. - -Avoid writing outside of `DECKY_HOME`, storing under the suggested paths is strongly recommended. - -Some basic migration helpers are available: `migrate_any`, `migrate_settings`, `migrate_runtime`, `migrate_logs`. - -A logging facility `logger` is available which writes to the recommended location. -""" - -__version__ = '1.0.0' - -import logging - -from typing import Any - -""" -Constants -""" - -HOME: str -""" -The home directory of the effective user running the process. -Environment variable: `HOME`. -If `root` was specified in the plugin's flags it will be `/root` otherwise the user whose home decky resides in. -e.g.: `/home/deck` -""" - -USER: str -""" -The effective username running the process. -Environment variable: `USER`. -It would be `root` if `root` was specified in the plugin's flags otherwise the user whose home decky resides in. -e.g.: `deck` -""" - -DECKY_VERSION: str -""" -The version of the decky loader. -Environment variable: `DECKY_VERSION`. -e.g.: `v2.5.0-pre1` -""" - -DECKY_USER: str -""" -The user whose home decky resides in. -Environment variable: `DECKY_USER`. -e.g.: `deck` -""" - -DECKY_USER_HOME: str -""" -The home of the user where decky resides in. -Environment variable: `DECKY_USER_HOME`. -e.g.: `/home/deck` -""" - -DECKY_HOME: str -""" -The root of the decky folder. -Environment variable: `DECKY_HOME`. -e.g.: `/home/deck/homebrew` -""" - -DECKY_PLUGIN_SETTINGS_DIR: str -""" -The recommended path in which to store configuration files (created automatically). -Environment variable: `DECKY_PLUGIN_SETTINGS_DIR`. -e.g.: `/home/deck/homebrew/settings/decky-plugin-template` -""" - -DECKY_PLUGIN_RUNTIME_DIR: str -""" -The recommended path in which to store runtime data (created automatically). -Environment variable: `DECKY_PLUGIN_RUNTIME_DIR`. -e.g.: `/home/deck/homebrew/data/decky-plugin-template` -""" - -DECKY_PLUGIN_LOG_DIR: str -""" -The recommended path in which to store persistent logs (created automatically). -Environment variable: `DECKY_PLUGIN_LOG_DIR`. -e.g.: `/home/deck/homebrew/logs/decky-plugin-template` -""" - -DECKY_PLUGIN_DIR: str -""" -The root of the plugin's directory. -Environment variable: `DECKY_PLUGIN_DIR`. -e.g.: `/home/deck/homebrew/plugins/decky-plugin-template` -""" - -DECKY_PLUGIN_NAME: str -""" -The name of the plugin as specified in the 'plugin.json'. -Environment variable: `DECKY_PLUGIN_NAME`. -e.g.: `Example Plugin` -""" - -DECKY_PLUGIN_VERSION: str -""" -The version of the plugin as specified in the 'package.json'. -Environment variable: `DECKY_PLUGIN_VERSION`. -e.g.: `0.0.1` -""" - -DECKY_PLUGIN_AUTHOR: str -""" -The author of the plugin as specified in the 'plugin.json'. -Environment variable: `DECKY_PLUGIN_AUTHOR`. -e.g.: `John Doe` -""" - -DECKY_PLUGIN_LOG: str -""" -The path to the plugin's main logfile. -Environment variable: `DECKY_PLUGIN_LOG`. -e.g.: `/home/deck/homebrew/logs/decky-plugin-template/plugin.log` -""" - -""" -Migration helpers -""" - - -def migrate_any(target_dir: str, *files_or_directories: str) -> dict[str, str]: - """ - Migrate files and directories to a new location and remove old locations. - Specified files will be migrated to `target_dir`. - Specified directories will have their contents recursively migrated to `target_dir`. - - Returns the mapping of old -> new location. - """ - - -def migrate_settings(*files_or_directories: str) -> dict[str, str]: - """ - Migrate files and directories relating to plugin settings to the recommended location and remove old locations. - Specified files will be migrated to `DECKY_PLUGIN_SETTINGS_DIR`. - Specified directories will have their contents recursively migrated to `DECKY_PLUGIN_SETTINGS_DIR`. - - Returns the mapping of old -> new location. - """ - - -def migrate_runtime(*files_or_directories: str) -> dict[str, str]: - """ - Migrate files and directories relating to plugin runtime data to the recommended location and remove old locations - Specified files will be migrated to `DECKY_PLUGIN_RUNTIME_DIR`. - Specified directories will have their contents recursively migrated to `DECKY_PLUGIN_RUNTIME_DIR`. - - Returns the mapping of old -> new location. - """ - - -def migrate_logs(*files_or_directories: str) -> dict[str, str]: - """ - Migrate files and directories relating to plugin logs to the recommended location and remove old locations. - Specified files will be migrated to `DECKY_PLUGIN_LOG_DIR`. - Specified directories will have their contents recursively migrated to `DECKY_PLUGIN_LOG_DIR`. - - Returns the mapping of old -> new location. - """ - - -""" -Logging -""" - -logger: logging.Logger -"""The main plugin logger writing to `DECKY_PLUGIN_LOG`.""" - -""" -Event handling -""" -# TODO better docstring im lazy -async def emit(event: str, *args: Any) -> None: - """ - Send an event to the frontend. - """
\ No newline at end of file diff --git a/defaults/defaults.txt b/defaults/defaults.txt deleted file mode 100644 index ebf140b..0000000 --- a/defaults/defaults.txt +++ /dev/null @@ -1,13 +0,0 @@ -If you have plain-text json configs, theme templates, or templates for usage for your plugin of any description you should have those files be in here. -Those files will be pulled into the zip during the build process and included with the upload. Example: CssLoader with it's themes in "default/themes" would have the "themes" folder will be added alongside with the dist folder, main.py, LICENSE and README files in the subfolder of the zip containing the plugin. -Files can also be put in here such as a config, just keep in mind that they this directory cannot be utilized to put files in arbitrary locations, just within the extracted root folder of the plugin, ex: CssLoader has "defaults/themes/..." setup in it's repo, but when packaged to go to the store, the file structure will be: - -- LICENSE -- README -- dist - - index.js -- main.py -- package.json -- plugin.json -- themes - - exampletheme.css
\ No newline at end of file @@ -17,4 +17,5 @@ cef: tail -f ~/.local/share/Steam/logs/cef_log.txt clean: - rm -rf node_modules dist
\ No newline at end of file + rm -rf node_modules dist + sudo rm -rf /tmp/decky
\ No newline at end of file diff --git a/package.json b/package.json index ee49d1d..dc45048 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "decky-lsfg-vk", - "version": "0.11.3", + "version": "0.12.0", "description": "Use Lossless Scaling on the Steam Deck using the lsfg-vk vulkan layer", "type": "module", "scripts": { diff --git a/plugin.json b/plugin.json index 67bc281..009c589 100644 --- a/plugin.json +++ b/plugin.json @@ -1,11 +1,11 @@ { "name": "Decky LSFG-VK", "author": "Kurt Himebauch", - "flags": ["debug", "_root"], + "flags": [], "api_version": 1, "publish": { - "tags": ["installer", "vulkan", "lsfg"], - "description": "Enable frame generation on the Steam Deck using lsfg-vk compatibility layer.", + "tags": ["installer", "vulkan", "lsfg", "framegen", "lossless", "scaling"], + "description": "Enable lossless scaling frame generation on the Steam Deck using lsfg-vk compatibility layer.", "image": "https://steamcommunity.com/sharedfiles/filedetails/?id=3522791434" } } diff --git a/py_modules/lsfg_vk/config_schema_generated.py b/py_modules/lsfg_vk/config_schema_generated.py index 6a0a7f6..53e9693 100644 --- a/py_modules/lsfg_vk/config_schema_generated.py +++ b/py_modules/lsfg_vk/config_schema_generated.py @@ -81,6 +81,8 @@ def get_script_parsing_logic(): script_values["force_enable_vkbasalt"] = value == "1" if key == "ENABLE_GAMESCOPE_WSI": script_values["enable_wsi"] = value != "0" + if key == "DXVK_HDR": + script_values["enable_wsi"] = value != "0" if key == "__GLX_VENDOR_LIBRARY_NAME" and value == "mesa": script_values["enable_zink"] = True if key == "MESA_LOADER_DRIVER_OVERRIDE" and value == "zink": @@ -111,6 +113,7 @@ def get_script_generation_logic(): lines.append("export ENABLE_VKBASALT=1") if not config.get("enable_wsi", False): lines.append("export ENABLE_GAMESCOPE_WSI=0") + lines.append("export DXVK_HDR=0") if config.get("enable_zink", False): lines.append("export __GLX_VENDOR_LIBRARY_NAME=mesa") lines.append("export MESA_LOADER_DRIVER_OVERRIDE=zink") diff --git a/scripts/generate_python_boilerplate.py b/scripts/generate_python_boilerplate.py index 26bcfa5..dc51dae 100644 --- a/scripts/generate_python_boilerplate.py +++ b/scripts/generate_python_boilerplate.py @@ -108,9 +108,11 @@ def generate_script_parsing() -> str: lines.append(f' elif key == "{env_var}":') lines.append(f' script_values["{field_name}"] = value == "0"') elif field_name == "enable_wsi": - # Special case: ENABLE_GAMESCOPE_WSI=0 means enable_wsi=False + # Special case: ENABLE_GAMESCOPE_WSI=0 or DXVK_HDR=0 means enable_wsi=False lines.append(f' elif key == "{env_var}":') lines.append(f' script_values["{field_name}"] = value != "0"') + lines.append(f' elif key == "DXVK_HDR":') + lines.append(f' script_values["{field_name}"] = value != "0"') elif field_name == "enable_zink": # Special case: Zink uses multiple environment variables lines.append(f' elif key == "__GLX_VENDOR_LIBRARY_NAME" and value == "mesa":') @@ -161,9 +163,10 @@ def generate_script_generation() -> str: lines.append(f' if config.get("{field_name}", False):') lines.append(f' lines.append("export {env_var}=0")') elif field_name == "enable_wsi": - # Special case: enable_wsi=False should export ENABLE_GAMESCOPE_WSI=0 + # Special case: enable_wsi=False should export ENABLE_GAMESCOPE_WSI=0 and DXVK_HDR=0 lines.append(f' if not config.get("{field_name}", False):') lines.append(f' lines.append("export {env_var}=0")') + lines.append(f' lines.append("export DXVK_HDR=0")') elif field_name == "enable_zink": # Special case: enable_zink=True should export multiple Zink environment variables lines.append(f' if config.get("{field_name}", False):') diff --git a/src/api/lsfgApi.ts b/src/api/lsfgApi.ts index dda6c23..82f37c8 100644 --- a/src/api/lsfgApi.ts +++ b/src/api/lsfgApi.ts @@ -59,23 +59,6 @@ export interface ConfigSchemaResult { current_profile?: string; } -export interface UpdateCheckResult { - success: boolean; - update_available: boolean; - current_version: string; - latest_version: string; - release_notes: string; - release_date: string; - download_url: string; - error?: string; -} - -export interface UpdateDownloadResult { - success: boolean; - download_path?: string; - error?: string; -} - export interface LaunchOptionResult { launch_option: string; instructions: string; @@ -178,9 +161,6 @@ export const updateLsfgConfigFromObject = async (config: ConfigurationData): Pro }; // Self-updater API functions -export const checkForPluginUpdate = callable<[], UpdateCheckResult>("check_for_plugin_update"); -export const downloadPluginUpdate = callable<[string], UpdateDownloadResult>("download_plugin_update"); - // Profile management API functions export const getProfiles = callable<[], ProfilesResult>("get_profiles"); export const createProfile = callable<[string, string?], ProfileResult>("create_profile"); diff --git a/src/components/ClipboardButton.tsx b/src/components/ClipboardButton.tsx deleted file mode 100644 index cac1863..0000000 --- a/src/components/ClipboardButton.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { PanelSectionRow, ButtonItem } from "@decky/ui"; -import { FaBook } from "react-icons/fa"; - -export function ClipboardButton() { - const handleClipboardClick = () => { - window.open("https://github.com/xXJSONDeruloXx/decky-lossless-scaling-vk/wiki/Clipboard", "_blank"); - }; - - return ( - <PanelSectionRow> - <ButtonItem - layout="below" - onClick={handleClipboardClick} - > - <div style={{ display: "flex", alignItems: "center", gap: "8px" }}> - <FaBook /> - <div>Plugin Wiki</div> - </div> - </ButtonItem> - </PanelSectionRow> - ); -} diff --git a/src/components/ClipboardDisplay.tsx b/src/components/ClipboardDisplay.tsx deleted file mode 100644 index 852a50f..0000000 --- a/src/components/ClipboardDisplay.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import { useState, useEffect } from "react"; -import { PanelSectionRow } from "@decky/ui"; -import { FaClipboard, FaEye } from "react-icons/fa"; - -export function ClipboardDisplay() { - const [clipboardContent, setClipboardContent] = useState<string>(""); - const [isReading, setIsReading] = useState(false); - - const readClipboard = async () => { - if (isReading) return; // Prevent concurrent reads - - setIsReading(true); - try { - console.log("ClipboardDisplay: Attempting to read clipboard..."); - - if (!navigator.clipboard) { - console.log("ClipboardDisplay: navigator.clipboard not available"); - setClipboardContent("Clipboard API not available"); - return; - } - - if (!navigator.clipboard.readText) { - console.log("ClipboardDisplay: navigator.clipboard.readText not available"); - setClipboardContent("Clipboard read not supported"); - return; - } - - console.log("ClipboardDisplay: Calling navigator.clipboard.readText()..."); - const content = await navigator.clipboard.readText(); - console.log("ClipboardDisplay: Successfully read clipboard:", content.length, "characters"); - setClipboardContent(content); - } catch (error) { - // This is expected if user hasn't granted clipboard permissions - // or if we're in a context where reading isn't allowed - console.log("ClipboardDisplay: Error reading clipboard:", error); - console.log("ClipboardDisplay: Error name:", (error as Error).name); - console.log("ClipboardDisplay: Error message:", (error as Error).message); - - // More specific error messages based on error type - if (error instanceof DOMException) { - switch (error.name) { - case 'NotAllowedError': - setClipboardContent("Clipboard access denied - check permissions"); - break; - case 'NotFoundError': - setClipboardContent("No clipboard data found"); - break; - case 'SecurityError': - setClipboardContent("Clipboard access blocked by security policy"); - break; - default: - setClipboardContent(`Clipboard error: ${error.name}`); - } - } else { - setClipboardContent("Unable to read clipboard"); - } - } finally { - setIsReading(false); - } - }; - - // Read clipboard on mount and then every 3 seconds - useEffect(() => { - readClipboard(); - - const interval = setInterval(() => { - readClipboard(); - }, 3000); - - return () => clearInterval(interval); - }, []); - - const truncateText = (text: string, maxLength: number = 60) => { - if (text.length <= maxLength) return text; - return text.substring(0, maxLength) + "..."; - }; - - const displayText = truncateText(clipboardContent); - - return ( - <PanelSectionRow> - <div style={{ - padding: "8px", - backgroundColor: "rgba(255, 255, 255, 0.05)", - borderRadius: "4px", - border: "1px solid rgba(255, 255, 255, 0.1)", - marginBottom: "8px" - }}> - <div style={{ - display: "flex", - alignItems: "center", - gap: "8px", - marginBottom: "4px" - }}> - <FaClipboard style={{ color: "#888", fontSize: "12px" }} /> - <div style={{ - fontSize: "12px", - fontWeight: "bold", - color: "#888", - textTransform: "uppercase" - }}> - Current Clipboard - </div> - {isReading && ( - <FaEye style={{ - color: "#888", - fontSize: "10px", - animation: "pulse 1s ease-in-out infinite" - }} /> - )} - </div> - <div style={{ - fontSize: "11px", - color: clipboardContent.includes("error") || - clipboardContent.includes("denied") || - clipboardContent.includes("not available") || - clipboardContent.includes("not supported") || - clipboardContent.includes("blocked") || - clipboardContent === "Unable to read clipboard" - ? "#ff6b6b" - : "#fff", - fontFamily: "monospace", - wordBreak: "break-word", - lineHeight: "1.3", - minHeight: "14px" - }}> - {displayText || "Reading clipboard..."} - </div> - </div> - <style>{` - @keyframes pulse { - 0% { opacity: 0.5; } - 50% { opacity: 1; } - 100% { opacity: 0.5; } - } - `}</style> - </PanelSectionRow> - ); -} diff --git a/src/components/ConfigurationSection.tsx b/src/components/ConfigurationSection.tsx index b098b32..0734297 100644 --- a/src/components/ConfigurationSection.tsx +++ b/src/components/ConfigurationSection.tsx @@ -2,7 +2,6 @@ import { PanelSectionRow, ToggleField, SliderField, ButtonItem } from "@decky/ui import { useState, useEffect } from "react"; import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri"; import { ConfigurationData } from "../config/configSchema"; -import { FpsMultiplierControl } from "./FpsMultiplierControl"; import { FLOW_SCALE, PERFORMANCE_MODE, HDR_MODE, EXPERIMENTAL_PRESENT_MODE, DXVK_FRAME_RATE, DISABLE_STEAMDECK_MODE, @@ -14,13 +13,23 @@ interface ConfigurationSectionProps { onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number | string) => Promise<void>; } -const WORKAROUNDS_COLLAPSED_KEY = 'lsfg-workarounds-collapsed'; +const WORKAROUNDS_COLLAPSED_KEY = "lsfg-workarounds-collapsed"; +const CONFIG_COLLAPSED_KEY = "lsfg-config-collapsed"; export function ConfigurationSection({ config, onConfigChange }: ConfigurationSectionProps) { // Initialize with localStorage value, fallback to true if not found + const [configCollapsed, setConfigCollapsed] = useState(() => { + try { + const saved = localStorage.getItem(CONFIG_COLLAPSED_KEY); + return saved !== null ? JSON.parse(saved) : false; + } catch { + return false; + } + }); + const [workaroundsCollapsed, setWorkaroundsCollapsed] = useState(() => { try { const saved = localStorage.getItem(WORKAROUNDS_COLLAPSED_KEY); @@ -33,9 +42,17 @@ export function ConfigurationSection({ // Persist workarounds collapse state to localStorage useEffect(() => { try { + localStorage.setItem(CONFIG_COLLAPSED_KEY, JSON.stringify(configCollapsed)); + } catch (error) { + console.warn("Failed to save config collapse state:", error); + } + }, [configCollapsed]); + + useEffect(() => { + try { localStorage.setItem(WORKAROUNDS_COLLAPSED_KEY, JSON.stringify(workaroundsCollapsed)); } catch (error) { - console.warn('Failed to save workarounds collapse state:', error); + console.warn("Failed to save workarounds collapse state:", error); } }, [workaroundsCollapsed]); @@ -43,6 +60,8 @@ export function ConfigurationSection({ <> <style> {` + .LSFG_ConfigCollapseButton_Container > div > div > div > button, + .LSFG_ConfigCollapseButton_Container > div > div > div > div > button, .LSFG_WorkaroundsCollapseButton_Container > div > div > div > button { height: 10px !important; } @@ -52,59 +71,100 @@ export function ConfigurationSection({ `} </style> - {/* FPS Multiplier */} - <FpsMultiplierControl config={config} onConfigChange={onConfigChange} /> - + {/* Config Section */} <PanelSectionRow> - <SliderField - label={`Flow Scale (${Math.round(config.flow_scale * 100)}%)`} - description="Lowers internal motion estimation resolution, improving performance slightly" - value={config.flow_scale} - min={0.25} - max={1.0} - step={0.01} - onChange={(value) => onConfigChange(FLOW_SCALE, value)} - /> + <div + style={{ + fontSize: "14px", + fontWeight: "bold", + marginTop: "8px", + marginBottom: "6px", + borderBottom: "1px solid rgba(255, 255, 255, 0.2)", + paddingBottom: "3px", + color: "white" + }} + > + Config + </div> </PanelSectionRow> <PanelSectionRow> - <SliderField - label={`Base FPS Cap${config.dxvk_frame_rate > 0 ? ` (${config.dxvk_frame_rate} FPS)` : ' (Off)'}`} - description="Base framerate cap for DirectX games, before frame multiplier. (Requires game restart to apply)" - value={config.dxvk_frame_rate} - min={0} - max={60} - step={1} - onChange={(value) => onConfigChange(DXVK_FRAME_RATE, value)} - /> + <div + className="LSFG_ConfigCollapseButton_Container" + style={{ marginTop: "-2px", marginBottom: "4px" }} + > + <ButtonItem + layout="below" + bottomSeparator={configCollapsed ? "standard" : "none"} + onClick={() => setConfigCollapsed(!configCollapsed)} + > + {configCollapsed ? ( + <RiArrowDownSFill + style={{ transform: "translate(0, -13px)", fontSize: "1.5em" }} + /> + ) : ( + <RiArrowUpSFill + style={{ transform: "translate(0, -12px)", fontSize: "1.5em" }} + /> + )} + </ButtonItem> + </div> </PanelSectionRow> - <PanelSectionRow> - <ToggleField - label={`Present Mode (${(config.experimental_present_mode || "fifo") === "fifo" ? "FIFO - VSync" : "Mailbox"})`} - description="Toggle between FIFO - VSync (default) and Mailbox presentation modes for better performance or compatibility" - checked={(config.experimental_present_mode || "fifo") === "fifo"} - onChange={(value) => onConfigChange(EXPERIMENTAL_PRESENT_MODE, value ? "fifo" : "mailbox")} - /> - </PanelSectionRow> + {!configCollapsed && ( + <> + <PanelSectionRow> + <SliderField + label={`Flow Scale (${Math.round(config.flow_scale * 100)}%)`} + description="Lowers internal motion estimation resolution, improving performance slightly" + value={config.flow_scale} + min={0.25} + max={1.0} + step={0.01} + onChange={(value) => onConfigChange(FLOW_SCALE, value)} + /> + </PanelSectionRow> - <PanelSectionRow> - <ToggleField - label="Performance Mode" - description="Uses a lighter model for FG (Recommended for most games)" - checked={config.performance_mode} - onChange={(value) => onConfigChange(PERFORMANCE_MODE, value)} - /> - </PanelSectionRow> + <PanelSectionRow> + <SliderField + label={`Base FPS Cap${config.dxvk_frame_rate > 0 ? ` (${config.dxvk_frame_rate} FPS)` : " (Off)"}`} + description="Base framerate cap for DirectX games, before frame multiplier. (Requires game restart to apply)" + value={config.dxvk_frame_rate} + min={0} + max={60} + step={1} + onChange={(value) => onConfigChange(DXVK_FRAME_RATE, value)} + /> + </PanelSectionRow> - <PanelSectionRow> - <ToggleField - label="HDR Mode" - description="Enables HDR mode (only for games that support HDR)" - checked={config.hdr_mode} - onChange={(value) => onConfigChange(HDR_MODE, value)} - /> - </PanelSectionRow> + <PanelSectionRow> + <ToggleField + label={`Present Mode (${(config.experimental_present_mode || "fifo") === "fifo" ? "FIFO - VSync" : "Mailbox"})`} + description="Toggle between FIFO - VSync (default) and Mailbox presentation modes for better performance or compatibility" + checked={(config.experimental_present_mode || "fifo") === "fifo"} + onChange={(value) => onConfigChange(EXPERIMENTAL_PRESENT_MODE, value ? "fifo" : "mailbox")} + /> + </PanelSectionRow> + + <PanelSectionRow> + <ToggleField + label="Performance Mode" + description="Uses a lighter model for FG (Recommended for most games)" + checked={config.performance_mode} + onChange={(value) => onConfigChange(PERFORMANCE_MODE, value)} + /> + </PanelSectionRow> + + <PanelSectionRow> + <ToggleField + label="HDR Mode" + description="Enables HDR mode (only for games that support HDR)" + checked={config.hdr_mode} + onChange={(value) => onConfigChange(HDR_MODE, value)} + /> + </PanelSectionRow> + </> + )} {/* Workarounds Section */} <PanelSectionRow> @@ -112,10 +172,10 @@ export function ConfigurationSection({ style={{ fontSize: "14px", fontWeight: "bold", - marginTop: "16px", - marginBottom: "8px", + marginTop: "8px", + marginBottom: "6px", borderBottom: "1px solid rgba(255, 255, 255, 0.2)", - paddingBottom: "4px", + paddingBottom: "3px", color: "white" }} > @@ -124,7 +184,10 @@ export function ConfigurationSection({ </PanelSectionRow> <PanelSectionRow> - <div className="LSFG_WorkaroundsCollapseButton_Container"> + <div + className="LSFG_WorkaroundsCollapseButton_Container" + style={{ marginTop: "-2px", marginBottom: "4px" }} + > <ButtonItem layout="below" bottomSeparator={workaroundsCollapsed ? "standard" : "none"} diff --git a/src/components/Content.tsx b/src/components/Content.tsx index fdb8672..28eefa7 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -8,14 +8,11 @@ import { InstallationButton } from "./InstallationButton"; import { ConfigurationSection } from "./ConfigurationSection"; import { ProfileManagement } from "./ProfileManagement"; import { UsageInstructions } from "./UsageInstructions"; -// import { WikiButton } from "./WikiButton"; -// import { ClipboardButton } from "./ClipboardButton"; import { SmartClipboardButton } from "./SmartClipboardButton"; import { FgmodClipboardButton } from "./FgmodClipboardButton"; -// import { ClipboardDisplay } from "./ClipboardDisplay"; -// import { PluginUpdateChecker } from "./PluginUpdateChecker"; +import { FpsMultiplierControl } from "./FpsMultiplierControl"; import { NerdStuffModal } from "./NerdStuffModal"; -import FlatpaksModal from "./FlatpaksModal"; +import { FlatpaksModal } from "./FlatpaksModal"; import { ConfigurationData } from "../config/configSchema"; export function Content() { @@ -102,13 +99,30 @@ export function Content() { /> </> )} - - {/* Clipboard buttons - only show if installed */} + + {/* FPS multiplier controls stay above profile selection when installed */} {isInstalled && ( <> - {/* <ClipboardDisplay /> */} - <SmartClipboardButton /> - <FgmodClipboardButton /> + <PanelSectionRow> + <div + style={{ + fontSize: "14px", + fontWeight: "bold", + marginTop: "8px", + marginBottom: "6px", + borderBottom: "1px solid rgba(255, 255, 255, 0.2)", + paddingBottom: "3px", + color: "white" + }} + > + FPS Multiplier + </div> + </PanelSectionRow> + + <FpsMultiplierControl + config={config} + onConfigChange={handleConfigChange} + /> </> )} @@ -131,36 +145,17 @@ export function Content() { /> )} - {/* Usage instructions - always visible for user guidance */} - <UsageInstructions config={config} /> - - {/* Wiki and clipboard buttons - always available for documentation */} - {/* <WikiButton /> */} - {/* <ClipboardButton /> */} - - {/* Plugin Update Checker */} - {/* <PluginUpdateChecker /> */} - - {/* Show installation components at bottom when fully installed */} + {/* Clipboard buttons sit beside usage info for quick access */} {isInstalled && ( <> - <InstallationButton - isInstalled={isInstalled} - isInstalling={isInstalling} - isUninstalling={isUninstalling} - onInstall={onInstall} - onUninstall={onUninstall} - /> - - <StatusDisplay - dllDetected={dllDetected} - dllDetectionStatus={dllDetectionStatus} - isInstalled={isInstalled} - installationStatus={installationStatus} - /> + <SmartClipboardButton /> + <FgmodClipboardButton /> </> )} + {/* Usage instructions - always visible for user guidance */} + <UsageInstructions config={config} /> + {/* Nerd Stuff Button */} <PanelSectionRow> <ButtonItem @@ -177,9 +172,29 @@ export function Content() { layout="below" onClick={handleShowFlatpaks} > - Flatpaks + Flatpak Setup </ButtonItem> </PanelSectionRow> + + {/* Status and uninstall sit at bottom when installed to match desired layout */} + {isInstalled && ( + <> + <StatusDisplay + dllDetected={dllDetected} + dllDetectionStatus={dllDetectionStatus} + isInstalled={isInstalled} + installationStatus={installationStatus} + /> + + <InstallationButton + isInstalled={isInstalled} + isInstalling={isInstalling} + isUninstalling={isUninstalling} + onInstall={onInstall} + onUninstall={onUninstall} + /> + </> + )} </PanelSection> ); } diff --git a/src/components/FlatpaksModal.tsx b/src/components/FlatpaksModal.tsx index ae0c333..ca69ec6 100644 --- a/src/components/FlatpaksModal.tsx +++ b/src/components/FlatpaksModal.tsx @@ -1,4 +1,4 @@ -import { FC, useState, useEffect } from 'react'; +import { FC, useState, useEffect, CSSProperties } from 'react'; import { ModalRoot, DialogBody, @@ -32,7 +32,7 @@ interface FlatpaksModalProps { closeModal?: () => void; } -const FlatpaksModal: FC<FlatpaksModalProps> = ({ closeModal }) => { +export const FlatpaksModal: FC<FlatpaksModalProps> = ({ closeModal }) => { const [extensionStatus, setExtensionStatus] = useState<FlatpakExtensionStatus | null>(null); const [flatpakApps, setFlatpakApps] = useState<FlatpakAppInfo | null>(null); const [loading, setLoading] = useState(true); @@ -126,6 +126,40 @@ const FlatpaksModal: FC<FlatpaksModalProps> = ({ closeModal }) => { ); } + const instructionSteps = [ + { + id: 'try-first', + title: 'Try first:', + command: '~/lsfg' + }, + { + id: 'try-full-path', + title: "If that doesn't work, try full path:", + command: '/home/(username)/lsfg' + }, + { + id: 'final-result', + title: 'Final result should look like:', + command: '~/lsfg "usr/bin/flatpak"' + } + ]; + + const focusableInstructionStyle: CSSProperties = { + padding: '10px', + background: 'rgba(0, 0, 0, 0.3)', + borderRadius: '6px', + marginBottom: '12px' + }; + + const commandStyle: CSSProperties = { + fontFamily: 'monospace', + fontSize: '0.85em', + background: 'rgba(0, 0, 0, 0.45)', + padding: '8px', + borderRadius: '4px', + marginTop: '6px' + }; + return ( <ModalRoot closeModal={closeModal}> <DialogHeader>Flatpak Extensions</DialogHeader> @@ -327,80 +361,57 @@ const FlatpaksModal: FC<FlatpaksModalProps> = ({ closeModal }) => { {/* Steam Configuration Instructions */} <DialogControlsSection> <DialogControlsSectionHeader>Steam Configuration</DialogControlsSectionHeader> - - <Focusable> - <div style={{ - padding: '12px', - background: 'rgba(255, 255, 255, 0.1)', - borderRadius: '8px', - margin: '8px 0' - }}> - <div style={{ fontWeight: 'bold', marginBottom: '8px', color: '#fff' }}> - Configure Steam Flatpak Shortcuts - </div> - <div style={{ fontSize: '0.9em', lineHeight: '1.4', marginBottom: '8px' }}> - In Steam, open your flatpak game and click the cog wheel." - </div> - <div style={{ fontSize: '0.9em', lineHeight: '1.4', marginBottom: '12px', color: '#ffa500' }}> - <strong>IMPORTANT:</strong> Set this in TARGET (NOT LAUNCH OPTIONS) - </div> - - <div style={{ fontWeight: 'bold', marginBottom: '6px' }}> - Try first: - </div> - <div style={{ - fontFamily: 'monospace', - fontSize: '0.85em', - background: 'rgba(0, 0, 0, 0.3)', - padding: '8px', - borderRadius: '4px', - marginBottom: '12px' - }}> - ~/lsfg - </div> - - <div style={{ fontWeight: 'bold', marginBottom: '6px' }}> - If that doesn't work, try full path: - </div> - <div style={{ - fontFamily: 'monospace', - fontSize: '0.85em', - background: 'rgba(0, 0, 0, 0.3)', - padding: '8px', - borderRadius: '4px', - marginBottom: '12px' - }}> - /home/(username)/lsfg - </div> - - <div style={{ fontWeight: 'bold', marginBottom: '6px' }}> - Final result should look like: - </div> - <div style={{ - fontFamily: 'monospace', - fontSize: '0.85em', - background: 'rgba(0, 0, 0, 0.3)', - padding: '8px', - borderRadius: '4px' - }}> - ~/lsfg "usr/bin/flatpak" - </div> - - {/* Visual example image */} - <div style={{ marginTop: '16px', textAlign: 'center' }}> - <img - src={flatpakTargetImage} + <div + style={{ + padding: '12px', + background: 'rgba(255, 255, 255, 0.1)', + borderRadius: '8px', + margin: '8px 0', + display: 'flex', + flexDirection: 'column' + }} + > + <div style={{ fontWeight: 'bold', marginBottom: '8px', color: '#fff' }}> + Configure Steam Flatpak Shortcuts + </div> + <div style={{ fontSize: '0.9em', lineHeight: '1.4', marginBottom: '8px' }}> + In Steam, open your flatpak game and click the cog wheel. + </div> + <div style={{ fontSize: '0.9em', lineHeight: '1.4', marginBottom: '12px', color: '#ffa500' }}> + <strong>IMPORTANT:</strong> Set this in TARGET (NOT LAUNCH OPTIONS) + </div> + + {instructionSteps.map((step) => ( + <Focusable + key={step.id} + focusWithinClassName="gpfocuswithin" + onActivate={() => {}} + style={focusableInstructionStyle} + > + <div style={{ fontWeight: 'bold' }}>{step.title}</div> + <div style={commandStyle}>{step.command}</div> + </Focusable> + ))} + + <Focusable + focusWithinClassName="gpfocuswithin" + onActivate={() => {}} + style={{ marginTop: '4px' }} + > + <div style={{ textAlign: 'center' }}> + <img + src={flatpakTargetImage} alt="Steam Properties Target Field Example" - style={{ - maxWidth: '100%', + style={{ + maxWidth: '100%', height: 'auto', border: '1px solid rgba(255, 255, 255, 0.2)', borderRadius: '4px' }} /> </div> - </div> - </Focusable> + </Focusable> + </div> </DialogControlsSection> {/* Close Button */} @@ -419,5 +430,3 @@ const FlatpaksModal: FC<FlatpaksModalProps> = ({ closeModal }) => { </ModalRoot> ); }; - -export default FlatpaksModal; diff --git a/src/components/FpsMultiplierControl.tsx b/src/components/FpsMultiplierControl.tsx index 49d2cd9..5ac31bb 100644 --- a/src/components/FpsMultiplierControl.tsx +++ b/src/components/FpsMultiplierControl.tsx @@ -15,8 +15,8 @@ export function FpsMultiplierControl({ <PanelSectionRow> <Focusable style={{ - marginTop: "10px", - marginBottom: "10px", + marginTop: "6px", + marginBottom: "6px", display: "flex", justifyContent: "center", alignItems: "center" diff --git a/src/components/NerdStuffModal.tsx b/src/components/NerdStuffModal.tsx index b5689c9..b4a79a2 100644 --- a/src/components/NerdStuffModal.tsx +++ b/src/components/NerdStuffModal.tsx @@ -3,7 +3,9 @@ import { ModalRoot, Field, Focusable, - Button + DialogControlsSection, + PanelSectionRow, + ButtonItem } from "@decky/ui"; import { getDllStats, DllStatsResult, getConfigFileContent, getLaunchScriptContent, FileContentResult } from "../api/lsfgApi"; @@ -86,7 +88,7 @@ export function NerdStuffModal({ closeModal }: NerdStuffModalProps) { </Focusable> </Field> - <Field label="SHA256 Hash"> + <Field label="DLL SHA256 Hash"> <Focusable onClick={() => dllStats.dll_sha256 && copyToClipboard(dllStats.dll_sha256)} onActivate={() => dllStats.dll_sha256 && copyToClipboard(dllStats.dll_sha256)} @@ -166,9 +168,17 @@ export function NerdStuffModal({ closeModal }: NerdStuffModalProps) { </Field> )} - <Button onClick={closeModal}> - Close - </Button> + {/* Close Button */} + <DialogControlsSection> + <PanelSectionRow> + <ButtonItem + layout="below" + onClick={closeModal} + > + Close + </ButtonItem> + </PanelSectionRow> + </DialogControlsSection> </> )} </ModalRoot> diff --git a/src/components/PluginUpdateChecker.tsx b/src/components/PluginUpdateChecker.tsx deleted file mode 100644 index 9fa2afb..0000000 --- a/src/components/PluginUpdateChecker.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { - ButtonItem, - PanelSection, - PanelSectionRow, - Field, - Focusable -} from '@decky/ui'; -import { checkForPluginUpdate, downloadPluginUpdate, UpdateCheckResult, UpdateDownloadResult } from '../api/lsfgApi'; - -interface PluginUpdateCheckerProps { - // Add any props if needed -} - -interface UpdateInfo { - updateAvailable: boolean; - currentVersion: string; - latestVersion: string; - releaseNotes: string; - releaseDate: string; - downloadUrl: string; -} - -export const PluginUpdateChecker: React.FC<PluginUpdateCheckerProps> = () => { - const [checkingUpdate, setCheckingUpdate] = useState(false); - const [downloadingUpdate, setDownloadingUpdate] = useState(false); - const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null); - const [updateError, setUpdateError] = useState<string | null>(null); - const [downloadResult, setDownloadResult] = useState<UpdateDownloadResult | null>(null); - - // Auto-hide error messages after 5 seconds - useEffect(() => { - if (updateError) { - const timer = setTimeout(() => { - setUpdateError(null); - }, 5000); - return () => clearTimeout(timer); - } - return undefined; - }, [updateError]); - - const handleCheckForUpdate = async () => { - setCheckingUpdate(true); - setUpdateError(null); - setUpdateInfo(null); - setDownloadResult(null); // Clear previous download result - - try { - const result: UpdateCheckResult = await checkForPluginUpdate(); - - if (result.success) { - setUpdateInfo({ - updateAvailable: result.update_available, - currentVersion: result.current_version, - latestVersion: result.latest_version, - releaseNotes: result.release_notes, - releaseDate: result.release_date, - downloadUrl: result.download_url - }); - - // Simple console log instead of toast since showToast may not be available - if (result.update_available) { - console.log("Update available!", `Version ${result.latest_version} is now available.`); - } else { - console.log("Up to date!", "You have the latest version installed."); - } - } else { - setUpdateError(result.error || "Failed to check for updates"); - } - } catch (error) { - setUpdateError(`Error checking for updates: ${error}`); - } finally { - setCheckingUpdate(false); - } - }; - - const handleDownloadUpdate = async () => { - if (!updateInfo?.downloadUrl) return; - - setDownloadingUpdate(true); - setUpdateError(null); - setDownloadResult(null); - - try { - const result: UpdateDownloadResult = await downloadPluginUpdate(updateInfo.downloadUrl); - - if (result.success) { - setDownloadResult(result); - console.log("✓ Download complete!", `Plugin downloaded to ${result.download_path}`); - } else { - setUpdateError(result.error || "Failed to download update"); - } - } catch (error) { - setUpdateError(`Error downloading update: ${error}`); - } finally { - setDownloadingUpdate(false); - } - }; - - const getStatusMessage = () => { - if (!updateInfo) return null; - - if (updateInfo.updateAvailable) { - if (downloadResult?.success) { - return "✓ v" + updateInfo.latestVersion + " downloaded - ready to install"; - } else { - return "Update available: v" + updateInfo.latestVersion; - } - } else { - return "Up to date (v" + updateInfo.currentVersion + ")"; - } - }; - - return ( - <PanelSection title="PLUGIN UPDATES"> - <PanelSectionRow> - <ButtonItem - layout="below" - onClick={handleCheckForUpdate} - disabled={checkingUpdate} - description={getStatusMessage()} - > - {checkingUpdate ? 'Checking for updates...' : 'Check for Updates'} - </ButtonItem> - </PanelSectionRow> - - {updateInfo && updateInfo.updateAvailable && !downloadResult?.success && ( - <PanelSectionRow> - <ButtonItem - layout="below" - onClick={handleDownloadUpdate} - disabled={downloadingUpdate} - description={`Download version ${updateInfo.latestVersion}`} - > - {downloadingUpdate ? 'Downloading...' : 'Download Update'} - </ButtonItem> - </PanelSectionRow> - )} - - {downloadResult?.success && ( - <> - <PanelSectionRow> - <Field label="Download Complete!"> - <Focusable> - File saved to: {downloadResult.download_path} - </Focusable> - </Field> - </PanelSectionRow> - - <PanelSectionRow> - <Field label="Installation Instructions:"> - <Focusable> - 1. Go to Decky Loader settings - <br />2. Click "Developer" tab - <br />3. Click "Uninstall" next to "decky-lsfg-vk" - <br />4. Click "Install from ZIP" - <br />5. Select the downloaded file - <br />6. Restart Steam or reload plugins - </Focusable> - </Field> - </PanelSectionRow> - </> - )} - - {updateError && ( - <PanelSectionRow> - <Field label="Error:"> - <Focusable> - {updateError} - </Focusable> - </Field> - </PanelSectionRow> - )} - </PanelSection> - ); -}; diff --git a/src/components/ProfileManagement.tsx b/src/components/ProfileManagement.tsx index d3d15a9..62160d9 100644 --- a/src/components/ProfileManagement.tsx +++ b/src/components/ProfileManagement.tsx @@ -367,10 +367,10 @@ export function ProfileManagement({ currentProfile, onProfileChange }: ProfileMa style={{ fontSize: "14px", fontWeight: "bold", - marginTop: "16px", - marginBottom: "8px", + marginTop: "8px", + marginBottom: "6px", borderBottom: "1px solid rgba(255, 255, 255, 0.2)", - paddingBottom: "4px", + paddingBottom: "3px", color: "white" }} > @@ -379,7 +379,10 @@ export function ProfileManagement({ currentProfile, onProfileChange }: ProfileMa </PanelSectionRow> <PanelSectionRow> - <div className="LSFG_ProfilesCollapseButton_Container"> + <div + className="LSFG_ProfilesCollapseButton_Container" + style={{ marginTop: "-2px", marginBottom: "4px" }} + > <ButtonItem layout="below" bottomSeparator={profilesCollapsed ? "standard" : "none"} diff --git a/src/components/WikiButton.tsx b/src/components/WikiButton.tsx deleted file mode 100644 index 065fb8e..0000000 --- a/src/components/WikiButton.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { PanelSectionRow, ButtonItem } from "@decky/ui"; -import { FaBook } from "react-icons/fa"; - -export function WikiButton() { - const handleWikiClick = () => { - window.open("https://github.com/PancakeTAS/lsfg-vk/wiki", "_blank"); - }; - - return ( - <PanelSectionRow> - <ButtonItem - layout="below" - onClick={handleWikiClick} - > - <div style={{ display: "flex", alignItems: "center", gap: "8px" }}> - <FaBook /> - <div>LSFG-VK Wiki</div> - </div> - </ButtonItem> - </PanelSectionRow> - ); -} diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..bec45ae --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,11 @@ +export { Content } from "./Content"; +export { StatusDisplay } from "./StatusDisplay"; +export { InstallationButton } from "./InstallationButton"; +export { ConfigurationSection } from "./ConfigurationSection"; +export { FpsMultiplierControl } from "./FpsMultiplierControl"; +export { UsageInstructions } from "./UsageInstructions"; +export { SmartClipboardButton } from "./SmartClipboardButton"; +export { FgmodClipboardButton } from "./FgmodClipboardButton"; +export { NerdStuffModal } from "./NerdStuffModal"; +export { FlatpaksModal } from "./FlatpaksModal"; +export { ProfileManagement } from "./ProfileManagement"; |
