Add option to show custom title on hover if casual title is being sho…

…wn in casual mode
ajayyy · Feb 21, 2025 · d388a30 · d388a30
1 parent b492fdb
commit d388a30
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 3 deletions.
diff --git a/public/_locales b/public/_locales
diff --git a/src/config/config.ts b/src/config/config.ts
@@ -99,6 +99,7 @@ interface SBConfig {
     defaultToCustom: boolean;
     alwaysShowShowOriginalButton: boolean;
     showOriginalOnHover: boolean;
+    showCustomOnHoverIfCasual: boolean;
     importedConfig: boolean;
     replaceTitles: boolean;
     replaceThumbnails: boolean;
@@ -199,6 +200,7 @@ const syncDefaults = {
     defaultToCustom: true,
     alwaysShowShowOriginalButton: false,
     showOriginalOnHover: false,
+    showCustomOnHoverIfCasual: false,
     importedConfig: false,
     replaceTitles: true,
     replaceThumbnails: true,

diff --git a/src/options/CasualChoiceComponent.tsx b/src/options/CasualChoiceComponent.tsx
@@ -9,6 +9,21 @@ export const CasualChoiceComponent = () => {
     const [activeCategories, setActiveCategories] = React.useState(Config.config!.casualModeSettings);
     const [showOriginalWhenCasual, setShowOriginalWhenCasual] = React.useState(Config.config!.showOriginalThumbWhenCasual);
     const [onlyShowCasualIconForCustom, setOnlyShowCasualIconForCustom] = React.useState(Config.config!.onlyShowCasualIconForCustom);
+    const [showCustomOnHoverIfCasual, setShowCustomOnHoverIfCasual] = React.useState(Config.config!.showCustomOnHoverIfCasual);
+    const [showOptionForShowCustomOnHoverIfCasual, setShowOptionForShowCustomOnHoverIfCasual] = React.useState(false);
+
+    React.useEffect(() => {
+        const update = () => {
+            setShowOptionForShowCustomOnHoverIfCasual(Config.config!.showOriginalOnHover);
+        }
+
+        Config.configSyncListeners.push(update);
+        update();
+
+        return () => {
+            Config.configSyncListeners = Config.configSyncListeners.filter((l) => l !== update);
+        }
+    });
 
     const [openAddCategoryMenu, setOpenAddCategoryMenu] = React.useState(false);
 
@@ -136,6 +151,22 @@ export const CasualChoiceComponent = () => {
                         value={onlyShowCasualIconForCustom}
                         label={chrome.i18n.getMessage("onlyShowCasualIconForCustom")}
                     />
+
+                    {
+                        showOptionForShowCustomOnHoverIfCasual &&
+                        <ToggleOptionComponent
+                            id="showCustomOnHoverIfCasual"
+                            style={{
+                                paddingTop: "15px"
+                            }}
+                            onChange={(value) => {
+                                setShowCustomOnHoverIfCasual(value);
+                                Config.config!.showCustomOnHoverIfCasual = value;
+                            }}
+                            value={showCustomOnHoverIfCasual}
+                            label={chrome.i18n.getMessage("showCustomOnHoverIfCasual")}
+                        />
+                    }
                 </div>
             </div>
         </div>

diff --git a/src/videoBranding/videoBranding.ts b/src/videoBranding/videoBranding.ts
@@ -387,10 +387,13 @@ function getAndUpdateVideoBrandingInstances(videoID: VideoID, updateBranding: ()
 
 export async function setShowCustomBasedOnDefault(videoID: VideoID, originalTitleElement: HTMLElement, brandingLocation: BrandingLocation, value: boolean): Promise<void> {
     if (videoBrandingInstances[videoID]) {
+        const showThreeStages = await showThreeShowOriginalStages(videoID, originalTitleElement, brandingLocation);
+        const alwaysShowCustom = showThreeStages && Config.config!.showOriginalOnHover && Config.config!.showCustomOnHoverIfCasual;
+
         // If value true, use default, otherwise use opposite of default
         return await internalSetShowCustom(videoID, originalTitleElement, brandingLocation,
-            !!videoBrandingInstances[videoID].showCustomBranding.originalValue === value,
-                (await showThreeShowOriginalStages(videoID, originalTitleElement, brandingLocation)) ? value : undefined);
+            alwaysShowCustom || (!!videoBrandingInstances[videoID].showCustomBranding.originalValue === value),
+                showThreeStages ? value : undefined);
     }
 }