From 67e3ffeed481ea780cf4c0eac0769ac71bfd2677 Mon Sep 17 00:00:00 2001 From: Alexandru Branza Date: Fri, 4 Feb 2022 14:30:59 +0200 Subject: [PATCH 1/4] Improvements to MetaDetails Page 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 --- src/common/MetaPreview/MetaPreview.js | 39 +++++++++++++++------------ src/common/MetaPreview/styles.less | 19 ++++++++++++- 2 files changed, 40 insertions(+), 18 deletions(-) diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js index a9424b8fd..e6c042c40 100644 --- a/src/common/MetaPreview/MetaPreview.js +++ b/src/common/MetaPreview/MetaPreview.js @@ -92,9 +92,16 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele return trailerStreams[0].deepLinks.player; }, [trailerStreams]); - const renderLogoFallback = React.useCallback(() => ( - - ), []); + 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 (
{ @@ -106,17 +113,14 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele null }
- { - typeof logo === 'string' && logo.length > 0 ? - {' - : - null - } +
+ {name} +
{ (typeof releaseInfo === 'string' && releaseInfo.length > 0) || (released instanceof Date && !isNaN(released.getTime())) || (typeof runtime === 'string' && runtime.length > 0) || linksGroups.has(CONSTANTS.IMDB_LINK_CATEGORY) ?
@@ -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 ?
{name}
@@ -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 ?
{description}
: 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) => ( Date: Fri, 4 Feb 2022 16:48:47 +0200 Subject: [PATCH 2/4] Add Missing Semicolon --- src/common/MetaPreview/MetaPreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js index e6c042c40..5bc9181f1 100644 --- a/src/common/MetaPreview/MetaPreview.js +++ b/src/common/MetaPreview/MetaPreview.js @@ -101,7 +101,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele // show img.alt without broken image icon currentTarget.className = styles['missing']; } - } + }; return (
{ From 8e327b4f38b3bad80e0e4dceb8b676604d8aaade Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Mon, 9 May 2022 16:12:05 +0300 Subject: [PATCH 3/4] not needed css classes removed --- src/common/MetaPreview/styles.less | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less index b732cc473..d85229237 100644 --- a/src/common/MetaPreview/styles.less +++ b/src/common/MetaPreview/styles.less @@ -89,23 +89,6 @@ 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 { height: 8rem; object-fit: contain; From ce48686ff29ff4a13d4da1a83043fa601b8c33f4 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Mon, 9 May 2022 16:12:41 +0300 Subject: [PATCH 4/4] WRITERS_LINK_CATEGORY moved to constants --- src/common/CONSTANTS.js | 2 ++ src/common/MetaPreview/MetaPreview.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js index cceb3d723..e755790bb 100644 --- a/src/common/CONSTANTS.js +++ b/src/common/CONSTANTS.js @@ -11,6 +11,7 @@ const SKIP_EXTRA_NAME = 'skip'; const META_LINK_CATEGORY = 'meta'; const IMDB_LINK_CATEGORY = 'imdb'; const SHARE_LINK_CATEGORY = 'share'; +const WRITERS_LINK_CATEGORY = 'Writers'; const TYPE_PRIORITIES = { movie: 10, series: 9, @@ -37,5 +38,6 @@ module.exports = { META_LINK_CATEGORY, IMDB_LINK_CATEGORY, SHARE_LINK_CATEGORY, + WRITERS_LINK_CATEGORY, TYPE_PRIORITIES }; diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js index cd5fb6a7e..ee1b2bcf5 100644 --- a/src/common/MetaPreview/MetaPreview.js +++ b/src/common/MetaPreview/MetaPreview.js @@ -174,7 +174,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele .filter((category) => { return category !== CONSTANTS.IMDB_LINK_CATEGORY && category !== CONSTANTS.SHARE_LINK_CATEGORY && - category !== 'Writers'; + category !== CONSTANTS.WRITERS_LINK_CATEGORY; }) .map((category, index) => (