@allurereport/web-awesome 3.0.0-beta.9 → 3.0.0

package/src/components/TestResult/TestResultError/styles.scss

@@ -1,51 +0,0 @@
-.test-result-error {
-  padding: 8px 8px 12px 16px;
-  background-color: var(--bg-alpha-capella);
-  border-radius: 8px;
-  position: relative;
-  overflow: hidden;
-
-  &:before {
-    content: "";
-    display: block;
-    height: 100%;
-    width: 2px;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: var(--on-support-capella);
-  }
-}
-
-.test-result-error-header {
-  display: flex;
-  gap: 4px;
-  justify-content: space-between;
-}
-
-.test-result-error-text {
-  margin-bottom: 8px;
-  padding-left: 8px;
-  color: var(--on-support-capella);
-}
-
-.test-result-error-trace {
-  margin-top: 8px;
-  padding-left: 8px;
-
-  pre {
-    overflow: scroll;
-    padding-bottom: 24px;
-  }
-}
-
-.test-result-error-message {
-  padding: 8px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 300ms;
-
-  &:hover {
-    background: var(--bg-alpha-capella);
-  }
-}

package/src/components/TestResult/TestResultHeader/index.tsx

@@ -1,55 +0,0 @@
-import { IconButton, allureIcons } from "@allurereport/web-components";
-import { SvgIcon } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
-import clsx from "clsx";
-import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
-import { LanguagePicker } from "@/components/LanguagePicker";
-import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
-import { navigateTo } from "@/index";
-import * as styles from "./styles.scss";
-
-export type TestResultHeaderProps = {
-  testResult?: AllureAwesomeTestResult;
-};
-
-export const TestResultHeader: FunctionalComponent<TestResultHeaderProps> = ({ testResult }) => {
-  const { breadcrumbs, name } = testResult || {};
-
-  return (
-    <div className={styles.above}>
-      <div className={styles["test-result-breadcrumbs"]}>
-        <div className={clsx(styles["test-result-breadcrumb"], styles["test-result-home"])}>
-          <IconButton
-            icon={allureIcons.lineGeneralHomeLine}
-            size={"s"}
-            style={"ghost"}
-            className={styles["test-result-breadcrumb-link"]}
-            onClick={() => navigateTo("/")}
-          />
-        </div>
-        {Boolean(breadcrumbs?.length) &&
-          breadcrumbs?.[0]?.map((item, key) => {
-            return (
-              <div className={styles["test-result-breadcrumb"]} key={key}>
-                <SvgIcon id={allureIcons.lineArrowsChevronDown} className={styles["test-result-breadcrumb-arrow"]} />
-                <Text size={"s"} bold className={styles["test-result-breadcrumb-title"]}>
-                  {item}
-                </Text>
-              </div>
-            );
-          })}
-        <div className={styles["test-result-breadcrumb"]}>
-          {name && (
-            <SvgIcon id={allureIcons.lineArrowsChevronDown} className={styles["test-result-breadcrumb-arrow"]} />
-          )}
-          <Text size={"s"} bold className={styles["test-result-breadcrumb-title"]}>
-            {name}
-          </Text>
-        </div>
-      </div>
-      <LanguagePicker />
-      <ThemeButton />
-    </div>
-  );
-};

package/src/components/TestResult/TestResultHistory/TestResultHistoryItem.tsx

