add location options

inject.js

@@ -12,6 +12,8 @@ var tc = {
     audioBoolean: false, // default: false
     startHidden: false, // default: false
     controllerOpacity: 0.3, // default: 0.3
+    controllerLocationX: 0, // default: 0
+    controllerLocationY: 0, // default: 0
     keyBindings: [],
     blacklist: `\
       www.instagram.com
@@ -116,6 +118,8 @@ chrome.storage.sync.get(tc.settings, function (storage) {
       startHidden: tc.settings.startHidden,
       enabled: tc.settings.enabled,
       controllerOpacity: tc.settings.controllerOpacity,
+      controllerLocationX: tc.settings.controllerLocationX,
+      controllerLocationY: tc.settings.controllerLocationY,
       blacklist: tc.settings.blacklist.replace(regStrip, "")
     });
   }
@@ -127,6 +131,8 @@ chrome.storage.sync.get(tc.settings, function (storage) {
   tc.settings.enabled = Boolean(storage.enabled);
   tc.settings.startHidden = Boolean(storage.startHidden);
   tc.settings.controllerOpacity = Number(storage.controllerOpacity);
+  tc.settings.controllerLocationX = Number(storage.controllerLocationX);
+  tc.settings.controllerLocationY = Number(storage.controllerLocationY);
   tc.settings.blacklist = String(storage.blacklist);
 
   // ensure that there is a "display" binding (for upgrades from versions that had it as a separate binding)
@@ -273,8 +279,11 @@ function defineVideoController() {
     log("initializeControls Begin", 5);
     const document = this.video.ownerDocument;
     const speed = this.video.playbackRate.toFixed(2);
-    var top = Math.max(this.video.offsetTop, 0) + "px",
-      left = Math.max(this.video.offsetLeft, 0) + "px";
+    var curTransform = new WebKitCSSMatrix(window.getComputedStyle(this.video).webkitTransform);
+    var videoLeft = this.video.offsetLeft + curTransform.m41; //real offset left
+    var videoTop = this.video.offsetTop + curTransform.m42; //real offset top
+    var top = (Math.max(videoTop, 0)+tc.settings.controllerLocationY) + "px",
+      left = (Math.max(videoLeft, 0)+tc.settings.controllerLocationX) + "px";
 
     log("Speed variable set to: " + speed, 5);
 
@@ -871,6 +880,11 @@ function handleDrag(video, e) {
     let style = shadowController.style;
     let dx = e.clientX - initialMouseXY[0];
     let dy = e.clientY - initialMouseXY[1];
+	chrome.storage.sync.set(
+    {
+      controllerLocationX: initialControllerXY[0] + dx,
+      controllerLocationY: initialControllerXY[1] + dy
+    });
     style.left = initialControllerXY[0] + dx + "px";
     style.top = initialControllerXY[1] + dy + "px";
   };

manifest.json

@@ -1,13 +1,12 @@
 {
-  "name": "Video Speed Controller",
+  "name": "Video Speed Controller(2022)",
   "short_name": "videospeed",
-  "version": "0.6.3.3",
+  "version": "0.6.9.4",
   "manifest_version": 2,
   "description": "Speed up, slow down, advance and rewind HTML5 audio/video with shortcuts",
-  "homepage_url": "https://github.com/codebicycle/videospeed",
   "browser_specific_settings": {
     "gecko": {
-      "id": "{7be2ba16-0f1e-4d93-9ebc-5164397477a9}"
+      "id": "{24b7d099-2101-42d3-9b6f-a6a7688d683f}"
     }
   },
   "icons": {

options.html

@@ -160,6 +160,11 @@ <h3>Other</h3>
         <label for="controllerOpacity">Controller opacity</label>
         <input id="controllerOpacity" type="text" value="" />
       </div>
+      <div class="row">
+        <label for="controllerLocation">Default controller location</label>
+        Left:<input id="controllerLocationX" type="text" value="" />
+        Top:<input id="controllerLocationY" type="text" value="" />
+      </div>
       <div class="row">
         <label for="blacklist"
           >Sites on which extension is disabled<br />

options.js

@@ -9,6 +9,8 @@ var tcDefaults = {
   forceLastSavedSpeed: false, //default: false
   enabled: true, // default enabled
   controllerOpacity: 0.3, // default: 0.3
+  controllerLocationX: 0, // default: 0
+  controllerLocationY: 0, 
   keyBindings: [
     { action: "display", key: 86, value: 0, force: false, predefined: true }, // V
     { action: "slower", key: 83, value: 0.1, force: false, predefined: true }, // S
@@ -218,6 +220,8 @@ function save_options() {
   var enabled = document.getElementById("enabled").checked;
   var startHidden = document.getElementById("startHidden").checked;
   var controllerOpacity = document.getElementById("controllerOpacity").value;
+  var controllerLocationX = document.getElementById("controllerLocationX").value;
+  var controllerLocationY = document.getElementById("controllerLocationY").value;
   var blacklist = document.getElementById("blacklist").value;
 
   chrome.storage.sync.remove([
@@ -241,6 +245,8 @@ function save_options() {
       enabled: enabled,
       startHidden: startHidden,
       controllerOpacity: controllerOpacity,
+      controllerLocationX: controllerLocationX,
+      controllerLocationY: controllerLocationY,
       keyBindings: keyBindings,
       blacklist: blacklist.replace(regStrip, "")
     },
@@ -263,8 +269,9 @@ function restore_options() {
     document.getElementById("audioBoolean").checked = storage.audioBoolean;
     document.getElementById("enabled").checked = storage.enabled;
     document.getElementById("startHidden").checked = storage.startHidden;
-    document.getElementById("controllerOpacity").value =
-      storage.controllerOpacity;
+    document.getElementById("controllerOpacity").value =storage.controllerOpacity;
+    document.getElementById("controllerLocationX").value =storage.controllerLocationX;
+    document.getElementById("controllerLocationY").value =storage.controllerLocationY;
     document.getElementById("blacklist").value = storage.blacklist;
 
     // ensure that there is a "display" binding for upgrades from versions that had it as a separate binding

popup.css

@@ -6,8 +6,8 @@ hr {
   width: 100%;
   border: 0;
   height: 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
-  margin: 0.6em 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  margin: 0.3em 0;
 }
 
 button {

popup.html

@@ -9,10 +9,9 @@
     <button id="enable" class="hide">Enable</button>
     <button id="disable">Disable</button>
     <span id="status" class="hide"></span>
-    <hr />
+	<hr />
     <button id="config">Settings</button>
-    <hr />
-    <button id="feedback" class="secondary">Send feedback</button>
-    <button id="about" class="secondary">About</button>
+    <button id="feedback" class="secondary hide">Send feedback</button>
+    <button id="about" class="secondary hide">About</button>
   </body>
 </html>

popup.js

@@ -4,11 +4,11 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 
   document.querySelector("#about").addEventListener("click", function () {
-    window.open("https://github.com/codebicycle/videospeed");
+    window.open("");
   });
 
   document.querySelector("#feedback").addEventListener("click", function () {
-    window.open("https://github.com/codebicycle/videospeed/issues");
+    window.open("");
   });
 
   document.querySelector("#enable").addEventListener("click", function () {

shadow.css

@@ -18,8 +18,6 @@
 
   border-radius: 5px;
   padding: 5px;
-  margin: 10px 10px 10px 15px;
-
   cursor: default;
   z-index: 9999999;
 }