Draft: Content rating

backend/app/utils.py

@@ -1,4 +1,5 @@
 import base64
+import ctypes
 import gzip
 import hashlib
 import json
@@ -21,6 +22,8 @@
 clean_id_re = re.compile("[^a-zA-Z0-9_-]+")
 remove_desktop_re = re.compile(r"\.desktop$")
 
+MAXUINT = ctypes.c_uint(-1).value
+
 
 class Hasher:
     """
@@ -392,9 +395,52 @@ def appstream2dict(appstream_url=None) -> dict[str, dict]:
         app["id"] = appid
         apps[appid] = app
 
+        if "content_rating" in app:
+            print(get_content_rating_details(app["content_rating"], "de_DE"))
+
     return apps
 
 
+def get_content_rating_details(content_rating: dict, locale: str) -> dict:
+    if content_rating is None or content_rating.get("type") is None:
+        return {}
+    system = AppStream.ContentRatingSystem.from_locale(locale)
+    rating = AppStream.ContentRating()
+
+    rating.set_kind(content_rating["type"])
+    contentRatingResult = {}
+
+    for attr, level in content_rating.items():
+        if attr == "type" or level is None:
+            continue
+        c_level = AppStream.ContentRatingValue.from_string(level)
+        rating.add_attribute(attr, c_level)
+        description = AppStream.ContentRating.attribute_get_description(attr, c_level)
+        contentRatingResult["details"] = {
+            "id": attr,
+            "level": level,
+            "description": description,
+        }
+
+    min_age = AppStream.ContentRating.get_minimum_age(rating)
+    # Maxint is used for no details available
+    if min_age == MAXUINT:
+        contentRatingResult["minimumAge"] = None
+        contentRatingResult["contentRatingSystem"] = (
+            AppStream.ContentRatingSystem.to_string(system)
+        )
+    else:
+        contentRatingResult["minimumAge"] = AppStream.ContentRatingSystem.format_age(
+            system, min_age
+        )
+        contentRatingResult["contentRatingSystem"] = (
+            AppStream.ContentRatingSystem.to_string(system)
+        )
+
+    print("details", contentRatingResult)
+    return contentRatingResult
+
+
 def get_clean_app_id(app_id: str):
     return re.sub(clean_id_re, "_", app_id)
 

frontend/src/components/application/ContentRating.tsx

@@ -0,0 +1,105 @@
+import clsx from "clsx"
+import { useTranslation } from "next-i18next"
+import { FunctionComponent, createElement, useState } from "react"
+import {
+  getContentRating,
+  contentRatingToColor,
+  contentRatingToIcon,
+} from "src/contentRating"
+import {
+  Appstream,
+  ContentRatingAttribute,
+  ContentRatingLevel,
+} from "src/types/Appstream"
+import { StackedListBox } from "./StackedListBox"
+import Modal from "../Modal"
+
+interface Props {
+  data: Appstream
+  summary: Summary
+}
+
+const ContentRatingIcon = ({
+  attr,
+  level,
+}: {
+  attr: ContentRatingAttribute
+  level: ContentRatingLevel
+}) => {
+  return (
+    <div
+      className={clsx(
+        size === "small" ? "h-10 w-10" : "h-16 w-16",
+        "rounded-full p-2",
+        contentRatingToColor(level),
+      )}
+    >
+      {icon
+        ? createElement(icon, {
+            className: "w-full h-full",
+          })
+        : contentRatingToIcon(attr)}
+    </div>
+  )
+}
+
+const ContentRating: FunctionComponent<Props> = ({ data }) => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const contentRating = getContentRating(data)
+
+  return (
+    <>
+      <button
+        className={clsx(
+          "flex w-full flex-col items-center gap-1 p-4 duration-500 hover:bg-flathub-gainsborow/20 justify-center",
+          "active:bg-flathub-gainsborow/40 active:shadow-sm hover:dark:bg-flathub-dark-gunmetal/20 active:dark:bg-flathub-arsenic",
+          "text-flathub-arsenic dark:text-flathub-gainsborow",
+        )}
+        onClick={() => setIsOpen(true)}
+      >
+        <div className="text-lg font-bold">
+          {contentRating.minimumAge}
+        </div>
+      </button>
+
+      <Modal
+        shown={isOpen}
+        centerTitle
+        onClose={() => setIsOpen(false)}
+        aboveTitle={
+          <div className="flex flex-col items-center pb-2">
+            {minimumAgeFormatted}
+          </div>
+        }
+      >
+        <>
+          <div className="w-full">
+            <StackedListBox
+              items={contentRating.attrs
+                .map(
+                  (
+                    {
+                      attr,
+                      level,
+                      description,
+                    },
+                    i,
+                  ) => ({
+                    id: i,
+                    header: description,
+                    icon: (
+                      <ContentRatingIcon attr={attr} level={level} />
+                    ),
+                  }),
+                )}
+            />
+          </div>
+        </>
+      </Modal>
+    </>
+  )
+}
+
+export default ContentRating

frontend/src/components/application/Details.tsx

@@ -26,6 +26,7 @@ import {
 } from "src/meilisearch"
 import Tags from "./Tags"
 import SafetyRating from "./SafetyRating"
+import ContentRating from "./ContentRating"
 import "yet-another-react-lightbox/plugins/captions.css"
 import { CarouselStrip } from "./CarouselStrip"
 import { useQuery } from "@tanstack/react-query"
@@ -108,6 +109,12 @@ const Details: FunctionComponent<Props> = ({
 
     const children = [<LicenseInfo key={"license-info"} app={app} />]
 
+    if (contentRating !== null) {
+      children.unshift(
+        <ContentRating key={"content-rating"} data={app} summary={summary} />,
+      )
+    }
+
     if (summary !== null && summary.metadata !== null) {
       children.unshift(
         <SafetyRating key={"safety-rating"} data={app} summary={summary} />,

frontend/src/components/application/HorizontalStackedListBox.tsx

@@ -12,9 +12,9 @@ export const HorizontalStackedListBox = ({
   return (
     <ul
       className={clsx(
-        "flex flex-col sm:flex-row rounded-xl flex-grow",
+        "flex flex-col md:flex-row rounded-xl flex-grow",
         "shadow-md dark:bg-flathub-arsenic dark:divide-flathub-dark-gunmetal",
-        "sm:divide-x-2 sm:divide-y-0 divide-y-2",
+        "md:divide-x-2 md:divide-y-0 divide-y-2",
       )}
     >
       {Array.isArray(children) ? (

frontend/src/contentRating.ts

@@ -0,0 +1,46 @@
+import { FaGun } from "react-icons/fa6";
+import {
+  Appstream,
+  ContentRatingAttribute,
+  ContentRatingLevel,
+} from "src/types/Appstream"
+
+interface ContentRatingDetails {
+  minimumAge: string
+  attrs: ContentRatingDetailsItem[]
+}
+
+interface ContentRatingDetailsItem {
+  attr: ContentRatingAttribute
+  level: ContentRatingLevel
+  description: string
+}
+
+export async function getContentRating(data: Appstream): Promise<ContentRatingDisplay> {
+  // TODO
+}
+
+export function contentRatingToColor(level: ContentRatingLevel): string {
+  switch (level) {
+    case ContentRatingLevel.none:
+      return `text-flathub-status-green bg-flathub-status-green/25 dark:bg-flathub-status-green-dark/25 dark:text-flathub-status-green-dark`
+    case ContentRatingLevel.mild:
+      return `text-flathub-status-yellow bg-flathub-status-yellow/25 dark:bg-flathub-status-yellow-dark/25 dark:text-flathub-status-yellow-dark`
+    case ContentRatingLevel.moderate:
+      return `text-flathub-status-orange bg-flathub-status-orange/25 dark:bg-flathub-status-orange-dark/25 dark:text-flathub-status-orange-dark`
+    case ContentRatingLevel.intense:
+      return `text-flathub-status-red bg-flathub-status-red/25 dark:bg-flathub-status-red-dark/25 dark:text-flathub-status-red-dark`
+    case ContentRatingLevel.unknown:
+      // TODO
+      return ''
+  }
+}
+
+export function contentRatingToIcon(attr: ContentRatingAttribute): JSX.Element {
+  // TODO
+  switch (attr) {
+    default:
+      return React.createElement(FaGun, {
+        className: "w-full h-full",
+      })
+}

frontend/src/types/Appstream.ts

@@ -94,7 +94,36 @@ interface ContentRating {
   "money-gambling": ContentRatingLevel
 }
 
-type ContentRatingLevel = "none" | "mild" | "moderate" | "intense"
+export type ContentRatingLevel = "none" | "mild" | "moderate" | "intense"
+
+export type ContentRatingAttribute =
+  | "violence-cartoon"
+  | "violence-fantasy"
+  | "violence-realistic"
+  | "violence-bloodshed"
+  | "violence-sexual"
+  | "violence-desecration"
+  | "violence-slavery"
+  | "violence-worship"
+  | "drugs-alcohol"
+  | "drugs-narcotics"
+  | "drugs-tobacco"
+  | "sex-nudity"
+  | "sex-themes"
+  | "sex-homosexuality"
+  | "sex-prostitution"
+  | "sex-adultery"
+  | "sex-appearance"
+  | "language-profanity"
+  | "language-humor"
+  | "language-discrimination"
+  | "social-chat"
+  | "social-info"
+  | "social-audio"
+  | "social-location"
+  | "social-contacts"
+  | "money-purchasing"
+  | "money-gambling"
 
 export interface Urls {
   bugtracker: string