From 6ca058c3a11ff73ed6ee6ccaf3d03f580c5928d6 Mon Sep 17 00:00:00 2001 From: jessopb <36554050+jessopb@users.noreply.github.com> Date: Sat, 18 Sep 2021 10:23:30 -0400 Subject: [PATCH] support embed preference (#7114) * support embed preference * title color --- ui/component/button/view.jsx | 1 + ui/component/fileViewerEmbeddedTitle/index.js | 4 ++- ui/component/fileViewerEmbeddedTitle/view.jsx | 26 +++++++++----- ui/component/searchTopClaim/view.jsx | 30 +++++++++------- ui/component/wunderbarTopSuggestion/index.js | 14 ++++++-- ui/component/wunderbarTopSuggestion/view.jsx | 5 +-- ui/constants/tags.js | 4 ++- ui/scss/component/_embed-player.scss | 4 +-- ui/scss/component/_file-render.scss | 4 +++ .../fileViewerEmbeddedEnded/index.js | 5 ++- .../fileViewerEmbeddedEnded/view.jsx | 34 ++++++++++++------- .../themes/odysee/component/_file-render.scss | 4 ++- 12 files changed, 89 insertions(+), 46 deletions(-) diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx index b8927be06..f17489f08 100644 --- a/ui/component/button/view.jsx +++ b/ui/component/button/view.jsx @@ -154,6 +154,7 @@ const Button = forwardRef((props: Props, ref: any) => { title={title} onClick={onClick} aria-label={ariaLabel} + disabled={disabled} // is there a reason this wasn't here before? > {content} diff --git a/ui/component/fileViewerEmbeddedTitle/index.js b/ui/component/fileViewerEmbeddedTitle/index.js index 513d9dd95..a4b0b43e1 100644 --- a/ui/component/fileViewerEmbeddedTitle/index.js +++ b/ui/component/fileViewerEmbeddedTitle/index.js @@ -1,9 +1,11 @@ import { connect } from 'react-redux'; import fileViewerEmbeddedTitle from './view'; -import { makeSelectTitleForUri } from 'lbry-redux'; +import { makeSelectTagInClaimOrChannelForUri, makeSelectTitleForUri } from 'lbry-redux'; +import { PREFERENCE_EMBED } from 'constants/tags'; export default connect((state, props) => { return { title: makeSelectTitleForUri(props.uri)(state), + preferEmbed: makeSelectTagInClaimOrChannelForUri(props.uri, PREFERENCE_EMBED)(state), }; })(fileViewerEmbeddedTitle); diff --git a/ui/component/fileViewerEmbeddedTitle/view.jsx b/ui/component/fileViewerEmbeddedTitle/view.jsx index 39dfe4d4c..ed726022a 100644 --- a/ui/component/fileViewerEmbeddedTitle/view.jsx +++ b/ui/component/fileViewerEmbeddedTitle/view.jsx @@ -11,10 +11,11 @@ type Props = { uri: string, title: ?string, isInApp: boolean, + preferEmbed: boolean, }; function FileViewerEmbeddedTitle(props: Props) { - const { uri, title, isInApp } = props; + const { uri, title, isInApp, preferEmbed } = props; let contentLink = `${formatLbryUrlForWeb(uri)}`; @@ -28,15 +29,22 @@ function FileViewerEmbeddedTitle(props: Props) { return (
- {isInApp && } diff --git a/ui/component/searchTopClaim/view.jsx b/ui/component/searchTopClaim/view.jsx index 6707a893f..fefc7cbd5 100644 --- a/ui/component/searchTopClaim/view.jsx +++ b/ui/component/searchTopClaim/view.jsx @@ -17,12 +17,13 @@ type Props = { winningUri: ?string, doResolveUris: (Array) => void, hideLink?: boolean, - setChannelActive: boolean => void, - beginPublish: string => void, + setChannelActive: (boolean) => void, + beginPublish: (string) => void, pendingIds: Array, isResolvingWinningUri: boolean, winningClaim: ?Claim, isSearching: boolean, + preferEmbed: boolean, }; export default function SearchTopClaim(props: Props) { @@ -36,6 +37,7 @@ export default function SearchTopClaim(props: Props) { beginPublish, isResolvingWinningUri, isSearching, + preferEmbed, } = props; const uriFromQuery = `lbry://${query}`; const { push } = useHistory(); @@ -88,17 +90,19 @@ export default function SearchTopClaim(props: Props) { )} {winningUri && winningClaim && (
- ( - - - - - )} - /> + {preferEmbed && ( + ( + + + + + )} + /> + )}
)} {!winningUri && (isSearching || isResolvingWinningUri) && ( diff --git a/ui/component/wunderbarTopSuggestion/index.js b/ui/component/wunderbarTopSuggestion/index.js index 32c46b4ef..7c8ec3348 100644 --- a/ui/component/wunderbarTopSuggestion/index.js +++ b/ui/component/wunderbarTopSuggestion/index.js @@ -1,7 +1,14 @@ import { connect } from 'react-redux'; -import { doResolveUris, makeSelectClaimForUri, makeSelectIsUriResolving, parseURI } from 'lbry-redux'; +import { + doResolveUris, + makeSelectClaimForUri, + makeSelectIsUriResolving, + makeSelectTagInClaimOrChannelForUri, + parseURI, +} from 'lbry-redux'; import { makeSelectWinningUriForQuery } from 'redux/selectors/search'; import WunderbarTopSuggestion from './view'; +import { PREFERENCE_EMBED } from 'constants/tags'; const select = (state, props) => { const uriFromQuery = `lbry://${props.query}`; @@ -16,11 +23,12 @@ const select = (state, props) => { } } catch (e) {} - const resolvingUris = uris.some(uri => makeSelectIsUriResolving(uri)(state)); + const resolvingUris = uris.some((uri) => makeSelectIsUriResolving(uri)(state)); const winningUri = makeSelectWinningUriForQuery(props.query)(state); const winningClaim = winningUri ? makeSelectClaimForUri(winningUri)(state) : undefined; + const preferEmbed = makeSelectTagInClaimOrChannelForUri(winningUri, PREFERENCE_EMBED)(state); - return { resolvingUris, winningUri, winningClaim, uris }; + return { resolvingUris, winningUri, winningClaim, uris, preferEmbed }; }; export default connect(select, { diff --git a/ui/component/wunderbarTopSuggestion/view.jsx b/ui/component/wunderbarTopSuggestion/view.jsx index 086fa3db8..b7b8815d4 100644 --- a/ui/component/wunderbarTopSuggestion/view.jsx +++ b/ui/component/wunderbarTopSuggestion/view.jsx @@ -8,10 +8,11 @@ type Props = { doResolveUris: (Array) => void, uris: Array, resolvingUris: boolean, + preferEmbed: boolean, }; export default function WunderbarTopSuggestion(props: Props) { - const { uris, resolvingUris, winningUri, doResolveUris } = props; + const { uris, resolvingUris, winningUri, doResolveUris, preferEmbed } = props; const stringifiedUris = JSON.stringify(uris); React.useEffect(() => { @@ -38,7 +39,7 @@ export default function WunderbarTopSuggestion(props: Props) { ); } - if (!winningUri) { + if (!winningUri || preferEmbed) { return null; } diff --git a/ui/constants/tags.js b/ui/constants/tags.js index 90ede2d84..b923f4491 100644 --- a/ui/constants/tags.js +++ b/ui/constants/tags.js @@ -14,8 +14,10 @@ export const DEFAULT_FOLLOWED_TAGS = [ ]; export const DISABLE_COMMENTS_TAG = 'disable-comments'; +export const DISABLE_SUPPORT_TAG = 'disable-support'; +export const PREFERENCE_EMBED = 'preference-embed'; -export const UTILITY_TAGS = [DISABLE_COMMENTS_TAG]; +export const UTILITY_TAGS = [DISABLE_COMMENTS_TAG, DISABLE_SUPPORT_TAG, PREFERENCE_EMBED]; export const MATURE_TAGS = [ 'porn', diff --git a/ui/scss/component/_embed-player.scss b/ui/scss/component/_embed-player.scss index 2198e8841..59ee8119f 100644 --- a/ui/scss/component/_embed-player.scss +++ b/ui/scss/component/_embed-player.scss @@ -62,6 +62,6 @@ } .embed__overlay-logo { - max-height: 3.5rem; - max-width: 12rem; + max-height: 2rem; + max-width: 7rem; } diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss index ab6020018..83b8995ca 100644 --- a/ui/scss/component/_file-render.scss +++ b/ui/scss/component/_file-render.scss @@ -301,6 +301,10 @@ .file-viewer__embedded-title { max-width: 75%; z-index: 2; + display: flex; + align-items: center; + padding-left: var(--spacing-s); + color: white; } .file-viewer__embedded-info { diff --git a/web/component/fileViewerEmbeddedEnded/index.js b/web/component/fileViewerEmbeddedEnded/index.js index b80fcc9f4..1903aec38 100644 --- a/web/component/fileViewerEmbeddedEnded/index.js +++ b/web/component/fileViewerEmbeddedEnded/index.js @@ -1,7 +1,10 @@ import { connect } from 'react-redux'; import fileViewerEmbeddedEnded from './view'; import { selectUserVerifiedEmail } from 'redux/selectors/user'; +import { makeSelectTagInClaimOrChannelForUri } from 'lbry-redux'; +import { PREFERENCE_EMBED } from 'constants/tags'; -export default connect(state => ({ +export default connect((state, props) => ({ isAuthenticated: selectUserVerifiedEmail(state), + preferEmbed: makeSelectTagInClaimOrChannelForUri(props.uri, PREFERENCE_EMBED)(state), }))(fileViewerEmbeddedEnded); diff --git a/web/component/fileViewerEmbeddedEnded/view.jsx b/web/component/fileViewerEmbeddedEnded/view.jsx index c46b0f5e4..d56a77f27 100644 --- a/web/component/fileViewerEmbeddedEnded/view.jsx +++ b/web/component/fileViewerEmbeddedEnded/view.jsx @@ -9,10 +9,11 @@ import Logo from 'component/logo'; type Props = { uri: string, isAuthenticated: boolean, + preferEmbed: boolean, }; function FileViewerEmbeddedEnded(props: Props) { - const { uri, isAuthenticated } = props; + const { uri, isAuthenticated, preferEmbed } = props; const prompts = isAuthenticated ? { @@ -37,21 +38,28 @@ function FileViewerEmbeddedEnded(props: Props) { return (
-
-
{prompt}
-
-
+ {!preferEmbed && ( + <> +
{prompt}
+
+ { /* add button to replay? */ } + <> +
+ + )}
); } diff --git a/web/scss/themes/odysee/component/_file-render.scss b/web/scss/themes/odysee/component/_file-render.scss index ae8feb4fb..20560bad1 100644 --- a/web/scss/themes/odysee/component/_file-render.scss +++ b/web/scss/themes/odysee/component/_file-render.scss @@ -230,7 +230,8 @@ } .file-viewer__overlay-logo { - height: 3.5rem; + height: 2rem; + max-height: 2rem; //embed logo height? width: 12rem; display: flex; align-items: center; @@ -313,6 +314,7 @@ } .file-viewer__embedded-title { + color: white; max-width: 75%; z-index: 2; }