diff --git a/ui/component/fileSubtitle/view.jsx b/ui/component/fileSubtitle/view.jsx
index 2a51b2171..d0507070f 100644
--- a/ui/component/fileSubtitle/view.jsx
+++ b/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 (
-
+ {livestream ? {__('Right now')} : }
diff --git a/ui/component/fileTitleSection/view.jsx b/ui/component/fileTitleSection/view.jsx
index 1d2ffe1a8..87681856c 100644
--- a/ui/component/fileTitleSection/view.jsx
+++ b/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 (
-
+
}
actions={
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 2125689a3..0af8f65f4 100644
--- a/ui/component/header/view.jsx
+++ b/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}
/>
@@ -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 {
- authenticated,
- notificationsEnabled,
- history,
- handleThemeToggle,
- currentTheme,
- activeChannelUrl,
- openSignOutModal,
- email,
- signOut,
- livestreamEnabled,
- } = props;
+ const { authenticated, notificationsEnabled, history, handleThemeToggle, currentTheme, livestreamEnabled } = props;
return (
@@ -445,14 +426,12 @@ function HeaderMenuButtons(props: HeaderMenuButtonProps) {
{__('New Channel')}
- {/* Go Live Button for LiveStreaming */}
- {(livestreamEnabled) &&(
+ {livestreamEnabled && (
)}
-
)}
diff --git a/ui/component/livestreamLayout/index.js b/ui/component/livestreamLayout/index.js
index eee30cee8..f6fe364e8 100644
--- a/ui/component/livestreamLayout/index.js
+++ b/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);
diff --git a/ui/component/livestreamLayout/view.jsx b/ui/component/livestreamLayout/view.jsx
index 615de675b..8ba4de8b3 100644
--- a/ui/component/livestreamLayout/view.jsx
+++ b/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 (
<>
- {/* */}
+ {isLive ? (
+
+ ) : (
+
+ )}
+ {!isLive && (
+
+ {__("%channel% isn't live right now, but the chat is! Check back later to watch the stream.", {
+ channel: channelName || __('This channel'),
+ })}
+
+ )}
diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss
index 9cca8fcb0..d7d1c22f7 100644
--- a/ui/scss/component/_livestream.scss
+++ b/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);
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index f664335b2..6c11d4961 100644
--- a/ui/scss/component/_media.scss
+++ b/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;