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

fix: webp

Browse Source
This commit is contained in:
원더 2021-01-11 22:06:16 +09:00
parent db09287ca0
commit ac4d00bf8b
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/DiscordAvatar.tsx
View File

@ -1,6 +1,7 @@
import { SyntheticEvent } from 'react' import { SyntheticEvent, useEffect, useState } from 'react'
import { ImageSize } from '../types' import { ImageSize } from '../types'
import { DiscordEnpoints } from '../utils/Constants' import { DiscordEnpoints } from '../utils/Constants'
import { supportsWebP } from '../utils/Tools'
const DiscordAvatar = (props: { const DiscordAvatar = (props: {
alt?: string alt?: string
@ -10,19 +11,30 @@ const DiscordAvatar = (props: {
className?: string className?: string
size? : ImageSize size? : ImageSize
}) => { }) => {
const fallback ='/img/default.png' const fallback = '/img/default.png'
const webp = localStorage.webp === 'true' const [ webpUnavailable, setWebpUnavailable ] = useState<boolean>()
useEffect(()=> {
setWebpUnavailable(localStorage.webp === 'false')
}, [])
return ( return (
<img <img
alt={props.alt ?? 'IMage'} alt={props.alt ?? 'Image'}
className={props.className} className={props.className}
src={ src={
props.avatarHash props.avatarHash
? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { format: webp ? '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: webp ? '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(webp) { if(webpUnavailable) {
(e.target as ImageTarget).onerror = (event) => {
// All Fails
(event.target as ImageTarget).onerror = ()=> { console.log('FALLBACK IMAGE LOAD FAIL') }
(event.target as ImageTarget).src = fallback
}
}
else {
(e.target as ImageTarget).onerror = (event) => { (e.target as ImageTarget).onerror = (event) => {
// All Fails // All Fails
(event.target as ImageTarget).onerror = ()=> { console.log('FALLBACK IMAGE LOAD FAIL') } (event.target as ImageTarget).onerror = ()=> { console.log('FALLBACK IMAGE LOAD FAIL') }
@ -32,17 +44,8 @@ const DiscordAvatar = (props: {
(e.target as ImageTarget).src = props.avatarHash (e.target as ImageTarget).src = props.avatarHash
? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { size: props.size ?? 256 }) ? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { size: props.size ?? 256 })
: DiscordEnpoints.CDN.default(props.tag, { size: props.size ?? 256}) : DiscordEnpoints.CDN.default(props.tag, { size: props.size ?? 256})
if(!supportsWebP()) localStorage.setItem('webp', 'false')
} }
else (e.target as ImageTarget).onerror = (event) => {
// All Fails
(event.target as ImageTarget).onerror = ()=> { console.log('FALLBACK IMAGE LOAD FAIL') }
(event.target as ImageTarget).src = fallback
}
// Webp Load Fail
(e.target as ImageTarget).src = props.avatarHash
? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { size: props.size ?? 256 })
: DiscordEnpoints.CDN.default(props.tag, { size: props.size ?? 256})
}} }}
/> />
) )