mirror of
https://github.com/hydralauncher/hydra.git
synced 2026-01-12 06:16:17 +00:00
Compare commits
96 Commits
feat/impro
...
fix/fixing
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ac01930d68 | ||
|
|
37caeb8047 | ||
|
|
7d6eddb17e | ||
|
|
48775e57fc | ||
|
|
fdc3fecd6f | ||
|
|
f0dc7478cf | ||
|
|
2e8da53d1a | ||
|
|
8794fbc742 | ||
|
|
bf387aef3f | ||
|
|
c2a26b9750 | ||
|
|
3dc2a29114 | ||
|
|
6ebf7766aa | ||
|
|
19bf99ff11 | ||
|
|
9c00a17193 | ||
|
|
d167628ed4 | ||
|
|
59cfce86ae | ||
|
|
51c4e4f5b3 | ||
|
|
138120460c | ||
|
|
c71f5947ba | ||
|
|
ff8a61ff7a | ||
|
|
d1d46971b6 | ||
|
|
b8af69b0fb | ||
|
|
1af69465c1 | ||
|
|
f6c12c22b5 | ||
|
|
539010d817 | ||
|
|
aa148c0b70 | ||
|
|
a83a96f214 | ||
|
|
aadbda770b | ||
|
|
bd059cc7fa | ||
|
|
bbbf861594 | ||
|
|
80e0adcd49 | ||
|
|
2aa31c0db0 | ||
|
|
4bfe6d7f86 | ||
|
|
aadf648a2b | ||
|
|
87dbd548d0 | ||
|
|
459bf73121 | ||
|
|
a2ef0f304d | ||
|
|
b04561986e | ||
|
|
1bd88e6c6e | ||
|
|
4ff8dc4fa7 | ||
|
|
dcc671f999 | ||
|
|
6e76111e23 | ||
|
|
3fce26f1f7 | ||
|
|
90c5ccb796 | ||
|
|
41092c2dd4 | ||
|
|
6383b728bc | ||
|
|
4dd28bbbf1 | ||
|
|
21074322fa | ||
|
|
0e7e53478a | ||
|
|
65e49550ad | ||
|
|
0990951183 | ||
|
|
53c162f0e4 | ||
|
|
2fb44a6c0e | ||
|
|
49c2bc34d1 | ||
|
|
ef52d710ed | ||
|
|
31d57a784e | ||
|
|
49df40650c | ||
|
|
499a830e3e | ||
|
|
437b0a3b19 | ||
|
|
d59ff5c484 | ||
|
|
dcf13a5920 | ||
|
|
51861752a1 | ||
|
|
2fce12eba7 | ||
|
|
1427775c98 | ||
|
|
e143fadf38 | ||
|
|
f99f8d9554 | ||
|
|
274080069f | ||
|
|
b1069426e4 | ||
|
|
dc6d578462 | ||
|
|
8a12c6e088 | ||
|
|
b795cea599 | ||
|
|
dc8a19e845 | ||
|
|
ce0619bbe3 | ||
|
|
5c770bc7e7 | ||
|
|
b431ed479c | ||
|
|
9e09a5decb | ||
|
|
1e1a1c61c9 | ||
|
|
8de6c92d28 | ||
|
|
29e1713824 | ||
|
|
81a77411cc | ||
|
|
cc95deb709 | ||
|
|
daf9751cf6 | ||
|
|
d21ec52814 | ||
|
|
f539977431 | ||
|
|
3ff20417d5 | ||
|
|
65f83399f5 | ||
|
|
eb34f051e1 | ||
|
|
ab27f3295e | ||
|
|
3782f79100 | ||
|
|
86ab5b107b | ||
|
|
acf8f340dd | ||
|
|
035f6e8d24 | ||
|
|
362d6b634e | ||
|
|
73e378e26a | ||
|
|
3dc71a8d1f | ||
|
|
8203399eda |
@@ -27,3 +27,11 @@
|
||||
- Follow TypeScript strict mode conventions
|
||||
- Use async/await instead of promises when possible
|
||||
- Prefer named exports over default exports for utilities and services
|
||||
|
||||
## Comments
|
||||
|
||||
- Keep comments concise and purposeful; avoid verbose explanations.
|
||||
- Focus on the "why" or non-obvious context, not restating the code.
|
||||
- Prefer self-explanatory naming and structure over excessive comments.
|
||||
- Do not comment every line or obvious behavior; remove stale comments.
|
||||
- Use docblocks only where they add value (public APIs, complex logic).
|
||||
|
||||
@@ -3,3 +3,4 @@ MAIN_VITE_AUTH_URL=
|
||||
MAIN_VITE_WS_URL=
|
||||
RENDERER_VITE_REAL_DEBRID_REFERRAL_ID=
|
||||
RENDERER_VITE_TORBOX_REFERRAL_CODE=
|
||||
MAIN_VITE_LAUNCHER_SUBDOMAIN=
|
||||
|
||||
24
.github/workflows/build-renderer.yml
vendored
24
.github/workflows/build-renderer.yml
vendored
@@ -6,23 +6,37 @@ concurrency:
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
branches:
|
||||
- release/**
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
env:
|
||||
NODE_OPTIONS: --max-old-space-size=4096
|
||||
BRANCH_NAME: ${{ github.ref_name }}
|
||||
|
||||
steps:
|
||||
- name: Check out Git repository
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Install Node.js
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 22.21.0
|
||||
cache: "yarn"
|
||||
|
||||
- name: Enable Corepack (Yarn)
|
||||
run: corepack enable
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn --frozen-lockfile --ignore-scripts
|
||||
run: yarn install --frozen-lockfile --ignore-scripts
|
||||
|
||||
- name: Build Renderer
|
||||
run: yarn build
|
||||
@@ -36,5 +50,5 @@ jobs:
|
||||
run: |
|
||||
npx --yes wrangler@3 pages deploy out/renderer \
|
||||
--project-name="hydra" \
|
||||
--commit-dirty=true \
|
||||
--branch="main"
|
||||
--branch "$BRANCH_NAME" \
|
||||
--commit-dirty
|
||||
|
||||
7
.github/workflows/release.yml
vendored
7
.github/workflows/release.yml
vendored
@@ -6,7 +6,8 @@ concurrency:
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
branches:
|
||||
- release/**
|
||||
|
||||
jobs:
|
||||
build:
|
||||
@@ -61,7 +62,7 @@ jobs:
|
||||
RENDERER_VITE_SENTRY_DSN: ${{ vars.SENTRY_DSN }}
|
||||
RENDERER_VITE_REAL_DEBRID_REFERRAL_ID: ${{ vars.RENDERER_VITE_REAL_DEBRID_REFERRAL_ID }}
|
||||
RENDERER_VITE_TORBOX_REFERRAL_CODE: ${{ vars.RENDERER_VITE_TORBOX_REFERRAL_CODE }}
|
||||
MAIN_VITE_RENDERER_URL: ${{ vars.MAIN_VITE_RENDERER_URL }}
|
||||
MAIN_VITE_LAUNCHER_SUBDOMAIN: ${{ vars.MAIN_VITE_LAUNCHER_SUBDOMAIN }}
|
||||
|
||||
- name: Build Windows
|
||||
if: matrix.os == 'windows-2022'
|
||||
@@ -78,7 +79,7 @@ jobs:
|
||||
RENDERER_VITE_SENTRY_DSN: ${{ vars.SENTRY_DSN }}
|
||||
RENDERER_VITE_REAL_DEBRID_REFERRAL_ID: ${{ vars.RENDERER_VITE_REAL_DEBRID_REFERRAL_ID }}
|
||||
RENDERER_VITE_TORBOX_REFERRAL_CODE: ${{ vars.RENDERER_VITE_TORBOX_REFERRAL_CODE }}
|
||||
MAIN_VITE_RENDERER_URL: ${{ vars.MAIN_VITE_RENDERER_URL }}
|
||||
MAIN_VITE_LAUNCHER_SUBDOMAIN: ${{ vars.MAIN_VITE_LAUNCHER_SUBDOMAIN }}
|
||||
|
||||
- name: Create artifact
|
||||
uses: actions/upload-artifact@v4
|
||||
|
||||
6
.github/workflows/update-aur.yml
vendored
6
.github/workflows/update-aur.yml
vendored
@@ -95,9 +95,12 @@ jobs:
|
||||
- name: Update PKGBUILD and .SRCINFO
|
||||
if: steps.check-update.outputs.update_needed == 'true'
|
||||
run: |
|
||||
# sleeps for 1 minute to be sure GH updated the release info
|
||||
sleep 60
|
||||
# Update pkgver in PKGBUILD
|
||||
cd hydra-launcher-bin
|
||||
NEW_VERSION="${{ steps.get-version.outputs.version }}"
|
||||
NEW_VERSION="${NEW_VERSION#v}"
|
||||
|
||||
echo "Updating PKGBUILD pkgver to $NEW_VERSION"
|
||||
|
||||
@@ -137,6 +140,9 @@ jobs:
|
||||
COMMIT_MSG="v${{ steps.get-version.outputs.version }}"
|
||||
|
||||
git commit -m "$COMMIT_MSG"
|
||||
|
||||
export GIT_SSH_COMMAND="ssh -i ~/.ssh/id_rsa -F ~/.ssh/config -o UserKnownHostsFile=$SSH_PATH/known_hosts"
|
||||
|
||||
git push origin master
|
||||
echo "Successfully updated AUR package to version ${{ steps.get-version.outputs.version }}"
|
||||
fi
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hydralauncher",
|
||||
"version": "3.7.1",
|
||||
"version": "3.7.3",
|
||||
"description": "Hydra",
|
||||
"main": "./out/main/index.js",
|
||||
"author": "Los Broxas",
|
||||
@@ -75,6 +75,7 @@
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
"react-hook-form": "^7.53.0",
|
||||
"react-i18next": "^14.1.0",
|
||||
"react-infinite-scroll-component": "^6.1.0",
|
||||
"react-loading-skeleton": "^3.4.0",
|
||||
"react-redux": "^9.1.1",
|
||||
"react-router-dom": "^6.22.3",
|
||||
|
||||
@@ -223,6 +223,7 @@
|
||||
"show_more": "Show more",
|
||||
"show_less": "Show less",
|
||||
"reviews": "Reviews",
|
||||
"review_played_for": "Played for",
|
||||
"leave_a_review": "Leave a Review",
|
||||
"write_review_placeholder": "Share your thoughts about this game...",
|
||||
"sort_newest": "Newest",
|
||||
@@ -361,7 +362,10 @@
|
||||
"show_original": "Show original",
|
||||
"show_translation": "Show translation",
|
||||
"show_original_translated_from": "Show original (translated from {{language}})",
|
||||
"hide_original": "Hide original"
|
||||
"hide_original": "Hide original",
|
||||
"review_from_blocked_user": "Review from blocked user",
|
||||
"show": "Show",
|
||||
"hide": "Hide"
|
||||
},
|
||||
"activation": {
|
||||
"title": "Activate Hydra",
|
||||
@@ -689,7 +693,10 @@
|
||||
"game_added_to_pinned": "Game added to pinned",
|
||||
"karma": "Karma",
|
||||
"karma_count": "karma",
|
||||
"karma_description": "Earned from positive likes on reviews"
|
||||
"karma_description": "Earned from positive likes on reviews",
|
||||
"user_reviews": "Reviews",
|
||||
"delete_review": "Delete Review",
|
||||
"loading_reviews": "Loading reviews..."
|
||||
},
|
||||
"achievement": {
|
||||
"achievement_unlocked": "Achievement unlocked",
|
||||
|
||||
@@ -325,6 +325,7 @@
|
||||
"maybe_later": "Tal vez después",
|
||||
"no_repacks_found": "Sin fuentes encontradas para este juego",
|
||||
"no_reviews_yet": "Sin reseñas aún",
|
||||
"review_played_for": "Jugado por",
|
||||
"properties": "Propiedades",
|
||||
"rating": "Calificación",
|
||||
"rating_count": "Calificación",
|
||||
@@ -361,7 +362,10 @@
|
||||
"you_seemed_to_enjoy_this_game": "Parece que has disfrutado de este juego",
|
||||
"language": "Idioma",
|
||||
"caption": "Subtítulo",
|
||||
"audio": "Audio"
|
||||
"audio": "Audio",
|
||||
"review_from_blocked_user": "Reseña de usuario bloqueado",
|
||||
"show": "Mostrar",
|
||||
"hide": "Ocultar"
|
||||
},
|
||||
"activation": {
|
||||
"title": "Activar Hydra",
|
||||
@@ -541,7 +545,9 @@
|
||||
"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.",
|
||||
"enable_friend_start_game_notifications": "Cuando un amigo está jugando un juego"
|
||||
"enable_friend_start_game_notifications": "Cuando un amigo está jugando un juego",
|
||||
"autoplay_trailers_on_game_page": "Reproducir trailers automáticamente en la página del juego",
|
||||
"hide_to_tray_on_game_start": "Ocultar Hydra en la bandeja al iniciar un juego"
|
||||
},
|
||||
"notifications": {
|
||||
"download_complete": "Descarga completada",
|
||||
@@ -676,7 +682,11 @@
|
||||
"karma_count": "karma",
|
||||
"karma_description": "Conseguido por me gustas positivos en reseñas",
|
||||
"sort_by": "Filtrar por:",
|
||||
"game_added_to_pinned": "Juego añadido a fijados"
|
||||
"game_added_to_pinned": "Juego añadido a fijados",
|
||||
"user_reviews": "Reseñas",
|
||||
"loading_reviews": "Cargando reseñas...",
|
||||
"no_reviews": "Sin reseñas aún",
|
||||
"delete_review": "Eliminar reseña"
|
||||
},
|
||||
"achievement": {
|
||||
"achievement_unlocked": "Logro desbloqueado",
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"no_results": "Nincs találat",
|
||||
"start_typing": "Kereséshez gépelj...",
|
||||
"hot": "Most felkapott",
|
||||
"weekly": "📅 A hét felkapott játékai",
|
||||
"weekly": "📅 A hét felkapottjai",
|
||||
"achievements": "🏆 Achievement támogatott"
|
||||
},
|
||||
"sidebar": {
|
||||
@@ -26,7 +26,7 @@
|
||||
"sign_in": "Bejelentkezés",
|
||||
"friends": "Barátok",
|
||||
"need_help": "Elakadtál?",
|
||||
"favorites": "Kedvenc játékok",
|
||||
"favorites": "Kedvenc Játékaim",
|
||||
"playable_button_title": "Csak az azonnal játszható játékokat mutasd",
|
||||
"add_custom_game_tooltip": "Saját játék hozzáadása",
|
||||
"show_playable_only_tooltip": "Csak játszható játék mutatása",
|
||||
@@ -224,7 +224,7 @@
|
||||
"show_less": "Mutass kevesebbet",
|
||||
"reviews": "Vélemények",
|
||||
"leave_a_review": "Hagyd itt a véleményed",
|
||||
"write_review_placeholder": "Oszd meg a gondolataid a játékról...",
|
||||
"write_review_placeholder": "Oszd meg gondolatod a játékról...",
|
||||
"sort_newest": "Legújabb",
|
||||
"no_reviews_yet": "Még nem lett vélemény megosztva",
|
||||
"be_first_to_review": "Légy az első, aki megossza a véleményét a játékról!",
|
||||
@@ -252,7 +252,7 @@
|
||||
"you_seemed_to_enjoy_this_game": "Úgy látszik élvezted ezt a játékot",
|
||||
"would_you_recommend_this_game": "Szeretnél véleményt írni erről a játékról?",
|
||||
"yes": "Igen",
|
||||
"maybe_later": "Talán Később",
|
||||
"maybe_later": "Talán később",
|
||||
"cloud_save": "Mentés felhőben",
|
||||
"cloud_save_description": "Mentsd el az előrehaladásod a felhőben, majd folytasd egy másik eszközön",
|
||||
"backups": "Biztonsági másolatok",
|
||||
@@ -356,13 +356,18 @@
|
||||
"delete_review_modal_title": "Biztos vagy abban hogy törölni szeretnéd a véleményed?",
|
||||
"delete_review_modal_description": "Ez a lépés nem vonható vissza.",
|
||||
"delete_review_modal_delete_button": "Törlés",
|
||||
"delete_review_modal_cancel_button": "Mégse"
|
||||
"delete_review_modal_cancel_button": "Mégse",
|
||||
"vote_failed": "A szavazatod nem regisztrálódott. Kérlek próbáld újra.",
|
||||
"show_original": "Eredeti megjelenítése",
|
||||
"show_translation": "Fordítás megjelenítése",
|
||||
"show_original_translated_from": "Eredeti megjelenítése (fordítva: {{language}})",
|
||||
"hide_original": "Eredeti elrejtése"
|
||||
},
|
||||
"activation": {
|
||||
"title": "Hydra Aktiválása",
|
||||
"installation_id": "Telepítési Azonosító:",
|
||||
"enter_activation_code": "Írd be az aktiválási kódod",
|
||||
"message": "Ha nem tudod hol kérdezz efelől, akkor nem kéne ilyened legyen.",
|
||||
"message": "Ha nem tudod merre kérdezz efelől, akkor nem kéne ilyened legyen.",
|
||||
"activate": "Aktiválás",
|
||||
"loading": "Töltés…"
|
||||
},
|
||||
@@ -386,7 +391,7 @@
|
||||
"download_in_progress": "Folyamatban lévő",
|
||||
"queued_downloads": "Várakozósoron lévő letöltések",
|
||||
"downloads_completed": "Befejezett",
|
||||
"queued": "Várakozási sorban",
|
||||
"queued": "Várakozásban",
|
||||
"no_downloads_title": "Oly üres..",
|
||||
"no_downloads_description": "Még nem töltöttél le semmit a Hydra segítségével, de soha nem késő elkezdeni.",
|
||||
"checking_files": "Fájlok ellenőrzése…",
|
||||
@@ -419,20 +424,30 @@
|
||||
"debrid_linked_message": "Fiók összekapcsolva: \"{{username}}\" ",
|
||||
"save_changes": "Változtatások mentése",
|
||||
"changes_saved": "Változtatások sikeresen mentve",
|
||||
"download_sources_description": "A Hydra lefogja tölteni a letöltési linkeket a forrásokból. Az URL forrásnak közvetlen linknek kell lennie egy .json fájlhoz, ami tartalmazza a linkeket.",
|
||||
"download_sources_description": "A Hydra lefogja tölteni a letöltési linkeket a forrásokból. Az URL Forrásnak közvetlen linknek kell lennie egy .json fájlhoz, ami tartalmazza a linkeket.",
|
||||
"validate_download_source": "Érvényesítés",
|
||||
"remove_download_source": "Eltávolítás",
|
||||
"add_download_source": "Forrás hozáadása",
|
||||
"adding": "Hozzáadás…",
|
||||
"failed_add_download_source": "Letöltési forrás hozzáadása sikertelen. Kérlek próbáld újra.",
|
||||
"download_source_already_exists": "Ez a letöltési forrás URL már létezik.",
|
||||
"download_count_zero": "Nincs letöltési opció",
|
||||
"download_count_one": "{{countFormatted}} letöltési opció",
|
||||
"download_count_other": "{{countFormatted}} letöltési opció",
|
||||
"download_source_url": "URL forrás:",
|
||||
"download_source_url": "URL Forrás:",
|
||||
"add_download_source_description": "Helyezd be a .json fájl URL-jét",
|
||||
"download_source_up_to_date": "Naprakész",
|
||||
"download_source_errored": "Hiba történt",
|
||||
"download_source_pending_matching": "Frissítés hamarosan",
|
||||
"download_source_matched": "Naprakész",
|
||||
"download_source_matching": "Frissítés..",
|
||||
"download_source_failed": "Hiba",
|
||||
"download_source_no_information": "Nincs elérhető információ",
|
||||
"sync_download_sources": "Források szinkronizálása",
|
||||
"removed_download_source": "Letöltési forrás eltávolítva",
|
||||
"removed_download_sources": "Letöltési források eltávolítva",
|
||||
"removed_all_download_sources": "Összes letöltési forrás eltávolítva",
|
||||
"download_sources_synced_successfully": "Az összes letöltési forrás szinkronizálva",
|
||||
"cancel_button_confirmation_delete_all_sources": "Nem",
|
||||
"confirm_button_confirmation_delete_all_sources": "Igen, törölj mindent",
|
||||
"title_confirmation_delete_all_sources": "Az összes letöltési forrás törlése",
|
||||
@@ -445,6 +460,7 @@
|
||||
"found_download_option_one": "{{countFormatted}} Letöltési opció találva",
|
||||
"found_download_option_other": "{{countFormatted}} Letöltési opciók találva",
|
||||
"import": "Importálás",
|
||||
"importing": "Importálás...",
|
||||
"public": "Publikus",
|
||||
"private": "Privát",
|
||||
"friends_only": "Csak barátok",
|
||||
@@ -462,6 +478,7 @@
|
||||
"seed_after_download_complete": "Letöltés utáni seedelés",
|
||||
"show_hidden_achievement_description": "Rejtett achievementek leírásának megjelenítése feloldás előtt",
|
||||
"account": "Fiók",
|
||||
"hydra_cloud": "Hydra Cloud",
|
||||
"no_users_blocked": "Nincsenek letiltott felhasználóid",
|
||||
"subscription_active_until": "Hydra Cloud előfizetésed aktív, eddig: {{date}}",
|
||||
"manage_subscription": "Előfizetés kezelése",
|
||||
@@ -498,14 +515,14 @@
|
||||
"cancel": "Mégsem",
|
||||
"appearance": "Megjelenés",
|
||||
"debrid": "Debrid",
|
||||
"debrid_description": "A Debrid szolgáltatások prémium szolgáltatások amelyek lehetővé teszik, hogy gyorsan letölts különböző fájltároló szolgáltatásokon tárolt fájlokat, csak az internet sebességed szab határt.",
|
||||
"debrid_description": "A Debrid szolgáltatások prémium szolgáltatások amelyek lehetővé teszik, hogy gyorsan letölts különböző fájltároló szolgáltatásokon tárolt fájlokat, és csak az internet sebességed szab határt.",
|
||||
"enable_torbox": "TorBox bekapcsolása",
|
||||
"torbox_description": "A TorBox egy olyan premium seedbox szolgáltatás, amely még a piacon elérhető legjobb szerverekkel is felveszi a versenyt.",
|
||||
"torbox_account_linked": "TorBox fiók összekapcsolva",
|
||||
"create_real_debrid_account": "Kattints ide ha még nincs Real-Debrid fiókod",
|
||||
"create_torbox_account": "Kattints ide ha még nincs TorBox fiókod",
|
||||
"real_debrid_account_linked": "Real-Debrid fiók összekapcsolva",
|
||||
"name_min_length": "A téma neve legalább 3 karakter hosszú legyen",
|
||||
"name_min_length": "A téma neve legalább 3 karakter hosszú kell legyen",
|
||||
"import_theme": "Téma importálása",
|
||||
"import_theme_description": "Ezt a témát fogod importálni a Témaáruház-ból: {{theme}}",
|
||||
"error_importing_theme": "Hiba lépett fel a téma importálása közben",
|
||||
@@ -535,7 +552,9 @@
|
||||
"hidden": "Rejtett",
|
||||
"test_notification": "Értesítés tesztelése",
|
||||
"notification_preview": "Achievement Értesítés Előnézete",
|
||||
"enable_friend_start_game_notifications": "Amikor egy barátod elkezd játszani egy játékot"
|
||||
"enable_friend_start_game_notifications": "Amikor egy barátod elkezd játszani egy játékot",
|
||||
"autoplay_trailers_on_game_page": "Játékelőzetes automatikus lejátszása a játék oldalán",
|
||||
"hide_to_tray_on_game_start": "Hydra elrejtése játék elindításakor a tálcára"
|
||||
},
|
||||
"notifications": {
|
||||
"download_complete": "Letöltés befejezve",
|
||||
@@ -563,10 +582,10 @@
|
||||
"available_one": "Elérhető",
|
||||
"available_other": "Elérhető",
|
||||
"no_downloads": "Nincs elérhető letöltés",
|
||||
"calculating": "Feldolgozás"
|
||||
"calculating": "Számítás alatt.."
|
||||
},
|
||||
"binary_not_found_modal": {
|
||||
"title": "A programok nincsenek telepítve",
|
||||
"title": "Hiányzó programok",
|
||||
"description": "Wine vagy Lutris futtatható fájlok nem találhatók a rendszereden",
|
||||
"instructions": "Ellenőrízd hogy melyiket kell helyesen telepíteni a Linux disztribúciódra, hogy a játék megfelelően fusson"
|
||||
},
|
||||
@@ -585,6 +604,7 @@
|
||||
"activity": "Legutóbbi tevékenység",
|
||||
"library": "Könyvtár",
|
||||
"pinned": "Kitűzve",
|
||||
"sort_by": "Rendezés:",
|
||||
"achievements_earned": "Elért achievementek",
|
||||
"played_recently": "Nemrég játszva",
|
||||
"playtime": "Játszottidő",
|
||||
@@ -654,7 +674,7 @@
|
||||
"uploading_banner": "Borítókép feltöltése…",
|
||||
"background_image_updated": "Borítókép frissítve",
|
||||
"stats": "Statisztikák",
|
||||
"achievements": "achievementek",
|
||||
"achievements": "achievement",
|
||||
"games": "Játékok",
|
||||
"top_percentile": "Top {{percentile}}%",
|
||||
"ranking_updated_weekly": "A rangsor hetente frissül.",
|
||||
@@ -669,7 +689,7 @@
|
||||
"game_added_to_pinned": "Játék hozzáadva a kitűzöttekhez",
|
||||
"karma": "Karma",
|
||||
"karma_count": "karma",
|
||||
"karma_description": "Pozitív értékelésekre kapott pontok alapján"
|
||||
"karma_description": "Pozitív értékelésekkel szerzett pontok"
|
||||
},
|
||||
"achievement": {
|
||||
"achievement_unlocked": "Achievement feloldva",
|
||||
@@ -678,7 +698,7 @@
|
||||
"unlocked_at": "Feloldva: {{date}}",
|
||||
"subscription_needed": "A tartalom megtekintéséhez Hydra Cloud előfizetés szükséges",
|
||||
"new_achievements_unlocked": "{{achievementCount}} új achievement feloldva {{gameCount}} játékban",
|
||||
"achievement_progress": "{{unlockedCount}}/{{totalCount}} achievementek",
|
||||
"achievement_progress": "{{unlockedCount}}/{{totalCount}} achievement",
|
||||
"achievements_unlocked_for_game": "{{achievementCount}} új achievement feloldva itt: {{gameTitle}}",
|
||||
"hidden_achievement_tooltip": "Ez egy rejtett achievement",
|
||||
"achievement_earn_points": "Szerezz be {{points}} pontot ezzel az achievement-el",
|
||||
|
||||
@@ -317,6 +317,7 @@
|
||||
"sort_lowest_score": "Menor Nota",
|
||||
"sort_most_voted": "Mais Votadas",
|
||||
"no_reviews_yet": "Ainda não há avaliações",
|
||||
"review_played_for": "Jogado por",
|
||||
"be_first_to_review": "Seja o primeiro a compartilhar seus pensamentos sobre este jogo!",
|
||||
"rating": "Avaliação",
|
||||
"rating_stats": "Avaliação",
|
||||
@@ -349,7 +350,10 @@
|
||||
"show_translation": "Mostrar tradução",
|
||||
"show_original_translated_from": "Mostrar original (traduzido do {{language}})",
|
||||
"hide_original": "Ocultar original",
|
||||
"rating_count": "Avaliação"
|
||||
"rating_count": "Avaliação",
|
||||
"review_from_blocked_user": "Avaliação de usuário bloqueado",
|
||||
"show": "Mostrar",
|
||||
"hide": "Ocultar"
|
||||
},
|
||||
"activation": {
|
||||
"title": "Ativação",
|
||||
@@ -538,7 +542,9 @@
|
||||
"hidden": "Oculta",
|
||||
"test_notification": "Testar notificação",
|
||||
"notification_preview": "Prévia da Notificação de Conquistas",
|
||||
"enable_friend_start_game_notifications": "Quando um amigo iniciar um jogo"
|
||||
"enable_friend_start_game_notifications": "Quando um amigo iniciar um jogo",
|
||||
"autoplay_trailers_on_game_page": "Reproduzir trailers automaticamente na página do jogo",
|
||||
"hide_to_tray_on_game_start": "Ocultar o Hydra na bandeja ao iniciar um jogo"
|
||||
},
|
||||
"notifications": {
|
||||
"download_complete": "Download concluído",
|
||||
@@ -691,7 +697,11 @@
|
||||
"karma": "Karma",
|
||||
"karma_count": "karma",
|
||||
"karma_description": "Ganho a partir de curtidas positivas em avaliações",
|
||||
"manual_playtime_tooltip": "Este tempo de jogo foi atualizado manualmente"
|
||||
"manual_playtime_tooltip": "Este tempo de jogo foi atualizado manualmente",
|
||||
"user_reviews": "Avaliações",
|
||||
"loading_reviews": "Carregando avaliações...",
|
||||
"no_reviews": "Ainda não há avaliações",
|
||||
"delete_review": "Excluir avaliação"
|
||||
},
|
||||
"achievement": {
|
||||
"achievement_unlocked": "Conquista desbloqueada",
|
||||
|
||||
@@ -180,7 +180,11 @@
|
||||
"download_error_not_cached_on_torbox": "Este download não está disponível no TorBox e a verificação do status do download não está disponível.",
|
||||
"game_removed_from_favorites": "Jogo removido dos favoritos",
|
||||
"game_added_to_favorites": "Jogo adicionado aos favoritos",
|
||||
"create_start_menu_shortcut": "Criar atalho no Menu Iniciar"
|
||||
"create_start_menu_shortcut": "Criar atalho no Menu Iniciar",
|
||||
"review_from_blocked_user": "Avaliação de utilizador bloqueado",
|
||||
"show": "Mostrar",
|
||||
"hide": "Ocultar",
|
||||
"review_played_for": "Jogado por"
|
||||
},
|
||||
"activation": {
|
||||
"title": "Ativação",
|
||||
@@ -466,7 +470,11 @@
|
||||
"achievements_unlocked": "Conquistas desbloqueadas",
|
||||
"earned_points": "Pontos ganhos",
|
||||
"show_achievements_on_profile": "Mostre as suas conquistas no perfil",
|
||||
"show_points_on_profile": "Mostre os seus pontos ganhos no perfil"
|
||||
"show_points_on_profile": "Mostre os seus pontos ganhos no perfil",
|
||||
"user_reviews": "Avaliações",
|
||||
"loading_reviews": "A carregar avaliações...",
|
||||
"no_reviews": "Ainda não há avaliações",
|
||||
"delete_review": "Eliminar avaliação"
|
||||
},
|
||||
"achievement": {
|
||||
"achievement_unlocked": "Conquista desbloqueada",
|
||||
|
||||
@@ -212,6 +212,7 @@
|
||||
"stats": "Статистика",
|
||||
"download_count": "Загрузки",
|
||||
"player_count": "Активные игроки",
|
||||
"rating_count": "Оценка",
|
||||
"download_error": "Этот вариант загрузки недоступен",
|
||||
"download": "Скачать",
|
||||
"executable_path_in_use": "Исполняемый файл уже используется \"{{game}}\"",
|
||||
@@ -226,6 +227,7 @@
|
||||
"write_review_placeholder": "Поделитесь своими мыслями об этой игре...",
|
||||
"sort_newest": "Сначала новые",
|
||||
"no_reviews_yet": "Пока нет отзывов",
|
||||
"review_played_for": "Играли",
|
||||
"be_first_to_review": "Станьте первым, кто поделится своими мыслями об этой игре!",
|
||||
"sort_oldest": "Сначала старые",
|
||||
"sort_highest_score": "Высший балл",
|
||||
@@ -252,17 +254,6 @@
|
||||
"would_you_recommend_this_game": "Хотите оставить отзыв об этой игре?",
|
||||
"yes": "Да",
|
||||
"maybe_later": "Возможно позже",
|
||||
"rating_count": "Оценка",
|
||||
"delete_review": "Удалить отзыв",
|
||||
"remove_review": "Удалить отзыв",
|
||||
"delete_review_modal_title": "Вы уверены, что хотите удалить свой отзыв?",
|
||||
"delete_review_modal_description": "Это действие нельзя отменить.",
|
||||
"delete_review_modal_delete_button": "Удалить",
|
||||
"delete_review_modal_cancel_button": "Отмена",
|
||||
"show_original": "Показать оригинал",
|
||||
"show_translation": "Показать перевод",
|
||||
"show_original_translated_from": "Показать оригинал (переведено с {{language}})",
|
||||
"hide_original": "Скрыть оригинал",
|
||||
"cloud_save": "Облачное сохранение",
|
||||
"cloud_save_description": "Сохраняйте ваш прогресс в облаке и продолжайте играть на любом устройстве",
|
||||
"backups": "Резервные копии",
|
||||
@@ -360,7 +351,21 @@
|
||||
"caption": "Субтитры",
|
||||
"audio": "Аудио",
|
||||
"filter_by_source": "Фильтр по источнику",
|
||||
"no_repacks_found": "Источники для этой игры не найдены"
|
||||
"no_repacks_found": "Источники для этой игры не найдены",
|
||||
"show": "Показать",
|
||||
"hide": "Скрыть",
|
||||
"delete_review": "Удалить отзыв",
|
||||
"remove_review": "Удалить отзыв",
|
||||
"delete_review_modal_title": "Вы уверены, что хотите удалить свой отзыв?",
|
||||
"delete_review_modal_description": "Это действие нельзя отменить.",
|
||||
"delete_review_modal_delete_button": "Удалить",
|
||||
"delete_review_modal_cancel_button": "Отмена",
|
||||
"vote_failed": "Не удалось зарегистрировать ваш голос. Пожалуйста, попробуйте снова.",
|
||||
"show_original": "Показать оригинал",
|
||||
"show_translation": "Показать перевод",
|
||||
"show_original_translated_from": "Показать оригинал (переведено с {{language}})",
|
||||
"hide_original": "Скрыть оригинал",
|
||||
"review_from_blocked_user": "Отзыв от заблокированного пользователя"
|
||||
},
|
||||
"activation": {
|
||||
"title": "Активировать Hydra",
|
||||
@@ -427,6 +432,9 @@
|
||||
"validate_download_source": "Проверить",
|
||||
"remove_download_source": "Удалить",
|
||||
"add_download_source": "Добавить источник",
|
||||
"adding": "Добавление…",
|
||||
"failed_add_download_source": "Не удалось добавить источник. Пожалуйста, попробуйте снова.",
|
||||
"download_source_already_exists": "Этот URL источника уже существует.",
|
||||
"download_count_zero": "В списке нет загрузок",
|
||||
"download_count_one": "{{countFormatted}} загрузка в списке",
|
||||
"download_count_other": "{{countFormatted}} загрузок в списке",
|
||||
@@ -434,9 +442,16 @@
|
||||
"add_download_source_description": "Вставьте ссылку на .json-файл",
|
||||
"download_source_up_to_date": "Обновлён",
|
||||
"download_source_errored": "Ошибка",
|
||||
"download_source_pending_matching": "Скоро обновится",
|
||||
"download_source_matched": "Обновлен",
|
||||
"download_source_matching": "Обновление",
|
||||
"download_source_failed": "Ошибка",
|
||||
"download_source_no_information": "Информация отсутствует",
|
||||
"sync_download_sources": "Обновить источники",
|
||||
"removed_download_source": "Источник удален",
|
||||
"removed_download_sources": "Источники удалены",
|
||||
"removed_all_download_sources": "Все источники удалены",
|
||||
"download_sources_synced_successfully": "Все источники синхронизированы",
|
||||
"cancel_button_confirmation_delete_all_sources": "Нет",
|
||||
"confirm_button_confirmation_delete_all_sources": "Да, удалить все",
|
||||
"title_confirmation_delete_all_sources": "Удалить все источники",
|
||||
@@ -467,6 +482,7 @@
|
||||
"seed_after_download_complete": "Раздавать после завершения загрузки",
|
||||
"show_hidden_achievement_description": "Показывать описание скрытых достижений перед их получением",
|
||||
"account": "Аккаунт",
|
||||
"hydra_cloud": "Hydra Cloud",
|
||||
"no_users_blocked": "У вас нет заблокированных пользователей",
|
||||
"subscription_active_until": "Ваша подписка на Hydra Cloud активна до {{date}}",
|
||||
"manage_subscription": "Управлять подпиской",
|
||||
@@ -540,7 +556,9 @@
|
||||
"hidden": "Скрытый",
|
||||
"test_notification": "Тестовое уведомление",
|
||||
"notification_preview": "Предварительный просмотр уведомления о достижении",
|
||||
"enable_friend_start_game_notifications": "Когда друг начинает играть в игру"
|
||||
"enable_friend_start_game_notifications": "Когда друг начинает играть в игру",
|
||||
"autoplay_trailers_on_game_page": "Автоматически начинать воспроизведение трейлеров на странице игры",
|
||||
"hide_to_tray_on_game_start": "Скрывать Hydra в трей при запуске игры"
|
||||
},
|
||||
"notifications": {
|
||||
"download_complete": "Загрузка завершена",
|
||||
@@ -590,6 +608,7 @@
|
||||
"activity": "Недавняя активность",
|
||||
"library": "Библиотека",
|
||||
"pinned": "Закрепленные",
|
||||
"sort_by": "Сортировать по:",
|
||||
"achievements_earned": "Заработанные достижения",
|
||||
"played_recently": "Недавно сыгранные",
|
||||
"playtime": "Время игры",
|
||||
@@ -674,7 +693,11 @@
|
||||
"game_added_to_pinned": "Игра добавлена в закрепленные",
|
||||
"karma": "Карма",
|
||||
"karma_count": "карма",
|
||||
"karma_description": "Заработана положительными оценками отзывов"
|
||||
"karma_description": "Заработана положительными оценками отзывов",
|
||||
"user_reviews": "Отзывы",
|
||||
"loading_reviews": "Загрузка отзывов...",
|
||||
"no_reviews": "Пока нет отзывов",
|
||||
"delete_review": "Удалить отзыв"
|
||||
},
|
||||
"achievement": {
|
||||
"achievement_unlocked": "Достижение разблокировано",
|
||||
|
||||
@@ -167,6 +167,8 @@ export class AchievementWatcherManager {
|
||||
shop: GameShop,
|
||||
objectId: string
|
||||
) {
|
||||
if (shop === "custom") return;
|
||||
|
||||
const gameKey = levelKeys.game(shop, objectId);
|
||||
if (this.alreadySyncedGames.get(gameKey)) return;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import axios, { AxiosResponse } from "axios";
|
||||
import { wrapper } from "axios-cookiejar-support";
|
||||
import { CookieJar } from "tough-cookie";
|
||||
import { logger } from "@main/services";
|
||||
|
||||
export class DatanodesApi {
|
||||
private static readonly jar = new CookieJar();
|
||||
@@ -20,51 +21,42 @@ export class DatanodesApi {
|
||||
|
||||
await this.jar.setCookie("lang=english;", "https://datanodes.to");
|
||||
|
||||
const payload = new URLSearchParams({
|
||||
op: "download2",
|
||||
id: fileCode,
|
||||
method_free: "Free Download >>",
|
||||
dl: "1",
|
||||
});
|
||||
const formData = new FormData();
|
||||
formData.append("op", "download2");
|
||||
formData.append("id", fileCode);
|
||||
formData.append("rand", "");
|
||||
formData.append("referer", "https://datanodes.to/download");
|
||||
formData.append("method_free", "Free Download >>");
|
||||
formData.append("method_premium", "");
|
||||
formData.append("__dl", "1");
|
||||
|
||||
const response: AxiosResponse = await this.session.post(
|
||||
"https://datanodes.to/download",
|
||||
payload,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"User-Agent":
|
||||
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0",
|
||||
accept: "*/*",
|
||||
"accept-language": "en-US,en;q=0.9",
|
||||
priority: "u=1, i",
|
||||
"sec-ch-ua":
|
||||
'"Google Chrome";v="141", "Not?A_Brand";v="8", "Chromium";v="141"',
|
||||
"sec-ch-ua-mobile": "?0",
|
||||
"sec-ch-ua-platform": '"Windows"',
|
||||
"sec-fetch-dest": "empty",
|
||||
"sec-fetch-mode": "cors",
|
||||
"sec-fetch-site": "same-origin",
|
||||
Referer: "https://datanodes.to/download",
|
||||
Origin: "https://datanodes.to",
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
maxRedirects: 0,
|
||||
validateStatus: (status: number) => status === 302 || status < 400,
|
||||
}
|
||||
);
|
||||
|
||||
if (response.status === 302) {
|
||||
return response.headers["location"];
|
||||
}
|
||||
|
||||
if (typeof response.data === "object" && response.data.url) {
|
||||
return decodeURIComponent(response.data.url);
|
||||
}
|
||||
|
||||
const htmlContent = String(response.data);
|
||||
if (!htmlContent) {
|
||||
throw new Error("Empty response received");
|
||||
}
|
||||
|
||||
const downloadLinkRegex = /href=["'](https:\/\/[^"']+)["']/;
|
||||
const downloadLinkMatch = downloadLinkRegex.exec(htmlContent);
|
||||
if (downloadLinkMatch) {
|
||||
return downloadLinkMatch[1];
|
||||
}
|
||||
|
||||
throw new Error("Failed to get the download link");
|
||||
} catch (error) {
|
||||
console.error("Error fetching download URL:", error);
|
||||
logger.error("Error fetching download URL:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,10 @@ import { HydraApi } from "../hydra-api";
|
||||
import { gamesSublevel, levelKeys } from "@main/level";
|
||||
|
||||
export const createGame = async (game: Game) => {
|
||||
if (game.shop === "custom") {
|
||||
return;
|
||||
}
|
||||
|
||||
return HydraApi.post(`/profile/games`, {
|
||||
objectId: game.objectId,
|
||||
playTimeInMilliseconds: Math.trunc(game.playTimeInMilliseconds ?? 0),
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
import type { Game } from "@types";
|
||||
import { HydraApi } from "../hydra-api";
|
||||
|
||||
export const updateGamePlaytime = async (
|
||||
export const trackGamePlaytime = async (
|
||||
game: Game,
|
||||
deltaInMillis: number,
|
||||
lastTimePlayed: Date
|
||||
) => {
|
||||
return HydraApi.put(`/profile/games/${game.remoteId}`, {
|
||||
if (game.shop === "custom") {
|
||||
return;
|
||||
}
|
||||
|
||||
return HydraApi.put(`/profile/games/${game.shop}/${game.objectId}`, {
|
||||
playTimeDeltaInSeconds: Math.trunc(deltaInMillis / 1000),
|
||||
lastTimePlayed,
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { WindowManager } from "./window-manager";
|
||||
import { createGame, updateGamePlaytime } from "./library-sync";
|
||||
import { createGame, trackGamePlaytime } from "./library-sync";
|
||||
import type { Game, GameRunning, UserPreferences } from "@types";
|
||||
import { PythonRPC } from "./python-rpc";
|
||||
import axios from "axios";
|
||||
@@ -198,11 +198,6 @@ export const watchProcesses = async () => {
|
||||
function onOpenGame(game: Game) {
|
||||
const now = performance.now();
|
||||
|
||||
AchievementWatcherManager.firstSyncWithRemoteIfNeeded(
|
||||
game.shop,
|
||||
game.objectId
|
||||
);
|
||||
|
||||
gamesPlaytime.set(levelKeys.game(game.shop, game.objectId), {
|
||||
lastTick: now,
|
||||
firstTick: now,
|
||||
@@ -220,8 +215,15 @@ function onOpenGame(game: Game) {
|
||||
})
|
||||
.catch(() => {});
|
||||
|
||||
if (game.shop === "custom") return;
|
||||
|
||||
AchievementWatcherManager.firstSyncWithRemoteIfNeeded(
|
||||
game.shop,
|
||||
game.objectId
|
||||
);
|
||||
|
||||
if (game.remoteId) {
|
||||
updateGamePlaytime(
|
||||
trackGamePlaytime(
|
||||
game,
|
||||
game.unsyncedDeltaPlayTimeInMilliseconds ?? 0,
|
||||
new Date()
|
||||
@@ -255,43 +257,46 @@ function onTickGame(game: Game) {
|
||||
|
||||
const delta = now - gamePlaytime.lastTick;
|
||||
|
||||
gamesSublevel.put(levelKeys.game(game.shop, game.objectId), {
|
||||
const updatedGame: Game = {
|
||||
...game,
|
||||
playTimeInMilliseconds: (game.playTimeInMilliseconds ?? 0) + delta,
|
||||
lastTimePlayed: new Date(),
|
||||
});
|
||||
};
|
||||
|
||||
gamesSublevel.put(levelKeys.game(game.shop, game.objectId), updatedGame);
|
||||
|
||||
gamesPlaytime.set(levelKeys.game(game.shop, game.objectId), {
|
||||
...gamePlaytime,
|
||||
lastTick: now,
|
||||
});
|
||||
|
||||
if (currentTick % TICKS_TO_UPDATE_API === 0) {
|
||||
if (currentTick % TICKS_TO_UPDATE_API === 0 && game.shop !== "custom") {
|
||||
const deltaToSync =
|
||||
now -
|
||||
gamePlaytime.lastSyncTick +
|
||||
(game.unsyncedDeltaPlayTimeInMilliseconds ?? 0);
|
||||
|
||||
const gamePromise = game.remoteId
|
||||
? updateGamePlaytime(game, deltaToSync, game.lastTimePlayed!)
|
||||
? trackGamePlaytime(game, deltaToSync, game.lastTimePlayed!)
|
||||
: createGame(game);
|
||||
|
||||
gamePromise
|
||||
.then(() => {
|
||||
gamesSublevel.put(levelKeys.game(game.shop, game.objectId), {
|
||||
...game,
|
||||
...updatedGame,
|
||||
unsyncedDeltaPlayTimeInMilliseconds: 0,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
gamesSublevel.put(levelKeys.game(game.shop, game.objectId), {
|
||||
...game,
|
||||
...updatedGame,
|
||||
unsyncedDeltaPlayTimeInMilliseconds: deltaToSync,
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
gamesPlaytime.set(levelKeys.game(game.shop, game.objectId), {
|
||||
...gamePlaytime,
|
||||
lastTick: now,
|
||||
lastSyncTick: now,
|
||||
});
|
||||
});
|
||||
@@ -299,11 +304,24 @@ function onTickGame(game: Game) {
|
||||
}
|
||||
|
||||
const onCloseGame = (game: Game) => {
|
||||
const now = performance.now();
|
||||
const gamePlaytime = gamesPlaytime.get(
|
||||
levelKeys.game(game.shop, game.objectId)
|
||||
)!;
|
||||
gamesPlaytime.delete(levelKeys.game(game.shop, game.objectId));
|
||||
|
||||
const delta = now - gamePlaytime.lastTick;
|
||||
|
||||
const updatedGame: Game = {
|
||||
...game,
|
||||
playTimeInMilliseconds: (game.playTimeInMilliseconds ?? 0) + delta,
|
||||
lastTimePlayed: new Date(),
|
||||
};
|
||||
|
||||
gamesSublevel.put(levelKeys.game(game.shop, game.objectId), updatedGame);
|
||||
|
||||
if (game.shop === "custom") return;
|
||||
|
||||
if (game.remoteId) {
|
||||
if (game.automaticCloudSync) {
|
||||
CloudSync.uploadSaveGame(
|
||||
@@ -315,20 +333,20 @@ const onCloseGame = (game: Game) => {
|
||||
}
|
||||
|
||||
const deltaToSync =
|
||||
performance.now() -
|
||||
now -
|
||||
gamePlaytime.lastSyncTick +
|
||||
(game.unsyncedDeltaPlayTimeInMilliseconds ?? 0);
|
||||
|
||||
return updateGamePlaytime(game, deltaToSync, game.lastTimePlayed!)
|
||||
return trackGamePlaytime(game, deltaToSync, game.lastTimePlayed!)
|
||||
.then(() => {
|
||||
return gamesSublevel.put(levelKeys.game(game.shop, game.objectId), {
|
||||
...game,
|
||||
...updatedGame,
|
||||
unsyncedDeltaPlayTimeInMilliseconds: 0,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
return gamesSublevel.put(levelKeys.game(game.shop, game.objectId), {
|
||||
...game,
|
||||
...updatedGame,
|
||||
unsyncedDeltaPlayTimeInMilliseconds: deltaToSync,
|
||||
});
|
||||
});
|
||||
|
||||
@@ -25,6 +25,7 @@ import type {
|
||||
} from "@types";
|
||||
import { AuthPage, generateAchievementCustomNotificationTest } from "@shared";
|
||||
import { isStaging } from "@main/constants";
|
||||
import { logger } from "./logger";
|
||||
|
||||
export class WindowManager {
|
||||
public static mainWindow: Electron.BrowserWindow | null = null;
|
||||
@@ -54,21 +55,25 @@ export class WindowManager {
|
||||
show: false,
|
||||
};
|
||||
|
||||
private static formatVersionNumber(version: string) {
|
||||
return version.replaceAll(".", "-");
|
||||
}
|
||||
|
||||
private static async loadWindowURL(window: BrowserWindow, hash: string = "") {
|
||||
// HMR for renderer base on electron-vite cli.
|
||||
// Load the remote URL for development or the local html file for production.
|
||||
if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
|
||||
window.loadURL(`${process.env["ELECTRON_RENDERER_URL"]}#/${hash}`);
|
||||
} else if (import.meta.env.MAIN_VITE_RENDERER_URL) {
|
||||
} else if (import.meta.env.MAIN_VITE_LAUNCHER_SUBDOMAIN) {
|
||||
// Try to load from remote URL in production
|
||||
try {
|
||||
await window.loadURL(
|
||||
`${import.meta.env.MAIN_VITE_RENDERER_URL}#/${hash}`
|
||||
`https://release-v${this.formatVersionNumber(app.getVersion())}.${import.meta.env.MAIN_VITE_LAUNCHER_SUBDOMAIN}#/${hash}`
|
||||
);
|
||||
} catch (error) {
|
||||
// Fall back to local file if remote URL fails
|
||||
console.error(
|
||||
"Failed to load from MAIN_VITE_RENDERER_URL, falling back to local file:",
|
||||
logger.error(
|
||||
"Failed to load from MAIN_VITE_LAUNCHER_SUBDOMAIN, falling back to local file:",
|
||||
error
|
||||
);
|
||||
window.loadFile(path.join(__dirname, "../renderer/index.html"), {
|
||||
@@ -284,12 +289,6 @@ export class WindowManager {
|
||||
}
|
||||
}
|
||||
|
||||
private static loadNotificationWindowURL() {
|
||||
if (this.notificationWindow) {
|
||||
this.loadWindowURL(this.notificationWindow, "achievement-notification");
|
||||
}
|
||||
}
|
||||
|
||||
private static readonly NOTIFICATION_WINDOW_WIDTH = 360;
|
||||
private static readonly NOTIFICATION_WINDOW_HEIGHT = 140;
|
||||
|
||||
@@ -297,46 +296,58 @@ export class WindowManager {
|
||||
position: AchievementCustomNotificationPosition | undefined
|
||||
) {
|
||||
const display = screen.getPrimaryDisplay();
|
||||
const { width, height } = display.workAreaSize;
|
||||
const {
|
||||
x: displayX,
|
||||
y: displayY,
|
||||
width: displayWidth,
|
||||
height: displayHeight,
|
||||
} = display.bounds;
|
||||
|
||||
if (position === "bottom-left") {
|
||||
return {
|
||||
x: 0,
|
||||
y: height - this.NOTIFICATION_WINDOW_HEIGHT,
|
||||
x: displayX,
|
||||
y: displayY + displayHeight - this.NOTIFICATION_WINDOW_HEIGHT,
|
||||
};
|
||||
}
|
||||
|
||||
if (position === "bottom-center") {
|
||||
return {
|
||||
x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
|
||||
y: height - this.NOTIFICATION_WINDOW_HEIGHT,
|
||||
x: displayX + (displayWidth - this.NOTIFICATION_WINDOW_WIDTH) / 2,
|
||||
y: displayY + displayHeight - this.NOTIFICATION_WINDOW_HEIGHT,
|
||||
};
|
||||
}
|
||||
|
||||
if (position === "bottom-right") {
|
||||
return {
|
||||
x: width - this.NOTIFICATION_WINDOW_WIDTH,
|
||||
y: height - this.NOTIFICATION_WINDOW_HEIGHT,
|
||||
x: displayX + displayWidth - this.NOTIFICATION_WINDOW_WIDTH,
|
||||
y: displayY + displayHeight - this.NOTIFICATION_WINDOW_HEIGHT,
|
||||
};
|
||||
}
|
||||
|
||||
if (position === "top-left") {
|
||||
return {
|
||||
x: displayX,
|
||||
y: displayY,
|
||||
};
|
||||
}
|
||||
|
||||
if (position === "top-center") {
|
||||
return {
|
||||
x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
|
||||
y: 0,
|
||||
x: displayX + (displayWidth - this.NOTIFICATION_WINDOW_WIDTH) / 2,
|
||||
y: displayY,
|
||||
};
|
||||
}
|
||||
|
||||
if (position === "top-right") {
|
||||
return {
|
||||
x: width - this.NOTIFICATION_WINDOW_WIDTH,
|
||||
y: 0,
|
||||
x: displayX + displayWidth - this.NOTIFICATION_WINDOW_WIDTH,
|
||||
y: displayY,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x: displayX,
|
||||
y: displayY,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -382,7 +393,7 @@ export class WindowManager {
|
||||
this.notificationWindow.setIgnoreMouseEvents(true);
|
||||
|
||||
this.notificationWindow.setAlwaysOnTop(true, "screen-saver", 1);
|
||||
this.loadNotificationWindowURL();
|
||||
this.loadWindowURL(this.notificationWindow, "achievement-notification");
|
||||
|
||||
if (!app.isPackaged || isStaging) {
|
||||
this.notificationWindow.webContents.openDevTools();
|
||||
|
||||
2
src/main/vite-env.d.ts
vendored
2
src/main/vite-env.d.ts
vendored
@@ -7,7 +7,7 @@ interface ImportMetaEnv {
|
||||
readonly MAIN_VITE_CHECKOUT_URL: string;
|
||||
readonly MAIN_VITE_EXTERNAL_RESOURCES_URL: string;
|
||||
readonly MAIN_VITE_WS_URL: string;
|
||||
readonly MAIN_VITE_RENDERER_URL: string;
|
||||
readonly MAIN_VITE_LAUNCHER_SUBDOMAIN: string;
|
||||
readonly ELECTRON_RENDERER_URL: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -279,7 +279,11 @@ export function App() {
|
||||
<article className="container">
|
||||
<Header />
|
||||
|
||||
<section ref={contentRef} className="container__content">
|
||||
<section
|
||||
ref={contentRef}
|
||||
id="scrollableDiv"
|
||||
className="container__content"
|
||||
>
|
||||
<Outlet />
|
||||
</section>
|
||||
</article>
|
||||
|
||||
@@ -60,7 +60,7 @@ export function Header() {
|
||||
};
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
dispatch(setFilters({ title: value }));
|
||||
dispatch(setFilters({ title: value.slice(0, 255) }));
|
||||
|
||||
if (!location.pathname.startsWith("/catalogue")) {
|
||||
navigate("/catalogue");
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import React, { useId, useMemo, useState } from "react";
|
||||
import React, { useId, useState } from "react";
|
||||
import { EyeClosedIcon, EyeIcon } from "@primer/octicons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import cn from "classnames";
|
||||
|
||||
import "./text-field.scss";
|
||||
|
||||
export interface TextFieldProps
|
||||
@@ -42,44 +40,30 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
) => {
|
||||
const id = useId();
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
|
||||
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
|
||||
|
||||
const { t } = useTranslation("forms");
|
||||
|
||||
const showPasswordToggleButton = props.type === "password";
|
||||
|
||||
const inputType = useMemo(() => {
|
||||
if (props.type === "password" && isPasswordVisible) return "text";
|
||||
return props.type ?? "text";
|
||||
}, [props.type, isPasswordVisible]);
|
||||
|
||||
const hintContent = useMemo(() => {
|
||||
if (error)
|
||||
return (
|
||||
<small className="text-field-container__error-label">{error}</small>
|
||||
);
|
||||
|
||||
if (hint) return <small>{hint}</small>;
|
||||
return null;
|
||||
}, [hint, error]);
|
||||
|
||||
const inputType =
|
||||
props.type === "password" && isPasswordVisible
|
||||
? "text"
|
||||
: (props.type ?? "text");
|
||||
const hintContent = error ? (
|
||||
<small className="text-field-container__error-label">{error}</small>
|
||||
) : hint ? (
|
||||
<small>{hint}</small>
|
||||
) : null;
|
||||
const handleFocus: React.FocusEventHandler<HTMLInputElement> = (event) => {
|
||||
setIsFocused(true);
|
||||
if (props.onFocus) props.onFocus(event);
|
||||
props.onFocus?.(event);
|
||||
};
|
||||
|
||||
const handleBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {
|
||||
setIsFocused(false);
|
||||
if (props.onBlur) props.onBlur(event);
|
||||
props.onBlur?.(event);
|
||||
};
|
||||
|
||||
const hasError = !!error;
|
||||
|
||||
return (
|
||||
<div className="text-field-container" {...containerProps}>
|
||||
{label && <label htmlFor={id}>{label}</label>}
|
||||
|
||||
<div className="text-field-container__text-field-wrapper">
|
||||
<div
|
||||
className={cn(
|
||||
@@ -104,7 +88,6 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
onBlur={handleBlur}
|
||||
type={inputType}
|
||||
/>
|
||||
|
||||
{showPasswordToggleButton && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -120,14 +103,11 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{rightContent}
|
||||
</div>
|
||||
|
||||
{hintContent}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
TextField.displayName = "TextField";
|
||||
|
||||
@@ -293,6 +293,8 @@ export function GameDetailsContextProvider({
|
||||
}, [objectId, shop, userDetails]);
|
||||
|
||||
useEffect(() => {
|
||||
if (shop === "custom") return;
|
||||
|
||||
const fetchDownloadSources = async () => {
|
||||
try {
|
||||
const sources = await window.electron.getDownloadSources();
|
||||
|
||||
@@ -14,12 +14,15 @@ export interface UserProfileContext {
|
||||
isMe: boolean;
|
||||
userStats: UserStats | null;
|
||||
getUserProfile: () => Promise<void>;
|
||||
getUserLibraryGames: (sortBy?: string) => Promise<void>;
|
||||
getUserLibraryGames: (sortBy?: string, reset?: boolean) => Promise<void>;
|
||||
loadMoreLibraryGames: (sortBy?: string) => Promise<boolean>;
|
||||
setSelectedBackgroundImage: React.Dispatch<React.SetStateAction<string>>;
|
||||
backgroundImage: string;
|
||||
badges: Badge[];
|
||||
libraryGames: UserGame[];
|
||||
pinnedGames: UserGame[];
|
||||
hasMoreLibraryGames: boolean;
|
||||
isLoadingLibraryGames: boolean;
|
||||
}
|
||||
|
||||
export const DEFAULT_USER_PROFILE_BACKGROUND = "#151515B3";
|
||||
@@ -30,12 +33,15 @@ export const userProfileContext = createContext<UserProfileContext>({
|
||||
isMe: false,
|
||||
userStats: null,
|
||||
getUserProfile: async () => {},
|
||||
getUserLibraryGames: async (_sortBy?: string) => {},
|
||||
getUserLibraryGames: async (_sortBy?: string, _reset?: boolean) => {},
|
||||
loadMoreLibraryGames: async (_sortBy?: string) => false,
|
||||
setSelectedBackgroundImage: () => {},
|
||||
backgroundImage: "",
|
||||
badges: [],
|
||||
libraryGames: [],
|
||||
pinnedGames: [],
|
||||
hasMoreLibraryGames: false,
|
||||
isLoadingLibraryGames: false,
|
||||
});
|
||||
|
||||
const { Provider } = userProfileContext;
|
||||
@@ -62,6 +68,9 @@ export function UserProfileContextProvider({
|
||||
DEFAULT_USER_PROFILE_BACKGROUND
|
||||
);
|
||||
const [selectedBackgroundImage, setSelectedBackgroundImage] = useState("");
|
||||
const [libraryPage, setLibraryPage] = useState(0);
|
||||
const [hasMoreLibraryGames, setHasMoreLibraryGames] = useState(true);
|
||||
const [isLoadingLibraryGames, setIsLoadingLibraryGames] = useState(false);
|
||||
|
||||
const isMe = userDetails?.id === userProfile?.id;
|
||||
|
||||
@@ -93,7 +102,13 @@ export function UserProfileContextProvider({
|
||||
}, [userId]);
|
||||
|
||||
const getUserLibraryGames = useCallback(
|
||||
async (sortBy?: string) => {
|
||||
async (sortBy?: string, reset = true) => {
|
||||
if (reset) {
|
||||
setLibraryPage(0);
|
||||
setHasMoreLibraryGames(true);
|
||||
setIsLoadingLibraryGames(true);
|
||||
}
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
params.append("take", "12");
|
||||
@@ -115,18 +130,74 @@ export function UserProfileContextProvider({
|
||||
if (response) {
|
||||
setLibraryGames(response.library);
|
||||
setPinnedGames(response.pinnedGames);
|
||||
setHasMoreLibraryGames(response.library.length === 12);
|
||||
} else {
|
||||
setLibraryGames([]);
|
||||
setPinnedGames([]);
|
||||
setHasMoreLibraryGames(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setLibraryGames([]);
|
||||
setPinnedGames([]);
|
||||
setHasMoreLibraryGames(false);
|
||||
} finally {
|
||||
setIsLoadingLibraryGames(false);
|
||||
}
|
||||
},
|
||||
[userId]
|
||||
);
|
||||
|
||||
const loadMoreLibraryGames = useCallback(
|
||||
async (sortBy?: string): Promise<boolean> => {
|
||||
if (isLoadingLibraryGames || !hasMoreLibraryGames) {
|
||||
return false;
|
||||
}
|
||||
|
||||
setIsLoadingLibraryGames(true);
|
||||
try {
|
||||
const nextPage = libraryPage + 1;
|
||||
const params = new URLSearchParams();
|
||||
params.append("take", "12");
|
||||
params.append("skip", String(nextPage * 12));
|
||||
if (sortBy) {
|
||||
params.append("sortBy", sortBy);
|
||||
}
|
||||
|
||||
const queryString = params.toString();
|
||||
const url = queryString
|
||||
? `/users/${userId}/library?${queryString}`
|
||||
: `/users/${userId}/library`;
|
||||
|
||||
const response = await window.electron.hydraApi.get<{
|
||||
library: UserGame[];
|
||||
pinnedGames: UserGame[];
|
||||
}>(url);
|
||||
|
||||
if (response && response.library.length > 0) {
|
||||
setLibraryGames((prev) => {
|
||||
const existingIds = new Set(prev.map((game) => game.objectId));
|
||||
const newGames = response.library.filter(
|
||||
(game) => !existingIds.has(game.objectId)
|
||||
);
|
||||
return [...prev, ...newGames];
|
||||
});
|
||||
setLibraryPage(nextPage);
|
||||
setHasMoreLibraryGames(response.library.length === 12);
|
||||
return true;
|
||||
} else {
|
||||
setHasMoreLibraryGames(false);
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
setHasMoreLibraryGames(false);
|
||||
return false;
|
||||
} finally {
|
||||
setIsLoadingLibraryGames(false);
|
||||
}
|
||||
},
|
||||
[userId, libraryPage, hasMoreLibraryGames, isLoadingLibraryGames]
|
||||
);
|
||||
|
||||
const getUserProfile = useCallback(async () => {
|
||||
getUserStats();
|
||||
getUserLibraryGames();
|
||||
@@ -164,6 +235,8 @@ export function UserProfileContextProvider({
|
||||
setLibraryGames([]);
|
||||
setPinnedGames([]);
|
||||
setHeroBackground(DEFAULT_USER_PROFILE_BACKGROUND);
|
||||
setLibraryPage(0);
|
||||
setHasMoreLibraryGames(true);
|
||||
|
||||
getUserProfile();
|
||||
getBadges();
|
||||
@@ -177,12 +250,15 @@ export function UserProfileContextProvider({
|
||||
isMe,
|
||||
getUserProfile,
|
||||
getUserLibraryGames,
|
||||
loadMoreLibraryGames,
|
||||
setSelectedBackgroundImage,
|
||||
backgroundImage: getBackgroundImageUrl(),
|
||||
userStats,
|
||||
badges,
|
||||
libraryGames,
|
||||
pinnedGames,
|
||||
hasMoreLibraryGames,
|
||||
isLoadingLibraryGames,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -3,12 +3,14 @@ import { useState, useCallback } from "react";
|
||||
interface SectionCollapseState {
|
||||
pinned: boolean;
|
||||
library: boolean;
|
||||
reviews: boolean;
|
||||
}
|
||||
|
||||
export function useSectionCollapse() {
|
||||
const [collapseState, setCollapseState] = useState<SectionCollapseState>({
|
||||
pinned: false,
|
||||
library: false,
|
||||
reviews: false,
|
||||
});
|
||||
|
||||
const toggleSection = useCallback((section: keyof SectionCollapseState) => {
|
||||
@@ -23,5 +25,6 @@ export function useSectionCollapse() {
|
||||
toggleSection,
|
||||
isPinnedCollapsed: collapseState.pinned,
|
||||
isLibraryCollapsed: collapseState.library,
|
||||
isReviewsCollapsed: collapseState.reviews,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -35,7 +35,7 @@ export default function Catalogue() {
|
||||
|
||||
const { steamDevelopers, steamPublishers, downloadSources } = useCatalogue();
|
||||
|
||||
const { steamGenres, steamUserTags } = useAppSelector(
|
||||
const { steamGenres, steamUserTags, filters, page } = useAppSelector(
|
||||
(state) => state.catalogueSearch
|
||||
);
|
||||
|
||||
@@ -47,8 +47,6 @@ export default function Catalogue() {
|
||||
|
||||
const { formatNumber } = useFormat();
|
||||
|
||||
const { filters, page } = useAppSelector((state) => state.catalogueSearch);
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const { t, i18n } = useTranslation("catalogue");
|
||||
|
||||
@@ -29,9 +29,11 @@ function JumpControl({
|
||||
return isOpen ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="number"
|
||||
type="text"
|
||||
min={1}
|
||||
max={totalPages}
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
className="pagination__page-input"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
@@ -56,7 +58,7 @@ export function Pagination({
|
||||
page,
|
||||
totalPages,
|
||||
onPageChange,
|
||||
}: PaginationProps) {
|
||||
}: Readonly<PaginationProps>) {
|
||||
const { formatNumber } = useFormat();
|
||||
|
||||
const [isJumpOpen, setIsJumpOpen] = useState(false);
|
||||
@@ -87,13 +89,15 @@ export function Pagination({
|
||||
}
|
||||
|
||||
const onJumpChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const val = e.target.value;
|
||||
if (val === "") {
|
||||
const raw = e.target.value;
|
||||
const digitsOnly = raw.replaceAll(/\D+/g, "");
|
||||
if (digitsOnly === "") {
|
||||
setJumpValue("");
|
||||
return;
|
||||
}
|
||||
const num = Number(val);
|
||||
const num = Number.parseInt(digitsOnly, 10);
|
||||
if (Number.isNaN(num)) {
|
||||
setJumpValue("");
|
||||
return;
|
||||
}
|
||||
if (num < 1) {
|
||||
@@ -104,19 +108,36 @@ export function Pagination({
|
||||
setJumpValue(String(totalPages));
|
||||
return;
|
||||
}
|
||||
setJumpValue(val);
|
||||
setJumpValue(String(num));
|
||||
};
|
||||
|
||||
const onJumpKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||
const controlKeys = [
|
||||
"Backspace",
|
||||
"Delete",
|
||||
"Tab",
|
||||
"ArrowLeft",
|
||||
"ArrowRight",
|
||||
"Home",
|
||||
"End",
|
||||
];
|
||||
|
||||
if (controlKeys.includes(e.key) || e.ctrlKey || e.metaKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "Enter") {
|
||||
if (jumpValue.trim() === "") return;
|
||||
const parsed = Number(jumpValue);
|
||||
const sanitized = jumpValue.replaceAll(/\D+/g, "");
|
||||
if (sanitized.trim() === "") return;
|
||||
const parsed = Number.parseInt(sanitized, 10);
|
||||
if (Number.isNaN(parsed)) return;
|
||||
const target = Math.max(1, Math.min(totalPages, parsed));
|
||||
onPageChange(target);
|
||||
setIsJumpOpen(false);
|
||||
} else if (e.key === "Escape") {
|
||||
setIsJumpOpen(false);
|
||||
} else if (!/^\d$/.test(e.key)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -163,7 +163,6 @@ export function GameReviews({
|
||||
take: "20",
|
||||
skip: skip.toString(),
|
||||
sortBy: reviewsSortBy,
|
||||
language: i18n.language,
|
||||
});
|
||||
|
||||
const response = await window.electron.hydraApi.get(
|
||||
|
||||
@@ -8,11 +8,23 @@
|
||||
|
||||
&__review-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 1);
|
||||
margin-bottom: calc(globals.$spacing-unit * 1.5);
|
||||
}
|
||||
|
||||
&__review-header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__review-header-bottom {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__review-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -22,7 +34,13 @@
|
||||
&__review-user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 0.25);
|
||||
gap: calc(globals.$spacing-unit * 0.45);
|
||||
}
|
||||
|
||||
&__review-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit * 0.75);
|
||||
}
|
||||
|
||||
&__review-display-name {
|
||||
@@ -157,28 +175,28 @@
|
||||
&__review-score-stars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
gap: 4px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__review-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&__review-star {
|
||||
color: #666666;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
transition: color 0.2s ease;
|
||||
cursor: default;
|
||||
|
||||
&--filled {
|
||||
color: #ffffff;
|
||||
|
||||
&.game-details__review-score--red {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
&.game-details__review-score--yellow {
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
&.game-details__review-score--green {
|
||||
color: #86efac;
|
||||
}
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
&--empty {
|
||||
@@ -198,6 +216,24 @@
|
||||
font-size: globals.$small-font-size;
|
||||
}
|
||||
|
||||
&__review-playtime {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-top: 0;
|
||||
|
||||
svg {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
&__review-content {
|
||||
color: globals.$body-color;
|
||||
line-height: 1.5;
|
||||
|
||||
@@ -7,9 +7,10 @@ import { useState } from "react";
|
||||
import type { GameReview } from "@types";
|
||||
|
||||
import { sanitizeHtml } from "@shared";
|
||||
import { useDate } from "@renderer/hooks";
|
||||
import { useDate, useFormat } from "@renderer/hooks";
|
||||
import { formatNumber } from "@renderer/helpers";
|
||||
import { Avatar } from "@renderer/components";
|
||||
import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
|
||||
|
||||
import "./review-item.scss";
|
||||
|
||||
@@ -29,13 +30,6 @@ interface ReviewItemProps {
|
||||
) => void;
|
||||
}
|
||||
|
||||
const getScoreColorClass = (score: number): string => {
|
||||
if (score >= 1 && score <= 2) return "game-details__review-score--red";
|
||||
if (score >= 3 && score <= 3) return "game-details__review-score--yellow";
|
||||
if (score >= 4 && score <= 5) return "game-details__review-score--green";
|
||||
return "";
|
||||
};
|
||||
|
||||
const getRatingText = (score: number, t: (key: string) => string): string => {
|
||||
switch (score) {
|
||||
case 1:
|
||||
@@ -68,28 +62,22 @@ export function ReviewItem({
|
||||
const navigate = useNavigate();
|
||||
const { t, i18n } = useTranslation("game_details");
|
||||
const { formatDistance } = useDate();
|
||||
const { numberFormatter } = useFormat();
|
||||
|
||||
const [showOriginal, setShowOriginal] = useState(false);
|
||||
|
||||
// Check if this is the user's own review
|
||||
const isOwnReview = userDetailsId === review.user.id;
|
||||
|
||||
// Helper to get base language code (e.g., "pt" from "pt-BR")
|
||||
const getBaseLanguage = (lang: string) => lang.split("-")[0];
|
||||
const getBaseLanguage = (lang: string | null) => lang?.split("-")[0] || "";
|
||||
|
||||
// Check if the review is in a different language (comparing base language codes)
|
||||
const isDifferentLanguage =
|
||||
getBaseLanguage(review.detectedLanguage) !== getBaseLanguage(i18n.language);
|
||||
|
||||
// Check if translation is available and needed (but not for own reviews)
|
||||
const needsTranslation =
|
||||
!isOwnReview &&
|
||||
isDifferentLanguage &&
|
||||
review.translations &&
|
||||
review.translations[i18n.language];
|
||||
!isOwnReview && isDifferentLanguage && review.translations[i18n.language];
|
||||
|
||||
// Get the full language name using Intl.DisplayNames
|
||||
const getLanguageName = (languageCode: string) => {
|
||||
const getLanguageName = (languageCode: string | null) => {
|
||||
if (!languageCode) return "";
|
||||
try {
|
||||
const displayNames = new Intl.DisplayNames([i18n.language], {
|
||||
type: "language",
|
||||
@@ -100,6 +88,20 @@ export function ReviewItem({
|
||||
}
|
||||
};
|
||||
|
||||
// Format playtime similar to hero panel
|
||||
const formatPlayTime = (playTimeInSeconds: number) => {
|
||||
const minutes = playTimeInSeconds / 60;
|
||||
|
||||
if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
|
||||
return t("amount_minutes", {
|
||||
amount: minutes.toFixed(0),
|
||||
});
|
||||
}
|
||||
|
||||
const hours = minutes / 60;
|
||||
return t("amount_hours", { amount: numberFormatter.format(hours) });
|
||||
};
|
||||
|
||||
// Determine which content to show - always show original for own reviews
|
||||
const displayContent = needsTranslation
|
||||
? review.translations[i18n.language]
|
||||
@@ -109,12 +111,12 @@ export function ReviewItem({
|
||||
return (
|
||||
<div className="game-details__review-item">
|
||||
<div className="game-details__blocked-review-simple">
|
||||
Review from blocked user —{" "}
|
||||
{t("review_from_blocked_user")}
|
||||
<button
|
||||
className="game-details__blocked-review-show-link"
|
||||
onClick={() => onToggleVisibility(review.id)}
|
||||
>
|
||||
Show
|
||||
{t("show")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -124,54 +126,61 @@ export function ReviewItem({
|
||||
return (
|
||||
<div className="game-details__review-item">
|
||||
<div className="game-details__review-header">
|
||||
<div className="game-details__review-user">
|
||||
<button
|
||||
onClick={() => navigate(`/profile/${review.user.id}`)}
|
||||
title={review.user.displayName}
|
||||
>
|
||||
<Avatar
|
||||
src={review.user.profileImageUrl}
|
||||
alt={review.user.displayName || "User"}
|
||||
size={40}
|
||||
/>
|
||||
</button>
|
||||
<div className="game-details__review-user-info">
|
||||
<div className="game-details__review-header-top">
|
||||
<div className="game-details__review-user">
|
||||
<button
|
||||
className="game-details__review-display-name game-details__review-display-name--clickable"
|
||||
onClick={() =>
|
||||
review.user.id && navigate(`/profile/${review.user.id}`)
|
||||
}
|
||||
onClick={() => navigate(`/profile/${review.user.id}`)}
|
||||
title={review.user.displayName}
|
||||
>
|
||||
{review.user.displayName || "Anonymous"}
|
||||
<Avatar
|
||||
src={review.user.profileImageUrl}
|
||||
alt={review.user.displayName || "User"}
|
||||
size={40}
|
||||
/>
|
||||
</button>
|
||||
<div className="game-details__review-date">
|
||||
<ClockIcon size={12} />
|
||||
{formatDistance(new Date(review.createdAt), new Date(), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
<div className="game-details__review-user-info">
|
||||
<button
|
||||
className="game-details__review-display-name game-details__review-display-name--clickable"
|
||||
onClick={() =>
|
||||
review.user.id && navigate(`/profile/${review.user.id}`)
|
||||
}
|
||||
>
|
||||
{review.user.displayName || "Anonymous"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="game-details__review-date">
|
||||
{formatDistance(new Date(review.createdAt), new Date(), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="game-details__review-score-stars"
|
||||
title={getRatingText(review.score, t)}
|
||||
>
|
||||
{[1, 2, 3, 4, 5].map((starValue) => (
|
||||
<Star
|
||||
key={starValue}
|
||||
size={20}
|
||||
fill={starValue <= review.score ? "currentColor" : "none"}
|
||||
className={`game-details__review-star ${
|
||||
starValue <= review.score
|
||||
? "game-details__review-star--filled"
|
||||
: "game-details__review-star--empty"
|
||||
} ${
|
||||
starValue <= review.score
|
||||
? getScoreColorClass(review.score)
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
<div className="game-details__review-header-bottom">
|
||||
<div className="game-details__review-meta-row">
|
||||
<div
|
||||
className="game-details__review-score-stars"
|
||||
title={getRatingText(review.score, t)}
|
||||
>
|
||||
<Star
|
||||
size={12}
|
||||
className="game-details__review-star game-details__review-star--filled"
|
||||
/>
|
||||
<span className="game-details__review-score-text">
|
||||
{review.score}/5
|
||||
</span>
|
||||
</div>
|
||||
{Boolean(
|
||||
review.playTimeInSeconds && review.playTimeInSeconds > 0
|
||||
) && (
|
||||
<div className="game-details__review-playtime">
|
||||
<ClockIcon size={12} />
|
||||
<span>
|
||||
{t("review_played_for")}{" "}
|
||||
{formatPlayTime(review.playTimeInSeconds || 0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -323,7 +332,7 @@ export function ReviewItem({
|
||||
className="game-details__blocked-review-hide-link"
|
||||
onClick={() => onToggleVisibility(review.id)}
|
||||
>
|
||||
Hide
|
||||
{t("hide")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
178
src/renderer/src/pages/profile/profile-content/library-tab.tsx
Normal file
178
src/renderer/src/pages/profile/profile-content/library-tab.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { TelescopeIcon } from "@primer/octicons-react";
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
import { useFormat } from "@renderer/hooks";
|
||||
import type { UserGame } from "@types";
|
||||
import { SortOptions } from "./sort-options";
|
||||
import { UserLibraryGameCard } from "./user-library-game-card";
|
||||
import "./profile-content.scss";
|
||||
|
||||
type SortOption = "playtime" | "achievementCount" | "playedRecently";
|
||||
|
||||
interface LibraryTabProps {
|
||||
sortBy: SortOption;
|
||||
onSortChange: (sortBy: SortOption) => void;
|
||||
pinnedGames: UserGame[];
|
||||
libraryGames: UserGame[];
|
||||
hasMoreLibraryGames: boolean;
|
||||
isLoadingLibraryGames: boolean;
|
||||
statsIndex: number;
|
||||
userStats: { libraryCount: number } | null;
|
||||
animatedGameIdsRef: React.MutableRefObject<Set<string>>;
|
||||
onLoadMore: () => void;
|
||||
onMouseEnter: () => void;
|
||||
onMouseLeave: () => void;
|
||||
isMe: boolean;
|
||||
}
|
||||
|
||||
export function LibraryTab({
|
||||
sortBy,
|
||||
onSortChange,
|
||||
pinnedGames,
|
||||
libraryGames,
|
||||
hasMoreLibraryGames,
|
||||
isLoadingLibraryGames,
|
||||
statsIndex,
|
||||
userStats,
|
||||
animatedGameIdsRef,
|
||||
onLoadMore,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
isMe,
|
||||
}: Readonly<LibraryTabProps>) {
|
||||
const { t } = useTranslation("user_profile");
|
||||
const { numberFormatter } = useFormat();
|
||||
|
||||
const hasGames = libraryGames.length > 0;
|
||||
const hasPinnedGames = pinnedGames.length > 0;
|
||||
const hasAnyGames = hasGames || hasPinnedGames;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key="library"
|
||||
className="profile-content__tab-panel"
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
aria-hidden={false}
|
||||
>
|
||||
{hasAnyGames && (
|
||||
<SortOptions sortBy={sortBy} onSortChange={onSortChange} />
|
||||
)}
|
||||
|
||||
{!hasAnyGames && (
|
||||
<div className="profile-content__no-games">
|
||||
<div className="profile-content__telescope-icon">
|
||||
<TelescopeIcon size={24} />
|
||||
</div>
|
||||
<h2>{t("no_recent_activity_title")}</h2>
|
||||
{isMe && <p>{t("no_recent_activity_description")}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasAnyGames && (
|
||||
<div>
|
||||
{hasPinnedGames && (
|
||||
<div style={{ marginBottom: "2rem" }}>
|
||||
<div className="profile-content__section-header">
|
||||
<div className="profile-content__section-title-group">
|
||||
<h2>{t("pinned")}</h2>
|
||||
<span className="profile-content__section-badge">
|
||||
{pinnedGames.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="profile-content__games-grid">
|
||||
{pinnedGames?.map((game) => (
|
||||
<li key={game.objectId} style={{ listStyle: "none" }}>
|
||||
<UserLibraryGameCard
|
||||
game={game}
|
||||
statIndex={statsIndex}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
sortBy={sortBy}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasGames && (
|
||||
<div>
|
||||
<div className="profile-content__section-header">
|
||||
<div className="profile-content__section-title-group">
|
||||
<h2>{t("library")}</h2>
|
||||
{userStats && (
|
||||
<span className="profile-content__section-badge">
|
||||
{numberFormatter.format(userStats.libraryCount)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfiniteScroll
|
||||
dataLength={libraryGames.length}
|
||||
next={onLoadMore}
|
||||
hasMore={hasMoreLibraryGames}
|
||||
loader={null}
|
||||
scrollThreshold={0.9}
|
||||
style={{ overflow: "visible" }}
|
||||
scrollableTarget="scrollableDiv"
|
||||
>
|
||||
<ul className="profile-content__games-grid">
|
||||
{libraryGames?.map((game, index) => {
|
||||
const hasAnimated = animatedGameIdsRef.current.has(
|
||||
game.objectId
|
||||
);
|
||||
const isNewGame = !hasAnimated && !isLoadingLibraryGames;
|
||||
|
||||
return (
|
||||
<motion.li
|
||||
key={`${sortBy}-${game.objectId}`}
|
||||
style={{ listStyle: "none" }}
|
||||
initial={
|
||||
isNewGame
|
||||
? { opacity: 0.5, y: 15, scale: 0.96 }
|
||||
: false
|
||||
}
|
||||
animate={
|
||||
isNewGame ? { opacity: 1, y: 0, scale: 1 } : false
|
||||
}
|
||||
transition={
|
||||
isNewGame
|
||||
? {
|
||||
duration: 0.15,
|
||||
ease: "easeOut",
|
||||
delay: index * 0.01,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onAnimationComplete={() => {
|
||||
if (isNewGame) {
|
||||
animatedGameIdsRef.current.add(game.objectId);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<UserLibraryGameCard
|
||||
game={game}
|
||||
statIndex={statsIndex}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
sortBy={sortBy}
|
||||
/>
|
||||
</motion.li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -101,6 +101,11 @@
|
||||
gap: calc(globals.$spacing-unit);
|
||||
margin-bottom: calc(globals.$spacing-unit * 2);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__tab-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
@@ -111,19 +116,40 @@
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
transition: color ease 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit * 0.5);
|
||||
|
||||
&--active {
|
||||
color: white;
|
||||
border-bottom-color: #c9aa71;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
&__games-grid {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -175,5 +201,245 @@
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
&__tab-panels {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reviews minimal styles
|
||||
.user-reviews__loading {
|
||||
padding: calc(globals.$spacing-unit * 2);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-reviews__empty {
|
||||
text-align: center;
|
||||
padding: calc(globals.$spacing-unit * 4) calc(globals.$spacing-unit * 2);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.user-reviews__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 4);
|
||||
}
|
||||
|
||||
.user-reviews__review-item {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.user-reviews__review-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 1);
|
||||
margin-bottom: calc(globals.$spacing-unit * 1.5);
|
||||
}
|
||||
|
||||
.user-reviews__review-header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.user-reviews__review-header-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-reviews__review-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit * 0.75);
|
||||
}
|
||||
|
||||
.user-reviews__review-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: calc(globals.$spacing-unit * 1.5);
|
||||
margin-bottom: calc(globals.$spacing-unit * 1.5);
|
||||
}
|
||||
|
||||
.user-reviews__review-game {
|
||||
display: flex;
|
||||
gap: calc(globals.$spacing-unit);
|
||||
}
|
||||
|
||||
.user-reviews__game-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-reviews__game-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-reviews__game-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit * 0.75);
|
||||
}
|
||||
|
||||
.user-reviews__game-title {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
|
||||
&--clickable:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.user-reviews__review-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: globals.$small-font-size;
|
||||
}
|
||||
|
||||
.user-reviews__review-score-stars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-reviews__review-star {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&--filled {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-reviews__review-score-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-reviews__review-playtime {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.user-reviews__review-content {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.user-reviews__review-translation-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit * 1);
|
||||
margin-top: calc(globals.$spacing-unit * 1.5);
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.user-reviews__review-actions {
|
||||
margin-top: calc(globals.$spacing-unit * 2);
|
||||
padding-top: calc(globals.$spacing-unit);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-reviews__review-votes {
|
||||
display: flex;
|
||||
gap: calc(globals.$spacing-unit);
|
||||
}
|
||||
|
||||
.user-reviews__vote-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: #ffffff;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-reviews__delete-review-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
border: 1px solid rgba(244, 67, 54, 0.3);
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
color: #f44336;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
border-color: rgba(244, 67, 54, 0.4);
|
||||
color: #ff7961;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,29 +1,82 @@
|
||||
import { userProfileContext } from "@renderer/context";
|
||||
import { useContext, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { ProfileHero } from "../profile-hero/profile-hero";
|
||||
import { useAppDispatch, useFormat } from "@renderer/hooks";
|
||||
import { useAppDispatch, useFormat, useUserDetails } from "@renderer/hooks";
|
||||
import { setHeaderTitle } from "@renderer/features";
|
||||
import { TelescopeIcon, ChevronRightIcon } from "@primer/octicons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { GameShop } from "@types";
|
||||
import { LockedProfile } from "./locked-profile";
|
||||
import { ReportProfile } from "../report-profile/report-profile";
|
||||
import { FriendsBox } from "./friends-box";
|
||||
import { RecentGamesBox } from "./recent-games-box";
|
||||
import { UserStatsBox } from "./user-stats-box";
|
||||
import { UserKarmaBox } from "./user-karma-box";
|
||||
import { UserLibraryGameCard } from "./user-library-game-card";
|
||||
import { SortOptions } from "./sort-options";
|
||||
import { useSectionCollapse } from "@renderer/hooks/use-section-collapse";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
sectionVariants,
|
||||
chevronVariants,
|
||||
GAME_STATS_ANIMATION_DURATION_IN_MS,
|
||||
} from "./profile-animations";
|
||||
import { DeleteReviewModal } from "@renderer/pages/game-details/modals/delete-review-modal";
|
||||
import { GAME_STATS_ANIMATION_DURATION_IN_MS } from "./profile-animations";
|
||||
import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
|
||||
import { ProfileTabs } from "./profile-tabs";
|
||||
import { LibraryTab } from "./library-tab";
|
||||
import { ReviewsTab } from "./reviews-tab";
|
||||
import { AnimatePresence } from "framer-motion";
|
||||
import "./profile-content.scss";
|
||||
|
||||
type SortOption = "playtime" | "achievementCount" | "playedRecently";
|
||||
|
||||
interface UserReview {
|
||||
id: string;
|
||||
reviewHtml: string;
|
||||
score: number;
|
||||
playTimeInSeconds?: number;
|
||||
upvotes: number;
|
||||
downvotes: number;
|
||||
hasUpvoted: boolean;
|
||||
hasDownvoted: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
user: {
|
||||
id: string;
|
||||
};
|
||||
game: {
|
||||
title: string;
|
||||
iconUrl: string;
|
||||
objectId: string;
|
||||
shop: GameShop;
|
||||
};
|
||||
translations: {
|
||||
[key: string]: string;
|
||||
};
|
||||
detectedLanguage: string | null;
|
||||
}
|
||||
|
||||
interface UserReviewsResponse {
|
||||
totalCount: number;
|
||||
reviews: UserReview[];
|
||||
}
|
||||
|
||||
const getRatingText = (score: number, t: (key: string) => string): string => {
|
||||
switch (score) {
|
||||
case 1:
|
||||
return t("rating_very_negative");
|
||||
case 2:
|
||||
return t("rating_negative");
|
||||
case 3:
|
||||
return t("rating_neutral");
|
||||
case 4:
|
||||
return t("rating_positive");
|
||||
case 5:
|
||||
return t("rating_very_positive");
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
export function ProfileContent() {
|
||||
const {
|
||||
userProfile,
|
||||
@@ -32,16 +85,43 @@ export function ProfileContent() {
|
||||
libraryGames,
|
||||
pinnedGames,
|
||||
getUserLibraryGames,
|
||||
loadMoreLibraryGames,
|
||||
hasMoreLibraryGames,
|
||||
isLoadingLibraryGames,
|
||||
} = useContext(userProfileContext);
|
||||
const { userDetails } = useUserDetails();
|
||||
const [statsIndex, setStatsIndex] = useState(0);
|
||||
const [isAnimationRunning, setIsAnimationRunning] = useState(true);
|
||||
const [sortBy, setSortBy] = useState<SortOption>("playedRecently");
|
||||
const statsAnimation = useRef(-1);
|
||||
const { toggleSection, isPinnedCollapsed } = useSectionCollapse();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<"library" | "reviews">("library");
|
||||
|
||||
// User reviews state
|
||||
const [reviews, setReviews] = useState<UserReview[]>([]);
|
||||
const [reviewsTotalCount, setReviewsTotalCount] = useState(0);
|
||||
const [isLoadingReviews, setIsLoadingReviews] = useState(false);
|
||||
const [votingReviews, setVotingReviews] = useState<Set<string>>(new Set());
|
||||
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
|
||||
const [reviewToDelete, setReviewToDelete] = useState<string | null>(null);
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const { t } = useTranslation("user_profile");
|
||||
const { numberFormatter } = useFormat();
|
||||
|
||||
const formatPlayTime = (playTimeInSeconds: number) => {
|
||||
const minutes = playTimeInSeconds / 60;
|
||||
|
||||
if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
|
||||
return t("amount_minutes", {
|
||||
amount: minutes.toFixed(0),
|
||||
});
|
||||
}
|
||||
|
||||
const hours = minutes / 60;
|
||||
return t("amount_hours", { amount: numberFormatter.format(hours) });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(setHeaderTitle(""));
|
||||
@@ -53,10 +133,201 @@ export function ProfileContent() {
|
||||
|
||||
useEffect(() => {
|
||||
if (userProfile) {
|
||||
getUserLibraryGames(sortBy);
|
||||
// When sortBy changes, clear animated games so all games animate in
|
||||
if (currentSortByRef.current !== sortBy) {
|
||||
animatedGameIdsRef.current.clear();
|
||||
currentSortByRef.current = sortBy;
|
||||
}
|
||||
getUserLibraryGames(sortBy, true);
|
||||
}
|
||||
}, [sortBy, getUserLibraryGames, userProfile]);
|
||||
|
||||
const animatedGameIdsRef = useRef<Set<string>>(new Set());
|
||||
const currentSortByRef = useRef<SortOption>(sortBy);
|
||||
|
||||
const handleLoadMore = useCallback(() => {
|
||||
if (
|
||||
activeTab === "library" &&
|
||||
hasMoreLibraryGames &&
|
||||
!isLoadingLibraryGames
|
||||
) {
|
||||
loadMoreLibraryGames(sortBy);
|
||||
}
|
||||
}, [
|
||||
activeTab,
|
||||
hasMoreLibraryGames,
|
||||
isLoadingLibraryGames,
|
||||
loadMoreLibraryGames,
|
||||
sortBy,
|
||||
]);
|
||||
|
||||
// Clear reviews state and reset tab when switching users
|
||||
useEffect(() => {
|
||||
setReviews([]);
|
||||
setReviewsTotalCount(0);
|
||||
setIsLoadingReviews(false);
|
||||
setActiveTab("library");
|
||||
}, [userProfile?.id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (userProfile?.id) {
|
||||
fetchUserReviews();
|
||||
}
|
||||
}, [userProfile?.id]);
|
||||
|
||||
const fetchUserReviews = async () => {
|
||||
if (!userProfile?.id) return;
|
||||
|
||||
setIsLoadingReviews(true);
|
||||
try {
|
||||
const response = await window.electron.hydraApi.get<UserReviewsResponse>(
|
||||
`/users/${userProfile.id}/reviews`,
|
||||
{ needsAuth: true }
|
||||
);
|
||||
setReviews(response.reviews);
|
||||
setReviewsTotalCount(response.totalCount);
|
||||
} catch (error) {
|
||||
// Error handling for fetching reviews
|
||||
} finally {
|
||||
setIsLoadingReviews(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteReview = async (reviewId: string) => {
|
||||
try {
|
||||
const reviewToDeleteObj = reviews.find(
|
||||
(review) => review.id === reviewId
|
||||
);
|
||||
if (!reviewToDeleteObj) return;
|
||||
|
||||
await window.electron.hydraApi.delete(
|
||||
`/games/${reviewToDeleteObj.game.shop}/${reviewToDeleteObj.game.objectId}/reviews/${reviewId}`
|
||||
);
|
||||
// Remove the review from the local state
|
||||
setReviews((prev) => prev.filter((review) => review.id !== reviewId));
|
||||
setReviewsTotalCount((prev) => prev - 1);
|
||||
} catch (error) {
|
||||
console.error("Failed to delete review:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClick = (reviewId: string) => {
|
||||
setReviewToDelete(reviewId);
|
||||
setDeleteModalVisible(true);
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = () => {
|
||||
if (reviewToDelete) {
|
||||
handleDeleteReview(reviewToDelete);
|
||||
setReviewToDelete(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCancel = () => {
|
||||
setDeleteModalVisible(false);
|
||||
setReviewToDelete(null);
|
||||
};
|
||||
|
||||
const handleVoteReview = async (reviewId: string, isUpvote: boolean) => {
|
||||
if (votingReviews.has(reviewId)) return;
|
||||
|
||||
setVotingReviews((prev) => new Set(prev).add(reviewId));
|
||||
|
||||
const review = reviews.find((r) => r.id === reviewId);
|
||||
if (!review) {
|
||||
setVotingReviews((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(reviewId);
|
||||
return next;
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const wasUpvoted = review.hasUpvoted;
|
||||
const wasDownvoted = review.hasDownvoted;
|
||||
|
||||
// Optimistic update
|
||||
setReviews((prev) =>
|
||||
prev.map((r) => {
|
||||
if (r.id !== reviewId) return r;
|
||||
|
||||
let newUpvotes = r.upvotes;
|
||||
let newDownvotes = r.downvotes;
|
||||
let newHasUpvoted = r.hasUpvoted;
|
||||
let newHasDownvoted = r.hasDownvoted;
|
||||
|
||||
if (isUpvote) {
|
||||
if (wasUpvoted) {
|
||||
// Remove upvote
|
||||
newUpvotes--;
|
||||
newHasUpvoted = false;
|
||||
} else {
|
||||
// Add upvote
|
||||
newUpvotes++;
|
||||
newHasUpvoted = true;
|
||||
if (wasDownvoted) {
|
||||
// Remove downvote if it was downvoted
|
||||
newDownvotes--;
|
||||
newHasDownvoted = false;
|
||||
}
|
||||
}
|
||||
} else if (wasDownvoted) {
|
||||
// Remove downvote
|
||||
newDownvotes--;
|
||||
newHasDownvoted = false;
|
||||
} else {
|
||||
// Add downvote
|
||||
newDownvotes++;
|
||||
newHasDownvoted = true;
|
||||
if (wasUpvoted) {
|
||||
// Remove upvote if it was upvoted
|
||||
newUpvotes--;
|
||||
newHasUpvoted = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...r,
|
||||
upvotes: newUpvotes,
|
||||
downvotes: newDownvotes,
|
||||
hasUpvoted: newHasUpvoted,
|
||||
hasDownvoted: newHasDownvoted,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
try {
|
||||
const endpoint = isUpvote ? "upvote" : "downvote";
|
||||
await window.electron.hydraApi.put(
|
||||
`/games/${review.game.shop}/${review.game.objectId}/reviews/${reviewId}/${endpoint}`
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to vote on review:", error);
|
||||
|
||||
// Rollback optimistic update on error
|
||||
setReviews((prev) =>
|
||||
prev.map((r) => {
|
||||
if (r.id !== reviewId) return r;
|
||||
return {
|
||||
...r,
|
||||
upvotes: review.upvotes,
|
||||
downvotes: review.downvotes,
|
||||
hasUpvoted: review.hasUpvoted,
|
||||
hasDownvoted: review.hasDownvoted,
|
||||
};
|
||||
})
|
||||
);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setVotingReviews((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(reviewId);
|
||||
return newSet;
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnMouseEnterGameCard = () => {
|
||||
setIsAnimationRunning(false);
|
||||
};
|
||||
@@ -86,8 +357,6 @@ export function ProfileContent() {
|
||||
};
|
||||
}, [setStatsIndex, isAnimationRunning]);
|
||||
|
||||
const { numberFormatter } = useFormat();
|
||||
|
||||
const usersAreFriends = useMemo(() => {
|
||||
return userProfile?.relation?.status === "ACCEPTED";
|
||||
}, [userProfile]);
|
||||
@@ -113,112 +382,46 @@ export function ProfileContent() {
|
||||
return (
|
||||
<section className="profile-content__section">
|
||||
<div className="profile-content__main">
|
||||
{hasAnyGames && (
|
||||
<SortOptions sortBy={sortBy} onSortChange={setSortBy} />
|
||||
)}
|
||||
<ProfileTabs
|
||||
activeTab={activeTab}
|
||||
reviewsTotalCount={reviewsTotalCount}
|
||||
onTabChange={setActiveTab}
|
||||
/>
|
||||
|
||||
{!hasAnyGames && (
|
||||
<div className="profile-content__no-games">
|
||||
<div className="profile-content__telescope-icon">
|
||||
<TelescopeIcon size={24} />
|
||||
</div>
|
||||
<h2>{t("no_recent_activity_title")}</h2>
|
||||
{isMe && <p>{t("no_recent_activity_description")}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasAnyGames && (
|
||||
<div>
|
||||
{hasPinnedGames && (
|
||||
<div style={{ marginBottom: "2rem" }}>
|
||||
<div className="profile-content__section-header">
|
||||
<div className="profile-content__section-title-group">
|
||||
<button
|
||||
type="button"
|
||||
className="profile-content__collapse-button"
|
||||
onClick={() => toggleSection("pinned")}
|
||||
aria-label={
|
||||
isPinnedCollapsed
|
||||
? "Expand pinned section"
|
||||
: "Collapse pinned section"
|
||||
}
|
||||
>
|
||||
<motion.div
|
||||
variants={chevronVariants}
|
||||
animate={isPinnedCollapsed ? "collapsed" : "expanded"}
|
||||
>
|
||||
<ChevronRightIcon size={16} />
|
||||
</motion.div>
|
||||
</button>
|
||||
<h2>{t("pinned")}</h2>
|
||||
<span className="profile-content__section-badge">
|
||||
{pinnedGames.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AnimatePresence initial={true} mode="wait">
|
||||
{!isPinnedCollapsed && (
|
||||
<motion.div
|
||||
key="pinned-content"
|
||||
variants={sectionVariants}
|
||||
initial="collapsed"
|
||||
animate="expanded"
|
||||
exit="collapsed"
|
||||
layout
|
||||
>
|
||||
<ul className="profile-content__games-grid">
|
||||
{pinnedGames?.map((game) => (
|
||||
<li
|
||||
key={game.objectId}
|
||||
style={{ listStyle: "none" }}
|
||||
>
|
||||
<UserLibraryGameCard
|
||||
game={game}
|
||||
statIndex={statsIndex}
|
||||
onMouseEnter={handleOnMouseEnterGameCard}
|
||||
onMouseLeave={handleOnMouseLeaveGameCard}
|
||||
sortBy={sortBy}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className="profile-content__tab-panels">
|
||||
<AnimatePresence mode="wait">
|
||||
{activeTab === "library" && (
|
||||
<LibraryTab
|
||||
sortBy={sortBy}
|
||||
onSortChange={setSortBy}
|
||||
pinnedGames={pinnedGames}
|
||||
libraryGames={libraryGames}
|
||||
hasMoreLibraryGames={hasMoreLibraryGames}
|
||||
isLoadingLibraryGames={isLoadingLibraryGames}
|
||||
statsIndex={statsIndex}
|
||||
userStats={userStats}
|
||||
animatedGameIdsRef={animatedGameIdsRef}
|
||||
onLoadMore={handleLoadMore}
|
||||
onMouseEnter={handleOnMouseEnterGameCard}
|
||||
onMouseLeave={handleOnMouseLeaveGameCard}
|
||||
isMe={isMe}
|
||||
/>
|
||||
)}
|
||||
|
||||
{hasGames && (
|
||||
<div>
|
||||
<div className="profile-content__section-header">
|
||||
<div className="profile-content__section-title-group">
|
||||
<h2>{t("library")}</h2>
|
||||
{userStats && (
|
||||
<span className="profile-content__section-badge">
|
||||
{numberFormatter.format(userStats.libraryCount)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="profile-content__games-grid">
|
||||
{libraryGames?.map((game) => (
|
||||
<li key={game.objectId} style={{ listStyle: "none" }}>
|
||||
<UserLibraryGameCard
|
||||
game={game}
|
||||
statIndex={statsIndex}
|
||||
onMouseEnter={handleOnMouseEnterGameCard}
|
||||
onMouseLeave={handleOnMouseLeaveGameCard}
|
||||
sortBy={sortBy}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{activeTab === "reviews" && (
|
||||
<ReviewsTab
|
||||
reviews={reviews}
|
||||
isLoadingReviews={isLoadingReviews}
|
||||
votingReviews={votingReviews}
|
||||
userDetailsId={userDetails?.id}
|
||||
formatPlayTime={formatPlayTime}
|
||||
getRatingText={getRatingText}
|
||||
onVote={handleVoteReview}
|
||||
onDelete={handleDeleteClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{shouldShowRightContent && (
|
||||
@@ -230,6 +433,12 @@ export function ProfileContent() {
|
||||
<ReportProfile />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DeleteReviewModal
|
||||
visible={deleteModalVisible}
|
||||
onClose={handleDeleteCancel}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}, [
|
||||
@@ -242,9 +451,15 @@ export function ProfileContent() {
|
||||
statsIndex,
|
||||
libraryGames,
|
||||
pinnedGames,
|
||||
isPinnedCollapsed,
|
||||
toggleSection,
|
||||
|
||||
sortBy,
|
||||
activeTab,
|
||||
// ensure reviews UI updates correctly
|
||||
reviews,
|
||||
reviewsTotalCount,
|
||||
isLoadingReviews,
|
||||
votingReviews,
|
||||
deleteModalVisible,
|
||||
]);
|
||||
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,252 @@
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { ClockIcon } from "@primer/octicons-react";
|
||||
import { Star, ThumbsUp, ThumbsDown, TrashIcon, Languages } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState } from "react";
|
||||
import type { GameShop } from "@types";
|
||||
import { sanitizeHtml } from "@shared";
|
||||
import { useDate } from "@renderer/hooks";
|
||||
import { buildGameDetailsPath } from "@renderer/helpers";
|
||||
import "./profile-content.scss";
|
||||
|
||||
interface UserReview {
|
||||
id: string;
|
||||
reviewHtml: string;
|
||||
score: number;
|
||||
playTimeInSeconds?: number;
|
||||
upvotes: number;
|
||||
downvotes: number;
|
||||
hasUpvoted: boolean;
|
||||
hasDownvoted: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
user: {
|
||||
id: string;
|
||||
};
|
||||
game: {
|
||||
title: string;
|
||||
iconUrl: string;
|
||||
objectId: string;
|
||||
shop: GameShop;
|
||||
};
|
||||
translations: {
|
||||
[key: string]: string;
|
||||
};
|
||||
detectedLanguage: string | null;
|
||||
}
|
||||
|
||||
interface ProfileReviewItemProps {
|
||||
review: UserReview;
|
||||
isOwnReview: boolean;
|
||||
isVoting: boolean;
|
||||
formatPlayTime: (playTimeInSeconds: number) => string;
|
||||
getRatingText: (score: number, t: (key: string) => string) => string;
|
||||
onVote: (reviewId: string, isUpvote: boolean) => void;
|
||||
onDelete: (reviewId: string) => void;
|
||||
}
|
||||
|
||||
export function ProfileReviewItem({
|
||||
review,
|
||||
isOwnReview,
|
||||
isVoting,
|
||||
formatPlayTime,
|
||||
getRatingText,
|
||||
onVote,
|
||||
onDelete,
|
||||
}: Readonly<ProfileReviewItemProps>) {
|
||||
const navigate = useNavigate();
|
||||
const { formatDistance } = useDate();
|
||||
const { t } = useTranslation("user_profile");
|
||||
const { t: tGameDetails, i18n } = useTranslation("game_details");
|
||||
const [showOriginal, setShowOriginal] = useState(false);
|
||||
|
||||
const getBaseLanguage = (lang: string | null) => lang?.split("-")[0] || "";
|
||||
|
||||
const isDifferentLanguage =
|
||||
getBaseLanguage(review.detectedLanguage) !== getBaseLanguage(i18n.language);
|
||||
|
||||
const needsTranslation =
|
||||
!isOwnReview && isDifferentLanguage && review.translations[i18n.language];
|
||||
|
||||
const getLanguageName = (languageCode: string | null) => {
|
||||
if (!languageCode) return "";
|
||||
try {
|
||||
const displayNames = new Intl.DisplayNames([i18n.language], {
|
||||
type: "language",
|
||||
});
|
||||
return displayNames.of(languageCode) || languageCode.toUpperCase();
|
||||
} catch {
|
||||
return languageCode.toUpperCase();
|
||||
}
|
||||
};
|
||||
|
||||
const displayContent = needsTranslation
|
||||
? review.translations[i18n.language]
|
||||
: review.reviewHtml;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={review.id}
|
||||
className="user-reviews__review-item"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="user-reviews__review-header">
|
||||
<div className="user-reviews__review-header-top">
|
||||
<div className="user-reviews__review-game">
|
||||
<div className="user-reviews__game-info">
|
||||
<div className="user-reviews__game-details">
|
||||
<img
|
||||
src={review.game.iconUrl}
|
||||
alt={review.game.title}
|
||||
className="user-reviews__game-icon"
|
||||
/>
|
||||
<button
|
||||
className="user-reviews__game-title user-reviews__game-title--clickable"
|
||||
onClick={() => navigate(buildGameDetailsPath(review.game))}
|
||||
>
|
||||
{review.game.title}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-reviews__review-date">
|
||||
{formatDistance(new Date(review.createdAt), new Date(), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-reviews__review-header-bottom">
|
||||
<div className="user-reviews__review-meta-row">
|
||||
<div
|
||||
className="user-reviews__review-score-stars"
|
||||
title={getRatingText(review.score, tGameDetails)}
|
||||
>
|
||||
<Star
|
||||
size={12}
|
||||
className="user-reviews__review-star user-reviews__review-star--filled"
|
||||
/>
|
||||
<span className="user-reviews__review-score-text">
|
||||
{review.score}/5
|
||||
</span>
|
||||
</div>
|
||||
{Boolean(
|
||||
review.playTimeInSeconds && review.playTimeInSeconds > 0
|
||||
) && (
|
||||
<div className="user-reviews__review-playtime">
|
||||
<ClockIcon size={12} />
|
||||
<span>
|
||||
{tGameDetails("review_played_for")}{" "}
|
||||
{formatPlayTime(review.playTimeInSeconds || 0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
className="user-reviews__review-content"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: sanitizeHtml(displayContent),
|
||||
}}
|
||||
/>
|
||||
{needsTranslation && (
|
||||
<>
|
||||
<button
|
||||
className="user-reviews__review-translation-toggle"
|
||||
onClick={() => setShowOriginal(!showOriginal)}
|
||||
>
|
||||
<Languages size={13} />
|
||||
{showOriginal
|
||||
? tGameDetails("hide_original")
|
||||
: tGameDetails("show_original_translated_from", {
|
||||
language: getLanguageName(review.detectedLanguage),
|
||||
})}
|
||||
</button>
|
||||
{showOriginal && (
|
||||
<div
|
||||
className="user-reviews__review-content"
|
||||
style={{
|
||||
opacity: 0.6,
|
||||
marginTop: "12px",
|
||||
}}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: sanitizeHtml(review.reviewHtml),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="user-reviews__review-actions">
|
||||
<div className="user-reviews__review-votes">
|
||||
<motion.button
|
||||
className={`user-reviews__vote-button ${review.hasUpvoted ? "user-reviews__vote-button--active" : ""}`}
|
||||
onClick={() => onVote(review.id, true)}
|
||||
disabled={isVoting}
|
||||
style={{
|
||||
opacity: isVoting ? 0.5 : 1,
|
||||
cursor: isVoting ? "not-allowed" : "pointer",
|
||||
}}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<ThumbsUp size={14} />
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.span
|
||||
key={review.upvotes}
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{review.upvotes}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
className={`user-reviews__vote-button ${review.hasDownvoted ? "user-reviews__vote-button--active" : ""}`}
|
||||
onClick={() => onVote(review.id, false)}
|
||||
disabled={isVoting}
|
||||
style={{
|
||||
opacity: isVoting ? 0.5 : 1,
|
||||
cursor: isVoting ? "not-allowed" : "pointer",
|
||||
}}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<ThumbsDown size={14} />
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.span
|
||||
key={review.downvotes}
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{review.downvotes}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{isOwnReview && (
|
||||
<button
|
||||
className="user-reviews__delete-review-button"
|
||||
onClick={() => onDelete(review.id)}
|
||||
title={t("delete_review")}
|
||||
>
|
||||
<TrashIcon size={14} />
|
||||
<span>{t("delete_review")}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import "./profile-content.scss";
|
||||
|
||||
interface ProfileTabsProps {
|
||||
activeTab: "library" | "reviews";
|
||||
reviewsTotalCount: number;
|
||||
onTabChange: (tab: "library" | "reviews") => void;
|
||||
}
|
||||
|
||||
export function ProfileTabs({
|
||||
activeTab,
|
||||
reviewsTotalCount,
|
||||
onTabChange,
|
||||
}: Readonly<ProfileTabsProps>) {
|
||||
const { t } = useTranslation("user_profile");
|
||||
|
||||
return (
|
||||
<div className="profile-content__tabs">
|
||||
<div className="profile-content__tab-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
className={`profile-content__tab ${activeTab === "library" ? "profile-content__tab--active" : ""}`}
|
||||
onClick={() => onTabChange("library")}
|
||||
>
|
||||
{t("library")}
|
||||
</button>
|
||||
{activeTab === "library" && (
|
||||
<motion.div
|
||||
className="profile-content__tab-underline"
|
||||
layoutId="tab-underline"
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="profile-content__tab-wrapper">
|
||||
<button
|
||||
type="button"
|
||||
className={`profile-content__tab ${activeTab === "reviews" ? "profile-content__tab--active" : ""}`}
|
||||
onClick={() => onTabChange("reviews")}
|
||||
>
|
||||
{t("user_reviews")}
|
||||
{reviewsTotalCount > 0 && (
|
||||
<span className="profile-content__tab-badge">
|
||||
{reviewsTotalCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{activeTab === "reviews" && (
|
||||
<motion.div
|
||||
className="profile-content__tab-underline"
|
||||
layoutId="tab-underline"
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { GameShop } from "@types";
|
||||
import { ProfileReviewItem } from "./profile-review-item";
|
||||
import "./profile-content.scss";
|
||||
|
||||
interface UserReview {
|
||||
id: string;
|
||||
reviewHtml: string;
|
||||
score: number;
|
||||
playTimeInSeconds?: number;
|
||||
upvotes: number;
|
||||
downvotes: number;
|
||||
hasUpvoted: boolean;
|
||||
hasDownvoted: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
user: {
|
||||
id: string;
|
||||
};
|
||||
game: {
|
||||
title: string;
|
||||
iconUrl: string;
|
||||
objectId: string;
|
||||
shop: GameShop;
|
||||
};
|
||||
translations: {
|
||||
[key: string]: string;
|
||||
};
|
||||
detectedLanguage: string | null;
|
||||
}
|
||||
|
||||
interface ReviewsTabProps {
|
||||
reviews: UserReview[];
|
||||
isLoadingReviews: boolean;
|
||||
votingReviews: Set<string>;
|
||||
userDetailsId?: string;
|
||||
formatPlayTime: (playTimeInSeconds: number) => string;
|
||||
getRatingText: (score: number, t: (key: string) => string) => string;
|
||||
onVote: (reviewId: string, isUpvote: boolean) => void;
|
||||
onDelete: (reviewId: string) => void;
|
||||
}
|
||||
|
||||
export function ReviewsTab({
|
||||
reviews,
|
||||
isLoadingReviews,
|
||||
votingReviews,
|
||||
userDetailsId,
|
||||
formatPlayTime,
|
||||
getRatingText,
|
||||
onVote,
|
||||
onDelete,
|
||||
}: Readonly<ReviewsTabProps>) {
|
||||
const { t } = useTranslation("user_profile");
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key="reviews"
|
||||
className="profile-content__tab-panel"
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
aria-hidden={false}
|
||||
>
|
||||
{isLoadingReviews && (
|
||||
<div className="user-reviews__loading">{t("loading_reviews")}</div>
|
||||
)}
|
||||
{!isLoadingReviews && reviews.length === 0 && (
|
||||
<div className="user-reviews__empty">
|
||||
<p>{t("no_reviews", "No reviews yet")}</p>
|
||||
</div>
|
||||
)}
|
||||
{!isLoadingReviews && reviews.length > 0 && (
|
||||
<div className="user-reviews__list">
|
||||
{reviews.map((review) => {
|
||||
const isOwnReview = userDetailsId === review.user.id;
|
||||
|
||||
return (
|
||||
<ProfileReviewItem
|
||||
key={review.id}
|
||||
review={review}
|
||||
isOwnReview={isOwnReview}
|
||||
isVoting={votingReviews.has(review.id)}
|
||||
formatPlayTime={formatPlayTime}
|
||||
getRatingText={getRatingText}
|
||||
onVote={onVote}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -36,6 +36,7 @@
|
||||
box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
@@ -193,8 +194,28 @@
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__cover-placeholder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 150%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0.08) 0%,
|
||||
rgba(255, 255, 255, 0.04) 50%,
|
||||
rgba(255, 255, 255, 0.08) 100%
|
||||
);
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&__achievements-progress {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { UserGame } from "@types";
|
||||
import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
|
||||
import { useFormat, useToast } from "@renderer/hooks";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useCallback, useContext, useState } from "react";
|
||||
import { useCallback, useContext, useEffect, useState } from "react";
|
||||
import {
|
||||
buildGameAchievementPath,
|
||||
buildGameDetailsPath,
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
AlertFillIcon,
|
||||
PinIcon,
|
||||
PinSlashIcon,
|
||||
ImageIcon,
|
||||
} from "@primer/octicons-react";
|
||||
import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
@@ -44,6 +45,11 @@ export function UserLibraryGameCard({
|
||||
const navigate = useNavigate();
|
||||
const [isTooltipHovered, setIsTooltipHovered] = useState(false);
|
||||
const [isPinning, setIsPinning] = useState(false);
|
||||
const [imageError, setImageError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setImageError(false);
|
||||
}, [game.coverImageUrl]);
|
||||
|
||||
const getStatsItemCount = useCallback(() => {
|
||||
let statsCount = 1;
|
||||
@@ -233,11 +239,18 @@ export function UserLibraryGameCard({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<img
|
||||
src={game.coverImageUrl ?? undefined}
|
||||
alt={game.title}
|
||||
className="user-library-game__game-image"
|
||||
/>
|
||||
{imageError || !game.coverImageUrl ? (
|
||||
<div className="user-library-game__cover-placeholder">
|
||||
<ImageIcon size={48} />
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
src={game.coverImageUrl}
|
||||
alt={game.title}
|
||||
className="user-library-game__game-image"
|
||||
onError={() => setImageError(true)}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
<Tooltip
|
||||
|
||||
@@ -89,7 +89,7 @@ export function SettingsDownloadSources() {
|
||||
try {
|
||||
await window.electron.removeDownloadSource(false, downloadSource.id);
|
||||
const sources = await window.electron.getDownloadSources();
|
||||
setDownloadSources(sources as DownloadSource[]);
|
||||
setDownloadSources(sources);
|
||||
showSuccessToast(t("removed_download_source"));
|
||||
} catch (error) {
|
||||
logger.error("Failed to remove download source:", error);
|
||||
@@ -104,7 +104,7 @@ export function SettingsDownloadSources() {
|
||||
try {
|
||||
await window.electron.removeDownloadSource(true);
|
||||
const sources = await window.electron.getDownloadSources();
|
||||
setDownloadSources(sources as DownloadSource[]);
|
||||
setDownloadSources(sources);
|
||||
showSuccessToast(t("removed_all_download_sources"));
|
||||
} catch (error) {
|
||||
logger.error("Failed to remove all download sources:", error);
|
||||
@@ -117,7 +117,7 @@ export function SettingsDownloadSources() {
|
||||
const handleAddDownloadSource = async () => {
|
||||
try {
|
||||
const sources = await window.electron.getDownloadSources();
|
||||
setDownloadSources(sources as DownloadSource[]);
|
||||
setDownloadSources(sources);
|
||||
} catch (error) {
|
||||
logger.error("Failed to refresh download sources:", error);
|
||||
}
|
||||
@@ -128,7 +128,7 @@ export function SettingsDownloadSources() {
|
||||
try {
|
||||
await window.electron.syncDownloadSources();
|
||||
const sources = await window.electron.getDownloadSources();
|
||||
setDownloadSources(sources as DownloadSource[]);
|
||||
setDownloadSources(sources);
|
||||
|
||||
showSuccessToast(t("download_sources_synced_successfully"));
|
||||
} finally {
|
||||
|
||||
@@ -244,6 +244,7 @@ export interface GameReview {
|
||||
isBlocked: boolean;
|
||||
hasUpvoted: boolean;
|
||||
hasDownvoted: boolean;
|
||||
playTimeInSeconds?: number;
|
||||
user: {
|
||||
id: string;
|
||||
displayName: string;
|
||||
@@ -252,7 +253,7 @@ export interface GameReview {
|
||||
translations: {
|
||||
[key: string]: string;
|
||||
};
|
||||
detectedLanguage: string;
|
||||
detectedLanguage: string | null;
|
||||
}
|
||||
|
||||
export interface TrendingGame extends ShopAssets {
|
||||
|
||||
12
yarn.lock
12
yarn.lock
@@ -7538,6 +7538,13 @@ react-i18next@^14.1.0:
|
||||
"@babel/runtime" "^7.23.9"
|
||||
html-parse-stringify "^3.0.1"
|
||||
|
||||
react-infinite-scroll-component@^6.1.0:
|
||||
version "6.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f"
|
||||
integrity sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==
|
||||
dependencies:
|
||||
throttle-debounce "^2.1.0"
|
||||
|
||||
react-is@^16.13.1, react-is@^16.7.0:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
@@ -8540,6 +8547,11 @@ text-table@^0.2.0:
|
||||
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
|
||||
integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
|
||||
|
||||
throttle-debounce@^2.1.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
|
||||
integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
|
||||
|
||||
"through@>=2.2.7 <3":
|
||||
version "2.3.8"
|
||||
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
|
||||
|
||||
Reference in New Issue
Block a user