From a4e9b4004455e543e9587e16f469e7e5620188bb Mon Sep 17 00:00:00 2001
From: Danish Humair <me@danishhumair.com>
Date: Wed, 31 Jan 2024 00:56:43 +0500
Subject: [PATCH] feat(server settings, movie/tv/settings components): allow
 changing YouTube URL for trailers

---
 server/interfaces/api/settingsInterfaces.ts   |  1 +
 server/lib/settings.ts                        |  4 +++
 src/components/MovieDetails/index.tsx         | 10 +++++--
 .../Settings/SettingsMain/index.tsx           | 29 +++++++++++++++++++
 src/components/TvDetails/index.tsx            |  9 ++++--
 src/context/SettingsContext.tsx               |  1 +
 src/pages/_app.tsx                            |  1 +
 7 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/server/interfaces/api/settingsInterfaces.ts b/server/interfaces/api/settingsInterfaces.ts
index 1bf40cdbc..757f62b9b 100644
--- a/server/interfaces/api/settingsInterfaces.ts
+++ b/server/interfaces/api/settingsInterfaces.ts
@@ -42,6 +42,7 @@ export interface PublicSettingsResponse {
   locale: string;
   emailEnabled: boolean;
   newPlexLogin: boolean;
+  youtubeUrl: string;
 }
 
 export interface CacheItem {
diff --git a/server/lib/settings.ts b/server/lib/settings.ts
index 63f952363..97dc6d0ad 100644
--- a/server/lib/settings.ts
+++ b/server/lib/settings.ts
@@ -114,6 +114,7 @@ export interface MainSettings {
   mediaServerType: number;
   partialRequestsEnabled: boolean;
   locale: string;
+  youtubeUrl: string;
 }
 
 interface PublicSettings {
@@ -142,6 +143,7 @@ interface FullPublicSettings extends PublicSettings {
   emailEnabled: boolean;
   userEmailRequired: boolean;
   newPlexLogin: boolean;
+  youtubeUrl: string;
 }
 
 export interface NotificationAgentConfig {
@@ -321,6 +323,7 @@ class Settings {
         mediaServerType: MediaServerType.NOT_CONFIGURED,
         partialRequestsEnabled: true,
         locale: 'en',
+        youtubeUrl: '',
       },
       plex: {
         name: '',
@@ -558,6 +561,7 @@ class Settings {
       userEmailRequired:
         this.data.notifications.agents.email.options.userEmailRequired,
       newPlexLogin: this.data.main.newPlexLogin,
+      youtubeUrl: this.data.main.youtubeUrl,
     };
   }
 
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index b7dc59172..84ea9d02c 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -185,10 +185,16 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
       svg: <PlayIcon />,
     });
   }
-  const trailerUrl = data.relatedVideos
+
+  const trailerVideo = data.relatedVideos
     ?.filter((r) => r.type === 'Trailer')
     .sort((a, b) => a.size - b.size)
-    .pop()?.url;
+    .pop();
+  const trailerUrl =
+    trailerVideo?.site === 'YouTube' &&
+    settings.currentSettings.youtubeUrl != ''
+      ? `${settings.currentSettings.youtubeUrl}${trailerVideo?.key}`
+      : trailerVideo?.url;
 
   if (trailerUrl) {
     mediaLinks.push({
diff --git a/src/components/Settings/SettingsMain/index.tsx b/src/components/Settings/SettingsMain/index.tsx
index b9f285ce7..859a6143f 100644
--- a/src/components/Settings/SettingsMain/index.tsx
+++ b/src/components/Settings/SettingsMain/index.tsx
@@ -82,6 +82,13 @@ const SettingsMain = () => {
         intl.formatMessage(messages.validationApplicationUrlTrailingSlash),
         (value) => !value || !value.endsWith('/')
       ),
+    youtubeUrl: Yup.string()
+      .url('Must be a valid URL')
+      .test(
+        'no-trailing-slash',
+        'URL must not end in a trailing slash',
+        (value) => !value || !value.endsWith('/')
+      ),
   });
 
   const regenerate = async () => {
@@ -134,6 +141,7 @@ const SettingsMain = () => {
             partialRequestsEnabled: data?.partialRequestsEnabled,
             trustProxy: data?.trustProxy,
             cacheImages: data?.cacheImages,
+            youtubeUrl: data?.youtubeUrl,
           }}
           enableReinitialize
           validationSchema={MainSettingsSchema}
@@ -150,6 +158,7 @@ const SettingsMain = () => {
                 partialRequestsEnabled: values.partialRequestsEnabled,
                 trustProxy: values.trustProxy,
                 cacheImages: values.cacheImages,
+                youtubeUrl: values.youtubeUrl,
               });
               mutate('/api/v1/settings/public');
               mutate('/api/v1/status');
@@ -427,6 +436,26 @@ const SettingsMain = () => {
                     />
                   </div>
                 </div>
+                <div className="form-row">
+                  <label htmlFor="youtubeUrl" className="text-label">
+                    {'YouTube URL'}
+                  </label>
+                  <div className="form-input-area">
+                    <div className="form-input-field">
+                      <Field
+                        id="youtubeUrl"
+                        name="youtubeUrl"
+                        type="text"
+                        inputMode="url"
+                      />
+                    </div>
+                    {errors.youtubeUrl &&
+                      touched.youtubeUrl &&
+                      typeof errors.youtubeUrl === 'string' && (
+                        <div className="error">{errors.youtubeUrl}</div>
+                      )}
+                  </div>
+                </div>
                 <div className="actions">
                   <div className="flex justify-end">
                     <span className="ml-3 inline-flex rounded-md shadow-sm">
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index daceb9c84..06f926318 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -179,10 +179,15 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
     });
   }
 
-  const trailerUrl = data.relatedVideos
+  const trailerVideo = data.relatedVideos
     ?.filter((r) => r.type === 'Trailer')
     .sort((a, b) => a.size - b.size)
-    .pop()?.url;
+    .pop();
+  const trailerUrl =
+    trailerVideo?.site === 'YouTube' &&
+    settings.currentSettings.youtubeUrl != ''
+      ? `${settings.currentSettings.youtubeUrl}${trailerVideo?.key}`
+      : trailerVideo?.url;
 
   if (trailerUrl) {
     mediaLinks.push({
diff --git a/src/context/SettingsContext.tsx b/src/context/SettingsContext.tsx
index 7be393969..ffc38cadb 100644
--- a/src/context/SettingsContext.tsx
+++ b/src/context/SettingsContext.tsx
@@ -26,6 +26,7 @@ const defaultSettings = {
   locale: 'en',
   emailEnabled: false,
   newPlexLogin: true,
+  youtubeUrl: '',
 };
 
 export const SettingsContext = React.createContext<SettingsContextProps>({
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 78199e08c..3d3dfa3e1 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -190,6 +190,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     locale: 'en',
     emailEnabled: false,
     newPlexLogin: true,
+    youtubeUrl: '',
   };
 
   if (ctx.res) {