From bba3f261a2da988af5cbe9da80ec3d22923fdab3 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 26 Jan 2022 19:24:56 +0800
Subject: [PATCH] style: add GenshinLoading

---
 .../src/components/GenshinLoading.less        | 99 +++++++++++++++++++
 .../src/components/GenshinLoading.tsx         | 15 +++
 2 files changed, 114 insertions(+)
 create mode 100644 web/plugins/com.msgbyte.genshin/src/components/GenshinLoading.less
 create mode 100644 web/plugins/com.msgbyte.genshin/src/components/GenshinLoading.tsx

diff --git a/web/plugins/com.msgbyte.genshin/src/components/GenshinLoading.less b/web/plugins/com.msgbyte.genshin/src/components/GenshinLoading.less
new file mode 100644
index 00000000..e8c025e3
--- /dev/null
+++ b/web/plugins/com.msgbyte.genshin/src/components/GenshinLoading.less
@@ -0,0 +1,99 @@
+.img-color(@color, @top: 500px) {
+  position: absolute;
+  top: @top;
+  left: 0;
+  filter: drop-shadow(0 -@top 0 @color);
+}
+
+#tailchat-app {
+  --plugin-genshinloadingbar-background-color: #f5f5f5;
+  --plugin-genshinloadingbar-prospect-color: #666666;
+
+  @loading-img-height: 62.5px;
+  @loading-img-width: 500px;
+  @mobile: 719px;
+  @animation: plugin-genshin-loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite
+    forwards;
+
+  .dark {
+    --plugin-genshinloadingbar-background-color: #2c2b30;
+    --plugin-genshinloadingbar-prospect-color: #ece5d8;
+  }
+
+  .plugin-genshin-loading-bar {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: @loading-img-width;
+    height: @loading-img-height;
+    transform: translate(-50%, -50%) scale(0.8);
+    transition: all 0.5s;
+    user-select: none;
+    overflow: hidden;
+
+    img {
+      .img-color(var(--plugin-genshinloadingbar-background-color));
+    }
+
+    &::after {
+      content: '';
+      .img-color(var(--plugin-genshinloadingbar-prospect-color));
+      width: @loading-img-width;
+      height: @loading-img-height;
+      background: url('https://yuanshen.site/imgs/loading-bar.png') no-repeat
+        left 100%;
+      background-size: @loading-img-width @loading-img-height;
+      background-position-x: 0;
+      animation: @animation;
+    }
+
+    @media screen and (max-width: @mobile) {
+      // Hide when vertical screen
+      & {
+        display: none;
+      }
+
+      // Horizontal when screen display
+      @media screen and (orientation: landscape) {
+        & {
+          display: block !important;
+          transform: translate(-50%, -50%) scale(0.7) !important;
+        }
+      }
+    }
+
+    @supports not (filter: drop-shadow(0 0 0 #fff)) {
+      // If the browser does not support Filter
+      &:before {
+        content: 'Your browser does not support the animation';
+      }
+    }
+  }
+
+
+  @keyframes plugin-genshin-loading-bar {
+    0% {
+      width: 0;
+      background-size: @loading-img-width @loading-img-height;
+    }
+
+    16.6% {
+    }
+
+    33.2% {
+    }
+
+    49.8% {
+    }
+
+    66.4% {
+    }
+
+    83% {
+    }
+
+    100% {
+      width: @loading-img-width;
+    }
+  }
+}
diff --git a/web/plugins/com.msgbyte.genshin/src/components/GenshinLoading.tsx b/web/plugins/com.msgbyte.genshin/src/components/GenshinLoading.tsx
new file mode 100644
index 00000000..30c6e1d6
--- /dev/null
+++ b/web/plugins/com.msgbyte.genshin/src/components/GenshinLoading.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import './GenshinLoading.less';
+
+export const GenshinLoading: React.FC = React.memo(() => {
+  return (
+    <div
+      className="plugin-genshin-loading-bar"
+      role="presentation"
+      aria-hidden="true"
+    >
+      <img src="https://yuanshen.site/imgs/loading-bar.png" alt="Loading..." />
+    </div>
+  );
+});
+GenshinLoading.displayName = 'GenshinLoading';