Merge pull request #44 from kaltura/mobile-simulator

support mobile simulation mode

Author: amirch1

app/js/controllers/EditCtrl.js

@@ -13,9 +13,15 @@ KMCMenu.controller('EditCtrl', ['$scope','$http', '$timeout','PlayerData','Playe
 	$scope.menuOpen = true;
 	// auto preview flag
 	$scope.autoPreview = localStorageService.get('autoPreview') ? localStorageService.get('autoPreview')=='true' : false;
+	$scope.simulateMobile = false;
 	$scope.setAutoPreview = function(){
 		localStorageService.set('autoPreview', !$scope.autoPreview);
 	};
+	$scope.setSimulateMobile = function(){
+		setTimeout(function(){
+			$scope.refreshPlayer();
+		},0);
+	};
 	if (window.parent.kmc && window.parent.kmc.vars.studio.showFlashStudio === false){
 		$(".menuFooter").css("bottom","1px");
 	}
@@ -397,6 +403,9 @@ KMCMenu.controller('EditCtrl', ['$scope','$http', '$timeout','PlayerData','Playe
 		if ($scope.playerData.config.enviornmentConfig && $scope.playerData.config.enviornmentConfig.localizationCode){ // support localizationCode
 			angular.extend(flashvars, {'localizationCode': $scope.playerData.config.enviornmentConfig.localizationCode});
 		}
+		if ($scope.simulateMobile){
+			angular.extend(flashvars,{'EmbedPlayer.SimulateMobile': true});
+		}
 		delete $scope.playerData.config.enviornmentConfig;
 		angular.extend(flashvars,{'jsonConfig': angular.toJson($scope.playerData.config)}); // update the player with the new configuration
 		if (window.parent.kmc && window.parent.kmc.vars.ks){
@@ -421,7 +430,7 @@ KMCMenu.controller('EditCtrl', ['$scope','$http', '$timeout','PlayerData','Playe
 		}
 
 		// set editable uivars list
-		$scope.excludedUiVars = ['autoPlay', 'autoMute', 'adsOnReplay', 'enableTooltips','EmbedPlayer.SimulateMobile']; // these uiVars are already in the menu, do not list them
+		$scope.excludedUiVars = ['autoPlay', 'autoMute', 'adsOnReplay', 'enableTooltips', 'EmbedPlayer.EnableMobileSkin']; // these uiVars are already in the menu, do not list them
 		$scope.playerData.vars = [];
 		var uivar;
 		for (uivar in $scope.playerData.config.uiVars){

app/view/edit.html

@@ -1 +1 @@
-<div style="height: 100%">	<form name="menuForm">		<div class="menu" ng-style="menuOpen ? {'width': 440 +'px'} : {'width': 10 + 'px'}">			<div ng-repeat="category in menuData" ng-include="'templates/category.html'"></div>			<div class="categories">				<div ng-repeat="category in menuData" ng-include="'templates/categoryIcon.html'"></div>			</div>			<div class="menuFooter"></div>		</div>		<div class="toggleMenu" ng-click="toggleMenu()"  ng-style="menuOpen ? {'left': 439 +'px'} : {'left': 10 + 'px'}">			<i ng-class="{'icon-Close': menuOpen,'icon-open': !menuOpen}"></i>		</div>	</form>	<div class="previewArea" ng-style="menuOpen ? {'margin-left': 490 +'px'} : {'margin-left': 50 + 'px'}">		<div style="width: 100%; height: 40px">			<div style="height: 30px; position: fixed; padding-top: 5px">				<label style="font-weight: normal" class="autoPreview"><input style="margin-right: 5px; " type="checkbox" ng-model="autoPreview" ng-click="setAutoPreview()">Auto Preview</label>			</div>			<button class="btn btn-default" style="margin-left: 120px" ng-hide="autoPreview" ng-class="{'btn-success':checkPlayerRefresh()}" ng-click="refreshPlayer()"><i class="glyphicon glyphicon-refresh">&nbsp;</i>Preview Changes</button>			<button class="btn btn-primary pull-right spaceLeft" ng-click="save()">Save Player Settings</button>			<button class="btn btn-default pull-right" ng-click="backToList()">Back to Players List</button>		</div>		<!--pre id="debugger" style="margin-top: 10px; width: 100%; height: 500px; display: none">{{menuData}}</pre-->		<div style="height: 85%;  margin-top: 15px; margin-bottom: 15px; overflow-y: auto">			<!-- Companion placeholders for VAST -->			<div id="Comp_300x250"></div>			<div id="Comp_728x90"></div>			<div id="kVideoTarget" style="margin: auto" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"></div>		</div>	</div></div>
+<div style="height: 100%">	<form name="menuForm">		<div class="menu" ng-style="menuOpen ? {'width': 440 +'px'} : {'width': 10 + 'px'}">			<div ng-repeat="category in menuData" ng-include="'templates/category.html'"></div>			<div class="categories">				<div ng-repeat="category in menuData" ng-include="'templates/categoryIcon.html'"></div>			</div>			<div class="menuFooter"></div>		</div>		<div class="toggleMenu" ng-click="toggleMenu()"  ng-style="menuOpen ? {'left': 439 +'px'} : {'left': 10 + 'px'}">			<i ng-class="{'icon-Close': menuOpen,'icon-open': !menuOpen}"></i>		</div>	</form>	<div class="previewArea" ng-style="menuOpen ? {'margin-left': 490 +'px'} : {'margin-left': 50 + 'px'}">		<div style="width: 100%; height: 40px">			<div style="height: 30px; position: fixed; padding-top: 5px">				<label style="font-weight: normal" class="autoPreview"><input style="margin-right: 5px; " type="checkbox" ng-model="autoPreview" ng-click="setAutoPreview()">Auto Preview</label>				<label style="font-weight: normal" class="autoPreview"><input style="margin-right: 5px;margin-left: 5px " type="checkbox" ng-model="simulateMobile" ng-click="setSimulateMobile()">Simulate Mobile Device</label>			</div>			<button class="btn btn-default" style="margin-left: 290px" ng-hide="autoPreview" ng-class="{'btn-success':checkPlayerRefresh()}" ng-click="refreshPlayer()"><i class="glyphicon glyphicon-refresh">&nbsp;</i>Preview Changes</button>			<button class="btn btn-primary pull-right spaceLeft" ng-click="save()">Save Player Settings</button>			<button class="btn btn-default pull-right" ng-click="backToList()">Back to Players List</button>		</div>		<!--pre id="debugger" style="margin-top: 10px; width: 100%; height: 500px; display: none">{{menuData}}</pre-->		<div style="height: 85%;  margin-top: 15px; margin-bottom: 15px; overflow-y: auto">			<!-- Companion placeholders for VAST -->			<div id="Comp_300x250"></div>			<div id="Comp_728x90"></div>			<div id="kVideoTarget" style="margin: auto" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"></div>		</div>	</div></div>