Appearance

FileListingCard Component ​

Overview ​

The FileListingCard component is used to display a file, either an image or video, within a card layout. The component includes hover functionality to show additional options such as selecting the file, renaming it, downloading it, or removing it from the collage. It supports both video and image files and provides contextual actions based on the type of file being displayed.

Features ​

  • File Display (Image/Video/docs Preview):

    • Dynamically displays either an image or video based on the file type (file_type).
    • For videos, it shows a playable video preview that starts and stops on hover.
    • For images, it renders an appropriate thumbnail, with specific handling for SVG and GIF files.

  • File Selection:

    • Includes a checkbox to select or deselect the file, allowing the user to mark multiple files for actions like download or removal.
    • The checkbox interaction is debounced to prevent multiple rapid triggers, enhancing user experience.

  • Hover-based Action Menu:

    • On hover, a floating action menu appears with options such as Rename, Share, Download, and Remove.
    • These options are hidden by default and only become visible when the user hovers over the file or video preview.

  • Video Playback Control:

    • When the file is a video, the component automatically plays the video on mouse enter and pauses it on mouse leave.
    • Ensures smooth playback and user control, without requiring additional interaction buttons.

  • File Operations (Rename, Download, Remove):

    • Users can interact with the file through options such as:
    • Rename: Triggered from the options menu to allow the user to rename the file.
    • Download: Enables the user to download the file.
    • Remove from Collage: Removes the file from the current collage or collection.

  • Share Functionality:

    • A dedicated Share option that opens a ShareAssetDialog modal, allowing users to share the file with others.
    • The dialog is invoked when the user clicks on the "Share" button in the options menu.

  • Custom SVG Icons:

    • Utilizes custom SVG icons for each action (Rename, Share, Download, Remove), ensuring a consistent and visually appealing interface.

  • Quick View Functionality:

    • There is an optional Quick View button functionality that can be easily re-enabled to preview the file in detail when clicked.

  • Scoped Styles:

    • The component is styled using scoped CSS from an external file (collages-details.css), ensuring the design and layout stay consistent without affecting other components.

Data ​

  • ishover (Boolean): Used to track whether the user is hovering over the card.
  • hoverTimeout (null/timeout reference): Stores the timeout ID for hover-related delays.
  • shareDialog (Boolean): Controls the visibility of the "Share" dialog.
  • paused (Boolean): Tracks whether the video is currently playing or paused

Computed ​

  • videoIs: Returns true if the file is a video, determined by the file's type (file_type). Utilizes the utility function isVideo

Methods ​

  • emitEvents(flag): Emits an event based on the passed flag, with the file object as the event payload. Used to handle actions like renaming, downloading, and deleting the file.

  • toggleVideoPlay(): Toggles the video playback between paused and playing states based on user interaction (mouse enter/leave). Pauses or plays the video accordingly.

  • getSrcPath(item): Returns the appropriate source path for the image or video thumbnail, based on the file type. This function handles cases where the file is an audio file, video file, or a gif. It also falls back to a default image if the file does not have a specific preview or thumbnail.

Events ​

  • fileSelect: Triggered when the file selection checkbox is toggled.
  • quickView: Triggered when the card is clicked for quick view.
  • rename: Triggered when the "Rename" option is selected.
  • download: Triggered when the "Download" option is selected.
  • delete: Triggered when the "Remove from collage" option is selected.

Dependencies ​

  • OptionIcon, DownloadIcon, SharedIcon, EditIcon, DeleteIcon: These are custom SVG components used as icons for file actions.

  • ShareAssetDialog: A component that opens a dialog for sharing the selected file

Styles ​

The component uses scoped styles from the external stylesheet collages-details.css, allowing for customization of layout, hover effects, and button appearances

html
<style scoped src="@/assets/css/collages-details.css"></style>

Usage ​

vue
<FileListingCard
  :file="fileData"
  @rename="handleRename"
  @download="handleDownload"
  @delete="handleDelete"
/>

Notes ​

  • In the example above, the FileListingCard component is used to display a file represented by fileData, with event handlers for renaming, downloading, and deleting the file.
  • Hover Effects: On hovering over the video or image, a set of actions (checkbox for selection and menu for more options) is displayed.
  • Video Interaction: When hovering over a video, it automatically plays. When the mouse leaves the video, it pauses.
  • Options Menu: The options menu includes actions like Rename, Share, Download, and Remove from collage.