Replace GIFs with WebP (#2416)

* Rename maze.gif to maze.webp

* Replace gif, mp4 with webp

components/error-boundary.js

@@ -44,7 +44,7 @@ class ErrorBoundary extends Component {
       const errorDetails = this.getErrorDetails()
       return (
         <StaticLayout footer={false}>
-          <Image width='500' height='375' className='rounded-1 shadow-sm' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/floating.gif`} fluid />
+          <Image width='500' height='375' className='rounded-1 shadow-sm' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/floating.webp`} fluid />
           <h1 className={styles.status} style={{ fontSize: '48px' }}>something went wrong</h1>
           {this.state.error && <CopyErrorButton errorDetails={errorDetails} />}
         </StaticLayout>

pages/_error.js

@@ -48,18 +48,18 @@ const statusDescribe = {
 
 function ErrorImage ({ statusCode }) {
   if (statusCode === 404) {
-    return <Image className='rounded-1 shadow-sm' width='500' height='376' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/maze.gif`} fluid />
+    return <Image className='rounded-1 shadow-sm' width='500' height='376' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/maze.webp`} fluid />
   }
   if (statusCode >= 500) {
-    return <Image className='rounded-1 shadow-sm' width='300' height='225' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/falling.gif`} fluid />
+    return <Image className='rounded-1 shadow-sm' width='300' height='225' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/falling.webp`} fluid />
   }
   if (statusCode >= 400) {
-    return <Image className='rounded-1 shadow-sm' width='500' height='381' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/forbidden.gif`} fluid />
+    return <Image className='rounded-1 shadow-sm' width='500' height='381' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/forbidden.webp`} fluid />
   }
   if (statusCode >= 300) {
-    return <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
+    return <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.webp`} fluid />
   }
-  return <Image className='rounded-1 shadow-sm' width='500' height='376' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/falling.gif`} fluid />
+  return <Image className='rounded-1 shadow-sm' width='500' height='376' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/falling.webp`} fluid />
 }
 
 export default function Error ({ statusCode }) {

pages/auth/error.js

@@ -18,14 +18,14 @@ export default function AuthError ({ error }) {
   if (error === 'AccessDenied') {
     return (
       <StaticLayout>
-        <Image className='rounded-1 shadow-sm' width='500' height='381' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/forbidden.gif`} fluid />
+        <Image className='rounded-1 shadow-sm' width='500' height='381' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/forbidden.webp`} fluid />
         <h1 className={[styles.status, styles.smaller].join(' ')}><span>ACCESS DENIED</span></h1>
       </StaticLayout>
     )
   } else if (error === 'Verification') {
     return (
       <StaticLayout>
-        <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
+        <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.webp`} fluid />
         <h2 className='pt-4'>Incorrect magic code</h2>
         <Button
           className='align-items-center my-3'
@@ -41,7 +41,7 @@ export default function AuthError ({ error }) {
   } else if (error === 'Configuration') {
     return (
       <StaticLayout>
-        <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
+        <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.webp`} fluid />
         <h1 className={[styles.status, styles.smaller].join(' ')}><span>configuration error</span></h1>
       </StaticLayout>
     )
@@ -49,7 +49,7 @@ export default function AuthError ({ error }) {
 
   return (
     <StaticLayout>
-      <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
+      <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.webp`} fluid />
       <h1 className={[styles.status, styles.smaller].join(' ')}><span>auth error</span></h1>
     </StaticLayout>
 

pages/email.js

@@ -40,10 +40,7 @@ export default function Email () {
   return (
     <StaticLayout>
       <div className='p-4 text-center'>
-        <video width='640' height='302' loop autoPlay muted preload='auto' playsInline style={{ maxWidth: '100%' }}>
+        <Image className='rounded-1 shadow-sm' width='640' height='302' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cowboy-saloon.webp`} fluid />
-          <source src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cowboy-saloon.mp4`} type='video/mp4' />
-          <Image className='rounded-1 shadow-sm' width='640' height='302' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cowboy-saloon.gif`} fluid />
-        </video>
         <h2 className='pt-4'>Check your email</h2>
         <h4 className='text-muted pt-2 pb-4'>{buildMessage()}</h4>
         <MagicCodeForm onSubmit={(token) => pushCallback(token)} disabled={!callback} signin={signin} />

pages/offline.js

@@ -5,7 +5,7 @@ import styles from '@/styles/error.module.css'
 export default function offline () {
   return (
     <StaticLayout>
-      <Image width='499' height='293' className='rounded-1 shadow-sm' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/waiting.gif`} fluid />
+      <Image width='499' height='293' className='rounded-1 shadow-sm' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/waiting.webp`} fluid />
       <h1 className={styles.status}><span>Offline</span></h1>
     </StaticLayout>
   )

sw/build.js

@@ -32,7 +32,7 @@ function generatePrecacheManifest () {
 
   const staticDir = join(__dirname, '../public')
   const staticFiles = walkSync(staticDir)
-  const staticMatch = f => [/\.(gif|jpe?g|ico|png|ttf|woff|woff2)$/].some(m => m.test(f))
+  const staticMatch = f => [/\.(webp|jpe?g|ico|png|ttf|woff|woff2)$/].some(m => m.test(f))
   staticFiles.filter(staticMatch).forEach(file => {
     const stats = statSync(file)
     addToManifest(file, file.slice(staticDir.length), stats.size)