From 107b766c4450888806490274360b95e808aefd13 Mon Sep 17 00:00:00 2001 From: Aiden Vigue Date: Thu, 18 Feb 2021 11:54:36 -0500 Subject: [PATCH] fix(frontend): add Jellyfin logo to ExternalLinkBlock --- server/routes/auth.ts | 16 +-- src/assets/services/jellyfin.svg | 24 ++++ src/components/ExternalLinkBlock/index.tsx | 24 +++- src/components/MovieDetails/index.tsx | 133 ++---------------- src/components/TvDetails/index.tsx | 21 ++- .../UserGeneralSettings/index.tsx | 16 ++- 6 files changed, 89 insertions(+), 145 deletions(-) create mode 100644 src/assets/services/jellyfin.svg diff --git a/server/routes/auth.ts b/server/routes/auth.ts index 068433b8e..a382c5b33 100644 --- a/server/routes/auth.ts +++ b/server/routes/auth.ts @@ -209,7 +209,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => { } // Update the users avatar with their jellyfin profile pic (incase it changed) - if (typeof account.User.PrimaryImageTag !== undefined) { + if (account.User.PrimaryImageTag) { user.avatar = `${hostname}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`; } else { user.avatar = '/os_logo_square.png'; @@ -233,10 +233,9 @@ authRoutes.post('/jellyfin', async (req, res, next) => { jellyfinDeviceId: deviceId, jellyfinAuthToken: account.AccessToken, permissions: Permission.ADMIN, - avatar: - typeof account.User.PrimaryImageTag !== undefined - ? `${hostname}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90` - : '/os_logo_square.png', + avatar: account.User.PrimaryImageTag + ? `${hostname}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90` + : '/os_logo_square.png', userType: UserType.JELLYFIN, }); await userRepository.save(user); @@ -263,10 +262,9 @@ authRoutes.post('/jellyfin', async (req, res, next) => { jellyfinDeviceId: deviceId, jellyfinAuthToken: account.AccessToken, permissions: settings.main.defaultPermissions, - avatar: - typeof account.User.PrimaryImageTag !== undefined - ? `${hostname}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90` - : '/os_logo_square.png', + avatar: account.User.PrimaryImageTag + ? `${hostname}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90` + : '/os_logo_square.png', userType: UserType.JELLYFIN, }); await userRepository.save(user); diff --git a/src/assets/services/jellyfin.svg b/src/assets/services/jellyfin.svg new file mode 100644 index 000000000..4c93218a6 --- /dev/null +++ b/src/assets/services/jellyfin.svg @@ -0,0 +1,24 @@ + diff --git a/src/components/ExternalLinkBlock/index.tsx b/src/components/ExternalLinkBlock/index.tsx index 680cf1ee1..938382b7d 100644 --- a/src/components/ExternalLinkBlock/index.tsx +++ b/src/components/ExternalLinkBlock/index.tsx @@ -4,7 +4,10 @@ import TvdbLogo from '../../assets/services/tvdb.svg'; import ImdbLogo from '../../assets/services/imdb.svg'; import RTLogo from '../../assets/services/rt.svg'; import PlexLogo from '../../assets/services/plex.svg'; +import JellyfinLogo from '../../assets/services/jellyfin.svg'; import { MediaType } from '../../../server/constants/media'; +import useSettings from '../../hooks/useSettings'; +import { MediaServerType } from '../../../server/constants/server'; interface ExternalLinkBlockProps { mediaType: 'movie' | 'tv'; @@ -12,7 +15,7 @@ interface ExternalLinkBlockProps { tvdbId?: number; imdbId?: string; rtUrl?: string; - plexUrl?: string; + mediaUrl?: string; } const ExternalLinkBlock: React.FC = ({ @@ -21,18 +24,27 @@ const ExternalLinkBlock: React.FC = ({ tvdbId, imdbId, rtUrl, - plexUrl, + mediaUrl, }) => { + const settings = useSettings(); return (
- {plexUrl && ( + {mediaUrl && ( - + {settings.currentSettings.mediaServerType === MediaServerType.PLEX ? ( + + ) : ( + + )} )} {tmdbId && ( diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index 0548f5b08..298a3be75 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -35,11 +35,8 @@ import ConfirmButton from '../Common/ConfirmButton'; import DownloadBlock from '../DownloadBlock'; import PageTitle from '../Common/PageTitle'; import useSettings from '../../hooks/useSettings'; -<<<<<<< HEAD import PlayButton, { PlayButtonLink } from '../Common/PlayButton'; -======= import { MediaServerType } from '../../../server/constants/server'; ->>>>>>> 2fe4add... feat(rebase): rebase const messages = defineMessages({ releasedate: 'Release Date', @@ -117,22 +114,28 @@ const MovieDetails: React.FC = ({ movie }) => { const mediaLinks: PlayButtonLink[] = []; - if (data.mediaInfo?.plexUrl) { + if (data.mediaInfo?.mediaUrl) { mediaLinks.push({ - text: intl.formatMessage(messages.playonplex), - url: data.mediaInfo?.plexUrl, + text: + settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN + ? intl.formatMessage(messages.play, { mediaServerName: 'Jellyfin' }) + : intl.formatMessage(messages.play, { mediaServerName: 'Plex' }), + url: data.mediaInfo?.mediaUrl, }); } if ( - data.mediaInfo?.plexUrl4k && - hasPermission([Permission.REQUEST_4K, Permission.REQUEST_4K_MOVIE], { + data.mediaInfo?.mediaUrl4k && + hasPermission([Permission.REQUEST_4K, Permission.REQUEST_4K_TV], { type: 'or', }) ) { mediaLinks.push({ - text: intl.formatMessage(messages.play4konplex), - url: data.mediaInfo?.plexUrl4k, + text: + settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN + ? intl.formatMessage(messages.play4k, { mediaServerName: 'Jellyfin' }) + : intl.formatMessage(messages.play4k, { mediaServerName: 'Plex' }), + url: data.mediaInfo?.mediaUrl4k, }); } @@ -451,117 +454,9 @@ const MovieDetails: React.FC = ({ movie }) => {
-<<<<<<< HEAD
-======= - {trailerUrl || - data.mediaInfo?.mediaUrl || - data.mediaInfo?.mediaUrl4k ? ( - - - - - - - {data.mediaInfo?.mediaUrl || data.mediaInfo?.mediaUrl4k - ? intl.formatMessage(messages.play, { - mediaServerName: - settings.currentSettings.mediaServerType === - MediaServerType.PLEX - ? 'Plex' - : 'Jellyfin', - }) - : data.mediaInfo?.mediaUrl4k && - (hasPermission(Permission.REQUEST_4K) || - hasPermission(Permission.REQUEST_4K_MOVIE)) - ? intl.formatMessage(messages.play4k, { - mediaServerName: - settings.currentSettings.mediaServerType === - MediaServerType.PLEX - ? 'Plex' - : 'Jellyfin', - }) - : intl.formatMessage(messages.watchtrailer)} - - - } - onClick={() => { - if (data.mediaInfo?.mediaUrl) { - window.open(data.mediaInfo?.mediaUrl, '_blank'); - } else if (data.mediaInfo?.mediaUrl4k) { - window.open(data.mediaInfo?.mediaUrl4k, '_blank'); - } else if (trailerUrl) { - window.open(trailerUrl, '_blank'); - } - }} - > - {( - trailerUrl - ? data.mediaInfo?.mediaUrl || - (data.mediaInfo?.mediaUrl4k && - (hasPermission(Permission.REQUEST_4K) || - hasPermission(Permission.REQUEST_4K_MOVIE))) - : data.mediaInfo?.mediaUrl && - data.mediaInfo?.mediaUrl4k && - (hasPermission(Permission.REQUEST_4K) || - hasPermission(Permission.REQUEST_4K_MOVIE)) - ) ? ( - <> - {data.mediaInfo?.mediaUrl && - data.mediaInfo?.mediaUrl4k && - (hasPermission(Permission.REQUEST_4K) || - hasPermission(Permission.REQUEST_4K_MOVIE)) && ( - { - window.open(data.mediaInfo?.mediaUrl4k, '_blank'); - }} - buttonType="ghost" - > - {intl.formatMessage(messages.play4k, { - mediaServerName: - settings.currentSettings.mediaServerType === - MediaServerType.PLEX - ? 'Plex' - : 'Jellyfin', - })} - - )} - {trailerUrl && ( - { - window.open(trailerUrl, '_blank'); - }} - buttonType="ghost" - > - {intl.formatMessage(messages.watchtrailer)} - - )} - - ) : null} - - ) : null} ->>>>>>> 2fe4add... feat(rebase): rebase
= ({ movie }) => { tvdbId={data.externalIds.tvdbId} imdbId={data.externalIds.imdbId} rtUrl={ratingData?.url} - plexUrl={data.mediaInfo?.mediaUrl ?? data.mediaInfo?.mediaUrl4k} + mediaUrl={data.mediaInfo?.mediaUrl ?? data.mediaInfo?.mediaUrl4k} />
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx index ee1577049..519e5239e 100644 --- a/src/components/TvDetails/index.tsx +++ b/src/components/TvDetails/index.tsx @@ -34,6 +34,7 @@ import DownloadBlock from '../DownloadBlock'; import PageTitle from '../Common/PageTitle'; import useSettings from '../../hooks/useSettings'; import PlayButton, { PlayButtonLink } from '../Common/PlayButton'; +import { MediaServerType } from '../../../server/constants/server'; const messages = defineMessages({ firstAirDate: 'First Air Date', @@ -112,22 +113,28 @@ const TvDetails: React.FC = ({ tv }) => { const mediaLinks: PlayButtonLink[] = []; - if (data.mediaInfo?.plexUrl) { + if (data.mediaInfo?.mediaUrl) { mediaLinks.push({ - text: intl.formatMessage(messages.playonplex), - url: data.mediaInfo?.plexUrl, + text: + settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN + ? intl.formatMessage(messages.play, { mediaServerName: 'Jellyfin' }) + : intl.formatMessage(messages.play, { mediaServerName: 'Plex' }), + url: data.mediaInfo?.mediaUrl, }); } if ( - data.mediaInfo?.plexUrl4k && + data.mediaInfo?.mediaUrl4k && hasPermission([Permission.REQUEST_4K, Permission.REQUEST_4K_TV], { type: 'or', }) ) { mediaLinks.push({ - text: intl.formatMessage(messages.play4konplex), - url: data.mediaInfo?.plexUrl4k, + text: + settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN + ? intl.formatMessage(messages.play4k, { mediaServerName: 'Jellyfin' }) + : intl.formatMessage(messages.play4k, { mediaServerName: 'Plex' }), + url: data.mediaInfo?.mediaUrl4k, }); } @@ -703,7 +710,7 @@ const TvDetails: React.FC = ({ tv }) => { tvdbId={data.externalIds.tvdbId} imdbId={data.externalIds.imdbId} rtUrl={ratingData?.url} - plexUrl={data.mediaInfo?.mediaUrl ?? data.mediaInfo?.mediaUrl4k} + mediaUrl={data.mediaInfo?.mediaUrl ?? data.mediaInfo?.mediaUrl4k} /> diff --git a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx index 8e0a07655..c97464ca0 100644 --- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx +++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx @@ -6,6 +6,7 @@ import { defineMessages, useIntl } from 'react-intl'; import { useToasts } from 'react-toast-notifications'; import useSWR from 'swr'; import { Language } from '../../../../../server/lib/settings'; +import { MediaServerType } from '../../../../../server/constants/server'; import useSettings from '../../../../hooks/useSettings'; import { UserType, useUser } from '../../../../hooks/useUser'; import Error from '../../../../pages/_error'; @@ -19,7 +20,7 @@ const messages = defineMessages({ displayName: 'Display Name', save: 'Save Changes', saving: 'Saving…', - plexuser: 'Plex User', + mediaServerUser: '{mediaServerName} User', localuser: 'Local User', toastSettingsSuccess: 'Settings successfully saved!', toastSettingsFailure: 'Something went wrong while saving settings.', @@ -35,6 +36,7 @@ const messages = defineMessages({ const UserGeneralSettings: React.FC = () => { const intl = useIntl(); + const settings = useSettings(); const { addToast } = useToasts(); const router = useRouter(); const { user, mutate } = useUser({ id: Number(router.query.userId) }); @@ -105,13 +107,19 @@ const UserGeneralSettings: React.FC = () => {
Account Type
- {user?.userType === UserType.PLEX ? ( + {user?.userType === UserType.LOCAL ? ( - {intl.formatMessage(messages.plexuser)} + {intl.formatMessage(messages.localuser)} ) : ( - {intl.formatMessage(messages.localuser)} + {intl.formatMessage(messages.mediaServerUser, { + mediaServerName: + settings.currentSettings.mediaServerType === + MediaServerType.PLEX + ? 'Plex' + : 'Jellyfin', + })} )}