From 35a6843e26da4fad4a65c3d73e1781775c9e11d6 Mon Sep 17 00:00:00 2001 From: kKaskak <117831817+kKaskak@users.noreply.github.com> Date: Mon, 6 Nov 2023 14:40:47 +0200 Subject: [PATCH 1/4] feature: implemented the new pop-up design --- .../Player/NextVideoPopup/NextVideoPopup.js | 13 ++++++- src/routes/Player/NextVideoPopup/styles.less | 39 ++++++++++++++----- src/routes/Player/Player.js | 1 + 3 files changed, 42 insertions(+), 11 deletions(-) diff --git a/src/routes/Player/NextVideoPopup/NextVideoPopup.js b/src/routes/Player/NextVideoPopup/NextVideoPopup.js index bf4c7abda..c8f8474a8 100644 --- a/src/routes/Player/NextVideoPopup/NextVideoPopup.js +++ b/src/routes/Player/NextVideoPopup/NextVideoPopup.js @@ -7,7 +7,7 @@ const { default: Icon } = require('@stremio/stremio-icons/react'); const { Image, Button, CONSTANTS } = require('stremio/common'); const styles = require('./styles'); -const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideoRequested }) => { +const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideoRequested, title }) => { const watchNowButtonRef = React.useRef(null); const [animationEnded, setAnimationEnded] = React.useState(false); const videoName = React.useMemo(() => { @@ -62,6 +62,14 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo { typeof videoName === 'string' ?
+ Next on { title?.split('-')[0]?.trim() } +
+ : + null + } + { + typeof videoName === 'string' ? +
{ videoName }
: @@ -77,7 +85,7 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo }
- @@ -95,6 +103,7 @@ NextVideoPopup.propTypes = { className: PropTypes.string, metaItem: PropTypes.object, nextVideo: PropTypes.object, + title: PropTypes.string, onDismiss: PropTypes.func, onNextVideoRequested: PropTypes.func }; diff --git a/src/routes/Player/NextVideoPopup/styles.less b/src/routes/Player/NextVideoPopup/styles.less index 91709fed0..af564d3cc 100644 --- a/src/routes/Player/NextVideoPopup/styles.less +++ b/src/routes/Player/NextVideoPopup/styles.less @@ -5,8 +5,7 @@ .next-video-popup-container { display: flex; flex-direction: row; - height: 16rem; - width: 40rem; + width: 50rem; animation: slide-fade-in 0.5s ease-in; @keyframes slide-fade-in { @@ -22,7 +21,7 @@ } .poster-container { - flex: 1 1 40%; + flex: 1 1 45%; display: flex; justify-content: center; align-items: center; @@ -45,19 +44,32 @@ } .info-container { - flex: 1 1 70%; + flex: 1 1 55%; display: flex; flex-direction: column; .details-container { flex: auto; - padding: 1.5rem 1.5rem; + padding: 2rem; .name { flex: none; align-self: stretch; max-height: 2.4em; font-weight: 700; + margin-bottom: 1.5rem; + color: var(--primary-accent-color); + + .label { + color: var(--primary-foreground-color); + } + } + + .title { + flex: none; + align-self: stretch; + max-height: 2.4em; + font-weight: 500; margin-bottom: 0.5rem; color: var(--primary-foreground-color); } @@ -65,28 +77,33 @@ .description { color: var(--primary-foreground-color); opacity: 0.5; + max-width: 80%; + padding: 0.5rem 0; } } .buttons-container { display: flex; flex-direction: row; + padding: 0 1rem 2rem; .spacing { flex: 0 0 50%; } .button-container { - flex: 0 0 50%; + flex: 0 0 45%; display: flex; flex-direction: row; align-items: center; justify-content: center; height: 3.5rem; + padding: 0 0.5rem; + margin-left: 1rem; + border-radius: 1.75rem; &.play-button { - border-radius: 0 0 var(--border-radius) 0; - background-color: var(--secondary-accent-color); + background-color: var(--primary-accent-color); .icon { color: var(--primary-foreground-color); @@ -97,7 +114,7 @@ } &:hover { - outline: var(--focus-outline-size) solid var(--secondary-accent-color); + outline: var(--focus-outline-size) solid var(--primary-accent-color); background-color: transparent; } } @@ -118,6 +135,10 @@ color: var(--primary-foreground-color); } + &.dismiss { + opacity: 0.6; + } + &:hover, &:focus { background-color: var(--overlay-color); } diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index da2abda40..9cd78dcac 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -720,6 +720,7 @@ const Player = ({ urlParams, queryParams }) => { nextVideo={player.nextVideo} onDismiss={onDismissNextVideoPopup} onNextVideoRequested={onNextVideoRequested} + title={player?.title} /> : null From 83ac7c648099c1e0e41ed6c02a929e6f7759e8d0 Mon Sep 17 00:00:00 2001 From: kKaskak <117831817+kKaskak@users.noreply.github.com> Date: Mon, 6 Nov 2023 16:09:13 +0200 Subject: [PATCH 2/4] refactor: used metaItem.name instead of passing a prop --- src/routes/Player/NextVideoPopup/NextVideoPopup.js | 4 ++-- src/routes/Player/Player.js | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/routes/Player/NextVideoPopup/NextVideoPopup.js b/src/routes/Player/NextVideoPopup/NextVideoPopup.js index c8f8474a8..77458941a 100644 --- a/src/routes/Player/NextVideoPopup/NextVideoPopup.js +++ b/src/routes/Player/NextVideoPopup/NextVideoPopup.js @@ -7,7 +7,7 @@ const { default: Icon } = require('@stremio/stremio-icons/react'); const { Image, Button, CONSTANTS } = require('stremio/common'); const styles = require('./styles'); -const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideoRequested, title }) => { +const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideoRequested }) => { const watchNowButtonRef = React.useRef(null); const [animationEnded, setAnimationEnded] = React.useState(false); const videoName = React.useMemo(() => { @@ -62,7 +62,7 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo { typeof videoName === 'string' ?
- Next on { title?.split('-')[0]?.trim() } + Next on { metaItem.name }
: null diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 9cd78dcac..da2abda40 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -720,7 +720,6 @@ const Player = ({ urlParams, queryParams }) => { nextVideo={player.nextVideo} onDismiss={onDismissNextVideoPopup} onNextVideoRequested={onNextVideoRequested} - title={player?.title} /> : null From e8c8441e3babf2026a31a27080d6af9784e2979d Mon Sep 17 00:00:00 2001 From: kKaskak <117831817+kKaskak@users.noreply.github.com> Date: Mon, 6 Nov 2023 16:09:53 +0200 Subject: [PATCH 3/4] prop validation deleted --- src/routes/Player/NextVideoPopup/NextVideoPopup.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/Player/NextVideoPopup/NextVideoPopup.js b/src/routes/Player/NextVideoPopup/NextVideoPopup.js index 77458941a..9f577b9e1 100644 --- a/src/routes/Player/NextVideoPopup/NextVideoPopup.js +++ b/src/routes/Player/NextVideoPopup/NextVideoPopup.js @@ -103,7 +103,6 @@ NextVideoPopup.propTypes = { className: PropTypes.string, metaItem: PropTypes.object, nextVideo: PropTypes.object, - title: PropTypes.string, onDismiss: PropTypes.func, onNextVideoRequested: PropTypes.func }; From ef4008ae223c3813743cf43236ba76389878e46f Mon Sep 17 00:00:00 2001 From: kKaskak <117831817+kKaskak@users.noreply.github.com> Date: Mon, 6 Nov 2023 16:12:43 +0200 Subject: [PATCH 4/4] refactor: changed the conditional rendering value --- src/routes/Player/NextVideoPopup/NextVideoPopup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Player/NextVideoPopup/NextVideoPopup.js b/src/routes/Player/NextVideoPopup/NextVideoPopup.js index 9f577b9e1..51dace5f2 100644 --- a/src/routes/Player/NextVideoPopup/NextVideoPopup.js +++ b/src/routes/Player/NextVideoPopup/NextVideoPopup.js @@ -60,7 +60,7 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo
{ - typeof videoName === 'string' ? + typeof metaItem?.name === 'string' ?
Next on { metaItem.name }