@@ -1,67 +0,0 @@
-import { type HistoryTestResult, formatDuration } from "@allurereport/core-api";
-import { IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
-import { type FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
-import { ArrowButton } from "@/components/ArrowButton";
-import { TestResultError } from "@/components/TestResult/TestResultError";
-import * as styles from "@/components/TestResult/TestResultHistory/styles.scss";
-import TreeItemIcon from "@/components/Tree/TreeItemIcon";
-import { navigateTo, openInNewTab } from "@/index";
-import { useI18n } from "@/stores";
-import { timestampToDate } from "@/utils/time";
-
-export const TestResultHistoryItem: FunctionalComponent<{
-  testResultItem: HistoryTestResult;
-}> = ({ testResultItem }: { testResultItem: HistoryTestResult }) => {
-  const { status, error, stop, duration, id } = testResultItem;
-  const [isOpened, setIsOpen] = useState(false);
-  const convertedStop = timestampToDate(stop);
-  const formattedDuration = formatDuration(duration as number);
-  const { t } = useI18n("controls");
-
-  const navigateUrl = `/testresult/${id}`;
-
-  return (
-    <div>
-      <div className={styles["test-result-history-item-header"]}>
-        {Boolean(error) && (
-          <span onClick={() => setIsOpen(!isOpened)}>
-            <ArrowButton isOpened={isOpened} icon={allureIcons.arrowsChevronDown} />
-          </span>
-        )}
-        <div
-          className={styles["test-result-history-item-wrap"]}
-          onClick={(e) => {
-            e.stopPropagation();
-            navigateTo(navigateUrl);
-          }}
-        >
-          <TreeItemIcon status={status} className={styles["test-result-history-item-status"]} />
-          <Text className={styles["test-result-history-item-text"]}>{convertedStop}</Text>
-          <div className={styles["test-result-history-item-info"]}>
-            <Text type="ui" size={"s"} className={styles["item-time"]}>
-              {formattedDuration}
-            </Text>
-            <TooltipWrapper tooltipText={t("openInNewTab")}>
-              <IconButton
-                icon={allureIcons.lineGeneralLinkExternal}
-                style={"ghost"}
-                size={"s"}
-                className={styles["test-result-history-item-link"]}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  openInNewTab(navigateUrl);
-                }}
-              />
-            </TooltipWrapper>
-          </div>
-        </div>
-      </div>
-      {isOpened && error && (
-        <div>
-          <TestResultError {...error} />
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/TestResult/TestResultHistory/index.tsx

@@ -1,26 +0,0 @@
-import type { FunctionalComponent } from "preact";
-import { TestResultHistoryItem } from "@/components/TestResult/TestResultHistory/TestResultHistoryItem";
-import { useI18n } from "@/stores";
-import { type AllureAwesomeTestResult } from "../../../../types";
-import * as styles from "./styles.scss";
-
-export type TestResultHistoryViewProps = {
-  testResult?: AllureAwesomeTestResult;
-};
-
-const TestResultHistoryView: FunctionalComponent<TestResultHistoryViewProps> = ({ testResult }) => {
-  const { history } = testResult ?? {};
-  const { t } = useI18n("empty");
-
-  return (
-    <div className={styles["test-result-history"]}>
-      {history.length ? (
-        history?.map((item, key) => <TestResultHistoryItem testResultItem={item} key={key} />)
-      ) : (
-        <div className={styles["test-result-empty"]}>{t("no-history-results")}</div>
-      )}
-    </div>
-  );
-};
-
-export default TestResultHistoryView;

package/src/components/TestResult/TestResultInfo/index.tsx

@@ -1,79 +0,0 @@
-import { formatDuration } from "@allurereport/core-api";
-import { Counter, Heading, Text, TooltipWrapper } from "@allurereport/web-components";
-import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
-import { TestResultInfoStatuses } from "@/components/TestResult/TestResultInfo/TestResultInfoStatuses";
-import { TestResultNavigation } from "@/components/TestResult/TestResultNavigation";
-import { TestResultPrevStatuses } from "@/components/TestResult/TestResultPrevStatuses";
-import { TestResultSeverity } from "@/components/TestResult/TestResultSeverity";
-import { TestResultStatus } from "@/components/TestResult/TestResultStatus";
-import { TestResultTab, TestResultTabsList } from "@/components/TestResult/TestResultTabs";
-import { useI18n } from "@/stores/locale";
-import { timestampToDate } from "@/utils/time";
-import * as styles from "./styles.scss";
-
-export type TestResultInfoProps = {
-  testResult?: AllureAwesomeTestResult;
-};
-
-export const TestResultInfo: FunctionalComponent<TestResultInfoProps> = ({ testResult }) => {
-  const { name, status, muted, flaky, known, duration, labels, history, retries, attachments, stop } = testResult ?? {};
-  const formattedDuration = formatDuration(duration as number);
-  const fullDate = stop && timestampToDate(stop);
-  const severity = labels?.find((label) => label.name === "severity")?.value ?? "normal";
-  const { t } = useI18n("ui");
-  const statuses = Object.entries({ flaky, muted, known }).filter(([, value]) => value);
-
-  const Content = () => {
-    return (
-      <>
-        {name && (
-          <Heading data-testid="test-result-info-title" tag={"h1"} size={"s"} className={styles["test-result-name"]}>
-            {name}
-          </Heading>
-        )}
-        <div className={styles["test-result-info-data"]}>
-          {Boolean(status) && <TestResultStatus status={status} />}
-          {Boolean(history?.length) && <TestResultPrevStatuses history={history} />}
-          <TestResultSeverity severity={severity} />
-          {Boolean(statuses.length) && <TestResultInfoStatuses statuses={statuses} />}
-          <TooltipWrapper tooltipText={fullDate}>
-            <Text tag={"div"} size={"s"} bold className={styles["test-result-duration"]}>
-              {formattedDuration}
-            </Text>
-          </TooltipWrapper>
-        </div>
-        <div className={styles["test-result-tabs"]}>
-          <TestResultTabsList>
-            <TestResultTab id="overview">{t("overview")}</TestResultTab>
-            <TestResultTab id="history" disabled={!history?.length}>
-              <div className={styles["test-result-tab"]}>
-                {t("history")}
-                {Boolean(history?.length) && <Counter size={"s"} count={history?.length} />}
-              </div>
-            </TestResultTab>
-            <TestResultTab id="retries" disabled={!retries?.length}>
-              <div className={styles["test-result-tab"]}>
-                {t("retries")}
-                {Boolean(retries?.length) && <Counter size={"s"} count={retries?.length} />}
-              </div>
-            </TestResultTab>
-            <TestResultTab id="attachments" disabled={!attachments?.length}>
-              <div className={styles["test-result-tab"]}>
-                {t("attachments")}
-                {Boolean(attachments?.length) && <Counter size={"s"} count={attachments?.length} />}
-              </div>
-            </TestResultTab>
-          </TestResultTabsList>
-        </div>
-      </>
-    );
-  };
-
-  return (
-    <div className={styles["test-result-info"]}>
-      <TestResultNavigation testResult={testResult} />
-      {testResult && <Content />}
-    </div>
-  );
-};

package/src/components/TestResult/TestResultOverview.tsx

@@ -1,43 +0,0 @@
-import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
-import * as styles from "@/components/BaseLayout/styles.scss";
-import { TestResultDescription } from "@/components/TestResult/TestResultDescription";
-import { TestResultError } from "@/components/TestResult/TestResultError";
-import { TestResultLinks } from "@/components/TestResult/TestResultLinks";
-import { TestResultMetadata } from "@/components/TestResult/TestResultMetadata";
-import { TestResultParameters } from "@/components/TestResult/TestResultParameters";
-import { TestResultSetup } from "@/components/TestResult/TestResultSetup";
-import { TestResultSteps } from "@/components/TestResult/TestResultSteps";
-import { TestResultTeardown } from "@/components/TestResult/TestResultTeardown";
-import TestStepsEmpty from "@/components/TestResult/TestStepsEmpty";
-
-export type TestResultOverviewProps = {
-  testResult?: AllureAwesomeTestResult;
-};
-
-export const TestResultOverview: FunctionalComponent<TestResultOverviewProps> = ({ testResult }) => {
-  const { error, parameters, groupedLabels, links, description, setup, steps, teardown, id } = testResult || {};
-  const isNoSteps = !setup?.length && !steps.length && !teardown.length;
-
-  return (
-    <>
-      {Boolean(error?.message) && (
-        <div className={styles["test-result-errors"]}>
-          <TestResultError {...error} />
-        </div>
-      )}
-      {Boolean(parameters?.length) && <TestResultParameters parameters={parameters} />}
-      {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && (
-        <TestResultMetadata testResult={testResult} />
-      )}
-      {Boolean(links?.length) && <TestResultLinks links={links} />}
-      {Boolean(description) && <TestResultDescription description={description} />}
-      <div className={styles["test-results"]}>
-        {isNoSteps && <TestStepsEmpty />}
-        {Boolean(setup?.length) && <TestResultSetup id={id} setup={setup} />}
-        {Boolean(steps?.length) && <TestResultSteps id={id} steps={steps} />}
-        {Boolean(teardown?.length) && <TestResultTeardown id={id} teardown={teardown} />}
-      </div>
-    </>
-  );
-};

package/src/components/TestResult/TestResultPrevStatuses/index.tsx

@@ -1,49 +0,0 @@
-import { type HistoryTestResult } from "@allurereport/core-api";
-import { SvgIcon, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
-import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
-import { navigateTo } from "@/index";
-import { useI18n } from "@/stores";
-import { capitalize } from "@/utils/capitalize";
-import { timestampToDate } from "@/utils/time";
-import * as styles from "./styles.scss";
-
-const TestResultPrevStatus: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
-  return (
-    <div className={styles["test-result-prev-status"]} onClick={() => navigateTo(`testresult/${item.id}`)}>
-      <SvgIcon id={allureIcons.lineShapesDotCircle} className={styles[`status-${item?.status}`]} />
-    </div>
-  );
-};
-const TestResultPrevStatusTooltip: FunctionalComponent<{ item: HistoryTestResult }> = ({ item }) => {
-  const convertedStop = item.stop && timestampToDate(item.stop);
-  const { t } = useI18n("statuses");
-  const status = t(item.status);
-
-  return (
-    <div className={styles["test-result-prev-status-tooltip"]}>
-      <Text tag={"div"} size={"m"} bold>
-        {capitalize(status)}
-      </Text>
-      <Text size={"m"}>{convertedStop}</Text>
-    </div>
-  );
-};
-
-export type TestResultPrevStatusesProps = {
-  history: AllureAwesomeTestResult["history"];
-};
-
-export const TestResultPrevStatuses: FunctionalComponent<TestResultPrevStatusesProps> = ({ history }) => {
-  return (
-    <div className={styles["test-result-prev-statuses"]}>
-      {history?.slice(0, 6).map((item, key) => (
-        <div key={key} className={styles["test-result-prev-status"]}>
-          <TooltipWrapper key={key} tooltipComponent={<TestResultPrevStatusTooltip item={item} />}>
-            <TestResultPrevStatus item={item} />
-          </TooltipWrapper>
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/components/TestResult/TestResultRetriesView/TestResultRetriesItem.tsx

@@ -1,52 +0,0 @@
-import { formatDuration } from "@allurereport/core-api";
-import { IconButton, Text, allureIcons } from "@allurereport/web-components";
-import type { FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
-import type { AllureAwesomeTestResult } from "types";
-import { ArrowButton } from "@/components/ArrowButton";
-import { TestResultError } from "@/components/TestResult/TestResultError";
-import * as styles from "@/components/TestResult/TestResultRetriesView/styles.scss";
-import TreeItemIcon from "@/components/Tree/TreeItemIcon";
-import { navigateTo } from "@/index";
-import { timestampToDate } from "@/utils/time";
-
-export const TestResultRetriesItem: FunctionalComponent<{
-  testResultItem: AllureAwesomeTestResult;
-}> = ({ testResultItem }) => {
-  const { id, status, error, stop, duration } = testResultItem;
-  const [isOpened, setIsOpen] = useState(false);
-  const convertedStop = timestampToDate(stop);
-  const formattedDuration = typeof duration === "number" ? formatDuration(duration as number) : undefined;
-  const navigateUrl = `/testresult/${id}`;
-
-  return (
-    <div>
-      <div className={styles["test-result-retries-item-header"]} onClick={() => setIsOpen(!isOpened)}>
-        {Boolean(error) && <ArrowButton isOpened={isOpened} icon={allureIcons.lineArrowsChevronDown} />}
-        <div className={styles["test-result-retries-item-wrap"]}>
-          <TreeItemIcon status={status} className={styles["test-result-retries-item-status"]} />
-          <Text className={styles["test-result-retries-item-text"]}>{convertedStop}</Text>
-          <div className={styles["test-result-retries-item-info"]}>
-            {Boolean(formattedDuration) && (
-              <Text type="ui" size={"s"} className={styles["item-time"]}>
-                {formattedDuration}
-              </Text>
-            )}
-            <IconButton
-              icon={allureIcons.lineGeneralLinkExternal}
-              style={"ghost"}
-              size={"s"}
-              className={styles["test-result-retries-item-link"]}
-              onClick={() => navigateTo(navigateUrl)}
-            />
-          </div>
-        </div>
-      </div>
-      {isOpened && error && (
-        <div className={styles["test-result-retries-item-content"]}>
-          <TestResultError {...error} />
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/TestResult/TestResultRetriesView/index.tsx

@@ -1,24 +0,0 @@
-import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
-import * as styles from "@/components/TestResult/TestResultHistory/styles.scss";
-import { TestResultRetriesItem } from "@/components/TestResult/TestResultRetriesView/TestResultRetriesItem";
-import { useI18n } from "@/stores";
-
-export const TestResultRetriesView: FunctionalComponent<{
-  testResult: AllureAwesomeTestResult;
-}> = ({ testResult }) => {
-  const { retries } = testResult ?? {};
-  const { t } = useI18n("empty");
-
-  return (
-    <div className={styles["test-result-history"]}>
-      {retries.length ? (
-        retries?.map((item, key) => (
-          <TestResultRetriesItem testResultItem={item as unknown as AllureAwesomeTestResult} key={key} />
-        ))
-      ) : (
-        <div className={styles["test-result-empty"]}>{t("no-retries-results")}</div>
-      )}
-    </div>
-  );
-};

package/src/components/TestResult/TestResultSteps/HtmlAttachmentPreview.tsx

@@ -1,12 +0,0 @@
-import type { FunctionalComponent } from "preact";
-import * as styles from "./styles.scss";
-
-// TODO: use proper type here
-export type HtmlAttachmentPreviewProps = {
-  attachment: { text: string };
-};
-
-export const HtmlAttachmentPreview: FunctionalComponent<HtmlAttachmentPreviewProps> = ({ attachment }) => {
-  // eslint-disable-next-line react/no-danger
-  return <div className={styles["html-attachment-preview"]} dangerouslySetInnerHTML={{ __html: attachment?.text }} />;
-};

package/src/components/TestResult/TestResultSteps/attachment.tsx

@@ -1,68 +0,0 @@
-import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import { Spinner } from "@allurereport/web-components";
-import type { FunctionalComponent } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import { modalData } from "@/components/Modal";
-import { HtmlAttachmentPreview } from "@/components/TestResult/TestResultSteps/HtmlAttachmentPreview";
-import { AttachmentCode } from "@/components/TestResult/TestResultSteps/attachmentCode";
-import { AttachmentImage } from "@/components/TestResult/TestResultSteps/attachmentImage";
-import { AttachmentVideo } from "@/components/TestResult/TestResultSteps/attachmentVideo";
-import { EmptyComponent } from "@/components/TestResult/TestResultSteps/wrongAttachment";
-import { type Attachments, attachmentType, fetchAttachment } from "@/utils/attachments";
-import * as styles from "./styles.scss";
-
-const componentsByAttachmentType: Record<string, any> = {
-  image: AttachmentImage,
-  svg: AttachmentImage,
-  json: AttachmentCode,
-  code: AttachmentCode,
-  uri: AttachmentCode,
-  css: AttachmentCode,
-  table: AttachmentCode,
-  html: AttachmentCode,
-  text: AttachmentCode,
-  video: AttachmentVideo,
-};
-const previewComponentsByAttachmentType: Record<string, any> = {
-  html: HtmlAttachmentPreview,
-};
-
-export interface AttachmentTestStepResultProps {
-  item: AttachmentTestStepResult;
-  previewable?: boolean;
-}
-
-export const Attachment: FunctionalComponent<AttachmentTestStepResultProps> = ({ item, previewable }) => {
-  const {
-    link: { contentType, id, ext },
-  } = item;
-  const [attachment, setAttachment] = useState<Attachments>(null);
-  const [loaded, setLoaded] = useState(false);
-  const attachmentComponent = attachmentType(contentType);
-  const CurrentComponent = componentsByAttachmentType[attachmentComponent.type];
-  const CurrentPreviewComponent = previewComponentsByAttachmentType[attachmentComponent.type];
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const result: Attachments = await fetchAttachment(id, ext, contentType);
-      setLoaded(true);
-      setAttachment(result);
-    };
-    fetchData();
-  }, [contentType, id, ext]);
-
-  if (!loaded) {
-    return (
-      <div className={styles["test-result-spinner"]}>
-        <Spinner />
-      </div>
-    );
-  }
-
-  // temp solution before modal component refactoring
-  if (CurrentPreviewComponent && previewable && modalData.value.preview) {
-    return <CurrentPreviewComponent attachment={attachment} item={item} />;
-  }
-
-  return CurrentComponent ? <CurrentComponent attachment={attachment} item={item} /> : <EmptyComponent />;
-};

package/src/components/TestResult/TestResultSteps/attachmentCode.tsx

@@ -1,20 +0,0 @@
-import { type AttachmentTestStepResult } from "@allurereport/core-api";
-import { type FunctionalComponent } from "preact";
-import { useEffect } from "preact/hooks";
-import Prism from "prismjs";
-import "@/assets/scss/code.scss";
-
-export const AttachmentCode: FunctionalComponent<{
-  item: AttachmentTestStepResult;
-  attachment: { text?: string };
-}> = ({ attachment, item }) => {
-  useEffect(() => {
-    Prism.highlightAll();
-  }, [attachment]);
-
-  return (
-    <pre key={item?.link?.id} className={`language-${item?.link?.ext?.replace(".", "")} line-numbers`}>
-      <code>{attachment?.text}</code>
-    </pre>
-  );
-};

package/src/components/TestResult/TestResultSteps/attachmentImage.tsx

@@ -1,32 +0,0 @@
-import { type FunctionalComponent } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
-import { EmptyComponent } from "@/components/TestResult/TestResultSteps/wrongAttachment";
-
-export const AttachmentImage: FunctionalComponent<{
-  attachment: { img: string; originalFileName: string };
-}> = ({ attachment }) => {
-  const [isValidImage, setIsValidImage] = useState(true);
-
-  useEffect(() => {
-    if (attachment?.img) {
-      const img = new Image();
-      img.onload = () => setIsValidImage(true);
-      img.onerror = () => setIsValidImage(false);
-      img.src = attachment.img;
-    }
-  }, [attachment?.img]);
-
-  if (!attachment?.img || !isValidImage) {
-    return (
-      <div className={styles["test-result-attachment-error"]}>
-        <EmptyComponent />
-      </div>
-    );
-  }
-  return (
-    <div className={styles["test-result-attachment-image"]}>
-      {attachment?.img && <img src={attachment.img} alt={attachment.originalFileName} />}
-    </div>
-  );
-};

package/src/components/TestResult/TestResultSteps/attachmentVideo.tsx

@@ -1,15 +0,0 @@
-import { Spinner } from "@allurereport/web-components";
-import { type FunctionalComponent } from "preact";
-
-export const AttachmentVideo: FunctionalComponent<{
-  attachment: { src: string; contentType?: string };
-}> = ({ attachment }) => {
-  if (!attachment) {
-    return <Spinner />;
-  }
-  return (
-    <video controls loop muted>
-      <source src={attachment?.src} type={attachment?.contentType} />
-    </video>
-  );
-};