From 372c6d0d9f7a6298324c51a2fb1835eaf7260350 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Mon, 15 Mar 2021 10:32:51 -0400 Subject: [PATCH] rename livestream + livestreamsetup pages --- ui/page/livestream/index.js | 21 +- ui/page/livestream/view.jsx | 316 +++++++++--------------------- ui/page/livestreamSetup/index.js | 12 ++ ui/page/livestreamSetup/view.jsx | 221 +++++++++++++++++++++ ui/page/livestreamStream/index.js | 18 -- ui/page/livestreamStream/view.jsx | 114 ----------- 6 files changed, 341 insertions(+), 361 deletions(-) create mode 100644 ui/page/livestreamSetup/index.js create mode 100644 ui/page/livestreamSetup/view.jsx delete mode 100644 ui/page/livestreamStream/index.js delete mode 100644 ui/page/livestreamStream/view.jsx diff --git a/ui/page/livestream/index.js b/ui/page/livestream/index.js index d5c4f515f..0f8751458 100644 --- a/ui/page/livestream/index.js +++ b/ui/page/livestream/index.js @@ -1,13 +1,18 @@ import { connect } from 'react-redux'; -import { selectMyChannelClaims, selectFetchingMyChannels } from 'lbry-redux'; -import { selectActiveChannelClaim } from 'redux/selectors/app'; -import { doSetActiveChannel } from 'redux/actions/app'; -import CreatorDashboardPage from './view'; +import { doResolveUri } from 'lbry-redux'; +import { doSetPlayingUri } from 'redux/actions/content'; +import { doUserSetReferrer } from 'redux/actions/user'; +import { selectUserVerifiedEmail } from 'redux/selectors/user'; +import { selectHasUnclaimedRefereeReward } from 'redux/selectors/rewards'; +import LivestreamPage from './view'; const select = (state) => ({ - channels: selectMyChannelClaims(state), - fetchingChannels: selectFetchingMyChannels(state), - activeChannelClaim: selectActiveChannelClaim(state), + hasUnclaimedRefereeReward: selectHasUnclaimedRefereeReward(state), + isAuthenticated: selectUserVerifiedEmail(state), }); -export default connect(select, { doSetActiveChannel })(CreatorDashboardPage); +export default connect(select, { + doSetPlayingUri, + doResolveUri, + doUserSetReferrer, +})(LivestreamPage); diff --git a/ui/page/livestream/view.jsx b/ui/page/livestream/view.jsx index 251e5aaa7..83f271598 100644 --- a/ui/page/livestream/view.jsx +++ b/ui/page/livestream/view.jsx @@ -1,240 +1,114 @@ // @flow -import * as PAGES from 'constants/pages'; +// import { LIVE_STREAM_TAG, BITWAVE_API } from 'constants/livestream'; 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 ClaimPreview from '../../component/claimPreview'; -import { FormField } from '../../component/common/form'; -import * as PUBLISH_MODES from '../../constants/publish_types'; +import LivestreamLayout from 'component/livestreamLayout'; +import analytics from 'analytics'; type Props = { - channels: Array, - fetchingChannels: boolean, - activeChannelClaim: ?ChannelClaim, + uri: string, + claim: StreamClaim, + doSetPlayingUri: ({ uri: ?string }) => void, + isAuthenticated: boolean, + doUserSetReferrer: (string) => void, }; -export default function CreatorDashboardPage(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(); +export default function LivestreamPage(props: Props) { + const { uri, claim, doSetPlayingUri, isAuthenticated, doUserSetReferrer } = props; + const [activeViewers, setActiveViewers] = React.useState(0); React.useEffect(() => { - if (activeChannelClaimStr) { - const channelClaim = JSON.parse(activeChannelClaimStr); + // function checkIsLive() { + // fetch(`${BITWAVE_API}/`) + // .then((res) => res.json()) + // .then((res) => { + // if (!res || !res.data) { + // setIsLive(false); + // return; + // } + // setActiveViewers(res.data.viewCount); + // if (res.data.live) { + // setDisplayCountdown(false); + // setIsLive(true); + // setIsFetching(false); + // return; + // } + // // Not live, but see if we can display the countdown; + // const scheduledTime = res.data.scheduled; + // if (scheduledTime) { + // const scheduledDate = new Date(scheduledTime); + // const lastLiveTimestamp = res.data.timestamp; + // let isLivestreamOver = false; + // if (lastLiveTimestamp) { + // const timestampDate = new Date(lastLiveTimestamp); + // isLivestreamOver = timestampDate.getTime() > scheduledDate.getTime(); + // } + // if (isLivestreamOver) { + // setDisplayCountdown(false); + // setIsLive(false); + // } else { + // const datePlusTenMinuteBuffer = scheduledDate.setMinutes(10, 0, 0); + // const isInFuture = Date.now() < datePlusTenMinuteBuffer; + // if (isInFuture) { + // setDisplayCountdown(true); + // setIsLive(false); + // } else { + // setDisplayCountdown(false); + // setIsLive(false); + // } + // } + // setIsFetching(false); + // } else { + // // Offline and no countdown happening + // setIsLive(false); + // setDisplayCountdown(false); + // setActiveViewers(0); + // setIsFetching(false); + // } + // }); + // } + // let interval; + // checkIsLive(); + // if (uri) { + // interval = setInterval(checkIsLive, 10000); + // } + // return () => { + // if (interval) { + // clearInterval(interval); + // } + // }; + }, [uri]); - // ensure we have a channel - if (channelClaim.claim_id) { - Lbry.channel_sign({ - channel_id: channelClaim.claim_id, - hexdata: toHex(channelClaim.name), - }) - .then((data) => { - console.log(data); - setSigData(data); - }) - .catch((error) => { - setSigData({ signature: null, signing_ts: null }); - console.error(error); - }); + const stringifiedClaim = JSON.stringify(claim); + React.useEffect(() => { + if (uri && stringifiedClaim) { + const jsonClaim = JSON.parse(stringifiedClaim); + + if (jsonClaim) { + const { txid, nout, claim_id: claimId } = jsonClaim; + const outpoint = `${txid}:${nout}`; + + analytics.apiLogView(uri, outpoint, claimId); + } + + if (!isAuthenticated) { + const uri = jsonClaim.signing_channel && jsonClaim.signing_channel.permanent_url; + if (uri) { + doUserSetReferrer(uri.replace('lbry://', '')); + } } } - }, [ 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 LIVE_STREAM_TAG = 'odysee-livestream'; - - const [isFetching, setIsFetching] = React.useState(true); - const [isLive, setIsLive] = React.useState(false); - const [livestreamClaim, setLivestreamClaim] = React.useState(false); - const [livestreamClaims, setLivestreamClaims] = React.useState([]); + }, [uri, stringifiedClaim, isAuthenticated]); React.useEffect(() => { - if (!activeChannelClaimStr) return; - - const channelClaim = JSON.parse(activeChannelClaimStr); - - Lbry.claim_search({ - channel_ids: [channelClaim.claim_id], - any_tags: [LIVE_STREAM_TAG], - claim_type: ['stream'], - }) - .then((res) => { - if (res && res.items && res.items.length > 0) { - const claim = res.items[res.items.length - 1]; - setLivestreamClaim(claim); - setLivestreamClaims(res.items.reverse()); - } else { - setIsFetching(false); - } - }) - .catch(() => { - setIsFetching(false); - }); - }, [activeChannelClaimStr]); + // Set playing uri to null so the popout player doesnt start playing the dummy claim if a user navigates back + // This can be removed when we start using the app video player, not a bitwave iframe + doSetPlayingUri({ uri: null }); + }, [doSetPlayingUri]); return ( - - {fetchingChannels && ( -
- -
- )} - - {!fetchingChannels && !hasChannels && ( - -