fix WebP compatibility

2022-02-05 22:04:17 +08:00 · 2022-02-05 22:04:17 +08:00 · 7de23b6652
commit 7de23b6652
parent b8205cd71f
10 changed files with 104 additions and 40 deletions
--- 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,
+        ]);
    }
 }
--- 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,
+        ]);
    }
 }
--- 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">
--- 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">
--- 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">
--- 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">
--- 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">
--- 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>
            ))}
--- 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>
--- 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>