Show both title and sentence case title in submission menu preview

ajayyy · Oct 14, 2024 · 1a76110 · 1a76110
1 parent 13d8802
commit 1a76110
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 20 deletions.
diff --git a/public/content.css b/public/content.css
@@ -219,11 +219,42 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c
     justify-content: center;
     text-align: center;
 
-    padding-top: 0;
+    padding: 0;
     margin-top: 0;
-    font-weight: 600;
-    font-family: "YouTube Sans", "Roboto", sans-serif;
     font-size: 2rem;
+
+    border: none;
+    width: 100%;
+    transform: rotate(180deg);
+}
+
+.cbTitlePreviewBox {
+    border: rgb(152, 152, 152) 1.2px solid;
+    border-radius: 5px;
+    font-family: "YouTube Sans", "Roboto", sans-serif;
+    font-weight: 600;
+
+    margin-top: 0;
+    margin: var(--cb-thumbnail-padding);
+
+    transform: rotate(180deg);
+}
+
+.cbTitlePreviewTypeName {
+    color: var(--yt-spec-text-primary);
+
+    padding-left: 0.26em;
+    padding-right: 0.26em;
+    margin-left: 10px;
+    margin-right: auto;
+
+    transform: rotate(180deg);
+}
+
+.cbBrandingPreview .cbTitle {
+    cursor: text !important;
+
+    padding-top: 3px;
 }
 
 .cbHiddenTextBox {
@@ -297,7 +328,7 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c
     vertical-align: middle;
 }
 
-.cbTitle:not(.cbTitleSelected) {
+.cbTitle:not(.cbTitleSelected, .cbTitlePreview) {
     cursor: pointer !important;
 }
 
@@ -328,10 +359,6 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c
     margin-top: 10px;
 }
 
-.cbBrandingPreview .cbTitle {
-    cursor: default !important;
-}
-
 .cbNoticeButton:disabled {
     cursor: default;
     background-color: #0e78ca63 !important;

diff --git a/src/submission/BrandingPreviewComponent.tsx b/src/submission/BrandingPreviewComponent.tsx
@@ -1,11 +1,13 @@
 import { VideoID } from "../../maze-utils/src/video";
 import * as React from "react";
-import { formatTitleDefaultSettings } from "../titles/titleFormatter";
+import { formatTitleInternal } from "../titles/titleFormatter";
 import { BrandingResult } from "../videoBranding/videoBranding";
 import { ThumbnailType } from "./ThumbnailComponent";
 import { RenderedThumbnailSubmission } from "./ThumbnailDrawerComponent";
 import { ThumbnailSelectionComponent } from "./ThumbnailSelectionComponent";
 import { RenderedTitleSubmission } from "./TitleDrawerComponent";
+import { TitleFormatting } from "../config/config";
+import { FormattedText } from "../popup/FormattedTextComponent";
 
 export interface BrandingPreviewComponentComponentProps {
     submissions: BrandingResult;
@@ -20,18 +22,16 @@ export interface BrandingPreviewComponentComponentProps {
 }
 
 export const  BrandingPreviewComponent = (props: BrandingPreviewComponentComponentProps) => {
-    const [displayedTitle, setDisplayedTitle] = React.useState("");
+    const [sentenceCaseTitle, setSentenceCaseTitle] = React.useState("");
+    const [titleCaseTitle, setTitleCaseTitle] = React.useState("");
     const [displayedThumbnail, setDisplayedThumbnail] = React.useState(getDefaultThumbnail(props.submissions, props.thumbnails));
 
     React.useEffect(() => {
         (async () => {
-            if (props.selectedTitle?.title) {
-                setDisplayedTitle(await formatTitleDefaultSettings(props.selectedTitle.title, true));
-            } else {
-                const defaultTitle = getDefaultTitle(props.submissions, props.titles);
-                if (defaultTitle) {
-                    setDisplayedTitle(await formatTitleDefaultSettings(defaultTitle.title, true));
-                }
+            const title = props.selectedTitle?.title || getDefaultTitle(props.submissions, props.titles)?.title;
+            if (title) {
+                setSentenceCaseTitle(await formatTitleInternal(title, true, TitleFormatting.SentenceCase, false));
+                setTitleCaseTitle(await formatTitleInternal(title, true, TitleFormatting.TitleCase, false));
             }
         })();
     }, [props.selectedTitle, props.submissions, props.titles]);
@@ -55,9 +55,32 @@ export const  BrandingPreviewComponent = (props: BrandingPreviewComponentCompone
                 larger={true}
             ></ThumbnailSelectionComponent>
 
-            <div className="cbTitle cbTitlePreview">
-                {displayedTitle}
-            </div>
+            <fieldset className="cbTitlePreviewBox">
+                <span className="cbTitle cbTitlePreview">
+                    {sentenceCaseTitle}
+                </span>
+
+                <legend className="cbTitlePreviewTypeName">
+                    <FormattedText
+                        langKey={"SentenceCase"}
+                        titleFormatting={TitleFormatting.SentenceCase}
+                    />
+                </legend>
+            </fieldset>
+
+            <fieldset className="cbTitlePreviewBox">
+                <span className="cbTitle cbTitlePreview">
+                    {titleCaseTitle}
+                </span>
+
+                <legend className="cbTitlePreviewTypeName">
+                    <FormattedText
+                        langKey={"TitleCase"}
+                        titleFormatting={TitleFormatting.TitleCase}
+                    />
+                </legend>
+            </fieldset>
+
         </div>
     );
 };