mirror of
https://github.com/hydralauncher/hydra.git
synced 2026-01-10 21:36:17 +00:00
feat: add translation key for Hydra Wrapped 2025 in multiple languages and implement sidebar route with marquee effect
This commit is contained in:
@@ -16,6 +16,7 @@
|
||||
"library": "Library",
|
||||
"downloads": "Downloads",
|
||||
"settings": "Settings",
|
||||
"hydra_2025_wrapped": "Hydra Wrapped 2025 Available",
|
||||
"my_library": "My library",
|
||||
"downloading_metadata": "{{title}} (Downloading metadata…)",
|
||||
"paused": "{{title}} (Paused)",
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"library": "Librería",
|
||||
"downloads": "Descargas",
|
||||
"settings": "Ajustes",
|
||||
"hydra_2025_wrapped": "Hydra Wrapped 2025 Disponible",
|
||||
"my_library": "Mi Librería",
|
||||
"downloading_metadata": "{{title}} (Descargando metadatos…)",
|
||||
"paused": "{{title}} (Pausado)",
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"library": "Biblioteca",
|
||||
"downloads": "Downloads",
|
||||
"settings": "Ajustes",
|
||||
"hydra_2025_wrapped": "Hydra Wrapped 2025 Já disponível",
|
||||
"my_library": "Biblioteca",
|
||||
"downloading_metadata": "{{title}} (Baixando metadados…)",
|
||||
"paused": "{{title}} (Pausado)",
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"catalogue": "Catálogo",
|
||||
"downloads": "Transferências",
|
||||
"settings": "Definições",
|
||||
"hydra_2025_wrapped": "Hydra Wrapped 2025 Já disponível",
|
||||
"my_library": "Biblioteca",
|
||||
"downloading_metadata": "{{title}} (A transferir metadados…)",
|
||||
"paused": "{{title}} (Em pausa)",
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"library": "Библиотека",
|
||||
"downloads": "Загрузки",
|
||||
"settings": "Настройки",
|
||||
"hydra_2025_wrapped": "Hydra Wrapped 2025 Доступно",
|
||||
"my_library": "Библиотека",
|
||||
"downloading_metadata": "{{title}} (Загрузка метаданных…)",
|
||||
"paused": "{{title}} (Приостановлено)",
|
||||
|
||||
@@ -354,6 +354,8 @@ export class WindowManager {
|
||||
public static async createNotificationWindow() {
|
||||
if (this.notificationWindow) return;
|
||||
|
||||
if (process.platform === "darwin") return;
|
||||
|
||||
const userPreferences = await db.get<string, UserPreferences | undefined>(
|
||||
levelKeys.userPreferences,
|
||||
{
|
||||
|
||||
@@ -32,4 +32,15 @@ export const routes = [
|
||||
nameKey: "settings",
|
||||
render: () => <GearIcon />,
|
||||
},
|
||||
{
|
||||
path: "https://hydrawrapped.com",
|
||||
nameKey: "hydra_2025_wrapped",
|
||||
render: () => (
|
||||
<img
|
||||
src="https://cdn.losbroxas.org/thumbnail_hydra_badge2_fb01af31e3.png"
|
||||
alt="Hydra 2025 Wrapped"
|
||||
style={{ width: 16, height: 16 }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
@@ -88,6 +88,34 @@
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&--wrapped {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(74, 144, 226, 0.25) 0%,
|
||||
rgba(123, 104, 238, 0.2) 25%,
|
||||
rgba(59, 130, 246, 0.25) 50%,
|
||||
rgba(96, 165, 250, 0.2) 75%,
|
||||
rgba(74, 144, 226, 0.25) 100%
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
animation: wrapped-gradient-flow 8s ease infinite;
|
||||
color: globals.$muted-color;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(74, 144, 226, 0.35) 0%,
|
||||
rgba(123, 104, 238, 0.3) 25%,
|
||||
rgba(59, 130, 246, 0.35) 50%,
|
||||
rgba(96, 165, 250, 0.3) 75%,
|
||||
rgba(74, 144, 226, 0.35) 100%
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__menu-item-button {
|
||||
@@ -106,6 +134,21 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__menu-item-marquee {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__menu-item-marquee-content {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&__menu-item-marquee-content span {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__game-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@@ -228,3 +271,24 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wrapped-gradient-flow {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marquee-scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc(-50% - 1em));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,6 +22,8 @@ import { buildGameDetailsPath } from "@renderer/helpers";
|
||||
import { SidebarProfile } from "./sidebar-profile";
|
||||
import { sortBy } from "lodash-es";
|
||||
import cn from "classnames";
|
||||
import { logger } from "@renderer/logger";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
CommentDiscussionIcon,
|
||||
PlayIcon,
|
||||
@@ -238,8 +240,32 @@ export function Sidebar() {
|
||||
return game.title;
|
||||
};
|
||||
|
||||
const handleSidebarItemClick = (path: string) => {
|
||||
if (path !== location.pathname) {
|
||||
const handleSidebarItemClick = async (path: string) => {
|
||||
if (path.startsWith("http")) {
|
||||
if (path === "https://hydrawrapped.com") {
|
||||
try {
|
||||
const auth = await window.electron.getAuth();
|
||||
if (auth) {
|
||||
const payload = {
|
||||
accessToken: auth.accessToken,
|
||||
refreshToken: auth.refreshToken,
|
||||
expiresIn: 3600,
|
||||
};
|
||||
const base64Payload = btoa(JSON.stringify(payload));
|
||||
window.electron.openExternal(
|
||||
`${path}?payload=${encodeURIComponent(base64Payload)}`
|
||||
);
|
||||
} else {
|
||||
window.electron.openExternal(path);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error("Failed to get auth for wrapped:", error);
|
||||
window.electron.openExternal(path);
|
||||
}
|
||||
} else {
|
||||
window.electron.openExternal(path);
|
||||
}
|
||||
} else if (path !== location.pathname) {
|
||||
navigate(path);
|
||||
}
|
||||
};
|
||||
@@ -297,7 +323,10 @@ export function Sidebar() {
|
||||
<li
|
||||
key={nameKey}
|
||||
className={cn("sidebar__menu-item", {
|
||||
"sidebar__menu-item--active": location.pathname === path,
|
||||
"sidebar__menu-item--active":
|
||||
!path.startsWith("http") && location.pathname === path,
|
||||
"sidebar__menu-item--wrapped":
|
||||
nameKey === "hydra_2025_wrapped",
|
||||
})}
|
||||
>
|
||||
<button
|
||||
@@ -306,7 +335,33 @@ export function Sidebar() {
|
||||
onClick={() => handleSidebarItemClick(path)}
|
||||
>
|
||||
{render()}
|
||||
<span>{t(nameKey)}</span>
|
||||
{nameKey === "hydra_2025_wrapped" ? (
|
||||
<div className="sidebar__menu-item-marquee">
|
||||
<motion.div
|
||||
className="sidebar__menu-item-marquee-content"
|
||||
animate={{
|
||||
x: ["0%", "-50%"],
|
||||
}}
|
||||
transition={{
|
||||
x: {
|
||||
repeat: Infinity,
|
||||
repeatType: "loop",
|
||||
duration: 8,
|
||||
ease: "linear",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
{t(nameKey)}
|
||||
</span>
|
||||
<span>
|
||||
{t(nameKey)}
|
||||
</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
) : (
|
||||
<span>{t(nameKey)}</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user