From ac4d00bf8be5e5f78e7d6ff670c9be0921c9b605 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Mon, 11 Jan 2021 22:06:16 +0900
Subject: [PATCH] fix: webp

---
 components/DiscordAvatar.tsx | 37 +++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/components/DiscordAvatar.tsx b/components/DiscordAvatar.tsx
index ced185d..4676108 100644
--- a/components/DiscordAvatar.tsx
+++ b/components/DiscordAvatar.tsx
@@ -1,6 +1,7 @@
-import { SyntheticEvent } from 'react'
+import { SyntheticEvent, useEffect, useState } from 'react'
 import { ImageSize } from '../types'
 import { DiscordEnpoints } from '../utils/Constants'
+import { supportsWebP } from '../utils/Tools'
 
 const DiscordAvatar = (props: {
 	alt?: string
@@ -10,19 +11,30 @@ const DiscordAvatar = (props: {
 	className?: string
 	size? : ImageSize
 }) => {
-	const fallback ='/img/default.png'
-	const webp = localStorage.webp === 'true'
+	const fallback = '/img/default.png'
+	const [ webpUnavailable, setWebpUnavailable ] = useState<boolean>()
+	useEffect(()=> {
+		setWebpUnavailable(localStorage.webp === 'false')
+	}, [])
 	return (
 		<img
-			alt={props.alt ?? 'IMage'}
+			alt={props.alt ?? 'Image'}
 			className={props.className}
 			src={
 				props.avatarHash
-					? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { format: webp ? 'webp' : 'png', size: props.size ?? 256})
-					: DiscordEnpoints.CDN.default(props.tag, { 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: !webpUnavailable ? 'webp' : 'png', size: props.size ?? 256})
 			}
 			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) => {
 						// All Fails
 						(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
 						? 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')
 				}
-				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})
-					
 			}}
 		/>	
 	)