Is there a way to get a media-type-dependent display?

[rowild]

When uploading media, it is not always an image, but can be a mp3 or a video. These media types are not displayed as images are. It would be nice to have an interactive player and maybe even some more info about the data (like duration, resolution, etc).

I assume this is currently not possible? If so, I would like to suggest that as a feature. (Also in the "Download" section, when it comes to digital goods.)

[aimeos]

For all uploaded files in the media tabs, the mimetype is stored along with the file path and other meta data. The HTML frontend already knows how to display videos but audio files are currently not supported, so you have to add the relevant HTML yourself.

[rowild]

I actually meant a media-dependet display in the backend, the place where the products' media are managed. (See screenshot.)

[aimeos]

The VueJS media component currently only shows the preview image or the poster of the video. It's possible to extend that component templates to handle different media types so video or audio tags are used for those media types. The code of the template is here:
https://github.com/aimeos/ai-admin-jqad ... hp#L67-L82

Replace the <img/> tag by a video or audio tag depending on the media type.

This is the related JS code:
https://github.com/aimeos/ai-admin-jqad ... s/media.js

If you create a PR, we will merge it into the core

[rowild]

Thank you, that looks great! Even though I cannot understand, why audio files are not supported... that's weird and strangely excluding.
Anyway, will look into it!

UPDATE
The saving process is not working. The log says:

"File type "audio/mpeg" is not allowed
#0 /var/www/html/vendor/aimeos/aimeos-core/src/Controller/Common/Media/Standard.php(51):"
(...and a lot more)

It seems that mimetypes can be added to "aimeos-core/Controller/Common/Media/Standard.php", but that would be hardcoded. Would that be all right?

When an audio file is saved, the file type ending is missing: "1.d/files/b/d/bd488bfa_1969_for_flute" (there should be a ".mp3" in the end). This does not happen with mp4 videos. Where do I have to look for the function that ends the file type?

Also: Where does aimeos get the mime icons from? I didn't any icons in any of the repos, except in test folders...

This is what I have:

Code: Select all

// vendor/aimeos/aimeos-core/src/Controller/Common/Media/Standard.php
// Line 569ff

protected function getMimeType( \Aimeos\MW\Media\Iface $media, string $type ) : string
	{
		...

		/** ... */
		$default = [
			'image/webp', 'image/jpeg', 'image/png', 'image/gif', 'image/svg+xml',
			'application/pdf', 'application/zip',
			'video/mp4', 'video/webm' // new
		];
		$allowed = $config->get( 'controller/common/media/' . $type . '/allowedtypes', $default );

		if( $type === 'preview' && in_array( $mimetype, ['image/jpeg', 'image/png'] )
			&& !empty( $supported = $media::supports( $allowed ) ) && ( $imgtype = reset( $supported ) ) !== false
		) {
			return $imgtype;
		}

		if( in_array( $mimetype, $allowed ) === false ) {
			throw new \Aimeos\Controller\Common\Exception( sprintf( 'File type "%1$s" is not allowed', $mimetype ) );
		}

		return $mimetype;
	}

Code: Select all

// vendor/aimeos/ai-admin-jqadm/js/apps/media.js

Aimeos.Media = {
  ...
  mixins: {
    methods: {
      // fetching the audio needs await, so this func must be set to async
      files: [b]async [/b] function(idx, files) {
        ...
        for(let i=0; i<files.length; i++) {
          ...
          if(files[i].type.startsWith('image/')) {
            ...
          }
          else if(files[i].type.startsWith('video/')) {
            ...
          }
          else if(files[i].type.startsWith('audio/')) {
            const audioUrl = URL.createObjectURL(files[i])
            let audioBlob = [b]await[/b] fetch(audioUrl).then(r => r.blob())
				
	    self.$set(self.items[idx], 'media.preview', audioUrl);
            
            const container = new DataTransfer();
	    const preview = self.$refs.preview[idx];
            
            container.items.add(new File([audioBlob], files[i].name, {
	      type: audioBlob.type, lastModified: new Date().getTime()
	    }));
	    
	    preview.files = container.files;
          }
        }
        ...
      }
    }
  }
}

But saving the audio happens without file ending (see screenshot, which has some manually added outputs).

Again: What do I have to do to save that file with a file ending?

[rowild]

In "vendor/aimeos/aimeos-core/src/Controller/Common/Media/Standard.php" there is function "getFilePath" which creates a list of all allowed file extensions:

$list = $this->context->config()->get( 'controller/common/media/extensions', [] );

However, even though "audio/mpeg" is added the function "getMimeType" (same file), $list does not contain anything for audio files:

list: array(21) { ["application/pdf"]=> string(3) "pdf" ["application/postscript"]=> string(2) "ps" ["application/vnd.ms-excel"]=> string(3) "xls" ["application/vnd.ms-powerpoint"]=> string(3) "ppt" ["application/vnd.ms-word"]=> string(3) "doc" ["application/vnd.oasis.opendocument.graphics"]=> string(3) "odg" ["application/vnd.oasis.opendocument.presentation"]=> string(3) "odp" ["application/vnd.oasis.opendocument.spreadsheet"]=> string(3) "ods" ["application/vnd.oasis.opendocument.text"]=> string(3) "odt" ["application/x-gzip"]=> string(2) "gz" ["application/zip"]=> string(3) "zip" ["image/bmp"]=> string(3) "bmp" ["image/gif"]=> string(3) "gif" ["image/jpeg"]=> string(3) "jpg" ["image/png"]=> string(3) "png" ["image/svg+xml"]=> string(3) "svg" ["image/tiff"]=> string(3) "tif" ["image/webp"]=> string(4) "webp" ["text/csv"]=> string(3) "csv" ["video/mp4"]=> string(3) "mp4" ["video/webm"]=> string(4) "webm" }

What has to be done to add audio mimetypes to the list of allowed mimetype in Aimeos?

PS: As a side note: It is really strange that audio files are not supported. It seems quite disrespectful against all those who need to work with audio files, while anybody else (fotographers, videographers, etc) are support "out of the box". Not fair!

[rowild]

Making progress. (But lots of files need to be touched. And eventually there is the situation where uploaded files are checked against an Image Interface – or nothing. Which is a problem (or at least ugly) for audio files. I have the feeling this is going to be a problem for the PR...)

Anyway: how do I get the path to the Aimeos uploads folder?
(In TYPO3 this would be "/uploads/tx_aimeos/", but it is a different one in Laravel.)

I need that path to the upload folder in order to assign the audio file to the media item, when it has been saved already (preview is not useful in this case). I think it would be best to create a new "media.uploadpath" attribute for that, then the media.uploadpath and the media.url can be concatenated in the media.js.

But to do so I first need to know how to get that upload path in Standard.php

[rowild]

Provided a PR for discussion.