video from URL available in modal (#4590)

Co-authored-by: Santiago <71732018+Zasa-san@users.noreply.github.com>

app/react/Metadata/components/MediaModal.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useRef } from 'react';
 import ReactModal from 'react-modal';
+import ReactPlayer from 'react-player';
 import { bindActionCreators, Dispatch } from 'redux';
 import { connect, ConnectedProps } from 'react-redux';
 import { actions as formActions } from 'react-redux-form';
@@ -66,7 +67,9 @@ function filterAttachments(
       return filteredAttachments.filter(a => a.mimetype && a.mimetype.includes('image'));
     case MediaModalType.Media:
       return filteredAttachments.filter(
-        a => a.mimetype && (a.mimetype.includes('video') || a.mimetype.includes('audio'))
+        a =>
+          (a.mimetype && (a.mimetype.includes('video') || a.mimetype.includes('audio'))) ||
+          (a.url && ReactPlayer.canPlay(a.url))
       );
     default:
       return attachments;

app/react/Metadata/components/specs/MediaModal.spec.tsx

@@ -3,6 +3,7 @@
  */
 import { ReactWrapper } from 'enzyme';
 import ReactModal from 'react-modal';
+import ReactPlayer from 'react-player';
 import { actions as formActions } from 'react-redux-form';
 import { renderConnectedMount } from 'app/utils/test/renderConnected';
 import { RenderAttachment } from 'app/Attachments/components/RenderAttachment';
@@ -88,6 +89,19 @@ describe('Media Modal', () => {
     expect(props.onClose).toHaveBeenCalled();
   });
 
+  it('Should select a video attachment with url', () => {
+    const testUrl = 'www.externalresource.com/video';
+    jest.spyOn(ReactPlayer, 'canPlay').mockReturnValue(true);
+    const videoAttachment = { _id: 123, url: testUrl, name: 'short video' };
+    render({ attachments: [videoAttachment], type: MediaModalType.Media });
+
+    const firstAttachment = component.find('.media-grid-item');
+    firstAttachment.simulate('click');
+
+    expect(props.onChange).toHaveBeenCalledWith(testUrl);
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
   it('Should show only images', () => {
     const videoAttachment = { _id: 123, filename: 'video.mp4', size: 1234, mimetype: 'video/mp4' };
     const jpgAttachment = { _id: 456, filename: 'test.jpg', size: 1234, mimetype: 'image/jpg' };