Adding new module to kaltura html5 player

I am trying to add new module to the player.

What i do is in KalturaSupport.php i am adding my newPlugin.js same way other plugins are added:

"newPlugin" => array(
	'scripts' => "resources/uiConfComponents/newPlugin.js",				
	'kalturaPluginName' => 'newPlugin'
),

In KMC i edit the uiConf for the player i use. In “Config:” field I am adding my module to plugins:

 "newPlugin": {
      "plugin": true
    },

Player is trying to load the plugin but ends with an error, consol log shows:

Uncaught Error: Unknown dependency: newPlugin /html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=jquery%2Cmediawi…ack%2CloadingSpinner&only=scripts&skin=no-theme&version=20140626T130418Z:1recurse /html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=jquery%2Cmediawi…ack%2CloadingSpinner&only=scripts&skin=no-theme&version=20140626T130418Z:1resolve /html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=jquery%2Cmediawi…ack%2CloadingSpinner&only=scripts&skin=no-theme&version=20140626T130418Z:1resolve /html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=jquery%2Cmediawi…ack%2CloadingSpinner&only=scripts&skin=no-theme&version=20140626T130418Z:1mw.loader.using /html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=jquery%2Cmediawi…ack%2CloadingSpinner&only=scripts&skin=no-theme&version=20140626T130418Z:1$.fn.embedPlayer (program):6(anonymous function) /html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=MD5%2CacCheck%2C…ager%7Cmw.MwEmbedSupport.style&skin=no-theme&version=20140626T130418Z&*:44(anonymous function) /html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=MD5%2CacCheck%2C…ager%7Cmw.MwEmbedSupport.style&skin=no-theme&version=20140626T130418Z&*:44execute /html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=jquery%2Cmediawi…ack%2CloadingSpinner&only=scripts&skin=no-theme&version=20140626T130418Z:1mw.loader.implement /html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=jquery%2Cmediawi…ack%2CloadingSpinner&only=scripts&skin=no-theme&version=20140626T130418Z:1(anonymous function)

Any ideas how to make it works?

Not entirely sure if it will help, but you can try this.
Kaltura html5 player is in web/content/html5/#### folder. There are several versions there. choose the ones you are are using and then add your plugins etc and configure them. It’s possible you may have to rerun your config after this.
I don’t think touching kalturasupport.php is needed.

i’ve added plugins to the folder with other plugins as vast or downloader which is:

opt\kaltura\web\html5\html5lib\v2.11\modules\KalturaSupport\resources\uiConfComponents\

but the error is still there. What do you mean by configure them - this is probably the part that i am missing, i am not sure where to set it to run. I found that all other plugins are in KalturaSupport.php thats why i’ve added it there as well. All the orginal are added to Config as well so i’ve added mine there.

What rerun config means?

thanks

to have full context of what your doing … you may want to create a pull request so we can see exactly what was changed. You have to include a “kalturaPluginName” attribute to manage the json config name mapping.

Michael could you give me more detailed info how to do what you describing

If you adding an additional plugin … if you could check out the mwEmbed project from github…make your changes and then submit them back as a pull request we could more easily review your environment and determine what went wrong.

the only changes are in KalturaSupport.php and in uiConf (they are above), newPlugin.js is under resources/uiConfComponents/newPlugin.js and looks like that:

( function( mw, $ ) {"use strict";

	mw.PluginManager.add( 'newPlugin', mw.KBaseComponent.extend({
		console.log('newPlugin.add');
		defaultConfig: {
			align: "right",			
		},
		isSafeEnviornment: function(){
			return !mw.isIOS();
		},
		setup: function(){
			var _this = this;
			console.log('newPlugin');
		}
	}));

} )( window.mw, window.jQuery );

you can download zipped project from here
filedropper dot com / mwembed-master

what you have above looks like it should work. Make sure file permissions are correct ? … A pull request will help us validate the diff better then a zip.

diff --git a/modules/KalturaSupport/KalturaSupport.php b/modules/KalturaSupport/KalturaSupport.php
index fb33c1d..26dfa37 100644
--- a/modules/KalturaSupport/KalturaSupport.php
+++ b/modules/KalturaSupport/KalturaSupport.php
@@ -310,6 +310,10 @@
 			'dependencies' => 'mw.KBaseComponent',
 			'kalturaPluginName' => "download"
 		),
