🏠 Home　

Reddit Video Downloader

Adds button to direct link or download the stupidly hard to save or share directly reddit videos. Designed to work on new Reddit only. Buttons appear when viewing the specific post -- does not work on preview/expand on post listing pages.


Install this script? 
  1. // ==UserScript==
  2. // @name         Reddit Video Downloader
  3. // @namespace    https://lawrenzo.com/p/reddit-video-downloader
  4. // @version      0.7.0
  5. // @description  Adds button to direct link or download the stupidly hard to save or share directly reddit videos. Designed to work on new Reddit only. Buttons appear when viewing the specific post -- does not work on preview/expand on post listing pages.
  6. // @author       Lawrence Sim
  7. // @license      WTFPL (http://www.wtfpl.net)
  8. // @grant        unsafeWindow
  9. // @match        *://*.reddit.com/*
  10. // @noframes
  11. // ==/UserScript==
  12. 'use strict';
  13. (function() {
  14. var defaultStyles = {
  15. "margin":        "0.4em",
  16. "font-size":     "0.8em",
  17. "padding":       "0.4em 0.6em",
  18. "border-radius": "4px",
  19. "border":        "1px solid #d9d9d9",
  20. "background":    "#fff",
  21. "cursor":        "pointer"
  22. };
  23. function createBtn(parent, opts) {
  24. let btn = document.createElement("button");
  25. btn.innerHTML = opts.html;
  26. for(let key in defaultStyles) {
  27. btn.style[key] = defaultStyles[key];
  28. }
  29. if(opts.disabled) {
  30. btn.disabled = true;
  31. btn.style.background = "#bbb";
  32. btn.style.cursor = "wait";
  33. }
  34. if(opts.href) btn.addEventListener('click', () => window.open(opts.href));
  35. parent.append(btn);
  36. return btn;
  37. }
  38. var removeWatchers = [];
  39. function watchForRemoval(watchElem, parentElem) {
  40. let watcher = new MutationObserver(mutated => {
  41. let wasRemoved = false;
  42. mutated.forEach(mutant => {
  43. wasRemoved || mutant.removedNodes.forEach(removed => {
  44. wasRemoved = wasRemoved || removed === watchElem;
  45. })
  46. });
  47. if(wasRemoved) parentElem.append(watchElem);
  48. });
  49. watcher.observe(parentElem, {childList:true});
  50. removeWatchers.push(watcher);
  51. }
  52. function clearRemoveWatchers() {
  53. removeWatchers.forEach(obs => obs.disconnect());
  54. removeWatchers = [];
  55. }
  56. function addLinks() {
  57. let contentDiv = document.querySelector("[data-test-id='post-content']"),
  58. videoElem = contentDiv && contentDiv.querySelector("video");
  59. if(!videoElem) {
  60. videoElem = contentDiv && contentDiv.querySelector("shreddit-player");
  61. }
  62. if(!videoElem) {
  63. removeWatchers.forEach(obs => obs.disconnect());
  64. removeWatchers = [];
  65. return;
  66. }
  67. if(videoElem.getAttribute("vlinked")) return;
  68. videoElem.setAttribute("vlinked", 1);
  69. // gifs and mp4s in video player can be directly linked
  70. let source = videoElem.querySelector("source");
  71. if(source && source.src && (~source.src.search(".gif") || ~source.src.search(".mp4"))) {
  72. let buttonRow = document.createElement("div");
  73. contentDiv.append(buttonRow);
  74. let directBtn = createBtn(buttonRow, {
  75. href: source.src,
  76. html: "Download"
  77. });
  78. watchForRemoval(buttonRow, contentDiv);
  79. videoElem.setAttribute("vlinked", 1);
  80. return;
  81. }
  82. // add buttons
  83. let buttonRow = document.createElement("div");
  84. contentDiv.append(buttonRow);
  85. let directBtn = createBtn(buttonRow, {
  86. html: "Sourcing video...",
  87. disabled: true
  88. });
  89. createBtn(buttonRow, {
  90. href: window.location.href.replace(/reddit.com\//, "redditsave.com/info?url="),
  91. html: "Download via RedditSave"
  92. });
  93. createBtn(buttonRow, {
  94. href: window.location.href.replace(/reddit.com/, "reddit.tube"),
  95. html: "Download via Reddit.Tube"
  96. });
  97. watchForRemoval(buttonRow, contentDiv);
  98. let i = 0,
  99. animateBtn = setInterval(() => {
  100. i = ++i > 3 ? 1 : i;
  101. directBtn.innerHTML = "Sourcing video"+(".".repeat(i)) + " ".repeat(3-i);
  102. }, 750)
  103. // fetch post info JSON for direct video link
  104. fetch(window.location.href.split("?")[0].replace(/\/$/, "")+".json")
  105. .then(res => {
  106. if(!res || !res.ok) throw Error((res && res.statusText) || "Fetch error");
  107. return res.json();
  108. })
  109. .then(json => {
  110. let postData, vidData;
  111. try {
  112. postData = json[0].data.children[0].data;
  113. if(!postData.secure_media && postData.crosspost_parent_list && postData.crosspost_parent_list.length) {
  114. postData = postData.crosspost_parent_list[0];
  115. }
  116. vidData = postData.secure_media.reddit_video;
  117. } catch(e) { }
  118. clearInterval(animateBtn);
  119. if(!vidData) {
  120. directBtn.innerHTML = "Error pulling source";
  121. directBtn.style.cursor = "default";
  122. console.log(postData || json);
  123. } else {
  124. console.log(vidData);
  125. directBtn.innerHTML = "Direct Video Link (no sound)";
  126. directBtn.addEventListener('click', () => window.open(vidData.fallback_url));
  127. directBtn.disabled = false;
  128. directBtn.style.background = defaultStyles.background;
  129. directBtn.style.cursor = defaultStyles.cursor;
  130. }
  131. })
  132. .catch(err => {
  133. clearInterval(animateBtn);
  134. console.log(err);
  135. });
  136. }
  137. addLinks();
  138. let redditWatcher = window.redditWatcher || (unsafeWindow && unsafeWindow.redditWatcher);
  139. if(redditWatcher) {
  140. redditWatcher.body.onUpdate(addLinks);
  141. redditWatcher.feed.onChange(clearRemoveWatchers);
  142. }
  143. let lastFirstPost = null;
  144. (new MutationObserver(() => {
  145. addLinks();
  146. let listing = document.querySelector(".ListingLayout-outerContainer"),
  147. firstPost = listing && listing.querySelector("div[data-testid='post-container']");
  148. if(firstPost !== lastFirstPost) {
  149. lastFirstPost = firstPost;
  150. clearRemoveWatchers();
  151. }
  152. }))
  153. .observe(document.body, {childList:true, subtree:true});
  154. })();