From ec83830e78f20e398fa5d3c03d4cefb2a148cc59 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 19:49:26 +0200
Subject: [PATCH] Force zero margins on <video> element.

This should fix issues with alignment on twitch and hulu, et al.
---
 src/ext/lib/video-transform/Resizer.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index c8d4879..2f10867 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -613,11 +613,13 @@ class Resizer {
         styleArray[i] = styleArray[i].trim();   
         // some sites do 'top: 50%; left: 50%; transform: <transform>' to center videos. 
         // we dont wanna, because we already center videos on our own
-        if (styleArray[i].startsWith("transform:") ||
-            styleArray[i].startsWith("top:") ||
-            styleArray[i].startsWith("left:") ||
-            styleArray[i].startsWith("right:") ||
-            styleArray[i].startsWith("bottom:") ){
+        if (styleArray[i].startsWith("transform:")
+            || styleArray[i].startsWith("top:") 
+            || styleArray[i].startsWith("left:") 
+            || styleArray[i].startsWith("right:") 
+            || styleArray[i].startsWith("bottom:")
+            || styleArray[i].startsWith("margin")
+          ){
           delete styleArray[i];
         }
       }
@@ -667,9 +669,13 @@ class Resizer {
 
     const styleArray = this.buildStyleArray('', extraStyleString)
 
+    // sometimes, site designers will center <video> by setting margin: to something. We do not like that, as
+    // it prevents extension from working properly.
+    styleArray.push('margin: 0px 0px 0px 0px !important; width: initial !important; height: initial !important');
+
     // add remaining elements
     if (stretchFactors) {
-      styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor})`);
+      styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor});`);
 
       // important — guarantees video will be properly aligned
       styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px;");