shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): changed plex, request, and cog buttons to align properly on smaller mobile UIs (#928)

Browse Source
This commit is contained in:
Brandon Cohen
2021-02-16 02:16:14 -05:00
committed by GitHub
parent 019622aab1
commit f1c335815f
2 changed files with 161 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/components/MovieDetails/index.tsx
View File

@@ -352,7 +352,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
<div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left"> <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
<div className="mb-2"> <div className="mb-2">
{data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && ( {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
<span className="mr-2"> <span className="lg:mr-2">
<StatusBadge <StatusBadge
status={data.mediaInfo?.status} status={data.mediaInfo?.status}
inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0} inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
@@ -394,93 +394,95 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
))} ))}
</span> </span>
</div> </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"> <div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-2 space-y-2 sm:space-y-0 sm:justify-end sm:flex-nowrap sm:mt-4">
{(trailerUrl || {(trailerUrl ||
data.mediaInfo?.plexUrl || data.mediaInfo?.plexUrl ||
data.mediaInfo?.plexUrl4k) && ( data.mediaInfo?.plexUrl4k) && (
<ButtonWithDropdown <div className="mt-2 sm:mt-0">
buttonType="ghost" <ButtonWithDropdown
text={ buttonType="ghost"
<> text={
<svg <>
className="w-5 h-5 mr-1" <svg
fill="none" className="w-5 h-5 mr-1"
stroke="currentColor" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
> xmlns="http://www.w3.org/2000/svg"
<path >
strokeLinecap="round" <path
strokeLinejoin="round" strokeLinecap="round"
strokeWidth={2} strokeLinejoin="round"
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" 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" <path
strokeLinejoin="round" strokeLinecap="round"
strokeWidth={2} strokeLinejoin="round"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" strokeWidth={2}
/> d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
</svg> />
<span> </svg>
{data.mediaInfo?.plexUrl <span>
? intl.formatMessage(messages.playonplex) {data.mediaInfo?.plexUrl
: data.mediaInfo?.plexUrl4k && ? intl.formatMessage(messages.playonplex)
(hasPermission(Permission.REQUEST_4K) || : data.mediaInfo?.plexUrl4k &&
hasPermission(Permission.REQUEST_4K_MOVIE)) (hasPermission(Permission.REQUEST_4K) ||
? intl.formatMessage(messages.playonplex) hasPermission(Permission.REQUEST_4K_MOVIE))
: intl.formatMessage(messages.watchtrailer)} ? intl.formatMessage(messages.playonplex)
</span> : intl.formatMessage(messages.watchtrailer)}
</> </span>
} </>
onClick={() => {
if (data.mediaInfo?.plexUrl) {
window.open(data.mediaInfo?.plexUrl, '_blank');
} else if (data.mediaInfo?.plexUrl4k) {
window.open(data.mediaInfo?.plexUrl4k, '_blank');
} else if (trailerUrl) {
window.open(trailerUrl, '_blank');
} }
}} onClick={() => {
> if (data.mediaInfo?.plexUrl) {
{( window.open(data.mediaInfo?.plexUrl, '_blank');
trailerUrl } else if (data.mediaInfo?.plexUrl4k) {
? data.mediaInfo?.plexUrl || window.open(data.mediaInfo?.plexUrl4k, '_blank');
(data.mediaInfo?.plexUrl4k && } else if (trailerUrl) {
window.open(trailerUrl, '_blank');
}
}}
>
{(
trailerUrl
? data.mediaInfo?.plexUrl ||
(data.mediaInfo?.plexUrl4k &&
(hasPermission(Permission.REQUEST_4K) ||
hasPermission(Permission.REQUEST_4K_MOVIE)))
: data.mediaInfo?.plexUrl &&
data.mediaInfo?.plexUrl4k &&
(hasPermission(Permission.REQUEST_4K) || (hasPermission(Permission.REQUEST_4K) ||
hasPermission(Permission.REQUEST_4K_MOVIE))) hasPermission(Permission.REQUEST_4K_MOVIE))
: data.mediaInfo?.plexUrl && ) ? (
data.mediaInfo?.plexUrl4k && <>
(hasPermission(Permission.REQUEST_4K) || {data.mediaInfo?.plexUrl &&
hasPermission(Permission.REQUEST_4K_MOVIE)) data.mediaInfo?.plexUrl4k &&
) ? ( (hasPermission(Permission.REQUEST_4K) ||
<> hasPermission(Permission.REQUEST_4K_MOVIE)) && (
{data.mediaInfo?.plexUrl && <ButtonWithDropdown.Item
data.mediaInfo?.plexUrl4k && onClick={() => {
(hasPermission(Permission.REQUEST_4K) || window.open(data.mediaInfo?.plexUrl4k, '_blank');
hasPermission(Permission.REQUEST_4K_MOVIE)) && ( }}
buttonType="ghost"
>
{intl.formatMessage(messages.play4konplex)}
</ButtonWithDropdown.Item>
)}
{trailerUrl && (
<ButtonWithDropdown.Item <ButtonWithDropdown.Item
onClick={() => { onClick={() => {
window.open(data.mediaInfo?.plexUrl4k, '_blank'); window.open(trailerUrl, '_blank');
}} }}
buttonType="ghost" buttonType="ghost"
> >
{intl.formatMessage(messages.play4konplex)} {intl.formatMessage(messages.watchtrailer)}
</ButtonWithDropdown.Item> </ButtonWithDropdown.Item>
)} )}
{trailerUrl && ( </>
<ButtonWithDropdown.Item ) : null}
onClick={() => { </ButtonWithDropdown>
window.open(trailerUrl, '_blank'); </div>
}}
buttonType="ghost"
>
{intl.formatMessage(messages.watchtrailer)}
</ButtonWithDropdown.Item>
)}
</>
) : null}
</ButtonWithDropdown>
)} )}
<div className="mb-3 sm:mb-0"> <div className="mb-3 sm:mb-0">
<RequestButton <RequestButton

