[Frontend] Publication – Media Files

[blesildaramirez]

Description

Add a Media page for each publication version to manage uploaded media files.

Media Files:

The "Media" section will sit within each submission's publication versions, under "Galleys" section.

Table/List:

• Columns:
  • ID (displays the group id if linked, otherwise the file id)
  • File name (displays the file name as a download link) ⚠️ Authors currently can't download media files: Allow authors to download media files #12675
  • Type
  • Size
  • Date uploaded
  • Actions:
    • More Information
    • Edit Metadata
    • Manually Link Media
    • Delete File
• Top action buttons:
  • Batch Link Media
  • Add Media File

Add Media File

• "Add Media File" button opens side modal form
• Users can upload multiple files at once, either by drag-and-drop or by clicking “Upload Files.”
• Each uploaded file will have two fields:
  • What kind of media is this (required)
    • Each option will come from the Article Components with the file type “dependent files" (Settings -> Workflow -> Submission -> Components -> File Type)
  • File resolution type (required)
    • Options:
      • Web resolution (default)
      • High resolution
    • Enabled only if the selected media type supports file variant types (Settings -> Workflow -> Submission -> Components -> File Variants)
• Validations:
  • Current supported files for upload are: "PNG, JPG, JPEG, GIF, BMP, WEBP (web); TIFF, SVG, EPS, AI, PDF (hi-res); MP4, MOV, AVI, WMV, MPEG, WEBM (video)" File types are currently not validated to prevent excluding legitimate file variants that may not yet be included in the list from mockup.
  • "Upload Files" button is enabled only when all fields for each file item have selected values
  • Cancel/close warns on unsaved changes

Batch Link Media

• Table with two columns:
  • Selected Web version
    • Displays all uploaded web version files, excluding those whose media types do not support variant types (Settings -> Workflow -> Submission -> Components -> File Variants)
    • Non-editable
  • Link High-Resolution Version
    • Dropdown with uploaded high-resolution files of the same media type
    • Includes only unselected/unlinked high-resolution files
    • A file can be unlinked by selecting “No high-resolution file” for a given web file.
• The "Link Media" button submits the form
• Validations:
  • Each linked media file shares a group id with its paired media file
  • Cancel/close warns on unsaved changes

More Information

• Same as other submission files, this displays the file’s history (event logs) and notes.

Edit Metadata

• Name of the File (multilingual)
• The file’s metadata fields vary depending on its media type (Settings -> Workflow -> Submission -> Components -> File Metadata)
  • Artwork (all non-multilingual)
    • Caption
    • Credit
    • Copyright Owner
    • Permission Terms
  • Supplementary (all multilingual, except Date and Language)
    • Description
    • Creator
    • Publisher
    • Source
    • Subject
    • Sponsor
    • Date
    • Language
• Validations:
  • When media files are linked, any metadata changes are also applied to the linked file upon saving (except the filename).
  • Cancel/close warns on unsaved changes

Manually Link Media

• This action is only available for files with media types that support variants
• When clicked from a web file version, the target media file options are limited to unlinked high-resolution versions.
• When clicked from a high resolution version, the target media file options are limited to unlinked web versions.
• The linked media files will be assigned a group id
• Selecting "No high-resolution/web version file" unlinks the media files.
• Validations:
  • Cancel/close warns on unsaved changes

Delete File

• When a file is linked to another media file, deleting it also unlinks the associated file and removes the group ID.

Access Rules:

• Similar with Galleys, admin, journal managers, sub editors and authors can access this feature
• Authors are able to view the list, download media files (⚠️ Allow authors to download media files #12675). But they cannot add, link media files, edit metadata, and delete media files.

What application are you using?
OJS, OMP or OPS version 3.6 (main)

Additional information

Figma design: https://www.figma.com/design/Wf7sDlUg2372jaKKTJ0Mgz/OJS-Design?node-id=17093-16453&t=FXBcbjBwF7uMjkpt-0

---

Development Updates

Pull requests

• ui-library: pkp/pkp-lib#12262 [Frontend] Publication – Media Files ui-library#794
• pkp-lib: pkp/pkp-lib#12262 [Frontend] Publication – Media Files #12333
• ojs: pkp/pkp-lib#12262 [TESTS ONLY] Publication – Media Files ojs#5380 (tests only)