support embed preference (#7114)

* support embed preference

* title color

ui/component/button/view.jsx

@@ -154,6 +154,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
         title={title}
         onClick={onClick}
         aria-label={ariaLabel}
+        disabled={disabled} // is there a reason this wasn't here before?
       >
         {content}
       </a>

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);

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,6 +29,11 @@ function FileViewerEmbeddedTitle(props: Props) {
   return (
     <div className="file-viewer__embedded-header">
       <div className="file-viewer__embedded-gradient" />
+      {preferEmbed ? (
+        <div className="file-viewer__embedded-title ">
+          <span dir="auto">{title}</span>
+        </div>
+      ) : (
         <Button
           label={title}
           aria-label={title}
@@ -35,8 +41,10 @@ function FileViewerEmbeddedTitle(props: Props) {
           className="file-viewer__embedded-title"
           {...contentLinkProps}
         />
+      )}
+
       <div className="file-viewer__embedded-info">
-        <Button className="file-viewer__overlay-logo" aria-label={__('Home')} {...lbryLinkProps}>
+        <Button className="file-viewer__overlay-logo" disabled={preferEmbed} aria-label={__('Home')} {...lbryLinkProps}>
           <Logo type={'embed'} />
         </Button>
         {isInApp && <FilePrice uri={uri} />}

ui/component/searchTopClaim/view.jsx

@@ -17,12 +17,13 @@ type Props = {
   winningUri: ?string,
   doResolveUris: (Array<string>) => void,
   hideLink?: boolean,
-  setChannelActive: boolean => void,
-  beginPublish: string => void,
+  setChannelActive: (boolean) => void,
+  beginPublish: (string) => void,
   pendingIds: Array<string>,
   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 && (
         <div className="card">
+          {preferEmbed && (
             <ClaimPreview
               hideRepostLabel
               showNullPlaceholder
               uri={winningUri}
-            properties={claim => (
+              properties={(claim) => (
                 <span className="claim-preview__custom-properties">
                   <ClaimRepostAuthor short uri={winningUri} />
                   <ClaimEffectiveAmount uri={winningUri} />
                 </span>
               )}
             />
+          )}
         </div>
       )}
       {!winningUri && (isSearching || isResolvingWinningUri) && (

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, {

ui/component/wunderbarTopSuggestion/view.jsx

@@ -8,10 +8,11 @@ type Props = {
   doResolveUris: (Array<string>) => void,
   uris: Array<string>,
   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;
   }
 

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',

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;
 }

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 {

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);

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,12 +38,16 @@ function FileViewerEmbeddedEnded(props: Props) {
   return (
     <div className="file-viewer__overlay">
       <div className="file-viewer__overlay-secondary">
-        <Button className="file-viewer__overlay-logo" href={URL}>
+        <Button className="file-viewer__overlay-logo" href={URL} disabled={preferEmbed}>
           <Logo type={'embed'} />
         </Button>
       </div>
+      {!preferEmbed && (
+        <>
           <div className="file-viewer__overlay-title file-viewer_embed-ended-title">{prompt}</div>
           <div className="file-viewer__overlay-actions">
+            { /* add button to replay? */ }
+            <>
               <Button label={__('Rewatch or Discuss')} button="primary" href={lbrytvLink} />
               {!isAuthenticated && (
                 <Button
@@ -51,7 +56,10 @@ function FileViewerEmbeddedEnded(props: Props) {
                   href={`${URL}/$/signup?src=embed_signup`}
                 />
               )}
+            </>
           </div>
+        </>
+      )}
     </div>
   );
 }

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;
 }