Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-22 06:58:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Improvements to MetaDetails Page

Browse source 
Changes made:
- removed `meta.name` from MetaDetails Page
- removed `meta.description` from MetaDetails Page
- remove "Writers" from MetaDetails Page
- fallback to blank PNG if logo unavailable (MetaPreview only)
- fallback to `meta.name` (css hack used to hide broken image) if logo unavailable
This commit is contained in:
Alexandru Branza 2022-02-04 14:30:59 +02:00
parent 748f14a664
commit 67e3ffeed4
2 changed files with 40 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/common/MetaPreview/MetaPreview.js
View file

@ -92,9 +92,16 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
return trailerStreams[0].deepLinks.player;
}, [trailerStreams]);
const renderLogoFallback = React.useCallback(() => (
<Icon className={styles['logo-placeholder-icon']} icon={'ic_broken_link'} />
), []);
const logoFallback = ({ currentTarget }) => {
currentTarget.onerror = null; // detach handler
if (compact) {
// replace with blank png
currentTarget.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
} else {
// show img.alt without broken image icon
currentTarget.className = styles['missing'];
}
}
return (
<div className={classnames(className, styles['meta-preview-container'], { [styles['compact']]: compact })}>
{
@ -106,17 +113,14 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
null
}
<div className={styles['meta-info-container']}>
{
typeof logo === 'string' && logo.length > 0 ?
<Image
className={styles['logo']}
src={logo}
alt={' '}
renderFallback={renderLogoFallback}
/>
:
null
}
<div className={styles['logo-holder']}>
<Image
className={styles['logo']}
src={logo || ''}
alt={name}
onError={logoFallback}
/>
</div>
{
(typeof releaseInfo === 'string' && releaseInfo.length > 0) || (released instanceof Date && !isNaN(released.getTime())) || (typeof runtime === 'string' && runtime.length > 0) || linksGroups.has(CONSTANTS.IMDB_LINK_CATEGORY) ?
<div className={styles['runtime-release-info-container']}>
@ -155,7 +159,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
null
}
{
typeof name === 'string' && name.length > 0 ?
compact && typeof name === 'string' && name.length > 0 ?
<div className={styles['name-container']}>
{name}
</div>
@ -163,7 +167,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
null
}
{
typeof description === 'string' && description.length > 0 ?
compact && typeof description === 'string' && description.length > 0 ?
<div className={styles['description-container']}>{description}</div>
:
null
@ -172,7 +176,8 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
Array.from(linksGroups.keys())
.filter((category) => {
return category !== CONSTANTS.IMDB_LINK_CATEGORY &&
category !== CONSTANTS.SHARE_LINK_CATEGORY;
category !== CONSTANTS.SHARE_LINK_CATEGORY &&
category !== 'Writers';
})
.map((category, index) => (
<MetaLinks

19
src/common/MetaPreview/styles.less
View file

@ -89,6 +89,23 @@
margin: 2rem 0;
}
.missing {
margin-left: -33px;
text-indent: 16px;
max-width: 200%;
color: white;
font-size: 1.5rem;
position: absolute;
bottom: 1.1rem;
}
.logo-holder {
height: 12rem;
overflow: hidden;
width: 100%;
position: relative;
}
.logo {
object-fit: contain;
object-position: center;
@ -153,7 +170,7 @@
.name-container {
margin-top: 1rem;
font-size: 1.7rem;
font-size: 1.5rem;
color: @color-surface-light5-90;
}