Add onboarding for casual mode

ajayyy · Feb 13, 2025 · 57b22b6 · 57b22b6
1 parent 3148998
commit 57b22b6
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 8 deletions.
diff --git a/public/_locales b/public/_locales
diff --git a/public/content.css b/public/content.css
@@ -405,7 +405,6 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c
 }
 
 .cbNoticeButton:hover {
-	background-color: rgba(235, 235, 235, 0.2);
     background-color: #0e78ca;
 }
 
@@ -681,6 +680,37 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c
     justify-content: space-around;
 }
 
+.cbCasualVoteLogoContainer {
+    display: flex;
+    justify-content: center;
+}
+
+.cbCasualVoteLogoContainer img {
+    width: 50%;
+}
+
+.cbCasualVoteDescription {
+    font-size: 14px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.cbCasualVoteDescription > div {
+    padding: 5px;
+}
+
+.casualOnboarding .cbVoteButton {
+    font-size: 18px;
+}
+
+.casualVoteMenuInner .cbNoticeButton:hover {
+    background-color: #22893e;
+}
+
+.casualOnboarding .cbCasualVoteTitle {
+    padding-top: 10px;
+}
+
 /* For autoplay */
 .ytp-autonav-endscreen-video-info .cbShowOriginal img.cbShowOriginalImage {
     height: 18px;

diff --git a/src/background.ts b/src/background.ts
@@ -100,6 +100,7 @@ waitFor(() => Config.isReady()).then(() => {
                 if (!Config.config!.userID) {
                     const newUserID = generateUserID();
                     Config.config!.userID = newUserID;
+                    Config.config!.showInfoAboutCasualMode = false;
                 }
 
                 Config.config!.showInfoAboutRandomThumbnails = true;

diff --git a/src/config/config.ts b/src/config/config.ts
@@ -109,6 +109,7 @@ interface SBConfig {
     channelOverrides: Record<string, ConfigurationID>;
     customConfigurations: Record<ConfigurationID, CustomConfiguration>;
     showInfoAboutRandomThumbnails: boolean;
+    showInfoAboutCasualMode: boolean;
     showIconForFormattedTitles: boolean;
     countReplacements: boolean;
     titleReplacements: number;
@@ -207,6 +208,7 @@ const syncDefaults = {
     channelOverrides: {},
     customConfigurations: {},
     showInfoAboutRandomThumbnails: false,
+    showInfoAboutCasualMode: true,
     showIconForFormattedTitles: true,
     countReplacements: true,
     titleReplacements: 0,

diff --git a/src/options/CasualChoiceComponent.tsx b/src/options/CasualChoiceComponent.tsx
@@ -42,6 +42,7 @@ export const CasualChoiceComponent = () => {
                 onClick={() => {
                     setCasualMode(true);
                     Config.config!.casualMode = true;
+                    Config.config!.showInfoAboutCasualMode = false;
                     setOpenAddCategoryMenu(false);
                 }}>
                 <div className="casualChoiceTitle">

diff --git a/src/submission/CasualVoteOnboardingComponent.tsx b/src/submission/CasualVoteOnboardingComponent.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import { FormattedText } from "../popup/FormattedTextComponent";
+
+export interface CasualVoteComponentProps {
+    close: () => void;
+}
+
+export const CasualVoteOnboardingComponent = (props: CasualVoteComponentProps) => {
+
+    return (
+        <div className="casualVoteMenuInner casualOnboarding"
+            onClick={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}>
+
+            <div className="cbCasualVoteTitle">
+                <FormattedText
+                    langKey="newCasualMode"
+                />
+            </div>
+
+            <div className="cbCasualVoteLogoContainer">
+                <img
+                    className="cbCasualVoteLogo"
+                    src={chrome.runtime.getURL("icons/logo-casual.svg")}
+                />
+            </div>
+
+            <div className="cbCasualVoteDescription">
+                {chrome.i18n.getMessage("CasualModeDescription").split("\n").map((line, index) => (
+                    <div key={index}>{line}</div>
+                ))}
+            </div>
+
+            <div className="cbVoteButtonContainer">
+                <button className="cbNoticeButton cbVoteButton"
+                    onClick={() => {
+                        chrome.runtime.sendMessage({ "message": "openConfig" });
+                        props.close();
+                    }}>
+                    <FormattedText
+                        langKey="OpenSettings"
+                    />
+                </button>
+            </div>
+
+            <div className="cbVoteButtonContainer">
+                <button className="cbNoticeButton cbVoteButton"
+                    onClick={() => {
+                        props.close();
+                    }}>
+                    <FormattedText
+                        langKey="Dismiss"
+                    />
+                </button>
+            </div>
+        </div>
+    );
+};
diff --git a/src/submission/casualVoteButton.tsx b/src/submission/casualVoteButton.tsx
@@ -7,6 +7,7 @@ import Config from "../config/config";
 import { closeGuidelineChecklist } from "./SubmissionChecklist";
 import { TitleButton } from "./titleButton";
 import { CasualVoteComponent } from "./CasualVoteComponent";
+import { CasualVoteOnboardingComponent } from "./CasualVoteOnboardingComponent";
 
 const casualVoteButtonIcon = `
 <?xml version="1.0" encoding="UTF-8"?>
@@ -33,6 +34,7 @@ export class CasualVoteButton extends TitleButton {
         closeGuidelineChecklist();
 
         super.close();
+        this.updateIcon();
     }
 
     clearExistingVotes(): void {
@@ -46,11 +48,17 @@ export class CasualVoteButton extends TitleButton {
 
     render(): void {
         if (this.root) {
-            this.root?.render(<CasualVoteComponent
-                videoID={getVideoID()!}
-                existingVotes={this.existingVotes}
-                submitClicked={(categories, downvote) => this.submitPressed(categories, downvote)}
-            />);
+            if (shouldShowCasualOnboarding()) {
+                this.root?.render(<CasualVoteOnboardingComponent close={() => this.close()} />);
+
+                Config.config!.showInfoAboutCasualMode = false;
+            } else {
+                this.root?.render(<CasualVoteComponent
+                    videoID={getVideoID()!}
+                    existingVotes={this.existingVotes}
+                    submitClicked={(categories, downvote) => this.submitPressed(categories, downvote)}
+                />);
+            }
         }
     }
 
@@ -82,12 +90,18 @@ export class CasualVoteButton extends TitleButton {
     }
 
     updateIcon(): void {
-        if (Config.config!.extensionEnabled && Config.config!.casualMode) {
+        if (Config.config!.extensionEnabled &&
+                (Config.config!.casualMode || shouldShowCasualOnboarding())) {
             this.button.style.removeProperty("display");
 
             super.updateIcon();
         } else {
             this.button.style.display = "none";
         }
     }
+}
+
+function shouldShowCasualOnboarding(): boolean {
+    // Check if userID not blank to ensure sync config is working
+    return !Config.config!.casualMode && Config.config!.showInfoAboutCasualMode && !!Config.config!.userID;
 }