Remote App

mccorkled

Member
RL Member
asdfrewq (this is a username) made an app called "Remote" which somehow works with RL to launch games. It is a great app but the "Now Playing" menu which includes items such as save/load, change disc, etc. does not work. I was in brief contact with asdfrewq before I was banned but s/he did not seem interested in helping me solve another issue I was having. I was wondering if any of the RL programmers can take a look at this code and see if something isn't right. I (think) I remember this menu working a while ago but RL have been updated several times since then.

The Remote application uses JS to call functions and HTML to display them. It's pretty cool.

Thanks :)

Here is the NowPlaying HTML part.
Code:
<div class="main">
	<div style="height: 60px"></div>		
	
	<div ng-if="!pageReady">
		<br><br><br>
		<i class="fa fa-spinner fa-2x fa-pulse"></i>
	</div> 
	
	<div  ng-if="pageReady">
		<div class="gameinfo" ng-if="inGame">
					
			<div class="box">
				<div class="npHeaderRight">
					<a href="" ng-click="sendCom('exit');"><div class="npHeaderButton"> 
						<i class="fa fa-times fa-lg fa-fw"></i><br>
						QUIT
					</div></a>
					
					<div style="height:4px;"></div>
					<a href="" ng-click="sendCom('multigame');"><div class="npHeaderButton"> 
						<i class="fa fa-toggle-off fa-lg fa-fw"></i><br>
						DISC
					</div></a>
					
					<div style="height:4px;"></div>
					<a href="" ng-click="sendCom('pause');"><div class="npHeaderButton"> 
						<i class="fa fa-pause fa-lg fa-fw"></i><br>
						PAUSE
					</div></a>
					<!--  -->
				</div>
				
				<div class="npHeaderLeft">
					<div style="display: table; height: 110px; width:100%;"><div style="display: table-cell; vertical-align: top; ">
						<img ng-src="../media/{{ data.system }}/Images/Artwork1/{{ data.game.name }}.png" style="max-width:100%; max-height:110px;">
					</div></div>
					<div style="display: table; height: 30px; width:100%;"><div style="display: table-cell; vertical-align: bottom; ">
						<img ng-src="../media/Main Menu/Images/Wheel/{{ data.system }}.png" style="max-width:50%; max-height:30px;"><br>
					</div></div>
				</div>	
			</div>
			
			<br>
			
			<div class="npMenu">
				<div class="npMenuBox"><a href="" ng-click="changeMenu('savestate')">	<div><i class="fa fa-floppy-o fa-lg"></i><br>		Save/Load	</div></a></div>
				<div class="npMenuBox"><a href="" ng-click="changeMenu('info')">			<div><i class="fa fa-info fa-lg"></i><br>				Info			</div></a></div>
				<div class="npMenuBox"><a href="" ng-click="changeMenu('media')">			<div><i class="fa fa-picture-o fa-lg"></i><br>	Media			</div></a></div>
				<div class="npMenuBox"><a href="" ng-click="changeMenu('search')">		<div><i class="fa fa-search fa-lg"></i><br>			Search		</div></a></div>
				
			</div>
	
			<br>
					
			<div ng-if="menuItem == 'savestate'">			
				<div ng-repeat="saves in data.saveStates.save track by $index">
					<div class="box" style="height:50px;">
						<div class="npSaveRight">
							<div class="npSaveBox">
								<a href="" ng-click="sendCom('save', $index+1);"><div class="npSaveButton">  
									<i class="fa fa-floppy-o fa-lg"></i><br>Save
								</div></a>
							</div>
							
							<div class="npSaveBox">
								<a href="" ng-click="sendCom('load', $index+1);"><div class="npSaveButton">  
									<i class="fa fa-folder-open-o fa-lg"></i><br>Load
								</div></a>
								
							</div>
						</div>
						
						<div class="npSaveLeft" style="line-height:40px;">
							<b>Slot {{$index+1}}:</b>
						</div>
												
						<br>
					</div>
					
					<div class="box"><p> {{ data.saveStates.times[$index] }} </p></div>
					<br>
					
				</div>
			</div>
			
			<div ng-if="menuItem=='info' && menuReady" class="gameDetails">
				<span id="gameBold">Title: </span><span id="gameText">{{info.game.description}}</span>
				<br>
				
				<span id="gameBold">Released: </span> 
				<span id="gameText" ng-if="info.moreInfo.released">{{info.moreInfo.released}}</span>
				<span id="gameText" ng-if="!info.moreInfo.released">{{info.game.year}}</span>
				<br>
				
				<span id="gameBold">Developer: </span> 
				<span id="gameText" ng-if="info.moreInfo.released">{{info.moreInfo.developer}}</span>
				<span id="gameText" ng-if="!info.moreInfo.released">{{info.game.manufacturer}}</span>				
				<br>
				
				<span ng-if="info.moreInfo.score">
					<span id="gameBold">Score: </span><span id="gameText">{{info.moreInfo.score}} / 5.0</span><br>
				</span>
				
				<span ng-if="info.moreInfo.genre">
					<span id="gameBold">genre: </span><span id="gameText">{{info.moreInfo.genre}}</span><br>
				</span>
	
				<span ng-if="info.moreInfo.perspective">
					<span id="gameBold">perspective: </span><span id="gameText">{{info.moreInfo.perspective}}</span><br>
				</span>
	
				<span ng-if="info.moreInfo.players">
					<span id="gameBold">players: </span><span id="gameText">{{info.moreInfo.players}}</span><br>
				</span>
	
				<span ng-if="info.moreInfo.url" id="gameBold"><br><a href="{{info.moreInfo.url}}">More info at Moby Games...</a><br></span>
				
				<span ng-if="info.moreInfo.description" id="gameBold"><br>Description:
				<br>
				<span id="gameText" ng-bind-html="info.moreInfo.description"></span></span>
				<br><br><br>	
			</div>
			<div ng-if="menuItem=='info' && !menuReady">
				<br><br>
				<i class="fa fa-spinner fa-2x fa-pulse"></i>
				
			</div>
				
			<div ng-if="menuItem=='media'">
				<div>
					<video id="videoplayer" width="100%" preload="auto" poster="../media/{{ data.system }}/Images/Artwork1/{{ data.game.name }}.png" >
					  <source ng-src="{{ video }}" type="video/mp4">
					</video>
					<script>
						jQuery( document ).ready(function($) {
						  $('#videoplayer').click(function() {;
						    if (video.paused){
						    	video.currentTime = time
						    	video.play();
						    } else {
						    	time = video.currentTime; 
						    	video.load();
						    }
						  });
						});
						var time = 0;
						var video = $('#videoplayer')[0]; 
						var videoJ = $('#videoplayer');
						videoJ.on('ended',function(){
							video.load();     
						});
					</script>
				</div>
			</div>
			
			<div ng-if="menuItem=='search'" class="npSearch">
				<p>Query Builder:</p>
				<form name="myForm" ng-submit="extSearch(preview)">			
					<label>
				    <input type="checkbox" ng-model="qb.cbTitle" checked>
				    Title: 
				    <input type="text" value="{{data.game.name}}" ng-model="qb.title" >
				  </label>
				  <br>
					<label>
				    <input type="checkbox" ng-model="qb.cbSystem" checked>
				    System: 
				    <input type="text" value="{{data.game.system}}" ng-model="qb.system" >
				  </label>
				  <br>
					<label>
				    <input type="checkbox" ng-model="qb.cbEmulator">
				    Emulator: 
				    <input type="text" value="{{data.emulator}}" ng-model="qb.emulator" >
				  </label>
				   <br>
					<label>
				    <input type="checkbox" ng-model="qb.cbOption">
				    Option: 
				    <select ng-model="qb.option">
							<option value="cheats" selected>Cheats</option>
							<option value="walkthrough">Walkthrough</option>
							<option value="manual">Manual</option>
							<option value="help">Help</option>
						</select>
				  </label>
				  <br>
					<label>
				    <input type="checkbox" ng-model="qb.cbOther" checked>
				    Other: 
				    <input type="text" value="" ng-model="qb.other" >
				  </label>
				  <br>
				  
				  <input type="submit" value="Search"><br>
				  <i>"{{ preview }}"</i>
				 	
				</form>	
			
			</div>
		</div>
		
		<div class="extSearch" ng-if="showSearch">
			<a href="" ng-click="exitSearch()">
				<div class="extSearchTop">
						<img ng-src="../media/{{ data.system }}/Images/Artwork1/{{ data.game.name }}.png" style="width:auto; max-height:50px;">
				</div>
		</a>
			<div class="extSearchBottom">
				<embed ng-src="{{searchUrl}}">
			</div>
		</div>
		
		
		
		<div class="gameinfo" ng-if="!inGame">
			<br><br><br><br>
			No game detected.
		</div>
		
		
					
	</div>		
	<br><br><br>	
