Merge pull request #21 from collab-project/videojs5

Video.js 5 support (#6)
collab-project · Oct 14, 2015 · 6392931 · 6392931
2 parents 1fcc04d + 1618d72
commit 6392931
Show file tree

Hide file tree

Showing 26 changed files with 1,032 additions and 617 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,5 +1,9 @@
 'use strict';
 
+var fs = require('fs');
+var path = require('path');
+var _ = require('lodash');
+
 module.exports = function(grunt) {
   var pkg, version, verParts;
   pkg = grunt.file.readJSON('package.json');
@@ -55,13 +59,6 @@ module.exports = function(grunt) {
         src: ['src/js/*.js']
       },
     },
-    csscomb: {
-      src: {
-        files: {
-          'src/css/videojs.record.css': ['src/css/videojs.record.css']
-        }
-      }
-    },
     cssmin: {
       target: {
         files: [{
@@ -73,6 +70,13 @@ module.exports = function(grunt) {
         }]
       }
     },
+    sass: {
+      dist: {
+        files: {
+          'src/css/videojs.record.css': 'src/css/font/scss/videojs-icons.scss'
+        }
+      }
+    },
     watch: {
       gruntfile: {
         files: '<%= jshint.gruntfile.src %>',
@@ -98,9 +102,10 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-videojs-languages');
-  grunt.loadNpmTasks('grunt-csscomb');
+  grunt.loadNpmTasks('grunt-sass');
 
-  grunt.registerTask('pretask', ['jshint', 'csscomb', 'concat', 'vjslanguages']);
+  grunt.registerTask('font', ['generate-font', 'update-base64', 'sass']);
+  grunt.registerTask('pretask', ['jshint', 'concat', 'vjslanguages', 'font']);
   grunt.registerTask('default', ['pretask', 'build', 'uglify']);
 
   grunt.registerMultiTask('build', 'Building Source', function(){
@@ -117,7 +122,7 @@ module.exports = function(grunt) {
     grunt.file.recurse('src/css/font', function(absdir, rootdir, subdir, filename) {
       // only fonts
       var ext = filename.substring(filename.lastIndexOf('.') + 1, filename.length);
-      if (["ttf", "svg", "eot", "woff"].indexOf(ext) > -1) {
+      if (['ttf', 'svg', 'eot', 'woff'].indexOf(ext) > -1) {
         grunt.file.copy(absdir, 'dist/css/font/' + filename);
       }
     });
@@ -126,4 +131,75 @@ module.exports = function(grunt) {
     grunt.task.run(['cssmin']);
   });
 
+  grunt.registerTask('generate-font', function() {
+    var done = this.async();
+
+    var webfontsGenerator = require('webfonts-generator');
+    var iconConfig = require('./src/css/font/icons.json');
+    var svgRootDir = iconConfig['root-dir'];
+    var icons = iconConfig.icons;
+
+    var iconFiles = icons.map(function(icon) {
+      // If root-dir is specified for a specific icon, use that.
+      if (icon['root-dir']) {
+        return icon['root-dir'] + icon.svg;
+      }
+
+      // Otherwise, use the default root-dir.
+      return svgRootDir + icon.svg;
+    });
+
+    webfontsGenerator({
+      files: iconFiles,
+      dest: 'src/css/font/',
+      fontName: iconConfig['font-name'],
+      cssDest: 'src/css/font/scss/_icons.scss',
+      cssTemplate: 'src/css/font/templates/scss.hbs',
+      htmlDest: 'src/css/font/preview.html',
+      htmlTemplate: 'src/css/font/templates/html.hbs',
+      html: true,
+      rename: function(iconPath) {
+        var fileName = path.basename(iconPath);
+
+        var iconName = _.result(_.find(icons, function(icon) {
+          var svgName = path.basename(icon.svg);
+
+          return svgName === fileName;
+        }), 'name');
+
+        return iconName;
+      },
+      types: ['svg', 'ttf', 'woff', 'eot']
+    }, function(error) {
+      if (error) {
+        console.error(error);
+        done(false);
+      }
+
+      done();
+    });
+
+  });
+
+  grunt.registerTask('update-base64', function() {
+    var iconScssFile = './src/css/font/scss/_icons.scss';
+    var fontFiles = {
+      ttf: './src/css/font/videojs-record.ttf',
+      woff: './src/css/font/videojs-record.woff'
+    };
+
+    var scssContents = fs.readFileSync(iconScssFile).toString();
+
+    Object.keys(fontFiles).forEach(function(font) {
+      var fontFile = fontFiles[font];
+      var fontContent = fs.readFileSync(fontFile);
+
+      var regex = new RegExp("(url.*font-" + font + ".*base64,)([^\\s]+)(\\).*)");
+
+      scssContents = scssContents.replace(regex, "$1" + fontContent.toString('base64') + "$3");
+    });
+
+    fs.writeFileSync(iconScssFile, scssContents);
+  });
+
 };
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@ Video.js Record
 
 A Video.js plugin for recording audio/video/image files.
 
-![Screenshot](examples/img/screenshot.png?raw=true "Screenshot")
+<img title="Screenshot" src="examples/img/screenshot.png?raw=true" width="329">
 
 [![npm version](https://img.shields.io/npm/v/videojs-record.svg?style=flat)](https://www.npmjs.com/package/videojs-record)
 [![npm](https://img.shields.io/npm/dm/videojs-record.svg)]()
@@ -18,8 +18,10 @@ Use [bower](http://bower.io) (`bower install videojs-record`) or
 the plugin or [download](https://github.com/collab-project/videojs-record/releases)
 the library and dependencies elsewhere.
 
-Note about video.js v5.0: this plugin is [currently](https://github.com/collab-project/videojs-record/issues/6) only compatible with video.js v.4.x
-releases (for example [4.12.15](https://github.com/videojs/video.js/tree/v4.12.15)).
+Since v1.0 this plugin is compatible with video.js 5.0 and newer. If you want to use
+this plugin with an older video.js 4.x version, check the
+[archived releases](https://github.com/collab-project/videojs-record/releases)
+for a 0.9.x or older release.
 
 Dependencies
 ------------
@@ -47,8 +49,8 @@ Usage
 Start by including the video.js stylesheet and library:
 
 ```html
-<link href="//vjs.zencdn.net/4.12.15/video-js.css" rel="stylesheet">
-<script src="//vjs.zencdn.net/4.12.15/video.js"></script>
+<link href="//vjs.zencdn.net/5.0/video-js.css" rel="stylesheet">
+<script src="//vjs.zencdn.net/5.0/video.js"></script>
 ```
 
 If you're going to record audio and/or video you need to include RecordRTC as well:
@@ -217,17 +219,14 @@ it returns a single WebM Blob object containing both audio and video.
 Customizing controls
 --------------------
 
-To disable and hide specific controls, use the video.js `children`
+To disable and hide specific controls, use the video.js `controlBar`
 option:
 
 ```javascript
-children: {
-    controlBar: {
-        children: {
-            // hide fullscreen control
-            fullscreenToggle: false
-        }
-    }
+controlBar: {
+    // hide volume and fullscreen controls
+    volumeMenuButton: false,
+    fullscreenToggle: false
 },
 ```
 
@@ -264,7 +263,7 @@ the Video.js language file and the plugin's language file:
 
 ```html
 <script src="videojs-record/dist/lang/nl.js"></script>
-<script src="//vjs.zencdn.net/4.12.15/lang/nl.js"></script>
+<script src="//vjs.zencdn.net/5.0/lang/nl.js"></script>
 ```
 
 And setting the Video.js player's `language` option:

diff --git a/bower.json b/bower.json
@@ -29,9 +29,9 @@
     "examples"
   ],
   "dependencies": {
-    "video.js": ">=4.11.0 < 5.0.0",
+    "video.js": ">=5.0.0",
     "wavesurfer.js": ">=1.0.44",
-    "videojs-wavesurfer": ">=0.9.9 < 1.0.0",
+    "videojs-wavesurfer": ">=1.0.1",
     "recordrtc": "git://github.com/muaz-khan/RecordRTC.git",
     "libvorbis.js": ">=0.5.1"
   },
@@ -42,7 +42,11 @@
     "grunt-contrib-concat": ">=0.4.0",
     "grunt-contrib-uglify": ">=0.5.0",
     "grunt-contrib-cssmin": ">=0.11.0",
+    "grunt-sass": "git://github.com/sindresorhus/grunt-sass.git",
     "grunt-videojs-languages": ">=0.0.4",
-    "grunt-csscomb": "git://github.com/csscomb/grunt-csscomb.git"
+    "videojs-font": "git://github.com/videojs/font.git",
+    "lodash": "^3.9.3",
+    "material-design-icons": "^2.0.0",
+    "webfonts-generator": "git://github.com/sunflowerdeath/webfonts-generator.git"
   }
 }
diff --git a/examples/animated-gif.html b/examples/animated-gif.html
@@ -4,16 +4,22 @@
   <meta charset="utf-8">
   <title>Animated GIF Example - Record Plugin for Video.js</title>
 
-  <link href="//vjs.zencdn.net/4.12.15/video-js.css" rel="stylesheet">
+  <link href="//vjs.zencdn.net/5.0/video-js.css" rel="stylesheet">
   <link href="../src/css/videojs.record.css" rel="stylesheet">
 
-  <script src="//vjs.zencdn.net/4.12.15/video.js"></script>
+  <script src="//vjs.zencdn.net/5.0/video.js"></script>
 
   <script src="//cdn.webrtc-experiment.com/RecordRTC.js"></script>
   <script src="//cdn.webrtc-experiment.com/gif-recorder.js"></script>
 
   <script src="../src/js/videojs.record.js"></script>
 
+  <style>
+  /* change player background color */
+  #myVideo {
+      background-color: #6EF55F;
+  }
+  </style>
 </head>
 <body>
 
@@ -25,14 +31,9 @@
     controls: true,
     width: 320,
     height: 240,
-    children: {
-        controlBar: {
-            children: {
-                muteToggle: false,
-                volumeControl: false,
-                fullscreenToggle: false
-            }
-        }
+    controlBar: {
+        volumeMenuButton: false,
+        fullscreenToggle: false
     },
     plugins: {
         record: {
@@ -44,9 +45,6 @@
     }
 });
 
-// change player background color
-player.el().style.backgroundColor = '#6EF55F';
-
 // error handling
 player.on('deviceError', function()
 {

diff --git a/examples/audio-only-ogg.html b/examples/audio-only-ogg.html
@@ -4,17 +4,28 @@
   <meta charset="utf-8">
   <title>Libvorbis Audio-only Example - Record Plugin for Video.js</title>
 
-  <link href="//vjs.zencdn.net/4.12.15/video-js.css" rel="stylesheet">
+  <link href="//vjs.zencdn.net/5.0/video-js.css" rel="stylesheet">
   <link href="../src/css/videojs.record.css" rel="stylesheet">
 
-  <script src="//vjs.zencdn.net/4.12.15/video.js"></script>
+  <script src="//vjs.zencdn.net/5.0/video.js"></script>
   <script src="/libvorbis.js/js/libvorbis.oggvbr.asyncencoder.min.js" async></script>
   <script src="//katspaugh.github.io/wavesurfer.js/dist/wavesurfer.min.js"></script>
   <script src="//katspaugh.github.io/wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js"></script>
   <script src="//collab-project.github.io/videojs-wavesurfer/dist/videojs.wavesurfer.min.js"></script>
 
   <script src="../src/js/videojs.record.js"></script>
 
+  <style>
+  /* place fullscreen control on right side of the player */
+  .video-js .vjs-custom-control-spacer {
+      display: block;
+      width: 100%;
+  }
+  /* change player background color */
+  #myAudio {
+      background-color: #9FD6BA;
+  }
+  </style>
 </head>
 <body>
 
@@ -46,9 +57,6 @@
     }
 });
 
-// change player background color
-player.el().style.backgroundColor = "#9FD6BA";
-
 // error handling
 player.on('deviceError', function()
 {

diff --git a/examples/audio-only.html b/examples/audio-only.html
@@ -4,17 +4,29 @@
   <meta charset="utf-8">
   <title>Audio-only Example - Record Plugin for Video.js</title>
 
-  <link href="//vjs.zencdn.net/4.12.15/video-js.css" rel="stylesheet">
+  <link href="//vjs.zencdn.net/5.0/video-js.css" rel="stylesheet">
   <link href="../src/css/videojs.record.css" rel="stylesheet">
 
-  <script src="//vjs.zencdn.net/4.12.15/video.js"></script>
+  <script src="//vjs.zencdn.net/5.0/video.js"></script>
   <script src="//cdn.webrtc-experiment.com/RecordRTC.js"></script>
   <script src="//katspaugh.github.io/wavesurfer.js/dist/wavesurfer.min.js"></script>
   <script src="//katspaugh.github.io/wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js"></script>
   <script src="//collab-project.github.io/videojs-wavesurfer/dist/videojs.wavesurfer.min.js"></script>
 
   <script src="../src/js/videojs.record.js"></script>
 
+  <style>
+  /* place fullscreen control on right side of the player */
+  .video-js .vjs-custom-control-spacer {
+      display: block;
+      width: 100%;
+  }
+  /* change player background color */
+  #myAudio {
+      background-color: #9FD6BA;
+  }
+  </style>
+
 </head>
 <body>
 
@@ -43,9 +55,6 @@
     }
 });
 
-// change player background color
-player.el().style.backgroundColor = "#9FD6BA";
-
 // error handling
 player.on('deviceError', function()
 {

diff --git a/examples/audio-video.html b/examples/audio-video.html
@@ -4,14 +4,25 @@
   <meta charset="utf-8">
   <title>Audio/Video Example - Record Plugin for Video.js</title>
 
-  <link href="//vjs.zencdn.net/4.12.15/video-js.css" rel="stylesheet">
+  <link href="//vjs.zencdn.net/5.0/video-js.css" rel="stylesheet">
   <link href="../src/css/videojs.record.css" rel="stylesheet">
 
-  <script src="//vjs.zencdn.net/4.12.15/video.js"></script>
+  <script src="//vjs.zencdn.net/5.0/video.js"></script>
   <script src="//cdn.webrtc-experiment.com/RecordRTC.js"></script>
 
   <script src="../src/js/videojs.record.js"></script>
 
+  <style>
+  /* place fullscreen control on right side of the player */
+  .video-js .vjs-custom-control-spacer {
+      display: block;
+      width: 100%;
+  }
+  /* change player background color */
+  #myVideo {
+      background-color: #E8E884;
+  }
+  </style>
 </head>
 <body>
 
@@ -32,9 +43,6 @@
     }
 });
 
-// change player background color
-player.el().style.backgroundColor = "#E8E884";
-
 // error handling
 player.on('deviceError', function()
 {