Change premium badge position on channel page (#1677)

ui/page/channel/index.js

@@ -6,6 +6,7 @@ import {
   selectCurrentChannelPage,
   selectClaimForUri,
   makeSelectClaimIsPending,
+  selectOdyseeMembershipForChannelId,
 } from 'redux/selectors/claims';
 import { selectMyUnpublishedCollections } from 'redux/selectors/collections';
 import { selectBlacklistedOutpointMap, doFetchSubCount, selectSubCountForUri } from 'lbryinc';
@@ -37,6 +38,7 @@ const select = (state, props) => {
     mutedChannels: selectMutedChannels(state),
     unpublishedCollections: selectMyUnpublishedCollections(state),
     lang: selectLanguage(state),
+    odyseeMembership: selectOdyseeMembershipForChannelId(state, claim.claim_id),
   };
 };
 

ui/page/channel/view.jsx

@@ -28,6 +28,7 @@ import TruncatedText from 'component/common/truncated-text';
 import PlaceholderTx from 'static/img/placeholderTx.gif';
 import Tooltip from 'component/common/tooltip';
 import { toCompactNotation } from 'util/string';
+import PremiumBadge from 'component/common/premium-badge';
 
 export const PAGE_VIEW_QUERY = `view`;
 export const DISCUSSION_PAGE = `discussion`;
@@ -60,6 +61,7 @@ type Props = {
   mutedChannels: Array<string>,
   unpublishedCollections: CollectionGroup,
   lang: string,
+  odyseeMembership: string,
 };
 
 function ChannelPage(props: Props) {
@@ -80,6 +82,7 @@ function ChannelPage(props: Props) {
     mutedChannels,
     unpublishedCollections,
     lang,
+    odyseeMembership,
   } = props;
   const {
     push,
@@ -241,7 +244,6 @@ function ChannelPage(props: Props) {
             className="channel__thumbnail--channel-page"
             uri={uri}
             allowGifs
-            showMemberBadge
             isChannel
             hideStakedIndicator
           />
@@ -249,6 +251,7 @@ function ChannelPage(props: Props) {
             <TruncatedText lines={2} showTooltip>
               {title || (channelName && '@' + channelName)}
             </TruncatedText>
+            <PremiumBadge membership={odyseeMembership} />
           </h1>
           <div className="channel__meta">
             <Tooltip title={formattedSubCount} followCursor placement="top">

ui/scss/component/_channel.scss

@@ -393,6 +393,12 @@ $actions-z-index: 2;
     }
   }
 
+  .channel__title {
+    .comment__badge {
+      margin-left: var(--spacing-s);
+    }
+  }
+
   @media (max-width: $breakpoint-small) {
     padding-left: var(--spacing-m);
     margin-top: calc(var(--channel-thumbnail-width) + var(--spacing-l));