fix(project): fix start watching button when not logged in

src/i18n/locales/en_US/video.json

@@ -6,17 +6,19 @@
   "copied_url": "Copied url",
   "current_episode": "Current episode",
   "currently_playing": "Current video",
+  "episode_not_found": "Episode not found",
   "episodes": "Episodes",
   "favorite": "Favorite",
   "remove_from_favorites": "Remove from favorites",
-  "renew_your_subscription": "Renew your subscription",
   "season_prefix": "Season ",
+  "series_not_found": "Series not found",
   "share": "Share",
   "sign_up_to_start_watching": "Sign up to start watching!",
   "start_watching": "Start watching",
   "total_episodes": "{{ count }} episode",
   "total_episodes_plural": "{{ count }} episodes",
   "trailer": "Trailer",
+  "video_not_found": "Video not found",
   "watch_trailer": "Watch the trailer",
   "share_video": "Share this video"
 }

src/i18n/locales/nl_NL/video.json

@@ -6,17 +6,19 @@
   "copied_url": "",
   "current_episode": "",
   "currently_playing": "",
+  "episode_not_found": "",
   "episodes": "",
   "favorite": "",
   "remove_from_favorites": "",
-  "renew_your_subscription": "",
   "season_prefix": "",
+  "series_not_found": "",
   "share": "",
   "sign_up_to_start_watching": "",
   "start_watching": "",
   "total_episodes": "",
   "total_episodes_plural": "",
   "trailer": "",
+  "video_not_found": "",
   "watch_trailer": "",
   "share_video": ""
 }

src/screens/Movie/Movie.tsx

@@ -21,6 +21,7 @@ import { VideoProgressMinMax } from '../../config';
 import { ConfigStore } from '../../stores/ConfigStore';
 import { AccountStore } from '../../stores/AccountStore';
 import { configHasCleengOffer } from '../../utils/cleeng';
+import { addQueryParam } from '../../utils/history';
 
 import styles from './Movie.module.scss';
 
@@ -100,17 +101,21 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
   }, [history, id, playlist, searchParams]);
 
   const formatStartWatchingLabel = (): string => {
-    if (!user) return t('sign_up_to_start_watching');
-    if (!subscription) return t('complete_your_subscription');
+    if (cleengId) {
+      if (!user) return t('sign_up_to_start_watching');
+      if (!subscription && configHasOffer) return t('complete_your_subscription');
+    }
     return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
   };
 
   const handleStartWatchingClick = useCallback(() => {
-    if (!user) return history.push('?u=login');
-    if (!allowedToWatch) return history.push('/u/payments');
+    if (cleengId) {
+      if (!user) return history.push(addQueryParam(history, 'u', 'create-account'));
+      if (!allowedToWatch) return history.push('/u/payments');
+    }
 
     return item && history.push(videoUrl(item, searchParams.get('r'), true));
-  }, [user, history, allowedToWatch, item, searchParams]);
+  }, [cleengId, item, history, searchParams, user, allowedToWatch]);
 
   // Effects
   useEffect(() => {
@@ -126,7 +131,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
 
   // UI
   if (isLoading && !item) return <LoadingOverlay />;
-  if ((!isLoading && error) || !item) return <ErrorPage title="Video not found!" />;
+  if ((!isLoading && error) || !item) return <ErrorPage title={t('video_not_found')} />;
 
   const pageTitle = `${item.title} - ${siteName}`;
   const canonicalUrl = item ? `${window.location.origin}${movieURL(item)}` : window.location.href;

src/screens/Series/Series.tsx

@@ -23,6 +23,7 @@ import { VideoProgressMinMax } from '../../config';
 import { ConfigStore } from '../../stores/ConfigStore';
 import { configHasCleengOffer } from '../../utils/cleeng';
 import { AccountStore } from '../../stores/AccountStore';
+import { addQueryParam } from '../../utils/history';
 
 import styles from './Series.module.scss';
 
@@ -112,17 +113,21 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
   }, [history, item, seriesPlaylist]);
 
   const formatStartWatchingLabel = (): string => {
-    if (!user) return t('sign_up_to_start_watching');
-    if (!subscription) return t('complete_your_subscription');
+    if (cleengId) {
+      if (!user) return t('sign_up_to_start_watching');
+      if (!subscription && configHasOffer) return t('complete_your_subscription');
+    }
     return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
   };
 
   const handleStartWatchingClick = useCallback(() => {
-    if (!user) return history.push('?u=login');
-    if (!allowedToWatch) return history.push('/u/payments');
+    if (cleengId) {
+      if (!user) return history.push(addQueryParam(history, 'u', 'create-account'));
+      if (!allowedToWatch) return history.push('/u/payments');
+    }
 
     return history.push(episodeURL(seriesPlaylist, item?.mediaid, true));
-  }, [user, history, allowedToWatch, item, seriesPlaylist]);
+  }, [cleengId, history, seriesPlaylist, item?.mediaid, user, allowedToWatch]);
 
   // Effects
   useEffect(() => {
@@ -144,8 +149,8 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
 
   // UI
   if ((!item && isLoading) || playlistIsLoading || !searchParams.has('e')) return <LoadingOverlay />;
-  if ((!isLoading && error) || !item) return <ErrorPage title="Episode not found!" />;
-  if (playlistError || !seriesPlaylist) return <ErrorPage title="Series not found!" />;
+  if ((!isLoading && error) || !item) return <ErrorPage title={t('episode_not_found')} />;
+  if (playlistError || !seriesPlaylist) return <ErrorPage title={t('series_not_found')} />;
 
   const pageTitle = `${item.title} - ${siteName}`;
   const canonicalUrl = seriesPlaylist && item ? `${window.location.origin}${episodeURL(seriesPlaylist, item.mediaid)}` : window.location.href;