wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-15 22:10:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: using local cdn

Browse Source
This commit is contained in:
원더 2021-01-24 22:55:51 +09:00
parent 92c7bb4bef
commit cc95e91dcc
4 changed files with 5 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/BotCard.tsx
View File

@ -16,7 +16,7 @@ const BotCard = ({ bot }: BotProps): JSX.Element => {
<div className='flex h-44'> <div className='flex h-44'>
<div className='w-2/3'> <div className='w-2/3'>
<div className='flex justify-start'> <div className='flex justify-start'>
<DiscordAvatar size={128} userID={bot.id} avatarHash={bot.avatar} tag={bot.tag} alt='Avatar' className='rounded-full absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white'/> <DiscordAvatar size={128} userID={bot.id} alt='Avatar' className='rounded-full absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white'/>
</div> </div>
<div className='mt-28 px-4'> <div className='mt-28 px-4'>

15
components/DiscordAvatar.tsx
View File

@ -1,15 +1,12 @@
import { SyntheticEvent, useEffect, useState } from 'react' import { SyntheticEvent, useEffect, useState } from 'react'
import { ImageSize } from '../types' import { KoreanbotsEndPoints } from '../utils/Constants'
import { DiscordEnpoints } from '../utils/Constants'
import { supportsWebP } from '../utils/Tools' import { supportsWebP } from '../utils/Tools'
const DiscordAvatar = (props: { const DiscordAvatar = (props: {
alt?: string alt?: string
userID: string userID: string
avatarHash: string
tag: string
className?: string className?: string
size? : ImageSize size? : 128 | 256 | 512
}) => { }) => {
const fallback = '/img/default.png' const fallback = '/img/default.png'
const [ webpUnavailable, setWebpUnavailable ] = useState<boolean>() const [ webpUnavailable, setWebpUnavailable ] = useState<boolean>()
@ -21,9 +18,7 @@ const DiscordAvatar = (props: {
alt={props.alt ?? 'Image'} alt={props.alt ?? 'Image'}
className={props.className} className={props.className}
src={ src={
props.avatarHash KoreanbotsEndPoints.CDN.avatar(props.userID, { format: !webpUnavailable ? 'webp' : 'png', size: props.size ?? 256})
? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { format: !webpUnavailable ? 'webp' : 'png', size: props.size ?? 256})
: DiscordEnpoints.CDN.default(props.tag, { format: !webpUnavailable ? 'webp' : 'png', size: props.size ?? 256})
} }
onError={(e: SyntheticEvent<HTMLImageElement, ImageEvent>)=> { onError={(e: SyntheticEvent<HTMLImageElement, ImageEvent>)=> {
if(webpUnavailable) { if(webpUnavailable) {
@ -41,9 +36,7 @@ const DiscordAvatar = (props: {
(event.target as ImageTarget).src = fallback (event.target as ImageTarget).src = fallback
} }
// Webp Load Fail // Webp Load Fail
(e.target as ImageTarget).src = props.avatarHash (e.target as ImageTarget).src = KoreanbotsEndPoints.CDN.avatar(props.userID, { size: props.size ?? 256})
? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { size: props.size ?? 256 })
: DiscordEnpoints.CDN.default(props.tag, { size: props.size ?? 256})
if(!supportsWebP()) localStorage.setItem('webp', 'false') if(!supportsWebP()) localStorage.setItem('webp', 'false')
} }
}} }}

2
pages/bots/[id].tsx
View File

@ -41,8 +41,6 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
<div className='w-full text-center lg:w-1/4'> <div className='w-full text-center lg:w-1/4'>
<DiscordAvatar <DiscordAvatar
userID={data.id} userID={data.id}
avatarHash={data.avatar}
tag={data.tag}
className='w-full' className='w-full'
/> />
</div> </div>

2
pages/users/[id].tsx
View File

@ -41,8 +41,6 @@ const Users: NextPage<UserProps> = ({ data }) => {
<div className='w-full text-center lg:w-1/4'> <div className='w-full text-center lg:w-1/4'>
<DiscordAvatar <DiscordAvatar
userID={data.id} userID={data.id}
avatarHash={data.avatar}
tag={data.tag}
className='w-full' className='w-full'
/> />
</div> </div>