fix(frontend): add Jellyfin logo to ExternalLinkBlock

This commit is contained in:
Aiden Vigue
2021-02-18 11:54:36 -05:00
parent fb51ce5570
commit 107b766c44
6 changed files with 89 additions and 145 deletions

View File

@@ -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>