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,15 +29,22 @@ function FileViewerEmbeddedTitle(props: Props) {
   return (
     <div className="file-viewer__embedded-header">
       <div className="file-viewer__embedded-gradient" />
-      <Button
-        label={title}
-        aria-label={title}
-        button="link"
-        className="file-viewer__embedded-title"
-        {...contentLinkProps}
-      />
+      {preferEmbed ? (
+        <div className="file-viewer__embedded-title ">
+          <span dir="auto">{title}</span>
+        </div>
+      ) : (
+        <Button
+          label={title}
+          aria-label={title}
+          button="link"
+          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">
-          <ClaimPreview
-            hideRepostLabel
-            showNullPlaceholder
-            uri={winningUri}
-            properties={claim => (
-              <span className="claim-preview__custom-properties">
-                <ClaimRepostAuthor short uri={winningUri} />
-                <ClaimEffectiveAmount uri={winningUri} />
-              </span>
-            )}
-          />
+          {preferEmbed && (
+            <ClaimPreview
+              hideRepostLabel
+              showNullPlaceholder
+              uri={winningUri}
+              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,21 +38,28 @@ 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>
-      <div className="file-viewer__overlay-title file-viewer_embed-ended-title">{prompt}</div>
-      <div className="file-viewer__overlay-actions">
-        <Button label={__('Rewatch or Discuss')} button="primary" href={lbrytvLink} />
-        {!isAuthenticated && (
-          <Button
-            label={__('Join %SITE_NAME%', { SITE_NAME })}
-            button="secondary"
-            href={`${URL}/$/signup?src=embed_signup`}
-          />
-        )}
-      </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
+                  label={__('Join %SITE_NAME%', { SITE_NAME })}
+                  button="secondary"
+                  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;
 }