Revert claim preview + fix small css issue + export named function

ui/component/claimPreview/index.js

@@ -22,23 +22,21 @@ import { doResolveUri } from 'redux/actions/claims';
 import { doCollectionEdit } from 'redux/actions/collections';
 import { doFileGet } from 'redux/actions/file';
 import { selectBanStateForUri } from 'lbryinc';
+import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import ClaimPreview from './view';
 import formatMediaDuration from 'util/formatMediaDuration';
-import { selectActiveChannelClaim } from 'redux/selectors/app';
 
 const select = (state, props) => {
   const claim = props.uri && selectClaimForUri(state, props.uri);
-  const { claim_id: channelId } = selectActiveChannelClaim(state) || {};
   const media = claim && claim.value && (claim.value.video || claim.value.audio);
   const mediaDuration = media && media.duration && formatMediaDuration(media.duration, { screenReader: true });
 
   return {
     claim,
     mediaDuration,
-    channelId,
     date: props.uri && selectDateForUri(state, props.uri),
     title: props.uri && makeSelectTitleForUri(props.uri)(state),
     pending: props.uri && makeSelectClaimIsPending(props.uri)(state),
@@ -54,6 +52,7 @@ const select = (state, props) => {
     streamingUrl: props.uri && makeSelectStreamingUrlForUri(props.uri)(state),
     wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
     isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+    isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
     isCollectionMine: makeSelectCollectionIsMine(props.collectionId)(state),
     collectionUris: makeSelectUrlsForCollectionId(props.collectionId)(state),
     collectionIndex: makeSelectIndexForUrlInCollection(props.uri, props.collectionId)(state),

ui/component/claimPreview/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import type { Node } from 'react';
-import React, { useEffect, forwardRef, useState } from 'react';
+import React, { useEffect, forwardRef } from 'react';
 import { NavLink, withRouter } from 'react-router-dom';
 import { isEmpty } from 'util/object';
 import { lazyImport } from 'util/lazyImport';
@@ -31,7 +31,6 @@ import ClaimPreviewNoContent from './claim-preview-no-content';
 import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
 import Button from 'component/button';
 import * as ICONS from 'constants/icons';
-import watchLivestreamStatus from '$web/src/livestreaming/long-polling';
 
 const AbandonedChannelPreview = lazyImport(() =>
   import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)
@@ -41,7 +40,6 @@ const AbandonedChannelPreview = lazyImport(() =>
 type Props = {
   uri: string,
   claim: ?Claim,
-  channelId: string,
   active: boolean,
   obscureNsfw: boolean,
   showUserBlocked: boolean,
@@ -76,6 +74,7 @@ type Props = {
   repostUrl?: string,
   hideMenu?: boolean,
   isLivestream?: boolean,
+  isLivestreamActive: boolean,
   collectionId?: string,
   editCollection: (string, CollectionEditParams) => void,
   isCollectionMine: boolean,
@@ -93,7 +92,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     // core
     uri,
     claim,
-    channelId,
     isResolvingUri,
     // core actions
     getFile,
@@ -138,6 +136,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     hideMenu = false,
     // repostUrl,
     isLivestream,
+    isLivestreamActive,
     collectionId,
     collectionIndex,
     editCollection,
@@ -148,13 +147,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     channelSubCount,
   } = props;
 
-  const [isLivestreamActive, setIsLivestreamActive] = useState(false);
-
-  useEffect(() => {
-    if (!isLivestream) return;
-    return watchLivestreamStatus(channelId, (state) => setIsLivestreamActive(state));
-  }, [channelId, setIsLivestreamActive, isLivestream]);
-
   const isCollection = claim && claim.value_type === 'collection';
   const collectionClaimId = isCollection && claim && claim.claim_id;
   const listId = collectionId || collectionClaimId;
@@ -491,7 +483,8 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
           </div>
         </div>
 
-        {claim && isLivestream && isLivestreamActive && <ClaimPreviewReset uri={uri} />}
+        {/* Todo: check isLivestreamActive once we have that data consistently everywhere. */}
+        {claim && isLivestream && <ClaimPreviewReset uri={uri} />}
 
         {!hideMenu && <ClaimMenuList uri={uri} collectionId={listId} />}
       </>

ui/scss/component/claim-preview-reset.scss

@@ -3,6 +3,7 @@
 .claimPreviewReset {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding-top: var(--spacing-xs);
   color: var(--color-text-subtitle);
   font-size: var(--font-small);

web/src/livestreaming/long-polling.js

@@ -60,8 +60,11 @@ const generateLongPoll = (channelId: string) => {
   return pollers[channelId];
 };
 
-export default (channelId: string, cb: (boolean) => void) => {
+const watchLivestreamStatus = (channelId: ?string, cb: (boolean) => void) => {
+  if (!channelId || typeof cb !== 'function') return undefined;
   const poll = generateLongPoll(channelId);
   const subscriberIndex = poll.connect(cb);
   return () => poll.disconnect(subscriberIndex);
 };
+
+export default watchLivestreamStatus;