Add share buttons on channel page

ui/component/embedTextArea/view.jsx

@@ -14,14 +14,15 @@ type Props = {
   includeStartTime: boolean,
   startTime: number,
   referralCode: ?string,
+  newestType?: boolean,
 };
 
 export default function EmbedTextArea(props: Props) {
-  const { doToast, snackMessage, label, claim, includeStartTime, startTime, referralCode } = props;
+  const { doToast, snackMessage, label, claim, includeStartTime, startTime, referralCode, newestType } = props;
   const { claim_id: claimId, name } = claim;
   const input = useRef();
 
-  const streamUrl = generateEmbedUrl(name, claimId, includeStartTime && startTime, referralCode);
+  const streamUrl = generateEmbedUrl(name, claimId, includeStartTime && startTime, referralCode, newestType);
   const { html: embedText } = generateEmbedIframeData(streamUrl);
 
   function copyToClipboard() {

ui/component/socialShare/index.js

@@ -1,18 +1,26 @@
 import { connect } from 'react-redux';
 import { doFetchInviteStatus } from 'redux/actions/user';
-import { makeSelectClaimForUri, selectTitleForUri } from 'redux/selectors/claims';
+import { selectClaimForUri, selectTitleForUri } from 'redux/selectors/claims';
 import SocialShare from './view';
 import { selectUserInviteReferralCode, selectUser, selectUserInviteStatusFetched } from 'redux/selectors/user';
 import { selectContentPositionForUri } from 'redux/selectors/content';
+import { selectActiveLivestreamForChannel } from 'redux/selectors/livestream';
 
-const select = (state, props) => ({
+const select = (state, props) => {
-  claim: makeSelectClaimForUri(props.uri)(state),
+  const { uri } = props;
-  inviteStatusFetched: selectUserInviteStatusFetched(state),
+  const claim = selectClaimForUri(state, uri);
-  referralCode: selectUserInviteReferralCode(state),
+  const { claim_id: claimId } = claim || {};
-  user: selectUser(state),
+
-  title: selectTitleForUri(state, props.uri),
+  return {
-  position: selectContentPositionForUri(state, props.uri),
+    claim,
-});
+    inviteStatusFetched: selectUserInviteStatusFetched(state),
+    referralCode: selectUserInviteReferralCode(state),
+    user: selectUser(state),
+    title: selectTitleForUri(state, uri),
+    position: selectContentPositionForUri(state, uri),
+    hasActiveLivestream: Boolean(selectActiveLivestreamForChannel(state, claimId)),
+  };
+};
 
 const perform = {
   doFetchInviteStatus,

ui/component/socialShare/view.jsx

@@ -1,11 +1,12 @@
 // @flow
 import * as ICONS from 'constants/icons';
+import * as PAGES from 'constants/pages';
 import React from 'react';
 import Button from 'component/button';
 import CopyableText from 'component/copyableText';
 import EmbedTextArea from 'component/embedTextArea';
 import Spinner from 'component/spinner';
-import { generateDownloadUrl } from 'util/web';
+import { generateDownloadUrl, generateNewestUrl } from 'util/web';
 import { useIsMobile } from 'effects/use-screensize';
 import { FormField } from 'component/common/form';
 import { hmsToSeconds, secondsToHms } from 'util/time';
@@ -28,6 +29,7 @@ type Props = {
   user: any,
   position: number,
   collectionId?: number,
+  hasActiveLivestream: boolean,
   doFetchInviteStatus: (boolean) => void,
 };
 
@@ -41,6 +43,7 @@ function SocialShare(props: Props) {
     webShareable,
     position,
     collectionId,
+    hasActiveLivestream,
     doFetchInviteStatus,
   } = props;
   const [showEmbed, setShowEmbed] = React.useState(false);
@@ -191,7 +194,7 @@ function SocialShare(props: Props) {
           title={__('Share on Facebook')}
           href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
         />
-        {webShareable && !isCollection && !isChannel && (
+        {webShareable && !isCollection && (
           <Button
             className="share"
             iconSize={24}
@@ -220,18 +223,32 @@ function SocialShare(props: Props) {
           <Button icon={ICONS.SHARE} button="primary" label={__('Share via...')} onClick={handleWebShareClick} />
         </div>
       )}
-      {showEmbed && (
+      {showEmbed &&
-        <EmbedTextArea
+        (!isChannel ? (
-          label={__('Embedded')}
+          <EmbedTextArea
-          claim={claim}
+            label={__('Embedded')}
-          includeStartTime={includeStartTime}
+            claim={claim}
-          startTime={startTimeSeconds}
+            includeStartTime={includeStartTime}
-          referralCode={referralCode}
+            startTime={startTimeSeconds}
-        />
+            referralCode={referralCode}
-      )}
+          />
+        ) : (
+          <>
+            <EmbedTextArea label={__('Embedded Latest Video Content')} claim={claim} newestType={PAGES.LATEST} />
+            {hasActiveLivestream && (
+              <EmbedTextArea label={__('Embedded Current Livestream')} claim={claim} newestType={PAGES.LIVE_NOW} />
+            )}
+          </>
+        ))}
       {showClaimLinks && (
         <div className="section">
           {Boolean(isStream) && <CopyableText label={__('Download Link')} copyable={downloadUrl} />}
+          {Boolean(isChannel) && (
+            <CopyableText label={__('Latest Content Link')} copyable={generateNewestUrl(name, PAGES.LATEST)} />
+          )}
+          {Boolean(isChannel) && hasActiveLivestream && (
+            <CopyableText label={__('Current Livestream Link')} copyable={generateNewestUrl(name, PAGES.LIVE_NOW)} />
+          )}
         </div>
       )}
     </React.Fragment>

ui/util/web.js

@@ -2,7 +2,7 @@ const { URL, THUMBNAIL_CARDS_CDN_URL } = require('../../config');
 
 const CONTINENT_COOKIE = 'continent';
 
-function generateEmbedUrl(claimName, claimId, startTime, referralLink) {
+function generateEmbedUrl(claimName, claimId, startTime, referralLink, newestType) {
   let urlParams = new URLSearchParams();
 
   if (startTime) {
@@ -15,7 +15,12 @@ function generateEmbedUrl(claimName, claimId, startTime, referralLink) {
 
   const encodedUriName = encodeURIComponent(claimName).replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29');
 
-  const embedUrl = `${URL}/$/embed/${escapeHtmlProperty(encodedUriName)}/${escapeHtmlProperty(claimId)}`;
+  let embedUrl;
+  if (newestType) {
+    embedUrl = `${URL}/$/embed/${escapeHtmlProperty(encodedUriName)}?feature=${newestType}`;
+  } else {
+    embedUrl = `${URL}/$/embed/${escapeHtmlProperty(encodedUriName)}/${escapeHtmlProperty(claimId)}`;
+  }
   const embedUrlParams = urlParams.toString() ? `?${urlParams.toString()}` : '';
 
   return `${embedUrl}${embedUrlParams}`;
@@ -41,6 +46,10 @@ function generateDirectUrl(claimName, claimId) {
   return `${URL}/$/stream/${claimName}/${claimId}`;
 }
 
+function generateNewestUrl(channelName, newestType) {
+  return `${URL}/$/${newestType}/${channelName}`;
+}
+
 function getThumbnailCdnUrl(url) {
   if (
     !THUMBNAIL_CARDS_CDN_URL ||
@@ -95,4 +104,5 @@ module.exports = {
   getThumbnailCdnUrl,
   escapeHtmlProperty,
   unscapeHtmlProperty,
+  generateNewestUrl,
 };