Added Audio Player Support

Snapshot update

src/views/Base/MediaWidget/MediaWidget.js

@@ -6,12 +6,24 @@ import {IP_ADDRESS_KEY} from "../../../utils/Constants";
 import {connect} from "react-redux";
 import ImageLoader from "../Widgets/ImageLoader/ImageLoader";
 import ErrorBoundary from "../../../ErrorHandling/ErrorBoundary";
+import AudioPlayer from "../Widgets/AudioPlayer/AudioPlayer";
 
 export function isMedia(MimeType) {
     const mimeTypes = {
         "image/jpeg": "Image",
-        "video/mp4": "Video"
+
+        "video/mp4": "Video",
+        "video/webm": "Video",
+        "audio/webm": "Audio",
+        "video/ogg": "Video",
+        "application/ogg": "Unspecified",
+
+
+        "audio/mpeg": "Audio",
+        "audio/wav": "Audio",
+        "audio/mp4": "Audio",
     };
+
     return mimeTypes[MimeType];
 }
 
@@ -42,8 +54,18 @@ class MediaWidget extends React.Component {
 
                 return (<ImageLoader item={item} downloadURL={downloadURL} inViewport={inViewport}/>);
             case "video/mp4":
+            case "video/webm":
+            case "audio/webm":
+            case "video/ogg":
+            case "application/ogg":
+
+
                 return (<VideoPlayer playbackURL={downloadURL} MimeType={MimeType} currentPath={currentPath}/>);
 
+            case "audio/mpeg":
+            case "audio/wav":
+            case "audio/mp4":
+                return (<AudioPlayer playbackURL={downloadURL} MimeType={MimeType}/>);
             default:
                 return null;
 

src/views/Base/Widgets/AudioPlayer/AudioPlayer.js

@@ -0,0 +1,64 @@
+import React, {useState} from "react";
+import {Button, Modal} from "reactstrap";
+import * as ReactDOM from "react-dom";
+import {MODAL_ROOT_ELEMENT} from "../../../../utils/Constants";
+import * as PropTypes from "prop-types";
+import ErrorBoundary from "../../../../ErrorHandling/ErrorBoundary";
+
+function AudioPlayer({playbackURL, MimeType}) {
+
+    const [preview, setPreview] = useState(true);
+
+    function hideFull(e) {
+        e.stopPropagation();
+        setPreview(!preview);
+
+    }
+
+    let element;
+    if (preview) {
+        element = (
+            <div className="img-thumbnail w-100 text-center" data-test="audioPlayerWidget">
+                <Button color="link" onClick={hideFull}>
+                    {/*<i className="fa fa-play-circle fa-4x"/>*/}
+                    <audio controls>
+                        <source src={playbackURL} type={MimeType}/>
+                        Your browser does not support the audio tag.
+                    </audio>
+                </Button>
+            </div>
+        )
+    } else {
+
+        // Load the video
+
+
+        element = ReactDOM.createPortal((
+            <Modal className="task-modal d-none d-sm-block" data-test="videoPlayerWidget" isOpen={!preview}
+                   toggle={hideFull}>
+
+
+                <audio controls>
+                    <source src={playbackURL} type={MimeType}/>
+                    Your browser does not support the audio tag.
+                </audio>
+
+            </Modal>
+        ), document.getElementById(MODAL_ROOT_ELEMENT));
+    }
+
+    return (
+        <ErrorBoundary>
+            {element}
+        </ErrorBoundary>
+    )
+
+
+}
+
+AudioPlayer.propTypes = {
+    playbackURL: PropTypes.string.isRequired,
+    MimeType: PropTypes.string.isRequired
+};
+
+export default AudioPlayer;

src/views/Base/Widgets/AudioPlayer/AudioPlayer.test.js

@@ -0,0 +1,41 @@
+import React from "react";
+import {shallow} from "enzyme";
+import {findByTestAttr, testStore} from "../../../../../Utils";
+import toJson from "enzyme-to-json";
+import AudioPlayer from "./AudioPlayer";
+
+const setUp = (intialState = {}, props = {}) => {
+    const store = testStore(intialState);
+    const component = shallow(<AudioPlayer {...props} store={store}/>);
+    return component;
+};
+
+
+describe('Audio Player Widget', function () {
+
+
+    describe('renders', function () {
+        let wrapper;
+        beforeEach(() => {
+            const initialState = {};
+
+
+            const props = {
+                playbackURL: '',
+                MimeType: ''
+            };
+            wrapper = setUp(initialState, props)
+        });
+
+        it('should render without crashing', function () {
+            const component = findByTestAttr(wrapper, "audioPlayerWidget");
+            expect(component).toHaveLength(1);
+        });
+
+        it('should match snapshot', function () {
+            expect(toJson(wrapper)).toMatchSnapshot()
+        });
+
+    });
+
+});

src/views/Base/Widgets/AudioPlayer/__snapshots__/AudioPlayer.test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Audio Player Widget renders should match snapshot 1`] = `
+<ErrorBoundary>
+  <div
+    className="img-thumbnail w-100 text-center"
+    data-test="audioPlayerWidget"
+  >
+    <Button
+      color="link"
+      onClick={[Function]}
+      tag="button"
+    >
+      <audio
+        controls={true}
+      >
+        <source
+          src=""
+          type=""
+        />
+        Your browser does not support the audio tag.
+      </audio>
+    </Button>
+  </div>
+</ErrorBoundary>
+`;

src/views/Base/Widgets/VideoPlayer/VideoPlayer.js

@@ -4,7 +4,6 @@ import * as ReactDOM from "react-dom";
 import {MODAL_ROOT_ELEMENT} from "../../../../utils/Constants";
 import * as PropTypes from "prop-types";
 import ErrorBoundary from "../../../../ErrorHandling/ErrorBoundary";
-import ReactPlayer from "react-player";
 
 function VideoPlayer({playbackURL, MimeType}) {
 
@@ -22,7 +21,7 @@ function VideoPlayer({playbackURL, MimeType}) {
             <div className="img-thumbnail w-100 text-center" data-test="videoPlayerWidget">
                 <Button color="link" onClick={hideFull}>
                     <i className="fa fa-play-circle fa-4x"/>
-                    <ReactPlayer url={playbackURL} light={true} controls={true}/>
+                    {/*<ReactPlayer url={playbackURL} light={true} controls={true}/>*/}
                 </Button>
             </div>
         )
@@ -35,25 +34,10 @@ function VideoPlayer({playbackURL, MimeType}) {
             <Modal className="task-modal d-none d-sm-block" data-test="videoPlayerWidget" isOpen={!preview}
                    toggle={hideFull}>
 
-                {/*<video id="video" controls preload="metadata" width="600">*/}
-                {/*    <source src={playbackURL} type={MimeType}/>*/}
-                {/*</video>*/}
-
-                {/*<div id="video-controls" className="controls" data-state="hidden">*/}
-                {/*    <button id="playpause" type="button" data-state="play">Play/Pause</button>*/}
-                {/*    <button id="stop" type="button" data-state="stop">Stop</button>*/}
-                {/*    <div className="progress">*/}
-                {/*        <progress id="progress" value="0" min="0">*/}
-                {/*            <span id="progress-bar"></span>*/}
-                {/*        </progress>*/}
-                {/*    </div>*/}
-                {/*    <button id="mute" type="button" data-state="mute">Mute/Unmute</button>*/}
-                {/*    <button id="volinc" type="button" data-state="volup">Vol+</button>*/}
-                {/*    <button id="voldec" type="button" data-state="voldown">Vol-</button>*/}
-                {/*    <button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>*/}
-                {/*    <button id="subtitles" type="button" data-state="subtitles">CC</button>*/}
-                {/*</div>*/}
-                <ReactPlayer url={playbackURL} controls={true}/>
+                <video id="video" controls preload="metadata" width="600">
+                    <source src={playbackURL} type={MimeType}/>
+                </video>
+
 
             </Modal>
         ), document.getElementById(MODAL_ROOT_ELEMENT));