Appearance

AssetContainer Component ​

File Information ​

  • Path: app/components/card/Asset/AssetContainer.vue
  • Purpose: Container component for asset preview (PDF, video, images, documents, etc.)
  • Type: Card Component

Overview ​

The AssetContainer component provides a container for displaying different types of asset previews including PDFs, videos, images, text files, Office documents, and HTML files. It handles loading states and fallbacks for unsupported formats.

Features ​

  • Multi-Format Support: PDF, video, images, text, Office documents, HTML
  • Loading States: Skeleton loader while content loads
  • Preview Handling: Generates preview images for documents
  • Error Handling: Handles preview loading errors
  • Office Integration: Microsoft Office Online integration for Office documents
  • Video Controls: Video player with controls

Props ​

typescript
{
  file: Asset                   // Asset data object (required)
  contentLoader?: boolean       // Show content loader
  previewFile?: string          // Preview file URL
  previewImage?: string         // Preview image URL
}

Supported File Types ​

PDF Files ​

  • Uses iframe to display PDF
  • Generates preview image
  • Shows skeleton loader during load

Video Files ​

  • Video player with controls
  • Supports video preview
  • Error handling for video load failures

Image Files ​

  • Direct image display
  • Error handling for broken images

Text Files (TXT) ​

  • Uses iframe to display text content
  • Preview image support

Office Documents (DOC, DOCX, XLS, XLSX, PPT, PPTX) ​

  • Microsoft Office Online integration
  • Fallback message if Office Online unavailable
  • Preview image support

HTML Files ​

  • Image preview of HTML content
  • Error handling

Usage Example ​

vue
<template>
  <AssetContainer
    :file="asset"
    :preview-file="previewUrl"
    :content-loader="loading"
  />
</template>

<script setup lang="ts">
import AssetContainer from '~/components/card/Asset/AssetContainer.vue'

const asset = ref({
  id: 1,
  file_name: 'document.pdf',
  file_type: 'pdf',
  // ... other properties
})
</script>