queues.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template name="queues">
  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-queue-panel card-panel light-blue accent-3">
  7. <div class="card-content white-text">
  8. <h3 class="text-center">Review queue</h3>
  9. <table class="bordered">
  10. <thead>
  11. <tr>
  12. <th>Title</th>
  13. <th>Artist(s)</th>
  14. <th>Id</th>
  15. <th>Mid</th>
  16. <th>Genres</th>
  17. <th class="table-right-th">Edit</th>
  18. <th class="table-right-th">Add</th>
  19. <th class="table-right-th">Remove</th>
  20. </tr>
  21. </thead>
  22. <tbody>
  23. {{#each songs}}
  24. <tr>
  25. <th align="left" scope="row">{{title}}</th>
  26. <td align="left">{{artist}}</td>
  27. <td align="left"><a href="https://www.youtube.com/watch?v={{id}}" target="_blank" class="white-text">{{id}}</a></td>
  28. <td align="left">{{mid}}</td>
  29. <td align="left">{{genres}}</td>
  30. <td class="table-right-td">
  31. <button class="btn edit-queue-button" data-genre="{{../type}}"
  32. data-toggle="modal" data-target="#editModal">Edit
  33. </button>
  34. </td>
  35. <td class="table-right-td">
  36. <button class="btn green add-song-button" data-genre="{{../type}}"><i
  37. class="material-icons">thumb_up</i></button>
  38. </td>
  39. <td class="table-right-td">
  40. <button class="btn red deny-song-button" data-genre="{{../type}}"><i
  41. class="material-icons">thumb_down</i></button>
  42. </td>
  43. </tr>
  44. {{/each}}
  45. </tbody>
  46. </table>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <div id="editModal" class="modal modal-fixed-footer">
  52. <div class="modal-content musare white-text">
  53. <div class="row">
  54. <h4 class="center-align">Video Preview</h4>
  55. <div class="video-container" id="previewPlayerContainer">
  56. <div width="960" height="540" id="previewPlayer"></div>
  57. </div>
  58. <div class="seeker-bar-container col l10 m10 s10 white" id="preview-progress">
  59. <div class="seeker-bar light-blue" style="width: 0%"></div>
  60. </div>
  61. <span class="col l2 m2 s2 center" id="preview-time">
  62. <span id="time-elapsed">0:00</span> / <span id="time-total">0:00</span>
  63. </span>
  64. <button id="play" title="Play video" class="btn green col m1 s1 l1 offset-l3 offset-m3 offset-s3">
  65. <i class="material-icons">play_arrow</i>
  66. </button>
  67. <button id="stop" title="Stop video" class="btn red col m1 s1 l1" disabled>
  68. <i class="material-icons">stop</i>
  69. </button>
  70. <button id="pause" title="Pause video" class="btn orange col m1 s1 l1" disabled>
  71. <i class="material-icons">pause</i>
  72. </button>
  73. <button id="forward" title="Go to the last 10 seconds of the video" class="btn blue col m1 s1 l1" disabled>
  74. <i class="material-icons">fast_forward</i>
  75. </button>
  76. <form class="col m2 s2 l2" action="#">
  77. <p class="range-field" style="margin-top: 0">
  78. <input type="range" id="volume_slider" min="0" max="100" />
  79. </p>
  80. </form>
  81. </div>
  82. <div class="row">
  83. <h4 class="center-align">Image Preview</h4>
  84. <img id="song-preview" onerror="this.src='/notes.png'" class="center-block" src="{{song_image}}"/>
  85. </div>
  86. <div class="row">
  87. <h4 class="center-align">Edit Info</h4>
  88. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  89. <select multiple id="genres">
  90. <option value="" disabled selected>Select Genre(s):</option>
  91. <option value="edm">EDM</option>
  92. <option value="chill">Chill</option>
  93. <option value="pop">Pop</option>
  94. <option value="country">Country</option>
  95. <option value="rock">Rock</option>
  96. <option value="randb">R&B</option>
  97. <option value="rap">Rap</option>
  98. <option value="heavymetal">Heavy Metal</option>
  99. <option value="christmas">Christmas</option>
  100. <option value="alternative">Alternative</option>
  101. </select>
  102. <label class="white-text">Genre(s)</label>
  103. </div>
  104. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  105. <i class="material-icons prefix">vpn_key</i>
  106. <label for="mid" class="white-text">Song MID</label>
  107. <input class="validate" name="mid" id="mid" type="text" pattern=".{6}"/>
  108. </div>
  109. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  110. <i class="material-icons prefix">vpn_key</i>
  111. <label for="mid" class="white-text">Song ID</label>
  112. <input class="validate" name="id" id="id" type="text" pattern=".{11}"/>
  113. </div>
  114. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  115. <i class="material-icons prefix">person</i>
  116. <label for="id" class="white-text">Song Artist</label>
  117. <input class="validate" name="artist" id="artist" aria-required="true" type="text"/>
  118. </div>
  119. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  120. <i class="material-icons prefix">subject</i>
  121. <label for="title" class="white-text">Song Title</label>
  122. <input class="validate required" name="title" id="title" type="text"/>
  123. </div>
  124. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  125. <i class="material-icons prefix">timelapse</i>
  126. <label for="title" class="white-text">Song Duration</label>
  127. <input class="validate" name="duration" id="duration" type="number" step="any" min="0"/>
  128. </div>
  129. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  130. <i class="material-icons prefix">timer_off</i>
  131. <label for="skip-duration" class="white-text">Skip Duration</label>
  132. <input class="validate" id="skip-duration" type="number" step="any" min="0"/>
  133. </div>
  134. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  135. <i class="material-icons prefix">thumb_up</i>
  136. <label for="likes" class="white-text">Likes</label>
  137. <input disabled id="likes" type="number"/>
  138. </div>
  139. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  140. <i class="material-icons prefix">thumb_down</i>
  141. <label for="dislikes" class="white-text">Dislikes</label>
  142. <input disabled id="dislikes" type="number"/>
  143. </div>
  144. <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
  145. <i class="material-icons prefix">image</i>
  146. <label for="img" class="white-text">Song Image</label>
  147. <input class="validate" name="img" id="img" type="url"/>
  148. </div>
  149. </div>
  150. <div class="row">
  151. <button type="button" id="get-spotify-info" class="btn btn-large col l6 m6 s10 offset-l3 offset-m3 offset-s1 waves-effect waves-light">Get Spotify Data</button>
  152. <button type="button" id="save-song-button" class="btn btn-large col l6 m6 s10 offset-l3 offset-m3 offset-s1 waves-effect waves-light">Save Changes</button>
  153. </div>
  154. </div>
  155. <div class="modal-footer musare white-text">
  156. <a href="#!" class="modal-action modal-close waves-effect waves-light btn-flat white">X</a>
  157. </div>
  158. </div>
  159. </template>