mirror of
https://github.com/hydralauncher/hydra.git
synced 2026-01-11 22:06:17 +00:00
Compare commits
4 Commits
3-7-5
...
feat/resiz
| Author | SHA1 | Date | |
|---|---|---|---|
|
f0f272c162 | ||
|
|
363e52cdb6 | ||
|
|
e04a94d10d | ||
|
|
6733a3e5b0 |
3
.github/workflows/build.yml
vendored
3
.github/workflows/build.yml
vendored
@@ -2,9 +2,6 @@ name: Build
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.ref }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hydralauncher",
|
||||
"version": "3.7.5",
|
||||
"version": "3.7.4",
|
||||
"description": "Hydra",
|
||||
"main": "./out/main/index.js",
|
||||
"author": "Los Broxas",
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
},
|
||||
"sidebar": {
|
||||
"catalogue": "Catalogue",
|
||||
"library": "Library",
|
||||
"downloads": "Downloads",
|
||||
"settings": "Settings",
|
||||
"my_library": "My library",
|
||||
@@ -93,10 +92,8 @@
|
||||
},
|
||||
"header": {
|
||||
"search": "Search games",
|
||||
"search_library": "Search library",
|
||||
"home": "Home",
|
||||
"catalogue": "Catalogue",
|
||||
"library": "Library",
|
||||
"downloads": "Downloads",
|
||||
"search_results": "Search results",
|
||||
"settings": "Settings",
|
||||
@@ -197,7 +194,6 @@
|
||||
"download_in_progress": "Download in progress",
|
||||
"download_paused": "Download paused",
|
||||
"last_downloaded_option": "Last downloaded option",
|
||||
"new_download_option": "New",
|
||||
"create_steam_shortcut": "Create Steam shortcut",
|
||||
"create_shortcut_success": "Shortcut created successfully",
|
||||
"you_might_need_to_restart_steam": "You might need to restart Steam to see the changes",
|
||||
@@ -559,15 +555,6 @@
|
||||
"platinum": "Platinum",
|
||||
"hidden": "Hidden",
|
||||
"test_notification": "Test notification",
|
||||
"achievement_sound_volume": "Achievement sound volume",
|
||||
"select_achievement_sound": "Select achievement sound",
|
||||
"change_achievement_sound": "Change achievement sound",
|
||||
"remove_achievement_sound": "Remove achievement sound",
|
||||
"preview_sound": "Preview sound",
|
||||
"select": "Select",
|
||||
"preview": "Preview",
|
||||
"remove": "Remove",
|
||||
"no_sound_file_selected": "No sound file selected",
|
||||
"notification_preview": "Achievement Notification Preview",
|
||||
"enable_friend_start_game_notifications": "When a friend starts playing a game",
|
||||
"autoplay_trailers_on_game_page": "Automatically start playing trailers on game page",
|
||||
@@ -690,6 +677,18 @@
|
||||
"upload_banner": "Upload banner",
|
||||
"uploading_banner": "Uploading banner…",
|
||||
"background_image_updated": "Background image updated",
|
||||
"crop_profile_image": "Crop Profile Image",
|
||||
"crop_background_image": "Crop Background Image",
|
||||
"crop": "Crop",
|
||||
"cropping": "Cropping…",
|
||||
"crop_area": "Crop area",
|
||||
"resize_handle_nw": "Resize handle - northwest corner",
|
||||
"resize_handle_ne": "Resize handle - northeast corner",
|
||||
"resize_handle_sw": "Resize handle - southwest corner",
|
||||
"resize_handle_se": "Resize handle - southeast corner",
|
||||
"zoom_in": "Zoom In",
|
||||
"zoom_out": "Zoom Out",
|
||||
"image_crop_failure": "Failed to crop image. Please try again.",
|
||||
"stats": "Stats",
|
||||
"achievements": "achievements",
|
||||
"games": "Games",
|
||||
@@ -711,27 +710,6 @@
|
||||
"delete_review": "Delete Review",
|
||||
"loading_reviews": "Loading reviews..."
|
||||
},
|
||||
"library": {
|
||||
"library": "Library",
|
||||
"play": "Play",
|
||||
"download": "Download",
|
||||
"downloading": "Downloading",
|
||||
"game": "game",
|
||||
"games": "games",
|
||||
"grid_view": "Grid view",
|
||||
"compact_view": "Compact view",
|
||||
"large_view": "Large view",
|
||||
"no_games_title": "Your library is empty",
|
||||
"no_games_description": "Add games from the catalogue or download them to get started",
|
||||
"amount_hours": "{{amount}} hours",
|
||||
"amount_minutes": "{{amount}} minutes",
|
||||
"amount_hours_short": "{{amount}}h",
|
||||
"amount_minutes_short": "{{amount}}m",
|
||||
"manual_playtime_tooltip": "This playtime has been manually updated",
|
||||
"all_games": "All Games",
|
||||
"recently_played": "Recently Played",
|
||||
"favorites": "Favorites"
|
||||
},
|
||||
"achievement": {
|
||||
"achievement_unlocked": "Achievement unlocked",
|
||||
"user_achievements": "{{displayName}}'s Achievements",
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
},
|
||||
"sidebar": {
|
||||
"catalogue": "Catálogo",
|
||||
"library": "Librería",
|
||||
"downloads": "Descargas",
|
||||
"settings": "Ajustes",
|
||||
"my_library": "Mi Librería",
|
||||
@@ -193,7 +192,6 @@
|
||||
"download_in_progress": "Descarga en progreso",
|
||||
"download_paused": "Descarga pausada",
|
||||
"last_downloaded_option": "Última opción de descarga",
|
||||
"new_download_option": "Nuevo",
|
||||
"create_steam_shortcut": "Crear atajo de Steam",
|
||||
"create_shortcut_success": "Atajo creado con éxito",
|
||||
"you_might_need_to_restart_steam": "Probablemente necesités reiniciar Steam para ver cambios",
|
||||
@@ -544,12 +542,6 @@
|
||||
"platinum": "Platino",
|
||||
"hidden": "Oculto",
|
||||
"test_notification": "Probar notificación",
|
||||
"achievement_sound_volume": "Volumen del sonido de logro",
|
||||
"select_achievement_sound": "Seleccionar sonido de logro",
|
||||
"select": "Seleccionar",
|
||||
"preview": "Vista previa",
|
||||
"remove": "Remover",
|
||||
"no_sound_file_selected": "No se seleccionó ningún archivo de sonido",
|
||||
"notification_preview": "Probar notificación de logro",
|
||||
"debrid": "Debrid",
|
||||
"debrid_description": "Los servicios Debrid son descargadores premium sin restricciones que te dejan descargar más rápido archivos alojados en servicios de alojamiento siendo que la única limitación es tu velocidad de internet.",
|
||||
@@ -724,26 +716,5 @@
|
||||
"hydra_cloud_feature_found": "¡Acabas de descubrir una característica de Hydra Cloud!",
|
||||
"learn_more": "Descubrir más",
|
||||
"debrid_description": "Descargas hasta x4 veces más rápidas con Nimbus"
|
||||
},
|
||||
"library": {
|
||||
"library": "Librería",
|
||||
"play": "Jugar",
|
||||
"download": "Descargar",
|
||||
"downloading": "Descargando",
|
||||
"game": "juego",
|
||||
"games": "juegos",
|
||||
"grid_view": "Vista de cuadrícula",
|
||||
"compact_view": "Vista compacta",
|
||||
"large_view": "Vista grande",
|
||||
"no_games_title": "Tu librería está vacía",
|
||||
"no_games_description": "Agregá juegos del catálogo o descargalos para comenzar",
|
||||
"amount_hours": "{{amount}} horas",
|
||||
"amount_minutes": "{{amount}} minutos",
|
||||
"amount_hours_short": "{{amount}}h",
|
||||
"amount_minutes_short": "{{amount}}m",
|
||||
"manual_playtime_tooltip": "Este tiempo de juego ha sido modificado manualmente",
|
||||
"all_games": "Todos los Juegos",
|
||||
"recently_played": "Jugados Recientemente",
|
||||
"favorites": "Favoritos"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
},
|
||||
"sidebar": {
|
||||
"catalogue": "Catálogo",
|
||||
"library": "Biblioteca",
|
||||
"downloads": "Downloads",
|
||||
"settings": "Ajustes",
|
||||
"my_library": "Biblioteca",
|
||||
@@ -183,7 +182,6 @@
|
||||
"download_in_progress": "Download em andamento",
|
||||
"download_paused": "Download pausado",
|
||||
"last_downloaded_option": "Última opção baixada",
|
||||
"new_download_option": "Novo",
|
||||
"create_steam_shortcut": "Criar atalho na Steam",
|
||||
"create_shortcut_success": "Atalho criado com sucesso",
|
||||
"you_might_need_to_restart_steam": "Você pode precisar reiniciar a Steam para ver as alterações",
|
||||
@@ -543,12 +541,6 @@
|
||||
"platinum": "Platina",
|
||||
"hidden": "Oculta",
|
||||
"test_notification": "Testar notificação",
|
||||
"achievement_sound_volume": "Volume do som de conquista",
|
||||
"select_achievement_sound": "Selecionar som de conquista",
|
||||
"select": "Selecionar",
|
||||
"preview": "Reproduzir",
|
||||
"remove": "Remover",
|
||||
"no_sound_file_selected": "Nenhum arquivo de som selecionado",
|
||||
"notification_preview": "Prévia da Notificação de Conquistas",
|
||||
"enable_friend_start_game_notifications": "Quando um amigo iniciar um jogo",
|
||||
"autoplay_trailers_on_game_page": "Reproduzir trailers automaticamente na página do jogo",
|
||||
@@ -739,26 +731,5 @@
|
||||
"hydra_cloud_feature_found": "Você descobriu uma funcionalidade Hydra Cloud!",
|
||||
"learn_more": "Saiba mais",
|
||||
"debrid_description": "Baixe até 4x mais rápido com Nimbus"
|
||||
},
|
||||
"library": {
|
||||
"library": "Biblioteca",
|
||||
"play": "Jogar",
|
||||
"download": "Baixar",
|
||||
"downloading": "Baixando",
|
||||
"game": "jogo",
|
||||
"games": "jogos",
|
||||
"grid_view": "Visualização em grade",
|
||||
"compact_view": "Visualização compacta",
|
||||
"large_view": "Visualização grande",
|
||||
"no_games_title": "Sua biblioteca está vazia",
|
||||
"no_games_description": "Adicione jogos do catálogo ou baixe-os para começar",
|
||||
"amount_hours": "{{amount}} horas",
|
||||
"amount_minutes": "{{amount}} minutos",
|
||||
"amount_hours_short": "{{amount}}h",
|
||||
"amount_minutes_short": "{{amount}}m",
|
||||
"manual_playtime_tooltip": "Este tempo de jogo foi atualizado manualmente",
|
||||
"all_games": "Todos os Jogos",
|
||||
"recently_played": "Jogados Recentemente",
|
||||
"favorites": "Favoritos"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
},
|
||||
"sidebar": {
|
||||
"catalogue": "Каталог",
|
||||
"library": "Библиотека",
|
||||
"downloads": "Загрузки",
|
||||
"settings": "Настройки",
|
||||
"my_library": "Библиотека",
|
||||
@@ -195,7 +194,6 @@
|
||||
"download_in_progress": "Идёт загрузка",
|
||||
"download_paused": "Загрузка приостановлена",
|
||||
"last_downloaded_option": "Последний вариант загрузки",
|
||||
"new_download_option": "Новый",
|
||||
"create_steam_shortcut": "Создать ярлык Steam",
|
||||
"create_shortcut_success": "Ярлык создан",
|
||||
"you_might_need_to_restart_steam": "Возможно, вам потребуется перезапустить Steam, чтобы увидеть изменения",
|
||||
@@ -557,12 +555,6 @@
|
||||
"platinum": "Платиновый",
|
||||
"hidden": "Скрытый",
|
||||
"test_notification": "Тестовое уведомление",
|
||||
"achievement_sound_volume": "Громкость звука достижения",
|
||||
"select_achievement_sound": "Выбрать звук достижения",
|
||||
"select": "Выбрать",
|
||||
"preview": "Предпросмотр",
|
||||
"remove": "Удалить",
|
||||
"no_sound_file_selected": "Файл звука не выбран",
|
||||
"notification_preview": "Предварительный просмотр уведомления о достижении",
|
||||
"enable_friend_start_game_notifications": "Когда друг начинает играть в игру",
|
||||
"autoplay_trailers_on_game_page": "Автоматически начинать воспроизведение трейлеров на странице игры",
|
||||
@@ -735,26 +727,5 @@
|
||||
"hydra_cloud_feature_found": "Вы только что открыли для себя функцию Hydra Cloud!",
|
||||
"learn_more": "Подробнее",
|
||||
"debrid_description": "Скачивайте в 4 раза быстрее с Nimbus"
|
||||
},
|
||||
"library": {
|
||||
"library": "Библиотека",
|
||||
"play": "Играть",
|
||||
"download": "Скачать",
|
||||
"downloading": "Скачивание",
|
||||
"game": "игра",
|
||||
"games": "игры",
|
||||
"grid_view": "Вид сетки",
|
||||
"compact_view": "Компактный вид",
|
||||
"large_view": "Большой вид",
|
||||
"no_games_title": "Ваша библиотека пуста",
|
||||
"no_games_description": "Добавьте игры из каталога или скачайте их, чтобы начать",
|
||||
"amount_hours": "{{amount}} часов",
|
||||
"amount_minutes": "{{amount}} минут",
|
||||
"amount_hours_short": "{{amount}}ч",
|
||||
"amount_minutes_short": "{{amount}}м",
|
||||
"manual_playtime_tooltip": "Время игры было обновлено вручную",
|
||||
"all_games": "Все игры",
|
||||
"recently_played": "Недавно сыгранные",
|
||||
"favorites": "Избранное"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,68 +27,7 @@
|
||||
"friends": "好友",
|
||||
"favorites": "收藏",
|
||||
"need_help": "需要帮助？",
|
||||
"playable_button_title": "仅显示现在可以游玩的游戏",
|
||||
"add_custom_game_tooltip": "添加自定义游戏",
|
||||
"cancel": "取消",
|
||||
"confirm": "确认",
|
||||
"custom_game_modal": "添加自定义游戏",
|
||||
"custom_game_modal_add": "添加游戏",
|
||||
"custom_game_modal_adding": "正在添加游戏...",
|
||||
"custom_game_modal_browse": "浏览",
|
||||
"custom_game_modal_cancel": "取消",
|
||||
"custom_game_modal_description": "通过选择可执行文件将自定义游戏添加到您的库中",
|
||||
"custom_game_modal_enter_title": "输入标题",
|
||||
"custom_game_modal_executable": "可执行文件",
|
||||
"custom_game_modal_executable_path": "可执行文件路径",
|
||||
"custom_game_modal_failed": "添加自定义游戏失败",
|
||||
"custom_game_modal_select_executable": "选择可执行文件",
|
||||
"custom_game_modal_success": "自定义游戏添加成功",
|
||||
"custom_game_modal_title": "标题",
|
||||
"decky_plugin_installation_error": "安装 Decky 插件出错: {{error}}",
|
||||
"decky_plugin_installation_failed": "Decky 插件安装失败: {{error}}",
|
||||
"decky_plugin_installed": "Decky 插件 v{{version}} 安装成功",
|
||||
"decky_plugin_installed_version": "Decky 插件 (v{{version}})",
|
||||
"edit_game_modal": "自定义资源",
|
||||
"edit_game_modal_assets": "资源",
|
||||
"edit_game_modal_browse": "浏览",
|
||||
"edit_game_modal_cancel": "取消",
|
||||
"edit_game_modal_description": "自定义游戏资源和详情",
|
||||
"edit_game_modal_drop_hero_image_here": "拖放主图像到此处",
|
||||
"edit_game_modal_drop_icon_image_here": "拖放图标到此处",
|
||||
"edit_game_modal_drop_logo_image_here": "拖放Logo到此处",
|
||||
"edit_game_modal_drop_to_replace_hero": "拖放以替换主图像",
|
||||
"edit_game_modal_drop_to_replace_icon": "拖放以替换图标",
|
||||
"edit_game_modal_drop_to_replace_logo": "拖放以替换Logo",
|
||||
"edit_game_modal_enter_title": "输入标题",
|
||||
"edit_game_modal_failed": "资源更新失败",
|
||||
"edit_game_modal_fill_required": "请填写所有必填项",
|
||||
"edit_game_modal_hero": "库主图",
|
||||
"edit_game_modal_hero_preview": "库主图预览",
|
||||
"edit_game_modal_hero_resolution": "推荐分辨率: 1920x620px",
|
||||
"edit_game_modal_icon": "图标",
|
||||
"edit_game_modal_icon_preview": "图标预览",
|
||||
"edit_game_modal_icon_resolution": "推荐分辨率: 256x256px",
|
||||
"edit_game_modal_image": "图片",
|
||||
"edit_game_modal_image_filter": "图片",
|
||||
"edit_game_modal_image_preview": "图片预览",
|
||||
"edit_game_modal_logo": "Logo",
|
||||
"edit_game_modal_logo_preview": "Logo预览",
|
||||
"edit_game_modal_logo_resolution": "推荐分辨率: 640x360px",
|
||||
"edit_game_modal_select_hero": "选择库主图",
|
||||
"edit_game_modal_select_icon": "选择图标",
|
||||
"edit_game_modal_select_image": "选择图片",
|
||||
"edit_game_modal_select_logo": "选择Logo",
|
||||
"edit_game_modal_success": "资源更新成功",
|
||||
"edit_game_modal_title": "标题",
|
||||
"edit_game_modal_update": "更新",
|
||||
"edit_game_modal_updating": "正在更新...",
|
||||
"install_decky_plugin": "安装 Decky 插件",
|
||||
"install_decky_plugin_message": "这将下载并安装 Hydra 的 Decky Loader 插件。可能需要提升权限。继续吗？",
|
||||
"install_decky_plugin_title": "安装 Hydra Decky 插件",
|
||||
"show_playable_only_tooltip": "仅显示可游玩",
|
||||
"update_decky_plugin": "更新 Decky 插件",
|
||||
"update_decky_plugin_message": "有新版本的 Hydra Decky 插件可用。现在要更新吗？",
|
||||
"update_decky_plugin_title": "更新 Hydra Decky 插件"
|
||||
"playable_button_title": "仅显示现在可以游玩的游戏"
|
||||
},
|
||||
"header": {
|
||||
"search": "搜索游戏",
|
||||
@@ -279,93 +218,7 @@
|
||||
"reset_achievements_title": "您确定吗？",
|
||||
"save_changes": "保存更改",
|
||||
"unfreeze_backup": "取消固定",
|
||||
"you_might_need_to_restart_steam": "您可能需要重启Steam才能看到更改",
|
||||
"add_to_favorites": "添加到收藏",
|
||||
"already_in_library": "已在游戏库中",
|
||||
"audio": "音频",
|
||||
"backup_failed": "备份失败",
|
||||
"be_first_to_review": "成为第一个分享游戏感受的人！",
|
||||
"caption": "标题",
|
||||
"create_shortcut_simple": "创建快捷方式",
|
||||
"currency_country": "zh",
|
||||
"currency_symbol": "¥",
|
||||
"delete_review": "删除评价",
|
||||
"delete_review_modal_cancel_button": "取消",
|
||||
"delete_review_modal_delete_button": "删除",
|
||||
"delete_review_modal_description": "此操作无法撤销。",
|
||||
"delete_review_modal_title": "确定要删除您的评价吗？",
|
||||
"edit_game_modal_button": "自定义游戏资源",
|
||||
"failed_remove_files": "文件删除失败",
|
||||
"failed_remove_from_library": "移出游戏库失败",
|
||||
"failed_update_favorites": "收藏更新失败",
|
||||
"files_removed_success": "文件已成功删除",
|
||||
"filter_by_source": "按来源筛选",
|
||||
"game_added_to_pinned": "游戏已添加到置顶",
|
||||
"game_details": "游戏详情",
|
||||
"game_removed_from_library": "游戏已从库中移除",
|
||||
"game_removed_from_pinned": "游戏已从置顶移除",
|
||||
"hide": "隐藏",
|
||||
"hide_original": "隐藏原文",
|
||||
"historical_keyshop": "历史密钥商店",
|
||||
"historical_retail": "历史零售",
|
||||
"keyshop_price": "密钥商店价格",
|
||||
"language": "语言",
|
||||
"leave_a_review": "留下评价",
|
||||
"load_more_reviews": "加载更多评价",
|
||||
"loading_more_reviews": "正在加载更多评价...",
|
||||
"loading_reviews": "正在加载评价...",
|
||||
"manual_playtime_tooltip": "该游戏时长已手动更新",
|
||||
"manual_playtime_warning": "您的游戏时长将被标记为手动更新，且无法撤销。",
|
||||
"maybe_later": "以后再说",
|
||||
"no_prices_found": "未找到价格信息",
|
||||
"no_repacks_found": "未找到该游戏的下载来源",
|
||||
"no_reviews_yet": "暂无评价",
|
||||
"prices": "价格",
|
||||
"properties": "属性",
|
||||
"rating": "评分",
|
||||
"rating_count": "评分数",
|
||||
"rating_negative": "差评",
|
||||
"rating_neutral": "中性",
|
||||
"rating_positive": "好评",
|
||||
"rating_stats": "评分统计",
|
||||
"rating_very_negative": "极差",
|
||||
"rating_very_positive": "极好",
|
||||
"remove_from_favorites": "移出收藏",
|
||||
"remove_review": "移除评价",
|
||||
"retail_price": "零售价格",
|
||||
"review_cannot_be_empty": "评价内容不能为空。",
|
||||
"review_deleted_successfully": "评价已成功删除。",
|
||||
"review_deletion_failed": "评价删除失败，请重试。",
|
||||
"review_from_blocked_user": "来自被屏蔽用户的评价",
|
||||
"review_played_for": "已游玩",
|
||||
"review_submission_failed": "评价提交失败，请重试。",
|
||||
"review_submitted_successfully": "评价提交成功！",
|
||||
"reviews": "评价",
|
||||
"show": "显示",
|
||||
"show_less": "收起",
|
||||
"show_more": "展开",
|
||||
"show_original": "显示原文",
|
||||
"show_original_translated_from": "显示原文（由{{language}}翻译）",
|
||||
"show_translation": "显示翻译",
|
||||
"sort_highest_score": "最高分",
|
||||
"sort_lowest_score": "最低分",
|
||||
"sort_most_voted": "最多投票",
|
||||
"sort_newest": "最新",
|
||||
"sort_oldest": "最旧",
|
||||
"submit_review": "提交",
|
||||
"submitting": "正在提交...",
|
||||
"update_game_playtime": "更新游戏时长",
|
||||
"update_playtime": "更新时长",
|
||||
"update_playtime_description": "手动更新 {{game}} 的游玩时长",
|
||||
"update_playtime_error": "游戏时长更新失败",
|
||||
"update_playtime_success": "游戏时长已成功更新",
|
||||
"update_playtime_title": "更新游戏时长",
|
||||
"view_all_prices": "点击查看所有价格",
|
||||
"vote_failed": "投票失败，请重试。",
|
||||
"would_you_recommend_this_game": "您想为此游戏留下评价吗？",
|
||||
"write_review_placeholder": "分享您对本游戏的看法...",
|
||||
"yes": "是",
|
||||
"you_seemed_to_enjoy_this_game": "您似乎很喜欢这款游戏"
|
||||
"you_might_need_to_restart_steam": "您可能需要重启Steam才能看到更改"
|
||||
},
|
||||
"activation": {
|
||||
"title": "激活 Hydra",
|
||||
@@ -541,24 +394,7 @@
|
||||
"update_email": "更新邮箱",
|
||||
"update_password": "更新密码",
|
||||
"variation": "变体",
|
||||
"web_store": "网络商店",
|
||||
"adding": "添加中…",
|
||||
"autoplay_trailers_on_game_page": "在游戏页面自动播放预告片",
|
||||
"debrid": "Debrid下载服务",
|
||||
"debrid_description": "Debrid服务是一种高级不限速下载器，可让您以最快的网速下载托管在各类网盘上的文件，仅受您的网络速度限制。",
|
||||
"download_source_already_exists": "该下载源URL已存在。",
|
||||
"download_source_failed": "出错",
|
||||
"download_source_matched": "已更新",
|
||||
"download_source_matching": "正在更新",
|
||||
"download_source_no_information": "暂无信息",
|
||||
"download_source_pending_matching": "即将更新",
|
||||
"download_sources_synced_successfully": "所有下载源已同步",
|
||||
"enable_steam_achievements": "启用Steam成就搜索",
|
||||
"failed_add_download_source": "添加下载源失败，请重试。",
|
||||
"hide_to_tray_on_game_start": "启动游戏时隐藏到托盘",
|
||||
"hydra_cloud": "Hydra Cloud",
|
||||
"importing": "导入中…",
|
||||
"removed_all_download_sources": "已移除所有下载源"
|
||||
"web_store": "网络商店"
|
||||
},
|
||||
"notifications": {
|
||||
"download_complete": "下载完成",
|
||||
@@ -585,8 +421,7 @@
|
||||
"game_card": {
|
||||
"no_downloads": "无可用下载选项",
|
||||
"available_one": "可用",
|
||||
"available_other": "可用",
|
||||
"calculating": "正在计算"
|
||||
"available_other": "可用"
|
||||
},
|
||||
"binary_not_found_modal": {
|
||||
"title": "程序未安装",
|
||||
@@ -680,23 +515,7 @@
|
||||
"show_achievements_on_profile": "在您的个人资料上显示成就",
|
||||
"show_points_on_profile": "在您的个人资料上显示获得的积分",
|
||||
"stats": "统计",
|
||||
"top_percentile": "前 {{percentile}}%",
|
||||
"achievements_earned": "已获得成就",
|
||||
"amount_hours_short": "{{amount}}小时",
|
||||
"amount_minutes_short": "{{amount}}分钟",
|
||||
"delete_review": "删除评价",
|
||||
"game_added_to_pinned": "游戏已添加到置顶",
|
||||
"game_removed_from_pinned": "游戏已从置顶移除",
|
||||
"karma": "业力",
|
||||
"karma_count": "业力值",
|
||||
"karma_description": "通过评论获得的点赞",
|
||||
"loading_reviews": "正在加载评价...",
|
||||
"manual_playtime_tooltip": "该游戏时长已手动更新",
|
||||
"pinned": "已置顶",
|
||||
"played_recently": "最近游玩",
|
||||
"playtime": "游戏时长",
|
||||
"sort_by": "排序方式：",
|
||||
"user_reviews": "用户评价"
|
||||
"top_percentile": "前 {{percentile}}%"
|
||||
},
|
||||
"achievement": {
|
||||
"achievement_unlocked": "成就已解锁",
|
||||
|
||||
@@ -41,12 +41,8 @@ export const appVersion = app.getVersion() + (isStaging ? "-staging" : "");
|
||||
|
||||
export const ASSETS_PATH = path.join(SystemPath.getPath("userData"), "Assets");
|
||||
|
||||
export const THEMES_PATH = path.join(SystemPath.getPath("userData"), "themes");
|
||||
|
||||
export const MAIN_LOOP_INTERVAL = 2000;
|
||||
|
||||
export const DEFAULT_ACHIEVEMENT_SOUND_VOLUME = 0.15;
|
||||
|
||||
export const DECKY_PLUGINS_LOCATION = path.join(
|
||||
SystemPath.getPath("home"),
|
||||
"homebrew",
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
import { getDownloadSourcesCheckBaseline } from "@main/level";
|
||||
import { registerEvent } from "../register-event";
|
||||
|
||||
const getDownloadSourcesCheckBaselineHandler = async (
|
||||
_event: Electron.IpcMainInvokeEvent
|
||||
) => {
|
||||
return await getDownloadSourcesCheckBaseline();
|
||||
};
|
||||
|
||||
registerEvent(
|
||||
"getDownloadSourcesCheckBaseline",
|
||||
getDownloadSourcesCheckBaselineHandler
|
||||
);
|
||||
@@ -1,13 +0,0 @@
|
||||
import { getDownloadSourcesSinceValue } from "@main/level";
|
||||
import { registerEvent } from "../register-event";
|
||||
|
||||
const getDownloadSourcesSinceValueHandler = async (
|
||||
_event: Electron.IpcMainInvokeEvent
|
||||
) => {
|
||||
return await getDownloadSourcesSinceValue();
|
||||
};
|
||||
|
||||
registerEvent(
|
||||
"getDownloadSourcesSinceValue",
|
||||
getDownloadSourcesSinceValueHandler
|
||||
);
|
||||
@@ -18,9 +18,7 @@ import "./library/close-game";
|
||||
import "./library/delete-game-folder";
|
||||
import "./library/get-game-by-object-id";
|
||||
import "./library/get-library";
|
||||
import "./library/refresh-library-assets";
|
||||
import "./library/extract-game-download";
|
||||
import "./library/clear-new-download-options";
|
||||
import "./library/open-game";
|
||||
import "./library/open-game-executable-path";
|
||||
import "./library/open-game-installer";
|
||||
@@ -66,8 +64,6 @@ import "./user-preferences/authenticate-real-debrid";
|
||||
import "./user-preferences/authenticate-torbox";
|
||||
import "./download-sources/add-download-source";
|
||||
import "./download-sources/sync-download-sources";
|
||||
import "./download-sources/get-download-sources-check-baseline";
|
||||
import "./download-sources/get-download-sources-since-value";
|
||||
import "./auth/sign-out";
|
||||
import "./auth/open-auth-window";
|
||||
import "./auth/get-session-hash";
|
||||
@@ -95,11 +91,6 @@ import "./themes/get-custom-theme-by-id";
|
||||
import "./themes/get-active-custom-theme";
|
||||
import "./themes/close-editor-window";
|
||||
import "./themes/toggle-custom-theme";
|
||||
import "./themes/copy-theme-achievement-sound";
|
||||
import "./themes/remove-theme-achievement-sound";
|
||||
import "./themes/get-theme-sound-path";
|
||||
import "./themes/get-theme-sound-data-url";
|
||||
import "./themes/import-theme-sound-from-store";
|
||||
import "./download-sources/remove-download-source";
|
||||
import "./download-sources/get-download-sources";
|
||||
import { isPortableVersion } from "@main/helpers";
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
import { registerEvent } from "../register-event";
|
||||
import { gamesSublevel, levelKeys } from "@main/level";
|
||||
import { logger } from "@main/services";
|
||||
import type { GameShop } from "@types";
|
||||
|
||||
const clearNewDownloadOptions = async (
|
||||
_event: Electron.IpcMainInvokeEvent,
|
||||
shop: GameShop,
|
||||
objectId: string
|
||||
) => {
|
||||
const gameKey = levelKeys.game(shop, objectId);
|
||||
|
||||
const game = await gamesSublevel.get(gameKey);
|
||||
if (!game) return;
|
||||
|
||||
try {
|
||||
await gamesSublevel.put(gameKey, {
|
||||
...game,
|
||||
newDownloadOptionsCount: undefined,
|
||||
});
|
||||
logger.info(`Cleared newDownloadOptionsCount for game ${gameKey}`);
|
||||
} catch (error) {
|
||||
logger.error(`Failed to clear newDownloadOptionsCount: ${error}`);
|
||||
}
|
||||
};
|
||||
|
||||
registerEvent("clearNewDownloadOptions", clearNewDownloadOptions);
|
||||
@@ -22,15 +22,11 @@ const getLibrary = async (): Promise<LibraryGame[]> => {
|
||||
id: key,
|
||||
...game,
|
||||
download: download ?? null,
|
||||
unlockedAchievementCount: game.unlockedAchievementCount ?? 0,
|
||||
achievementCount: game.achievementCount ?? 0,
|
||||
// Spread gameAssets last to ensure all image URLs are properly set
|
||||
...gameAssets,
|
||||
// Preserve custom image URLs from game if they exist
|
||||
customIconUrl: game.customIconUrl,
|
||||
customLogoImageUrl: game.customLogoImageUrl,
|
||||
customHeroImageUrl: game.customHeroImageUrl,
|
||||
};
|
||||
// Ensure compatibility with LibraryGame type
|
||||
libraryHeroImageUrl:
|
||||
game.libraryHeroImageUrl ?? gameAssets?.libraryHeroImageUrl,
|
||||
} as LibraryGame;
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
import { registerEvent } from "../register-event";
|
||||
import { mergeWithRemoteGames } from "@main/services";
|
||||
|
||||
const refreshLibraryAssets = async () => {
|
||||
await mergeWithRemoteGames();
|
||||
};
|
||||
|
||||
registerEvent("refreshLibraryAssets", refreshLibraryAssets);
|
||||
@@ -1,40 +0,0 @@
|
||||
import { registerEvent } from "../register-event";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { getThemePath } from "@main/helpers";
|
||||
import { themesSublevel } from "@main/level";
|
||||
|
||||
const copyThemeAchievementSound = async (
|
||||
_event: Electron.IpcMainInvokeEvent,
|
||||
themeId: string,
|
||||
sourcePath: string
|
||||
): Promise<void> => {
|
||||
if (!sourcePath || !fs.existsSync(sourcePath)) {
|
||||
throw new Error("Source file does not exist");
|
||||
}
|
||||
|
||||
const theme = await themesSublevel.get(themeId);
|
||||
if (!theme) {
|
||||
throw new Error("Theme not found");
|
||||
}
|
||||
|
||||
const themeDir = getThemePath(themeId, theme.name);
|
||||
|
||||
if (!fs.existsSync(themeDir)) {
|
||||
fs.mkdirSync(themeDir, { recursive: true });
|
||||
}
|
||||
|
||||
const fileExtension = path.extname(sourcePath);
|
||||
const destinationPath = path.join(themeDir, `achievement${fileExtension}`);
|
||||
|
||||
await fs.promises.copyFile(sourcePath, destinationPath);
|
||||
|
||||
await themesSublevel.put(themeId, {
|
||||
...theme,
|
||||
hasCustomSound: true,
|
||||
originalSoundPath: sourcePath,
|
||||
updatedAt: new Date(),
|
||||
});
|
||||
};
|
||||
|
||||
registerEvent("copyThemeAchievementSound", copyThemeAchievementSound);
|
||||
@@ -1,40 +0,0 @@
|
||||
import { registerEvent } from "../register-event";
|
||||
import { getThemeSoundPath } from "@main/helpers";
|
||||
import { themesSublevel } from "@main/level";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { logger } from "@main/services";
|
||||
|
||||
const getThemeSoundDataUrl = async (
|
||||
_event: Electron.IpcMainInvokeEvent,
|
||||
themeId: string
|
||||
): Promise<string | null> => {
|
||||
try {
|
||||
const theme = await themesSublevel.get(themeId);
|
||||
const soundPath = getThemeSoundPath(themeId, theme?.name);
|
||||
|
||||
if (!soundPath || !fs.existsSync(soundPath)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const buffer = await fs.promises.readFile(soundPath);
|
||||
const ext = path.extname(soundPath).toLowerCase().slice(1);
|
||||
|
||||
const mimeTypes: Record<string, string> = {
|
||||
mp3: "audio/mpeg",
|
||||
wav: "audio/wav",
|
||||
ogg: "audio/ogg",
|
||||
m4a: "audio/mp4",
|
||||
};
|
||||
|
||||
const mimeType = mimeTypes[ext] || "audio/mpeg";
|
||||
const base64 = buffer.toString("base64");
|
||||
|
||||
return `data:${mimeType};base64,${base64}`;
|
||||
} catch (error) {
|
||||
logger.error("Failed to get theme sound data URL", error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
registerEvent("getThemeSoundDataUrl", getThemeSoundDataUrl);
|
||||
@@ -1,13 +0,0 @@
|
||||
import { registerEvent } from "../register-event";
|
||||
import { getThemeSoundPath } from "@main/helpers";
|
||||
import { themesSublevel } from "@main/level";
|
||||
|
||||
const getThemeSoundPathEvent = async (
|
||||
_event: Electron.IpcMainInvokeEvent,
|
||||
themeId: string
|
||||
): Promise<string | null> => {
|
||||
const theme = await themesSublevel.get(themeId);
|
||||
return getThemeSoundPath(themeId, theme?.name);
|
||||
};
|
||||
|
||||
registerEvent("getThemeSoundPath", getThemeSoundPathEvent);
|
||||
@@ -1,60 +0,0 @@
|
||||
import { registerEvent } from "../register-event";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import axios from "axios";
|
||||
import { getThemePath } from "@main/helpers";
|
||||
import { themesSublevel } from "@main/level";
|
||||
import { logger } from "@main/services";
|
||||
|
||||
const importThemeSoundFromStore = async (
|
||||
_event: Electron.IpcMainInvokeEvent,
|
||||
themeId: string,
|
||||
themeName: string,
|
||||
storeUrl: string
|
||||
): Promise<void> => {
|
||||
const theme = await themesSublevel.get(themeId);
|
||||
if (!theme) {
|
||||
throw new Error("Theme not found");
|
||||
}
|
||||
|
||||
const formats = ["wav", "mp3", "ogg", "m4a"];
|
||||
|
||||
for (const format of formats) {
|
||||
try {
|
||||
const soundUrl = `${storeUrl}/themes/${themeName.toLowerCase()}/achievement.${format}`;
|
||||
|
||||
const response = await axios.get(soundUrl, {
|
||||
responseType: "arraybuffer",
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
const themeDir = getThemePath(themeId, theme.name);
|
||||
|
||||
if (!fs.existsSync(themeDir)) {
|
||||
fs.mkdirSync(themeDir, { recursive: true });
|
||||
}
|
||||
|
||||
const destinationPath = path.join(themeDir, `achievement.${format}`);
|
||||
await fs.promises.writeFile(destinationPath, response.data);
|
||||
|
||||
await themesSublevel.put(themeId, {
|
||||
...theme,
|
||||
hasCustomSound: true,
|
||||
updatedAt: new Date(),
|
||||
});
|
||||
|
||||
logger.log(`Successfully imported sound for theme ${themeName}`);
|
||||
return;
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`Failed to import ${format} sound for theme ${themeName}`,
|
||||
error
|
||||
);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
logger.log(`No sound file found for theme ${themeName} in store`);
|
||||
};
|
||||
|
||||
registerEvent("importThemeSoundFromStore", importThemeSoundFromStore);
|
||||
@@ -1,48 +0,0 @@
|
||||
import { registerEvent } from "../register-event";
|
||||
import fs from "node:fs";
|
||||
import { getThemePath } from "@main/helpers";
|
||||
import { themesSublevel } from "@main/level";
|
||||
import { THEMES_PATH } from "@main/constants";
|
||||
import path from "node:path";
|
||||
|
||||
const removeThemeAchievementSound = async (
|
||||
_event: Electron.IpcMainInvokeEvent,
|
||||
themeId: string
|
||||
): Promise<void> => {
|
||||
const theme = await themesSublevel.get(themeId);
|
||||
if (!theme) {
|
||||
throw new Error("Theme not found");
|
||||
}
|
||||
|
||||
const themeDir = getThemePath(themeId, theme.name);
|
||||
const legacyThemeDir = path.join(THEMES_PATH, themeId);
|
||||
|
||||
const removeFromDir = async (dir: string) => {
|
||||
if (!fs.existsSync(dir)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formats = ["wav", "mp3", "ogg", "m4a"];
|
||||
|
||||
for (const format of formats) {
|
||||
const soundPath = path.join(dir, `achievement.${format}`);
|
||||
if (fs.existsSync(soundPath)) {
|
||||
await fs.promises.unlink(soundPath);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
await removeFromDir(themeDir);
|
||||
if (themeDir !== legacyThemeDir) {
|
||||
await removeFromDir(legacyThemeDir);
|
||||
}
|
||||
|
||||
await themesSublevel.put(themeId, {
|
||||
...theme,
|
||||
hasCustomSound: false,
|
||||
originalSoundPath: undefined,
|
||||
updatedAt: new Date(),
|
||||
});
|
||||
};
|
||||
|
||||
registerEvent("removeThemeAchievementSound", removeThemeAchievementSound);
|
||||
@@ -2,8 +2,6 @@ import axios from "axios";
|
||||
import { JSDOM } from "jsdom";
|
||||
import UserAgent from "user-agents";
|
||||
import path from "node:path";
|
||||
import fs from "node:fs";
|
||||
import { THEMES_PATH } from "@main/constants";
|
||||
|
||||
export const getFileBuffer = async (url: string) =>
|
||||
fetch(url, { method: "GET" }).then((response) =>
|
||||
@@ -33,64 +31,9 @@ export const isPortableVersion = () => {
|
||||
};
|
||||
|
||||
export const normalizePath = (str: string) =>
|
||||
path.posix.normalize(str).replaceAll("\\", "/");
|
||||
path.posix.normalize(str).replace(/\\/g, "/");
|
||||
|
||||
export const addTrailingSlash = (str: string) =>
|
||||
str.endsWith("/") ? str : `${str}/`;
|
||||
|
||||
const sanitizeFolderName = (name: string): string => {
|
||||
return name
|
||||
.toLowerCase()
|
||||
.replaceAll(/[^a-z0-9-_\s]/g, "")
|
||||
.replaceAll(/\s+/g, "-")
|
||||
.replaceAll(/-+/g, "-")
|
||||
.replaceAll(/(^-|-$)/g, "");
|
||||
};
|
||||
|
||||
export const getThemePath = (themeId: string, themeName?: string): string => {
|
||||
if (themeName) {
|
||||
const sanitizedName = sanitizeFolderName(themeName);
|
||||
if (sanitizedName) {
|
||||
return path.join(THEMES_PATH, sanitizedName);
|
||||
}
|
||||
}
|
||||
return path.join(THEMES_PATH, themeId);
|
||||
};
|
||||
|
||||
export const getThemeSoundPath = (
|
||||
themeId: string,
|
||||
themeName?: string
|
||||
): string | null => {
|
||||
const themeDir = getThemePath(themeId, themeName);
|
||||
const legacyThemeDir = themeName ? path.join(THEMES_PATH, themeId) : null;
|
||||
|
||||
const checkDir = (dir: string): string | null => {
|
||||
if (!fs.existsSync(dir)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const formats = ["wav", "mp3", "ogg", "m4a"];
|
||||
|
||||
for (const format of formats) {
|
||||
const soundPath = path.join(dir, `achievement.${format}`);
|
||||
if (fs.existsSync(soundPath)) {
|
||||
return soundPath;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const soundPath = checkDir(themeDir);
|
||||
if (soundPath) {
|
||||
return soundPath;
|
||||
}
|
||||
|
||||
if (legacyThemeDir) {
|
||||
return checkDir(legacyThemeDir);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export * from "./reg-parser";
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
import { levelKeys } from "./keys";
|
||||
import { db } from "../level";
|
||||
import { logger } from "@main/services";
|
||||
|
||||
// Gets when we last started the app (for next API call's 'since')
|
||||
export const getDownloadSourcesCheckBaseline = async (): Promise<
|
||||
string | null
|
||||
> => {
|
||||
try {
|
||||
const timestamp = await db.get(levelKeys.downloadSourcesCheckBaseline);
|
||||
return timestamp;
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.name === "NotFoundError") {
|
||||
logger.debug("Download sources check baseline not found, returning null");
|
||||
} else {
|
||||
logger.error(
|
||||
"Unexpected error while getting download sources check baseline",
|
||||
error
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// Updates to current time (when app starts)
|
||||
export const updateDownloadSourcesCheckBaseline = async (
|
||||
timestamp: string
|
||||
): Promise<void> => {
|
||||
const utcTimestamp = new Date(timestamp).toISOString();
|
||||
await db.put(levelKeys.downloadSourcesCheckBaseline, utcTimestamp);
|
||||
};
|
||||
|
||||
// Gets the 'since' value the API used in the last check (for modal comparison)
|
||||
export const getDownloadSourcesSinceValue = async (): Promise<
|
||||
string | null
|
||||
> => {
|
||||
try {
|
||||
const timestamp = await db.get(levelKeys.downloadSourcesSinceValue);
|
||||
return timestamp;
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.name === "NotFoundError") {
|
||||
logger.debug("Download sources since value not found, returning null");
|
||||
} else {
|
||||
logger.error(
|
||||
"Unexpected error while getting download sources since value",
|
||||
error
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// Saves the 'since' value we used in the API call (for modal to compare against)
|
||||
export const updateDownloadSourcesSinceValue = async (
|
||||
timestamp: string
|
||||
): Promise<void> => {
|
||||
const utcTimestamp = new Date(timestamp).toISOString();
|
||||
await db.put(levelKeys.downloadSourcesSinceValue, utcTimestamp);
|
||||
};
|
||||
@@ -7,4 +7,3 @@ export * from "./game-achievements";
|
||||
export * from "./keys";
|
||||
export * from "./themes";
|
||||
export * from "./download-sources";
|
||||
export * from "./downloadSourcesCheckTimestamp";
|
||||
|
||||
@@ -18,6 +18,4 @@ export const levelKeys = {
|
||||
screenState: "screenState",
|
||||
rpcPassword: "rpcPassword",
|
||||
downloadSources: "downloadSources",
|
||||
downloadSourcesCheckBaseline: "downloadSourcesCheckBaseline", // When we last started the app
|
||||
downloadSourcesSinceValue: "downloadSourcesSinceValue", // The 'since' value API used (for modal comparison)
|
||||
};
|
||||
|
||||
@@ -16,7 +16,6 @@ import {
|
||||
Ludusavi,
|
||||
Lock,
|
||||
DeckyPlugin,
|
||||
DownloadSourcesChecker,
|
||||
WSClient,
|
||||
} from "@main/services";
|
||||
import { migrateDownloadSources } from "./helpers/migrate-download-sources";
|
||||
@@ -58,9 +57,6 @@ export const loadState = async () => {
|
||||
|
||||
const { syncDownloadSourcesFromApi } = await import("./services/user");
|
||||
void syncDownloadSourcesFromApi();
|
||||
|
||||
// Check for new download options on startup
|
||||
DownloadSourcesChecker.checkForChanges();
|
||||
WSClient.connect();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,188 +0,0 @@
|
||||
import { HydraApi } from "./hydra-api";
|
||||
import {
|
||||
gamesSublevel,
|
||||
getDownloadSourcesCheckBaseline,
|
||||
updateDownloadSourcesCheckBaseline,
|
||||
updateDownloadSourcesSinceValue,
|
||||
downloadSourcesSublevel,
|
||||
} from "@main/level";
|
||||
import { logger } from "./logger";
|
||||
import { WindowManager } from "./window-manager";
|
||||
import type { Game } from "@types";
|
||||
|
||||
interface DownloadSourcesChangeResponse {
|
||||
shop: string;
|
||||
objectId: string;
|
||||
newDownloadOptionsCount: number;
|
||||
downloadSourceIds: string[];
|
||||
}
|
||||
|
||||
export class DownloadSourcesChecker {
|
||||
private static async clearStaleBadges(
|
||||
nonCustomGames: Game[]
|
||||
): Promise<{ gameId: string; count: number }[]> {
|
||||
const previouslyFlaggedGames = nonCustomGames.filter(
|
||||
(game: Game) =>
|
||||
game.newDownloadOptionsCount && game.newDownloadOptionsCount > 0
|
||||
);
|
||||
|
||||
const clearedPayload: { gameId: string; count: number }[] = [];
|
||||
if (previouslyFlaggedGames.length > 0) {
|
||||
logger.info(
|
||||
`Clearing stale newDownloadOptionsCount for ${previouslyFlaggedGames.length} games`
|
||||
);
|
||||
for (const game of previouslyFlaggedGames) {
|
||||
await gamesSublevel.put(`${game.shop}:${game.objectId}`, {
|
||||
...game,
|
||||
newDownloadOptionsCount: undefined,
|
||||
});
|
||||
clearedPayload.push({
|
||||
gameId: `${game.shop}:${game.objectId}`,
|
||||
count: 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return clearedPayload;
|
||||
}
|
||||
|
||||
private static async processApiResponse(
|
||||
response: unknown,
|
||||
nonCustomGames: Game[]
|
||||
): Promise<{ gameId: string; count: number }[]> {
|
||||
if (!response || !Array.isArray(response)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const gamesWithNewOptions: { gameId: string; count: number }[] = [];
|
||||
|
||||
for (const gameUpdate of response as DownloadSourcesChangeResponse[]) {
|
||||
if (gameUpdate.newDownloadOptionsCount > 0) {
|
||||
const game = nonCustomGames.find(
|
||||
(g) =>
|
||||
g.shop === gameUpdate.shop && g.objectId === gameUpdate.objectId
|
||||
);
|
||||
|
||||
if (game) {
|
||||
await gamesSublevel.put(`${game.shop}:${game.objectId}`, {
|
||||
...game,
|
||||
newDownloadOptionsCount: gameUpdate.newDownloadOptionsCount,
|
||||
});
|
||||
|
||||
gamesWithNewOptions.push({
|
||||
gameId: `${game.shop}:${game.objectId}`,
|
||||
count: gameUpdate.newDownloadOptionsCount,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return gamesWithNewOptions;
|
||||
}
|
||||
|
||||
private static sendNewDownloadOptionsEvent(
|
||||
clearedPayload: { gameId: string; count: number }[],
|
||||
gamesWithNewOptions: { gameId: string; count: number }[]
|
||||
): void {
|
||||
const eventPayload = [...clearedPayload, ...gamesWithNewOptions];
|
||||
if (eventPayload.length > 0 && WindowManager.mainWindow) {
|
||||
WindowManager.mainWindow.webContents.send(
|
||||
"on-new-download-options",
|
||||
eventPayload
|
||||
);
|
||||
}
|
||||
|
||||
logger.info(
|
||||
`Found new download options for ${gamesWithNewOptions.length} games`
|
||||
);
|
||||
}
|
||||
|
||||
static async checkForChanges(): Promise<void> {
|
||||
logger.info("DownloadSourcesChecker.checkForChanges() called");
|
||||
|
||||
try {
|
||||
// Get all installed games (excluding custom games)
|
||||
const installedGames = await gamesSublevel.values().all();
|
||||
const nonCustomGames = installedGames.filter(
|
||||
(game: Game) => game.shop !== "custom"
|
||||
);
|
||||
logger.info(
|
||||
`Found ${installedGames.length} total games, ${nonCustomGames.length} non-custom games`
|
||||
);
|
||||
|
||||
if (nonCustomGames.length === 0) {
|
||||
logger.info(
|
||||
"No non-custom games found, skipping download sources check"
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const downloadSources = await downloadSourcesSublevel.values().all();
|
||||
const downloadSourceIds = downloadSources.map((source) => source.id);
|
||||
logger.info(
|
||||
`Found ${downloadSourceIds.length} download sources: ${downloadSourceIds.join(", ")}`
|
||||
);
|
||||
|
||||
if (downloadSourceIds.length === 0) {
|
||||
logger.info(
|
||||
"No download sources found, skipping download sources check"
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const previousBaseline = await getDownloadSourcesCheckBaseline();
|
||||
const since =
|
||||
previousBaseline ||
|
||||
new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString();
|
||||
|
||||
logger.info(`Using since: ${since} (from last app start)`);
|
||||
|
||||
const clearedPayload = await this.clearStaleBadges(nonCustomGames);
|
||||
|
||||
const games = nonCustomGames.map((game: Game) => ({
|
||||
shop: game.shop,
|
||||
objectId: game.objectId,
|
||||
}));
|
||||
|
||||
logger.info(
|
||||
`Checking download sources changes for ${games.length} non-custom games since ${since}`
|
||||
);
|
||||
logger.info(
|
||||
`Making API call to HydraApi.checkDownloadSourcesChanges with:`,
|
||||
{
|
||||
downloadSourceIds,
|
||||
gamesCount: games.length,
|
||||
since,
|
||||
}
|
||||
);
|
||||
|
||||
const response = await HydraApi.checkDownloadSourcesChanges(
|
||||
downloadSourceIds,
|
||||
games,
|
||||
since
|
||||
);
|
||||
|
||||
logger.info("API call completed, response:", response);
|
||||
|
||||
await updateDownloadSourcesSinceValue(since);
|
||||
logger.info(`Saved 'since' value: ${since} (for modal comparison)`);
|
||||
|
||||
const now = new Date().toISOString();
|
||||
await updateDownloadSourcesCheckBaseline(now);
|
||||
logger.info(
|
||||
`Updated baseline to: ${now} (will be 'since' on next app start)`
|
||||
);
|
||||
|
||||
const gamesWithNewOptions = await this.processApiResponse(
|
||||
response,
|
||||
nonCustomGames
|
||||
);
|
||||
|
||||
this.sendNewDownloadOptionsEvent(clearedPayload, gamesWithNewOptions);
|
||||
|
||||
logger.info("Download sources check completed successfully");
|
||||
} catch (error) {
|
||||
logger.error("Failed to check download sources changes:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -400,45 +400,4 @@ export class HydraApi {
|
||||
.then((response) => response.data)
|
||||
.catch(this.handleUnauthorizedError);
|
||||
}
|
||||
|
||||
static async checkDownloadSourcesChanges(
|
||||
downloadSourceIds: string[],
|
||||
games: Array<{ shop: string; objectId: string }>,
|
||||
since: string
|
||||
) {
|
||||
logger.info("HydraApi.checkDownloadSourcesChanges called with:", {
|
||||
downloadSourceIds,
|
||||
gamesCount: games.length,
|
||||
since,
|
||||
isLoggedIn: this.isLoggedIn(),
|
||||
});
|
||||
|
||||
try {
|
||||
const result = await this.post<
|
||||
Array<{
|
||||
shop: string;
|
||||
objectId: string;
|
||||
newDownloadOptionsCount: number;
|
||||
downloadSourceIds: string[];
|
||||
}>
|
||||
>(
|
||||
"/download-sources/changes",
|
||||
{
|
||||
downloadSourceIds,
|
||||
games,
|
||||
since,
|
||||
},
|
||||
{ needsAuth: true }
|
||||
);
|
||||
|
||||
logger.info(
|
||||
"HydraApi.checkDownloadSourcesChanges completed successfully:",
|
||||
result
|
||||
);
|
||||
return result;
|
||||
} catch (error) {
|
||||
logger.error("HydraApi.checkDownloadSourcesChanges failed:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,4 +19,3 @@ export * from "./wine";
|
||||
export * from "./lock";
|
||||
export * from "./decky-plugin";
|
||||
export * from "./user";
|
||||
export * from "./download-sources-checker";
|
||||
|
||||
@@ -9,8 +9,6 @@ type ProfileGame = {
|
||||
hasManuallyUpdatedPlaytime: boolean;
|
||||
isFavorite?: boolean;
|
||||
isPinned?: boolean;
|
||||
achievementCount: number;
|
||||
unlockedAchievementCount: number;
|
||||
} & ShopAssets;
|
||||
|
||||
export const mergeWithRemoteGames = async () => {
|
||||
@@ -41,8 +39,6 @@ export const mergeWithRemoteGames = async () => {
|
||||
playTimeInMilliseconds: updatedPlayTime,
|
||||
favorite: game.isFavorite ?? localGame.favorite,
|
||||
isPinned: game.isPinned ?? localGame.isPinned,
|
||||
achievementCount: game.achievementCount,
|
||||
unlockedAchievementCount: game.unlockedAchievementCount,
|
||||
});
|
||||
} else {
|
||||
await gamesSublevel.put(gameKey, {
|
||||
@@ -59,27 +55,18 @@ export const mergeWithRemoteGames = async () => {
|
||||
isDeleted: false,
|
||||
favorite: game.isFavorite ?? false,
|
||||
isPinned: game.isPinned ?? false,
|
||||
achievementCount: game.achievementCount,
|
||||
unlockedAchievementCount: game.unlockedAchievementCount,
|
||||
});
|
||||
}
|
||||
|
||||
const localGameShopAsset = await gamesShopAssetsSublevel.get(gameKey);
|
||||
|
||||
// Construct coverImageUrl if not provided by backend (Steam games use predictable pattern)
|
||||
const coverImageUrl =
|
||||
game.coverImageUrl ||
|
||||
(game.shop === "steam"
|
||||
? `https://shared.steamstatic.com/store_item_assets/steam/apps/${game.objectId}/library_600x900_2x.jpg`
|
||||
: null);
|
||||
|
||||
await gamesShopAssetsSublevel.put(gameKey, {
|
||||
updatedAt: Date.now(),
|
||||
...localGameShopAsset,
|
||||
shop: game.shop,
|
||||
objectId: game.objectId,
|
||||
title: localGame?.title || game.title, // Preserve local title if it exists
|
||||
coverImageUrl,
|
||||
coverImageUrl: game.coverImageUrl,
|
||||
libraryHeroImageUrl: game.libraryHeroImageUrl,
|
||||
libraryImageUrl: game.libraryImageUrl,
|
||||
logoImageUrl: game.logoImageUrl,
|
||||
|
||||
@@ -11,10 +11,9 @@ import { NotificationOptions, toXmlString } from "./xml";
|
||||
import { logger } from "../logger";
|
||||
import { WindowManager } from "../window-manager";
|
||||
import type { Game, UserPreferences, UserProfile } from "@types";
|
||||
import { db, levelKeys, themesSublevel } from "@main/level";
|
||||
import { db, levelKeys } from "@main/level";
|
||||
import { restartAndInstallUpdate } from "@main/events/autoupdater/restart-and-install-update";
|
||||
import { SystemPath } from "../system-path";
|
||||
import { getThemeSoundPath } from "@main/helpers";
|
||||
|
||||
async function downloadImage(url: string | null) {
|
||||
if (!url) return undefined;
|
||||
@@ -41,27 +40,6 @@ async function downloadImage(url: string | null) {
|
||||
});
|
||||
}
|
||||
|
||||
async function getAchievementSoundPath(): Promise<string> {
|
||||
try {
|
||||
const allThemes = await themesSublevel.values().all();
|
||||
const activeTheme = allThemes.find((theme) => theme.isActive);
|
||||
|
||||
if (activeTheme?.hasCustomSound) {
|
||||
const themeSoundPath = getThemeSoundPath(
|
||||
activeTheme.id,
|
||||
activeTheme.name
|
||||
);
|
||||
if (themeSoundPath) {
|
||||
return themeSoundPath;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error("Failed to get theme sound path", error);
|
||||
}
|
||||
|
||||
return achievementSoundPath;
|
||||
}
|
||||
|
||||
export const publishDownloadCompleteNotification = async (game: Game) => {
|
||||
const userPreferences = await db.get<string, UserPreferences>(
|
||||
levelKeys.userPreferences,
|
||||
@@ -167,8 +145,7 @@ export const publishCombinedNewAchievementNotification = async (
|
||||
if (WindowManager.mainWindow) {
|
||||
WindowManager.mainWindow.webContents.send("on-achievement-unlocked");
|
||||
} else if (process.platform !== "linux") {
|
||||
const soundPath = await getAchievementSoundPath();
|
||||
sound.play(soundPath);
|
||||
sound.play(achievementSoundPath);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -228,7 +205,6 @@ export const publishNewAchievementNotification = async (info: {
|
||||
if (WindowManager.mainWindow) {
|
||||
WindowManager.mainWindow.webContents.send("on-achievement-unlocked");
|
||||
} else if (process.platform !== "linux") {
|
||||
const soundPath = await getAchievementSoundPath();
|
||||
sound.play(soundPath);
|
||||
sound.play(achievementSoundPath);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -16,7 +16,7 @@ export const requestSteam250 = async (path: string) => {
|
||||
if (!steamGameUrl) return null;
|
||||
|
||||
return {
|
||||
title: $title.getAttribute("data-title") || "",
|
||||
title: $title.textContent,
|
||||
objectId: steamGameUrl.split("/").pop(),
|
||||
} as Steam250Game;
|
||||
})
|
||||
|
||||
@@ -103,10 +103,6 @@ contextBridge.exposeInMainWorld("electron", {
|
||||
ipcRenderer.invoke("removeDownloadSource", url, removeAll),
|
||||
getDownloadSources: () => ipcRenderer.invoke("getDownloadSources"),
|
||||
syncDownloadSources: () => ipcRenderer.invoke("syncDownloadSources"),
|
||||
getDownloadSourcesCheckBaseline: () =>
|
||||
ipcRenderer.invoke("getDownloadSourcesCheckBaseline"),
|
||||
getDownloadSourcesSinceValue: () =>
|
||||
ipcRenderer.invoke("getDownloadSourcesSinceValue"),
|
||||
|
||||
/* Library */
|
||||
toggleAutomaticCloudSync: (
|
||||
@@ -183,8 +179,6 @@ contextBridge.exposeInMainWorld("electron", {
|
||||
ipcRenderer.invoke("addGameToFavorites", shop, objectId),
|
||||
removeGameFromFavorites: (shop: GameShop, objectId: string) =>
|
||||
ipcRenderer.invoke("removeGameFromFavorites", shop, objectId),
|
||||
clearNewDownloadOptions: (shop: GameShop, objectId: string) =>
|
||||
ipcRenderer.invoke("clearNewDownloadOptions", shop, objectId),
|
||||
toggleGamePin: (shop: GameShop, objectId: string, pinned: boolean) =>
|
||||
ipcRenderer.invoke("toggleGamePin", shop, objectId, pinned),
|
||||
updateLaunchOptions: (
|
||||
@@ -202,7 +196,6 @@ contextBridge.exposeInMainWorld("electron", {
|
||||
verifyExecutablePathInUse: (executablePath: string) =>
|
||||
ipcRenderer.invoke("verifyExecutablePathInUse", executablePath),
|
||||
getLibrary: () => ipcRenderer.invoke("getLibrary"),
|
||||
refreshLibraryAssets: () => ipcRenderer.invoke("refreshLibraryAssets"),
|
||||
openGameInstaller: (shop: GameShop, objectId: string) =>
|
||||
ipcRenderer.invoke("openGameInstaller", shop, objectId),
|
||||
openGameInstallerPath: (shop: GameShop, objectId: string) =>
|
||||
@@ -577,25 +570,6 @@ contextBridge.exposeInMainWorld("electron", {
|
||||
getActiveCustomTheme: () => ipcRenderer.invoke("getActiveCustomTheme"),
|
||||
toggleCustomTheme: (themeId: string, isActive: boolean) =>
|
||||
ipcRenderer.invoke("toggleCustomTheme", themeId, isActive),
|
||||
copyThemeAchievementSound: (themeId: string, sourcePath: string) =>
|
||||
ipcRenderer.invoke("copyThemeAchievementSound", themeId, sourcePath),
|
||||
removeThemeAchievementSound: (themeId: string) =>
|
||||
ipcRenderer.invoke("removeThemeAchievementSound", themeId),
|
||||
getThemeSoundPath: (themeId: string) =>
|
||||
ipcRenderer.invoke("getThemeSoundPath", themeId),
|
||||
getThemeSoundDataUrl: (themeId: string) =>
|
||||
ipcRenderer.invoke("getThemeSoundDataUrl", themeId),
|
||||
importThemeSoundFromStore: (
|
||||
themeId: string,
|
||||
themeName: string,
|
||||
storeUrl: string
|
||||
) =>
|
||||
ipcRenderer.invoke(
|
||||
"importThemeSoundFromStore",
|
||||
themeId,
|
||||
themeName,
|
||||
storeUrl
|
||||
),
|
||||
|
||||
/* Editor */
|
||||
openEditorWindow: (themeId: string) =>
|
||||
@@ -606,17 +580,6 @@ contextBridge.exposeInMainWorld("electron", {
|
||||
return () =>
|
||||
ipcRenderer.removeListener("on-custom-theme-updated", listener);
|
||||
},
|
||||
onNewDownloadOptions: (
|
||||
cb: (gamesWithNewOptions: { gameId: string; count: number }[]) => void
|
||||
) => {
|
||||
const listener = (
|
||||
_event: Electron.IpcRendererEvent,
|
||||
gamesWithNewOptions: { gameId: string; count: number }[]
|
||||
) => cb(gamesWithNewOptions);
|
||||
ipcRenderer.on("on-new-download-options", listener);
|
||||
return () =>
|
||||
ipcRenderer.removeListener("on-new-download-options", listener);
|
||||
},
|
||||
closeEditorWindow: (themeId?: string) =>
|
||||
ipcRenderer.invoke("closeEditorWindow", themeId),
|
||||
});
|
||||
|
||||
@@ -90,7 +90,6 @@ img {
|
||||
|
||||
progress[value] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
import achievementSound from "@renderer/assets/audio/achievement.wav";
|
||||
import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components";
|
||||
|
||||
import {
|
||||
@@ -9,7 +10,6 @@ import {
|
||||
useToast,
|
||||
useUserDetails,
|
||||
} from "@renderer/hooks";
|
||||
import { useDownloadOptionsListener } from "@renderer/hooks/use-download-options-listener";
|
||||
|
||||
import { Outlet, useLocation, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
@@ -25,12 +25,7 @@ import { UserFriendModal } from "./pages/shared-modals/user-friend-modal";
|
||||
import { useSubscription } from "./hooks/use-subscription";
|
||||
import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-modal";
|
||||
|
||||
import {
|
||||
injectCustomCss,
|
||||
removeCustomCss,
|
||||
getAchievementSoundUrl,
|
||||
getAchievementSoundVolume,
|
||||
} from "./helpers";
|
||||
import { injectCustomCss, removeCustomCss } from "./helpers";
|
||||
import "./app.scss";
|
||||
|
||||
export interface AppProps {
|
||||
@@ -41,9 +36,6 @@ export function App() {
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const { updateLibrary, library } = useLibrary();
|
||||
|
||||
// Listen for new download options updates
|
||||
useDownloadOptionsListener();
|
||||
|
||||
const { t } = useTranslation("app");
|
||||
|
||||
const { clearDownload, setLastPacket } = useDownload();
|
||||
@@ -224,11 +216,9 @@ export function App() {
|
||||
return () => unsubscribe();
|
||||
}, [loadAndApplyTheme]);
|
||||
|
||||
const playAudio = useCallback(async () => {
|
||||
const soundUrl = await getAchievementSoundUrl();
|
||||
const volume = await getAchievementSoundVolume();
|
||||
const audio = new Audio(soundUrl);
|
||||
audio.volume = volume;
|
||||
const playAudio = useCallback(() => {
|
||||
const audio = new Audio(achievementSound);
|
||||
audio.volume = 0.2;
|
||||
audio.play();
|
||||
}, []);
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@ export function GameCard({ game, ...props }: GameCardProps) {
|
||||
>
|
||||
<div className="game-card__backdrop">
|
||||
<img
|
||||
src={game.libraryImageUrl ?? undefined}
|
||||
src={game.libraryImageUrl}
|
||||
alt={game.title}
|
||||
className="game-card__cover"
|
||||
loading="lazy"
|
||||
|
||||
@@ -70,10 +70,8 @@ export function GameContextMenu({
|
||||
onClick: () => {
|
||||
if (isGameRunning) {
|
||||
void handleCloseGame();
|
||||
} else if (canPlay) {
|
||||
void handlePlayGame();
|
||||
} else {
|
||||
handleOpenDownloadOptions();
|
||||
void handlePlayGame();
|
||||
}
|
||||
},
|
||||
disabled: isDeleting,
|
||||
|
||||
@@ -7,13 +7,12 @@ import { useAppDispatch, useAppSelector } from "@renderer/hooks";
|
||||
|
||||
import "./header.scss";
|
||||
import { AutoUpdateSubHeader } from "./auto-update-sub-header";
|
||||
import { setFilters, setLibrarySearchQuery } from "@renderer/features";
|
||||
import { setFilters } from "@renderer/features";
|
||||
import cn from "classnames";
|
||||
|
||||
const pathTitle: Record<string, string> = {
|
||||
"/": "home",
|
||||
"/catalogue": "catalogue",
|
||||
"/library": "library",
|
||||
"/downloads": "downloads",
|
||||
"/settings": "settings",
|
||||
};
|
||||
@@ -28,20 +27,10 @@ export function Header() {
|
||||
(state) => state.window
|
||||
);
|
||||
|
||||
const catalogueSearchValue = useAppSelector(
|
||||
const searchValue = useAppSelector(
|
||||
(state) => state.catalogueSearch.filters.title
|
||||
);
|
||||
|
||||
const librarySearchValue = useAppSelector(
|
||||
(state) => state.library.searchQuery
|
||||
);
|
||||
|
||||
const isOnLibraryPage = location.pathname.startsWith("/library");
|
||||
|
||||
const searchValue = isOnLibraryPage
|
||||
? librarySearchValue
|
||||
: catalogueSearchValue;
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
@@ -52,8 +41,6 @@ export function Header() {
|
||||
if (location.pathname.startsWith("/game")) return headerTitle;
|
||||
if (location.pathname.startsWith("/achievements")) return headerTitle;
|
||||
if (location.pathname.startsWith("/profile")) return headerTitle;
|
||||
if (location.pathname.startsWith("/library"))
|
||||
return headerTitle || t("library");
|
||||
if (location.pathname.startsWith("/search")) return t("search_results");
|
||||
|
||||
return t(pathTitle[location.pathname]);
|
||||
@@ -73,29 +60,18 @@ export function Header() {
|
||||
};
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
if (isOnLibraryPage) {
|
||||
dispatch(setLibrarySearchQuery(value.slice(0, 255)));
|
||||
} else {
|
||||
dispatch(setFilters({ title: value.slice(0, 255) }));
|
||||
if (!location.pathname.startsWith("/catalogue")) {
|
||||
navigate("/catalogue");
|
||||
}
|
||||
}
|
||||
};
|
||||
dispatch(setFilters({ title: value.slice(0, 255) }));
|
||||
|
||||
const handleClearSearch = () => {
|
||||
if (isOnLibraryPage) {
|
||||
dispatch(setLibrarySearchQuery(""));
|
||||
} else {
|
||||
dispatch(setFilters({ title: "" }));
|
||||
if (!location.pathname.startsWith("/catalogue")) {
|
||||
navigate("/catalogue");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!location.pathname.startsWith("/catalogue") && catalogueSearchValue) {
|
||||
if (!location.pathname.startsWith("/catalogue") && searchValue) {
|
||||
dispatch(setFilters({ title: "" }));
|
||||
}
|
||||
}, [location.pathname, catalogueSearchValue, dispatch]);
|
||||
}, [location.pathname, searchValue, dispatch]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -144,7 +120,7 @@ export function Header() {
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
name="search"
|
||||
placeholder={isOnLibraryPage ? t("search_library") : t("search")}
|
||||
placeholder={t("search")}
|
||||
value={searchValue}
|
||||
className="header__search-input"
|
||||
onChange={(event) => handleSearch(event.target.value)}
|
||||
@@ -155,7 +131,7 @@ export function Header() {
|
||||
{searchValue && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClearSearch}
|
||||
onClick={() => dispatch(setFilters({ title: "" }))}
|
||||
className="header__action-button"
|
||||
>
|
||||
<XIcon />
|
||||
|
||||
@@ -50,14 +50,14 @@ export function Hero() {
|
||||
>
|
||||
<div className="hero__backdrop">
|
||||
<img
|
||||
src={game.libraryHeroImageUrl ?? undefined}
|
||||
src={game.libraryHeroImageUrl}
|
||||
alt={game.description ?? ""}
|
||||
className="hero__media"
|
||||
/>
|
||||
|
||||
<div className="hero__content">
|
||||
<img
|
||||
src={game.logoImageUrl ?? undefined}
|
||||
src={game.logoImageUrl}
|
||||
width="250px"
|
||||
alt={game.description ?? ""}
|
||||
loading="eager"
|
||||
|
||||
107
src/renderer/src/components/image-cropper/image-cropper.scss
Normal file
107
src/renderer/src/components/image-cropper/image-cropper.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
.image-cropper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
min-height: 500px;
|
||||
max-height: 600px;
|
||||
|
||||
&__container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&__image-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&__crop-overlay {
|
||||
position: absolute;
|
||||
border: 2px solid globals.$brand-teal;
|
||||
cursor: move;
|
||||
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
|
||||
background-color: transparent;
|
||||
|
||||
&--circular {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__crop-handle {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: globals.$brand-teal;
|
||||
border: 2px solid globals.$background-color;
|
||||
border-radius: 2px;
|
||||
cursor: nwse-resize;
|
||||
|
||||
&--nw {
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
&--ne {
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
&--sw {
|
||||
bottom: -6px;
|
||||
left: -6px;
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
&--se {
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
}
|
||||
|
||||
&__zoom-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
}
|
||||
|
||||
&__zoom-value {
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
color: globals.$body-color;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
730
src/renderer/src/components/image-cropper/image-cropper.tsx
Normal file
730
src/renderer/src/components/image-cropper/image-cropper.tsx
Normal file
@@ -0,0 +1,730 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Button } from "../button/button";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { logger } from "@renderer/logger";
|
||||
import "./image-cropper.scss";
|
||||
|
||||
export interface CropArea {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface ImageCropperProps {
|
||||
imagePath: string;
|
||||
onCrop: (cropArea: CropArea) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
aspectRatio?: number;
|
||||
circular?: boolean;
|
||||
minCropSize?: number;
|
||||
}
|
||||
|
||||
export function ImageCropper({
|
||||
imagePath,
|
||||
onCrop,
|
||||
onCancel,
|
||||
aspectRatio,
|
||||
circular = false,
|
||||
minCropSize = 50,
|
||||
}: Readonly<ImageCropperProps>) {
|
||||
const { t } = useTranslation("user_profile");
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
const [imageLoaded, setImageLoaded] = useState(false);
|
||||
const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
|
||||
const zoom = 0.5;
|
||||
const [cropArea, setCropArea] = useState<CropArea>({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
});
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [isResizing, setIsResizing] = useState(false);
|
||||
const [resizeHandle, setResizeHandle] = useState<string | null>(null);
|
||||
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
|
||||
const [cropStart, setCropStart] = useState<CropArea | null>(null);
|
||||
const [isCropping, setIsCropping] = useState(false);
|
||||
|
||||
const getImageSrc = () => {
|
||||
return imagePath.startsWith("local:") ? imagePath : `local:${imagePath}`;
|
||||
};
|
||||
|
||||
const calculateContainerBounds = useCallback(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return null;
|
||||
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
if (containerRect.width === 0 || containerRect.height === 0) return null;
|
||||
|
||||
const computedStyle = globalThis.getComputedStyle(container);
|
||||
const paddingLeft = Number.parseFloat(computedStyle.paddingLeft) || 0;
|
||||
const paddingRight = Number.parseFloat(computedStyle.paddingRight) || 0;
|
||||
const paddingTop = Number.parseFloat(computedStyle.paddingTop) || 0;
|
||||
const paddingBottom = Number.parseFloat(computedStyle.paddingBottom) || 0;
|
||||
|
||||
return {
|
||||
maxWidth: containerRect.width - paddingLeft - paddingRight,
|
||||
maxHeight: containerRect.height - paddingTop - paddingBottom,
|
||||
};
|
||||
}, []);
|
||||
|
||||
const calculateDisplayDimensions = useCallback(
|
||||
(bounds: { maxWidth: number; maxHeight: number } | null) => {
|
||||
if (!imageLoaded) return { width: 0, height: 0 };
|
||||
|
||||
if (!bounds) {
|
||||
return {
|
||||
width: imageSize.width * zoom,
|
||||
height: imageSize.height * zoom,
|
||||
};
|
||||
}
|
||||
|
||||
const imageAspect = imageSize.width / imageSize.height;
|
||||
let displayWidth = imageSize.width * zoom;
|
||||
let displayHeight = imageSize.height * zoom;
|
||||
|
||||
if (displayWidth > bounds.maxWidth) {
|
||||
displayWidth = bounds.maxWidth;
|
||||
displayHeight = displayWidth / imageAspect;
|
||||
}
|
||||
if (displayHeight > bounds.maxHeight) {
|
||||
displayHeight = bounds.maxHeight;
|
||||
displayWidth = displayHeight * imageAspect;
|
||||
}
|
||||
|
||||
return { width: displayWidth, height: displayHeight };
|
||||
},
|
||||
[imageLoaded, imageSize]
|
||||
);
|
||||
|
||||
const calculateInitialCropArea = useCallback(() => {
|
||||
const bounds = calculateContainerBounds();
|
||||
if (!bounds || bounds.maxWidth <= 0 || bounds.maxHeight <= 0) return;
|
||||
|
||||
const { width: displayWidth, height: displayHeight } =
|
||||
calculateDisplayDimensions(bounds);
|
||||
|
||||
const effectiveAspectRatio = circular ? 1 : aspectRatio;
|
||||
let cropWidth: number;
|
||||
let cropHeight: number;
|
||||
|
||||
if (effectiveAspectRatio) {
|
||||
const displayAspect = displayWidth / displayHeight;
|
||||
if (displayAspect > effectiveAspectRatio) {
|
||||
cropHeight = displayHeight * 0.8;
|
||||
cropWidth = cropHeight * effectiveAspectRatio;
|
||||
} else {
|
||||
cropWidth = displayWidth * 0.8;
|
||||
cropHeight = cropWidth / effectiveAspectRatio;
|
||||
}
|
||||
} else {
|
||||
const cropSize = Math.min(displayWidth, displayHeight) * 0.8;
|
||||
cropWidth = cropSize;
|
||||
cropHeight = cropSize;
|
||||
}
|
||||
|
||||
setCropArea({
|
||||
x: (displayWidth - cropWidth) / 2,
|
||||
y: (displayHeight - cropHeight) / 2,
|
||||
width: cropWidth,
|
||||
height: cropHeight,
|
||||
});
|
||||
}, [
|
||||
calculateContainerBounds,
|
||||
calculateDisplayDimensions,
|
||||
aspectRatio,
|
||||
circular,
|
||||
]);
|
||||
|
||||
const getDisplaySize = useCallback(() => {
|
||||
const bounds = calculateContainerBounds();
|
||||
return calculateDisplayDimensions(bounds);
|
||||
}, [calculateContainerBounds, calculateDisplayDimensions]);
|
||||
|
||||
useEffect(() => {
|
||||
const img = new Image();
|
||||
const handleImageLoad = () => {
|
||||
setImageSize({ width: img.width, height: img.height });
|
||||
setImageLoaded(true);
|
||||
};
|
||||
const handleImageError = (error: Event | string) => {
|
||||
logger.error("Failed to load image:", { src: getImageSrc(), error });
|
||||
};
|
||||
img.onload = handleImageLoad;
|
||||
img.onerror = handleImageError;
|
||||
img.src = getImageSrc();
|
||||
}, [imagePath]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!imageLoaded || imageSize.width === 0 || imageSize.height === 0) return;
|
||||
|
||||
const performDoubleAnimationFrame = () => {
|
||||
calculateInitialCropArea();
|
||||
};
|
||||
|
||||
const handleAnimationFrame = () => {
|
||||
requestAnimationFrame(performDoubleAnimationFrame);
|
||||
};
|
||||
|
||||
const calculateWithDelay = () => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
if (containerRect.width === 0 || containerRect.height === 0) return;
|
||||
|
||||
requestAnimationFrame(handleAnimationFrame);
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
calculateWithDelay();
|
||||
};
|
||||
|
||||
const timeoutId = setTimeout(calculateWithDelay, 200);
|
||||
|
||||
const resizeObserver = new ResizeObserver(handleResize);
|
||||
|
||||
const container = containerRef.current;
|
||||
if (container) {
|
||||
resizeObserver.observe(container);
|
||||
}
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}, [imageLoaded, imageSize, calculateInitialCropArea]);
|
||||
|
||||
const getRealCropArea = (): CropArea => {
|
||||
if (!imageLoaded || imageSize.width === 0 || imageSize.height === 0) {
|
||||
return cropArea;
|
||||
}
|
||||
|
||||
const displaySize = getDisplaySize();
|
||||
if (displaySize.width === 0 || displaySize.height === 0) {
|
||||
return cropArea;
|
||||
}
|
||||
|
||||
const scaleX = imageSize.width / displaySize.width;
|
||||
const scaleY = imageSize.height / displaySize.height;
|
||||
|
||||
return {
|
||||
x: cropArea.x * scaleX,
|
||||
y: cropArea.y * scaleY,
|
||||
width: cropArea.width * scaleX,
|
||||
height: cropArea.height * scaleY,
|
||||
};
|
||||
};
|
||||
|
||||
const enforceAspectRatio = (
|
||||
width: number,
|
||||
height: number,
|
||||
ratio: number
|
||||
): { width: number; height: number } => {
|
||||
const currentRatio = width / height;
|
||||
if (currentRatio > ratio) {
|
||||
return { width, height: width / ratio };
|
||||
}
|
||||
return { width: height * ratio, height };
|
||||
};
|
||||
|
||||
const calculateMinSize = useCallback(
|
||||
(effectiveAspectRatio: number | undefined) => {
|
||||
if (!effectiveAspectRatio) return minCropSize;
|
||||
return effectiveAspectRatio > 1
|
||||
? minCropSize * effectiveAspectRatio
|
||||
: minCropSize / effectiveAspectRatio;
|
||||
},
|
||||
[minCropSize]
|
||||
);
|
||||
|
||||
const getImageWrapperBounds = useCallback(() => {
|
||||
const imageWrapper = imageRef.current?.parentElement;
|
||||
if (!imageWrapper) return { width: 0, height: 0 };
|
||||
|
||||
const rect = imageWrapper.getBoundingClientRect();
|
||||
return { width: rect.width, height: rect.height };
|
||||
}, []);
|
||||
|
||||
const constrainCropArea = useCallback(
|
||||
(area: CropArea): CropArea => {
|
||||
const displaySize = getDisplaySize();
|
||||
const wrapperBounds = getImageWrapperBounds();
|
||||
const actualBounds = {
|
||||
width:
|
||||
wrapperBounds.width > 0 ? wrapperBounds.width : displaySize.width,
|
||||
height:
|
||||
wrapperBounds.height > 0 ? wrapperBounds.height : displaySize.height,
|
||||
};
|
||||
|
||||
let { x, y, width, height } = area;
|
||||
const effectiveAspectRatio = circular ? 1 : aspectRatio;
|
||||
const minSize = calculateMinSize(effectiveAspectRatio);
|
||||
|
||||
if (effectiveAspectRatio) {
|
||||
({ width, height } = enforceAspectRatio(
|
||||
width,
|
||||
height,
|
||||
effectiveAspectRatio
|
||||
));
|
||||
|
||||
const maxWidth = Math.min(
|
||||
actualBounds.width,
|
||||
actualBounds.height * effectiveAspectRatio
|
||||
);
|
||||
const maxHeight = Math.min(
|
||||
actualBounds.height,
|
||||
actualBounds.width / effectiveAspectRatio
|
||||
);
|
||||
|
||||
width = Math.max(minSize, Math.min(width, maxWidth));
|
||||
height = Math.max(minSize, Math.min(height, maxHeight));
|
||||
|
||||
({ width, height } = enforceAspectRatio(
|
||||
width,
|
||||
height,
|
||||
effectiveAspectRatio
|
||||
));
|
||||
|
||||
width = Math.min(width, actualBounds.width);
|
||||
height = Math.min(height, actualBounds.height);
|
||||
({ width, height } = enforceAspectRatio(
|
||||
width,
|
||||
height,
|
||||
effectiveAspectRatio
|
||||
));
|
||||
} else {
|
||||
width = Math.max(minSize, Math.min(width, actualBounds.width));
|
||||
height = Math.max(minSize, Math.min(height, actualBounds.height));
|
||||
}
|
||||
|
||||
x = Math.max(0, Math.min(x, actualBounds.width - width));
|
||||
y = Math.max(0, Math.min(y, actualBounds.height - height));
|
||||
|
||||
return { x, y, width, height };
|
||||
},
|
||||
[
|
||||
getDisplaySize,
|
||||
getImageWrapperBounds,
|
||||
circular,
|
||||
aspectRatio,
|
||||
calculateMinSize,
|
||||
]
|
||||
);
|
||||
|
||||
const getRelativeCoordinates = (
|
||||
e: MouseEvent | React.MouseEvent
|
||||
): { x: number; y: number } | null => {
|
||||
const imageWrapper = imageRef.current?.parentElement;
|
||||
if (!imageWrapper) return null;
|
||||
|
||||
const rect = imageWrapper.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
return { x, y };
|
||||
};
|
||||
|
||||
const handleDrag = useCallback(
|
||||
(coords: { x: number; y: number }) => {
|
||||
const newX = coords.x - dragStart.x;
|
||||
const newY = coords.y - dragStart.y;
|
||||
setCropArea((prev) => constrainCropArea({ ...prev, x: newX, y: newY }));
|
||||
},
|
||||
[dragStart, constrainCropArea]
|
||||
);
|
||||
|
||||
const calculateResizeDeltas = (
|
||||
resizeHandle: string,
|
||||
coords: { x: number; y: number },
|
||||
cropStart: CropArea
|
||||
) => {
|
||||
const handleMap: Record<
|
||||
string,
|
||||
(
|
||||
coords: { x: number; y: number },
|
||||
cropStart: CropArea
|
||||
) => {
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
newX: number;
|
||||
newY: number;
|
||||
}
|
||||
> = {
|
||||
"resize-se": (c, cs) => ({
|
||||
deltaX: c.x - (cs.x + cs.width),
|
||||
deltaY: c.y - (cs.y + cs.height),
|
||||
newX: cs.x,
|
||||
newY: cs.y,
|
||||
}),
|
||||
"resize-sw": (c, cs) => ({
|
||||
deltaX: cs.x - c.x,
|
||||
deltaY: c.y - (cs.y + cs.height),
|
||||
newX: c.x,
|
||||
newY: cs.y,
|
||||
}),
|
||||
"resize-ne": (c, cs) => ({
|
||||
deltaX: c.x - (cs.x + cs.width),
|
||||
deltaY: cs.y - c.y,
|
||||
newX: cs.x,
|
||||
newY: c.y,
|
||||
}),
|
||||
"resize-nw": (c, cs) => ({
|
||||
deltaX: cs.x - c.x,
|
||||
deltaY: cs.y - c.y,
|
||||
newX: c.x,
|
||||
newY: c.y,
|
||||
}),
|
||||
};
|
||||
|
||||
const handler = handleMap[resizeHandle];
|
||||
if (handler) {
|
||||
return handler(coords, cropStart);
|
||||
}
|
||||
|
||||
return {
|
||||
deltaX: 0,
|
||||
deltaY: 0,
|
||||
newX: cropStart.x,
|
||||
newY: cropStart.y,
|
||||
};
|
||||
};
|
||||
|
||||
const adjustPositionForHandle = (
|
||||
resizeHandle: string,
|
||||
cropStart: CropArea,
|
||||
adjustedWidth: number,
|
||||
adjustedHeight: number
|
||||
) => {
|
||||
let adjustedX = cropStart.x;
|
||||
let adjustedY = cropStart.y;
|
||||
|
||||
if (resizeHandle === "resize-nw" || resizeHandle === "resize-sw") {
|
||||
adjustedX = cropStart.x + cropStart.width - adjustedWidth;
|
||||
}
|
||||
if (resizeHandle === "resize-nw" || resizeHandle === "resize-ne") {
|
||||
adjustedY = cropStart.y + cropStart.height - adjustedHeight;
|
||||
}
|
||||
|
||||
return { x: adjustedX, y: adjustedY };
|
||||
};
|
||||
|
||||
const applyCircularConstraint = (
|
||||
newWidth: number,
|
||||
newHeight: number,
|
||||
cropStart: CropArea,
|
||||
resizeHandle: string
|
||||
) => {
|
||||
const size = Math.min(newWidth, newHeight);
|
||||
const deltaSize = size - Math.min(cropStart.width, cropStart.height);
|
||||
const adjustedWidth = cropStart.width + deltaSize;
|
||||
const adjustedHeight = cropStart.height + deltaSize;
|
||||
|
||||
const { x, y } = adjustPositionForHandle(
|
||||
resizeHandle,
|
||||
cropStart,
|
||||
adjustedWidth,
|
||||
adjustedHeight
|
||||
);
|
||||
|
||||
return { width: adjustedWidth, height: adjustedHeight, x, y };
|
||||
};
|
||||
|
||||
const applyAspectRatioConstraint = (
|
||||
newWidth: number,
|
||||
newHeight: number,
|
||||
cropStart: CropArea,
|
||||
resizeHandle: string,
|
||||
aspectRatio: number
|
||||
) => {
|
||||
const deltaX = Math.abs(newWidth - cropStart.width);
|
||||
const deltaY = Math.abs(newHeight - cropStart.height);
|
||||
|
||||
let adjustedWidth: number;
|
||||
let adjustedHeight: number;
|
||||
|
||||
if (deltaX > deltaY) {
|
||||
adjustedWidth = newWidth;
|
||||
adjustedHeight = newWidth / aspectRatio;
|
||||
} else {
|
||||
adjustedHeight = newHeight;
|
||||
adjustedWidth = newHeight * aspectRatio;
|
||||
}
|
||||
|
||||
const wrapperBounds = getImageWrapperBounds();
|
||||
const displaySize = getDisplaySize();
|
||||
const actualBounds = {
|
||||
width: wrapperBounds.width > 0 ? wrapperBounds.width : displaySize.width,
|
||||
height:
|
||||
wrapperBounds.height > 0 ? wrapperBounds.height : displaySize.height,
|
||||
};
|
||||
|
||||
const maxWidth = Math.min(
|
||||
actualBounds.width,
|
||||
actualBounds.height * aspectRatio
|
||||
);
|
||||
const maxHeight = Math.min(
|
||||
actualBounds.height,
|
||||
actualBounds.width / aspectRatio
|
||||
);
|
||||
|
||||
adjustedWidth = Math.min(adjustedWidth, maxWidth);
|
||||
adjustedHeight = Math.min(adjustedHeight, maxHeight);
|
||||
|
||||
const finalRatio = adjustedWidth / adjustedHeight;
|
||||
if (Math.abs(finalRatio - aspectRatio) > 0.001) {
|
||||
if (finalRatio > aspectRatio) {
|
||||
adjustedHeight = adjustedWidth / aspectRatio;
|
||||
} else {
|
||||
adjustedWidth = adjustedHeight * aspectRatio;
|
||||
}
|
||||
}
|
||||
|
||||
const { x, y } = adjustPositionForHandle(
|
||||
resizeHandle,
|
||||
cropStart,
|
||||
adjustedWidth,
|
||||
adjustedHeight
|
||||
);
|
||||
|
||||
return { width: adjustedWidth, height: adjustedHeight, x, y };
|
||||
};
|
||||
|
||||
const handleResize = useCallback(
|
||||
(coords: { x: number; y: number }) => {
|
||||
if (!cropStart || !resizeHandle) return;
|
||||
|
||||
const { deltaX, deltaY, newX, newY } = calculateResizeDeltas(
|
||||
resizeHandle,
|
||||
coords,
|
||||
cropStart
|
||||
);
|
||||
|
||||
let adjustedWidth = cropStart.width + deltaX;
|
||||
let adjustedHeight = cropStart.height + deltaY;
|
||||
let adjustedX = newX;
|
||||
let adjustedY = newY;
|
||||
|
||||
if (circular) {
|
||||
const constrained = applyCircularConstraint(
|
||||
adjustedWidth,
|
||||
adjustedHeight,
|
||||
cropStart,
|
||||
resizeHandle
|
||||
);
|
||||
adjustedWidth = constrained.width;
|
||||
adjustedHeight = constrained.height;
|
||||
adjustedX = constrained.x;
|
||||
adjustedY = constrained.y;
|
||||
} else if (aspectRatio) {
|
||||
const constrained = applyAspectRatioConstraint(
|
||||
adjustedWidth,
|
||||
adjustedHeight,
|
||||
cropStart,
|
||||
resizeHandle,
|
||||
aspectRatio
|
||||
);
|
||||
adjustedWidth = constrained.width;
|
||||
adjustedHeight = constrained.height;
|
||||
adjustedX = constrained.x;
|
||||
adjustedY = constrained.y;
|
||||
}
|
||||
|
||||
const newCropArea = constrainCropArea({
|
||||
x: adjustedX,
|
||||
y: adjustedY,
|
||||
width: adjustedWidth,
|
||||
height: adjustedHeight,
|
||||
});
|
||||
setCropArea(newCropArea);
|
||||
},
|
||||
[cropStart, resizeHandle, circular, aspectRatio, constrainCropArea]
|
||||
);
|
||||
|
||||
const handleMouseDown = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
if (!imageLoaded) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const coords = getRelativeCoordinates(e);
|
||||
if (!coords) return;
|
||||
|
||||
const handle = (e.target as HTMLElement)?.dataset?.handle;
|
||||
if (handle?.startsWith("resize-")) {
|
||||
setIsResizing(true);
|
||||
setResizeHandle(handle);
|
||||
setCropStart(cropArea);
|
||||
} else if (
|
||||
coords.x >= cropArea.x &&
|
||||
coords.x <= cropArea.x + cropArea.width &&
|
||||
coords.y >= cropArea.y &&
|
||||
coords.y <= cropArea.y + cropArea.height
|
||||
) {
|
||||
setIsDragging(true);
|
||||
setDragStart({ x: coords.x - cropArea.x, y: coords.y - cropArea.y });
|
||||
}
|
||||
},
|
||||
[imageLoaded, cropArea]
|
||||
);
|
||||
|
||||
const handleMouseMove = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (!imageLoaded) return;
|
||||
|
||||
const coords = getRelativeCoordinates(e);
|
||||
if (!coords) return;
|
||||
|
||||
if (isDragging && cropStart === null) {
|
||||
handleDrag(coords);
|
||||
} else if (isResizing && cropStart && resizeHandle) {
|
||||
handleResize(coords);
|
||||
}
|
||||
},
|
||||
[
|
||||
imageLoaded,
|
||||
isDragging,
|
||||
isResizing,
|
||||
cropStart,
|
||||
resizeHandle,
|
||||
handleDrag,
|
||||
handleResize,
|
||||
]
|
||||
);
|
||||
|
||||
const handleMouseUp = useCallback(() => {
|
||||
setIsDragging(false);
|
||||
setIsResizing(false);
|
||||
setResizeHandle(null);
|
||||
setCropStart(null);
|
||||
}, []);
|
||||
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleOverlayKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
const step = e.shiftKey ? 10 : 1;
|
||||
const keyMap: Record<
|
||||
string,
|
||||
(area: CropArea) => { x: number; y: number }
|
||||
> = {
|
||||
ArrowLeft: (area) => ({ x: area.x - step, y: area.y }),
|
||||
ArrowRight: (area) => ({ x: area.x + step, y: area.y }),
|
||||
ArrowUp: (area) => ({ x: area.x, y: area.y - step }),
|
||||
ArrowDown: (area) => ({ x: area.x, y: area.y + step }),
|
||||
};
|
||||
|
||||
const handler = keyMap[e.key];
|
||||
if (!handler) return;
|
||||
|
||||
e.preventDefault();
|
||||
const { x: newX, y: newY } = handler(cropArea);
|
||||
setCropArea((prev) => constrainCropArea({ ...prev, x: newX, y: newY }));
|
||||
},
|
||||
[cropArea, constrainCropArea]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDragging && !isResizing) return;
|
||||
|
||||
const cleanup = () => {
|
||||
globalThis.removeEventListener("mousemove", handleMouseMove);
|
||||
globalThis.removeEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
|
||||
globalThis.addEventListener("mousemove", handleMouseMove);
|
||||
globalThis.addEventListener("mouseup", handleMouseUp);
|
||||
return cleanup;
|
||||
}, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
|
||||
|
||||
const handleCrop = async () => {
|
||||
setIsCropping(true);
|
||||
try {
|
||||
const realCropArea = getRealCropArea();
|
||||
await onCrop(realCropArea);
|
||||
} finally {
|
||||
setIsCropping(false);
|
||||
}
|
||||
};
|
||||
|
||||
const displaySize = getDisplaySize();
|
||||
|
||||
return (
|
||||
<div className="image-cropper">
|
||||
<div className="image-cropper__container" ref={containerRef}>
|
||||
<div
|
||||
className="image-cropper__image-wrapper"
|
||||
style={{
|
||||
width: `${displaySize.width}px`,
|
||||
height: `${displaySize.height}px`,
|
||||
maxWidth: "100%",
|
||||
maxHeight: "100%",
|
||||
}}
|
||||
>
|
||||
{imageLoaded && (
|
||||
<img
|
||||
ref={imageRef}
|
||||
src={getImageSrc()}
|
||||
alt="Crop"
|
||||
className="image-cropper__image"
|
||||
style={{
|
||||
width: `${displaySize.width}px`,
|
||||
height: `${displaySize.height}px`,
|
||||
maxWidth: "100%",
|
||||
maxHeight: "100%",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{imageLoaded && cropArea.width > 0 && cropArea.height > 0 && (
|
||||
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
|
||||
<section
|
||||
className={`image-cropper__crop-overlay ${circular ? "image-cropper__crop-overlay--circular" : ""}`}
|
||||
style={{
|
||||
left: `${cropArea.x}px`,
|
||||
top: `${cropArea.y}px`,
|
||||
width: `${cropArea.width}px`,
|
||||
height: `${cropArea.height}px`,
|
||||
}}
|
||||
aria-label={t("crop_area")}
|
||||
onMouseDown={handleMouseDown}
|
||||
onKeyDown={handleOverlayKeyDown}
|
||||
>
|
||||
{(["nw", "ne", "sw", "se"] as const).map((position) => (
|
||||
<button
|
||||
key={position}
|
||||
type="button"
|
||||
className={`image-cropper__crop-handle image-cropper__crop-handle--${position}`}
|
||||
data-handle={`resize-${position}`}
|
||||
aria-label={t(`resize_handle_${position}`)}
|
||||
onMouseDown={handleMouseDown}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="image-cropper__controls">
|
||||
<div className="image-cropper__actions">
|
||||
<Button theme="outline" onClick={onCancel} disabled={isCropping}>
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
theme="primary"
|
||||
onClick={handleCrop}
|
||||
disabled={isCropping || !imageLoaded}
|
||||
>
|
||||
{isCropping ? t("cropping") : t("crop")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -19,3 +19,4 @@ export * from "./context-menu/context-menu";
|
||||
export * from "./game-context-menu/game-context-menu";
|
||||
export * from "./game-context-menu/use-game-actions";
|
||||
export * from "./star-rating/star-rating";
|
||||
export * from "./image-cropper/image-cropper";
|
||||
|
||||
@@ -3,7 +3,6 @@ import {
|
||||
DownloadIcon,
|
||||
GearIcon,
|
||||
HomeIcon,
|
||||
BookIcon,
|
||||
} from "@primer/octicons-react";
|
||||
|
||||
export const routes = [
|
||||
@@ -17,11 +16,6 @@ export const routes = [
|
||||
nameKey: "catalogue",
|
||||
render: () => <AppsIcon />,
|
||||
},
|
||||
{
|
||||
path: "/library",
|
||||
nameKey: "library",
|
||||
render: () => <BookIcon />,
|
||||
},
|
||||
{
|
||||
path: "/downloads",
|
||||
nameKey: "downloads",
|
||||
|
||||
@@ -80,12 +80,6 @@ export function SidebarGameItem({
|
||||
<span className="sidebar__menu-item-button-label">
|
||||
{getGameTitle(game)}
|
||||
</span>
|
||||
|
||||
{(game.newDownloadOptionsCount ?? 0) > 0 && (
|
||||
<span className="sidebar__game-badge">
|
||||
+{game.newDownloadOptionsCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
|
||||
|
||||
@@ -115,19 +115,6 @@
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__game-badge {
|
||||
background-color: rgba(34, 197, 94, 0.15);
|
||||
color: rgb(187, 247, 208);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 4px 6px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
|
||||
&__section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
24
src/renderer/src/declaration.d.ts
vendored
24
src/renderer/src/declaration.d.ts
vendored
@@ -142,10 +142,6 @@ declare global {
|
||||
shop: GameShop,
|
||||
objectId: string
|
||||
) => Promise<void>;
|
||||
clearNewDownloadOptions: (
|
||||
shop: GameShop,
|
||||
objectId: string
|
||||
) => Promise<void>;
|
||||
toggleGamePin: (
|
||||
shop: GameShop,
|
||||
objectId: string,
|
||||
@@ -163,7 +159,6 @@ declare global {
|
||||
) => Promise<void>;
|
||||
verifyExecutablePathInUse: (executablePath: string) => Promise<Game>;
|
||||
getLibrary: () => Promise<LibraryGame[]>;
|
||||
refreshLibraryAssets: () => Promise<void>;
|
||||
openGameInstaller: (shop: GameShop, objectId: string) => Promise<boolean>;
|
||||
openGameInstallerPath: (shop: GameShop, objectId: string) => Promise<void>;
|
||||
openGameExecutablePath: (shop: GameShop, objectId: string) => Promise<void>;
|
||||
@@ -219,8 +214,6 @@ declare global {
|
||||
) => Promise<void>;
|
||||
getDownloadSources: () => Promise<DownloadSource[]>;
|
||||
syncDownloadSources: () => Promise<void>;
|
||||
getDownloadSourcesCheckBaseline: () => Promise<string | null>;
|
||||
getDownloadSourcesSinceValue: () => Promise<string | null>;
|
||||
|
||||
/* Hardware */
|
||||
getDiskFreeSpace: (path: string) => Promise<DiskUsage>;
|
||||
@@ -416,28 +409,11 @@ declare global {
|
||||
getCustomThemeById: (themeId: string) => Promise<Theme | null>;
|
||||
getActiveCustomTheme: () => Promise<Theme | null>;
|
||||
toggleCustomTheme: (themeId: string, isActive: boolean) => Promise<void>;
|
||||
copyThemeAchievementSound: (
|
||||
themeId: string,
|
||||
sourcePath: string
|
||||
) => Promise<void>;
|
||||
removeThemeAchievementSound: (themeId: string) => Promise<void>;
|
||||
getThemeSoundPath: (themeId: string) => Promise<string | null>;
|
||||
getThemeSoundDataUrl: (themeId: string) => Promise<string | null>;
|
||||
importThemeSoundFromStore: (
|
||||
themeId: string,
|
||||
themeName: string,
|
||||
storeUrl: string
|
||||
) => Promise<void>;
|
||||
|
||||
/* Editor */
|
||||
openEditorWindow: (themeId: string) => Promise<void>;
|
||||
onCustomThemeUpdated: (cb: () => void) => () => Electron.IpcRenderer;
|
||||
closeEditorWindow: (themeId?: string) => Promise<void>;
|
||||
|
||||
/* Download Options */
|
||||
onNewDownloadOptions: (
|
||||
cb: (gamesWithNewOptions: { gameId: string; count: number }[]) => void
|
||||
) => () => Electron.IpcRenderer;
|
||||
}
|
||||
|
||||
interface Window {
|
||||
|
||||
@@ -5,12 +5,10 @@ import type { LibraryGame } from "@types";
|
||||
|
||||
export interface LibraryState {
|
||||
value: LibraryGame[];
|
||||
searchQuery: string;
|
||||
}
|
||||
|
||||
const initialState: LibraryState = {
|
||||
value: [],
|
||||
searchQuery: "",
|
||||
};
|
||||
|
||||
export const librarySlice = createSlice({
|
||||
@@ -20,34 +18,7 @@ export const librarySlice = createSlice({
|
||||
setLibrary: (state, action: PayloadAction<LibraryState["value"]>) => {
|
||||
state.value = action.payload;
|
||||
},
|
||||
|
||||
updateGameNewDownloadOptions: (
|
||||
state,
|
||||
action: PayloadAction<{ gameId: string; count: number }>
|
||||
) => {
|
||||
const game = state.value.find((g) => g.id === action.payload.gameId);
|
||||
if (game) {
|
||||
game.newDownloadOptionsCount = action.payload.count;
|
||||
}
|
||||
},
|
||||
clearNewDownloadOptions: (
|
||||
state,
|
||||
action: PayloadAction<{ gameId: string }>
|
||||
) => {
|
||||
const game = state.value.find((g) => g.id === action.payload.gameId);
|
||||
if (game) {
|
||||
game.newDownloadOptionsCount = undefined;
|
||||
}
|
||||
},
|
||||
setLibrarySearchQuery: (state, action: PayloadAction<string>) => {
|
||||
state.searchQuery = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const {
|
||||
setLibrary,
|
||||
updateGameNewDownloadOptions,
|
||||
clearNewDownloadOptions,
|
||||
setLibrarySearchQuery,
|
||||
} = librarySlice.actions;
|
||||
export const { setLibrary } = librarySlice.actions;
|
||||
|
||||
@@ -121,35 +121,3 @@ export const formatNumber = (num: number): string => {
|
||||
export const generateUUID = (): string => {
|
||||
return uuidv4();
|
||||
};
|
||||
|
||||
export const getAchievementSoundUrl = async (): Promise<string> => {
|
||||
const defaultSound = (await import("@renderer/assets/audio/achievement.wav"))
|
||||
.default;
|
||||
|
||||
try {
|
||||
const activeTheme = await window.electron.getActiveCustomTheme();
|
||||
|
||||
if (activeTheme?.hasCustomSound) {
|
||||
const soundDataUrl = await window.electron.getThemeSoundDataUrl(
|
||||
activeTheme.id
|
||||
);
|
||||
if (soundDataUrl) {
|
||||
return soundDataUrl;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to get theme sound", error);
|
||||
}
|
||||
|
||||
return defaultSound;
|
||||
};
|
||||
|
||||
export const getAchievementSoundVolume = async (): Promise<number> => {
|
||||
try {
|
||||
const prefs = await window.electron.getUserPreferences();
|
||||
return prefs?.achievementSoundVolume ?? 0.15;
|
||||
} catch (error) {
|
||||
console.error("Failed to get sound volume", error);
|
||||
return 0.15;
|
||||
}
|
||||
};
|
||||
|
||||
158
src/renderer/src/helpers/image-cropper.ts
Normal file
158
src/renderer/src/helpers/image-cropper.ts
Normal file
@@ -0,0 +1,158 @@
|
||||
import type { CropArea } from "@renderer/components";
|
||||
|
||||
type DrawImageCallback = (
|
||||
ctx: CanvasRenderingContext2D,
|
||||
img: HTMLImageElement,
|
||||
cropArea: CropArea
|
||||
) => void;
|
||||
|
||||
const loadImageAndProcess = async (
|
||||
imagePath: string,
|
||||
cropArea: CropArea,
|
||||
outputFormat: string,
|
||||
drawCallback: DrawImageCallback
|
||||
): Promise<Uint8Array> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
if (!ctx) {
|
||||
reject(new Error("Failed to get canvas context"));
|
||||
return;
|
||||
}
|
||||
|
||||
drawCallback(ctx, img, cropArea);
|
||||
|
||||
const convertBlobToUint8Array = async (
|
||||
blob: Blob
|
||||
): Promise<Uint8Array> => {
|
||||
const buffer = await blob.arrayBuffer();
|
||||
return new Uint8Array(buffer);
|
||||
};
|
||||
|
||||
const handleBlob = (blob: Blob | null) => {
|
||||
if (!blob) {
|
||||
reject(new Error("Failed to create blob from canvas"));
|
||||
return;
|
||||
}
|
||||
|
||||
convertBlobToUint8Array(blob).then(resolve).catch(reject);
|
||||
};
|
||||
|
||||
canvas.toBlob(handleBlob, outputFormat, 0.95);
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
reject(new Error("Failed to load image"));
|
||||
};
|
||||
|
||||
img.src = imagePath.startsWith("local:") ? imagePath : `local:${imagePath}`;
|
||||
});
|
||||
};
|
||||
|
||||
const setCanvasDimensions = (
|
||||
canvas: HTMLCanvasElement,
|
||||
width: number,
|
||||
height: number
|
||||
): void => {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
};
|
||||
|
||||
type DrawImageParams = {
|
||||
sourceX: number;
|
||||
sourceY: number;
|
||||
sourceWidth: number;
|
||||
sourceHeight: number;
|
||||
destWidth: number;
|
||||
destHeight: number;
|
||||
};
|
||||
|
||||
const drawCroppedImage = (
|
||||
ctx: CanvasRenderingContext2D,
|
||||
img: HTMLImageElement,
|
||||
params: DrawImageParams
|
||||
): void => {
|
||||
ctx.drawImage(
|
||||
img,
|
||||
params.sourceX,
|
||||
params.sourceY,
|
||||
params.sourceWidth,
|
||||
params.sourceHeight,
|
||||
0,
|
||||
0,
|
||||
params.destWidth,
|
||||
params.destHeight
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Crops an image using HTML5 Canvas API
|
||||
* @param imagePath - Path to the image file
|
||||
* @param cropArea - Crop area coordinates and dimensions
|
||||
* @param outputFormat - Output image format (default: 'image/png')
|
||||
* @returns Promise resolving to cropped image as Uint8Array
|
||||
*/
|
||||
export async function cropImage(
|
||||
imagePath: string,
|
||||
cropArea: CropArea,
|
||||
outputFormat: string = "image/png"
|
||||
): Promise<Uint8Array> {
|
||||
return loadImageAndProcess(
|
||||
imagePath,
|
||||
cropArea,
|
||||
outputFormat,
|
||||
(ctx, img, area) => {
|
||||
const canvas = ctx.canvas;
|
||||
setCanvasDimensions(canvas, area.width, area.height);
|
||||
drawCroppedImage(ctx, img, {
|
||||
sourceX: area.x,
|
||||
sourceY: area.y,
|
||||
sourceWidth: area.width,
|
||||
sourceHeight: area.height,
|
||||
destWidth: area.width,
|
||||
destHeight: area.height,
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Crops an image to a circular shape
|
||||
* @param imagePath - Path to the image file
|
||||
* @param cropArea - Crop area coordinates and dimensions (should be square for circle)
|
||||
* @param outputFormat - Output image format (default: 'image/png')
|
||||
* @returns Promise resolving to cropped circular image as Uint8Array
|
||||
*/
|
||||
export async function cropImageToCircle(
|
||||
imagePath: string,
|
||||
cropArea: CropArea,
|
||||
outputFormat: string = "image/png"
|
||||
): Promise<Uint8Array> {
|
||||
return loadImageAndProcess(
|
||||
imagePath,
|
||||
cropArea,
|
||||
outputFormat,
|
||||
(ctx, img, area) => {
|
||||
const size = Math.min(area.width, area.height);
|
||||
const canvas = ctx.canvas;
|
||||
setCanvasDimensions(canvas, size, size);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
|
||||
ctx.clip();
|
||||
|
||||
drawCroppedImage(ctx, img, {
|
||||
sourceX: area.x,
|
||||
sourceY: area.y,
|
||||
sourceWidth: size,
|
||||
sourceHeight: size,
|
||||
destWidth: size,
|
||||
destHeight: size,
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -6,5 +6,3 @@ export * from "./redux";
|
||||
export * from "./use-user-details";
|
||||
export * from "./use-format";
|
||||
export * from "./use-feature";
|
||||
export * from "./use-download-options-listener";
|
||||
export * from "./use-game-card";
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { useAppDispatch } from "./redux";
|
||||
import { updateGameNewDownloadOptions } from "@renderer/features";
|
||||
|
||||
export function useDownloadOptionsListener() {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = window.electron.onNewDownloadOptions(
|
||||
(gamesWithNewOptions) => {
|
||||
for (const { gameId, count } of gamesWithNewOptions) {
|
||||
dispatch(updateGameNewDownloadOptions({ gameId, count }));
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return unsubscribe;
|
||||
}, [dispatch]);
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import { useCallback } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useFormat } from "./use-format";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { buildGameDetailsPath } from "@renderer/helpers";
|
||||
import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
|
||||
import { LibraryGame } from "@types";
|
||||
|
||||
export function useGameCard(
|
||||
game: LibraryGame,
|
||||
onContextMenu: (game: LibraryGame, position: { x: number; y: number }) => void
|
||||
) {
|
||||
const { t } = useTranslation("library");
|
||||
const { numberFormatter } = useFormat();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const formatPlayTime = useCallback(
|
||||
(playTimeInMilliseconds = 0, isShort = false) => {
|
||||
const minutes = playTimeInMilliseconds / 60000;
|
||||
|
||||
if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
|
||||
return t(isShort ? "amount_minutes_short" : "amount_minutes", {
|
||||
amount: minutes.toFixed(0),
|
||||
});
|
||||
}
|
||||
|
||||
const hours = minutes / 60;
|
||||
const hoursKey = isShort ? "amount_hours_short" : "amount_hours";
|
||||
const hoursAmount = isShort
|
||||
? Math.floor(hours)
|
||||
: numberFormatter.format(hours);
|
||||
|
||||
return t(hoursKey, { amount: hoursAmount });
|
||||
},
|
||||
[numberFormatter, t]
|
||||
);
|
||||
|
||||
const handleCardClick = useCallback(() => {
|
||||
navigate(buildGameDetailsPath(game));
|
||||
}, [navigate, game]);
|
||||
|
||||
const handleContextMenuClick = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onContextMenu(game, { x: e.clientX, y: e.clientY });
|
||||
},
|
||||
[game, onContextMenu]
|
||||
);
|
||||
|
||||
const handleMenuButtonClick = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
onContextMenu(game, { x: rect.right, y: rect.bottom });
|
||||
},
|
||||
[game, onContextMenu]
|
||||
);
|
||||
|
||||
return {
|
||||
formatPlayTime,
|
||||
handleCardClick,
|
||||
handleContextMenuClick,
|
||||
handleMenuButtonClick,
|
||||
};
|
||||
}
|
||||
@@ -29,7 +29,6 @@ import Settings from "./pages/settings/settings";
|
||||
import Profile from "./pages/profile/profile";
|
||||
import Achievements from "./pages/achievements/achievements";
|
||||
import ThemeEditor from "./pages/theme-editor/theme-editor";
|
||||
import Library from "./pages/library/library";
|
||||
import { AchievementNotification } from "./pages/achievements/notification/achievement-notification";
|
||||
|
||||
console.log = logger.log;
|
||||
@@ -65,7 +64,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<Route element={<App />}>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/catalogue" element={<Catalogue />} />
|
||||
<Route path="/library" element={<Library />} />
|
||||
<Route path="/downloads" element={<Downloads />} />
|
||||
<Route path="/game/:shop/:objectId" element={<GameDetails />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
|
||||
@@ -1,15 +1,11 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import achievementSound from "@renderer/assets/audio/achievement.wav";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
AchievementCustomNotificationPosition,
|
||||
AchievementNotificationInfo,
|
||||
} from "@types";
|
||||
import {
|
||||
injectCustomCss,
|
||||
removeCustomCss,
|
||||
getAchievementSoundUrl,
|
||||
getAchievementSoundVolume,
|
||||
} from "@renderer/helpers";
|
||||
import { injectCustomCss, removeCustomCss } from "@renderer/helpers";
|
||||
import { AchievementNotificationItem } from "@renderer/components/achievements/notification/achievement-notification";
|
||||
import app from "../../../app.scss?inline";
|
||||
import styles from "../../../components/achievements/notification/achievement-notification.scss?inline";
|
||||
@@ -37,11 +33,9 @@ export function AchievementNotification() {
|
||||
|
||||
const [shadowRootRef, setShadowRootRef] = useState<HTMLElement | null>(null);
|
||||
|
||||
const playAudio = useCallback(async () => {
|
||||
const soundUrl = await getAchievementSoundUrl();
|
||||
const volume = await getAchievementSoundVolume();
|
||||
const audio = new Audio(soundUrl);
|
||||
audio.volume = volume;
|
||||
const playAudio = useCallback(() => {
|
||||
const audio = new Audio(achievementSound);
|
||||
audio.volume = 0.1;
|
||||
audio.play();
|
||||
}, []);
|
||||
|
||||
|
||||
@@ -231,50 +231,44 @@ $hero-height: 350px;
|
||||
}
|
||||
|
||||
&__randomizer-button {
|
||||
position: fixed;
|
||||
bottom: calc(globals.$spacing-unit * 5);
|
||||
right: calc(globals.$spacing-unit * 2);
|
||||
z-index: 100;
|
||||
padding: calc(globals.$spacing-unit * 1.5) calc(globals.$spacing-unit * 2);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
padding: calc(globals.$spacing-unit * 1.5);
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 8px;
|
||||
transition: all ease 0.2s;
|
||||
cursor: pointer;
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: globals.$spacing-unit;
|
||||
color: globals.$muted-color;
|
||||
border: solid 1px globals.$border-color;
|
||||
box-shadow:
|
||||
0px 0px 10px 0px rgba(0, 0, 0, 0.8),
|
||||
0px 2px 8px 0px rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
|
||||
animation: slide-in 0.3s cubic-bezier(0.33, 1, 0.68, 1);
|
||||
overflow: visible;
|
||||
|
||||
&:disabled {
|
||||
opacity: globals.$disabled-opacity;
|
||||
cursor: not-allowed;
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: globals.$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__stars-icon-container {
|
||||
width: 16px;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__stars-icon {
|
||||
width: 70px;
|
||||
width: 26px;
|
||||
position: absolute;
|
||||
top: -28px;
|
||||
left: -27px;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,26 +45,12 @@
|
||||
&__repack-title {
|
||||
color: globals.$muted-color;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit * 1);
|
||||
}
|
||||
|
||||
&__repack-info {
|
||||
font-size: globals.$small-font-size;
|
||||
}
|
||||
|
||||
&__new-badge {
|
||||
background-color: rgba(34, 197, 94, 0.15);
|
||||
color: rgb(187, 247, 208);
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 9px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
|
||||
&__no-results {
|
||||
width: 100%;
|
||||
padding: calc(globals.$spacing-unit * 4) 0;
|
||||
|
||||
@@ -15,14 +15,14 @@ import {
|
||||
TextField,
|
||||
CheckboxField,
|
||||
} from "@renderer/components";
|
||||
import type { DownloadSource, GameRepack } from "@types";
|
||||
import type { DownloadSource } from "@types";
|
||||
import type { GameRepack } from "@types";
|
||||
|
||||
import { DownloadSettingsModal } from "./download-settings-modal";
|
||||
import { gameDetailsContext } from "@renderer/context";
|
||||
import { Downloader } from "@shared";
|
||||
import { orderBy } from "lodash-es";
|
||||
import { useDate, useFeature, useAppDispatch } from "@renderer/hooks";
|
||||
import { clearNewDownloadOptions } from "@renderer/features";
|
||||
import { useDate, useFeature } from "@renderer/hooks";
|
||||
import "./repacks-modal.scss";
|
||||
|
||||
export interface RepacksModalProps {
|
||||
@@ -53,13 +53,6 @@ export function RepacksModal({
|
||||
const [hashesInDebrid, setHashesInDebrid] = useState<Record<string, boolean>>(
|
||||
{}
|
||||
);
|
||||
const [lastCheckTimestamp, setLastCheckTimestamp] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const [isLoadingTimestamp, setIsLoadingTimestamp] = useState(true);
|
||||
const [viewedRepackIds, setViewedRepackIds] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
|
||||
const { game, repacks } = useContext(gameDetailsContext);
|
||||
|
||||
@@ -67,7 +60,6 @@ export function RepacksModal({
|
||||
|
||||
const { formatDate } = useDate();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const getHashFromMagnet = (magnet: string) => {
|
||||
if (!magnet || typeof magnet !== "string") {
|
||||
@@ -105,34 +97,6 @@ export function RepacksModal({
|
||||
fetchDownloadSources();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchLastCheckTimestamp = async () => {
|
||||
setIsLoadingTimestamp(true);
|
||||
|
||||
const timestamp = await window.electron.getDownloadSourcesSinceValue();
|
||||
|
||||
setLastCheckTimestamp(timestamp);
|
||||
setIsLoadingTimestamp(false);
|
||||
};
|
||||
|
||||
if (visible) {
|
||||
fetchLastCheckTimestamp();
|
||||
}
|
||||
}, [visible, repacks]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
visible &&
|
||||
game?.newDownloadOptionsCount &&
|
||||
game.newDownloadOptionsCount > 0
|
||||
) {
|
||||
globalThis.electron.clearNewDownloadOptions(game.shop, game.objectId);
|
||||
|
||||
const gameId = `${game.shop}:${game.objectId}`;
|
||||
dispatch(clearNewDownloadOptions({ gameId }));
|
||||
}
|
||||
}, [visible, game, dispatch]);
|
||||
|
||||
const sortedRepacks = useMemo(() => {
|
||||
return orderBy(
|
||||
repacks,
|
||||
@@ -175,7 +139,6 @@ export function RepacksModal({
|
||||
const handleRepackClick = (repack: GameRepack) => {
|
||||
setRepack(repack);
|
||||
setShowSelectFolderModal(true);
|
||||
setViewedRepackIds((prev) => new Set(prev).add(repack.id));
|
||||
};
|
||||
|
||||
const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
|
||||
@@ -195,20 +158,6 @@ export function RepacksModal({
|
||||
return repack.uris.some((uri) => uri.includes(game.download!.uri));
|
||||
};
|
||||
|
||||
const isNewRepack = (repack: GameRepack): boolean => {
|
||||
if (isLoadingTimestamp) return false;
|
||||
|
||||
if (viewedRepackIds.has(repack.id)) return false;
|
||||
|
||||
if (!lastCheckTimestamp || !repack.createdAt) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const lastCheckUtc = new Date(lastCheckTimestamp).toISOString();
|
||||
|
||||
return repack.createdAt > lastCheckUtc;
|
||||
};
|
||||
|
||||
const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -324,14 +273,7 @@ export function RepacksModal({
|
||||
onClick={() => handleRepackClick(repack)}
|
||||
className="repacks-modal__repack-button"
|
||||
>
|
||||
<p className="repacks-modal__repack-title">
|
||||
{repack.title}
|
||||
{isNewRepack(repack) && (
|
||||
<span className="repacks-modal__new-badge">
|
||||
{t("new_download_option")}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="repacks-modal__repack-title">{repack.title}</p>
|
||||
|
||||
{isLastDownloadedOption && (
|
||||
<Badge>{t("last_downloaded_option")}</Badge>
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
.library-filter-options {
|
||||
&__tabs {
|
||||
display: flex;
|
||||
gap: calc(globals.$spacing-unit);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__tab-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding: calc(globals.$spacing-unit) calc(globals.$spacing-unit * 2);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: color ease 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit * 0.5);
|
||||
|
||||
&--active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__tab-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 6px;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 9px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__tab-underline {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import "./filter-options.scss";
|
||||
|
||||
export type FilterOption = "all" | "recently_played" | "favorites";
|
||||
|
||||
interface FilterOptionsProps {
|
||||
filterBy: FilterOption;
|
||||
onFilterChange: (filterBy: FilterOption) => void;
|
||||
allGamesCount: number;
|
||||
recentlyPlayedCount: number;
|
||||
favoritesCount: number;
|
||||
}
|
||||
|
||||
export function FilterOptions({
|
||||
filterBy,
|
||||
onFilterChange,
|
||||
allGamesCount,
|
||||
recentlyPlayedCount,
|
||||
favoritesCount,
|
||||
}: Readonly<FilterOptionsProps>) {
|
||||
const { t } = useTranslation("library");
|
||||
|
||||
return (
|
||||
<div className="library-filter-options__tabs">
|
||||
<div className="library-filter-options__tab-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
className={`library-filter-options__tab ${filterBy === "all" ? "library-filter-options__tab--active" : ""}`}
|
||||
onClick={() => onFilterChange("all")}
|
||||
>
|
||||
{t("all_games")}
|
||||
{allGamesCount > 0 && (
|
||||
<span className="library-filter-options__tab-badge">
|
||||
{allGamesCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{filterBy === "all" && (
|
||||
<motion.div
|
||||
className="library-filter-options__tab-underline"
|
||||
layoutId="library-tab-underline"
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="library-filter-options__tab-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
className={`library-filter-options__tab ${filterBy === "recently_played" ? "library-filter-options__tab--active" : ""}`}
|
||||
onClick={() => onFilterChange("recently_played")}
|
||||
>
|
||||
{t("recently_played")}
|
||||
{recentlyPlayedCount > 0 && (
|
||||
<span className="library-filter-options__tab-badge">
|
||||
{recentlyPlayedCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{filterBy === "recently_played" && (
|
||||
<motion.div
|
||||
className="library-filter-options__tab-underline"
|
||||
layoutId="library-tab-underline"
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="library-filter-options__tab-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
className={`library-filter-options__tab ${filterBy === "favorites" ? "library-filter-options__tab--active" : ""}`}
|
||||
onClick={() => onFilterChange("favorites")}
|
||||
>
|
||||
{t("favorites")}
|
||||
{favoritesCount > 0 && (
|
||||
<span className="library-filter-options__tab-badge">
|
||||
{favoritesCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{filterBy === "favorites" && (
|
||||
<motion.div
|
||||
className="library-filter-options__tab-underline"
|
||||
layoutId="library-tab-underline"
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,209 +0,0 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
.library-game-card-large {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
transition: all ease 0.2s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 172%;
|
||||
position: absolute;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
rgba(0, 0, 0, 0.1) 0%,
|
||||
rgba(0, 0, 0, 0.07) 51.5%,
|
||||
rgba(255, 255, 255, 0.15) 64%,
|
||||
rgba(255, 255, 255, 0.1) 100%
|
||||
);
|
||||
transition: all ease 0.3s;
|
||||
transform: translateY(-36%);
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.01);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&__gradient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 20%, transparent 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: calc(globals.$spacing-unit * 1.5);
|
||||
}
|
||||
|
||||
&__top-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: calc(globals.$spacing-unit);
|
||||
}
|
||||
|
||||
&__logo-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
max-height: 120px;
|
||||
max-width: 400px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
&__info-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__playtime {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
border: solid 1px rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__playtime-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__manual-playtime {
|
||||
color: globals.$warning-color;
|
||||
}
|
||||
|
||||
&__achievements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__achievement-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&__achievements-gap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
&__achievement-trophy {
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__achievement-progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
transition: all ease 0.2s;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: globals.$muted-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__achievement-bar {
|
||||
height: 100%;
|
||||
background-color: globals.$muted-color;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
&__achievement-count {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__achievement-percentage {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -1,132 +0,0 @@
|
||||
import { LibraryGame } from "@types";
|
||||
import { useGameCard } from "@renderer/hooks";
|
||||
import { ClockIcon, AlertFillIcon, TrophyIcon } from "@primer/octicons-react";
|
||||
import { memo, useMemo } from "react";
|
||||
import "./library-game-card-large.scss";
|
||||
|
||||
interface LibraryGameCardLargeProps {
|
||||
game: LibraryGame;
|
||||
onContextMenu: (
|
||||
game: LibraryGame,
|
||||
position: { x: number; y: number }
|
||||
) => void;
|
||||
}
|
||||
|
||||
const getImageWithCustomPriority = (
|
||||
customUrl: string | null | undefined,
|
||||
originalUrl: string | null | undefined,
|
||||
fallbackUrl?: string | null | undefined
|
||||
) => {
|
||||
return customUrl || originalUrl || fallbackUrl || "";
|
||||
};
|
||||
|
||||
export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
|
||||
game,
|
||||
onContextMenu,
|
||||
}: Readonly<LibraryGameCardLargeProps>) {
|
||||
const { formatPlayTime, handleCardClick, handleContextMenuClick } =
|
||||
useGameCard(game, onContextMenu);
|
||||
|
||||
const backgroundImage = useMemo(
|
||||
() =>
|
||||
getImageWithCustomPriority(
|
||||
game.libraryHeroImageUrl,
|
||||
game.libraryImageUrl,
|
||||
game.iconUrl
|
||||
),
|
||||
[game.libraryHeroImageUrl, game.libraryImageUrl, game.iconUrl]
|
||||
);
|
||||
|
||||
const backgroundStyle = useMemo(
|
||||
() => ({ backgroundImage: `url(${backgroundImage})` }),
|
||||
[backgroundImage]
|
||||
);
|
||||
|
||||
const achievementBarStyle = useMemo(
|
||||
() => ({
|
||||
width: `${((game.unlockedAchievementCount ?? 0) / (game.achievementCount ?? 1)) * 100}%`,
|
||||
}),
|
||||
[game.unlockedAchievementCount, game.achievementCount]
|
||||
);
|
||||
|
||||
const logoImage = game.logoImageUrl;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="library-game-card-large"
|
||||
onClick={handleCardClick}
|
||||
onContextMenu={handleContextMenuClick}
|
||||
>
|
||||
<div
|
||||
className="library-game-card-large__background"
|
||||
style={backgroundStyle}
|
||||
/>
|
||||
<div className="library-game-card-large__gradient" />
|
||||
|
||||
<div className="library-game-card-large__overlay">
|
||||
<div className="library-game-card-large__top-section">
|
||||
<div className="library-game-card-large__playtime">
|
||||
{game.hasManuallyUpdatedPlaytime ? (
|
||||
<AlertFillIcon
|
||||
size={11}
|
||||
className="library-game-card-large__manual-playtime"
|
||||
/>
|
||||
) : (
|
||||
<ClockIcon size={11} />
|
||||
)}
|
||||
<span className="library-game-card-large__playtime-text">
|
||||
{formatPlayTime(game.playTimeInMilliseconds)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="library-game-card-large__logo-container">
|
||||
{logoImage ? (
|
||||
<img
|
||||
src={logoImage}
|
||||
alt={game.title}
|
||||
className="library-game-card-large__logo"
|
||||
/>
|
||||
) : (
|
||||
<h3 className="library-game-card-large__title">{game.title}</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="library-game-card-large__info-bar">
|
||||
{/* Achievements section */}
|
||||
{(game.achievementCount ?? 0) > 0 && (
|
||||
<div className="library-game-card-large__achievements">
|
||||
<div className="library-game-card-large__achievement-header">
|
||||
<div className="library-game-card-large__achievements-gap">
|
||||
<TrophyIcon
|
||||
size={14}
|
||||
className="library-game-card-large__achievement-trophy"
|
||||
/>
|
||||
<span className="library-game-card-large__achievement-count">
|
||||
{game.unlockedAchievementCount ?? 0} /{" "}
|
||||
{game.achievementCount ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
<span className="library-game-card-large__achievement-percentage">
|
||||
{Math.round(
|
||||
((game.unlockedAchievementCount ?? 0) /
|
||||
(game.achievementCount ?? 1)) *
|
||||
100
|
||||
)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className="library-game-card-large__achievement-progress">
|
||||
<div
|
||||
className="library-game-card-large__achievement-bar"
|
||||
style={achievementBarStyle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
});
|
||||
@@ -1,241 +0,0 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
.library-game-card {
|
||||
&__wrapper {
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 4;
|
||||
position: relative;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
container-type: inline-size;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 172%;
|
||||
position: absolute;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
rgba(0, 0, 0, 0.1) 0%,
|
||||
rgba(0, 0, 0, 0.07) 51.5%,
|
||||
rgba(255, 255, 255, 0.15) 64%,
|
||||
rgba(255, 255, 255, 0.1) 100%
|
||||
);
|
||||
transition: all ease 0.3s;
|
||||
transform: translateY(-36%);
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 20%, transparent 100%);
|
||||
padding: 8px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__top-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__playtime {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: solid 1px rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&-long {
|
||||
display: inline;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-short {
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// When the card is narrow (less than 140px), show short format
|
||||
@container (max-width: 140px) {
|
||||
&-long {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-short {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__manual-playtime {
|
||||
color: globals.$warning-color;
|
||||
}
|
||||
|
||||
&__achievements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: all ease 0.2s;
|
||||
pointer-events: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__achievement-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
color: globals.$muted-color;
|
||||
overflow: hidden;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
&__achievements-gap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__achievement-trophy {
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__achievement-progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
transition: all ease 0.2s;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: globals.$muted-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__achievement-bar {
|
||||
height: 100%;
|
||||
background-color: globals.$muted-color;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__achievement-count {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__achievement-percentage {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__action-button {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: solid 1px rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper:hover &__action-button {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&__game-image {
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive sizing for compact grid cells */
|
||||
.library__games-grid--compact .library-game-card__wrapper {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 215 / 320;
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
import { LibraryGame } from "@types";
|
||||
import { useGameCard } from "@renderer/hooks";
|
||||
import { memo } from "react";
|
||||
import { ClockIcon, AlertFillIcon, TrophyIcon } from "@primer/octicons-react";
|
||||
import "./library-game-card.scss";
|
||||
|
||||
interface LibraryGameCardProps {
|
||||
game: LibraryGame;
|
||||
onMouseEnter: () => void;
|
||||
onMouseLeave: () => void;
|
||||
onContextMenu: (
|
||||
game: LibraryGame,
|
||||
position: { x: number; y: number }
|
||||
) => void;
|
||||
onShowTooltip?: (gameId: string) => void;
|
||||
onHideTooltip?: () => void;
|
||||
}
|
||||
|
||||
export const LibraryGameCard = memo(function LibraryGameCard({
|
||||
game,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
onContextMenu,
|
||||
}: Readonly<LibraryGameCardProps>) {
|
||||
const { formatPlayTime, handleCardClick, handleContextMenuClick } =
|
||||
useGameCard(game, onContextMenu);
|
||||
|
||||
const coverImage =
|
||||
game.coverImageUrl ??
|
||||
game.libraryImageUrl ??
|
||||
game.libraryHeroImageUrl ??
|
||||
game.iconUrl ??
|
||||
undefined;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
className="library-game-card__wrapper"
|
||||
title={game.title}
|
||||
onClick={handleCardClick}
|
||||
onContextMenu={handleContextMenuClick}
|
||||
>
|
||||
<div className="library-game-card__overlay">
|
||||
<div className="library-game-card__top-section">
|
||||
<div className="library-game-card__playtime">
|
||||
{game.hasManuallyUpdatedPlaytime ? (
|
||||
<AlertFillIcon
|
||||
size={11}
|
||||
className="library-game-card__manual-playtime"
|
||||
/>
|
||||
) : (
|
||||
<ClockIcon size={11} />
|
||||
)}
|
||||
<span className="library-game-card__playtime-long">
|
||||
{formatPlayTime(game.playTimeInMilliseconds)}
|
||||
</span>
|
||||
<span className="library-game-card__playtime-short">
|
||||
{formatPlayTime(game.playTimeInMilliseconds, true)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(game.achievementCount ?? 0) > 0 && (
|
||||
<div className="library-game-card__achievements">
|
||||
<div className="library-game-card__achievement-header">
|
||||
<div className="library-game-card__achievements-gap">
|
||||
<TrophyIcon
|
||||
size={13}
|
||||
className="library-game-card__achievement-trophy"
|
||||
/>
|
||||
<span className="library-game-card__achievement-count">
|
||||
{game.unlockedAchievementCount ?? 0} /{" "}
|
||||
{game.achievementCount ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
<span className="library-game-card__achievement-percentage">
|
||||
{Math.round(
|
||||
((game.unlockedAchievementCount ?? 0) /
|
||||
(game.achievementCount ?? 1)) *
|
||||
100
|
||||
)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className="library-game-card__achievement-progress">
|
||||
<div
|
||||
className="library-game-card__achievement-bar"
|
||||
style={{
|
||||
width: `${((game.unlockedAchievementCount ?? 0) / (game.achievementCount ?? 1)) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<img
|
||||
src={coverImage ?? undefined}
|
||||
alt={game.title}
|
||||
className="library-game-card__game-image"
|
||||
loading="lazy"
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
});
|
||||
@@ -1,208 +0,0 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
.library {
|
||||
&__content {
|
||||
padding: calc(globals.$spacing-unit * 2);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 3);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__page-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 1.5);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
&__controls-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__controls-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit);
|
||||
flex: 1;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
margin-right: calc(globals.$spacing-unit * 2);
|
||||
}
|
||||
|
||||
&__controls-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit);
|
||||
}
|
||||
|
||||
&__header-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
gap: calc(globals.$spacing-unit * 1);
|
||||
&__left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 1);
|
||||
}
|
||||
}
|
||||
&__header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
&__filter-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__separator {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&__count-label {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__count-number {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__no-games {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: globals.$spacing-unit;
|
||||
padding: calc(globals.$spacing-unit * 4);
|
||||
}
|
||||
|
||||
&__telescope-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: calc(globals.$spacing-unit * 2);
|
||||
}
|
||||
|
||||
&__games-grid {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
width: 100%;
|
||||
|
||||
// Grid view - larger cards
|
||||
&--grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
@container #{globals.$app-container} (min-width: 900px) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
@container #{globals.$app-container} (min-width: 1300px) {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
@container #{globals.$app-container} (min-width: 2000px) {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
@container #{globals.$app-container} (min-width: 2600px) {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
|
||||
@container #{globals.$app-container} (min-width: 3000px) {
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
// Compact view - smaller cards with responsive design
|
||||
&--compact {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
@container #{globals.$app-container} (min-width: 900px) {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
@container #{globals.$app-container} (min-width: 1300px) {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
@container #{globals.$app-container} (min-width: 2000px) {
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
}
|
||||
|
||||
@container #{globals.$app-container} (min-width: 2600px) {
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
@container #{globals.$app-container} (min-width: 3000px) {
|
||||
grid-template-columns: repeat(14, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__games-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
width: 100%;
|
||||
|
||||
// Large view - 2 columns grid
|
||||
&--large {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
|
||||
@container #{globals.$app-container} (min-width: 900px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,224 +0,0 @@
|
||||
import { useEffect, useMemo, useState, useCallback } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useLibrary, useAppDispatch, useAppSelector } from "@renderer/hooks";
|
||||
import { setHeaderTitle } from "@renderer/features";
|
||||
import { TelescopeIcon } from "@primer/octicons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { LibraryGame } from "@types";
|
||||
import { GameContextMenu } from "@renderer/components";
|
||||
import { LibraryGameCard } from "./library-game-card";
|
||||
import { LibraryGameCardLarge } from "./library-game-card-large";
|
||||
import { ViewOptions, ViewMode } from "./view-options";
|
||||
import { FilterOptions, FilterOption } from "./filter-options";
|
||||
import "./library.scss";
|
||||
|
||||
export default function Library() {
|
||||
const { library, updateLibrary } = useLibrary();
|
||||
type ElectronAPI = {
|
||||
refreshLibraryAssets?: () => Promise<unknown>;
|
||||
onLibraryBatchComplete?: (cb: () => void) => () => void;
|
||||
};
|
||||
|
||||
const [viewMode, setViewMode] = useState<ViewMode>("compact");
|
||||
const [filterBy, setFilterBy] = useState<FilterOption>("all");
|
||||
const [contextMenu, setContextMenu] = useState<{
|
||||
game: LibraryGame | null;
|
||||
visible: boolean;
|
||||
position: { x: number; y: number };
|
||||
}>({ game: null, visible: false, position: { x: 0, y: 0 } });
|
||||
|
||||
const searchQuery = useAppSelector((state) => state.library.searchQuery);
|
||||
const dispatch = useAppDispatch();
|
||||
const { t } = useTranslation("library");
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(setHeaderTitle(t("library")));
|
||||
const electron = (globalThis as unknown as { electron?: ElectronAPI })
|
||||
.electron;
|
||||
let unsubscribe: () => void = () => undefined;
|
||||
if (electron?.refreshLibraryAssets) {
|
||||
electron
|
||||
.refreshLibraryAssets()
|
||||
.then(() => updateLibrary())
|
||||
.catch(() => updateLibrary());
|
||||
if (electron.onLibraryBatchComplete) {
|
||||
unsubscribe = electron.onLibraryBatchComplete(() => {
|
||||
updateLibrary();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
updateLibrary();
|
||||
}
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
}, [dispatch, t, updateLibrary]);
|
||||
|
||||
const handleOnMouseEnterGameCard = useCallback(() => {
|
||||
// Optional: pause animations if needed
|
||||
}, []);
|
||||
|
||||
const handleOnMouseLeaveGameCard = useCallback(() => {
|
||||
// Optional: resume animations if needed
|
||||
}, []);
|
||||
|
||||
const handleOpenContextMenu = useCallback(
|
||||
(game: LibraryGame, position: { x: number; y: number }) => {
|
||||
setContextMenu({ game, visible: true, position });
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleCloseContextMenu = useCallback(() => {
|
||||
setContextMenu({ game: null, visible: false, position: { x: 0, y: 0 } });
|
||||
}, []);
|
||||
|
||||
const filteredLibrary = useMemo(() => {
|
||||
let filtered;
|
||||
|
||||
switch (filterBy) {
|
||||
case "recently_played":
|
||||
filtered = library.filter((game) => game.lastTimePlayed !== null);
|
||||
break;
|
||||
case "favorites":
|
||||
filtered = library.filter((game) => game.favorite);
|
||||
break;
|
||||
case "all":
|
||||
default:
|
||||
filtered = library;
|
||||
}
|
||||
|
||||
if (!searchQuery.trim()) return filtered;
|
||||
|
||||
const queryLower = searchQuery.toLowerCase();
|
||||
return filtered.filter((game) => {
|
||||
const titleLower = game.title.toLowerCase();
|
||||
let queryIndex = 0;
|
||||
|
||||
for (
|
||||
let i = 0;
|
||||
i < titleLower.length && queryIndex < queryLower.length;
|
||||
i++
|
||||
) {
|
||||
if (titleLower[i] === queryLower[queryIndex]) {
|
||||
queryIndex++;
|
||||
}
|
||||
}
|
||||
|
||||
return queryIndex === queryLower.length;
|
||||
});
|
||||
}, [library, filterBy, searchQuery]);
|
||||
|
||||
const sortedLibrary = filteredLibrary;
|
||||
|
||||
const filterCounts = useMemo(() => {
|
||||
const allGamesCount = library.length;
|
||||
let recentlyPlayedCount = 0;
|
||||
let favoritesCount = 0;
|
||||
|
||||
for (const game of library) {
|
||||
if (game.lastTimePlayed !== null) recentlyPlayedCount++;
|
||||
if (game.favorite) favoritesCount++;
|
||||
}
|
||||
|
||||
return {
|
||||
allGamesCount,
|
||||
recentlyPlayedCount,
|
||||
favoritesCount,
|
||||
};
|
||||
}, [library]);
|
||||
|
||||
const hasGames = library.length > 0;
|
||||
|
||||
return (
|
||||
<section className="library__content">
|
||||
{hasGames && (
|
||||
<div className="library__page-header">
|
||||
<div className="library__controls-row">
|
||||
<div className="library__controls-left">
|
||||
<FilterOptions
|
||||
filterBy={filterBy}
|
||||
onFilterChange={setFilterBy}
|
||||
allGamesCount={filterCounts.allGamesCount}
|
||||
recentlyPlayedCount={filterCounts.recentlyPlayedCount}
|
||||
favoritesCount={filterCounts.favoritesCount}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="library__controls-right">
|
||||
<ViewOptions viewMode={viewMode} onViewModeChange={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!hasGames && (
|
||||
<div className="library__no-games">
|
||||
<div className="library__telescope-icon">
|
||||
<TelescopeIcon size={24} />
|
||||
</div>
|
||||
<h2>{t("no_games_title")}</h2>
|
||||
<p>{t("no_games_description")}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasGames && (
|
||||
<AnimatePresence mode="wait">
|
||||
{viewMode === "large" && (
|
||||
<motion.div
|
||||
key={`${filterBy}-large`}
|
||||
className="library__games-list library__games-list--large"
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{sortedLibrary.map((game) => (
|
||||
<LibraryGameCardLarge
|
||||
key={`${game.shop}-${game.objectId}`}
|
||||
game={game}
|
||||
onContextMenu={handleOpenContextMenu}
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{viewMode !== "large" && (
|
||||
<motion.ul
|
||||
key={`${filterBy}-${viewMode}`}
|
||||
className={`library__games-grid library__games-grid--${viewMode}`}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{sortedLibrary.map((game) => (
|
||||
<li
|
||||
key={`${game.shop}-${game.objectId}`}
|
||||
style={{ listStyle: "none" }}
|
||||
>
|
||||
<LibraryGameCard
|
||||
game={game}
|
||||
onMouseEnter={handleOnMouseEnterGameCard}
|
||||
onMouseLeave={handleOnMouseLeaveGameCard}
|
||||
onContextMenu={handleOpenContextMenu}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</motion.ul>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)}
|
||||
|
||||
{contextMenu.game && (
|
||||
<GameContextMenu
|
||||
game={contextMenu.game}
|
||||
visible={contextMenu.visible}
|
||||
position={contextMenu.position}
|
||||
onClose={handleCloseContextMenu}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
.library-view-options {
|
||||
&__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit);
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit);
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit);
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all ease 0.2s;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
background: #fff;
|
||||
svg,
|
||||
svg * {
|
||||
fill: currentColor;
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import { AppsIcon, RowsIcon, SquareIcon } from "@primer/octicons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import "./view-options.scss";
|
||||
|
||||
export type ViewMode = "grid" | "compact" | "large";
|
||||
|
||||
interface ViewOptionsProps {
|
||||
viewMode: ViewMode;
|
||||
onViewModeChange: (viewMode: ViewMode) => void;
|
||||
}
|
||||
|
||||
export function ViewOptions({
|
||||
viewMode,
|
||||
onViewModeChange,
|
||||
}: Readonly<ViewOptionsProps>) {
|
||||
const { t } = useTranslation("library");
|
||||
|
||||
return (
|
||||
<div className="library-view-options__container">
|
||||
<div className="library-view-options__options">
|
||||
<button
|
||||
className={`library-view-options__option ${viewMode === "compact" ? "active" : ""}`}
|
||||
onClick={() => onViewModeChange("compact")}
|
||||
title={t("compact_view")}
|
||||
>
|
||||
<SquareIcon size={16} />
|
||||
</button>
|
||||
<button
|
||||
className={`library-view-options__option ${viewMode === "grid" ? "active" : ""}`}
|
||||
onClick={() => onViewModeChange("grid")}
|
||||
title={t("grid_view")}
|
||||
>
|
||||
<AppsIcon size={16} />
|
||||
</button>
|
||||
<button
|
||||
className={`library-view-options__option ${viewMode === "large" ? "active" : ""}`}
|
||||
onClick={() => onViewModeChange("large")}
|
||||
title={t("large_view")}
|
||||
>
|
||||
<RowsIcon size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useContext, useEffect } from "react";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
|
||||
@@ -10,8 +10,12 @@ import {
|
||||
Modal,
|
||||
ModalProps,
|
||||
TextField,
|
||||
ImageCropper,
|
||||
CropArea,
|
||||
} from "@renderer/components";
|
||||
import { useToast, useUserDetails } from "@renderer/hooks";
|
||||
import { cropImage } from "@renderer/helpers/image-cropper";
|
||||
import { logger } from "@renderer/logger";
|
||||
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
|
||||
@@ -63,6 +67,66 @@ export function EditProfileModal(
|
||||
|
||||
const { showSuccessToast, showErrorToast } = useToast();
|
||||
|
||||
const [showCropper, setShowCropper] = useState(false);
|
||||
const [selectedImagePath, setSelectedImagePath] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const [onImageChange, setOnImageChange] = useState<
|
||||
((value: string) => void) | null
|
||||
>(null);
|
||||
|
||||
const handleCrop = async (cropArea: CropArea) => {
|
||||
if (!selectedImagePath || !onImageChange) return;
|
||||
|
||||
try {
|
||||
const imagePathForCrop = selectedImagePath.startsWith("local:")
|
||||
? selectedImagePath.slice(6)
|
||||
: selectedImagePath;
|
||||
const imageData = await cropImage(
|
||||
imagePathForCrop,
|
||||
cropArea,
|
||||
"image/png"
|
||||
);
|
||||
|
||||
const tempFileName = `cropped-profile-${Date.now()}.png`;
|
||||
const croppedPath = await window.electron.saveTempFile(
|
||||
tempFileName,
|
||||
imageData
|
||||
);
|
||||
|
||||
if (!hasActiveSubscription) {
|
||||
const { imagePath } = await window.electron
|
||||
.processProfileImage(croppedPath)
|
||||
.catch(() => {
|
||||
showErrorToast(t("image_process_failure"));
|
||||
return { imagePath: null };
|
||||
});
|
||||
|
||||
if (imagePath) {
|
||||
onImageChange(imagePath);
|
||||
}
|
||||
} else {
|
||||
onImageChange(croppedPath);
|
||||
}
|
||||
|
||||
setShowCropper(false);
|
||||
setSelectedImagePath(null);
|
||||
setOnImageChange(null);
|
||||
} catch (error) {
|
||||
logger.error("Failed to crop profile image:", error);
|
||||
showErrorToast(t("image_crop_failure"));
|
||||
setShowCropper(false);
|
||||
setSelectedImagePath(null);
|
||||
setOnImageChange(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelCrop = () => {
|
||||
setShowCropper(false);
|
||||
setSelectedImagePath(null);
|
||||
setOnImageChange(null);
|
||||
};
|
||||
|
||||
const onSubmit = async (values: FormValues) => {
|
||||
return patchUser(values)
|
||||
.then(async () => {
|
||||
@@ -99,19 +163,9 @@ export function EditProfileModal(
|
||||
|
||||
if (filePaths && filePaths.length > 0) {
|
||||
const path = filePaths[0];
|
||||
|
||||
if (!hasActiveSubscription) {
|
||||
const { imagePath } = await window.electron
|
||||
.processProfileImage(path)
|
||||
.catch(() => {
|
||||
showErrorToast(t("image_process_failure"));
|
||||
return { imagePath: null };
|
||||
});
|
||||
|
||||
onChange(imagePath);
|
||||
} else {
|
||||
onChange(path);
|
||||
}
|
||||
setSelectedImagePath(path);
|
||||
setOnImageChange(() => onChange);
|
||||
setShowCropper(true);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -155,6 +209,22 @@ export function EditProfileModal(
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showCropper && selectedImagePath && (
|
||||
<Modal
|
||||
visible={showCropper}
|
||||
title={t("crop_profile_image")}
|
||||
onClose={handleCancelCrop}
|
||||
large
|
||||
>
|
||||
<ImageCropper
|
||||
imagePath={selectedImagePath}
|
||||
onCrop={handleCrop}
|
||||
onCancel={handleCancelCrop}
|
||||
aspectRatio={1}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
<small className="edit-profile-modal__hint">
|
||||
<Trans i18nKey="privacy_hint" ns="user_profile">
|
||||
<Link to="/settings" />
|
||||
|
||||
@@ -1,14 +1,20 @@
|
||||
import { UploadIcon } from "@primer/octicons-react";
|
||||
import { Button } from "@renderer/components";
|
||||
import { Button, Modal, ImageCropper, CropArea } from "@renderer/components";
|
||||
import { useContext, useState } from "react";
|
||||
import { userProfileContext } from "@renderer/context";
|
||||
import { useToast, useUserDetails } from "@renderer/hooks";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { cropImage } from "@renderer/helpers/image-cropper";
|
||||
import { logger } from "@renderer/logger";
|
||||
import "./upload-background-image-button.scss";
|
||||
|
||||
export function UploadBackgroundImageButton() {
|
||||
const [isUploadingBackgroundImage, setIsUploadingBackgorundImage] =
|
||||
useState(false);
|
||||
const [showCropper, setShowCropper] = useState(false);
|
||||
const [selectedImagePath, setSelectedImagePath] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const { hasActiveSubscription } = useUserDetails();
|
||||
|
||||
const { t } = useTranslation("user_profile");
|
||||
@@ -16,47 +22,100 @@ export function UploadBackgroundImageButton() {
|
||||
const { isMe, setSelectedBackgroundImage } = useContext(userProfileContext);
|
||||
const { patchUser, fetchUserDetails } = useUserDetails();
|
||||
|
||||
const { showSuccessToast } = useToast();
|
||||
const { showSuccessToast, showErrorToast } = useToast();
|
||||
|
||||
const handleChangeCoverClick = async () => {
|
||||
const { filePaths } = await window.electron.showOpenDialog({
|
||||
properties: ["openFile"],
|
||||
filters: [
|
||||
{
|
||||
name: "Image",
|
||||
extensions: ["jpg", "jpeg", "png", "gif", "webp"],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
if (filePaths && filePaths.length > 0) {
|
||||
const path = filePaths[0];
|
||||
setSelectedImagePath(path);
|
||||
setShowCropper(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCrop = async (cropArea: CropArea) => {
|
||||
if (!selectedImagePath) return;
|
||||
|
||||
try {
|
||||
const { filePaths } = await window.electron.showOpenDialog({
|
||||
properties: ["openFile"],
|
||||
filters: [
|
||||
{
|
||||
name: "Image",
|
||||
extensions: ["jpg", "jpeg", "png", "gif", "webp"],
|
||||
},
|
||||
],
|
||||
});
|
||||
setIsUploadingBackgorundImage(true);
|
||||
setShowCropper(false);
|
||||
|
||||
if (filePaths && filePaths.length > 0) {
|
||||
const path = filePaths[0];
|
||||
const imagePathForCrop = selectedImagePath.startsWith("local:")
|
||||
? selectedImagePath.slice(6)
|
||||
: selectedImagePath;
|
||||
const imageData = await cropImage(
|
||||
imagePathForCrop,
|
||||
cropArea,
|
||||
"image/png"
|
||||
);
|
||||
|
||||
setSelectedBackgroundImage(path);
|
||||
setIsUploadingBackgorundImage(true);
|
||||
const tempFileName = `cropped-background-${Date.now()}.png`;
|
||||
const croppedPath = await window.electron.saveTempFile(
|
||||
tempFileName,
|
||||
imageData
|
||||
);
|
||||
|
||||
await patchUser({ backgroundImageUrl: path });
|
||||
setSelectedBackgroundImage(croppedPath);
|
||||
await patchUser({ backgroundImageUrl: croppedPath });
|
||||
|
||||
showSuccessToast(t("background_image_updated"));
|
||||
await fetchUserDetails();
|
||||
}
|
||||
showSuccessToast(t("background_image_updated"));
|
||||
await fetchUserDetails();
|
||||
|
||||
setSelectedImagePath(null);
|
||||
} catch (error) {
|
||||
logger.error("Failed to crop background image:", error);
|
||||
showErrorToast(t("image_crop_failure"));
|
||||
setSelectedImagePath(null);
|
||||
} finally {
|
||||
setIsUploadingBackgorundImage(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelCrop = () => {
|
||||
setShowCropper(false);
|
||||
setSelectedImagePath(null);
|
||||
};
|
||||
|
||||
if (!isMe || !hasActiveSubscription) return null;
|
||||
|
||||
return (
|
||||
<Button
|
||||
theme="outline"
|
||||
className="upload-background-image-button"
|
||||
onClick={handleChangeCoverClick}
|
||||
disabled={isUploadingBackgroundImage}
|
||||
>
|
||||
<UploadIcon />
|
||||
{isUploadingBackgroundImage ? t("uploading_banner") : t("upload_banner")}
|
||||
</Button>
|
||||
<>
|
||||
<Button
|
||||
theme="outline"
|
||||
className="upload-background-image-button"
|
||||
onClick={handleChangeCoverClick}
|
||||
disabled={isUploadingBackgroundImage}
|
||||
>
|
||||
<UploadIcon />
|
||||
{isUploadingBackgroundImage
|
||||
? t("uploading_banner")
|
||||
: t("upload_banner")}
|
||||
</Button>
|
||||
|
||||
{showCropper && selectedImagePath && (
|
||||
<Modal
|
||||
visible={showCropper}
|
||||
title={t("crop_background_image")}
|
||||
onClose={handleCancelCrop}
|
||||
large
|
||||
>
|
||||
<ImageCropper
|
||||
imagePath={selectedImagePath}
|
||||
onCrop={handleCrop}
|
||||
onCancel={handleCancelCrop}
|
||||
aspectRatio={21 / 9}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -51,16 +51,6 @@ export const ImportThemeModal = ({
|
||||
|
||||
if (!currentTheme) return;
|
||||
|
||||
try {
|
||||
await window.electron.importThemeSoundFromStore(
|
||||
theme.id,
|
||||
themeName,
|
||||
THEME_WEB_STORE_URL
|
||||
);
|
||||
} catch (soundError) {
|
||||
logger.error("Failed to import theme sound", soundError);
|
||||
}
|
||||
|
||||
const activeTheme = await window.electron.getActiveCustomTheme();
|
||||
|
||||
if (activeTheme) {
|
||||
|
||||
@@ -17,159 +17,4 @@
|
||||
&__test-achievement-notification-button {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
&__volume-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
color: globals.$muted-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__volume-slider-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
--volume-percent: 0%;
|
||||
}
|
||||
|
||||
&__volume-icon {
|
||||
color: globals.$muted-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__volume-value {
|
||||
font-size: 14px;
|
||||
color: globals.$body-color;
|
||||
font-weight: 500;
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__volume-slider {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: globals.$dark-background-color;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: globals.$muted-color;
|
||||
cursor: pointer;
|
||||
border: 2px solid globals.$background-color;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.2s;
|
||||
margin-top: -6px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: globals.$muted-color;
|
||||
cursor: pointer;
|
||||
border: 2px solid globals.$background-color;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.2s;
|
||||
margin-top: -6px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
globals.$muted-color 0%,
|
||||
globals.$muted-color var(--volume-percent),
|
||||
globals.$dark-background-color var(--volume-percent),
|
||||
globals.$dark-background-color 100%
|
||||
);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: globals.$dark-background-color;
|
||||
}
|
||||
|
||||
&::-moz-range-progress {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: globals.$muted-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: globals.$muted-color;
|
||||
cursor: pointer;
|
||||
border: 2px solid globals.$background-color;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background: globals.$muted-color;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
background: globals.$dark-background-color;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,4 @@
|
||||
import {
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
useCallback,
|
||||
useRef,
|
||||
} from "react";
|
||||
import { useContext, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
TextField,
|
||||
Button,
|
||||
@@ -19,7 +12,7 @@ import languageResources from "@locales";
|
||||
import { orderBy } from "lodash-es";
|
||||
import { settingsContext } from "@renderer/context";
|
||||
import "./settings-general.scss";
|
||||
import { DesktopDownloadIcon, UnmuteIcon } from "@primer/octicons-react";
|
||||
import { DesktopDownloadIcon } from "@primer/octicons-react";
|
||||
import { logger } from "@renderer/logger";
|
||||
import { AchievementCustomNotificationPosition } from "@types";
|
||||
|
||||
@@ -50,7 +43,6 @@ export function SettingsGeneral() {
|
||||
achievementCustomNotificationsEnabled: true,
|
||||
achievementCustomNotificationPosition:
|
||||
"top-left" as AchievementCustomNotificationPosition,
|
||||
achievementSoundVolume: 15,
|
||||
language: "",
|
||||
customStyles: window.localStorage.getItem("customStyles") || "",
|
||||
});
|
||||
@@ -59,8 +51,6 @@ export function SettingsGeneral() {
|
||||
|
||||
const [defaultDownloadsPath, setDefaultDownloadsPath] = useState("");
|
||||
|
||||
const volumeUpdateTimeoutRef = useRef<NodeJS.Timeout>();
|
||||
|
||||
useEffect(() => {
|
||||
window.electron.getDefaultDownloadsPath().then((path) => {
|
||||
setDefaultDownloadsPath(path);
|
||||
@@ -91,9 +81,6 @@ export function SettingsGeneral() {
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
if (volumeUpdateTimeoutRef.current) {
|
||||
clearTimeout(volumeUpdateTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
@@ -123,9 +110,6 @@ export function SettingsGeneral() {
|
||||
userPreferences.achievementCustomNotificationsEnabled ?? true,
|
||||
achievementCustomNotificationPosition:
|
||||
userPreferences.achievementCustomNotificationPosition ?? "top-left",
|
||||
achievementSoundVolume: Math.round(
|
||||
(userPreferences.achievementSoundVolume ?? 0.15) * 100
|
||||
),
|
||||
friendRequestNotificationsEnabled:
|
||||
userPreferences.friendRequestNotificationsEnabled ?? false,
|
||||
friendStartGameNotificationsEnabled:
|
||||
@@ -164,21 +148,6 @@ export function SettingsGeneral() {
|
||||
await updateUserPreferences(values);
|
||||
};
|
||||
|
||||
const handleVolumeChange = useCallback(
|
||||
(newVolume: number) => {
|
||||
setForm((prev) => ({ ...prev, achievementSoundVolume: newVolume }));
|
||||
|
||||
if (volumeUpdateTimeoutRef.current) {
|
||||
clearTimeout(volumeUpdateTimeoutRef.current);
|
||||
}
|
||||
|
||||
volumeUpdateTimeoutRef.current = setTimeout(() => {
|
||||
updateUserPreferences({ achievementSoundVolume: newVolume / 100 });
|
||||
}, 300);
|
||||
},
|
||||
[updateUserPreferences]
|
||||
);
|
||||
|
||||
const handleChangeAchievementCustomNotificationPosition = async (
|
||||
event: React.ChangeEvent<HTMLSelectElement>
|
||||
) => {
|
||||
@@ -340,39 +309,6 @@ export function SettingsGeneral() {
|
||||
</>
|
||||
)}
|
||||
|
||||
{form.achievementNotificationsEnabled && (
|
||||
<div className="settings-general__volume-control">
|
||||
<label htmlFor="achievement-volume">
|
||||
{t("achievement_sound_volume")}
|
||||
</label>
|
||||
<div className="settings-general__volume-slider-wrapper">
|
||||
<UnmuteIcon size={16} className="settings-general__volume-icon" />
|
||||
<input
|
||||
id="achievement-volume"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={form.achievementSoundVolume}
|
||||
onChange={(e) => {
|
||||
const volumePercent = parseInt(e.target.value, 10);
|
||||
if (!isNaN(volumePercent)) {
|
||||
handleVolumeChange(volumePercent);
|
||||
}
|
||||
}}
|
||||
className="settings-general__volume-slider"
|
||||
style={
|
||||
{
|
||||
"--volume-percent": `${form.achievementSoundVolume}%`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
<span className="settings-general__volume-value">
|
||||
{form.achievementSoundVolume}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h2 className="settings-general__section-title">{t("common_redist")}</h2>
|
||||
|
||||
<p className="settings-general__common-redist-description">
|
||||
|
||||
@@ -47,8 +47,6 @@
|
||||
position: relative;
|
||||
border: 1px solid globals.$muted-color;
|
||||
border-radius: 2px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
@@ -82,7 +80,7 @@
|
||||
}
|
||||
|
||||
&__info {
|
||||
padding: 8px;
|
||||
padding: 16px;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
@@ -95,39 +93,12 @@
|
||||
&__notification-preview {
|
||||
padding-top: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
&__select-variation {
|
||||
flex: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__notification-preview-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__notification-controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__sound-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__sound-actions-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,16 +3,11 @@ import "./theme-editor.scss";
|
||||
import Editor from "@monaco-editor/react";
|
||||
import { AchievementCustomNotificationPosition, Theme } from "@types";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { Button, SelectField, TextField } from "@renderer/components";
|
||||
import {
|
||||
CheckIcon,
|
||||
UploadIcon,
|
||||
TrashIcon,
|
||||
PlayIcon,
|
||||
} from "@primer/octicons-react";
|
||||
import { Button, SelectField } from "@renderer/components";
|
||||
import { CheckIcon } from "@primer/octicons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import cn from "classnames";
|
||||
import { injectCustomCss, getAchievementSoundVolume } from "@renderer/helpers";
|
||||
import { injectCustomCss } from "@renderer/helpers";
|
||||
import { AchievementNotificationItem } from "@renderer/components/achievements/notification/achievement-notification";
|
||||
import { generateAchievementCustomNotificationTest } from "@shared";
|
||||
import { CollapsedMenu } from "@renderer/components/collapsed-menu/collapsed-menu";
|
||||
@@ -32,7 +27,6 @@ export default function ThemeEditor() {
|
||||
const [theme, setTheme] = useState<Theme | null>(null);
|
||||
const [code, setCode] = useState("");
|
||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||
const [soundPath, setSoundPath] = useState<string>("");
|
||||
|
||||
const [isClosingNotifications, setIsClosingNotifications] = useState(false);
|
||||
|
||||
@@ -68,9 +62,6 @@ export default function ThemeEditor() {
|
||||
if (loadedTheme) {
|
||||
setTheme(loadedTheme);
|
||||
setCode(loadedTheme.code);
|
||||
if (loadedTheme.originalSoundPath) {
|
||||
setSoundPath(loadedTheme.originalSoundPath);
|
||||
}
|
||||
if (shadowRootRef) {
|
||||
injectCustomCss(loadedTheme.code, shadowRootRef);
|
||||
}
|
||||
@@ -116,73 +107,6 @@ export default function ThemeEditor() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectSound = useCallback(async () => {
|
||||
if (!theme) return;
|
||||
|
||||
const { filePaths } = await window.electron.showOpenDialog({
|
||||
properties: ["openFile"],
|
||||
filters: [
|
||||
{
|
||||
name: "Audio",
|
||||
extensions: ["wav", "mp3", "ogg", "m4a"],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
if (filePaths && filePaths.length > 0) {
|
||||
const originalPath = filePaths[0];
|
||||
await window.electron.copyThemeAchievementSound(theme.id, originalPath);
|
||||
const updatedTheme = await window.electron.getCustomThemeById(theme.id);
|
||||
if (updatedTheme) {
|
||||
setTheme(updatedTheme);
|
||||
if (updatedTheme.originalSoundPath) {
|
||||
setSoundPath(updatedTheme.originalSoundPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
const handleRemoveSound = useCallback(async () => {
|
||||
if (!theme) return;
|
||||
|
||||
await window.electron.removeThemeAchievementSound(theme.id);
|
||||
const updatedTheme = await window.electron.getCustomThemeById(theme.id);
|
||||
if (updatedTheme) {
|
||||
setTheme(updatedTheme);
|
||||
}
|
||||
setSoundPath("");
|
||||
}, [theme]);
|
||||
|
||||
const handlePreviewSound = useCallback(async () => {
|
||||
if (!theme) return;
|
||||
|
||||
let soundUrl: string;
|
||||
|
||||
if (theme.hasCustomSound) {
|
||||
const themeSoundUrl = await window.electron.getThemeSoundDataUrl(
|
||||
theme.id
|
||||
);
|
||||
if (themeSoundUrl) {
|
||||
soundUrl = themeSoundUrl;
|
||||
} else {
|
||||
const defaultSound = (
|
||||
await import("@renderer/assets/audio/achievement.wav")
|
||||
).default;
|
||||
soundUrl = defaultSound;
|
||||
}
|
||||
} else {
|
||||
const defaultSound = (
|
||||
await import("@renderer/assets/audio/achievement.wav")
|
||||
).default;
|
||||
soundUrl = defaultSound;
|
||||
}
|
||||
|
||||
const volume = await getAchievementSoundVolume();
|
||||
const audio = new Audio(soundUrl);
|
||||
audio.volume = volume;
|
||||
audio.play();
|
||||
}, [theme]);
|
||||
|
||||
const achievementCustomNotificationPositionOptions = useMemo(() => {
|
||||
return [
|
||||
"top-left",
|
||||
@@ -240,66 +164,35 @@ export default function ThemeEditor() {
|
||||
<div className="theme-editor__footer">
|
||||
<CollapsedMenu title={t("notification_preview")}>
|
||||
<div className="theme-editor__notification-preview">
|
||||
<div className="theme-editor__notification-preview-controls">
|
||||
<div className="theme-editor__notification-controls">
|
||||
<SelectField
|
||||
className="theme-editor__notification-preview__select-variation"
|
||||
label={t("variation")}
|
||||
options={Object.values(notificationVariations).map(
|
||||
(variation) => {
|
||||
return {
|
||||
key: variation,
|
||||
value: variation,
|
||||
label: t(variation),
|
||||
};
|
||||
}
|
||||
)}
|
||||
onChange={(value) =>
|
||||
setNotificationVariation(
|
||||
value.target.value as keyof typeof notificationVariations
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<SelectField
|
||||
label={t("alignment")}
|
||||
value={notificationAlignment}
|
||||
onChange={(e) =>
|
||||
setNotificationAlignment(
|
||||
e.target.value as AchievementCustomNotificationPosition
|
||||
)
|
||||
}
|
||||
options={achievementCustomNotificationPositionOptions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TextField
|
||||
label={t("select_achievement_sound")}
|
||||
value={soundPath || ""}
|
||||
placeholder={soundPath ? undefined : t("no_sound_file_selected")}
|
||||
readOnly
|
||||
disabled
|
||||
rightContent={
|
||||
<Button theme="outline" onClick={handleSelectSound}>
|
||||
<UploadIcon />
|
||||
{t("select")}
|
||||
</Button>
|
||||
<SelectField
|
||||
className="theme-editor__notification-preview__select-variation"
|
||||
label={t("variation")}
|
||||
options={Object.values(notificationVariations).map(
|
||||
(variation) => {
|
||||
return {
|
||||
key: variation,
|
||||
value: variation,
|
||||
label: t(variation),
|
||||
};
|
||||
}
|
||||
)}
|
||||
onChange={(value) =>
|
||||
setNotificationVariation(
|
||||
value.target.value as keyof typeof notificationVariations
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
{theme?.hasCustomSound && (
|
||||
<div className="theme-editor__sound-actions-row">
|
||||
<Button theme="outline" onClick={handleRemoveSound}>
|
||||
<TrashIcon />
|
||||
{t("remove")}
|
||||
</Button>
|
||||
<Button theme="outline" onClick={handlePreviewSound}>
|
||||
<PlayIcon />
|
||||
{t("preview")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<SelectField
|
||||
label={t("alignment")}
|
||||
value={notificationAlignment}
|
||||
onChange={(e) =>
|
||||
setNotificationAlignment(
|
||||
e.target.value as AchievementCustomNotificationPosition
|
||||
)
|
||||
}
|
||||
options={achievementCustomNotificationPositionOptions}
|
||||
/>
|
||||
|
||||
<div className="theme-editor__notification-preview-wrapper">
|
||||
<root.div>
|
||||
|
||||
@@ -23,7 +23,6 @@ export interface GameRepack {
|
||||
uploadDate: string | null;
|
||||
downloadSourceId: string;
|
||||
downloadSourceName: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface DownloadSource {
|
||||
@@ -42,9 +41,9 @@ export interface ShopAssets {
|
||||
shop: GameShop;
|
||||
title: string;
|
||||
iconUrl: string | null;
|
||||
libraryHeroImageUrl: string | null;
|
||||
libraryImageUrl: string | null;
|
||||
logoImageUrl: string | null;
|
||||
libraryHeroImageUrl: string;
|
||||
libraryImageUrl: string;
|
||||
logoImageUrl: string;
|
||||
logoPosition: string | null;
|
||||
coverImageUrl: string | null;
|
||||
downloadSources: string[];
|
||||
@@ -363,8 +362,6 @@ export type LibraryGame = Game &
|
||||
Partial<ShopAssets> & {
|
||||
id: string;
|
||||
download: Download | null;
|
||||
unlockedAchievementCount?: number;
|
||||
achievementCount?: number;
|
||||
};
|
||||
|
||||
export type UserGameDetails = ShopAssets & {
|
||||
|
||||
@@ -56,12 +56,9 @@ export interface Game {
|
||||
launchOptions?: string | null;
|
||||
favorite?: boolean;
|
||||
isPinned?: boolean;
|
||||
achievementCount?: number;
|
||||
unlockedAchievementCount?: number;
|
||||
pinnedDate?: Date | null;
|
||||
automaticCloudSync?: boolean;
|
||||
hasManuallyUpdatedPlaytime?: boolean;
|
||||
newDownloadOptionsCount?: number;
|
||||
}
|
||||
|
||||
export interface Download {
|
||||
@@ -116,7 +113,6 @@ export interface UserPreferences {
|
||||
achievementNotificationsEnabled?: boolean;
|
||||
achievementCustomNotificationsEnabled?: boolean;
|
||||
achievementCustomNotificationPosition?: AchievementCustomNotificationPosition;
|
||||
achievementSoundVolume?: number;
|
||||
friendRequestNotificationsEnabled?: boolean;
|
||||
friendStartGameNotificationsEnabled?: boolean;
|
||||
showDownloadSpeedInMegabytes?: boolean;
|
||||
|
||||
@@ -5,8 +5,6 @@ export interface Theme {
|
||||
authorName?: string;
|
||||
isActive: boolean;
|
||||
code: string;
|
||||
hasCustomSound?: boolean;
|
||||
originalSoundPath?: string;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user