Appearance

Version File Type Mixin ​

File Information ​

  • Path: mixins/versionFileType.js
  • Purpose: File type detection and icon generation for asset versions

Overview ​

The Version File Type mixin provides computed properties and methods for detecting file types and generating preview icons specifically for asset versions. It's similar to the File Type mixin but optimized for version preview contexts.

Key Features ​

  1. Version File Type Detection

    • PDF detection
    • Image detection
    • Video detection
    • Document detection
    • Text file detection
    • Audio detection
    • HTML detection

  2. Version Preview Icon Generation

    • Preview icon selection for versions
    • Thumbnail fallback logic
    • Version-specific icon handling

  3. Computed Properties

    • File extension from version
    • URL access
    • Thumbnail access
    • Type detection flags

Computed Properties ​

__file_ext ​

Returns file extension from version:

  • Extracts file_type from assetPreview object
  • Used for type detection

__url ​

Returns file URL from version:

  • Returns display_file from assetPreview
  • Used for file display

__thumb ​

Returns thumbnail from version:

  • Returns preview_image from assetPreview
  • Used for preview display

__image_thumb ​

Returns image thumbnail from version:

  • Returns thumbnail_file from assetPreview
  • Used for image preview

__compressed_preview ​

Returns compressed preview from version:

  • Returns compress_file from assetPreview
  • Used for optimized preview

Type Detection Properties ​

  • isPdf - PDF detection
  • isImage - Image detection
  • isVideo - Video detection
  • isDoc - Document detection
  • isTxt - Text detection
  • isAudio - Audio detection
  • isHtml - HTML detection

previewImage ​

Returns preview image:

  • Calls getPreviewIcon() method
  • Returns icon URL or path

Methods ​

getPreviewIcon(ext, thumb, imageThumb, compressedImage, url) ​

Gets preview icon for version:

  • Determines file type
  • Returns appropriate icon based on type
  • Uses fallback logic for thumbnails

Parameters:

  • ext (string): File extension (defaults to __file_ext)
  • thumb (string): Thumbnail URL (defaults to __thumb)
  • imageThumb (string): Image thumbnail URL (defaults to __image_thumb)
  • compressedImage (string): Compressed image URL (defaults to __compressed_preview)
  • url (string): File URL (defaults to __url)

Returns: Icon URL or path string

Icon Selection Logic:

  1. PDF: imageThumb → compressedImage → thumb
  2. Document: imageThumb → compressedImage → thumb
  3. HTML: imageThumb → compressedImage → thumb
  4. Audio: Audio icon SVG
  5. Video: Video icon SVG
  6. Image: compressedImage → imageThumb → thumb
  7. Other: File type icon SVG → thumb → General icon

Data Requirements ​

Components using this mixin should have:

javascript
{
  assetPreview: {
    type: Object,
    required: true,
    description: 'Asset version object with file information'
  }
}

Usage Examples ​

Basic Usage ​

vue
<template>
  <div>
    <img :src="previewImage" :alt="assetPreview.display_file_name" />
    <span v-if="isPdf">PDF Version</span>
    <span v-else-if="isImage">Image Version</span>
  </div>
</template>

<script>
import versionFileType from '~/mixins/version-file-type'

export default {
  mixins: [versionFileType],
  props: {
    assetPreview: {
      type: Object,
      required: true
    }
  }
}
</script>

In Versions Component ​

vue
<script>
import versionFileType from '~/mixins/version-file-type'

export default {
  mixins: [versionFileType],
  computed: {
    versionIcon() {
      return this.getPreviewIcon(
        this.version.file_type,
        this.version.preview_image,
        this.version.thumbnail_file,
        this.version.compress_file,
        this.version.display_file
      )
    }
  }
}
</script>

Differences from File Type Mixin ​

  • Uses assetPreview instead of file
  • Optimized for version preview context
  • No detail icon method (only preview)
  • Focused on version display

Integration Points ​

  • Versions Component: Version display
  • Asset Details Page: Version preview
  • Version History: Version listing
  • File Type Utilities: Type detection

Notes for Development ​

  • Mixin is optimized for version previews
  • Uses assetPreview prop for file data
  • Icon selection prioritizes compressed/thumbnail images
  • Fallback logic ensures icons always display
  • Similar to file-type mixin but version-specific