mirror of
https://github.com/zoriya/Kyoo.git
synced 2026-02-14 15:32:13 -05:00
Create poster placeholder with logo
This commit is contained in:
Zoe Roux
parent
546935d988
commit
6af2cbb9f3
@ -17,7 +17,7 @@ export const ItemWatchStatus = ({
|
||||
|
||||
return (
|
||||
<View
|
||||
className="absolute top-0 right-0 m-1 aspect-square min-w-8 items-center justify-center rounded-full bg-gray-800/70 p-1"
|
||||
className="absolute top-0 left-0 m-1 aspect-square min-w-8 items-center justify-center rounded-full bg-gray-800/70 p-1"
|
||||
{...props}
|
||||
>
|
||||
{watchStatus === "completed" ? (
|
||||
|
||||
@ -6,6 +6,7 @@ import { withUniwind } from "uniwind";
|
||||
import type { KImage } from "~/models";
|
||||
import { useToken } from "~/providers/account-context";
|
||||
import { cn } from "~/utils";
|
||||
import { PosterPlaceholder } from "./image";
|
||||
|
||||
const ImgBg = withUniwind(EImageBackground);
|
||||
|
||||
@ -45,19 +46,19 @@ export const ImageBackground = ({
|
||||
placeholder={{ blurhash: src?.blurhash }}
|
||||
accessibilityLabel={alt}
|
||||
className={cn("overflow-hidden bg-gray-300", className)}
|
||||
imageStyle={{ width: "100%", height: "100%", margin: 0, padding: 0 }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export const PosterBackground = ({
|
||||
alt,
|
||||
src,
|
||||
className,
|
||||
...props
|
||||
}: ComponentProps<typeof ImageBackground>) => {
|
||||
if (!src) return <PosterPlaceholder className={className} {...props} />;
|
||||
return (
|
||||
<ImageBackground
|
||||
alt={alt!}
|
||||
src={src}
|
||||
className={cn("aspect-2/3 overflow-hidden rounded", className)}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import { Image as EImage } from "expo-image";
|
||||
import type { ComponentProps } from "react";
|
||||
import { type ImageStyle, Platform } from "react-native";
|
||||
import { type ImageStyle, Platform, ViewProps, View } from "react-native";
|
||||
import { withUniwind } from "uniwind";
|
||||
import type { YoshikiStyle } from "yoshiki/src/type";
|
||||
import type { KImage } from "~/models";
|
||||
import { useToken } from "~/providers/account-context";
|
||||
import { cn } from "~/utils";
|
||||
import { Skeleton } from "./skeleton";
|
||||
import KyooLogo from "public/icon.svg";
|
||||
|
||||
export type YoshikiEnhanced<Style> = Style extends any
|
||||
? {
|
||||
@ -50,7 +51,6 @@ export const Image = ({
|
||||
placeholder={{ blurhash: src?.blurhash }}
|
||||
accessibilityLabel={alt}
|
||||
className={cn("overflow-hidden rounded bg-gray-300", className)}
|
||||
//imageStyle={{ width: "100%", height: "100%", margin: 0, padding: 0 }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@ -61,12 +61,29 @@ Image.Loader = (props: { className?: string }) => {
|
||||
};
|
||||
|
||||
export const Poster = ({
|
||||
src,
|
||||
className,
|
||||
...props
|
||||
}: ComponentProps<typeof Image>) => (
|
||||
<Image className={cn("aspect-2/3", className)} {...props} />
|
||||
);
|
||||
}: ComponentProps<typeof Image>) => {
|
||||
if (!src) return <PosterPlaceholder className={className} {...props} />;
|
||||
|
||||
return <Image src={src} className={cn("aspect-2/3", className)} {...props} />;
|
||||
};
|
||||
|
||||
Poster.Loader = ({ className, ...props }: { className?: string }) => (
|
||||
<Image.Loader className={cn("aspect-2/3", className)} {...props} />
|
||||
);
|
||||
|
||||
export const PosterPlaceholder = ({ className, ...props }: ViewProps) => {
|
||||
return (
|
||||
<View
|
||||
className={cn(
|
||||
"aspect-2/3 items-center justify-center overflow-hidden rounded bg-gray-300",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<KyooLogo style={{ width: "50%", height: "50%" }} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
import type { ComponentProps } from "react";
|
||||
import { View } from "react-native";
|
||||
import { Path } from "react-native-svg";
|
||||
import { Svg } from "~/primitives";
|
||||
|
||||
export const KyooLongLogo = (props: ComponentProps<typeof Svg>) => {
|
||||
return (
|
||||
<View style={{ height: 24, width: (531.15 / 149) * 24 }}>
|
||||
<Svg viewBox="149.28 236.8 531.15 149" {...props}>
|
||||
<Path
|
||||
//strokeWidth={3}
|
||||
d="M341.3 328c-3.5-4.2-6.8-7.1-9.7-8.8-3-1.6-6.4-2.5-10.5-2.8v30.9h-23.4V236.8h23.4v59c3.8-.1 7-.9 9.7-2.3s5.6-4 8.9-7.8c3.2-3.8 7.7-9.8 13.4-18.1h27.7c-6.3 9.8-11.5 17-15.6 21.8-4.1 4.7-8 8.1-11.7 10s-8.3 3.1-13.7 3.6v6.8c5.7.4 10.6 1.7 14.6 3.9 4.1 2.2 8.2 5.8 12.5 10.9s9.6 12.6 16.1 22.7h-28c-5.6-8.7-10.2-15.2-13.7-19.4Zm65.1 50.4q-9.9-7.5-12-21.9h22c1.9 6.8 7.1 10.3 15.7 10.3s10.7-1.8 13.7-5.3q4.5-5.25 4.5-16.2v-12l-5.4-1.3c-5.1 10.7-13.2 16.1-24.5 16.1s-15.7-3-20.8-9.1c-5.1-6-7.7-14.3-7.7-24.7v-46.7h23.4v42.6c0 6.1 1.5 10.8 4.4 14 3 3.3 7.1 4.9 12.4 4.9s9.6-1.7 12.7-5.1 4.6-8.2 4.6-14.3v-42.1h23.4v77.3c0 13.4-3.4 23.5-10.1 30.5-6.8 6.9-16.7 10.4-29.8 10.4s-19.9-2.5-26.5-7.5ZM506.9 344q-10.5-5.4-16.5-15c-4-6.4-5.9-13.5-5.9-21.4s2-15 5.9-21.4c4-6.4 9.4-11.4 16.5-15q10.5-5.4 23.7-5.4c13.2 0 16.7 1.8 23.7 5.4q10.5 5.4 16.5 15c4 6.4 5.9 13.5 5.9 21.4s-2 15-5.9 21.4c-4 6.4-9.4 11.4-16.5 15q-10.5 5.4-23.7 5.4c-13.2 0-16.7-1.8-23.7-5.4m40.1-20.5q6.3-6 6.3-15.9c0-9.9-2.1-12-6.3-16s-9.7-6.1-16.5-6.1-12.4 2-16.6 6.1-6.3 9.4-6.3 16 2.1 11.8 6.3 15.9 9.8 6.1 16.6 6.1 12.2-2 16.5-6.1m63.6 20.5q-10.5-5.4-16.5-15c-4-6.4-5.9-13.5-5.9-21.4s2-15 5.9-21.4c4-6.4 9.4-11.4 16.5-15q10.5-5.4 23.7-5.4c13.2 0 16.7 1.8 23.7 5.4q10.5 5.4 16.5 15c4 6.4 5.9 13.5 5.9 21.4s-2 15-5.9 21.4c-4 6.4-9.4 11.4-16.5 15q-10.5 5.4-23.7 5.4c-13.2 0-16.7-1.8-23.7-5.4m40.1-20.5q6.3-6 6.3-15.9c0-9.9-2.1-12-6.3-16s-9.7-6.1-16.5-6.1-12.4 2-16.6 6.1-6.3 9.4-6.3 16 2.1 11.8 6.3 15.9 9.8 6.1 16.6 6.1 12.2-2 16.5-6.1m-411.4-16.4c0 10.2 8.3 18.5 18.5 18.5s18.5-8.3 18.5-18.5-7.5-17.7-17-18.4h-3.2c-9.5.8-17 8.7-17 18.4Zm-90-13c0 10.2 8.3 18.5 18.5 18.5s18.5-8.3 18.5-18.5 8.3-18.5 18.5-18.5h.3c10-.2 18-8.2 18.2-18.2v-.7c-.2-10.1-8.4-18.2-18.5-18.2-10.2 0-18.5 8.3-18.5 18.5 0 1 0 1.9-.2 2.8 0 .3 0 .5-.1.8-.1.7-.3 1.3-.5 1.9s-.4 1.1-.6 1.6-.5 1-.7 1.5c-.1.2-.3.5-.4.7-.2.3-.3.5-.5.8-.1.2-.2.3-.3.5-.4.6-.8 1.1-1.3 1.6-.1.2-.3.3-.4.4l-1.1 1.1c-.2.1-.3.3-.5.4-.2.2-.4.4-.7.5-.7.5-1.4 1-2.2 1.4-.2.1-.5.3-.7.4s-.4.2-.7.3-.6.3-1 .4c-.2 0-.4.2-.6.2-.4.1-.8.2-1.2.4-.2 0-.4 0-.5.1h-.3c-.3 0-.5.1-.8.2-.3 0-.6 0-.9.1H168c-10.2 0-18.5 8.3-18.5 18.5Zm52.9 50.1c0 10.2 8.3 18.5 18.5 18.5 10.1 0 18.4-8.1 18.5-18.2v-2.4c0-.3 0-.6-.1-.9 0-.3-.1-.6-.2-.9v-.2c0-.2 0-.4-.1-.6 0-.4-.2-.7-.3-1.1 0-.2-.2-.5-.2-.7-.1-.3-.2-.5-.3-.8-.2-.5-.5-1.1-.8-1.6-.1-.2-.3-.5-.4-.7s-.3-.4-.4-.6c-.7-1.1-1.6-2-2.5-2.9l-.4-.4c-.5-.5-1-.9-1.6-1.3-.2-.1-.3-.2-.5-.3-1.5-1-3.1-1.7-4.8-2.3-.3 0-.6-.2-.9-.2-.4 0-.7-.2-1.1-.2-.3 0-.5 0-.8-.1-.9-.1-1.8-.2-2.8-.2-10.2 0-18.5 8.3-18.5 18.5Z"
|
||||
/>
|
||||
<Path
|
||||
//strokeWidth={3}
|
||||
d="M157 337.7c0 10.2 8.3 18.5 18.5 18.5s18.5-8.3 18.5-18.5 8.3-18.5 18.5-18.5c10.1 0 18.4-8.1 18.5-18.2v-.3c0-9.7 7.5-17.7 17-18.4h3.9c8-1 14.4-7.1 15.9-14.9 0-.2 0-.5.1-.7v-3.8c-.5-9.8-8.6-17.6-18.5-17.6s-18 7.8-18.5 17.6v1.1c-.2 10-8.2 18-18.2 18.2h-.3c-10.2 0-18.5 8.3-18.5 18.5s-8.3 18.5-18.5 18.5-18.5 8.3-18.5 18.5Z"
|
||||
/>
|
||||
</Svg>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@ -34,7 +34,7 @@ import {
|
||||
import { useAccount, useAccounts } from "~/providers/account-context";
|
||||
import { logout } from "~/ui/login/logic";
|
||||
import { cn } from "~/utils";
|
||||
import { KyooLongLogo } from "./icon";
|
||||
import KyooLongLogo from "public/icon-long.svg";
|
||||
|
||||
export const NavbarTitle = ({
|
||||
className,
|
||||
@ -50,7 +50,7 @@ export const NavbarTitle = ({
|
||||
{...tooltip(t("navbar.home"))}
|
||||
{...props}
|
||||
>
|
||||
<KyooLongLogo className="fill-light accent-dark" />
|
||||
<KyooLongLogo style={{ height: 24, width: (531.15 / 149) * 24 }} />
|
||||
</A>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user