164
src/components/TvDetails/index.tsx
View File

@@ -378,7 +378,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
<div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left"> <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
<div className="mb-2"> <div className="mb-2">
{data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && ( {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
<span className="mr-2"> <span className="lg:mr-2">
<StatusBadge <StatusBadge
status={data.mediaInfo?.status} status={data.mediaInfo?.status}
inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0} inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
@@ -422,93 +422,95 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
))} ))}
</span> </span>
</div> </div>
<div className="flex flex-wrap justify-center flex-shrink-0 mt-4 sm:flex-nowrap sm:justify-end lg:mt-0"> <div className="flex flex-wrap justify-center flex-shrink-0 mt-2 space-y-2 sm:space-y-0 sm:flex-nowrap sm:justify-end sm:mt-4">
{(trailerUrl || {(trailerUrl ||
data.mediaInfo?.plexUrl || data.mediaInfo?.plexUrl ||
data.mediaInfo?.plexUrl4k) && ( data.mediaInfo?.plexUrl4k) && (
<ButtonWithDropdown <div className="mt-2 sm:mt-0">
buttonType="ghost" <ButtonWithDropdown
text={ buttonType="ghost"
<> text={
<svg <>
className="w-5 h-5 mr-1" <svg
fill="none" className="w-5 h-5 mr-1"
stroke="currentColor" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
> xmlns="http://www.w3.org/2000/svg"
<path >
strokeLinecap="round" <path
strokeLinejoin="round" strokeLinecap="round"
strokeWidth={2} strokeLinejoin="round"
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" 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" <path
strokeLinejoin="round" strokeLinecap="round"
strokeWidth={2} strokeLinejoin="round"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" strokeWidth={2}
/> d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
</svg> />
<span> </svg>
{data.mediaInfo?.plexUrl <span>
? intl.formatMessage(messages.playonplex) {data.mediaInfo?.plexUrl
: data.mediaInfo?.plexUrl4k && ? intl.formatMessage(messages.playonplex)
(hasPermission(Permission.REQUEST_4K) || : data.mediaInfo?.plexUrl4k &&
hasPermission(Permission.REQUEST_4K_TV)) (hasPermission(Permission.REQUEST_4K) ||
? intl.formatMessage(messages.play4konplex) hasPermission(Permission.REQUEST_4K_TV))
: intl.formatMessage(messages.watchtrailer)} ? intl.formatMessage(messages.play4konplex)
</span> : intl.formatMessage(messages.watchtrailer)}
</> </span>
} </>
onClick={() => {
if (data.mediaInfo?.plexUrl) {
window.open(data.mediaInfo?.plexUrl, '_blank');
} else if (data.mediaInfo?.plexUrl4k) {
window.open(data.mediaInfo?.plexUrl4k, '_blank');
} else if (trailerUrl) {
window.open(trailerUrl, '_blank');
} }
}} onClick={() => {
> if (data.mediaInfo?.plexUrl) {
{( window.open(data.mediaInfo?.plexUrl, '_blank');
trailerUrl } else if (data.mediaInfo?.plexUrl4k) {
? data.mediaInfo?.plexUrl || window.open(data.mediaInfo?.plexUrl4k, '_blank');
(data.mediaInfo?.plexUrl4k && } else if (trailerUrl) {
window.open(trailerUrl, '_blank');
}
}}
>
{(
trailerUrl
? data.mediaInfo?.plexUrl ||
(data.mediaInfo?.plexUrl4k &&
(hasPermission(Permission.REQUEST_4K) ||
hasPermission(Permission.REQUEST_4K_TV)))
: data.mediaInfo?.plexUrl &&
data.mediaInfo?.plexUrl4k &&
(hasPermission(Permission.REQUEST_4K) || (hasPermission(Permission.REQUEST_4K) ||
hasPermission(Permission.REQUEST_4K_TV))) hasPermission(Permission.REQUEST_4K_TV))
: data.mediaInfo?.plexUrl && ) ? (
<>
{data.mediaInfo?.plexUrl &&
data.mediaInfo?.plexUrl4k && data.mediaInfo?.plexUrl4k &&
(hasPermission(Permission.REQUEST_4K) || (hasPermission(Permission.REQUEST_4K) ||
hasPermission(Permission.REQUEST_4K_TV)) hasPermission(Permission.REQUEST_4K_TV)) ? (
) ? ( <ButtonWithDropdown.Item
<> onClick={() => {
{data.mediaInfo?.plexUrl && window.open(data.mediaInfo?.plexUrl4k, '_blank');
data.mediaInfo?.plexUrl4k && }}
(hasPermission(Permission.REQUEST_4K) || buttonType="ghost"
hasPermission(Permission.REQUEST_4K_TV)) ? ( >
<ButtonWithDropdown.Item {intl.formatMessage(messages.play4konplex)}
onClick={() => { </ButtonWithDropdown.Item>
window.open(data.mediaInfo?.plexUrl4k, '_blank'); ) : null}
}} {trailerUrl ? (
buttonType="ghost" <ButtonWithDropdown.Item
> onClick={() => {
{intl.formatMessage(messages.play4konplex)} window.open(trailerUrl, '_blank');
</ButtonWithDropdown.Item> }}
) : null} buttonType="ghost"
{trailerUrl ? ( >
<ButtonWithDropdown.Item {intl.formatMessage(messages.watchtrailer)}
onClick={() => { </ButtonWithDropdown.Item>
window.open(trailerUrl, '_blank'); ) : null}
}} </>
buttonType="ghost" ) : null}
> </ButtonWithDropdown>
{intl.formatMessage(messages.watchtrailer)} </div>
</ButtonWithDropdown.Item>
) : null}
</>
) : null}
</ButtonWithDropdown>
)} )}
<div className="mb-3 sm:mb-0"> <div className="mb-3 sm:mb-0">
<RequestButton <RequestButton