Merge pull request #21 from DerGoogler/1.6.2

1.6.2

Android/app/build.gradle

@@ -14,8 +14,8 @@ android {
         applicationId 'com.dergoogler.mmrl'
         minSdk 26
         targetSdk 33
-        versionName '1.6.1'
-        versionCode 161
+        versionName '1.6.2'
+        versionCode 162
         externalNativeBuild {
             cmake {
                 cppFlags "-llog"

Android/app/release/output-metadata.json

@@ -11,8 +11,8 @@
       "type": "SINGLE",
       "filters": [],
       "attributes": [],
-      "versionCode": 160,
-      "versionName": "1.6.0",
+      "versionCode": 161,
+      "versionName": "1.6.1",
       "outputFile": "app-release.apk"
     }
   ],

README.md

@@ -45,6 +45,7 @@ description=<string>
 # MMRL supported properties
 mmrlConfig=<boolean>
 mmrlNoComments=<boolean>
+mmrlCover=<url>
 
 # Fox's Mmm supported properties
 minApi=<int>

Website/package.json

@@ -3,8 +3,8 @@
   "description": "",
   "config": {
     "application_id": "com.dergoogler.mmrl",
-    "version_name": "1.6.1",
-    "version_code": 161
+    "version_name": "1.6.2",
+    "version_code": 162
   },
   "main": "index.tsx",
   "keywords": [],

Website/src/activitys/DAPITestActivity.tsx

@@ -39,7 +39,7 @@ const DAPITestActivity = () => {
   const { context, extra } = useActivity();
   const { strings } = useStrings();
 
-  const [description, setDescription] = React.useState("# Hello, world!");
+  const [description, setDescription] = React.useState("# Extended D-API\n\nThere are more components, try it out!\n\n## Alerts within a box\n\n<paper style=\"padding:8px;\" elevation={1}>\n    <stack spacing>\n        <alert error>This is an error alert — check it out!</alert>\n        <alert warning>This is a warning alert — check it out!</alert>\n        <alert info>This is an info alert — check it out!</alert>\n        <alert success>This is a success alert — check it out!</alert>\n    </stack>\n</paper>\n\n### Code\n\n```html\n<paper style=\"padding:8px;\" elevation={1}>\n    <stack spacing>\n        <alert error>This is an error alert — check it out!</alert>\n        <alert warning>This is a warning alert — check it out!</alert>\n        <alert info>This is an info alert — check it out!</alert>\n        <alert success>This is a success alert — check it out!</alert>\n    </stack>\n</paper>\n```");
 
   const markdownRef = React.useRef<TextareaMarkdownRef>(null);
   const markdownRefAdvanced = React.useRef<AceEditor>(null);
@@ -191,7 +191,7 @@ const DAPITestActivity = () => {
               />
             </TextareaMarkdown.Wrapper>
             {!os.isAndroid && isDesktop && (
-              <Preview className="preview">
+              <Preview>
                 <Markup children={description} />
               </Preview>
             )}
@@ -225,6 +225,7 @@ const Preview = styled("div")(({ theme }) => ({
   borderStyle: "solid",
   borderWidth: "1px",
   minWidth: "0%",
+  overflow: "auto",
   borderColor: "rgba(0, 0, 0, 0.23)",
   article: {
     position: "absolute",

Website/src/activitys/DescriptonActivity.tsx

@@ -26,6 +26,7 @@ import DataUsageIcon from "@mui/icons-material/DataUsage";
 import ModuleSpecsActivity from "./ModuleSpecsActivity";
 import { parseAndroidVersion } from "@Util/parseAndroidVersion";
 import { useTheme } from "@Hooks/useTheme";
+import { StyledIconButtonWithText } from "@Components/StyledIconButton";
 
 type Extra = {
   title: string;
@@ -158,7 +159,7 @@ function DescriptonActivity() {
               <StyledCard elevation={0} style={{ margin: "16px 8px 0px 8px" }}>
                 <Stack spacing={0.8} direction="row" alignItems="center" style={{ padding: 8 }}>
                   {!(prop_url.mmrlNoComments === "true") && (
-                    <ViewModuleOptionsButton
+                    <StyledIconButtonWithText
                       style={{ width: 39 }}
                       onClick={() => {
                         context.pushPage({
@@ -175,19 +176,19 @@ function DescriptonActivity() {
                       <Stack spacing={0.8} direction="row" alignItems="center">
                         <CommentIcon sx={{ fontSize: 14 }} />
                       </Stack>
-                    </ViewModuleOptionsButton>
+                    </StyledIconButtonWithText>
                   )}
 
                   {isVerified && (
-                    <ViewModuleOptionsButton>
+                    <StyledIconButtonWithText>
                       <Stack spacing={0.8} direction="row" alignItems="center">
                         <VerifiedIcon sx={{ fontSize: 14 }} />
                         <span style={{ fontSize: 14 }}>{strings.verified}</span>
                       </Stack>
-                    </ViewModuleOptionsButton>
+                    </StyledIconButtonWithText>
                   )}
 
-                  <ViewModuleOptionsButton
+                  <StyledIconButtonWithText
                     onClick={() => {
                       context.pushPage({
                         component: ModuleSpecsActivity,
@@ -204,10 +205,10 @@ function DescriptonActivity() {
                       <DeviceUnknownIcon sx={{ fontSize: 14 }} />
                       <span style={{ fontSize: 14 }}>Specs</span>
                     </Stack>
-                  </ViewModuleOptionsButton>
+                  </StyledIconButtonWithText>
 
                   {prop_url.support && (
-                    <ViewModuleOptionsButton
+                    <StyledIconButtonWithText
                       onClick={() => {
                         os.open(prop_url.support, {
                           target: "_blank",
@@ -221,7 +222,7 @@ function DescriptonActivity() {
                         <SupportIcon sx={{ fontSize: 14 }} />
                         <span style={{ fontSize: 14 }}>Support</span>
                       </Stack>
-                    </ViewModuleOptionsButton>
+                    </StyledIconButtonWithText>
                   )}
                 </Stack>
 
@@ -273,52 +274,4 @@ function DescriptonActivity() {
   );
 }
 
-const ViewModuleOptionsButton = styled("span")(({ theme }) => {
-  const { settings, setSettings } = useSettings();
-  const { scheme } = useTheme();
-  const shade = useShadeColor();
-
-  return {
-    height: 39,
-
-    // fontSize: "inherit",
-    display: "flex",
-    alignItems: "center",
-
-    MozBoxAlign: "center",
-    // alignItems: "center",
-    MozBoxPack: "center",
-    justifyContent: "center",
-    position: "relative",
-    boxSizing: "border-box",
-    backgroundColor: "transparent",
-    outline: "currentcolor none 0px",
-    margin: "0px",
-    cursor: "pointer",
-    userSelect: "none",
-    verticalAlign: "middle",
-    appearance: "none",
-    textDecoration: "none",
-    textAlign: "center",
-    flex: "0 0 auto",
-    fontSize: "1.5rem",
-    padding: "8px",
-    overflow: "visible",
-    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-    border: `1px solid ${theme.palette.divider}`,
-    // borderTopColor: theme.palette.divider,
-    // borderRightColor: theme.palette.divider,
-    // borderBottomColor: theme.palette.divider,
-    // borderLeftColor: theme.palette.divider,
-    color: !settings.darkmode ? "rgb(66, 66, 66)" : shade(scheme[700], -61),
-    borderRadius: theme.shape.borderRadius,
-    alignSelf: "flex-start",
-    ":hover": {
-      borderColor: theme.palette.primary.main,
-      color: theme.palette.primary.main,
-      backgroundColor: "rgba(0, 0, 0, 0.04)",
-    },
-  };
-});
-
 export default DescriptonActivity;

Website/src/activitys/SettingsActivity.tsx

@@ -59,24 +59,60 @@ function SettingsActivity() {
         </List>
 
         <Divider />
-        <List subheader={<ListSubheader sx={(theme) => ({ bgcolor: theme.palette.background.default })}>Experimental</ListSubheader>}>
+        <List subheader={<ListSubheader sx={(theme) => ({ bgcolor: theme.palette.background.default })}>Module</ListSubheader>}>
           <ListItem>
             <StyledListItemText
-              id="switch-list-__experimental_local_install"
-              primary={"Enable local install"}
-              secondary="Allows you to install local *.zip files"
+              id="switch-list-_low_quality_module"
+              primary={"Low quality modules"}
+              secondary="Shows a alert below the module if it has a low quality"
             />
             <Android12Switch
               edge="end"
               onChange={(e: any) => {
-                setSettings("__experimental_local_install", e.target.checked);
+                setSettings("_low_quality_module", e.target.checked);
               }}
-              checked={settings.__experimental_local_install}
+              checked={settings._low_quality_module}
               inputProps={{
-                "aria-labelledby": "switch-list-__experimental_local_install",
+                "aria-labelledby": "switch-list-_low_quality_module",
               }}
             />
           </ListItem>
+          <ListItem>
+            <StyledListItemText
+              id="switch-list-_disable_module_covers"
+              primary={"Disable module covers"}
+              secondary="This may increase app performance"
+            />
+            <Android12Switch
+              edge="end"
+              onChange={(e: any) => {
+                setSettings("_disable_module_covers", e.target.checked);
+              }}
+              checked={settings._disable_module_covers}
+              inputProps={{
+                "aria-labelledby": "switch-list-_disable_module_covers",
+              }}
+            />
+          </ListItem>
+          {os.isAndroid && (
+            <ListItem>
+              <StyledListItemText
+                id="switch-list-__experimental_local_install"
+                primary={"Enable local install"}
+                secondary="Allows you to install local *.zip files (Experimental)"
+              />
+              <Android12Switch
+                edge="end"
+                onChange={(e: any) => {
+                  setSettings("__experimental_local_install", e.target.checked);
+                }}
+                checked={settings.__experimental_local_install}
+                inputProps={{
+                  "aria-labelledby": "switch-list-__experimental_local_install",
+                }}
+              />
+            </ListItem>
+          )}
         </List>
 
         <Divider />

Website/src/components/ExploreModule.tsx

@@ -1,11 +1,14 @@
-import { Box, Chip, Divider, Stack, Typography } from "@mui/material";
+import { Alert, AlertTitle, Box, CardMedia, Chip, Divider, Stack, Typography } from "@mui/material";
 import { useActivity } from "@Hooks/useActivity";
 import { useStrings } from "@Hooks/useStrings";
 import DescriptonActivity from "@Activitys/DescriptonActivity";
 import { VerifiedRounded } from "@mui/icons-material";
 import { os } from "@Native/Os";
 import { StyledCard } from "./StyledCard";
+import { useLowQualityModule } from "@Hooks/useLowQualityModule";
 import { StyledIconButton } from "./StyledIconButton";
+import { useSettings } from "@Hooks/useSettings";
+import { isDesktop } from "react-device-detect";
 
 interface Props {
   index: number;
@@ -15,6 +18,7 @@ interface Props {
 export const ExploreModule = (props: Props) => {
   const { context } = useActivity();
   const { strings } = useStrings();
+  const { settings } = useSettings();
 
   const { moduleOptions, index } = props;
   const { id, notes_url, zip_url, last_update, prop_url } = props.moduleProps;
@@ -23,6 +27,8 @@ export const ExploreModule = (props: Props) => {
   const isVerified = moduleOptions[id]?.verified;
   const _display = moduleOptions[id]?.display;
 
+  const isLowQuality = useLowQualityModule(prop_url);
+
   const formatDate = (date: Date) => {
     var hours = date.getHours();
     var minutes = date.getMinutes();
@@ -60,6 +66,16 @@ export const ExploreModule = (props: Props) => {
 
   return (
     <StyledCard elevation={0}>
+      {!settings._disable_module_covers && prop_url.mmrlCover && (
+        // @ts-ignore
+        <CardMedia
+          component="img"
+          style={{ objectFit: "unset" }}
+          height={isDesktop ? "445px" : "181.500px"}
+          image={prop_url.mmrlCover}
+          alt={prop_url.name}
+        />
+      )}
       <Box sx={{ p: 2, display: "flex" }}>
         <Stack spacing={0.5} style={{ flexGrow: 1 }} onClick={handleOpen}>
           <Typography fontWeight={700} color="text.primary">
@@ -95,6 +111,12 @@ export const ExploreModule = (props: Props) => {
           )}
         </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
+        </Alert>
+      )}
     </StyledCard>
   );
 };

Website/src/components/Markdown/index.tsx

@@ -7,7 +7,22 @@ import Warnmark from "../icons/Warnmark";
 import Icon from "@mui/material/Icon";
 import Typography from "@mui/material/Typography";
 import React from "react";
-import { Box, Chip, Container, Divider, Grid, Paper, Stack } from "@mui/material";
+import {
+  Alert,
+  Box,
+  Button,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Chip,
+  Container,
+  Divider,
+  Grid,
+  Paper,
+  Stack,
+} from "@mui/material";
 import styled from "@emotion/styled";
 import hljs from "highlight.js";
 import { doc } from "googlers-tools";
@@ -28,6 +43,15 @@ const StyledDivider = styled(Divider)({
 });
 
 export const MarkdownOverrides: MarkdownToJSX.Overrides | undefined = {
+  alert: {
+    component: (props) => {
+      return (
+        <Alert severity={props.info ? "info" : props.warning ? "warning" : props.error ? "error" : props.success ? "success" : "info"}>
+          {props.children}
+        </Alert>
+      );
+    },
+  },
   a: {
     component: Anchor,
   },
@@ -66,7 +90,7 @@ export const MarkdownOverrides: MarkdownToJSX.Overrides | undefined = {
       return <Icon {...props}>{props.i}</Icon>;
     },
   },
-  typography: {
+  p: {
     component: Typography,
   },
   checkmark: {