Objective¶

• Implement the download page functionalities according to the provided Product Requirements Document (PRD) and Figma design.
• Ensure all features are responsive and work seamlessly in both dark and light themes.
• Follow the PRD for detailed requirements and behavior.

Task Checklist¶

Core Components¶

• File Output Box

  • Display a header box containing:
    • Title of compressed files.
    • Total number of compressed files and total size.
    • Total percentage of compression and the total compression time.

• Download Button

  • One-click download functionality for all compressed files as a zip file.

• Dropdown Button (Save to Cloud)

  • Save compressed files to different locations:
    • Dropbox
    • OneDrive
    • Google Drive

File Actions¶

• Delete Button

  • Implement a delete button beside each file name.
  • Show a popup with a file availability timer and a "Delete Now" button on click.
  • Deleting the last or a single compressed file should redirect the user to the home page.
  • Tooltip: Ensure the tooltip text displays "Delete File" correctly.

• File Preview

  • Show a short preview of the corresponding PDF file for each file box.

• Editable File Title

  • The file name should be editable.
  • Implement an edit button with a tooltip.
  • Tooltip: Display "Edit File Name" on hover.

• File Information Display

  • Show the file extension under the file name.
  • Display the file size, percentage of compression, and compressed size of the file.

• Individual File Download Button

  • Allow users to download individual PDF files.
  • Implement a dropdown button to save the file to:
    • Dropbox
    • OneDrive
    • Google Drive

Additional Functionalities¶

• Preview Button

  • Display the compressed version of the PDF in an embedded PDF viewer on the same page.
  • Ensure the user can scroll, zoom in and out, and navigate through pages.
  • Include a close button to exit the preview.

• Print Button

  • Trigger the browser's print dialog for the PDF file.
  • Handle potential errors like missing files or printer connection issues, displaying appropriate messages.
  • Support print action via a keyboard shortcut.
  • Confirm the success of the print job with a message.

• Share Button

  • Implement sharing options for platforms:
    • Facebook
    • Twitter
    • Email
    • LinkedIn
  • For the email option, include the compressed PDF as an attachment.
  • Allow users to generate and copy a shareable URL or QR code linking to the PDF file (https://compresspdf.to/download/tokenID).
  • Handle connectivity issues or platform restrictions gracefully, showing error messages if sharing fails.
  • Show a toast notification or confirmation message upon a successful share.
  • Tooltip: Ensure the tooltip displays correct text for each sharing option.

• Generate QR Code

  • Create a helper function to generate a QR code linking to the downloadable PDF.
  • Ensure the QR code is updated dynamically when file names or links change.
  • Verify the QR code generation is responsive and displayed in real-time.

• File Availability Timer

  • Implement a function to calculate and display the time left for file availability (hours, minutes, seconds).
  • Ensure real-time updates in the displayed time.
  • Verify responsiveness and accuracy of the countdown timer.

Miscellaneous¶

• Start Over Button

  • Redirect the user to the customization page while retaining previous settings for adjustments and restarting the compression process.

• Post-Download Popup

  • Show a popup requesting users to rate the service after the download is complete.
  • Implement a rating scale with hover effects to indicate selection.
  • Update the average rating in real-time as new ratings are submitted.
  • Include a close button to exit the popup.

Related Links¶

• Topical Map
• PRD
• Figma Design

GitHub Issue Link¶

• GitHub Issue #30

Estimated Time¶

• Estimated implementation time: 1 day.