added speed slider button

Dreamlinerm · Jan 31, 2023 · 725c2e4 · 725c2e4
1 parent 7d23cb5
commit 725c2e4
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 6 deletions.
diff --git a/chrome/skipper.js b/chrome/skipper.js
@@ -210,6 +210,22 @@ if (isVideo || isNetflix) {
       if (!alreadySlider) {
         // infobar position for the slider to be added
         let position = document.querySelector("[class*=infobar-container]").firstChild.children[2];
+
+        let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("width", "22px");
+        svg.setAttribute("height", "20px");
+        svg.setAttribute("viewBox", "2 2 20 20");
+        svg.setAttribute("id", "speedbutton");
+        let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute(
+          "d",
+          "M17.6427 7.43779C14.5215 4.1874 9.47851 4.1874 6.35734 7.43779C3.21422 10.711 3.21422 16.0341 6.35734 19.3074L4.91474 20.6926C1.02842 16.6454 1.02842 10.0997 4.91474 6.05254C8.823 1.98249 15.177 1.98249 19.0853 6.05254C22.9716 10.0997 22.9716 16.6454 19.0853 20.6926L17.6427 19.3074C20.7858 16.0341 20.7858 10.711 17.6427 7.43779ZM14 14C14 15.1046 13.1046 16 12 16C10.8954 16 10 15.1046 10 14C10 12.8954 10.8954 12 12 12C12.1792 12 12.3528 12.0236 12.518 12.0677L15.7929 8.79289L17.2071 10.2071L13.9323 13.482C13.9764 13.6472 14 13.8208 14 14Z"
+        );
+        path.setAttribute("fill", "rgb(221, 221, 221)");
+        svg.setAttribute("fill", "rgb(221, 221, 221)");
+        svg.appendChild(path);
+        position.insertBefore(svg, position.firstChild);
+
         let slider = document.createElement("input");
         slider.id = "videoSpeedSlider";
         slider.type = "range";
@@ -218,8 +234,13 @@ if (isVideo || isNetflix) {
         slider.value = "10";
         slider.step = "1";
         // slider.setAttribute("list", "markers");
-        slider.style = "height: 0.1875vw;background: rgb(221, 221, 221);";
+        slider.style = "height: 0.1875vw;background: rgb(221, 221, 221);display: none;";
         position.insertBefore(slider, position.firstChild);
+
+        svg.onclick = function () {
+          if (slider.style.display === "block") slider.style.display = "none";
+          else slider.style.display = "block";
+        };
         let speed = document.createElement("p");
         speed.id = "videoSpeed";
         speed.textContent = "1.0x";
@@ -502,15 +523,37 @@ if (isVideo || isNetflix) {
         if (!alreadySlider) {
           // infobar position for the slider to be added
           let position = document.querySelector("[class*=infobar-container]").firstChild.children[2];
+
+          let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          svg.setAttribute("width", "22px");
+          svg.setAttribute("height", "20px");
+          svg.setAttribute("viewBox", "2 2 20 20");
+          svg.setAttribute("id", "speedbutton");
+          let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          path.setAttribute(
+            "d",
+            "M17.6427 7.43779C14.5215 4.1874 9.47851 4.1874 6.35734 7.43779C3.21422 10.711 3.21422 16.0341 6.35734 19.3074L4.91474 20.6926C1.02842 16.6454 1.02842 10.0997 4.91474 6.05254C8.823 1.98249 15.177 1.98249 19.0853 6.05254C22.9716 10.0997 22.9716 16.6454 19.0853 20.6926L17.6427 19.3074C20.7858 16.0341 20.7858 10.711 17.6427 7.43779ZM14 14C14 15.1046 13.1046 16 12 16C10.8954 16 10 15.1046 10 14C10 12.8954 10.8954 12 12 12C12.1792 12 12.3528 12.0236 12.518 12.0677L15.7929 8.79289L17.2071 10.2071L13.9323 13.482C13.9764 13.6472 14 13.8208 14 14Z"
+          );
+          path.setAttribute("fill", "rgb(221, 221, 221)");
+          svg.setAttribute("fill", "rgb(221, 221, 221)");
+          svg.appendChild(path);
+          position.insertBefore(svg, position.firstChild);
+
           let slider = document.createElement("input");
           slider.id = "videoSpeedSlider";
           slider.type = "range";
           slider.min = "5";
           slider.max = "15";
           slider.value = "10";
           slider.step = "1";
-          slider.style = "height: 0.1875vw;background: rgb(221, 221, 221);";
+          // slider.setAttribute("list", "markers");
+          slider.style = "height: 0.1875vw;background: rgb(221, 221, 221);display: none;";
           position.insertBefore(slider, position.firstChild);
+
+          svg.onclick = function () {
+            if (slider.style.display === "block") slider.style.display = "none";
+            else slider.style.display = "block";
+          };
           let speed = document.createElement("p");
           speed.id = "videoSpeed";
           speed.textContent = "1.0x";
@@ -528,6 +571,7 @@ if (isVideo || isNetflix) {
       AmazonSpeedSliderObserver.disconnect();
       document.querySelector("#videoSpeed").remove();
       document.querySelector("#videoSpeedSlider").remove();
+      document.querySelector("#speedbutton").remove();
     }
   }
 

diff --git a/downloaded HtmlButtons/slider.html b/downloaded HtmlButtons/slider.html
@@ -36,8 +36,13 @@
       Your browser does not support HTML5 video.
     </video>
     <p id="demo">test</p>
-    <input id="myRange" type="range" min="50" max="150" value="100" step="1" list="markers" />
-
+    <svg width="48" height="48" viewBox="0 0 24 24" fill="rgb(221, 221, 221)" id="speedbutton">
+      <path
+        d="M17.6427 7.43779C14.5215 4.1874 9.47851 4.1874 6.35734 7.43779C3.21422 10.711 3.21422 16.0341 6.35734 19.3074L4.91474 20.6926C1.02842 16.6454 1.02842 10.0997 4.91474 6.05254C8.823 1.98249 15.177 1.98249 19.0853 6.05254C22.9716 10.0997 22.9716 16.6454 19.0853 20.6926L17.6427 19.3074C20.7858 16.0341 20.7858 10.711 17.6427 7.43779ZM14 14C14 15.1046 13.1046 16 12 16C10.8954 16 10 15.1046 10 14C10 12.8954 10.8954 12 12 12C12.1792 12 12.3528 12.0236 12.518 12.0677L15.7929 8.79289L17.2071 10.2071L13.9323 13.482C13.9764 13.6472 14 13.8208 14 14Z"
+        fill="rgb(221, 221, 221)"
+      ></path>
+    </svg>
+    <input id="myRange" type="range" min="50" max="150" value="100" step="1" list="markers" style="display: none" />
     <datalist id="markers">
       <option value="25" label=".25">.25</option>
       <option value="50" label=".5"></option>
@@ -61,6 +66,9 @@
         output.innerHTML = this.value / 100;
         vid.playbackRate = this.value / 100;
       };
+      document.getElementById("speedbutton").onclick = function () {
+        document.getElementById("myRange").style.display = "block";
+      };
     </script>
   </body>
 </html>
diff --git a/firefox/skipper.js b/firefox/skipper.js
@@ -210,6 +210,22 @@ if (isVideo || isNetflix) {
       if (!alreadySlider) {
         // infobar position for the slider to be added
         let position = document.querySelector("[class*=infobar-container]").firstChild.children[2];
+
+        let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("width", "22px");
+        svg.setAttribute("height", "20px");
+        svg.setAttribute("viewBox", "2 2 20 20");
+        svg.setAttribute("id", "speedbutton");
+        let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute(
+          "d",
+          "M17.6427 7.43779C14.5215 4.1874 9.47851 4.1874 6.35734 7.43779C3.21422 10.711 3.21422 16.0341 6.35734 19.3074L4.91474 20.6926C1.02842 16.6454 1.02842 10.0997 4.91474 6.05254C8.823 1.98249 15.177 1.98249 19.0853 6.05254C22.9716 10.0997 22.9716 16.6454 19.0853 20.6926L17.6427 19.3074C20.7858 16.0341 20.7858 10.711 17.6427 7.43779ZM14 14C14 15.1046 13.1046 16 12 16C10.8954 16 10 15.1046 10 14C10 12.8954 10.8954 12 12 12C12.1792 12 12.3528 12.0236 12.518 12.0677L15.7929 8.79289L17.2071 10.2071L13.9323 13.482C13.9764 13.6472 14 13.8208 14 14Z"
+        );
+        path.setAttribute("fill", "rgb(221, 221, 221)");
+        svg.setAttribute("fill", "rgb(221, 221, 221)");
+        svg.appendChild(path);
+        position.insertBefore(svg, position.firstChild);
+
         let slider = document.createElement("input");
         slider.id = "videoSpeedSlider";
         slider.type = "range";
@@ -218,8 +234,13 @@ if (isVideo || isNetflix) {
         slider.value = "10";
         slider.step = "1";
         // slider.setAttribute("list", "markers");
-        slider.style = "height: 0.1875vw;background: rgb(221, 221, 221);";
+        slider.style = "height: 0.1875vw;background: rgb(221, 221, 221);display: none;";
         position.insertBefore(slider, position.firstChild);
+
+        svg.onclick = function () {
+          if (slider.style.display === "block") slider.style.display = "none";
+          else slider.style.display = "block";
+        };
         let speed = document.createElement("p");
         speed.id = "videoSpeed";
         speed.textContent = "1.0x";
@@ -502,15 +523,37 @@ if (isVideo || isNetflix) {
         if (!alreadySlider) {
           // infobar position for the slider to be added
           let position = document.querySelector("[class*=infobar-container]").firstChild.children[2];
+
+          let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          svg.setAttribute("width", "22px");
+          svg.setAttribute("height", "20px");
+          svg.setAttribute("viewBox", "2 2 20 20");
+          svg.setAttribute("id", "speedbutton");
+          let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          path.setAttribute(
+            "d",
+            "M17.6427 7.43779C14.5215 4.1874 9.47851 4.1874 6.35734 7.43779C3.21422 10.711 3.21422 16.0341 6.35734 19.3074L4.91474 20.6926C1.02842 16.6454 1.02842 10.0997 4.91474 6.05254C8.823 1.98249 15.177 1.98249 19.0853 6.05254C22.9716 10.0997 22.9716 16.6454 19.0853 20.6926L17.6427 19.3074C20.7858 16.0341 20.7858 10.711 17.6427 7.43779ZM14 14C14 15.1046 13.1046 16 12 16C10.8954 16 10 15.1046 10 14C10 12.8954 10.8954 12 12 12C12.1792 12 12.3528 12.0236 12.518 12.0677L15.7929 8.79289L17.2071 10.2071L13.9323 13.482C13.9764 13.6472 14 13.8208 14 14Z"
+          );
+          path.setAttribute("fill", "rgb(221, 221, 221)");
+          svg.setAttribute("fill", "rgb(221, 221, 221)");
+          svg.appendChild(path);
+          position.insertBefore(svg, position.firstChild);
+
           let slider = document.createElement("input");
           slider.id = "videoSpeedSlider";
           slider.type = "range";
           slider.min = "5";
           slider.max = "15";
           slider.value = "10";
           slider.step = "1";
-          slider.style = "height: 0.1875vw;background: rgb(221, 221, 221);";
+          // slider.setAttribute("list", "markers");
+          slider.style = "height: 0.1875vw;background: rgb(221, 221, 221);display: none;";
           position.insertBefore(slider, position.firstChild);
+
+          svg.onclick = function () {
+            if (slider.style.display === "block") slider.style.display = "none";
+            else slider.style.display = "block";
+          };
           let speed = document.createElement("p");
           speed.id = "videoSpeed";
           speed.textContent = "1.0x";
@@ -528,6 +571,7 @@ if (isVideo || isNetflix) {
       AmazonSpeedSliderObserver.disconnect();
       document.querySelector("#videoSpeed").remove();
       document.querySelector("#videoSpeedSlider").remove();
+      document.querySelector("#speedbutton").remove();
     }
   }