API tools faq
paste
Guest User

Untitled

a guest
Sep 17th, 2016
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5. <title>PJ_musicStream</title>
  6. <link rel="stylesheet" href="lib/tocas.min.css">
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  8. <script src="lib/config.js"></script>
  9. <script>
  10. var now_song_id;
  11.  
  12. $(document).ready(function(){
  13. function s_list_item_click(){
  14. console.log('inner s-list-item clicked event => $(this)');
  15. console.log($(this))
  16. console.log('inner s-list-item clicked event => $(this).val()');
  17. console.log($(this).val())
  18. console.log('inner s-list-item clicked event => $(this)[0].innerText');
  19. console.log($(this)[0].innerText) //this is ok
  20. console.log('inner s-list-item clicked event => Number($(this)[0].innerText.split(\' \')[0])');
  21. console.log(Number($(this)[0].innerText.split(' ')[0]))
  22.  
  23. $.ajax({
  24. type: 'POST',
  25. url: domain+'/addQueue',
  26. dataType: 'json',
  27. data: {
  28. s_id: Number($(this)[0].innerText.split(' ')[0]),
  29. start_time: 0 //There's no way to set yet
  30. },
  31. success: function(res){
  32. //doesn't matter
  33. },
  34. error: function(xhr){
  35. console.log(xhr);
  36. }
  37. });
  38. updateQueueList();
  39. }
  40. function updateQueueList(){
  41. $('#queue-list').empty();
  42. $.ajax({
  43. type: 'POST',
  44. url: domain+'/getQueue',
  45. dataType: 'json',
  46. success: function(res){
  47. res.forEach(function(value, index){
  48. $('#queue-list').append(' \
  49. <div class="item queue-item"> \
  50. '+index+' ('+value.s_id+' '+value.s_name+' '+value.s_t+'sec) \
  51. </div> \
  52. <button class="ts icon button mini compact negative queue-item-remove"> \
  53. <i class="icon remove"></i> \
  54. </button> \
  55. <br /> \
  56. ');
  57. });
  58. $('.queue-item').click(queue_forcePlay);
  59. $('.queue-item-remove').click(removeQueue);
  60. },
  61. error: function(xhr){
  62. console.log(xhr);
  63. }
  64. });
  65. }
  66. function queue_forcePlay(){
  67. $.ajax({
  68. type: 'POST',
  69. url: domain+'/forcePlay',
  70. dataType: 'json',
  71. data: {
  72. queue_index: Number($(this)[0].innerText.split(' ')[0])
  73. },
  74. success: function(res){
  75. // doesn't matter
  76. },
  77. error: function(xhr){
  78. console.log(xhr);
  79. }
  80. });
  81. window.location.reload();
  82. }
  83. function removeQueue(){
  84. $.ajax({
  85. type: 'POST',
  86. url: domain+'/removeQueue',
  87. dataType: 'json',
  88. data: {
  89. queue_index: Number($(this).prev()[0].innerText.split(' ')[0])
  90. },
  91. success: function(res){
  92. // doesn't matter
  93. },
  94. error: function(xhr){
  95. console.log(xhr);
  96. }
  97. });
  98. updateQueueList();
  99. }
  100. $.ajax({
  101. type: 'POST',
  102. url: domain+'/getList',
  103. dataType: 'json',
  104. success: function(res){
  105. var type_object = {};
  106. $.each(res, function(index, value){
  107. if(!type_object[value.s_type]){
  108. type_object[value.s_type] = {};
  109. }
  110. // s_id as key
  111. type_object[value.s_type][value.s_id] = value;
  112. });
  113.  
  114. $.each(type_object, function(index, value){
  115. $('#s-list').append(' \
  116. <div class="ts massive header">'+index+'</div> \
  117. ');
  118. $.each(value, function(index, value){
  119. $('#s-list').append(' \
  120. <div class="item s-list-item"> \
  121. <div class="header">'+value.s_id+' '+value.s_name+'</div> \
  122. '+value.s_t+'sec \
  123. </div> \
  124. ');
  125. });
  126. });
  127. $('.s-list-item').click(s_list_item_click);
  128. },
  129. error: function(xhr){
  130. console.log(xhr);
  131. }
  132. });
  133.  
  134. $.ajax({
  135. type: 'POST',
  136. url: domain+'/getCurrent',
  137. dataType: 'json',
  138. success: function(res){
  139. console.log('/getCurrent => res');
  140. console.dir(res);
  141. if(!res['s_id'] && res['s_id'] !== 0){
  142. console.log('songs are not ready yet');
  143. return;
  144. }else{
  145. $('#player').attr('src', res.s_url);
  146. $('#player')[0].currentTime = res.now_Len;
  147. $('#player')[0].play();
  148. $('#player')[0].volume = volume;
  149. now_song_id=res.s_id
  150. $('#s-id').text(res.s_id);
  151. $('#s-title').text(res.s_name);
  152. $('#s-artist').text(res.s_description.artist);
  153. $('#s-album').text(res.s_description.album);
  154. $('#s-length').text(res.s_t);
  155. }
  156. },
  157. error: function(xhr){
  158. console.log(xhr);
  159. }
  160. });
  161.  
  162. updateQueueList();
  163.  
  164. setInterval(function(){
  165. $.ajax({
  166. type: 'POST',
  167. url: domain+'/getCurrent',
  168. dataType: 'json',
  169. success: function(res){
  170. console.log('Interval: check now len every 5sec => now_Len: '+res['now_Len'])
  171. if(!res['s_id'] && res['s_id'] !== 0){
  172. console.log('songs are not ready yet');
  173. return;
  174. }else{
  175. if(res['s_id'] !== now_song_id){
  176. window.location.reload();
  177. }
  178. var player_t = $('#player')[0].currentTime;
  179. if(Math.abs(player_t - res.now_Len) > 5){
  180. $('#player')[0].currentTime = res.now_Len;
  181. }
  182. }
  183. },
  184. error: function(xhr){
  185. console.log(xhr);
  186. }
  187. });
  188. },5000);
  189.  
  190. $('#player').click(function(){
  191. window.location.reload();
  192. });
  193. })
  194. </script>
  195. </head>
  196. <body>
  197. <br>
  198. <div class="ts container stackable grid">
  199. <div class="sixteen wide column">
  200. <div class="ts center aligned raised segment">
  201. <video controls preload="none" id="player"></video>
  202. </div>
  203. </div>
  204. <div class="twelve wide column">
  205. <div class="ts raised segment">
  206. Id:<div id="s-id"></div>
  207. Title:<div id="s-title"></div>
  208. Artist:<div id="s-artist"></div>
  209. Album:<div id="s-album"></div>
  210. Length:<div id="s-length"></div>
  211. <!-- <br /> will be append in the end-->
  212. <div style="text-align: center;" id="queue-list">
  213. <div class="ts list selection divided" id="queue-list">
  214.  
  215. <div class="item queue-item">
  216. -- QueueId(Very Important)(same as Array's index) --SPACE-- ( -- SongId --SPACE-- Title --SPACE-- Length -- ) --
  217. </div>
  218. <button class="ts icon button mini compact negative queue-item-remove">
  219. <i class="icon remove"></i>
  220. </button>
  221.  
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. <div class="four wide column" id="s-list">
  227. <div class="ts raised segment">
  228. <!-- <BIG classification header> -->
  229. <div class="ts list selection divided">
  230.  
  231. <div class="item" id="s-list-item">
  232. <div class="header">-- Id --SPACE-- Title --</div>
  233. -- Length --
  234. </div>
  235.  
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. </body>
  241. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!