Add option to only format user submitted titles

Fixes #304
ajayyy · Oct 30, 2024 · cb73464 · cb73464
1 parent 2b047c8
commit cb73464
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 26 deletions.
diff --git a/public/_locales b/public/_locales
diff --git a/public/options/options.html b/public/options/options.html
@@ -135,32 +135,51 @@
 						<option value="4">__MSG_FirstLetterUppercase__</option>
 						<option value="0">__MSG_CapitalizeWords__</option>
 					</select>
-				</div>
 
-				<div data-type="toggle" data-sync="shouldCleanEmojis">
-					<div class="sb-switch-container">
-						<label class="sb-switch">
-							<input id="shouldCleanEmojis" type="checkbox" checked>
-							<span class="sb-slider sb-round"></span>
-						</label>
-						<label class="sb-switch-label" for="shouldCleanEmojis">
-							__MSG_shouldCleanEmojis__
-						</label>
+					<br/>
+					<br/>
+
+					<div data-type="toggle" data-sync="onlyFormatCustomTitles">
+						<div class="sb-switch-container">
+							<label class="sb-switch">
+								<input id="onlyFormatCustomTitles" type="checkbox" checked>
+								<span class="sb-slider sb-round"></span>
+							</label>
+							<label class="sb-switch-label" for="onlyFormatCustomTitles">
+								__MSG_onlyFormatCustomTitles__
+							</label>
+						</div>
 					</div>
-				</div>
 
-				<div data-type="toggle" data-sync="onlyTitleCaseInEnglish" data-dependent-on-selector="titleFormatting" data-dependent-on-selector-value="1">
-					<div class="sb-switch-container">
-						<label class="sb-switch">
-							<input id="onlyTitleCaseInEnglish" type="checkbox" checked>
-							<span class="sb-slider sb-round"></span>
-						</label>
-						<label class="sb-switch-label" for="onlyTitleCaseInEnglish">
-							__MSG_onlyTitleCaseInEnglish__
-						</label>
+					<br/>
+
+					<div data-type="toggle" data-sync="shouldCleanEmojis">
+						<div class="sb-switch-container">
+							<label class="sb-switch">
+								<input id="shouldCleanEmojis" type="checkbox" checked>
+								<span class="sb-slider sb-round"></span>
+							</label>
+							<label class="sb-switch-label" for="shouldCleanEmojis">
+								__MSG_shouldCleanEmojis__
+							</label>
+						</div>
 					</div>
 
-					<div class="small-description">__MSG_onlyTitleCaseInEnglishDescription__</div>
+					<br/>
+
+					<div data-type="toggle" data-sync="onlyTitleCaseInEnglish" data-dependent-on-selector="titleFormatting" data-dependent-on-selector-value="1">
+						<div class="sb-switch-container">
+							<label class="sb-switch">
+								<input id="onlyTitleCaseInEnglish" type="checkbox" checked>
+								<span class="sb-slider sb-round"></span>
+							</label>
+							<label class="sb-switch-label" for="onlyTitleCaseInEnglish">
+								__MSG_onlyTitleCaseInEnglish__
+							</label>
+						</div>
+
+						<div class="small-description">__MSG_onlyTitleCaseInEnglishDescription__</div>
+					</div>
 				</div>
 
 				<div data-type="selector" data-sync="thumbnailFallback">

