- {__('Right now')} : {__('%viewer_count% currently watching', { viewer_count: activeViewers })}
+ ) : (
+
diff --git a/ui/component/fileTitleSection/view.jsx b/ui/component/fileTitleSection/view.jsx
index 1d2ffe1a8..57d679fe4 100644
--- a/ui/component/fileTitleSection/view.jsx
+++ b/ui/component/fileTitleSection/view.jsx
@@ -18,10 +18,12 @@ type Props = {
title: string,
nsfw: boolean,
isNsfwBlocked: boolean,
+ livestream?: boolean,
+ activeViewers?: number,
};
function FileTitleSection(props: Props) {
- const { title, uri, nsfw, isNsfwBlocked } = props;
+ const { title, uri, nsfw, isNsfwBlocked, livestream = false, activeViewers } = props;
return (
)}
@@ -391,10 +393,11 @@ type HeaderMenuButtonProps = {
history: { push: (string) => void },
handleThemeToggle: (string) => void,
currentTheme: string,
+ livestreamEnabled: boolean,
};
function HeaderMenuButtons(props: HeaderMenuButtonProps) {
- const { authenticated, notificationsEnabled, history, handleThemeToggle, currentTheme } = props;
+ const { authenticated, notificationsEnabled, history, handleThemeToggle, currentTheme, livestreamEnabled } = props;
return (
@@ -422,6 +425,13 @@ function HeaderMenuButtons(props: HeaderMenuButtonProps) {
{__('New Channel')}
+
+ {livestreamEnabled && (
+
history.push(`/$/${PAGES.LIVESTREAM}`)}>
+
+ )}
)}
diff --git a/ui/component/livestreamComments/index.js b/ui/component/livestreamComments/index.js
new file mode 100644
index 000000000..3c7b7a862
--- /dev/null
+++ b/ui/component/livestreamComments/index.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri } from 'lbry-redux';
+import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket';
+import { doCommentList } from 'redux/actions/comments';
+import { makeSelectTopLevelCommentsForUri, selectIsFetchingComments } from 'redux/selectors/comments';
+import LivestreamFeed from './view';
+
+const select = (state, props) => ({
+ claim: makeSelectClaimForUri(props.uri)(state),
+ comments: makeSelectTopLevelCommentsForUri(props.uri)(state),
+ fetchingComments: selectIsFetchingComments(state),
+});
+
+export default connect(select, { doCommentSocketConnect, doCommentSocketDisconnect, doCommentList })(LivestreamFeed);
diff --git a/ui/component/livestreamComments/view.jsx b/ui/component/livestreamComments/view.jsx
new file mode 100644
index 000000000..7b94dea23
--- /dev/null
+++ b/ui/component/livestreamComments/view.jsx
@@ -0,0 +1,146 @@
+// @flow
+import React from 'react';
+import classnames from 'classnames';
+import Card from 'component/common/card';
+import Spinner from 'component/spinner';
+import CommentCreate from 'component/commentCreate';
+import Button from 'component/button';
+import MarkdownPreview from 'component/common/markdown-preview';
+
+type Props = {
+ uri: string,
+ claim: ?StreamClaim,
+ activeViewers: number,
+ embed?: boolean,
+ doCommentSocketConnect: (string, string) => void,
+ doCommentSocketDisconnect: (string) => void,
+ doCommentList: (string) => void,
+ comments: Array
,
+ fetchingComments: boolean,
+};
+
+export default function LivestreamFeed(props: Props) {
+ const {
+ claim,
+ uri,
+ embed,
+ doCommentSocketConnect,
+ doCommentSocketDisconnect,
+ comments,
+ doCommentList,
+ fetchingComments,
+ } = props;
+ const commentsRef = React.createRef();
+ const hasScrolledComments = React.useRef();
+ const [performedInitialScroll, setPerformedInitialScroll] = React.useState(false);
+ const claimId = claim && claim.claim_id;
+ const commentsLength = comments && comments.length;
+
+ React.useEffect(() => {
+ if (claimId) {
+ doCommentList(uri);
+ doCommentSocketConnect(uri, claimId);
+ }
+
+ return () => {
+ if (claimId) {
+ doCommentSocketDisconnect(claimId);
+ }
+ };
+ }, [claimId, uri, doCommentList, doCommentSocketConnect, doCommentSocketDisconnect]);
+
+ React.useEffect(() => {
+ const element = commentsRef.current;
+
+ function handleScroll() {
+ if (element) {
+ const scrollHeight = element.scrollHeight - element.offsetHeight;
+ const isAtBottom = scrollHeight === element.scrollTop;
+
+ if (!isAtBottom) {
+ hasScrolledComments.current = true;
+ } else {
+ hasScrolledComments.current = false;
+ }
+ }
+ }
+
+ if (element) {
+ element.addEventListener('scroll', handleScroll);
+
+ if (commentsLength > 0) {
+ // Only update comment scroll if the user hasn't scrolled up to view old comments
+ // If they have, do nothing
+ if (!hasScrolledComments.current || !performedInitialScroll) {
+ element.scrollTop = element.scrollHeight - element.offsetHeight;
+
+ if (!performedInitialScroll) {
+ setPerformedInitialScroll(true);
+ }
+ }
+ }
+ }
+
+ return () => {
+ if (element) {
+ element.removeEventListener('scroll', handleScroll);
+ }
+ };
+ }, [commentsRef, commentsLength, performedInitialScroll]);
+
+ if (!claim) {
+ return null;
+ }
+
+ return (
+
+ {fetchingComments && (
+
+
+ )}
+ 0,
+ })}
+ >
+ {!fetchingComments && comments.length > 0 ? (
+
+ {comments.map((comment) => (
+
+ {comment.channel_url ? (
+
+ ) : (
+
{comment.channel_name}
+ )}
+
+
+ ))}
+
+ ) : (
+
+ )}
+
+
+
+ }
+ />
+ );
+}
diff --git a/ui/component/livestreamLayout/index.js b/ui/component/livestreamLayout/index.js
new file mode 100644
index 000000000..f6fe364e8
--- /dev/null
+++ b/ui/component/livestreamLayout/index.js
@@ -0,0 +1,10 @@
+import { connect } from 'react-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
new file mode 100644
index 000000000..85c35cd0c
--- /dev/null
+++ b/ui/component/livestreamLayout/view.jsx
@@ -0,0 +1,49 @@
+// @flow
+import { BITWAVE_EMBED_URL } from 'constants/livestream';
+import React from 'react';
+import FileTitleSection from 'component/fileTitleSection';
+import LivestreamComments from 'component/livestreamComments';
+
+type Props = {
+ uri: string,
+ claim: ?StreamClaim,
+ isLive: boolean,
+ activeViewers: number,
+};
+
+export default function LivestreamLayout(props: Props) {
+ const { claim, uri, isLive, activeViewers } = props;
+
+ if (!claim || !claim.signing_channel) {
+ return null;
+ }
+
+ const channelName = claim.signing_channel.name;
+ const channelClaimId = claim.signing_channel.claim_id;
+
+ return (
+ <>
+
+
+
+ {!isLive && (
+
+ {__("%channel% isn't live right now, but the chat is! Check back later to watch the stream.", {
+ channel: channelName || __('This channel'),
+ })}
+
+ )}
+
+
void,
- resolveUri: string => void,
+ resolveUri: (string) => void,
scrollToTop: () => void,
prepareEdit: (claim: any, uri: string) => void,
resetThumbnailStatus: () => void,
amountNeededForTakeover: ?number,
// Add back type
- updatePublishForm: any => void,
- checkAvailability: string => void,
+ updatePublishForm: (any) => void,
+ checkAvailability: (string) => void,
ytSignupPending: boolean,
modal: { id: string, modalProps: {} },
enablePublishPreview: boolean,
@@ -88,13 +90,19 @@ type Props = {
};
function PublishForm(props: Props) {
- const [mode, setMode] = React.useState(PUBLISH_MODES.FILE);
+ // Detect upload type from query in URL
+ const { push, location } = useHistory();
+ const urlParams = new URLSearchParams(location.search);
+ const uploadType = urlParams.get('type');
+
+ // Component state
+ const [mode, setMode] = React.useState(uploadType || PUBLISH_MODES.FILE);
const [autoSwitchMode, setAutoSwitchMode] = React.useState(true);
- // Used to checl if the url name has changed:
+ // Used to check if the url name has changed:
// A new file needs to be provided
const [prevName, setPrevName] = React.useState(false);
- // Used to checl if the file has been modified by user
+ // Used to check if the file has been modified by user
const [fileEdited, setFileEdited] = React.useState(false);
const [prevFileText, setPrevFileText] = React.useState('');
@@ -225,17 +233,61 @@ function PublishForm(props: Props) {
}, [name, activeChannelName, resolveUri, updatePublishForm, checkAvailability]);
useEffect(() => {
- updatePublishForm({ isMarkdownPost: mode === PUBLISH_MODES.POST });
+ updatePublishForm({
+ isMarkdownPost: mode === PUBLISH_MODES.POST,
+ isLivestreamPublish: mode === PUBLISH_MODES.LIVESTREAM,
+ });
}, [mode, updatePublishForm]);
useEffect(() => {
if (incognito) {
updatePublishForm({ channel: undefined });
+
+ // Anonymous livestreams aren't supported
+ if (mode === PUBLISH_MODES.LIVESTREAM) {
+ setMode(PUBLISH_MODES.FILE);
+ }
} else if (activeChannelName) {
updatePublishForm({ channel: activeChannelName });
}
}, [activeChannelName, incognito, updatePublishForm]);
+ useEffect(() => {
+ const _uploadType = uploadType && uploadType.toLowerCase();
+
+ // Default to standard file publish if none specified
+ if (!_uploadType) {
+ setMode(PUBLISH_MODES.FILE);
+ return;
+ }
+
+ // File publish
+ if (_uploadType === PUBLISH_MODES.FILE.toLowerCase()) {
+ setMode(PUBLISH_MODES.FILE);
+ return;
+ }
+ // Post publish
+ if (_uploadType === PUBLISH_MODES.POST.toLowerCase()) {
+ setMode(PUBLISH_MODES.POST);
+ return;
+ }
+ // LiveStream publish
+ if (_uploadType === PUBLISH_MODES.LIVESTREAM.toLowerCase()) {
+ setMode(PUBLISH_MODES.LIVESTREAM);
+ return;
+ }
+
+ // Default to standard file publish
+ setMode(PUBLISH_MODES.FILE);
+ }, [uploadType]);
+
+ useEffect(() => {
+ if (!uploadType) return;
+ const newParams = new URLSearchParams();
+ newParams.set('type', mode.toLowerCase());
+ push({ search: newParams.toString() });
+ }, [mode, uploadType]);
+
// @if TARGET='web'
function createWebFile() {
if (fileText) {
@@ -301,7 +353,7 @@ function PublishForm(props: Props) {
}
}
// Publish file
- if (mode === PUBLISH_MODES.FILE) {
+ if (mode === PUBLISH_MODES.FILE || mode === PUBLISH_MODES.LIVESTREAM) {
runPublish = true;
}
@@ -330,7 +382,7 @@ function PublishForm(props: Props) {
// Editing claim uri
return (
-
+
{
+ // $FlowFixMe
setMode(modeName);
}}
className={classnames('button-toggle', { 'button-toggle--active': mode === modeName })}
@@ -373,17 +426,17 @@ function PublishForm(props: Props) {
"Add tags that are relevant to your content so those who're looking for it can find it more easily. If mature content, ensure it is tagged mature. Tag abuse and missing mature tags will not be tolerated."
)}
placeholder={__('gaming, crypto')}
- onSelect={newTags => {
+ onSelect={(newTags) => {
const validatedTags = [];
- newTags.forEach(newTag => {
- if (!tags.some(tag => tag.name === newTag.name)) {
+ newTags.forEach((newTag) => {
+ if (!tags.some((tag) => tag.name === newTag.name)) {
validatedTags.push(newTag);
}
});
updatePublishForm({ tags: [...tags, ...validatedTags] });
}}
- onRemove={clickedTag => {
- const newTags = tags.slice().filter(tag => tag.name !== clickedTag.name);
+ onRemove={(clickedTag) => {
+ const newTags = tags.slice().filter((tag) => tag.name !== clickedTag.name);
updatePublishForm({ tags: newTags });
}}
tagsChosen={tags}
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 63918e4d5..056127b7a 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -36,6 +36,7 @@ import PasswordResetPage from 'page/passwordReset';
import PasswordSetPage from 'page/passwordSet';
import SignInVerifyPage from 'page/signInVerify';
import ChannelsPage from 'page/channels';
+import LiveStreamSetupPage from 'page/livestreamSetup';
import EmbedWrapperPage from 'page/embedWrapper';
import TopPage from 'page/top';
import Welcome from 'page/welcome';
@@ -275,6 +276,7 @@ function AppRouter(props: Props) {
+
+ );
+}
diff --git a/ui/page/livestreamSetup/index.js b/ui/page/livestreamSetup/index.js
new file mode 100644
index 000000000..68bf859c1
--- /dev/null
+++ b/ui/page/livestreamSetup/index.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { selectMyChannelClaims, selectFetchingMyChannels } from 'lbry-redux';
+import { selectActiveChannelClaim } from 'redux/selectors/app';
+import LivestreamSetupPage from './view';
+
+const select = (state) => ({
+ channels: selectMyChannelClaims(state),
+ fetchingChannels: selectFetchingMyChannels(state),
+ activeChannelClaim: selectActiveChannelClaim(state),
+});
+
+export default connect(select)(LivestreamSetupPage);
diff --git a/ui/page/livestreamSetup/view.jsx b/ui/page/livestreamSetup/view.jsx
new file mode 100644
index 000000000..fb1b8b0a3
--- /dev/null
+++ b/ui/page/livestreamSetup/view.jsx
@@ -0,0 +1,210 @@
+// @flow
+import * as PAGES from 'constants/pages';
+import * as PUBLISH_MODES from 'constants/publish_types';
+import React from 'react';
+import Page from 'component/page';
+import Spinner from 'component/spinner';
+import Button from 'component/button';
+import ChannelSelector from 'component/channelSelector';
+import Yrbl from 'component/yrbl';
+import { Lbry } from 'lbry-redux';
+import { toHex } from 'util/hex';
+import { FormField } from 'component/common/form';
+import CopyableText from 'component/copyableText';
+import Card from 'component/common/card';
+import ClaimList from 'component/claimList';
+
+type Props = {
+ channels: Array,
+ fetchingChannels: boolean,
+ activeChannelClaim: ?ChannelClaim,
+};
+
+export default function LivestreamSetupPage(props: Props) {
+ const { channels, fetchingChannels, activeChannelClaim } = props;
+
+ const [sigData, setSigData] = React.useState({ signature: undefined, signing_ts: undefined });
+
+ const hasChannels = channels && channels.length > 0;
+ const activeChannelClaimStr = JSON.stringify(activeChannelClaim);
+ const streamKey = createStreamKey();
+
+ React.useEffect(() => {
+ if (activeChannelClaimStr) {
+ const channelClaim = JSON.parse(activeChannelClaimStr);
+
+ // ensure we have a channel
+ if (channelClaim.claim_id) {
+ Lbry.channel_sign({
+ channel_id: channelClaim.claim_id,
+ hexdata: toHex(channelClaim.name),
+ })
+ .then((data) => {
+ setSigData(data);
+ })
+ .catch((error) => {
+ setSigData({ signature: null, signing_ts: null });
+ });
+ }
+ }
+ }, [activeChannelClaimStr, setSigData]);
+
+ function createStreamKey() {
+ if (!activeChannelClaim || !sigData.signature || !sigData.signing_ts) return null;
+ return `${activeChannelClaim.claim_id}?d=${toHex(activeChannelClaim.name)}&s=${sigData.signature}&t=${
+ sigData.signing_ts
+ }`;
+ }
+
+ const [livestreamClaims, setLivestreamClaims] = React.useState([]);
+
+ React.useEffect(() => {
+ if (!activeChannelClaimStr) return;
+
+ const channelClaim = JSON.parse(activeChannelClaimStr);
+
+ Lbry.claim_search({
+ channel_ids: [channelClaim.claim_id],
+ has_no_source: true,
+ claim_type: ['stream'],
+ })
+ .then((res) => {
+ if (res && res.items && res.items.length > 0) {
+ setLivestreamClaims(res.items.reverse());
+ } else {
+ setLivestreamClaims([]);
+ }
+ })
+ .catch(() => {
+ setLivestreamClaims([]);
+ });
+ }, [activeChannelClaimStr]);
+
+ return (
+
+ {fetchingChannels && (
+
+
+ )}
+
+ {!fetchingChannels && !hasChannels && (
+
+
+ {!fetchingChannels && activeChannelClaim && (
+ <>
+
+
+ {streamKey && livestreamClaims.length > 0 && (
+
+ claim.permanent_url)}
+ />
+ ) : (
+
+
+
Debug Info
+
+ {/* Channel ID */}
+