EditSong.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  1. <template>
  2. <div>
  3. <modal title='Edit Song'>
  4. <div slot='body'>
  5. <h5 class='has-text-centered'>Video Preview</h5>
  6. <div class='video-container'>
  7. <div id='player'></div>
  8. <div class="controls">
  9. <form action="#">
  10. <p style="margin-top: 0; position: relative;">
  11. <input type="range" id="volumeSlider" min="0" max="100" class="active" v-on:change="changeVolume()" v-on:input="changeVolume()">
  12. </p>
  13. </form>
  14. <p class='control has-addons'>
  15. <button class='button' @click='settings("pause")' v-if='!video.paused'>
  16. <i class='material-icons'>pause</i>
  17. </button>
  18. <button class='button' @click='settings("play")' v-if='video.paused'>
  19. <i class='material-icons'>play_arrow</i>
  20. </button>
  21. <button class='button' @click='settings("stop")'>
  22. <i class='material-icons'>stop</i>
  23. </button>
  24. <button class='button' @click='settings("skipToLast10Secs")'>
  25. <i class='material-icons'>fast_forward</i>
  26. </button>
  27. </p>
  28. </div>
  29. </div>
  30. <h5 class='has-text-centered'>Thumbnail Preview</h5>
  31. <img class='thumbnail-preview' :src='editing.song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
  32. <div class="control is-horizontal">
  33. <div class="control-label">
  34. <label class="label">Thumbnail URL</label>
  35. </div>
  36. <div class="control">
  37. <input class='input' type='text' v-model='editing.song.thumbnail'>
  38. </div>
  39. </div>
  40. <h5 class='has-text-centered'>Edit Information</h5>
  41. <p class='control'>
  42. <label class='checkbox'>
  43. <input type='checkbox' v-model='editing.song.explicit'>
  44. Explicit
  45. </label>
  46. </p>
  47. <label class='label'>Song ID & Title</label>
  48. <div class="control is-horizontal">
  49. <div class="control is-grouped">
  50. <p class='control is-expanded'>
  51. <input class='input' type='text' v-model='editing.song.songId'>
  52. </p>
  53. <p class='control is-expanded'>
  54. <input class='input' type='text' v-model='editing.song.title' autofocus>
  55. </p>
  56. </div>
  57. </div>
  58. <label class='label'>Artists & Genres</label>
  59. <div class='control is-horizontal'>
  60. <div class='control is-grouped artist-genres'>
  61. <div>
  62. <p class='control has-addons'>
  63. <input class='input' id='new-artist' type='text' placeholder='Artist'>
  64. <button class='button is-info' @click='addTag("artists")'>Add Artist</button>
  65. </p>
  66. <span class='tag is-info' v-for='(index, artist) in editing.song.artists' track-by='$index'>
  67. {{ artist }}
  68. <button class='delete is-info' @click='removeTag("artists", index)'></button>
  69. </span>
  70. </div>
  71. <div>
  72. <p class='control has-addons'>
  73. <input class='input' id='new-genre' type='text' placeholder='Genre'>
  74. <button class='button is-info' @click='addTag("genres")'>Add Genre</button>
  75. </p>
  76. <span class='tag is-info' v-for='(index, genre) in editing.song.genres' track-by='$index'>
  77. {{ genre }}
  78. <button class='delete is-info' @click='removeTag("genres", index)'></button>
  79. </span>
  80. </div>
  81. </div>
  82. </div>
  83. <label class='label'>Song Duration</label>
  84. <p class='control'>
  85. <input class='input' type='text' v-model='editing.song.duration'>
  86. </p>
  87. <label class='label'>Skip Duration</label>
  88. <p class='control'>
  89. <input class='input' type='text' v-model='editing.song.skipDuration'>
  90. </p>
  91. <article class="message" v-if="editing.type === 'songs'">
  92. <div class="message-body">
  93. <span class="reports-length">
  94. {{ reports.length }}
  95. <span v-if="reports.length > 1 || reports.length <= 0">&nbsp;Reports</span>
  96. <span v-else>&nbsp;Report</span>
  97. </span>
  98. <div v-for='report in reports'>
  99. <a :href='`/admin/reports?id=${report}`' class='report-link'>Report - {{ report }}</a>
  100. </div>
  101. </div>
  102. </article>
  103. <hr />
  104. <h5 class='has-text-centered'>Spotify Information</h5>
  105. <label class='label'>Song title</label>
  106. <p class='control'>
  107. <input class='input' type='text' v-model='spotify.title'>
  108. </p>
  109. <label class='label'>Song artist (1 artist full name)</label>
  110. <p class='control'>
  111. <input class='input' type='text' v-model='spotify.artist'>
  112. </p>
  113. <button class='button is-success' @click='getSpotifySongs()'>
  114. Get Spotify songs
  115. </button>
  116. <hr />
  117. <article class="media" v-for='song in spotify.songs'>
  118. <figure class="media-left">
  119. <p class="image is-64x64">
  120. <img :src="song.thumbnail" onerror="this.src='/assets/notes-transparent.png'">
  121. </p>
  122. </figure>
  123. <div class="media-content">
  124. <div class="content">
  125. <p>
  126. <strong>{{song.title}}</strong>
  127. <br />
  128. <small>Artists: {{song.artists}}</small>, <small>Duration: {{song.duration}}</small>, <small>Explicit: {{song.explicit}}</small>
  129. <br />
  130. <small>Thumbnail: {{song.thumbnail}}</small>
  131. </p>
  132. </div>
  133. </div>
  134. </article>
  135. </div>
  136. <div slot='footer'>
  137. <button class='button is-success' @click='save(editing.song, false)'>
  138. <i class='material-icons save-changes'>done</i>
  139. <span>&nbsp;Save</span>
  140. </button>
  141. <button class='button is-success' @click='save(editing.song, true)'>
  142. <i class='material-icons save-changes'>done</i>
  143. <span>&nbsp;Save and close</span>
  144. </button>
  145. <button class='button is-danger' @click='$parent.toggleModal()'>
  146. <span>&nbsp;Close</span>
  147. </button>
  148. </div>
  149. </modal>
  150. </div>
  151. </template>
  152. <script>
  153. import io from '../../io';
  154. import validation from '../../validation';
  155. import { Toast } from 'vue-roaster';
  156. import Modal from './Modal.vue';
  157. export default {
  158. components: { Modal },
  159. data() {
  160. return {
  161. editing: {
  162. index: 0,
  163. song: {},
  164. type: ''
  165. },
  166. reports: 0,
  167. video: {
  168. player: null,
  169. paused: true,
  170. playerReady: false,
  171. autoPlayed: false
  172. },
  173. spotify: {
  174. title: '',
  175. artist: '',
  176. songs: []
  177. }
  178. }
  179. },
  180. methods: {
  181. save: function (song, close) {
  182. let _this = this;
  183. if (!song.title) return Toast.methods.addToast('Please fill in all fields', 8000);
  184. if (!song.thumbnail) return Toast.methods.addToast('Please fill in all fields', 8000);
  185. // Title
  186. if (!validation.isLength(song.title, 1, 64)) return Toast.methods.addToast('Title must have between 1 and 64 characters.', 8000);
  187. if (!validation.regex.ascii.test(song.title)) return Toast.methods.addToast('Invalid title format. Only ascii characters are allowed.', 8000);
  188. // Artists
  189. if (song.artists.length < 1 || song.artists.length > 10) return Toast.methods.addToast('Invalid artists. You must have at least 1 artist and a maximum of 10 artists.', 8000);
  190. let error;
  191. song.artists.forEach((artist) => {
  192. if (!validation.isLength(artist, 1, 32)) return error = 'Artist must have between 1 and 32 characters.';
  193. if (!validation.regex.ascii.test(artist)) return error = 'Invalid artist format. Only ascii characters are allowed.';
  194. if (artist === 'NONE') return error = 'Invalid artist format. Artists are not allowed to be named "NONE".';
  195. });
  196. if (error) return Toast.methods.addToast(error, 8000);
  197. // Genres
  198. error = undefined;
  199. song.genres.forEach((genre) => {
  200. if (!validation.isLength(genre, 1, 16)) return error = 'Genre must have between 1 and 16 characters.';
  201. if (!validation.regex.az09_.test(genre)) return error = 'Invalid genre format. Only ascii characters are allowed.';
  202. });
  203. if (error) return Toast.methods.addToast(error, 8000);
  204. // Thumbnail
  205. if (!validation.isLength(song.thumbnail, 8, 256)) return Toast.methods.addToast('Thumbnail must have between 8 and 256 characters.', 8000);
  206. if (song.thumbnail.indexOf('https://') !== 0) return Toast.methods.addToast('Thumbnail must start with "https://".', 8000);
  207. this.socket.emit(`${_this.editing.type}.update`, song._id, song, res => {
  208. Toast.methods.addToast(res.message, 4000);
  209. if (res.status === 'success') {
  210. _this.$parent.songs.forEach(lSong => {
  211. if (song._id === lSong._id) {
  212. for (let n in song) {
  213. lSong[n] = song[n];
  214. }
  215. }
  216. });
  217. }
  218. if (close) _this.$parent.toggleModal();
  219. });
  220. },
  221. settings: function (type) {
  222. let _this = this;
  223. switch(type) {
  224. case 'stop':
  225. _this.video.player.stopVideo();
  226. _this.video.paused = true;
  227. break;
  228. case 'pause':
  229. _this.video.player.pauseVideo();
  230. _this.video.paused = true;
  231. break;
  232. case 'play':
  233. _this.video.player.playVideo();
  234. _this.video.paused = false;
  235. break;
  236. case 'skipToLast10Secs':
  237. _this.video.player.seekTo((_this.editing.song.duration - 10) + _this.editing.song.skipDuration);
  238. break;
  239. }
  240. },
  241. changeVolume: function () {
  242. let local = this;
  243. let volume = $("#volumeSlider").val();
  244. localStorage.setItem("volume", volume);
  245. local.video.player.setVolume(volume);
  246. if (volume > 0) local.video.player.unMute();
  247. },
  248. addTag: function (type) {
  249. if (type == 'genres') {
  250. let genre = $('#new-genre').val().toLowerCase().trim();
  251. if (this.editing.song.genres.indexOf(genre) !== -1) return Toast.methods.addToast('Genre already exists', 3000);
  252. if (genre) {
  253. this.editing.song.genres.push(genre);
  254. $('#new-genre').val('');
  255. } else Toast.methods.addToast('Genre cannot be empty', 3000);
  256. } else if (type == 'artists') {
  257. let artist = $('#new-artist').val();
  258. if (this.editing.song.artists.indexOf(artist) !== -1) return Toast.methods.addToast('Artist already exists', 3000);
  259. if ($('#new-artist').val() !== '') {
  260. this.editing.song.artists.push(artist);
  261. $('#new-artist').val('');
  262. } else Toast.methods.addToast('Artist cannot be empty', 3000);
  263. }
  264. },
  265. removeTag: function (type, index) {
  266. if (type == 'genres') this.editing.song.genres.splice(index, 1);
  267. else if (type == 'artists') this.editing.song.artists.splice(index, 1);
  268. },
  269. getSpotifySongs: function() {
  270. this.socket.emit('apis.getSpotifySongs', this.spotify.title, this.spotify.artist, (res) => {
  271. if (res.status === 'success') {
  272. Toast.methods.addToast(`Succesfully got ${res.songs.length} song${(res.songs.length !== 1) ? 's' : ''}.`, 3000);
  273. this.spotify.songs = res.songs;
  274. } else Toast.methods.addToast(`Failed to get songs. ${res.message}`, 3000);
  275. });
  276. }
  277. },
  278. ready: function () {
  279. let _this = this;
  280. io.getSocket(socket => {
  281. _this.socket = socket;
  282. });
  283. setInterval(() => {
  284. if (_this.video.paused === false && _this.playerReady && _this.video.player.getCurrentTime() - _this.editing.song.skipDuration > _this.editing.song.duration) {
  285. _this.video.paused = false;
  286. _this.video.player.stopVideo();
  287. }
  288. }, 200);
  289. this.video.player = new YT.Player('player', {
  290. height: 315,
  291. width: 560,
  292. videoId: this.editing.song.songId,
  293. playerVars: { controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0, autoplay: 1 },
  294. startSeconds: _this.editing.song.skipDuration,
  295. events: {
  296. 'onReady': () => {
  297. let volume = parseInt(localStorage.getItem("volume"));
  298. volume = (typeof volume === "number") ? volume : 20;
  299. _this.video.player.seekTo(_this.editing.song.skipDuration);
  300. _this.video.player.setVolume(volume);
  301. if (volume > 0) _this.video.player.unMute();
  302. _this.playerReady = true;
  303. },
  304. 'onStateChange': event => {
  305. if (event.data === 1) {
  306. if (!_this.video.autoPlayed) {
  307. _this.video.autoPlayed = true;
  308. return _this.video.player.stopVideo();
  309. }
  310. _this.video.paused = false;
  311. let youtubeDuration = _this.video.player.getDuration();
  312. youtubeDuration -= _this.editing.song.skipDuration;
  313. if (_this.editing.song.duration > youtubeDuration) {
  314. this.video.player.stopVideo();
  315. _this.video.paused = true;
  316. Toast.methods.addToast("Video can't play. Specified duration is bigger than the YouTube song duration.", 4000);
  317. } else if (_this.editing.song.duration <= 0) {
  318. this.video.player.stopVideo();
  319. _this.video.paused = true;
  320. Toast.methods.addToast("Video can't play. Specified duration has to be more than 0 seconds.", 4000);
  321. }
  322. if (_this.video.player.getCurrentTime() < _this.editing.song.skipDuration) {
  323. _this.video.player.seekTo(10);
  324. }
  325. } else if (event.data === 2) {
  326. this.video.paused = true;
  327. }
  328. }
  329. }
  330. });
  331. let volume = parseInt(localStorage.getItem("volume"));
  332. volume = (typeof volume === "number") ? volume : 20;
  333. $("#volumeSlider").val(volume);
  334. },
  335. events: {
  336. closeModal: function () {
  337. this.$parent.modals.editSong = false;
  338. this.video.player.stopVideo();
  339. },
  340. editSong: function (song, index, type) {
  341. let _this = this;
  342. this.video.player.loadVideoById(song.songId, this.editing.song.skipDuration);
  343. let newSong = {};
  344. for (let n in song) {
  345. newSong[n] = song[n];
  346. }
  347. this.editing = {
  348. index,
  349. song: newSong,
  350. type
  351. };
  352. if (type === 'songs') {
  353. _this.socket.emit('reports.getReportsForSong', song.songId, res => {
  354. if (res.status === 'success') _this.reports = res.data;
  355. });
  356. }
  357. this.$parent.toggleModal();
  358. },
  359. stopVideo: function () {
  360. this.video.player.stopVideo();
  361. }
  362. }
  363. }
  364. </script>
  365. <style type='scss' scoped>
  366. input[type=range] {
  367. -webkit-appearance: none;
  368. width: 100%;
  369. margin: 7.3px 0;
  370. }
  371. input[type=range]:focus {
  372. outline: none;
  373. }
  374. input[type=range]::-webkit-slider-runnable-track {
  375. width: 100%;
  376. height: 5.2px;
  377. cursor: pointer;
  378. box-shadow: 0;
  379. background: #c2c0c2;
  380. border-radius: 0;
  381. border: 0;
  382. }
  383. input[type=range]::-webkit-slider-thumb {
  384. box-shadow: 0;
  385. border: 0;
  386. height: 19px;
  387. width: 19px;
  388. border-radius: 15px;
  389. background: #03a9f4;
  390. cursor: pointer;
  391. -webkit-appearance: none;
  392. margin-top: -6.5px;
  393. }
  394. input[type=range]::-moz-range-track {
  395. width: 100%;
  396. height: 5.2px;
  397. cursor: pointer;
  398. box-shadow: 0;
  399. background: #c2c0c2;
  400. border-radius: 0;
  401. border: 0;
  402. }
  403. input[type=range]::-moz-range-thumb {
  404. box-shadow: 0;
  405. border: 0;
  406. height: 19px;
  407. width: 19px;
  408. border-radius: 15px;
  409. background: #03a9f4;
  410. cursor: pointer;
  411. -webkit-appearance: none;
  412. margin-top: -6.5px;
  413. }
  414. input[type=range]::-ms-track {
  415. width: 100%;
  416. height: 5.2px;
  417. cursor: pointer;
  418. box-shadow: 0;
  419. background: #c2c0c2;
  420. border-radius: 1.3px;
  421. }
  422. input[type=range]::-ms-fill-lower {
  423. background: #c2c0c2;
  424. border: 0;
  425. border-radius: 0;
  426. box-shadow: 0;
  427. }
  428. input[type=range]::-ms-fill-upper {
  429. background: #c2c0c2;
  430. border: 0;
  431. border-radius: 0;
  432. box-shadow: 0;
  433. }
  434. input[type=range]::-ms-thumb {
  435. box-shadow: 0;
  436. border: 0;
  437. height: 15px;
  438. width: 15px;
  439. border-radius: 15px;
  440. background: #03a9f4;
  441. cursor: pointer;
  442. -webkit-appearance: none;
  443. margin-top: 1.5px;
  444. }
  445. .controls {
  446. display: flex;
  447. flex-direction: column;
  448. align-items: center;
  449. }
  450. .artist-genres {
  451. display: flex;
  452. justify-content: space-between;
  453. }
  454. #volumeSlider { margin-bottom: 15px; }
  455. .has-text-centered { padding: 10px; }
  456. .thumbnail-preview {
  457. display: flex;
  458. margin: 0 auto 25px auto;
  459. max-width: 200px;
  460. width: 100%;
  461. }
  462. .modal-card-body, .modal-card-foot { border-top: 0; }
  463. .label, .checkbox, h5 {
  464. font-weight: normal;
  465. }
  466. .video-container {
  467. display: flex;
  468. flex-direction: column;
  469. align-items: center;
  470. padding: 10px;
  471. iframe { pointer-events: none; }
  472. }
  473. .save-changes { color: #fff; }
  474. .tag:not(:last-child) { margin-right: 5px; }
  475. .reports-length {
  476. color: #ff4545;
  477. font-weight: bold;
  478. display: flex;
  479. justify-content: center;
  480. }
  481. .report-link {
  482. color: #000;
  483. }
  484. </style>