Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 20:24:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add account logo on the avatar component

Browse Source
This commit is contained in:
Zoe Roux 2024-02-04 21:42:27 +01:00
parent f4dc4c315d
commit 1023cf0120
2 changed files with 20 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
front/packages/primitives/src/avatar.tsx
View File

@ -18,14 +18,13 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { View, ViewStyle } from "react-native"; import { View, ViewStyle, Image } from "react-native";
import { Image, ImageProps } from "./image";
import { useYoshiki, px, Stylable } from "yoshiki/native"; import { useYoshiki, px, Stylable } from "yoshiki/native";
import { Icon } from "./icons"; import { Icon } from "./icons";
import { P } from "./text"; import { P } from "./text";
import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg"; import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg";
import { YoshikiStyle } from "yoshiki"; import { YoshikiStyle } from "yoshiki";
import { ComponentType, forwardRef, RefAttributes } from "react"; import { ComponentType, forwardRef, RefAttributes, useEffect, useState } from "react";
const stringToColor = (string: string) => { const stringToColor = (string: string) => {
let hash = 0; let hash = 0;
@ -46,10 +45,9 @@ const stringToColor = (string: string) => {
export const Avatar = forwardRef< export const Avatar = forwardRef<
View, View,
{ {
src?: ImageProps["src"]; src?: string;
quality?: ImageProps["quality"];
alt?: string; alt?: string;
size?: YoshikiStyle<number>; size?: number;
placeholder?: string; placeholder?: string;
color?: string; color?: string;
isLoading?: boolean; isLoading?: boolean;
@ -57,18 +55,7 @@ export const Avatar = forwardRef<
as?: ComponentType<{ style?: ViewStyle } & RefAttributes<View>>; as?: ComponentType<{ style?: ViewStyle } & RefAttributes<View>>;
} & Stylable } & Stylable
>(function Avatar( >(function Avatar(
{ { src, alt, size = px(24), color, placeholder, isLoading = false, fill = false, as, ...props },
src,
quality = "low",
alt,
size = px(24),
color,
placeholder,
isLoading = false,
fill = false,
as,
...props
},
ref, ref,
) { ) {
const { css, theme } = useYoshiki(); const { css, theme } = useYoshiki();
@ -89,18 +76,14 @@ export const Avatar = forwardRef<
fill && { fill && {
bg: col, bg: col,
}, },
placeholder && placeholder && {
!src && bg: stringToColor(placeholder),
!isLoading && { },
bg: stringToColor(placeholder),
},
], ],
props, props,
)} )}
> >
{src || isLoading ? ( {placeholder ? (
<Image src={src} quality={quality} alt={alt} layout={{ width: size, height: size }} />
) : placeholder ? (
<P <P
{...css({ {...css({
marginVertical: 0, marginVertical: 0,
@ -113,6 +96,14 @@ export const Avatar = forwardRef<
) : ( ) : (
<Icon icon={AccountCircle} size={size} color={fill ? col : theme.colors.white} /> <Icon icon={AccountCircle} size={size} color={fill ? col : theme.colors.white} />
)} )}
<Image
resizeMode="cover"
source={{ uri: src, width: size, height: size }}
alt={alt}
width={size}
height={size}
{...css({ position: "absolute" })}
/>
</Container> </Container>
); );
}); });

5
front/packages/ui/src/navbar/index.tsx
View File

@ -18,7 +18,7 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { logout, useAccount, useAccounts } from "@kyoo/models"; import { imageFn, logout, useAccount, useAccounts } from "@kyoo/models";
import { import {
Input, Input,
IconButton, IconButton,
@ -100,6 +100,7 @@ export const NavbarProfile = () => {
<Menu <Menu
Trigger={Avatar} Trigger={Avatar}
as={PressableFeedback} as={PressableFeedback}
src={account?.logo}
placeholder={account?.username} placeholder={account?.username}
alt={t("navbar.login")} alt={t("navbar.login")}
size={24} size={24}
@ -111,7 +112,7 @@ export const NavbarProfile = () => {
<Menu.Item <Menu.Item
key={x.id} key={x.id}
label={Platform.OS === "web" ? x.username : `${x.username} - ${getDisplayUrl(x.apiUrl)}`} label={Platform.OS === "web" ? x.username : `${x.username} - ${getDisplayUrl(x.apiUrl)}`}
left={<Avatar placeholder={x.username} />} left={<Avatar placeholder={x.username} src={x.logo} />}
selected={x.selected} selected={x.selected}
onSelect={() => x.select()} onSelect={() => x.select()}
/> />