nielsboogaard / filepond-plugin-media-preview Goto Github PK

On IE11 the plugin doesn't seem to work, getting this on the console:

SCRIPT1002: Syntax error

Seems related to this line:

  const isPreviewableVideo = file => /^video/.test(file.type);

Is IE11 supported or maybe I am missing some polyfill?

Hi,

I found if I use Bootstrap4 Collapse component with the latest FilePond(4.40.3) and media preview plugin(1.0.11), using no matter the files parameter of the FilePond's constructor or addFiles/addFile method, it will show nothing in the preview area until the collapse component shown the FilePond widget. But actually after my research it do added the files, as the file input element is created within the widget.

To redo this, just using the official media preview demo with bootstrap4 Collapse, and draw the widget within one collapsed tag, set some media file to it, you can reproduce the issue.

I'd already find a work around to init the widget only when the collapse show, so just to inform you about this issue, it is not a serious problem to me. Hope can make media preview better.

Best regards

serialize-javascript vulnerability is fixed in 2.1.1

rollup-plugin-terser PR fixes this: TrySound/rollup-plugin-terser#54 or TrySound/rollup-plugin-terser#53

Waiting for merge before updating rollup-plugin-terser

Is there any plan to add a quick and easy way to check for audio/video duration?

Hello. Thank you a lot for a great job done with this plugin, I use it for relatively a long time already and it works seamlessly.

The challenge I faced recently is to show video preview for already uploaded big video (up to 1GB).
Users can edit already uploaded assets and see videos already uploaded in the file pond component.
But for big videos there is a drawback - the video should be fetched fully first, transformed to Blob, and only after it can be shown within video preview. For relatively big videos this drastically decreases UX.

I was not able to find an existing way of showing a video preview while the video is being loaded from the internet.

I found a way how it can be achieved with minor changes.

In the documentation well-described way of preloading already uploaded files: https://pqina.nl/filepond/docs/patterns/api/filepond-object/#setting-initial-files.
When File defined in the options object - Filepond won't fetch the file from the server but will use defined File from options.

const pond = FilePond.create({
    files: [
        {
            // the server file reference
            source: '12345',

            // set type to local to indicate an already uploaded file
            options: {
                type: 'local',

                // mock file information
                file: {
                    name: 'my-file.png',
                    size: 3001025,
                    type: 'image/png', 
                    mock: true, // fake property
                    url: https://url.to.file // fake property
                }
            }
        }
    ]
});

But doing this way- filepond-plugin-media-preview will not work as currently, this is a way how it sets src property:

In order to make it work, I propose to make a small adjustment in code of the media preview plugin:

 root.ref.media.src = item.file.mock && item.file.url || URL.createObjectURL(blob);

Specifying a direct URL will enable previewing while video being buffered from the internet.

If you fine with it - I can proceed with a pull request.

I want to execute some method inside event when video play, how?
thanks.

This line in the /src/js/index.js:

view.registerWriter(createRoute({
        DID_LOAD_ITEM: didLoadItem
      }, function (_ref6) {
        var root = _ref6.root,
            props = _ref6.props;
        var id = props.id;
        var item = query('GET_ITEM', id); // don't do anything while not an video or audio file or hidden

        if (!isPreviewableVideo(item.file) && !isPreviewableAudio(item.file) || root.rect.element.hidden) return; // <--- 
      }));

Throws error if the item is null

hi. thanks on this great plugin.
it works, but i have a layout problem, when i upload the video is to big from the container size.
i am using this plugin with Vue.js

how do i fix it please?
thank you very much

Hi Niel,

Awesome plugin.

Any idea how to handle well portrait video because at the moment we end up with really tall video when importing a portrait mode one ?

Could we add a 'fixedHeight' option for the developer to specify the fixed height of video size ?

Cheers

pond.files = [
{
source: file,
options: {
type: 'limbo',
metadata: {
poster: file,
}
}
}
];

whit that working the images for example but with video not

Hi. First of all, thanks for writing this plugin, really cool and it is perfectly integrated with filepond!

I have a question regarding adding custom attributes to video element. Right now the video element comes like this:

<video
  controls="true"
  src="source.mp4"
></video>

But it would be great to be able set controls to false or add other ones, such as autoplay, crossorigin, or controlslist (see MDN web docs for more options.):

<video
  controls="true"
  controlslist="nodownload nofullscreen noremoteplay"
  autoplay="true"
  src="source.mp4"
></video>

Any suggestions on how to do that?

Thanks!