convert viewer background images format to WebP

package.json

@@ -189,7 +189,7 @@
     ],
     "moduleNameMapper": {
       "\\.css$": "<rootDir>/resources/assets/tests/__mocks__/style.ts",
-      "\\.(png|jpg)$": "<rootDir>/resources/assets/tests/__mocks__/file.ts",
+      "\\.(png|webp)$": "<rootDir>/resources/assets/tests/__mocks__/file.ts",
       "^@/(.*)$": "<rootDir>/resources/assets/src/$1"
     },
     "setupFilesAfterEnv": [

resources/assets/src/components/Viewer.tsx

@@ -7,13 +7,13 @@ import { t } from '@/scripts/i18n'
 import * as cssUtils from '@/styles/utils'
 import * as breakpoints from '@/styles/breakpoints'
 import SkinSteve from '../../../misc/textures/steve.png'
-import bg1 from '../../../misc/backgrounds/1.png'
-import bg2 from '../../../misc/backgrounds/2.png'
-import bg3 from '../../../misc/backgrounds/3.png'
-import bg4 from '../../../misc/backgrounds/4.png'
-import bg5 from '../../../misc/backgrounds/5.png'
-import bg6 from '../../../misc/backgrounds/6.png'
-import bg7 from '../../../misc/backgrounds/7.png'
+import bg1 from '../../../misc/backgrounds/1.webp'
+import bg2 from '../../../misc/backgrounds/2.webp'
+import bg3 from '../../../misc/backgrounds/3.webp'
+import bg4 from '../../../misc/backgrounds/4.webp'
+import bg5 from '../../../misc/backgrounds/5.webp'
+import bg6 from '../../../misc/backgrounds/6.webp'
+import bg7 from '../../../misc/backgrounds/7.webp'
 
 const backgrounds = [bg1, bg2, bg3, bg4, bg5, bg6, bg7]
 export const PICTURES_COUNT = backgrounds.length
@@ -205,6 +205,10 @@ const Viewer: React.FC<Props> = (props) => {
     setBackground(`url('${backgrounds[index]}')`)
   }
 
+  const backgroundStyle = background.startsWith('#')
+    ? { backgroundColor: background }
+    : { backgroundImage: background }
+
   return (
     <div className="card">
       <div className="card-header">
@@ -247,7 +251,7 @@ const Viewer: React.FC<Props> = (props) => {
           </div>
         </div>
       </div>
-      <div className="card-body" css={cssCardBody} style={{ background }}>
+      <div className="card-body" css={cssCardBody} style={backgroundStyle}>
         <div ref={containerRef} css={cssViewer}></div>
       </div>
       <div className="card-footer">

resources/assets/src/scripts/sw.ts

@@ -14,9 +14,9 @@ registerRoute(
 )
 
 registerRoute(
-  /\/app\/.*\.png/,
+  /\/app\/.*\.webp/,
   new StaleWhileRevalidate({
-    cacheName: 'png-resource-v1',
+    cacheName: 'webp-resource-v1',
     fetchOptions: {
       credentials: 'omit',
     },

resources/assets/src/webpack.d.ts

@@ -9,3 +9,7 @@ declare module '*.scss' {
 declare module '*.png' {
   export default ''
 }
+
+declare module '*.webp' {
+  export default ''
+}

resources/assets/tests/webpack.d.ts

@@ -9,3 +9,7 @@ declare module '*.scss' {
 declare module '*.png' {
   export default ''
 }
+
+declare module '*.webp' {
+  export default ''
+}

resources/views/shared/head.twig

@@ -12,7 +12,7 @@
 {% endif %}
 <script>
 window.addEventListener('load', () => {
-  navigator.serviceWorker.register('/sw.js?v2')
+  navigator.serviceWorker.register('/sw.js?v3')
 })
 </script>
 {% for link in links %}