diff --git a/packages/common/src/env.ts b/packages/common/src/env.ts index a791fea8e..b58d89831 100644 --- a/packages/common/src/env.ts +++ b/packages/common/src/env.ts @@ -5,6 +5,7 @@ export type Env = { APP_PLAYER_ID: string; APP_FOOTER_TEXT: string; APP_DEFAULT_LANGUAGE: string; + APP_PUBLIC_URL: string; APP_DEFAULT_CONFIG_SOURCE?: string; APP_PLAYER_LICENSE_KEY?: string; @@ -20,6 +21,7 @@ const env: Env = { APP_PLAYER_ID: 'M4qoGvUk', APP_FOOTER_TEXT: '', APP_DEFAULT_LANGUAGE: 'en', + APP_PUBLIC_URL: '', }; export const configureEnv = (options: Partial) => { @@ -29,6 +31,7 @@ export const configureEnv = (options: Partial) => { env.APP_PLAYER_ID = options.APP_PLAYER_ID || env.APP_PLAYER_ID; env.APP_FOOTER_TEXT = options.APP_FOOTER_TEXT || env.APP_FOOTER_TEXT; env.APP_DEFAULT_LANGUAGE = options.APP_DEFAULT_LANGUAGE || env.APP_DEFAULT_LANGUAGE; + env.APP_PUBLIC_URL = options.APP_PUBLIC_URL || env.APP_PUBLIC_URL; env.APP_DEFAULT_CONFIG_SOURCE ||= options.APP_DEFAULT_CONFIG_SOURCE; env.APP_PLAYER_LICENSE_KEY ||= options.APP_PLAYER_LICENSE_KEY; diff --git a/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx b/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx index 81fafbe75..a4ce82ab3 100644 --- a/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx +++ b/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx @@ -10,6 +10,7 @@ import AccountController from '@jwp/ott-common/src/controllers/AccountController import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location'; import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm'; import { logDebug, logError } from '@jwp/ott-common/src/logger'; +import env from '@jwp/ott-common/src/env'; import ResetPasswordForm from '../../../components/ResetPasswordForm/ResetPasswordForm'; import ForgotPasswordForm from '../../../components/ForgotPasswordForm/ForgotPasswordForm'; @@ -54,7 +55,7 @@ const ResetPassword: React.FC = ({ type }: Prop) => { }; const resetPasswordClickHandler = async () => { - const resetUrl = `${window.location.origin}/?u=edit-password`; + const resetUrl = `${env.APP_PUBLIC_URL}/?u=edit-password`; try { if (!user?.email) { logDebug('ResetPassword', 'invalid param email'); @@ -73,7 +74,7 @@ const ResetPassword: React.FC = ({ type }: Prop) => { }; const emailSubmitHandler: UseFormOnSubmitHandler = async (formData, { setErrors, setSubmitting }) => { - const resetUrl = `${window.location.origin}/?u=edit-password`; + const resetUrl = `${env.APP_PUBLIC_URL}/?u=edit-password`; try { await accountController.resetPassword(formData.email, resetUrl); diff --git a/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx b/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx index 03bff477b..2648b1272 100644 --- a/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx +++ b/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx @@ -16,6 +16,7 @@ import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakp import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam'; import usePlaylist from '@jwp/ott-hooks-react/src/usePlaylist'; import PlayTrailer from '@jwp/ott-theme/assets/icons/play_trailer.svg?react'; +import env from '@jwp/ott-common/src/env'; import VideoLayout from '../../components/VideoLayout/VideoLayout'; import InlinePlayer from '../../containers/InlinePlayer/InlinePlayer'; @@ -114,7 +115,7 @@ const LegacySeries = () => { const pageTitle = `${selectedItem.title} - ${siteName}`; const pageDescription = selectedItem?.description || ''; - const canonicalUrl = `${window.location.origin}${legacySeriesURL({ episodeId: episode?.mediaid, seriesId })}`; + const canonicalUrl = `${env.APP_PUBLIC_URL}${legacySeriesURL({ episodeId: episode?.mediaid, seriesId })}`; const backgroundImage = (selectedItem.backgroundImage as string) || undefined; const primaryMetadata = episode ? ( diff --git a/packages/ui-react/src/pages/LegacySeries/utils.ts b/packages/ui-react/src/pages/LegacySeries/utils.ts index c4320da92..8788e3446 100644 --- a/packages/ui-react/src/pages/LegacySeries/utils.ts +++ b/packages/ui-react/src/pages/LegacySeries/utils.ts @@ -3,6 +3,7 @@ import type { Playlist, PlaylistItem } from '@jwp/ott-common/types/playlist'; import type { EpisodeMetadata } from '@jwp/ott-common/types/series'; import { legacySeriesURL } from '@jwp/ott-common/src/utils/urlFormatting'; import { secondsToISO8601 } from '@jwp/ott-common/src/utils/datetime'; +import env from '@jwp/ott-common/src/env'; /** * Get an array of options for a season filter @@ -57,7 +58,7 @@ export const getEpisodesInSeason = (episode: PlaylistItem | undefined, seriesPla export const generateLegacySeriesMetadata = (seriesPlaylist: Playlist, seriesId: string | undefined) => { // Use playlist for old flow and media id for a new flow - const seriesCanonical = `${window.location.origin}/s/${seriesId}`; + const seriesCanonical = `${env.APP_PUBLIC_URL}/s/${seriesId}`; return { '@type': 'TVSeries', @@ -78,7 +79,7 @@ export const generateLegacyEpisodeJSONLD = ( episodeMetadata: EpisodeMetadata | undefined, seriesId: string, ) => { - const episodeCanonical = `${window.location.origin}${legacySeriesURL({ episodeId: episode?.mediaid, seriesId })}`; + const episodeCanonical = `${env.APP_PUBLIC_URL}${legacySeriesURL({ episodeId: episode?.mediaid, seriesId })}`; const seriesMetadata = generateLegacySeriesMetadata(seriesPlaylist, seriesId); if (!episode) { diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx index 8ecccd493..c1a0c7169 100644 --- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx +++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx @@ -17,6 +17,7 @@ import useEntitlement from '@jwp/ott-hooks-react/src/useEntitlement'; import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint'; import PlayTrailer from '@jwp/ott-theme/assets/icons/play_trailer.svg?react'; import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam'; +import env from '@jwp/ott-common/src/env'; import type { ScreenComponent } from '../../../../../types/screens'; import VideoLayout from '../../../../components/VideoLayout/VideoLayout'; @@ -90,7 +91,7 @@ const MediaEvent: ScreenComponent = ({ data: media, isLoading }) = // UI const { title, mediaid } = media; const pageTitle = `${title} - ${siteName}`; - const canonicalUrl = media ? `${window.location.origin}${mediaURL({ id: mediaid, title })}` : window.location.href; + const canonicalUrl = media ? `${env.APP_PUBLIC_URL}${mediaURL({ id: mediaid, title })}` : window.location.href; const primaryMetadata = ( <> @@ -149,7 +150,7 @@ const MediaEvent: ScreenComponent = ({ data: media, isLoading }) = {media.tags?.split(',').map((tag) => ( ))} - {media ? : null} + {media ? : null} = ({ data, isLoading }) => { // UI const pageTitle = `${data.title} - ${siteName}`; - const canonicalUrl = data ? `${window.location.origin}${mediaURL({ id: data.mediaid, title: data.title })}` : window.location.href; + const canonicalUrl = data ? `${env.APP_PUBLIC_URL}${mediaURL({ id: data.mediaid, title: data.title })}` : window.location.href; const primaryMetadata = ; const shareButton = ; @@ -130,7 +131,7 @@ const MediaMovie: ScreenComponent = ({ data, isLoading }) => { {data.tags?.split(',').map((tag) => ( ))} - {data ? : null} + {data ? : null} = ({ data: seriesMedia }) => { if (!seriesMedia || !series || !playEpisode) return ; const pageTitle = `${selectedItem.title} - ${siteName}`; - const canonicalUrl = `${window.location.origin}${mediaURL({ id: seriesMedia.mediaid, title: seriesMedia.title, episodeId: episode?.mediaid })}`; + const canonicalUrl = `${env.APP_PUBLIC_URL}${mediaURL({ id: seriesMedia.mediaid, title: seriesMedia.title, episodeId: episode?.mediaid })}`; const primaryMetadata = ; const secondaryMetadata = episodeMetadata && episode && ( @@ -245,7 +246,7 @@ const MediaSeries: ScreenComponent = ({ data: seriesMedia }) => { ))} {selectedItem ? ( - + ) : null} = ({ data }) => { const { config } = useConfigStore(({ config }) => ({ config }), shallow); const { siteName } = config; const pageTitle = `${data.title} - ${siteName}`; - const canonicalUrl = data ? `${window.location.origin}${mediaURL({ id: data.mediaid, title: data.title })}` : window.location.href; + const canonicalUrl = data ? `${env.APP_PUBLIC_URL}${mediaURL({ id: data.mediaid, title: data.title })}` : window.location.href; useEffect(() => { (document.scrollingElement || document.body).scroll({ top: 0 }); diff --git a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx index ea14e6ab6..0da636294 100644 --- a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx +++ b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx @@ -13,6 +13,7 @@ import useLiveChannels from '@jwp/ott-hooks-react/src/useLiveChannels'; import useEntitlement from '@jwp/ott-hooks-react/src/useEntitlement'; import useLiveProgram from '@jwp/ott-hooks-react/src/useLiveProgram'; import Play from '@jwp/ott-theme/assets/icons/play.svg?react'; +import env from '@jwp/ott-common/src/env'; import type { ScreenComponent } from '../../../../../types/screens'; import Epg from '../../../../components/Epg/Epg'; @@ -127,7 +128,7 @@ const PlaylistLiveChannels: ScreenComponent = ({ data: { feedid, playl // SEO (for channels) // const getUrl = (id: string) => liveChannelsURL(feedid, id); - const canonicalUrl = `${window.location.origin}${liveChannelsURL(feedid, channel.id)}`; + const canonicalUrl = `${env.APP_PUBLIC_URL}${liveChannelsURL(feedid, channel.id)}`; const pageTitle = `${channel.title} - ${siteName}`; const shareButton = channelMediaItem ? ( @@ -187,7 +188,7 @@ const PlaylistLiveChannels: ScreenComponent = ({ data: { feedid, playl {channelMediaItem?.tags?.split(',').map((tag) => ( ))} - {channelMediaItem ? : null} + {channelMediaItem ? : null}