@operato/attachment 10.20.0 → 10.23.0

package/dist/src/ox-attachment-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-attachment-tile.js","sourceRoot":"","sources":["../../src/ox-attachment-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n/*\n * What stands in for a picture when the file is not one.\n *\n * The server thumbnails images and glTF models. Everything else used to get the same grey\n * \"insert_drive_file\" glyph, so a list of audio, text and zip files was a wall of identical\n * tiles. This tile draws what it can from the file itself, cheaply:\n *\n *   - video: the file's own first frame (the browser decodes just the metadata and one frame)\n *   - text (txt, csv, json, md, code): the first few lines, fetched with a byte range\n *   - everything else: a glyph for the file's family, with its extension\n *\n * A glyph tile is never blank - the family and the extension are the two things a person\n * scans a file list for.\n */\nconst TEXT_PREVIEW_BYTES = 600\n\nconst FAMILIES: Array<{ test: (mime: string, ext: string) => boolean; icon: string }> = [\n  { test: mime => mime === 'application/pdf', icon: 'picture_as_pdf' },\n  { test: mime => mime.startsWith('audio/'), icon: 'audio_file' },\n  { test: mime => mime.startsWith('video/'), icon: 'video_file' },\n  { test: mime => mime.startsWith('model/'), icon: 'view_in_ar' },\n  { test: mime => mime.startsWith('font/'), icon: 'font_download' },\n  {\n    test: (mime, ext) => /zip|compressed|tar|gzip|rar|7z/.test(mime) || ['zip', 'tar', 'gz', 'rar', '7z'].includes(ext),\n    icon: 'folder_zip'\n  },\n  {\n    test: (mime, ext) => /spreadsheet|excel|csv/.test(mime) || ['xls', 'xlsx', 'csv', 'numbers'].includes(ext),\n    icon: 'table_chart'\n  },\n  {\n    test: (mime, ext) => /presentation|powerpoint/.test(mime) || ['ppt', 'pptx', 'key'].includes(ext),\n    icon: 'slideshow'\n  },\n  {\n    test: (mime, ext) => /msword|wordprocessing|rtf/.test(mime) || ['doc', 'docx', 'pages'].includes(ext),\n    icon: 'description'\n  },\n  {\n    test: (mime, ext) =>\n      /json|xml|javascript|typescript|yaml|x-sh/.test(mime) ||\n      ['js', 'ts', 'json', 'xml', 'yaml', 'yml', 'sh', 'py', 'java', 'css', 'html'].includes(ext),\n    icon: 'code'\n  },\n  { test: mime => mime.startsWith('text/'), icon: 'article' }\n]\n\nfunction extensionOf(path: string = ''): string {\n  const dot = path.lastIndexOf('.')\n  return dot >= 0 ? path.slice(dot + 1).toLowerCase() : ''\n}\n\nexport function fileFamilyIcon(mimetype: string = '', path: string = ''): string {\n  const ext = extensionOf(path)\n  return FAMILIES.find(family => family.test(mimetype, ext))?.icon || 'draft'\n}\n\nfunction isTextLike(mimetype: string = '', ext: string): boolean {\n  return (\n    mimetype.startsWith('text/') ||\n    /json|xml|javascript|yaml|x-sh/.test(mimetype) ||\n    ['txt', 'md', 'csv', 'json', 'xml', 'yaml', 'yml', 'log', 'js', 'ts', 'py', 'sh', 'css', 'html', 'sql'].includes(ext)\n  )\n}\n\n@customElement('ox-attachment-tile')\nexport class OxAttachmentTile extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n        box-sizing: border-box;\n        overflow: hidden;\n      }\n\n      [glyph] {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [glyph] md-icon {\n        --md-icon-size: 40px;\n        font-variation-settings: 'wght' 300;\n        color: var(--md-sys-color-outline);\n      }\n\n      [ext] {\n        padding: 0 8px;\n        border-radius: 999px;\n        font-size: 0.66rem;\n        font-weight: 600;\n        letter-spacing: 0.06em;\n        line-height: 18px;\n        text-transform: uppercase;\n        color: var(--md-sys-color-on-secondary-container);\n        background: var(--md-sys-color-secondary-container);\n      }\n\n      video {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        pointer-events: none;\n      }\n\n      /* The first lines of a text file, as they are, in a small monospace; the fade says \"more\". */\n      [text] {\n        position: relative;\n        flex: 1;\n        margin: 0;\n        padding: 10px 12px;\n        overflow: hidden;\n        font: 0.66rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n        color: var(--md-sys-color-on-surface-variant);\n        white-space: pre-wrap;\n        word-break: break-all;\n      }\n\n      [text]::after {\n        content: '';\n        position: absolute;\n        inset: auto 0 0 0;\n        height: 40%;\n        background: linear-gradient(to bottom, transparent, var(--ox-attachment-tile-fade, var(--md-sys-color-surface-container)));\n      }\n    `\n  ]\n\n  @property({ type: String }) path: string = ''\n  @property({ type: String }) mimetype: string = ''\n  @property({ type: String }) src: string = ''\n\n  @state() private _snippet?: string\n  private _snippetFor?: string\n\n  render() {\n    const ext = extensionOf(this.path)\n    const mime = this.mimetype || ''\n\n    if (mime.startsWith('video/') && this.src) {\n      return html`<video src=\"${this.src}#t=0.5\" preload=\"metadata\" muted playsinline></video>`\n    }\n\n    if (this._snippet) {\n      return html`<pre text>${this._snippet}</pre>`\n    }\n\n    return html`\n      <div glyph>\n        <md-icon>${fileFamilyIcon(mime, this.path)}</md-icon>\n        ${ext ? html`<span ext>${ext}</span>` : nothing}\n      </div>\n    `\n  }\n\n  updated() {\n    const ext = extensionOf(this.path)\n    if (this.src && isTextLike(this.mimetype, ext) && this._snippetFor !== this.src) {\n      this._snippetFor = this.src\n      this._loadSnippet(this.src)\n    }\n  }\n\n  private async _loadSnippet(src: string) {\n    try {\n      const response = await fetch(src, { headers: { Range: `bytes=0-${TEXT_PREVIEW_BYTES - 1}` } })\n      if (!response.ok) return\n      const text = (await response.text()).slice(0, TEXT_PREVIEW_BYTES)\n      /* A file that starts with binary or is empty gets the glyph instead. */\n      if (!text.trim() || /[\\u0000-\\u0008\\u000e-\\u001f]/.test(text)) return\n      if (this._snippetFor === src) this._snippet = text\n    } catch (e) {\n      /* the glyph stays */\n    }\n  }\n}\n"]}