feat: checking if webp is available

This commit is contained in:
원더 2021-01-11 13:05:24 +09:00
parent bb545e1bd9
commit ac59279173

View File

@ -20,7 +20,6 @@ let systemColor
export default function App({ Component, pageProps }: AppProps): JSX.Element { export default function App({ Component, pageProps }: AppProps): JSX.Element {
const [ betaKey, setBetaKey ] = useState('') const [ betaKey, setBetaKey ] = useState('')
const [ theme, setDefaultTheme ] = useState<string|undefined>(undefined) const [ theme, setDefaultTheme ] = useState<string|undefined>(undefined)
const { setTheme } = useTheme()
useEffect(() => { useEffect(() => {
setBetaKey(localStorage.betaKey) setBetaKey(localStorage.betaKey)
console.log( console.log(
@ -31,9 +30,10 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
'%c' + '이곳에 코드를 붙여넣으면 공격자에게 엑세스 토큰을 넘겨줄 수 있습니다!!', '%c' + '이곳에 코드를 붙여넣으면 공격자에게 엑세스 토큰을 넘겨줄 수 있습니다!!',
'color: #ff0000; font-size: 20px; font-weight: bold;' 'color: #ff0000; font-size: 20px; font-weight: bold;'
) )
}, []) if(!localStorage.webp) {
if(canUseWebP()) localStorage.webp = true
useEffect(()=> { else localStorage.webp = false
}
try { try {
systemColor = window.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light' systemColor = window.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'
} catch (e) { } catch (e) {
@ -43,8 +43,8 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
localStorage.setItem('theme', systemColor) localStorage.setItem('theme', systemColor)
setDefaultTheme(systemColor) setDefaultTheme(systemColor)
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []) }, [])
return ( return (
<ThemeProvider forcedTheme={theme} attribute='class' storageKey='theme' enableSystem> <ThemeProvider forcedTheme={theme} attribute='class' storageKey='theme' enableSystem>
<Head> <Head>
@ -72,3 +72,13 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
</ThemeProvider> </ThemeProvider>
) )
} }
function canUseWebP() {
const elem = document.createElement('canvas')
if (elem.getContext && elem.getContext('2d')) {
// was able or not to get WebP representation
return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0
}
// very old browser like IE 8, canvas not supported
return false
}