Merge pull request #52 from eventials/master

Compatible with latest Clappr version (0.2.58)

index.js

@@ -1,2 +1 @@
-import RTMP from './src/main'
-module.exports = window.RTMP = RTMP;
+export default require('./src/main.js')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clappr-rtmp",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "RTMP Support for Clappr Player",
   "main": "dist/rtmp.js",
   "author": "Flávio Ribeiro",
@@ -21,21 +21,28 @@
   },
   "scripts": {
     "build_swf": "$(find $HOME/airsdk/ -name mxmlc | head -n1) -default-background-color=0x000000 -default-size=640,360 -language=as3 -output=./public/RTMP.swf -optimize=true -compress=true -use-gpu=true -target-player=11.1 -use-network=false ./src/RTMP.as -library-path+=./src/OSMF.swc",
-    "release": "node_modules/webpack/bin/webpack.js --progress -d -p --optimize-minimize --optimize-dedupe --output-filename rtmp.min.js",
-    "build": "node_modules/webpack/bin/webpack.js"
+    "release": "node_modules/.bin/webpack --progress -d --optimize-minimize --optimize-dedupe --output-filename rtmp.min.js",
+    "build": "node_modules/.bin/webpack --progress",
+    "watch": "node_modules/.bin/webpack --progress --watch",
+    "test": "karma start --single-run --browsers Chrome",
+    "start": "node_modules/.bin/webpack-dev-server --content-base public/ --output-public-path /latest --hot",
+    "lock": "rm -rf npm-shrinkwrap.json node_modules && npm install --silent && npm shrinkwrap"
   },
   "dependencies": {
     "clappr": "latest"
   },
   "devDependencies": {
-    "babel-core": "^6.5.1",
-    "babel-loader": "^6.2.2",
-    "babel-plugin-add-module-exports": "^0.1.2",
-    "babel-preset-es2015": "^6.5.0",
-    "transfer-webpack-plugin": "^0.1.4",
+    "babel-core": "^5.8.25",
+    "babel-loader": "^5.3.2",
+    "css-loader": "^0.18.0",
     "html-loader": "^0.3.0",
+    "mocha": "^2.3.2",
+    "mocha-loader": "^0.7.1",
+    "node-sass": "^3.3.3",
     "sass-loader": "^3.1.1",
     "raw-loader": "^0.5.1",
-    "webpack": "^1.12.2"
+    "style-loader": "^0.12.4",
+    "webpack": "^1.12.2",
+    "transfer-webpack-plugin": "^0.1.4"
   }
 }

src/RTMP.as

@@ -125,12 +125,31 @@ package {
       ExternalInterface.addCallback("getPosition", getPosition);
       ExternalInterface.addCallback("getDuration", getDuration);
       ExternalInterface.addCallback("getCurrentLevel", getCurrentLevel);
+      ExternalInterface.addCallback("getBytesLoaded", getBytesLoaded);
+      ExternalInterface.addCallback("getBytesTotal", getBytesTotal);
       ExternalInterface.addCallback("getNumLevels", getNumLevels);
       ExternalInterface.addCallback("getBitrateForLevel", getBitrateForLevel);
       ExternalInterface.addCallback("isDynamicStream", isDynamicStream);
       ExternalInterface.addCallback("isAutoSwitchLevels", isAutoSwitchLevels);
     }
 
