playlistadd.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. (function main() {
  2. /* Takes control of the form if javascript is enabled, so that adding stuff to a playlist will not cause things to stop loading, and will display a status message. If javascript is disabled, the form will still work using regular HTML methods, but causes things on the page (such as the video) to stop loading. */
  3. const playlistAddForm = document.getElementById('playlist-edit');
  4. function setStyle(element, property, value){
  5. element.style[property] = value;
  6. }
  7. function removeMessage(messageBox){
  8. messageBox.parentNode.removeChild(messageBox);
  9. }
  10. function displayMessage(text, error=false){
  11. let currentMessageBox = document.getElementById('message-box');
  12. if(currentMessageBox !== null){
  13. currentMessageBox.parentNode.removeChild(currentMessageBox);
  14. }
  15. let messageBox = document.createElement('div');
  16. if(error){
  17. messageBox.setAttribute('role', 'alert');
  18. } else {
  19. messageBox.setAttribute('role', 'status');
  20. }
  21. messageBox.setAttribute('id', 'message-box');
  22. let textNode = document.createTextNode(text);
  23. messageBox.appendChild(textNode);
  24. document.querySelector('main').appendChild(messageBox);
  25. let currentstyle = window.getComputedStyle(messageBox);
  26. let removalDelay;
  27. if(error){
  28. removalDelay = 5000;
  29. } else {
  30. removalDelay = 1500;
  31. }
  32. window.setTimeout(setStyle, 20, messageBox, 'opacity', 1);
  33. window.setTimeout(setStyle, removalDelay, messageBox, 'opacity', 0);
  34. window.setTimeout(removeMessage, removalDelay+300, messageBox);
  35. }
  36. // https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
  37. function sendData(event){
  38. let clicked_button = document.activeElement;
  39. if(clicked_button === null || clicked_button.getAttribute('type') !== 'submit' || clicked_button.parentElement != event.target){
  40. console.log('ERROR: clicked_button not valid');
  41. return;
  42. }
  43. if(clicked_button.getAttribute('value') !== 'add'){
  44. return; // video(s) are being removed from playlist, just let it refresh the page
  45. }
  46. event.preventDefault();
  47. let XHR = new XMLHttpRequest();
  48. let FD = new FormData(playlistAddForm);
  49. if(FD.getAll('video_info_list').length === 0){
  50. displayMessage('Error: No videos selected', true);
  51. return;
  52. }
  53. if(FD.get('playlist_name') === ""){
  54. displayMessage('Error: No playlist selected', true);
  55. return;
  56. }
  57. // https://stackoverflow.com/questions/48322876/formdata-doesnt-include-value-of-buttons
  58. FD.append('action', 'add');
  59. XHR.addEventListener('load', function(event){
  60. if(event.target.status == 204){
  61. displayMessage('Added videos to playlist "' + FD.get('playlist_name') + '"');
  62. } else {
  63. displayMessage('Error adding videos to playlist: ' + event.target.status.toString(), true);
  64. }
  65. });
  66. XHR.addEventListener('error', function(event){
  67. if(event.target.status == 0){
  68. displayMessage('XHR failed: Check that XHR requests are allowed', true);
  69. } else {
  70. displayMessage('XHR failed: Unknown error', true);
  71. }
  72. });
  73. XHR.open('POST', playlistAddForm.getAttribute('action'));
  74. XHR.send(FD);
  75. }
  76. playlistAddForm.addEventListener('submit', sendData);
  77. }());