</div>

Here is the Javascript part.

Code:
'use strict';

angular.module('hyperspinFE.nowplaying', [
	'ngRoute',
])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  
  .when('/nowplaying', {
    templateUrl: 'www/views/nowplaying/nowplaying.html',
 		controller: 'nowplayingCtrl',
 		reloadOnSearch: false
  }) 
  
}])


.controller('nowplayingCtrl', function NowPlayingController($scope, $route, $http, $window, apiservice, util, $sce, $location) {
	$scope.pageTitle = "Now Playing";
 	$scope.inGame=false;
 	$scope.pageReady=false;
 	$scope.menuItem='savestate'
 	$scope.qb = { };
 	$scope.showSearch = false;
 	
 	var infoLoaded = false;
 	var searchLoaded = false;
 	var mediaLoaded = false;
	var savestateLoaded = false;
 	
 	$scope.$on('$routeChangeSuccess', function() {
 		
	}); 	
 	$scope.$watch(function () {
		return location.hash
	}, function (value) {		
		$scope.changeMenu($location.hash());
	});
 	
 	
 	
 	$scope.changeMenu = function(item){
		$location.hash(item)
		$scope.menuItem = item;	
		$scope.showSearch = false;
		
		if (item == "info" & !infoLoaded){
			$scope.menuReady = false;
			var request = {api: 'gameinfo', args: '&system='+util.urlEncode($scope.data.game.system)+"&game="+util.urlEncode($scope.data.game.name)}
			apiservice.makeCall(request).then(function(response) {		
				$scope.info=response.data
				if ($scope.info.moreInfo){
					$scope.info.moreInfo.description = $sce.trustAsHtml($scope.info.moreInfo.description);
				}
				$scope.menuReady = true;
				infoLoaded = true;
		  });
		  
		} else if (item == "media" & !mediaLoaded){
			$scope.video = $sce.trustAsResourceUrl('../media/' + $scope.data.game.system +'/Video/'+ $scope.data.game.name +'.mp4');
			mediaLoaded=true;
			
		} else if (item == "search" & !searchLoaded){
			$scope.qb = { 
				title: $scope.data.game.description.replace(/\s*\(.*?\)\s*/g, ''), 
				system: $scope.data.game.system, 
				emulator: $scope.data.emulator, 
				option: 'cheats',
				other: '',
				
				cbTitle: true,
				cbSystem: false,
				cbEmulator: false,
				cbOption: false,
				cbOther: true
				}
				searchLoaded=true;
		} else if (item == "showsearch"){
			$scope.showSearch = true;
		}
	}

	$scope.$watch('qb', function() {
		$scope.preview = ""
		if ($scope.qb.cbTitle){ $scope.preview += $scope.qb.title + " "} 
 		if ($scope.qb.cbSystem){ $scope.preview += $scope.qb.system + " "}
    if ($scope.qb.cbEmulator){ $scope.preview += $scope.qb.emulator + " "}
		if ($scope.qb.cbOption){ $scope.preview += $scope.qb.option + " "}
		if ($scope.qb.cbOther){ $scope.preview += $scope.qb.other + " "}
  }, true);
	
	$scope.extSearch = function(query){
		$scope.changeMenu("showsearch");
		var url = "https://duckduckgo.com/?q="+query
		$scope.searchUrl = $sce.trustAsResourceUrl(url);
		$scope.showSearch = true;
	}
	$scope.exitSearch = function(){
		$scope.changeMenu("search");
		$scope.showSearch = false;
	}
 	$scope.sendCom = function(command, arg){
 		var request = false;
 		if (command == "multigame"){
 			request = {api: 'command', args: '&com=multigame'}
		}else if (command == "pause"){
			request = {api: 'command', args: '&com=pause'}
		}else if (command == "exit"){
 			request = {api: 'command', args: '&com=exitgame'}
		} else if (command == "save"){
			request = {api: 'savestate', args: '&action=save&slot='+arg}
		}else	if (command == "load"){
			request = {api: 'savestate', args: '&action=load&slot='+arg}
		}
		
		if (request){
			apiservice.makeCall(request).then(function(response) {
				if (request.api == 'savestate'){
					$window.location.reload();
				}
			});
		}
	}
 	
 	apiservice.makeCall({api: 'nowplaying', args: ''}).then(function(response) {		
		$scope.data=response.data
		if($scope.data.game){
			$scope.inGame=true;
			for (var i in $scope.data.saveStates.times) {
				if (!$scope.data.saveStates.times[i]){
					$scope.data.saveStates.times[i] = ""
				}
			}
		}
		if ($location.hash()){
	 		$scope.changeMenu($location.hash())
	 	} else {
	 		$scope.changeMenu('savestate')
	 	}
 	
		$scope.pageReady = true;
	});
 	
 	
 	
 	

});

Here is the original program.
http://www.hyperspin-fe.com/files/file/11303-hyperremote/
 
Last edited:

horseyhorsey

New member
RL Member
Looks like Angular 1.x.

apiservice.makeCall({api: 'nowplaying', args: ''}).then(function(response)

Maybe this apiservice is dead? This service I'd imagine is in another Ng controller.

Sorry not downloaded, just though I'd give you an answer.
 

mccorkled

Member
RL Member
Looks like Angular 1.x.

apiservice.makeCall({api: 'nowplaying', args: ''}).then(function(response)

Maybe this apiservice is dead? This service I'd imagine is in another Ng controller.

Sorry not downloaded, just though I'd give you an answer.

Interesting. Thank you. There is a lot of JS which I can handle but I do not know about Angular. If you could do any testing that would be awesome.
 

brolly

Administrator
Developer
Sorry, but I'm not touching anything JavaScript/AngularJS related. You'll have to see if someone who actually likes to work with those to help you out. I hate JavaScript and I only have very basic knowledge in AngularJS (which is now obsolete anyway) so it would be quite some work for me to figure it out.
The guy who wrote this and made it public should offer some support.
 
Top