manageSongs.html 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template name="manageSongs">
  2. {{> alerts}}
  3. <div class="landing">
  4. {{> header}}
  5. <div class="row">
  6. <div class="col m8 s8 l8 offset-l2 offset-m1 offset-s2 admin-playlist-panel card-panel teal accent-3">
  7. <div class="card-content white-text">
  8. <h3 class="text-center">Filters</h3>
  9. <p>
  10. <input checked="checked" type="checkbox" id="show_genres_cb" />
  11. <label for="show_genres_cb" class="white-text">Show songs with genres</label>
  12. </p>
  13. <p>
  14. <input type="checkbox" id="show_no_genres_cb" />
  15. <label for="show_no_genres_cb" class="white-text">Show songs without a genre</label>
  16. </p>
  17. </div>
  18. </div>
  19. <div class="col m8 s8 l8 offset-l2 offset-m1 offset-s2 admin-playlist-panel card-panel teal accent-3">
  20. <div class="card-content white-text">
  21. <h3 class="text-center">Songs</h3>
  22. <table class="bordered">
  23. <thead>
  24. <tr>
  25. <th>Title</th>
  26. <th>Artist(s)</th>
  27. <th>Id</th>
  28. <th>Mid</th>
  29. <th>Genres</th>
  30. <th>Likes</th>
  31. <th>Dislikes</th>
  32. <th class="table-right-th">Edit</th>
  33. <th class="table-right-th">Remove</th>
  34. </tr>
  35. </thead>
  36. <tbody>
  37. {{#each songs}}
  38. <tr>
  39. <th align="left" scope="row">{{title}}</th>
  40. <td align="left">{{artist}}</td>
  41. <td align="left">{{id}}</td>
  42. <td align="left">{{mid}}</td>
  43. <td align="left">{{genres}}</td>
  44. <td align="left">{{likes}}</td>
  45. <td align="left">{{dislikes}}</td>
  46. <td class="table-right-td">
  47. <button class="btn edit-song-button"
  48. data-toggle="modal" data-target="#editModal">Edit
  49. </button>
  50. </td>
  51. <td class="table-right-td">
  52. <button class="btn red remove-song-button"><i
  53. class="material-icons">remove_circle</i></button>
  54. </td>
  55. </tr>
  56. {{/each}}
  57. </tbody>
  58. </table>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <div id="editModal" class="modal modal-fixed-footer">
  64. <div class="modal-content musare white-text">
  65. <div class="row">
  66. <h4 class="center-align">Video Preview</h4>
  67. <div class="video-container" id="previewPlayerContainer">
  68. <div width="960" height="540" id="previewPlayer"></div>
  69. </div>
  70. <div class="seeker-bar-container col l10 m10 s10 white" id="preview-progress">
  71. <div class="seeker-bar teal" style="width: 0%"></div>
  72. </div>
  73. <span class="col l2 m2 s2 center" id="preview-time">
  74. <span id="time-elapsed">0:00</span> / <span id="time-total">0:00</span>
  75. </span>
  76. <button id="play" title="Play video" class="btn green col m1 s1 l1 offset-l3 offset-m3 offset-s3">
  77. <i class="material-icons">play_arrow</i>
  78. </button>
  79. <button id="stop" title="Stop video" class="btn red col m1 s1 l1" disabled>
  80. <i class="material-icons">stop</i>
  81. </button>
  82. <button id="pause" title="Pause video" class="btn orange col m1 s1 l1" disabled>
  83. <i class="material-icons">pause</i>
  84. </button>
  85. <button id="forward" title="Go to the last 10 seconds of the video" class="btn blue col m1 s1 l1"
  86. disabled>
  87. <i class="material-icons">fast_forward</i>
  88. </button>
  89. <form class="col m2 s2 l2" action="#">
  90. <p class="range-field" style="margin-top: 0">
  91. <input type="range" id="volume_slider" min="0" max="100"/>
  92. </p>
  93. </form>
  94. </div>
  95. <div class="row">
  96. <h4 class="center-align">Image Preview</h4>
  97. <img id="song-preview"
  98. onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
  99. class="center-block" src="{{song_image}}"/>
  100. </div>
  101. <div class="row">
  102. <h4 class="center-align">Edit Info</h4>
  103. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  104. <select multiple id="genres">
  105. <option value="" disabled selected>Select Genre(s):</option>
  106. <option value="edm">EDM</option>
  107. <option value="chill">Chill</option>
  108. </select>
  109. <label class="white-text">Genre(s)</label>
  110. </div>
  111. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  112. <i class="material-icons prefix">vpn_key</i>
  113. <label for="mid" class="white-text">Song MID</label>
  114. <input class="validate" name="mid" id="mid" type="text" pattern=".{6}"/>
  115. </div>
  116. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  117. <i class="material-icons prefix">vpn_key</i>
  118. <label for="mid" class="white-text">Song ID</label>
  119. <input class="validate" name="id" id="id" type="text" pattern=".{11}"/>
  120. </div>
  121. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  122. <i class="material-icons prefix">vpn_key</i>
  123. <label for="mid" class="white-text">Song Genres</label>
  124. <input class="validate" name="genres" id="genres" type="text" disabled/>
  125. </div>
  126. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  127. <i class="material-icons prefix">person</i>
  128. <label for="id" class="white-text">Song Artist</label>
  129. <input class="validate" name="artist" id="artist" aria-required="true" type="text"/>
  130. </div>
  131. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  132. <i class="material-icons prefix">subject</i>
  133. <label for="title" class="white-text">Song Title</label>
  134. <input class="validate required" name="title" id="title" type="text"/>
  135. </div>
  136. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  137. <i class="material-icons prefix">timelapse</i>
  138. <label for="title" class="white-text">Song Duration</label>
  139. <input class="validate" name="duration" id="duration" type="number" step="any" min="0"/>
  140. </div>
  141. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  142. <i class="material-icons prefix">timer_off</i>
  143. <label for="skip-duration" class="white-text">Skip Duration</label>
  144. <input class="validate" id="skip-duration" type="number" step="any" min="0"/>
  145. </div>
  146. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  147. <i class="material-icons prefix">thumb_up</i>
  148. <label for="likes" class="white-text">Likes</label>
  149. <input disabled id="likes" type="number"/>
  150. </div>
  151. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  152. <i class="material-icons prefix">thumb_down</i>
  153. <label for="dislikes" class="white-text">Dislikes</label>
  154. <input disabled id="dislikes" type="number"/>
  155. </div>
  156. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  157. <i class="material-icons prefix">image</i>
  158. <label for="img" class="white-text">Song Image</label>
  159. <input class="validate" name="img" id="img" type="url"/>
  160. </div>
  161. </div>
  162. <div class="row">
  163. <button type="button" id="get-spotify-info"
  164. class="btn btn-large col l6 m6 s10 offset-l3 offset-m3 offset-s1 waves-effect waves-light">Get
  165. Spotify Data
  166. </button>
  167. <button type="button" id="save-song-button"
  168. class="btn btn-large col l6 m6 s10 offset-l3 offset-m3 offset-s1 waves-effect waves-light">Save
  169. Changes
  170. </button>
  171. </div>
  172. <script>
  173. $('#genres').material_select();
  174. </script>
  175. </div>
  176. <div class="modal-footer musare white-text">
  177. <a href="#!" class="modal-action modal-close waves-effect waves-light btn-flat white">X</a>
  178. </div>
  179. </div>
  180. </template>