index.php 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <?php
  2. include_once '../auth.php';
  3. if (isset($_GET['filepath'])){
  4. header("Location: embedded.php?filepath=" . $_GET['filepath'] . "&filename=" . $_GET['filename']);
  5. }
  6. ?>
  7. <html>
  8. <head>
  9. <link rel="stylesheet" href="../script/tocas/tocas.css">
  10. <script src="../script/tocas/tocas.js"></script>
  11. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  12. <script src="../script/jquery.min.js"></script>
  13. <script src="../script/ao_module.js"></script>
  14. <link rel="manifest" href="manifest.json">
  15. <style>
  16. body{
  17. background-color:#0c0c0c;
  18. color:white;
  19. }
  20. .white{
  21. color:white !important;
  22. }
  23. .bottom{
  24. position:fixed;
  25. width:100%;
  26. height:35px;
  27. left:0px;
  28. bottom:0px;
  29. padding-bottom:5px;
  30. padding: 5px;
  31. }
  32. </style>
  33. </head>
  34. <?php
  35. $rid = rand(1000,9999);
  36. ?>
  37. <body>
  38. <br>
  39. </body>
  40. <script>
  41. //may need update after iPadOS update.
  42. var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
  43. var currDisplay = "idle";
  44. var video = document.getElementById("video");
  45. var audio = new Audio("");
  46. loadScreen();
  47. var rid = $("#rid").text().trim();
  48. ao_module_setWindowSize(395,520);
  49. ao_module_setWindowTitle("RemotePlay");
  50. ao_module_setWindowIcon("feed");
  51. if (ao_module_virtualDesktop){
  52. $(".dirModeOnly").hide();
  53. }
  54. setInterval(check,1000);
  55. function check(){
  56. $.get("check.php?rid=" + rid,function(data){
  57. if (data.includes("ERROR") == false){
  58. if (data[0] == false){
  59. //Nothing is found
  60. }else{
  61. //There is content. Read it from JSON
  62. var fileinfo = data[1];
  63. console.log(fileinfo[1]);
  64. if (fileinfo[0] == "fopen"){
  65. $.get("opr.php?opr=mime&file=" + fileinfo[1],function(filetype){
  66. audio.pause();
  67. audio.currentTime = 0;
  68. //Check if the file path is from external storage. If yes, append extDiskAccess into the path for web client access
  69. if (fileinfo[1].includes("/media/") && !fileinfo[1].includes("extDiskAccess.php?file=")){
  70. fileinfo[1] = "../SystemAOB/functions/extDiskAccess.php?file=" + fileinfo[1];
  71. }
  72. //open the given filepath
  73. if(filetype == "image"){
  74. $("body").html('<img src="' + fileinfo[1] + '" style="height: 100%;display: block;margin-left: auto;margin-right: auto;"></img');
  75. currDisplay = "image";
  76. ao_module_setWindowSize(800,800);
  77. }else if(filetype == "video"){
  78. $("body").html('<video autoplay loop id="video" style="height: 100%;display: block;margin-left: auto;margin-right: auto;width: 100%;"><source src="' + fileinfo[1] + '" type="video/mp4"></video><div class="ts snackbar"><div class="content"></div><a class="action"></a></div>');
  79. video = document.querySelector('video');
  80. var promise = video.play();
  81. if (promise !== undefined) {
  82. promise.then(_ => {
  83. }).catch(error => {
  84. video.muted = true;
  85. video.play();
  86. ts('.snackbar').snackbar({
  87. content: 'Due to browser policy, please click on unmute button.',
  88. action: 'Unmute',
  89. actionEmphasis: 'negative',
  90. onAction: () => {
  91. unmute();
  92. }
  93. });
  94. });
  95. }
  96. currDisplay = "video";
  97. ao_module_setWindowSize(800,800);
  98. video = document.getElementById("video");
  99. }else if(filetype == "audio"){
  100. loadScreen();
  101. audio.volume = localStorage.getItem("global_volume");
  102. audio.loop = true;
  103. audio.pause();
  104. audio.currentTime = 0;
  105. audio.src = fileinfo[1];
  106. //audio.play();
  107. var promise = audio.play();
  108. if (promise !== undefined) {
  109. promise.then(_ => {
  110. }).catch(error => {
  111. audio.muted = true;
  112. audio.play();
  113. ts('.snackbar').snackbar({
  114. content: 'Due to browser policy, please click on unmute button.',
  115. action: 'Unmute',
  116. actionEmphasis: 'negative',
  117. onAction: () => {
  118. unmute();
  119. }
  120. });
  121. });
  122. }
  123. currDisplay = "audio";
  124. ao_module_setWindowSize(395,520);
  125. }
  126. });
  127. }else if (fileinfo[0] == "setVol"){
  128. localStorage.setItem("global_volume",fileinfo[1]);
  129. if(currDisplay == "audio"){
  130. audio.volume = localStorage.getItem("global_volume");
  131. }else if(currDisplay == "video"){
  132. video.volume = localStorage.getItem("global_volume");
  133. }
  134. }else if (fileinfo[0] == "volup"){
  135. if(currDisplay == "audio"){
  136. localStorage.setItem("global_volume",audio.volume + 0.1);
  137. audio.volume = audio.volume + 0.1
  138. }else if(currDisplay == "video"){
  139. localStorage.setItem("global_volume",video.volume + 0.1);
  140. video.volume = video.volume + 0.1
  141. }
  142. }else if (fileinfo[0] == "voldown"){
  143. if(currDisplay == "audio"){
  144. localStorage.setItem("global_volume",audio.volume - 0.1);
  145. audio.volume = audio.volume - 0.1
  146. }else if(currDisplay == "video"){
  147. localStorage.setItem("global_volume",video.volume - 0.1);
  148. video.volume = video.volume - 0.1
  149. }
  150. }else if (fileinfo[0] == "play"){
  151. if(currDisplay == "audio"){
  152. audio.play();
  153. }else if(currDisplay == "video"){
  154. video.play();
  155. }
  156. }else if (fileinfo[0] == "pause"){
  157. if(currDisplay == "audio"){
  158. audio.pause();
  159. }else if(currDisplay == "video"){
  160. video.pause();
  161. }
  162. }else if (fileinfo[0] == "fwd"){
  163. if(currDisplay == "audio"){
  164. audio.currentTime = audio.currentTime + 15;
  165. }else if(currDisplay == "video"){
  166. video.currentTime = video.currentTime + 15;
  167. }
  168. }else if (fileinfo[0] == "bwd"){
  169. if(currDisplay == "audio"){
  170. audio.currentTime = audio.currentTime - 15;
  171. }else if(currDisplay == "video"){
  172. video.currentTime = video.currentTime - 15;
  173. }
  174. }else if (fileinfo[0] == "stop"){
  175. if(currDisplay == "audio"){
  176. audio.pause();
  177. audio.currentTime = 0;
  178. }else if(currDisplay == "video"){
  179. video.pause();
  180. video.currentTime = 0;
  181. }
  182. }else if(fileinfo[0] == "reset"){
  183. loadScreen();
  184. }else if(fileinfo[0] == "newsession"){
  185. location.reload();
  186. }
  187. }
  188. /* end */
  189. }
  190. });
  191. }
  192. var video=document.getElementById("video") ;
  193. function unmute(){
  194. if(video.muted){
  195. video.muted = false;
  196. video.volume = 0.5;
  197. }
  198. }
  199. function loadScreen(){
  200. $("body").html(`
  201. <br><br>
  202. <div class="ts container" style="color:white;">
  203. <h3 class="ts center aligned icon header" style="color:white;">
  204. <i class="feed icon"></i>ArOZ Remote Play
  205. <div class="sub header" style="color:white;">Use this devices as a remote player or player remote!</div>
  206. <hr>
  207. </h3>
  208. <div align="center">
  209. <div class="white" style="font-size:2em;padding-top:10px;"><i class="hashtag icon"></i>Remote ID: <?php echo $rid;?></div>
  210. <p class="white" style="font-size:80%;">To use ArOZ Remote Play function, use the OpenWith from your active device and enter the above ID to play with this window.<br><!--<i class="caution sign icon"></i>Warning! Only support Audio files.</p>-->
  211. </div>
  212. <br>
  213. </div>
  214. <div class="white bottom" align="right">
  215. <div class="ts breadcrumb">
  216. <a class="white section" href="mobileremote.php">Toggle P-Remote</a>
  217. <div class="divider"> / </div>
  218. <a class="white section" href="remote.php">Toggle Remote</a>
  219. <div class="divider"> / </div>
  220. <a class="white section" href="">Refresh</a>
  221. <div class="divider"> / </div>
  222. <a class="white section">Clear Sessions</a>
  223. <div class="divider dirModeOnly"> / </div>
  224. <a class="white active section dirModeOnly" href="../">Exit</a>
  225. </div>
  226. </div>
  227. <div class="ts snackbar"><div class="content"></div><a class="action"></a></div>
  228. <div id="rid" style="display:none;"><?php echo $rid;?></div>
  229. `);
  230. }
  231. </script>
  232. </html>