Hover more low quality modules

DerGoogler · Oct 28, 2023 · cea8d16 · cea8d16
1 parent a1212ca
commit cea8d16
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 11 deletions.
diff --git a/Website/src/activitys/ModuleViewActivity.tsx b/Website/src/activitys/ModuleViewActivity.tsx
@@ -49,6 +49,7 @@ import PicturePreviewActivity from "./PicturePreviewActivity";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import TerminalIcon from "@mui/icons-material/Terminal";
 import { isLiteralObject } from "@Util/util";
+import { useLowQualityModule } from "@Hooks/useLowQualityModule";
 
 function a11yProps(index: number) {
   return {
@@ -93,6 +94,8 @@ const ModuleViewActivity = () => {
 
   const search = React.useMemo(() => new URLSearchParams(window.location.search), [window.location.search]);
 
+  const isLowQuality = useLowQualityModule(extra, !settings._low_quality_module);
+
   React.useEffect(() => {
     search.set("module", id);
     const newRelativePathQuery = window.location.pathname + "?" + search.toString();
@@ -347,6 +350,13 @@ const ModuleViewActivity = () => {
               </Alert>
             )}
 
+            {isLowQuality && (
+              <Alert severity="warning">
+                <AlertTitle>{strings("low_quality_module")}</AlertTitle>
+                {strings("low_quality_module_warn")}
+              </Alert>
+            )}
+
             {mmrl.screenshots && (
               <Card elevation={0} sx={{ /*width: { xs: "100%", sm: "100vh" },*/ width: "100%" }}>
                 <CardContent>
@@ -436,7 +446,7 @@ const ModuleViewActivity = () => {
                   </Stack>
 
                   <Typography variant="body2" color="text.secondary">
-            {isLiteralObject(description) ? String((description as ModuleDescription)[currentLanguage]) : String(description)}
+                    {isLiteralObject(description) ? String((description as ModuleDescription)[currentLanguage]) : String(description)}
                   </Typography>
                   <Typography sx={{ mt: 3 }} variant="h6" component="div">
                     {strings("updated_on")}

diff --git a/Website/src/components/DeviceModule.tsx b/Website/src/components/DeviceModule.tsx
@@ -3,7 +3,7 @@ import { DeleteRounded, RefreshRounded } from "@mui/icons-material";
 import React from "react";
 import { useStrings } from "@Hooks/useStrings";
 import { Android12Switch } from "./Android12Switch";
-import { Box, Button, Card, Divider, Stack, SxProps, Theme, Typography } from "@mui/material";
+import { Alert, AlertTitle, Box, Button, Card, Divider, Stack, SxProps, Theme, Typography } from "@mui/material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { useActivity } from "@Hooks/useActivity";
 import { ConfigureActivity } from "@Activitys/ConfigureActivity";
@@ -15,6 +15,7 @@ import { useTheme } from "@Hooks/useTheme";
 import TerminalActivity from "@Activitys/TerminalActivity";
 import { useRepos } from "@Hooks/useRepos";
 import { ModConf, useModConf } from "@Hooks/useModConf";
+import { useLowQualityModule } from "@Hooks/useLowQualityModule";
 
 export const badgeStyle: (color: (typeof colors)["blue" | "teal" | "red" | "orange"]) => SxProps<Theme> = (color) => {
   return {
@@ -66,6 +67,10 @@ const DeviceModule = React.memo<Props>((props) => {
 
   const findOnlineModule = React.useMemo(() => modules.find((module) => module.id === id), [modules]) as Module;
 
+  const hasUpdate = React.useMemo(() => findOnlineModule && versionCode < findOnlineModule.versionCode, [findOnlineModule]);
+
+  const isLowQuality = useLowQualityModule(props.module, !settings._low_quality_module);
+
   return (
     <>
       <Card
@@ -186,7 +191,16 @@ const DeviceModule = React.memo<Props>((props) => {
             )}
           </Stack>
         </Stack>
-        {findOnlineModule && versionCode < findOnlineModule.versionCode && (
+        {isLowQuality && (
+          <Alert
+            sx={{ borderRadius: hasUpdate ? 0 : `0px 0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }}
+            severity="warning"
+          >
+            <AlertTitle>{strings("low_quality_module")}</AlertTitle>
+            {strings("low_quality_module_warn")}
+          </Alert>
+        )}
+        {hasUpdate && (
           <Button
             sx={{
               borderRadius: `0px 0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,

diff --git a/Website/src/components/ExploreModule.tsx b/Website/src/components/ExploreModule.tsx
@@ -23,13 +23,13 @@ interface Props {
 
 export const ExploreModule = React.memo<Props>((props) => {
   const { context } = useActivity();
-  const { currentLanguage } = useStrings();
+  const { strings, currentLanguage } = useStrings();
   const { settings } = useSettings();
   const { theme, scheme, shade } = useTheme();
 
   const { id, name, version, versionCode, description, stars, author, last_update, mmrl, valid, hidden } = props.moduleProps;
 
-  const isLowQuality = useLowQualityModule(props.moduleProps, props.disableLowQuality);
+  const isLowQuality = useLowQualityModule(props.moduleProps, !settings._low_quality_module);
   const formatLastUpdate = useFormatDate(last_update);
 
   if (hidden) {
@@ -146,10 +146,10 @@ export const ExploreModule = React.memo<Props>((props) => {
           </Stack>
         </Stack>
       </Stack>
-      {settings._low_quality_module && isLowQuality && (
-        <Alert style={{ borderRadius: 0 }} severity="warning">
-          <AlertTitle>Low Quality</AlertTitle>
-          Module meets not the requirements of its props
+      {isLowQuality && (
+        <Alert sx={{ borderRadius: 0 }} severity="warning">
+          <AlertTitle>{strings("low_quality_module")}</AlertTitle>
+          {strings("low_quality_module_warn")}
         </Alert>
       )}
     </Card>

diff --git a/Website/src/locales/de.ts b/Website/src/locales/de.ts
@@ -65,7 +65,8 @@ export const de = {
 
   // Explore Module View
   verified_module: "Verifiziertes Modul",
-  verified_module_desc: "Dieses Modul wurde einer Überprüfung unterzogen und wurde als vertrauenswürdiges Modul bestätigt, das von einem seriösen Entwickler entwickelt wurde.",
+  verified_module_desc:
+    "Dieses Modul wurde einer Überprüfung unterzogen und wurde als vertrauenswürdiges Modul bestätigt, das von einem seriösen Entwickler entwickelt wurde.",
 
   update_json: "Verwendet eigene Update.json",
   update_json_desc: "Dieses Modul verwendet seine eigene update.json für Aktualisierungs- und Installationszwecke.",
@@ -77,8 +78,11 @@ export const de = {
 
   module: "Modul",
 
+  low_quality_module: "Modul von geringer Qualität",
   low_quality_modules: "Module von geringer Qualität",
   low_quality_modules_subtitle: "Zeigt eine Warnung unterhalb des Moduls an, wenn es eine niedrige Qualität hat",
+  low_quality_module_warn:
+    "Diesem Magisk-Modul fehlen wichtige Eigenschaften wie ID, Version, Versionscode, Autor usw., was sich auf seine Funktionalität und Herkunft auswirken kann.",
 
   invaild_modules: "Ungültige Module",
   invaild_modules_subtitle: "Ungültige Module anzeigen",

diff --git a/Website/src/locales/en.ts b/Website/src/locales/en.ts
@@ -63,7 +63,8 @@ export const en = {
 
   // Explore Module View
   verified_module: "Verified module",
-  verified_module_desc: "This module has undergone verification and has been confirmed as a trusted module developed by a reputable developer.",
+  verified_module_desc:
+    "This module has undergone verification and has been confirmed as a trusted module developed by a reputable developer.",
 
   update_json: "Uses own update.json",
   update_json_desc: "This module utilizes its own update.json for updating and installation purposes.",
@@ -75,8 +76,11 @@ export const en = {
 
   module: "Module",
 
+  low_quality_module: "Low quality module",
   low_quality_modules: "Low quality modules",
   low_quality_modules_subtitle: "Shows a alert below the module if it has a low quality",
+  low_quality_module_warn:
+    "This Magisk module is missing crucial properties, such as id, version, versionCode, author, etc., which may affect its functionality and origin.",
 
   invaild_modules: "Invaild modules",
   invaild_modules_subtitle: "Show invaild modules",