alinea/dist/dashboard/view/media/FileSummary.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import {
  prettyBytes
} from "../../../chunks/chunk-VRNNS7VT.js";
import {
  v
} from "../../../chunks/chunk-57QP2MGK.js";
import "../../../chunks/chunk-U5RRZUYZ.js";

// src/dashboard/view/media/FileSummary.tsx
import { Entry, renderLabel, view } from "alinea/core";
import { MediaFile } from "alinea/core/media/MediaSchema";
import { Chip, HStack, TextLabel, Typo, VStack, fromModule, px } from "alinea/ui";
import { Ellipsis } from "alinea/ui/Ellipsis";
import { IcRoundInsertDriveFile } from "alinea/ui/icons/IcRoundInsertDriveFile";
import { IcRoundKeyboardArrowRight } from "alinea/ui/icons/IcRoundKeyboardArrowRight";
import { Fragment } from "react";

// src/dashboard/view/media/FileSummary.module.scss
var FileSummary_module_default = {
  "row": "alinea-FileSummary-row",
  "row-preview": "alinea-FileSummary-row-preview",
  "rowPreview": "alinea-FileSummary-row-preview",
  "row-preview-image": "alinea-FileSummary-row-preview-image",
  "rowPreviewImage": "alinea-FileSummary-row-preview-image",
  "row-preview-icon": "alinea-FileSummary-row-preview-icon",
  "rowPreviewIcon": "alinea-FileSummary-row-preview-icon",
  "thumb": "alinea-FileSummary-thumb",
  "thumb-preview": "alinea-FileSummary-thumb-preview",
  "thumbPreview": "alinea-FileSummary-thumb-preview",
  "thumb-preview-image": "alinea-FileSummary-thumb-preview-image",
  "thumbPreviewImage": "alinea-FileSummary-thumb-preview-image",
  "is-cover": "alinea-FileSummary-is-cover",
  "isCover": "alinea-FileSummary-is-cover",
  "thumb-preview-icon": "alinea-FileSummary-thumb-preview-icon",
  "thumbPreviewIcon": "alinea-FileSummary-thumb-preview-icon",
  "thumb-preview-extension": "alinea-FileSummary-thumb-preview-extension",
  "thumbPreviewExtension": "alinea-FileSummary-thumb-preview-extension",
  "thumb-footer": "alinea-FileSummary-thumb-footer",
  "thumbFooter": "alinea-FileSummary-thumb-footer",
  "thumb-footer-title": "alinea-FileSummary-thumb-footer-title",
  "thumbFooterTitle": "alinea-FileSummary-thumb-footer-title",
  "thumb-footer-details": "alinea-FileSummary-thumb-footer-details",
  "thumbFooterDetails": "alinea-FileSummary-thumb-footer-details",
  "thumb-footer-details-divider": "alinea-FileSummary-thumb-footer-details-divider",
  "thumbFooterDetailsDivider": "alinea-FileSummary-thumb-footer-details-divider"
};

// src/dashboard/view/media/FileSummary.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(FileSummary_module_default);
function fileSummarySelect() {
  return {
    entryId: Entry.entryId,
    i18nId: Entry.i18nId,
    type: Entry.type,
    workspace: Entry.workspace,
    root: Entry.root,
    title: Entry.title,
    extension: MediaFile.extension,
    size: MediaFile.size,
    preview: MediaFile.preview,
    thumbHash: MediaFile.thumbHash,
    averageColor: MediaFile.averageColor,
    focus: MediaFile.focus,
    width: MediaFile.width,
    height: MediaFile.height,
    parents({ parents }) {
      return parents(Entry).select({
        entryId: Entry.entryId,
        i18nId: Entry.i18nId,
        title: Entry.title
      });
    }
  };
}
var FileSummaryRow = view(
  fileSummarySelect,
  function FileSummaryRow2(file) {
    return /* @__PURE__ */ jsxs(HStack, { center: true, full: true, gap: 10, className: styles.row(), children: [
      /* @__PURE__ */ jsx("div", { className: styles.row.preview(), children: file.preview ? /* @__PURE__ */ jsx("img", { src: file.preview, className: styles.row.preview.image() }) : /* @__PURE__ */ jsx("div", { className: styles.row.preview.icon(), children: /* @__PURE__ */ jsx(IcRoundInsertDriveFile, {}) }) }),
      /* @__PURE__ */ jsxs(VStack, { children: [
        file.parents.length > 0 && /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(Typo.Small, { children: /* @__PURE__ */ jsx(HStack, { center: true, gap: 3, children: file.parents.map(({ entryId, title }) => /* @__PURE__ */ jsx(Fragment, { children: title }, entryId)).reduce((prev, curr) => [
          prev,
          /* @__PURE__ */ jsx(IcRoundKeyboardArrowRight, {}),
          curr
        ]) }) }) }),
        /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(TextLabel, { label: file.title }) })
      ] }),
      file.extension && /* @__PURE__ */ jsx(Chip, { style: { marginLeft: "auto" }, children: file.extension.slice(1).toUpperCase() })
    ] });
  }
);
var FileSummaryThumb = view(
  fileSummarySelect,
  function FileSummaryThumb2(file) {
    const ratio = file.width / file.height;
    const imageCover = ratio > 1 && ratio < 2;
    return /* @__PURE__ */ jsxs("div", { className: styles.thumb(), title: renderLabel(file.title), children: [
      /* @__PURE__ */ jsx(
        "div",
        {
          className: styles.thumb.preview(),
          style: {
            backgroundImage: file.averageColor && `linear-gradient(45deg, ${v(
              file.averageColor,
              0.6
            )} 0%, ${v(file.averageColor, 0.8)} 100%)`
          },
          children: file.preview ? /* @__PURE__ */ jsx(
            "img",
            {
              src: file.preview,
              className: styles.thumb.preview.image(
                /*{cover: imageCover}*/
              )
            }
          ) : /* @__PURE__ */ jsx("div", { className: styles.thumb.preview.icon(), children: /* @__PURE__ */ jsx(IcRoundInsertDriveFile, { style: { fontSize: px(36) } }) })
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: styles.thumb.footer(), children: [
        /* @__PURE__ */ jsx("p", { className: styles.thumb.footer.title(), children: renderLabel(file.title) }),
        /* @__PURE__ */ jsxs("p", { className: styles.thumb.footer.details(), children: [
          file.extension?.slice(1).toUpperCase(),
          file.width && file.height && ` - ${file.width}x${file.height}`,
          file.size && /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto" }, children: prettyBytes(file.size) })
        ] })
      ] })
    ] });
  }
);
export {
  FileSummaryRow,
  FileSummaryThumb
};