Added waveform in embedded player if playing audio

Added LICENSE files

Moved videojs plugins into their own sub-directories in libs directory

public/libs/video-js/LICENSE

@@ -0,0 +1,13 @@
+Copyright Brightcove, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

public/libs/videojs-seek-buttons/LICENSE

@@ -0,0 +1,13 @@
+Copyright mister-ben <git@misterben.me>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

public/libs/videojs-wavesurfer/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2020 Collab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

public/libs/videojs-wavesurfer/videojs.wavesurfer.min.css

@@ -0,0 +1,3 @@
+/*!
+Default styles for videojs-wavesurfer 3.3.1
+*/.vjs-wavesurfer .vjs-using-native-controls .vjs-control-bar{display:flex!important}.vjs-progress-control,.vjs-text-track-display,.vjs-wavesurfer .vjs-menu-content,.vjs-wavesurfer .vjs-modal-dialog{z-index:4}.vjs-wavesurfer.vjs-fluid wave.vjs-wavedisplay{top:0;position:absolute!important;width:100%;min-width:100%;max-width:100%;height:100%}

public/libs/wavesurfer-js/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2012-2020, katspaugh and contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

src/js/player.js

@@ -1,4 +1,4 @@
-/* global swal, axios, videojs */
+/* global swal, axios, videojs, WaveSurfer */
 
 // eslint-disable-next-line no-unused-vars
 const lsKeys = {}
@@ -66,7 +66,10 @@ page.reloadVideo = () => {
       return page.onAxiosError(response)
     }
 
-    if (!/^(video|audio)\//.test(response.headers['content-type'])) {
+    const type = response.headers['content-type'] || ''
+    const isvideo = type.startsWith('video/')
+    const isaudio = type.startsWith('audio/')
+    if (!isvideo && !isaudio) {
       page.toggleReloadBtn(true)
       return swal('An error occurred!', 'The requested upload does not appear to be a media file.', 'error')
     }
@@ -82,17 +85,29 @@ page.reloadVideo = () => {
     videoElement.setAttribute('controls', true)
     videoElement.setAttribute('preload', 'auto')
 
-    const sourceElement = document.createElement('source')
-    sourceElement.src = src
-    sourceElement.type = response.headers['content-type']
-
-    videoElement.appendChild(sourceElement)
     page.videoContainer.appendChild(videoElement)
 
-    page.player = videojs('video-js', {
+    const options = {
       language: 'en',
       playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
       responsive: true
+    }
+
+    if (isaudio) {
+      options.plugins = {
+        wavesurfer: {
+          backend: 'MediaElement'
+        }
+      }
+    }
+
+    page.player = videojs('video-js', options, () => {
+      let message = `Using video.js ${videojs.VERSION}`
+      if (isaudio) {
+        message += `with videojs-wavesurfer ${videojs.getPluginVersion('wavesurfer')} and wavesurfer.js ${WaveSurfer.VERSION}`
+      }
+      videojs.log(message)
+      page.player.src({ src, type })
     })
     page.player.seekButtons({ forward: 10, back: 10 })
 

views/player.njk

@@ -11,8 +11,8 @@
 <!-- Libs stylesheets -->
 <link rel="stylesheet" href="../libs/fontello/fontello.css{{ versions[1] }}">
 <link rel="stylesheet" href="../libs/video-js/video-js.min.css{{ versions[3] }}">
-<link rel="stylesheet" href="../libs/video-js/videojs-seek-buttons
-.css{{ versions[3] }}">
+<link rel="stylesheet" href="../libs/videojs-seek-buttons/videojs-seek-buttons.min.css{{ versions[3] }}">
+<link rel="stylesheet" href="../libs/videojs-wavesurfer/videojs.wavesurfer.min.css{{ versions[3] }}">
 <!-- Stylesheets -->
 <link rel="stylesheet" href="../css/style.css{{ versions[1] }}">
 <link rel="stylesheet" href="../css/sweetalert.css{{ versions[1] }}">
@@ -26,7 +26,9 @@
 <script src="../libs/axios/axios.min.js{{ versions[3] }}"></script>
 <script src="../libs/video-js/video.min.js{{ versions[3] }}"></script>
 <script src="../libs/video-js/lang/en.js{{ versions[3] }}"></script>
-<script src="../libs/video-js/videojs-seek-buttons.min.js{{ versions[3] }}"></script>
+<script src="../libs/videojs-seek-buttons/videojs-seek-buttons.min.js{{ versions[3] }}"></script>
+<script src="../libs/wavesurfer-js/wavesurfer.min.js{{ versions[3] }}"></script>
+<script src="../libs/videojs-wavesurfer/videojs.wavesurfer.min.js{{ versions[3] }}"></script>
 <!-- Scripts -->
 {# We assign an ID for this so that the script can find out proper root URL of uploaded files #}
 <script id="mainScript" src="../js/player.js{{ versions[1] }}" data-upload-root="{{ uploadRoot }}" data-title-format="