From 7de23b6652caad3cd23e8c115e123b48fdd34707 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Sat, 5 Feb 2022 22:04:17 +0800
Subject: [PATCH] fix WebP compatibility

---
 app/Http/View/Composers/UserMenuComposer.php  | 13 +++++-
 app/Http/View/Composers/UserPanelComposer.php | 13 +++++-
 .../views/admin/PlayersManagement/Card.tsx    | 42 ++++++++++++-------
 .../admin/ReportsManagement/ImageBox.tsx      | 17 +++++---
 .../src/views/admin/UsersManagement/Card.tsx  | 10 +++--
 .../src/views/skinlib/SkinLibrary/Item.tsx    |  6 ++-
 .../src/views/user/Closet/ClosetItem.tsx      | 15 ++++---
 .../src/views/user/Closet/ModalApply.tsx      | 18 +++++---
 resources/views/shared/user-menu.twig         |  5 ++-
 resources/views/shared/user-panel.twig        |  5 ++-
 10 files changed, 104 insertions(+), 40 deletions(-)

diff --git a/app/Http/View/Composers/UserMenuComposer.php b/app/Http/View/Composers/UserMenuComposer.php
index 5d8689cb..27fd1998 100644
--- a/app/Http/View/Composers/UserMenuComposer.php
+++ b/app/Http/View/Composers/UserMenuComposer.php
@@ -23,8 +23,19 @@ class UserMenuComposer
         $user = auth()->user();
         $avatarUrl = route('avatar.texture', ['tid' => $user->avatar, 'size' => 36], false);
         $avatar = $this->filter->apply('user_avatar', $avatarUrl, [$user]);
+        $avatarPNG = route(
+            'avatar.texture',
+            ['tid' => $user->avatar, 'size' => 36, 'png' => true],
+            false
+        );
+        $avatarPNG = $this->filter->apply('user_avatar', $avatarPNG, [$user]);
         $cli = $this->request->is('admin', 'admin/*');
 
-        $view->with(compact('user', 'avatar', 'cli'));
+        $view->with([
+            'user' => $user,
+            'avatar' => $avatar,
+            'avatar_png' => $avatarPNG,
+            'cli' => $cli,
+        ]);
     }
 }
diff --git a/app/Http/View/Composers/UserPanelComposer.php b/app/Http/View/Composers/UserPanelComposer.php
index dd6a4bcc..2ec2c568 100644
--- a/app/Http/View/Composers/UserPanelComposer.php
+++ b/app/Http/View/Composers/UserPanelComposer.php
@@ -25,6 +25,12 @@ class UserPanelComposer
         $user = auth()->user();
         $avatarUrl = route('avatar.texture', ['tid' => $user->avatar, 'size' => 45], false);
         $avatar = $this->filter->apply('user_avatar', $avatarUrl, [$user]);
+        $avatarPNG = route(
+            'avatar.texture',
+            ['tid' => $user->avatar, 'size' => 45, 'png' => true],
+            false
+        );
+        $avatarPNG = $this->filter->apply('user_avatar', $avatarPNG, [$user]);
 
         $badges = [];
         if ($user->isAdmin()) {
@@ -33,6 +39,11 @@ class UserPanelComposer
         $this->dispatcher->dispatch(new \App\Events\RenderingBadges($badges));
         $badges = $this->filter->apply('user_badges', $badges, [$user]);
 
-        $view->with(compact('user', 'avatar', 'badges'));
+        $view->with([
+            'user' => $user,
+            'avatar' => $avatar,
+            'avatar_png' => $avatarPNG,
+            'badges' => $badges,
+        ]);
     }
 }
diff --git a/resources/assets/src/views/admin/PlayersManagement/Card.tsx b/resources/assets/src/views/admin/PlayersManagement/Card.tsx
index fdf11eba..c9ccbff7 100644
--- a/resources/assets/src/views/admin/PlayersManagement/Card.tsx
+++ b/resources/assets/src/views/admin/PlayersManagement/Card.tsx
@@ -16,6 +16,11 @@ const Card: React.FC<Props> = (props) => {
   const { player } = props
 
   const handlePreviewTextures = () => {
+    const skinPreview = `${blessing.base_url}/preview/${player.tid_skin}`
+    const skinPreviewPNG = `${skinPreview}?png`
+    const capePreview = `${blessing.base_url}/preview/${player.tid_cape}`
+    const capePreviewPNG = `${capePreview}?png`
+
     showModal({
       mode: 'alert',
       title: t('general.player.previews'),
@@ -27,11 +32,14 @@ const Card: React.FC<Props> = (props) => {
                 href={`${blessing.base_url}/skinlib/show/${player.tid_skin}`}
                 target="_blank"
               >
-                <img
-                  src={`${blessing.base_url}/preview/${player.tid_skin}`}
-                  alt={`${player.name} - ${t('general.skin')}`}
-                  width="128"
-                />
+                <picture>
+                  <source srcSet={skinPreview} type="image/webp" />
+                  <img
+                    src={skinPreviewPNG}
+                    alt={`${player.name} - ${t('general.skin')}`}
+                    width="128"
+                  />
+                </picture>
               </a>
             )}
           </div>
@@ -41,11 +49,14 @@ const Card: React.FC<Props> = (props) => {
                 href={`${blessing.base_url}/skinlib/show/${player.tid_cape}`}
                 target="_blank"
               >
-                <img
-                  src={`${blessing.base_url}/preview/${player.tid_cape}`}
-                  alt={`${player.name} - ${t('general.cape')}`}
-                  width="128"
-                />
+                <picture>
+                  <source srcSet={capePreview} type="image/webp" />
+                  <img
+                    src={capePreviewPNG}
+                    alt={`${player.name} - ${t('general.cape')}`}
+                    width="128"
+                  />
+                </picture>
               </a>
             )}
           </div>
@@ -54,13 +65,16 @@ const Card: React.FC<Props> = (props) => {
     })
   }
 
