feat(usersettings): add ability to hide tags on details page

fix #3350

server/entity/UserSettings.ts

@@ -66,6 +66,9 @@ export class UserSettings {
   @Column({ nullable: true })
   public watchlistSyncTv?: boolean;
 
+  @Column({ nullable: true })
+  public hideTags?: boolean;
+
   @Column({
     type: 'text',
     nullable: true,

server/interfaces/api/userSettingsInterfaces.ts

@@ -16,6 +16,7 @@ export interface UserSettingsGeneralResponse {
   globalTvQuotaDays?: number;
   watchlistSyncMovies?: boolean;
   watchlistSyncTv?: boolean;
+  hideTags?: boolean;
 }
 
 export type NotificationAgentTypes = Record<NotificationAgentKey, number>;

server/lib/settings.ts

@@ -97,6 +97,7 @@ export interface MainSettings {
     tv: Quota;
   };
   hideAvailable: boolean;
+  hideTags: boolean;
   localLogin: boolean;
   newPlexLogin: boolean;
   region: string;
@@ -293,6 +294,7 @@ class Settings {
           tv: {},
         },
         hideAvailable: false,
+        hideTags: false,
         localLogin: true,
         newPlexLogin: true,
         region: '',

server/migration/1710274992992-AddHideTagsColumn.ts

@@ -0,0 +1,31 @@
+import type { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddHideTagsColumn1710274992992 implements MigrationInterface {
+  name = 'AddHideTagsColumn1710274992992';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TABLE "temporary_user_settings" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "locale" varchar NOT NULL DEFAULT (''), "region" varchar, "originalLanguage" varchar, "pgpKey" varchar, "discordId" varchar, "pushbulletAccessToken" varchar, "pushoverApplicationToken" varchar, "pushoverUserKey" varchar, "pushoverSound" varchar, "telegramChatId" varchar, "telegramSendSilently" boolean, "watchlistSyncMovies" boolean, "watchlistSyncTv" boolean, "notificationTypes" text, "userId" integer, "hideTags" boolean, CONSTRAINT "REL_986a2b6d3c05eb4091bb8066f7" UNIQUE ("userId"), CONSTRAINT "FK_986a2b6d3c05eb4091bb8066f78" FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE ON UPDATE NO ACTION)`
+    );
+    await queryRunner.query(
+      `INSERT INTO "temporary_user_settings"("id", "locale", "region", "originalLanguage", "pgpKey", "discordId", "pushbulletAccessToken", "pushoverApplicationToken", "pushoverUserKey", "pushoverSound", "telegramChatId", "telegramSendSilently", "watchlistSyncMovies", "watchlistSyncTv", "notificationTypes", "userId") SELECT "id", "locale", "region", "originalLanguage", "pgpKey", "discordId", "pushbulletAccessToken", "pushoverApplicationToken", "pushoverUserKey", "pushoverSound", "telegramChatId", "telegramSendSilently", "watchlistSyncMovies", "watchlistSyncTv", "notificationTypes", "userId" FROM "user_settings"`
+    );
+    await queryRunner.query(`DROP TABLE "user_settings"`);
+    await queryRunner.query(
+      `ALTER TABLE "temporary_user_settings" RENAME TO "user_settings"`
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "user_settings" RENAME TO "temporary_user_settings"`
+    );
+    await queryRunner.query(
+      `CREATE TABLE "user_settings" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "locale" varchar NOT NULL DEFAULT (''), "region" varchar, "originalLanguage" varchar, "pgpKey" varchar, "discordId" varchar, "pushbulletAccessToken" varchar, "pushoverApplicationToken" varchar, "pushoverUserKey" varchar, "pushoverSound" varchar, "telegramChatId" varchar, "telegramSendSilently" boolean, "watchlistSyncMovies" boolean, "watchlistSyncTv" boolean, "notificationTypes" text, "userId" integer, CONSTRAINT "REL_986a2b6d3c05eb4091bb8066f7" UNIQUE ("userId"), CONSTRAINT "FK_986a2b6d3c05eb4091bb8066f78" FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE ON UPDATE NO ACTION)`
+    );
+    await queryRunner.query(
+      `INSERT INTO "user_settings"("id", "locale", "region", "originalLanguage", "pgpKey", "discordId", "pushbulletAccessToken", "pushoverApplicationToken", "pushoverUserKey", "pushoverSound", "telegramChatId", "telegramSendSilently", "watchlistSyncMovies", "watchlistSyncTv", "notificationTypes", "userId") SELECT "id", "locale", "region", "originalLanguage", "pgpKey", "discordId", "pushbulletAccessToken", "pushoverApplicationToken", "pushoverUserKey", "pushoverSound", "telegramChatId", "telegramSendSilently", "watchlistSyncMovies", "watchlistSyncTv", "notificationTypes", "userId" FROM "temporary_user_settings"`
+    );
+    await queryRunner.query(`DROP TABLE "temporary_user_settings"`);
+  }
+}

server/routes/user/usersettings.ts

@@ -65,6 +65,7 @@ userSettingsRoutes.get<{ id: string }, UserSettingsGeneralResponse>(
         globalTvQuotaLimit: defaultQuotas.tv.quotaLimit,
         watchlistSyncMovies: user.settings?.watchlistSyncMovies,
         watchlistSyncTv: user.settings?.watchlistSyncTv,
+        hideTags: user.settings?.hideTags,
       });
     } catch (e) {
       next({ status: 500, message: e.message });
@@ -118,6 +119,7 @@ userSettingsRoutes.post<
         originalLanguage: req.body.originalLanguage,
         watchlistSyncMovies: req.body.watchlistSyncMovies,
         watchlistSyncTv: req.body.watchlistSyncTv,
+        hideTags: req.body.hideTags,
       });
     } else {
       user.settings.discordId = req.body.discordId;
@@ -126,6 +128,7 @@ userSettingsRoutes.post<
       user.settings.originalLanguage = req.body.originalLanguage;
       user.settings.watchlistSyncMovies = req.body.watchlistSyncMovies;
       user.settings.watchlistSyncTv = req.body.watchlistSyncTv;
+      user.settings.hideTags = req.body.hideTags;
     }
 
     await userRepository.save(user);
