fix(frontend): add Jellyfin logo to ExternalLinkBlock

2021-02-18 11:54:36 -05:00
parent fb51ce5570
commit 107b766c44
6 changed files with 89 additions and 145 deletions
--- 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<ExternalLinkBlockProps> = ({
@@ -21,18 +24,27 @@ const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
  tvdbId,
  imdbId,
  rtUrl,
-  plexUrl,
+  mediaUrl,
 }) => {
+  const settings = useSettings();
  return (
    <div className="flex items-center justify-end">
-      {plexUrl && (
+      {mediaUrl && (
        <a
-          href={plexUrl}
-          className="w-8 mx-2 transition duration-300 opacity-50 hover:opacity-100"
+          href={mediaUrl}
+          className={`${
+            settings.currentSettings.mediaServerType === MediaServerType.PLEX
+              ? 'w-8'
+              : 'w-14'
+          } mx-2 transition duration-300 opacity-50 hover:opacity-100`}
          target="_blank"
          rel="noreferrer"
        >
-          <PlexLogo />
+          {settings.currentSettings.mediaServerType === MediaServerType.PLEX ? (
+            <PlexLogo />
+          ) : (
+            <JellyfinLogo />
+          )}
        </a>
      )}
      {tmdbId && (
--- 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<MovieDetailsProps> = ({ 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<MovieDetailsProps> = ({ movie }) => {
          </span>
        </div>
        <div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap lg:mt-0">
-<<<<<<< HEAD
          <div className="mb-3 sm:mb-0">
            <PlayButton links={mediaLinks} />
          </div>
-=======
-          {trailerUrl ||
-          data.mediaInfo?.mediaUrl ||
-          data.mediaInfo?.mediaUrl4k ? (
-            <ButtonWithDropdown
-              buttonType="ghost"
-              text={
-                <>
-                  <svg
-                    className="w-5 h-5 mr-1"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <span>
-                    {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)}
-                  </span>
-                </>
-              }
-              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)) && (
-                      <ButtonWithDropdown.Item
-                        onClick={() => {
-                          window.open(data.mediaInfo?.mediaUrl4k, '_blank');
-                        }}
-                        buttonType="ghost"
-                      >
-                        {intl.formatMessage(messages.play4k, {
-                          mediaServerName:
-                            settings.currentSettings.mediaServerType ===
-                            MediaServerType.PLEX
-                              ? 'Plex'
-                              : 'Jellyfin',
-                        })}
-                      </ButtonWithDropdown.Item>
-                    )}
-                  {trailerUrl && (
-                    <ButtonWithDropdown.Item
-                      onClick={() => {
-                        window.open(trailerUrl, '_blank');
-                      }}
-                      buttonType="ghost"
-                    >
-                      {intl.formatMessage(messages.watchtrailer)}
-                    </ButtonWithDropdown.Item>
-                  )}
-                </>
-              ) : null}
-            </ButtonWithDropdown>
-          ) : null}
->>>>>>> 2fe4add... feat(rebase): rebase
          <div className="mb-3 sm:mb-0">
            <RequestButton
              mediaType="movie"
@@ -802,7 +697,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ 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}
            />
          </div>
        </div>
--- 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<TvDetailsProps> = ({ 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<TvDetailsProps> = ({ 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}
            />
          </div>
        </div>
--- 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 = () => {
                <div className="text-label">Account Type</div>
                <div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
                  <div className="flex items-center max-w-lg">
-                    {user?.userType === UserType.PLEX ? (
+                    {user?.userType === UserType.LOCAL ? (
                      <Badge badgeType="warning">
-                        {intl.formatMessage(messages.plexuser)}
+                        {intl.formatMessage(messages.localuser)}
                      </Badge>
                    ) : (
                      <Badge badgeType="default">
-                        {intl.formatMessage(messages.localuser)}
+                        {intl.formatMessage(messages.mediaServerUser, {
+                          mediaServerName:
+                            settings.currentSettings.mediaServerType ===
+                            MediaServerType.PLEX
+                              ? 'Plex'
+                              : 'Jellyfin',
+                        })}
                      </Badge>
                    )}
                  </div>