+  const avatar = `${blessing.base_url}/avatar/player/${player.name}`
+  const avatarPNG = `${avatar}?png`
+
   return (
     <Box className="info-box">
       <div className="info-box-icon">
-        <img
-          className="bs-avatar"
-          src={`${blessing.base_url}/avatar/player/${player.name}`}
-        />
+        <picture>
+          <source srcSet={avatar} type="image/webp" />
+          <img className="bs-avatar" src={avatarPNG} />
+        </picture>
       </div>
       <div className="info-box-content">
         <div className="row">
diff --git a/resources/assets/src/views/admin/ReportsManagement/ImageBox.tsx b/resources/assets/src/views/admin/ReportsManagement/ImageBox.tsx
index af46c404..94b73637 100644
--- a/resources/assets/src/views/admin/ReportsManagement/ImageBox.tsx
+++ b/resources/assets/src/views/admin/ReportsManagement/ImageBox.tsx
@@ -39,6 +39,8 @@ interface Props {
 
 const ImageBox: React.FC<Props> = (props) => {
   const { report } = props
+  const preview = `${blessing.base_url}/preview/${report.tid}?height=150`
+  const previewPNG = `${preview}&png`
 
   const handleImageClick = () => props.onClick(report.texture)
 
@@ -53,12 +55,15 @@ const ImageBox: React.FC<Props> = (props) => {
         (UID: {report.uploader})
       </div>
       <div className="card-body">
-        <img
-          src={`${blessing.base_url}/preview/${report.tid}?height=150`}
-          alt={report.tid.toString()}
-          className="card-img-top"
-          onClick={handleImageClick}
-        />
+        <picture>
+          <source srcSet={preview} type="image/webp" />
+          <img
+            src={previewPNG}
+            alt={report.tid.toString()}
+            className="card-img-top"
+            onClick={handleImageClick}
+          />
+        </picture>
       </div>
       <div className="card-footer">
         <div className="d-flex justify-content-between">
diff --git a/resources/assets/src/views/admin/UsersManagement/Card.tsx b/resources/assets/src/views/admin/UsersManagement/Card.tsx
index cc15d7e6..98649b15 100644
--- a/resources/assets/src/views/admin/UsersManagement/Card.tsx
+++ b/resources/assets/src/views/admin/UsersManagement/Card.tsx
@@ -24,15 +24,17 @@ interface Props {
 const Card: React.FC<Props> = (props) => {
   const { user, currentUser } = props
 
+  const avatar = `${blessing.base_url}/avatar/user/${user.uid}`
+  const avatarPNG = `${avatar}?png`
   const canModify = canModifyUser(user, currentUser)
 
   return (
     <Box className="info-box">
       <Icon py>
-        <img
-          className="bs-avatar"
-          src={`${blessing.base_url}/avatar/user/${user.uid}`}
-        />
+        <picture>
+          <source srcSet={avatar} type="image/webp" />
+          <img className="bs-avatar" src={avatarPNG} />
+        </picture>
       </Icon>
       <div className="info-box-content">
         <div className="row">
diff --git a/resources/assets/src/views/skinlib/SkinLibrary/Item.tsx b/resources/assets/src/views/skinlib/SkinLibrary/Item.tsx
index 4c7c8d49..86f4f8cc 100644
--- a/resources/assets/src/views/skinlib/SkinLibrary/Item.tsx
+++ b/resources/assets/src/views/skinlib/SkinLibrary/Item.tsx
@@ -62,6 +62,7 @@ const Item: React.FC<Props> = (props) => {
 
   const link = `${blessing.base_url}/skinlib/show/${item.tid}`
   const preview = `${blessing.base_url}/preview/${item.tid}?height=150`
+  const previewPNG = `${preview}&png`
 
   const handleUploaderClick = (event: React.MouseEvent) => {
     event.preventDefault()
@@ -78,7 +79,10 @@ const Item: React.FC<Props> = (props) => {
       <Card className="card">
         <div className="card-body">
           <a href={link} target="_blank">
-            <img src={preview} alt={item.name} className="card-img-top" />
+            <picture>
+              <source srcSet={preview} type="image/webp" />
+              <img src={previewPNG} alt={item.name} className="card-img-top" />
+            </picture>
           </a>
         </div>
         <div className="card-footer">
diff --git a/resources/assets/src/views/user/Closet/ClosetItem.tsx b/resources/assets/src/views/user/Closet/ClosetItem.tsx
index 38672373..831d02c7 100644
--- a/resources/assets/src/views/user/Closet/ClosetItem.tsx
+++ b/resources/assets/src/views/user/Closet/ClosetItem.tsx
@@ -14,6 +14,8 @@ interface Props {
 
 const ClosetItem: React.FC<Props> = (props) => {
   const { item } = props
+  const preview = `${blessing.base_url}/preview/${item.tid}?height=150`
+  const previewPNG = `${preview}&png`
 
   const handleItemClick = () => {
     props.onClick(item)
@@ -24,11 +26,14 @@ const ClosetItem: React.FC<Props> = (props) => {
   return (
     <Card className={`card mr-3 mb-3 ${props.selected ? 'shadow' : ''}`}>
       <div className="card-body" onClick={handleItemClick}>
-        <img
-          src={`${blessing.base_url}/preview/${item.tid}?height=150`}
-          alt={item.pivot.item_name}
-          className="card-img-top"
-        />
+        <picture>
+          <source srcSet={preview} type="image/webp" />
+          <img
+            src={previewPNG}
+            alt={item.pivot.item_name}
+            className="card-img-top"
+          />
+        </picture>
       </div>
       <div className="card-footer pb-2 pt-2 pl-1 pr-1">
         <div className="container d-flex justify-content-between">
diff --git a/resources/assets/src/views/user/Closet/ModalApply.tsx b/resources/assets/src/views/user/Closet/ModalApply.tsx
index 290159b9..7cae9885 100644
--- a/resources/assets/src/views/user/Closet/ModalApply.tsx
+++ b/resources/assets/src/views/user/Closet/ModalApply.tsx
@@ -89,12 +89,18 @@ const ModalApply: React.FC<Props> = (props) => {
                 title={player.name}
                 onClick={() => handleSelect(player)}
               >
-                <img
-                  src={`${baseUrl}/avatar/${player.tid_skin}?3d&size=45`}
-                  alt={player.name}
-                  width={45}
-                  height={45}
-                />
+                <picture>
+                  <source
+                    srcSet={`${baseUrl}/avatar/${player.tid_skin}?3d&size=45`}
+                    type="image/webp"
+                  />
+                  <img
+                    src={`${baseUrl}/avatar/${player.tid_skin}?3d&png&size=45`}
+                    alt={player.name}
+                    width={45}
+                    height={45}
+                  />
+                </picture>
                 <span className="ml-1">{player.name}</span>
               </button>
             ))}
diff --git a/resources/views/shared/user-menu.twig b/resources/views/shared/user-menu.twig
index bf16299e..3fec4085 100644
--- a/resources/views/shared/user-menu.twig
+++ b/resources/views/shared/user-menu.twig
@@ -1,6 +1,9 @@
 <li class="nav-item dropdown user-menu">
   <a href="#" class="nav-link d-flex align-items-center" data-toggle="dropdown">
-    <img src="{{ avatar }}" class="bs-avatar mr-2" alt="User Image">
+    <picture>
+      <source srcset="{{ avatar_png }}" type="image/webp">
+      <img src="{{ avatar }}" class="bs-avatar mr-2" alt="User Image">
+    </picture>
     <span class="d-none d-md-inline d-sm-block" data-mark="nickname">
       {{ user.nickname ?? user.email }}
     </span>
diff --git a/resources/views/shared/user-panel.twig b/resources/views/shared/user-panel.twig
index 7b8619c2..7ed91c44 100644
--- a/resources/views/shared/user-panel.twig
+++ b/resources/views/shared/user-panel.twig
@@ -1,7 +1,10 @@
 <div class="user-panel mt-3 mb-3 {{ badges|length > 0 ? 'pb-2' }}">
   <div class="d-flex">
     <div class="image">
-      <img src="{{ avatar }}" class="bs-avatar" alt="User Image">
+      <picture>
+        <source srcset="{{ avatar_png }}" type="image/webp">
+        <img src="{{ avatar }}" class="bs-avatar" alt="User Image">
+      </picture>
     </div>
     <div class="info">
       <a class="d-block" data-mark="nickname">{{ user.nickname ?? user.email }}</a>