fix(ui): Don't display empty dropdown when no trailer available (#804)

pull/208/head
TheCatLady 4 years ago committed by GitHub
parent 6e9ac275e1
commit 95c2a21697
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -92,8 +92,8 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
> >
{text} {text}
</button> </button>
<span className="relative z-10 block -ml-px"> {children && (
{children && ( <span className="relative z-10 block -ml-px">
<button <button
type="button" type="button"
className={`relative inline-flex items-center h-full px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out rounded-r-md focus:z-10 ${styleClasses.dropdownSideButtonClasses}`} className={`relative inline-flex items-center h-full px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out rounded-r-md focus:z-10 ${styleClasses.dropdownSideButtonClasses}`}
@ -117,25 +117,25 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
</svg> </svg>
)} )}
</button> </button>
)} <Transition
<Transition show={isOpen}
show={isOpen} enter="transition ease-out duration-100 opacity-0"
enter="transition ease-out duration-100 opacity-0" enterFrom="transform opacity-0 scale-95"
enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100"
enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-75 opacity-100"
leave="transition ease-in duration-75 opacity-100" leaveFrom="transform opacity-100 scale-100"
leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95"
leaveTo="transform opacity-0 scale-95" >
> <div className="absolute right-0 w-56 mt-2 -mr-1 origin-top-right rounded-md shadow-lg">
<div className="absolute right-0 w-56 mt-2 -mr-1 origin-top-right rounded-md shadow-lg"> <div
<div className={`rounded-md ring-1 ring-black ring-opacity-5 ${styleClasses.dropdownClasses}`}
className={`rounded-md ring-1 ring-black ring-opacity-5 ${styleClasses.dropdownClasses}`} >
> <div className="py-1">{children}</div>
<div className="py-1">{children}</div> </div>
</div> </div>
</div> </Transition>
</Transition> </span>
</span> )}
</span> </span>
); );
}; };

@ -417,10 +417,17 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
} }
}} }}
> >
{data.mediaInfo?.plexUrl || {(
(data.mediaInfo?.plexUrl4k && trailerUrl
(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 &&
data.mediaInfo?.plexUrl4k &&
(hasPermission(Permission.REQUEST_4K) ||
hasPermission(Permission.REQUEST_4K_MOVIE))
) ? (
<> <>
{data.mediaInfo?.plexUrl && {data.mediaInfo?.plexUrl &&
data.mediaInfo?.plexUrl4k && data.mediaInfo?.plexUrl4k &&
@ -435,17 +442,16 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
{intl.formatMessage(messages.play4konplex)} {intl.formatMessage(messages.play4konplex)}
</ButtonWithDropdown.Item> </ButtonWithDropdown.Item>
)} )}
{(data.mediaInfo?.plexUrl || data.mediaInfo?.plexUrl4k) && {trailerUrl && (
trailerUrl && ( <ButtonWithDropdown.Item
<ButtonWithDropdown.Item onClick={() => {
onClick={() => { window.open(trailerUrl, '_blank');
window.open(trailerUrl, '_blank'); }}
}} buttonType="ghost"
buttonType="ghost" >
> {intl.formatMessage(messages.watchtrailer)}
{intl.formatMessage(messages.watchtrailer)} </ButtonWithDropdown.Item>
</ButtonWithDropdown.Item> )}
)}
</> </>
) : null} ) : null}
</ButtonWithDropdown> </ButtonWithDropdown>

@ -443,35 +443,41 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
} }
}} }}
> >
{data.mediaInfo?.plexUrl || {(
(data.mediaInfo?.plexUrl4k && trailerUrl
(hasPermission(Permission.REQUEST_4K) || ? data.mediaInfo?.plexUrl ||
hasPermission(Permission.REQUEST_4K_TV))) ? ( (data.mediaInfo?.plexUrl4k &&
<> (hasPermission(Permission.REQUEST_4K) ||
{data.mediaInfo?.plexUrl && hasPermission(Permission.REQUEST_4K_TV)))
: 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={() => { <>
window.open(data.mediaInfo?.plexUrl4k, '_blank'); {data.mediaInfo?.plexUrl &&
}} data.mediaInfo?.plexUrl4k &&
buttonType="ghost" (hasPermission(Permission.REQUEST_4K) ||
> hasPermission(Permission.REQUEST_4K_TV)) ? (
{intl.formatMessage(messages.play4konplex)} <ButtonWithDropdown.Item
</ButtonWithDropdown.Item> onClick={() => {
)} window.open(data.mediaInfo?.plexUrl4k, '_blank');
{(data.mediaInfo?.plexUrl || data.mediaInfo?.plexUrl4k) && }}
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');
)} }}
buttonType="ghost"
>
{intl.formatMessage(messages.watchtrailer)}
</ButtonWithDropdown.Item>
) : null}
</> </>
) : null} ) : null}
</ButtonWithDropdown> </ButtonWithDropdown>

Loading…
Cancel
Save