From 7ffe41f250b25d6be83415ec1f3755e6830f6f22 Mon Sep 17 00:00:00 2001
From: Pawloland <59684145+Pawloland@users.noreply.github.com>
Date: Sun, 9 Nov 2025 17:17:15 +0100
Subject: [PATCH] Add object-fit support to FxControl and calculateStyle
 functions

---
 src/contentScript/isolated/FxSync.ts |  9 +++++---
 src/popup/FxControl.tsx              | 32 ++++++++++++++++++++++++++--
 src/types.ts                         |  3 ++-
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/contentScript/isolated/FxSync.ts b/src/contentScript/isolated/FxSync.ts
index cf1aacae..82ab3ee2 100644
--- a/src/contentScript/isolated/FxSync.ts
+++ b/src/contentScript/isolated/FxSync.ts
@@ -49,7 +49,7 @@ export class FxSync {
   handleChange = (view: StateView) => {
 
 
-    let styleInfo = calculateStyle(view.elementFx.enabled, view.elementFx.query || "video", formatFilters(view.elementFx.filters), formatFilters(view.elementFx.transforms.slice().reverse()), `${view.elementFx.originX || "center"} ${view.elementFx.originY || "center"}`, view.elementFx.svgFilters)
+    let styleInfo = calculateStyle(view.elementFx.enabled, view.elementFx.query || "video", formatFilters(view.elementFx.filters), formatFilters(view.elementFx.transforms.slice().reverse()), `${view.elementFx.originX || "center"} ${view.elementFx.originY || "center"}`, view.elementFx.svgFilters, view.elementFx.objectFit)
 
     if (styleInfo) {
       if (this.tempStyle && this.tempStyle.styleInfo.styleString !== styleInfo.styleString) {
@@ -89,13 +89,16 @@ export class FxSync {
   }
 }
 
-export function calculateStyle(enabled: boolean, selector: string, filters: string, transforms: string, origin: string, svgFilters: SvgFilter[]) {
-  if (!enabled || !selector || !(filters || transforms || hasActiveSvgFilters(svgFilters))) return null
+export function calculateStyle(enabled: boolean, selector: string, filters: string, transforms: string, origin: string, svgFilters: SvgFilter[], objectFit?: string) {
+  if (!enabled || !selector || !(filters || transforms || hasActiveSvgFilters(svgFilters) || objectFit)) return null
   let statements = []
   if (transforms) {
     statements.push(`transform: ${transforms} !important`)
     origin && statements.push(`transform-origin: ${origin} !important`)
   }
+  if (objectFit) {
+    statements.push(`object-fit: ${objectFit} !important`)
+  }
 
   let filterElements: SVGElement[]
   let filterSvgUrls
diff --git a/src/popup/FxControl.tsx b/src/popup/FxControl.tsx
index f164caf6..735cf1b4 100644
--- a/src/popup/FxControl.tsx
+++ b/src/popup/FxControl.tsx
@@ -42,7 +42,8 @@ export function FxControl(props: FxControlProps) {
     elemFilter:  checkFilterDeviationOrActiveSvg(elementFx.filters, elementFx.svgFilters),
     elemTransform: checkFilterDeviation(elementFx.transforms),
     backdropFilter: checkFilterDeviationOrActiveSvg(backdropFx.filters, backdropFx.svgFilters),
-    backdropTransform: checkFilterDeviation(backdropFx.transforms)
+    backdropTransform: checkFilterDeviation(backdropFx.transforms),
+    elemObjectFit: !!elementFx.objectFit
   }), [elementFx, backdropFx]) 
 
   const isEmpty = useMemo(() => (
@@ -54,7 +55,7 @@ export function FxControl(props: FxControlProps) {
 
       {/* Target tabs */}
       <div className="tabs">
-        <button className={`${!backdropTab ? "open" : ""} ${(active.elemFilter || active.elemTransform) ? "active" : ""}`} onClick={e => {
+        <button className={`${!backdropTab ? "open" : ""} ${(active.elemFilter || active.elemTransform || active.elemObjectFit) ? "active" : ""}`} onClick={e => {
           setBackdropTab(false)
         }}>{gvar.gsm.token.video}</button>
         <button className={`${backdropTab ? "open" : ""} ${(active.backdropFilter || active.backdropTransform)  ? "active" : ""}`} onClick={e => {
@@ -93,6 +94,33 @@ export function FxControl(props: FxControlProps) {
           }}/>
         </div>
       )}
+      
+      {/* Object Fit */}
+      {!backdropTab && (
+        <div className="selector">
+          <span>object-fit</span>
+          <select value={fx.objectFit || ""} onChange={e => {
+            setCurrent(produce(fx, d => {
+              if (e.target.value) {
+                d.objectFit = e.target.value as any
+                // Enable only when changing from default to a value
+                if (!fx.objectFit) {
+                  d.enabled = true
+                }
+              } else {
+                delete d.objectFit
+              }
+            }))
+          }}>
+            <option key="default" value="">Default</option>
+            <option key="fill" value="fill">fill</option>
+            <option key="contain" value="contain">contain</option>
+            <option key="cover" value="cover">cover</option>
+            <option key="none" value="none">none</option>
+            <option key="scale-down" value="scale-down">scale-down</option>
+          </select>
+        </div>
+      )}
 
       {/* Type tabs */}
       <div className="tabs sm">
diff --git a/src/types.ts b/src/types.ts
index d2bc1176..6138e022 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -351,7 +351,8 @@ export type Fx = {
   query?: string,
   originX?: string,
   originY?: string,
-  svgFilters?: SvgFilter[]
+  svgFilters?: SvgFilter[],
+  objectFit?: "fill" | "contain" | "cover" | "none" | "scale-down"
 }
 
 export type FilterInfo = {