Support for non image assets

[allanmaio]

Requirements

Include non image assets such as video, documents, files and audio. Icons per asset type provided by the API using previewUrl

Acceptance Criteria

1. The new types are listed in Frontify assets panel as a combo box
2. When the user selects the asset type the assets panel will show all available assets for that type
3. User will be able to drag and drop asset to the page
4. For non image assets the corresponding icon fetched from previewUrl will be shown
5. Update documentation

Solution Hint

The asset types are available in GraphQL as following:

      assets(limit: 5) {
        items {
          id
          type: __typename
          createdAt
          ... on Image {
            previewUrl(permanent: true)
          }
          ... on Video {
            previewUrl(permanent: true)
          }
          ... on Document {
            previewUrl(permanent: true)
            pageCount
          }
          ... on Audio {
            previewUrl(permanent: true)
          }
          ... on File {
            previewUrl(permanent: true)
          }
        }
      }

[le0daniel]

Please note, that the preview URL of the File is not a CDN URL that can be used in the same way as all other URLs.

If possible, this should be passed down to the Component as an Icon property instead of the preview URL. Additionally, we now see the need to pass down the ID of the asset too.

[le0daniel]

Pass down additional Properties:

• ID
• previewUrl #remove query Parameters from the URL
• downloadUrl
• type

AEM handles files all the same

• New Sample Component for non Images, a simple component with 1 File

https://frontify.github.io/public-api-explorer/#/ https://le0daniel.github.io/graphql-reference/ https://developer.frontify.com/d/XFPCrGNrXQQM/asset-processing#/operations/resizing

[gbenejam]

FYI I've created a ticket to track the changes on the current query we have for images https://github.com/Frontify/frontify-aem-connector/issues/30

[le0daniel]

@gbenejam I edited the query above and added some context to the downloadUrl...

I would highly suggest to use query variables:

query ListProjectsByBrandId($brandId: ID!) {
   brand: node(id: $brandId) {
      ... on Brand {id, ...}
   }
}

curl request simplified

curl -X POST \
     -H "Content-Type: application/json" \
     -H "Accept: application/json" \
     -H "Authorization: Bearer <token>" \
     -d '{"query": "query ($id: ID!) { node(id: $id) {id} }", "variables": {"id": "<ID>"}}' \
     https://{domain}/graphql

[le0daniel]

One thing we did only briefly discuss, if its a file, the preview URL does not offer any manipulations, as it is not a CDN URL.

Could we in the file case, pass it as a property called iconUrl, just to make it more explicit?