diff --git a/src/config/config.ts b/src/config/config.ts
@@ -79,6 +79,7 @@ interface SBConfig {
     keepUnsubmittedInPrivate: boolean;
     thumbnailSaturationLevel: number;
     titleFormatting: TitleFormatting;
+    onlyFormatCustomTitles: boolean;
     shouldCleanEmojis: boolean;
     onlyTitleCaseInEnglish: boolean;
     serverAddress: string;
@@ -171,6 +172,7 @@ const syncDefaults = {
     keepUnsubmittedInPrivate: false,
     thumbnailSaturationLevel: 100,
     titleFormatting: isEnglish ? TitleFormatting.TitleCase : TitleFormatting.Disable,
+    onlyFormatCustomTitles: false,
     shouldCleanEmojis: true,
     onlyTitleCaseInEnglish: false,
     serverAddress: CompileConfig.serverAddress,

diff --git a/src/popup/FormattingOptionsComponent.tsx b/src/popup/FormattingOptionsComponent.tsx
@@ -17,6 +17,7 @@ export const FormattingOptionsComponent = ({
         [titleFormatting, setTitleFormatting] = React.useState(Config.config!.titleFormatting);
     }
 
+    const [onlyFormatCustomTitles, setOnlyFormatCustomTitles] = React.useState(Config.config!.onlyFormatCustomTitles);
     const [shouldCleanEmojis, setShouldCleanEmojis] = React.useState(Config.config!.shouldCleanEmojis);
     const [onlyTitleCaseInEnglish, setOnlyTitleCaseInEnglish] = React.useState(Config.config!.onlyTitleCaseInEnglish);
     const [thumbnailFallback, setThumbnailFallback] = React.useState(String(Config.config!.thumbnailFallback));
@@ -59,6 +60,20 @@ export const FormattingOptionsComponent = ({
                 titleFormatting={titleFormatting!}
             />
 
+            {/* Only format custom titles */}
+            <ToggleOptionComponent
+                id="onlyFormatCustomTitles"
+                style={{
+                    paddingTop: "15px"
+                }}
+                onChange={(value) => {
+                    setOnlyFormatCustomTitles(value);
+                    Config.config!.onlyFormatCustomTitles = value;
+                }}
+                value={onlyFormatCustomTitles}
+                label={chrome.i18n.getMessage("onlyFormatCustomTitles")}
+                titleFormatting={titleFormatting!}
+            />
             {/* Should Clean Emojis */}
             <ToggleOptionComponent
                 id="shouldCleanEmojis"

diff --git a/src/titles/titleFormatter.ts b/src/titles/titleFormatter.ts
@@ -24,18 +24,22 @@ if (LOAD_CLD) {
  */
 
 export async function formatTitle(title: string, isCustom: boolean, videoID: VideoID | null): Promise<string> {
-    return formatTitleInternal(title, isCustom, await getTitleFormatting(videoID), await shouldCleanEmojis(videoID));
+    return formatTitleInternal(title, isCustom, await getTitleFormatting(videoID), await shouldCleanEmojis(videoID), Config.config!.onlyFormatCustomTitles);
 }
 
 export async function formatTitleDefaultSettings(title: string, isCustom: boolean): Promise<string> {
-    return await formatTitleInternal(title, isCustom, Config.config!.titleFormatting, Config.config!.shouldCleanEmojis);
+    return await formatTitleInternal(title, isCustom, Config.config!.titleFormatting, Config.config!.shouldCleanEmojis, Config.config!.onlyFormatCustomTitles);
 }
 
-export async function formatTitleInternal(title: string, isCustom: boolean, titleFormatting: TitleFormatting, shouldCleanEmojis: boolean): Promise<string> {
+export async function formatTitleInternal(title: string, isCustom: boolean, titleFormatting: TitleFormatting, shouldCleanEmojis: boolean, onlyFormatCustomTitles = false): Promise<string> {
     if (shouldCleanEmojis) {
         title = cleanFancyText(cleanEmojis(title));
     }
 
+    if (onlyFormatCustomTitles && !isCustom) {
+        titleFormatting = TitleFormatting.Disable;
+    }
+
     switch (titleFormatting) {
         case TitleFormatting.CapitalizeWords:
             return await toCapitalizeCase(title, isCustom);

diff --git a/src/videoBranding/videoBranding.ts b/src/videoBranding/videoBranding.ts
@@ -452,7 +452,8 @@ export function setupOptionChangeListener(): void {
             "showIconForFormattedTitles",
             "ignoreAbThumbnails",
             "showOriginalOnHover",
-            "showLiveCover"
+            "showLiveCover",
+            "onlyFormatCustomTitles"
         ];
 
         if (settingsToReload.some((name) => (changes[name] && changes[name].newValue !== changes[name].oldValue))) {