game thumbnails

Cargo.lock

@@ -1763,9 +1763,9 @@ checksum = "6dbf3de79e51f3d586ab4cb9d5c3e2c14aa28ed23d180cf89b4df0454a69cc87"
 
 [[package]]
 name = "hyper"
-version = "1.8.0"
+version = "1.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1744436df46f0bde35af3eda22aeaba453aada65d8f1c171cd8a5f59030bd69f"
+checksum = "2ab2d4f250c3d7b1c9fcdff1cece94ea4e2dfbec68614f7b87cb205f24ca9d11"
 dependencies = [
  "atomic-waker",
  "bytes",
@@ -1784,9 +1784,9 @@ dependencies = [
 
 [[package]]
 name = "hyper-util"
-version = "0.1.17"
+version = "0.1.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3c6995591a8f1380fcb4ba966a252a4b29188d51d2b89e3a252f5305be65aea8"
+checksum = "52e9a2a24dc5c6821e71a7030e1e14b7b632acac55c40e9d2e082c621261bb56"
 dependencies = [
  "base64 0.22.1",
  "bytes",
@@ -2245,6 +2245,7 @@ dependencies = [
 name = "lanspread-tauri-deno-ts"
 version = "0.1.0"
 dependencies = [
+ "base64 0.22.1",
  "eyre",
  "lanspread-compat",
  "lanspread-db",
@@ -4661,9 +4662,9 @@ checksum = "61c41af27dd6d1e27b1b16b489db798443478cef1f06a660c96db617ba5de3b1"
 
 [[package]]
 name = "tauri"
-version = "2.9.2"
+version = "2.9.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8bceb52453e507c505b330afe3398510e87f428ea42b6e76ecb6bd63b15965b5"
+checksum = "9e492485dd390b35f7497401f67694f46161a2a00ffd800938d5dd3c898fb9d8"
 dependencies = [
  "anyhow",
  "bytes",
@@ -4712,9 +4713,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-build"
-version = "2.5.1"
+version = "2.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a924b6c50fe83193f0f8b14072afa7c25b7a72752a2a73d9549b463f5fe91a38"
+checksum = "87d6f8cafe6a75514ce5333f115b7b1866e8e68d9672bf4ca89fc0f35697ea9d"
 dependencies = [
  "anyhow",
  "cargo_toml",
@@ -4734,9 +4735,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-codegen"
-version = "2.5.0"
+version = "2.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6c1fe64c74cc40f90848281a90058a6db931eb400b60205840e09801ee30f190"
+checksum = "b7ef707148f0755110ca54377560ab891d722de4d53297595380a748026f139f"
 dependencies = [
  "base64 0.22.1",
  "brotli",
@@ -4761,9 +4762,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-macros"
-version = "2.5.0"
+version = "2.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "260c5d2eb036b76206b9fca20b7be3614cfd21046c5396f7959e0e64a4b07f2f"
+checksum = "71664fd715ee6e382c05345ad258d6d1d50f90cf1b58c0aa726638b33c2a075d"
 dependencies = [
  "heck 0.5.0",
  "proc-macro2",

Cargo.toml

@@ -11,6 +11,7 @@ members = [
 resolver = "2"
 
 [workspace.dependencies]
+base64 = "0.22"
 bytes = { version = "1", features = ["serde"] }
 chrono = "0.4"
 clap = { version = "4", features = ["derive"] }

crates/lanspread-compat/src/eti.rs

@@ -60,7 +60,6 @@ impl From<EtiGame> for Game {
             genre: eti_game.genre_de,
             #[allow(clippy::cast_sign_loss, clippy::cast_possible_truncation)]
             size: (eti_game.game_size * 1024.0 * 1024.0 * 1024.0) as u64,
-            thumbnail: None,
             downloaded: false,
             installed: false,
             eti_game_version: None,

crates/lanspread-db/src/db.rs

@@ -3,7 +3,6 @@
 
 use std::{collections::HashMap, fmt, path::Path};
 
-use bytes::Bytes;
 use serde::{Deserialize, Serialize};
 
 /// Read version from version.ini file
@@ -52,8 +51,6 @@ pub struct Game {
     pub genre: String,
     /// size in bytes: example: 3455063152
     pub size: u64,
-    /// thumbnail image
-    pub thumbnail: Option<Bytes>,
     /// indicates that the ETI bundle exists locally
     #[serde(default)]
     pub downloaded: bool,
@@ -128,17 +125,6 @@ impl GameDB {
         db
     }
 
-    pub fn add_thumbnails(&mut self, thumbs_dir: &Path) {
-        for game in self.games.values_mut() {
-            let asset = thumbs_dir.join(format!("{}.jpg", game.id));
-            if let Ok(data) = std::fs::read(&asset) {
-                game.thumbnail = Some(Bytes::from(data));
-            } else {
-                tracing::warn!("Thumbnail missing: {}", game.id);
-            }
-        }
-    }
-
     #[must_use]
     pub fn get_game_by_id<S>(&self, id: S) -> Option<&Game>
     where

crates/lanspread-peer/src/lib.rs

@@ -1251,7 +1251,6 @@ async fn load_local_game_db(game_dir: &str) -> eyre::Result<GameDB> {
                 version: "1.0".to_string(),
                 genre: String::new(),
                 size,
-                thumbnail: None,
                 downloaded,
                 installed,
                 eti_game_version: local_version.clone(),

crates/lanspread-tauri-deno-ts/src-tauri/Cargo.toml

@@ -34,6 +34,7 @@ lanspread-mdns = { path = "../../lanspread-mdns" }
 lanspread-compat = { path = "../../lanspread-compat" }
 
 # external
+base64 = { workspace = true }
 eyre = { workspace = true }
 log = { workspace = true }
 mimalloc = { workspace = true }

crates/lanspread-tauri-deno-ts/src-tauri/src/lib.rs

@@ -268,6 +268,23 @@ async fn get_peer_count(state: tauri::State<'_, LanSpreadState>) -> tauri::Resul
     Ok(0)
 }
 
+#[tauri::command]
+async fn get_game_thumbnail(
+    game_id: String,
+    app_handle: tauri::AppHandle,
+) -> tauri::Result<String> {
+    use base64::Engine;
+
+    let resource_path = app_handle.path().resolve(
+        format!("assets/{game_id}.jpg"),
+        tauri::path::BaseDirectory::Resource,
+    )?;
+
+    let image_data = std::fs::read(&resource_path)?;
+    let base64_data = base64::engine::general_purpose::STANDARD.encode(&image_data);
+    Ok(format!("data:image/jpeg;base64,{base64_data}"))
+}
+
 #[cfg(target_os = "windows")]
 fn run_as_admin(file: &str, params: &str, dir: &str) -> bool {
     use std::{ffi::OsStr, os::windows::ffi::OsStrExt};
@@ -817,7 +834,8 @@ pub fn run() {
             run_game,
             update_game_directory,
             update_game,
-            get_peer_count
+            get_peer_count,
+            get_game_thumbnail
         ])
         .manage(lanspread_state)
         .setup({

crates/lanspread-tauri-deno-ts/src-tauri/tauri.conf.json

@@ -35,7 +35,8 @@
       "binaries/unrar"
     ],
     "resources": [
-      "game.db"
+      "game.db",
+      "assets/*"
     ]
   }
 }

crates/lanspread-tauri-deno-ts/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
 import { open } from '@tauri-apps/plugin-dialog';
@@ -9,6 +9,8 @@ import "./App.css";
 const FILE_STORAGE = 'launcher-settings.json';
 const GAME_DIR_KEY = 'game-directory';
 const CHECKING_PEERS_TIMEOUT_MS = 5000;
+const FALLBACK_THUMBNAIL =
+    'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8A8A';
 
 // enum with install status
 enum InstallStatus {
@@ -39,6 +41,39 @@ interface Game {
     peer_count: number;
 }
 
+interface GameThumbnailProps {
+    gameId: string;
+    alt: string;
+    getThumbnailUrl: (gameId: string) => Promise<string>;
+}
+
+const GameThumbnail = ({ gameId, alt, getThumbnailUrl }: GameThumbnailProps) => {
+    const [thumbnailUrl, setThumbnailUrl] = useState('');
+
+    useEffect(() => {
+        let isMounted = true;
+
+        const loadThumbnail = async () => {
+            const url = await getThumbnailUrl(gameId);
+            if (isMounted) {
+                setThumbnailUrl(url);
+            }
+        };
+
+        void loadThumbnail();
+
+        return () => {
+            isMounted = false;
+        };
+    }, [gameId, getThumbnailUrl]);
+
+    if (!thumbnailUrl) {
+        return null;
+    }
+
+    return <img src={thumbnailUrl} alt={alt} />;
+};
+
 const App = () => {
     const [gameItems, setGameItems] = useState<Game[]>([]);
     const [searchTerm, setSearchTerm] = useState('');
@@ -46,6 +81,24 @@ const App = () => {
     const [currentFilter, setCurrentFilter] = useState<GameFilter>('available');
     const [totalPeerCount, setTotalPeerCount] = useState(0);
     const checkingPeersTimeouts = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+    const [thumbnails, setThumbnails] = useState<Map<string, string>>(new Map());
+
+    const getThumbnailUrl = useCallback(async (gameId: string): Promise<string> => {
+        // Check cache first
+        if (thumbnails.has(gameId)) {
+            return thumbnails.get(gameId)!;
+        }
+
+        try {
+            const thumbnailUrl = await invoke<string>('get_game_thumbnail', { gameId });
+            setThumbnails(prev => new Map(prev).set(gameId, thumbnailUrl));
+            return thumbnailUrl;
+        } catch {
+            // Return a small placeholder for missing images
+            setThumbnails(prev => new Map(prev).set(gameId, FALLBACK_THUMBNAIL));
+            return FALLBACK_THUMBNAIL;
+        }
+    }, [thumbnails]);
 
     const getFilteredGames = (games: Game[], filter: GameFilter): Game[] => {
         switch (filter) {
@@ -549,50 +602,49 @@ const App = () => {
                         No games found matching your search and filters.
                     </div>
                 ) : null}
-                {filteredAndSearchedGames.map((item) => {
-                    const uint8Array = new Uint8Array(item.thumbnail);
-                    const binaryString = uint8Array.reduce((acc, byte) => acc + String.fromCharCode(byte), '');
-                    const thumbnailUrl = `data:image/jpeg;base64,${btoa(binaryString)}`;
-                    return (
-                        <div key={item.id} className="item">
-                            <img src={thumbnailUrl} alt={`${item.name} thumbnail`} />
-                            <div className="item-name">{item.name}</div>
-                            <div className="description">
-                                <span className="desc-text">{item.description.slice(0, 10)}</span>
-                                <span className="size-text">{(item.size / 1024 / 1024 / 1024).toFixed(1)} GB</span>
-                            </div>
-                            <div
-                                className={`play-button${isUnavailable(item) ? ' unavailable' : ''}`}
-                                onClick={() => {
-                                    if (isUnavailable(item)) {
-                                        return;
-                                    }
+                {filteredAndSearchedGames.map((item) => (
+                    <div key={item.id} className="item">
+                        <GameThumbnail
+                            gameId={item.id}
+                            alt={`${item.name} thumbnail`}
+                            getThumbnailUrl={getThumbnailUrl}
+                        />
+                        <div className="item-name">{item.name}</div>
+                        <div className="description">
+                            <span className="desc-text">{item.description.slice(0, 10)}</span>
+                            <span className="size-text">{(item.size / 1024 / 1024 / 1024).toFixed(1)} GB</span>
+                        </div>
+                        <div
+                            className={`play-button${isUnavailable(item) ? ' unavailable' : ''}`}
+                            onClick={() => {
+                                if (isUnavailable(item)) {
+                                    return;
+                                }
 
-                                    if (!item.installed) {
-                                        installGame(item.id);
-                                    } else if (needsUpdate(item)) {
-                                        updateGame(item.id);
-                                    } else {
-                                        runGame(item.id);
-                                    }
-                                }}>
-                                {getActionLabel(item)}
+                                if (!item.installed) {
+                                    installGame(item.id);
+                                } else if (needsUpdate(item)) {
+                                    updateGame(item.id);
+                                } else {
+                                    runGame(item.id);
+                                }
+                            }}>
+                            {getActionLabel(item)}
+                        </div>
+                        <div className={`item-info${item.status_level ? ` ${item.status_level}` : ''}`}>
+                            <div className="status-left">
+                                {item.status_message && item.peer_count === 0 && !item.installed && !item.downloaded ? item.status_message : ''}
                             </div>
-                            <div className={`item-info${item.status_level ? ` ${item.status_level}` : ''}`}>
-                                <div className="status-left">
-                                    {item.status_message && item.peer_count === 0 && !item.installed && !item.downloaded ? item.status_message : ''}
-                                </div>
-                                <div className="status-right">
-                                    {item.peer_count > 0 && (
-                                        <span className="peer-count">
-                                            👥 {item.peer_count}
-                                        </span>
-                                    )}
-                                </div>
+                            <div className="status-right">
+                                {item.peer_count > 0 && (
+                                    <span className="peer-count">
+                                        👥 {item.peer_count}
+                                    </span>
+                                )}
                             </div>
                         </div>
-                    );
-                })}
+                    </div>
+                ))}
             </div>
         </main>
     );