+		"testPlugin"=> array( 
+			'scripts' => "resources/uiConfComponents/testPlugin.js",			
+			'kalturaPluginName' => "testPlugin"
+		),
 		"jCarouse"=> array( 
 			'scripts' => "resources/uiConfComponents/jcarousellite_1.0.1.js",
 			 'dependencies' => 'touchSwipe'
diff --git a/modules/KalturaSupport/resources/uiConfComponents/testPlugin.js b/modules/KalturaSupport/resources/uiConfComponents/testPlugin.js
new file mode 100644
index 0000000..a60a90c
--- /dev/null
+++ b/modules/KalturaSupport/resources/uiConfComponents/testPlugin.js
@@ -0,0 +1,17 @@
+( function( mw, $ ) {"use strict";
+
+	mw.PluginManager.add( 'testPlugin', mw.KBaseComponent.extend({
+		console.log('testPlugin.add');
+		defaultConfig: {
+			align: "right",			
+		},
+		isSafeEnviornment: function(){
+			return !mw.isIOS();
+		},
+		setup: function(){
+			var _this = this;
+			console.log('testPlugin');
+		}
+	}));
+
+} )( window.mw, window.jQuery );
\ No newline at end of file

an observation when player calls:

http://myHost/html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=MD5%2CacCheck%2CacPreview%2Cbase64_encode%2Cclass%2CcontrolBarContainer%2CcurrentTimeLabel%2CdownloadPlugin%2CdurationLabel%2CfullScreenBtn%2Ckdark%2CkeyboardShortcuts%2ClargePlayBtn%2CliveStream%2CmatchMedia%2CmoderationPlugin%2CnativeBridge%2CplayPauseBtn%2CplaybackRateSelectorPlugin%2Cscreenfull%2Cscrubber%2CsideBarContainer%2CstatisticsPlugin%2CtopBarContainer%2Cutf8_encode%2CvolumeControl%2CwatermarkPlugin|jquery.client%2Ccolor%2Ccookie%2Cdebouncedresize%2ChoverIntent%2CmessageBox%2CmwEmbedUtil%2CmwExtension%2CnaturalSize|jquery.ui.core%2Cmouse%2Cposition%2Cslider%2Ctooltip%2CtouchPunch%2Cwidget|mediawiki.Uri%2CUtilitiesTime%2CUtilitiesUrl%2Cclient%2CjqueryMsg%2Ckmenu%2Clanguage%2Cutil|mediawiki.util.tmpl|mw.EmbedPlayer%2CEmbedPlayerImageOverlay%2CEmbedPlayerNative%2CEmbedPlayerNativeComponent%2CEmbedTypes%2CKAnalytics%2CKApi%2CKBaseComponent%2CKBasePlugin%2CKBaseScreen%2CKCuePoints%2CKDPMapping%2CKWidgetSupport%2CKalturaIframePlayerSetup%2
CMediaElement%2CMediaPlayer%2CMediaPlayers%2CMediaSource%2CPlayerElement%2CPlayerElementFlash%2CPlayerElementHTML%2CPlayerElementSilverlight%2CPluginManager%2CWidevine%7Cmw.MwEmbedSupport.style&skin=no-theme&version=20141015T073044Z&*

it doesnt work.

But if i do rewrite in Charles debug proxy and add my plugin to the query param “modules” it works - query looks like that

http://myHost/html5/html5lib/v2.11/load.php?debug=false&lang=en&modules=MD5%2CacCheck%2CacPreview%2Cbase64_encode%2Cclass%2CcontrolBarContainer%2CcurrentTimeLabel%2CdownloadPlugin%2CdurationLabel%2CfullScreenBtn%2Ckdark%2CkeyboardShortcuts%2ClargePlayBtn%2CliveStream%2CmatchMedia%2CmoderationPlugin%2CnativeBridge%2CplayPauseBtn%2CplaybackRateSelectorPlugin%2Cscreenfull%2Cscrubber%2CsideBarContainer%2CstatisticsPlugin%2CtestPlugin%2CtopBarContainer%2Cutf8_encode%2CvolumeControl%2CwatermarkPlugin|jquery.client%2Ccolor%2Ccookie%2Cdebouncedresize%2ChoverIntent%2CmessageBox%2CmwEmbedUtil%2CmwExtension%2CnaturalSize|jquery.ui.core%2Cmouse%2Cposition%2Cslider%2Ctooltip%2CtouchPunch%2Cwidget|mediawiki.Uri%2CUtilitiesTime%2CUtilitiesUrl%2Cclient%2CjqueryMsg%2Ckmenu%2Clanguage%2Cutil|mediawiki.util.tmpl|mw.EmbedPlayer%2CEmbedPlayerImageOverlay%2CEmbedPlayerNative%2CEmbedPlayerNativeComponent%2CEmbedTypes%2CKAnalytics%2CKApi%2CKBaseComponent%2CKBasePlugin%2CKBaseScreen%2CKCuePoints%2CKDPMapping%2CKWidgetSupport%2CKalturaIframePlayerSetup%2
CMediaElement%2CMediaPlayer%2CMediaPlayers%2CMediaSource%2CPlayerElement%2CPlayerElementFlash%2CPlayerElementHTML%2CPlayerElementSilverlight%2CPluginManager%2CWidevine%7Cmw.MwEmbedSupport.style&skin=no-theme&version=20141015T073044Z&*

is there something i am missing?