+    private function getBytesTotal():Number {
+      if (netStream) {
+        return netStream.bytesTotal;
+      }
+      else {
+          return 0;
+      }
+    }
+    private function getBytesLoaded():Number {
+        if (netStream) {
+          return netStream.bytesLoaded;
+        }
+        else {
+            return 0;
+        }
+    }
+
     private function onTraitAdd(event:MediaElementEvent):void {
       if (mediaElement.hasTrait(MediaTraitType.LOAD)) {
         netStreamLoadTrait = mediaElement.getTrait(MediaTraitType.LOAD) as NetStreamLoadTrait;
@@ -221,7 +240,7 @@ package {
         } else {
           mediaPlayer.play();
         }
-      } catch {
+      } catch (err:Error) {
         playbackState = "ERROR";
         _triggerEvent('statechanged');
       }

src/main.js

@@ -2,14 +2,9 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import {Browser} from 'clappr'
-import {Events} from 'clappr'
-import {Flash} from 'clappr'
-import {Mediator} from 'clappr'
-import {Styler} from 'clappr'
-import template from 'clappr/src/base/template'
-
-import flashHTML from 'html!../public/flash.html'
+import {Browser, Events, Flash, Mediator, Styler, UICorePlugin, template} from 'clappr'
+
+import flashHTML from '../public/flash.html'
 import flashStyle from '!raw!sass!../public/flash.scss'
 
 export default class RTMP extends Flash {
@@ -27,14 +22,14 @@ export default class RTMP extends Flash {
 
     constructor(options) {
         super(options)
-        this.options = options
         this.options.rtmpConfig = this.options.rtmpConfig || {}
         this.options.rtmpConfig.swfPath = this.options.rtmpConfig.swfPath || '//cdn.jsdelivr.net/clappr.rtmp/latest/assets/RTMP.swf'
         this.options.rtmpConfig.wmode = this.options.rtmpConfig.wmode || 'transparent' // Default to transparent wmode - IE always uses gpu as per objectIE
         this.options.rtmpConfig.bufferTime = this.options.rtmpConfig.bufferTime === undefined ? 0.1 : this.options.rtmpConfig.bufferTime
         this.options.rtmpConfig.scaling = this.options.rtmpConfig.scaling || 'letterbox'
         this.options.rtmpConfig.playbackType = this.options.rtmpConfig.playbackType || this.options.src.indexOf('live') > -1
         this.options.rtmpConfig.startLevel = this.options.rtmpConfig.startLevel === undefined ? -1 : this.options.rtmpConfig.startLevel
+        this.addListeners()
         this._setupPlaybackType()
     }
 
@@ -47,11 +42,19 @@ export default class RTMP extends Flash {
     }
 
     get currentLevel() {
-        return this.el.getCurrentLevel();
+        if (this._isReadyState) {
+            return this.el.getCurrentLevel();
+        }
+
+        return undefined;
     }
 
     get numLevels() {
-        return this.el.getNumLevels();
+        if (this._isReadyState) {
+            return this.el.getNumLevels();
+        }
+
+        return undefined;
     }
 
 
@@ -122,6 +125,7 @@ export default class RTMP extends Flash {
 
     _levelChange() {
         this.trigger(Events.PLAYBACK_LEVEL_SWITCH_END)
+        this.trigger(Events.PLAYBACK_BITRATE, {level: this.currentLevel})
     }
 
     findLevelBy(id) {
@@ -145,7 +149,7 @@ export default class RTMP extends Flash {
             this.settings.right = ["fullscreen", "volume"]
         }
 
-        this.trigger(Events.PLAYBACK_SETTINGSUPDATE)
+        this.trigger(Events.PLAYBACK_SETTINGSUPDATE, this.name)
     }
 
     render() {

webpack.config.js

@@ -25,10 +25,25 @@ module.exports = {
                 loader: 'babel',
                 query: {
                     compact: true,
-                    presets: ['es2015'],
                 }
             },
-            { test: /\.(png|woff|eot|ttf|swf)/, loader: 'file-loader' }
+            {
+                test: /\.scss$/,
+                loaders: ['css', 'sass?includePaths[]='
+                  + path.resolve(__dirname, './node_modules/compass-mixins/lib')
+                  + '&includePaths[]='
+                  + path.resolve(__dirname, './node_modules/clappr/src/base/scss')
+                  + '&includePaths[]='
+                  + path.resolve(__dirname, './src/base/scss')
+                ],
+                include: path.resolve(__dirname, 'src'),
+            },
+            {
+                test: /\.html/, loader: 'html?minimize=false'
+            },
+            {
+                test: /\.(png|woff|eot|ttf|swf)/, loader: 'file-loader'
+            }
         ],
     },
     resolve: {