random fixes for livestreaming

ui/component/fileSubtitle/view.jsx

@@ -6,15 +6,16 @@ import FileActions from 'component/fileActions';
 
 type Props = {
   uri: string,
+  livestream?: boolean,
 };
 
 function FileSubtitle(props: Props) {
-  const { uri } = props;
+  const { uri, livestream = false } = props;
 
   return (
     <div className="media__subtitle--between">
       <div className="file__viewdate">
-        <DateTime uri={uri} show={DateTime.SHOW_DATE} />
+        {livestream ? <span>{__('Right now')}</span> : <DateTime uri={uri} show={DateTime.SHOW_DATE} />}
         <FileViewCount uri={uri} />
       </div>
 

ui/component/fileTitleSection/view.jsx

@@ -18,10 +18,11 @@ type Props = {
   title: string,
   nsfw: boolean,
   isNsfwBlocked: boolean,
+  livestream?: boolean,
 };
 
 function FileTitleSection(props: Props) {
-  const { title, uri, nsfw, isNsfwBlocked } = props;
+  const { title, uri, nsfw, isNsfwBlocked, livestream = false } = props;
 
   return (
     <Card
@@ -41,7 +42,7 @@ function FileTitleSection(props: Props) {
       body={
         <React.Fragment>
           <ClaimInsufficientCredits uri={uri} />
-          <FileSubtitle uri={uri} />
+          <FileSubtitle uri={uri} livestream={livestream} />
         </React.Fragment>
       }
       actions={

ui/component/header/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import { LOGO_TITLE, ENABLE_NO_SOURCE_CLAIMS } from 'config';
 import * as ICONS from 'constants/icons';
 import { SETTINGS } from 'lbry-redux';
 import * as PAGES from 'constants/pages';
@@ -10,7 +11,6 @@ import WunderBar from 'component/wunderbar';
 import Icon from 'component/common/icon';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import NavigationButton from 'component/navigationButton';
-import { LOGO_TITLE } from 'config';
 import { useIsMobile } from 'effects/use-screensize';
 import NotificationBubble from 'component/notificationBubble';
 import NotificationHeaderButton from 'component/notificationHeaderButton';
@@ -99,7 +99,7 @@ const Header = (props: Props) => {
   const hasBackout = Boolean(backout);
   const { backLabel, backNavDefault, title: backTitle, simpleTitle: simpleBackTitle } = backout || {};
   const notificationsEnabled = (user && user.experimental_ui) || false;
-  const livestreamEnabled = (user && user.experimental_ui) || false;
+  const livestreamEnabled = (ENABLE_NO_SOURCE_CLAIMS && user && user.experimental_ui) || false;
   const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url;
 
   // Sign out if they click the "x" when they are on the password prompt
@@ -276,10 +276,6 @@ const Header = (props: Props) => {
                     history={history}
                     handleThemeToggle={handleThemeToggle}
                     currentTheme={currentTheme}
-                    activeChannelUrl={activeChannelUrl}
-                    openSignOutModal={openSignOutModal}
-                    email={email}
-                    signOut={signOut}
                     livestreamEnabled={livestreamEnabled}
                   />
                 </div>
@@ -397,26 +393,11 @@ type HeaderMenuButtonProps = {
   history: { push: (string) => void },
   handleThemeToggle: (string) => void,
   currentTheme: string,
-  activeChannelUrl: ?string,
-  openSignOutModal: () => void,
-  email: ?string,
-  signOut: () => void,
   livestreamEnabled: boolean,
 };
 
 function HeaderMenuButtons(props: HeaderMenuButtonProps) {
-  const {
+  const { authenticated, notificationsEnabled, history, handleThemeToggle, currentTheme, livestreamEnabled } = props;
-    authenticated,
-    notificationsEnabled,
-    history,
-    handleThemeToggle,
-    currentTheme,
-    activeChannelUrl,
-    openSignOutModal,
-    email,
-    signOut,
-    livestreamEnabled,
-  } = props;
 
   return (
     <div className="header__buttons">
@@ -445,14 +426,12 @@ function HeaderMenuButtons(props: HeaderMenuButtonProps) {
               {__('New Channel')}
             </MenuItem>
 
-            {/* Go Live Button for LiveStreaming */}
+            {livestreamEnabled && (
-            {(livestreamEnabled) &&(
               <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.LIVESTREAM}`)}>
                 <Icon aria-hidden icon={ICONS.VIDEO} />
                 {__('Go Live')}
               </MenuItem>
             )}
-
           </MenuList>
         </Menu>
       )}

ui/component/livestreamLayout/index.js

@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectClaimForUri, makeSelectThumbnailForUri } from 'lbry-redux';
 import LivestreamLayout from './view';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
+  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
 });
 
 export default connect(select)(LivestreamLayout);

ui/component/livestreamLayout/view.jsx

@@ -1,31 +1,50 @@
 // @flow
-// import { BITWAVE_EMBED_URL } from 'constants/livestream';
+import { BITWAVE_EMBED_URL } from 'constants/livestream';
 import React from 'react';
 import FileTitleSection from 'component/fileTitleSection';
 import LivestreamComments from 'component/livestreamComments';
+import FileThumbnail from 'component/fileThumbnail';
 
 type Props = {
   uri: string,
   claim: ?StreamClaim,
+  isLive: boolean,
   activeViewers: number,
 };
 
 export default function LivestreamLayout(props: Props) {
-  const { claim, uri, activeViewers } = props;
+  const { claim, uri, isLive, activeViewers } = props;
 
   if (!claim) {
     return null;
   }
 
+  const channelName = claim.signing_channel && claim.signing_channel.name;
+
   return (
     <>
       <div className="section card-stack">
         <div className="file-render file-render--video livestream">
           <div className="file-viewer">
-            {/* <iframe src={`${BITWAVE_EMBED_URL}/${'doomtube'}?skin=odysee&autoplay=1`} scrolling="no" allowFullScreen /> */}
+            {isLive ? (
+              <iframe
+                src={`${BITWAVE_EMBED_URL}/${'doomtube'}?skin=odysee&autoplay=1`}
+                scrolling="no"
+                allowFullScreen
+              />
+            ) : (
+              <FileThumbnail uri={uri} />
+            )}
           </div>
         </div>
 
+        {!isLive && (
+          <div className="help--notice">
+            {__("%channel% isn't live right now, but the chat is! Check back later to watch the stream.", {
+              channel: channelName || __('This channel'),
+            })}
+          </div>
+        )}
         <FileTitleSection uri={uri} livestream activeViewers={activeViewers} />
       </div>
       <LivestreamComments uri={uri} />

ui/scss/component/_livestream.scss

@@ -5,6 +5,7 @@
   position: relative;
   border-radius: var(--border-radius);
 
+  .media__thumb,
   iframe {
     overflow: hidden;
     border-radius: var(--border-radius);

ui/scss/component/_media.scss

@@ -4,7 +4,7 @@
 .media__thumb {
   @include thumbnail;
   position: relative;
-  border-radius: var(--card-radius);
+  border-radius: var(--border-radius);
   object-fit: cover;
   background-color: var(--color-placeholder-background);
   background-position: center;