feat: remove cqmin system (#2407)
* feat: remove cqmin system * fix: improve weather widget --------- Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Manuel
@@ -4,6 +4,7 @@ import { ActionIcon, Anchor, Avatar, Badge, Card, Group, Image, ScrollArea, Stac
|
||||
import { IconThumbDown, IconThumbUp } from "@tabler/icons-react";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
import { useRequiredBoard } from "@homarr/boards/context";
|
||||
import { MediaAvailability, MediaRequestStatus } from "@homarr/integrations/types";
|
||||
import type { ScopedTranslationFunction } from "@homarr/translation";
|
||||
import { useScopedI18n } from "@homarr/translation/client";
|
||||
@@ -54,23 +55,23 @@ export default function MediaServerWidget({
|
||||
);
|
||||
|
||||
const { mutate: mutateRequestAnswer } = clientApi.widget.mediaRequests.answerRequest.useMutation();
|
||||
const board = useRequiredBoard();
|
||||
|
||||
if (mediaRequests.length === 0) throw new NoIntegrationDataError();
|
||||
|
||||
return (
|
||||
<ScrollArea
|
||||
className="mediaRequests-list-scrollArea"
|
||||
scrollbarSize="2cqmin"
|
||||
scrollbarSize="md"
|
||||
style={{ pointerEvents: isEditMode ? "none" : undefined }}
|
||||
>
|
||||
<Stack className="mediaRequests-list-list" gap="2cqmin" p="2cqmin">
|
||||
<Stack className="mediaRequests-list-list" gap="sm" p="sm">
|
||||
{mediaRequests.map((mediaRequest) => (
|
||||
<Card
|
||||
className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${mediaRequest.type} mediaRequests-list-item-${mediaRequest.status}`}
|
||||
key={`${mediaRequest.integrationId}-${mediaRequest.id}`}
|
||||
h="20cqmin"
|
||||
radius="2cqmin"
|
||||
p="2cqmin"
|
||||
radius={board.itemRadius}
|
||||
p="sm"
|
||||
withBorder
|
||||
>
|
||||
<Image
|
||||
@@ -93,28 +94,24 @@ export default function MediaServerWidget({
|
||||
wrap="nowrap"
|
||||
gap={0}
|
||||
>
|
||||
<Group className="mediaRequests-list-item-left-side" h="100%" gap="4cqmin" wrap="nowrap" flex={1}>
|
||||
<Group className="mediaRequests-list-item-left-side" h="100%" gap="md" wrap="nowrap" flex={1}>
|
||||
<Image
|
||||
className="mediaRequests-list-item-poster"
|
||||
src={mediaRequest.posterImagePath}
|
||||
h="100%"
|
||||
w="10cqmin"
|
||||
radius="1cqmin"
|
||||
h={60}
|
||||
w="auto"
|
||||
radius={"md"}
|
||||
/>
|
||||
<Stack className="mediaRequests-list-item-media-infos" gap="1cqmin">
|
||||
<Group className="mediaRequests-list-item-info-first-line" gap="2cqmin" wrap="nowrap">
|
||||
<Text className="mediaRequests-list-item-media-year" size="3.5cqmin" pt="0.75cqmin">
|
||||
<Stack className="mediaRequests-list-item-media-infos" gap={0}>
|
||||
<Group className="mediaRequests-list-item-info-first-line" gap="sm" align={"end"} wrap="nowrap">
|
||||
<Text className="mediaRequests-list-item-media-year" size="md" pt="xs">
|
||||
{mediaRequest.airDate?.getFullYear() ?? t("toBeDetermined")}
|
||||
</Text>
|
||||
<Badge
|
||||
className="mediaRequests-list-item-media-status"
|
||||
color={getAvailabilityProperties(mediaRequest.availability, t).color}
|
||||
variant="light"
|
||||
fz="3.5cqmin"
|
||||
lh="4cqmin"
|
||||
size="5cqmin"
|
||||
pt="0.75cqmin"
|
||||
px="2cqmin"
|
||||
size="md"
|
||||
>
|
||||
{getAvailabilityProperties(mediaRequest.availability, t).label}
|
||||
</Badge>
|
||||
@@ -124,26 +121,27 @@ export default function MediaServerWidget({
|
||||
href={mediaRequest.href}
|
||||
c="var(--mantine-color-text)"
|
||||
target={options.linksTargetNewTab ? "_blank" : "_self"}
|
||||
fz="5cqmin"
|
||||
fz="md"
|
||||
fw={"bold"}
|
||||
lineClamp={1}
|
||||
>
|
||||
{mediaRequest.name || "unknown"}
|
||||
</Anchor>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Stack className="mediaRequests-list-item-right-side" gap="1cqmin" align="end">
|
||||
<Group className="mediaRequests-list-item-request-user" gap="2cqmin" wrap="nowrap">
|
||||
<Stack className="mediaRequests-list-item-right-side" gap="xs" ms={"lg"} align="end">
|
||||
<Group className="mediaRequests-list-item-request-user" gap="sm" wrap="nowrap">
|
||||
<Avatar
|
||||
className="mediaRequests-list-item-request-user-avatar"
|
||||
src={mediaRequest.requestedBy?.avatar}
|
||||
size="6cqmin"
|
||||
size="sm"
|
||||
/>
|
||||
<Anchor
|
||||
className="mediaRequests-list-item-request-user-name"
|
||||
href={mediaRequest.requestedBy?.link}
|
||||
c="var(--mantine-color-text)"
|
||||
target={options.linksTargetNewTab ? "_blank" : "_self"}
|
||||
fz="5cqmin"
|
||||
fz="md"
|
||||
lineClamp={1}
|
||||
style={{ wordBreak: "break-all" }}
|
||||
>
|
||||
@@ -151,13 +149,14 @@ export default function MediaServerWidget({
|
||||
</Anchor>
|
||||
</Group>
|
||||
{mediaRequest.status === MediaRequestStatus.PendingApproval ? (
|
||||
<Group className="mediaRequests-list-item-pending-buttons" gap="2cqmin">
|
||||
<Group className="mediaRequests-list-item-pending-buttons" gap="sm">
|
||||
<Tooltip label={t("pending.approve")}>
|
||||
<ActionIcon
|
||||
className="mediaRequests-list-item-pending-button-approve"
|
||||
variant="light"
|
||||
color="green"
|
||||
size="5cqmin"
|
||||
size="md"
|
||||
radius={"md"}
|
||||
onClick={() => {
|
||||
mutateRequestAnswer({
|
||||
integrationId: mediaRequest.integrationId,
|
||||
@@ -166,7 +165,7 @@ export default function MediaServerWidget({
|
||||
});
|
||||
}}
|
||||
>
|
||||
<IconThumbUp size="4cqmin" />
|
||||
<IconThumbUp size={23} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={t("pending.decline")}>
|
||||
@@ -174,7 +173,8 @@ export default function MediaServerWidget({
|
||||
className="mediaRequests-list-item-pending-button-decline"
|
||||
variant="light"
|
||||
color="red"
|
||||
size="5cqmin"
|
||||
size="md"
|
||||
radius={"md"}
|
||||
onClick={() => {
|
||||
mutateRequestAnswer({
|
||||
integrationId: mediaRequest.integrationId,
|
||||
@@ -183,7 +183,7 @@ export default function MediaServerWidget({
|
||||
});
|
||||
}}
|
||||
>
|
||||
<IconThumbDown size="4cqmin" />
|
||||
<IconThumbDown size={23} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
|
||||
Reference in New Issue
Block a user