@@ -138,6 +141,7 @@ userSettingsRoutes.post<
       originalLanguage: user.settings.originalLanguage,
       watchlistSyncMovies: user.settings.watchlistSyncMovies,
       watchlistSyncTv: user.settings.watchlistSyncTv,
+      hideTags: user.settings.hideTags,
     });
   } catch (e) {
     next({ status: 500, message: e.message });

src/components/MovieDetails/index.tsx

@@ -464,7 +464,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
               </div>
             </>
           )}
-          {data.keywords.length > 0 && (
+          {!user?.settings?.hideTags && data.keywords.length > 0 && (
             <div className="mt-6">
               {data.keywords.map((keyword) => (
                 <Link

src/components/TvDetails/index.tsx

@@ -503,7 +503,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
               </div>
             </>
           )}
-          {data.keywords.length > 0 && (
+          {!user?.settings?.hideTags && data.keywords.length > 0 && (
             <div className="mt-6">
               {data.keywords.map((keyword) => (
                 <Link

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -55,6 +55,8 @@ const messages = defineMessages({
   plexwatchlistsyncseries: 'Auto-Request Series',
   plexwatchlistsyncseriestip:
     'Automatically request series on your <PlexWatchlistSupportLink>Plex Watchlist</PlexWatchlistSupportLink>',
+  hideTags: 'Hide Tags',
+  hideTagsTip: 'Hide tags in Movie/Series detail page',
 });
 
 const UserGeneralSettings = () => {
@@ -130,6 +132,7 @@ const UserGeneralSettings = () => {
           tvQuotaDays: data?.tvQuotaDays,
           watchlistSyncMovies: data?.watchlistSyncMovies,
           watchlistSyncTv: data?.watchlistSyncTv,
+          hideTags: data?.hideTags,
         }}
         validationSchema={UserGeneralSettingsSchema}
         enableReinitialize
@@ -149,6 +152,7 @@ const UserGeneralSettings = () => {
               tvQuotaDays: tvQuotaEnabled ? values.tvQuotaDays : null,
               watchlistSyncMovies: values.watchlistSyncMovies,
               watchlistSyncTv: values.watchlistSyncTv,
+              hideTags: values.hideTags,
             });
 
             if (currentUser?.id === user?.id && setLocale) {
@@ -334,6 +338,24 @@ const UserGeneralSettings = () => {
                   </div>
                 </div>
               </div>
+              <div className="form-row">
+                <label htmlFor="hideTags" className="checkbox-label">
+                  <span>{intl.formatMessage(messages.hideTags)}</span>
+                  <span className="label-tip">
+                    {intl.formatMessage(messages.hideTagsTip)}
+                  </span>
+                </label>
+                <div className="form-input-area">
+                  <Field
+                    type="checkbox"
+                    id="hideTags"
+                    name="hideTags"
+                    onChange={() => {
+                      setFieldValue('hideTags', !values.hideTags);
+                    }}
+                  />
+                </div>
+              </div>
               {currentHasPermission(Permission.MANAGE_USERS) &&
                 !hasPermission(Permission.MANAGE_USERS) && (
                   <>

src/hooks/useUser.ts

@@ -33,6 +33,7 @@ export interface UserSettings {
   notificationTypes: Partial<NotificationAgentTypes>;
   watchlistSyncMovies?: boolean;
   watchlistSyncTv?: boolean;
+  hideTags?: boolean;
 }
 
 interface UserHookResponse {

src/i18n/locale/en.json

@@ -1087,6 +1087,8 @@
   "components.UserProfile.UserSettings.UserGeneralSettings.enableOverride": "Override Global Limit",
   "components.UserProfile.UserSettings.UserGeneralSettings.general": "General",
   "components.UserProfile.UserSettings.UserGeneralSettings.generalsettings": "General Settings",
+  "components.UserProfile.UserSettings.UserGeneralSettings.hideTags": "Hide Tags",
+  "components.UserProfile.UserSettings.UserGeneralSettings.hideTagsTip": "Hide tags in Movie/Series detail page",
   "components.UserProfile.UserSettings.UserGeneralSettings.languageDefault": "Default ({language})",
   "components.UserProfile.UserSettings.UserGeneralSettings.localuser": "Local User",
   "components.UserProfile.UserSettings.UserGeneralSettings.movierequestlimit": "Movie Request Limit",