Update media player (#242)

* Add public folder to gitignore Signed-off-by: Matt Stratton <[email protected]> * Remove markdownify from guest list Fixes #240 Signed-off-by: Matt Stratton <[email protected]> * Replace media player Fixes #241 Signed-off-by: Matt Stratton <[email protected]>
mattstratton · Feb 4, 2020 · 46f2bb5 · 46f2bb5
1 parent 2c3e4e2
commit 46f2bb5
Show file tree

Hide file tree

Showing 18 changed files with 98 additions and 4,410 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ release/
 dist
 .DS_Store
 .Ulysses-Group.plist
+public/
diff --git a/gulp/tasks/dev/copy-files.js b/gulp/tasks/dev/copy-files.js
@@ -0,0 +1,11 @@
+var gulp = require('gulp');
+
+gulp.task('copy-player-files', function() {
+    return gulp.src(['node_modules/mediaelement/build/mejs-controls.png','node_modules/mediaelement/build/mejs-controls.svg'])
+        .pipe(gulp.dest('static/img'));
+});
+
+gulp.task('copy-css-files', function() {
+    return gulp.src(['node_modules/mediaelement/build/mediaelementplayer.min.css','node_modules/mediaelement-plugins/dist/speed/speed.min.css'])
+        .pipe(gulp.dest('static/css'));
+});
diff --git a/gulp/tasks/dev/dev.js b/gulp/tasks/dev/dev.js
@@ -6,4 +6,4 @@ var hub = new HubRegistry(['tasks/dev/*.js']);
 
 // tell gulp to use the tasks just loaded
 gulp.registry(hub);
-gulp.task('dev', gulp.series('js-concat', 'sass'))
+gulp.task('dev', gulp.series('js-concat', 'sass', 'copy-player-files','copy-css-files'))
diff --git a/gulp/tasks/dev/javascript.js b/gulp/tasks/dev/javascript.js
@@ -7,9 +7,12 @@ var gulp = require('gulp'),
 var scripts = [
     'node_modules/jquery/dist/jquery.js',
     'node_modules/bootstrap/dist/js/bootstrap.js',
-    'static/components/audiojs/audiojs.js',
     'node_modules/jssocials/dist/jssocials.js',
-    'static/js/castanet.js'
+    'static/js/castanet.js',
+    'node_modules/mediaelement/build/mediaelement-and-player.js',
+    'node_modules/mediaelement-plugins/dist//speed/speed.js',
+    'node_modules/mediaelement-plugins/dist//speed/speed-i18n.js'
+
 ]
 
 gulp.task('js-concat', function(){

diff --git a/layouts/episode/single.html b/layouts/episode/single.html
@@ -46,12 +46,10 @@ <h1>{{ title .Title }}</h1>
     {{- with .Params.podcast_file -}}
       <div class="row">
         <div class="col-md-12 player_row">
-          <audio src="{{ $.Site.Params.media_prefix }}{{ . }}" preload="auto"/>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-11 col-md-offset-1">
-          <a href="{{ $.Site.Params.media_prefix }}{{ . }}">Direct Download</a>
+
+        <audio id="player2" style="width: 100%" controls preload="none">
+          <source src="{{ $.Site.Params.media_prefix }}{{ . }}" type="audio/mp3">
+          </audio>
         </div>
       </div>
     {{- end -}}

diff --git a/layouts/guest/list.html b/layouts/guest/list.html
@@ -31,7 +31,7 @@ <h1>Guests of {{ .Site.Title }}</h1>
           </div>
           <div class= "col-md-6">
             <h3><a href = "{{(printf "guest/%s" .File.BaseFileName) | absURL }}">{{ .Title }}</a></h3>
-            <p>{{ .Content | markdownify }}</p>
+            <p>{{ .Content }}</p>
             {{ with .Params.Website }}
               <a href = "{{ . }}"><i class="fas fa-home fa-2x"></i></a>
             {{ end }}

diff --git a/layouts/partials/footer_scripts.html b/layouts/partials/footer_scripts.html
@@ -1,5 +1,4 @@
 <script src={{ "js/castanet-min.js" | absURL }}></script>
-<script src="/audiojs/audio.min.js"></script>
 <script>
     $("#share").jsSocials({
         shares: [
@@ -28,13 +27,15 @@
     ],
     });
 </script>
+
 <script>
-audiojs.events.ready(function() {
-  var as = audiojs.createAll({
-    imageLocation: '{{"img/player-graphics.gif" | relURL}}',
-    retinaImageLocation: '{{"img/[email protected]" | relURL}}',
-    swfLocation: '{{"swf/audiojs.swf" | relURL}}'
-   });
- });
+  var player = new MediaElementPlayer('player2', {
+      features: ['playpause', 'current', 'progress', 'duration', 'volume','speed'],
+      defaultSpeed: 1.0,
+      // other configuration elements
+  });
 </script>
+
+
+
 {{ template "_internal/google_analytics_async.html" . }}
diff --git a/layouts/partials/head_includes.html b/layouts/partials/head_includes.html
@@ -14,5 +14,17 @@
     <link rel="stylesheet" href="{{ . | absURL }}">
 {{ end }}
 <link href={{"css/all.css" | absURL }} rel="stylesheet">
-
+<link href={{"css/mediaelementplayer.min.css" | absURL }} rel="stylesheet">
+<style>
+    .mejs__overlay-button {
+        background-image: url("/img/mejs-controls.svg");
+    }
+    .mejs__overlay-loading-bg-img {
+        background-image: url("/img/mejs-controls.svg");
+    }
+    .mejs__button > button {
+        background-image: url("/img/mejs-controls.svg");
+    }
+    </style>
+<link href={{"css/speed.min.css" | absURL }} rel="stylesheet">
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,10 +30,12 @@
     "require-dir": "~1.2.0"
   },
   "dependencies": {
-    "netlify-cli": "^2.15.0",
     "bootstrap": "^4.3.1",
     "jquery": "^3.4.1",
     "jssocials": "^1.5.0",
+    "mediaelement": "^4.2.14",
+    "mediaelement-plugins": "^2.5.0",
+    "netlify-cli": "^2.15.0",
     "popper.js": "^1.15.0"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ release/ @@
     dist
     .DS_Store
     .Ulysses-Group.plist
+    public/